diff --git a/ide/src/base-ui/button/LitButton.ts b/ide/src/base-ui/button/LitButton.ts
index e04eb065bbc1bf135fead4bd69ca46a18ecb66f9..18d6703164448240add8e199a8e9e148b0be4e69 100644
--- a/ide/src/base-ui/button/LitButton.ts
+++ b/ide/src/base-ui/button/LitButton.ts
@@ -183,7 +183,7 @@ export class LitButton extends BaseElement {
               opacity: 0.1;
             }
         </style>
-    `
+    `;
   }
 
   initElements(): void {
diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts
index 7aff26a18a59da7fa8e8804b24f27deb168144d3..6178925f7a30110e12902047400fc62d80420888 100644
--- a/ide/src/base-ui/chart/column/LitChartColumn.ts
+++ b/ide/src/base-ui/chart/column/LitChartColumn.ts
@@ -193,7 +193,7 @@ export class LitChartColumn extends BaseElement {
     return this.litChartColumnCfg?.data || [];
   }
 
-  dataSort():void{
+  dataSort(): void {
     if (!this.litChartColumnCfg!.notSort) {
       this.litChartColumnCfg?.data.sort(
         (a, b) => b[this.litChartColumnCfg!.yField] - a[this.litChartColumnCfg!.yField]
@@ -201,7 +201,7 @@ export class LitChartColumn extends BaseElement {
     }
   }
 
-  haveSeriesField():void{
+  haveSeriesField(): void {
     let maxValue = Math.max(...this.litChartColumnCfg!.data.map((it) => it[this.litChartColumnCfg!.yField]));
     maxValue = Math.ceil(maxValue * 0.1) * 10;
     let partWidth = (this.clientWidth - this.offset!.x!) / this.litChartColumnCfg!.data.length;
@@ -249,7 +249,15 @@ export class LitChartColumn extends BaseElement {
     });
   }
 
-  noSeriesField(itemEl:any,y:number,initH:number,maxValue:number,partWidth:number,partHeight:number,reduceGroupIndex:number):void{
+  noSeriesField(
+    itemEl: any,
+    y: number,
+    initH: number,
+    maxValue: number,
+    partWidth: number,
+    partHeight: number,
+    reduceGroupIndex: number
+  ): void {
     this.data.push({
       color: this.litChartColumnCfg!.color(itemEl),
       obj: itemEl,
@@ -318,7 +326,7 @@ export class LitChartColumn extends BaseElement {
           let elements = reduceGroup[reduceGroupKey];
           let initH = 0;
           elements.forEach((itemEl: any, y: number) => {
-            this.noSeriesField(itemEl,y,initH,maxValue,partWidth,partHeight,reduceGroupIndex);
+            this.noSeriesField(itemEl, y, initH, maxValue, partWidth, partHeight, reduceGroupIndex);
             initH += (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue;
           });
         });
diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts
index 5c6da0e9b8fa2c8340f924ace127f137cacea61c..16cfd6c24a9573b92ed8a94b8dc0dd18d0d7c48f 100644
--- a/ide/src/base-ui/chart/pagenation/PageNation.ts
+++ b/ide/src/base-ui/chart/pagenation/PageNation.ts
@@ -91,7 +91,7 @@ export class PageNation {
     });
   }
 
-  createElement(jumpDiv:HTMLElement):void{
+  createElement(jumpDiv: HTMLElement): void {
     // Create input field
     this.inputBox = document.createElement('input');
     this.inputBox.value = this.pageInfo.current;
@@ -210,8 +210,8 @@ export class PageNation {
   }
 
   bindPageList() {
-    this.list.innerHTML = '';// clear ul its contents
-    const { pageSize, current, totalpage } = this.pageInfo;//Clean the ul before each load
+    this.list.innerHTML = ''; // clear ul its contents
+    const { pageSize, current, totalpage } = this.pageInfo; //Clean the ul before each load
     const origin = document.createElement('li');
     origin.dataset.name = 'item';
     this.setElementStyles(origin, {
@@ -308,13 +308,13 @@ export class PageNation {
     }
     if (current == totalpage - 4) {
       // 左边5个 中间 ... 右边2个
-      this.nodeAppendChild(origin,current,span,totalpage);
+      this.nodeAppendChild(origin, current, span, totalpage);
       return true;
     }
     return false;
   }
 
-  nodeAppendChild(origin: HTMLElement,current: number,span: any,totalpage: number):void{
+  nodeAppendChild(origin: HTMLElement, current: number, span: any, totalpage: number): void {
     for (let i = 0; i < 2; i++) {
       this.buildLi(origin, i, current);
     }
@@ -360,13 +360,13 @@ export class PageNation {
     );
   }
 
-  targetName(event:{
+  targetName(event: {
     target: {
       name: string;
       dataset: { name: string };
       innerText: number;
     };
-  }):void{
+  }): void {
     if (event.target.name === 'first') {
       if (this.pageInfo.current === 1) return;
       this.pageInfo.current = 1;
diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts
index ffa1e6c9ca78e511e2831bea45b7519904653d80..e3216705ec8d81ed781d59020ab776467f388cc7 100644
--- a/ide/src/base-ui/chart/pie/LitChartPie.ts
+++ b/ide/src/base-ui/chart/pie/LitChartPie.ts
@@ -134,7 +134,7 @@ const initHtmlStyle = `
             margin-right: 5px;
         }
         </style>
-    `
+    `;
 
 @element('lit-chart-pie')
 export class LitChartPie extends BaseElement {
@@ -189,7 +189,7 @@ export class LitChartPie extends BaseElement {
     this.render();
   }
 
-  measureInitialize():void{
+  measureInitialize(): void {
     this.data = [];
     this.radius = (Math.min(this.clientHeight, this.clientWidth) * 0.65) / 2 - 10;
     this.labelsEL!.textContent = '';
@@ -249,7 +249,7 @@ export class LitChartPie extends BaseElement {
     return this.litChartPieConfig;
   }
 
-  addCanvasOnmousemoveEvent():void{
+  addCanvasOnmousemoveEvent(): void {
     this.canvas!.onmousemove = (ev) => {
       let rect = this.getBoundingClientRect();
       let x = ev.pageX - rect.left - this.centerX!;
@@ -353,7 +353,7 @@ export class LitChartPie extends BaseElement {
     }).observe(this);
   }
 
-  handleData():void{
+  handleData(): void {
     this.textRects = [];
     if (this.litChartPieConfig!.showChartLine) {
       this.data.forEach((dataItem) => {
@@ -422,7 +422,7 @@ export class LitChartPie extends BaseElement {
     this.setData(ease);
   }
 
-  setData(ease: boolean):void{
+  setData(ease: boolean): void {
     this.data
       .filter((it) => it.hover)
       .forEach((it) => {
@@ -514,7 +514,7 @@ export class LitChartPie extends BaseElement {
         direction = 'Left-Top';
       }
     } else {
-      direction = this.rectSuperposition(rect,r1);
+      direction = this.rectSuperposition(rect, r1);
     }
     return {
       cross,
@@ -524,7 +524,7 @@ export class LitChartPie extends BaseElement {
     };
   }
 
-  rectSuperposition(rect: Rectangle,r1: Rectangle):string{
+  rectSuperposition(rect: Rectangle, r1: Rectangle): string {
     if (rect.y > r1.y) {
       return 'Bottom';
     } else if (rect.y == r1.y) {
diff --git a/ide/src/base-ui/chart/scatter/LitChartScatter.ts b/ide/src/base-ui/chart/scatter/LitChartScatter.ts
index 2abbb7c2156b01c3f65ea080c89276a7b970c03a..a18416fb70b98b7164db4319081427af5a1c6ca4 100644
--- a/ide/src/base-ui/chart/scatter/LitChartScatter.ts
+++ b/ide/src/base-ui/chart/scatter/LitChartScatter.ts
@@ -59,14 +59,7 @@ export class LitChartScatter extends BaseElement {
   drawBackground(): void {
     let w: number = this.clientWidth;
     let h: number = this.clientHeight;
-    let color: CanvasGradient = this.ctx?.createRadialGradient(
-      w / 2,
-      h / 2,
-      0.2 * w,
-      w / 2,
-      h / 2,
-      0.5 * w
-    )!;
+    let color: CanvasGradient = this.ctx?.createRadialGradient(w / 2, h / 2, 0.2 * w, w / 2, h / 2, 0.5 * w)!;
     color?.addColorStop(0, '#eaeaea');
     color?.addColorStop(1, '#ccc');
     if (this.options) {
@@ -140,8 +133,7 @@ export class LitChartScatter extends BaseElement {
     // 画Y轴坐标尺
     for (let i = 0; i < yAxis.length; i++) {
       let length1: number =
-        (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) *
-        (yAxis[i] / yAxis[yAxis.length - 1]);
+        (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) * (yAxis[i] / yAxis[yAxis.length - 1]);
       let length2: number = this.originY - length1;
       let text: string = yAxis[i].toString();
       let x: number = this.originX - this.ctx?.measureText(text).width! - AXAIS_DELTA;
@@ -167,8 +159,7 @@ export class LitChartScatter extends BaseElement {
     }
     for (let i = 0; i < xAxis.length; i++) {
       let length3: number =
-        (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) *
-        (xAxis[i] / xAxis[xAxis.length - 1]);
+        (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (xAxis[i] / xAxis[xAxis.length - 1]);
       let length4: number = this.originX + length3;
       this.ctx?.beginPath();
       this.ctx?.moveTo(length4, this.originY);
@@ -229,20 +220,14 @@ export class LitChartScatter extends BaseElement {
       if (data[i].length) {
         rectY = rectY + 20;
         this.ctx?.fillText(colorPoolText[i] + ': ', this.clientWidth - WIDTH_DELTA, rectY + 4);
-        this.drawCycle(this.clientWidth - (QUYU / 5), rectY, 7.5, 0.8, colorPool[i]);
+        this.drawCycle(this.clientWidth - QUYU / 5, rectY, 7.5, 0.8, colorPool[i]);
       }
     }
   }
   /**
    * 画圆点
    */
-  drawCycle(
-    x: number,
-    y: number,
-    r: number,
-    transparency: number,
-    color: string
-  ): void {
+  drawCycle(x: number, y: number, r: number, transparency: number, color: string): void {
     this.ctx!.fillStyle = color;
     this.ctx?.beginPath();
     this.ctx!.globalAlpha = transparency;
@@ -263,11 +248,8 @@ export class LitChartScatter extends BaseElement {
     }
     // data[1]用来标注n Hz负载线
     let addr1: number =
-      this.originX +
-      (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) *
-      (data[0] / maxXAxis);
-    let addr2: number =
-      (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE;
+      this.originX + (this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (data[0] / maxXAxis);
+    let addr2: number = (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE;
     let y: number = this.originY;
     this.ctx!.strokeStyle = '#ff0000';
     for (let i = 0; i < FOR_VALUE; i++) {
@@ -289,11 +271,7 @@ export class LitChartScatter extends BaseElement {
     this.ctx!.fillStyle = '#000000';
     this.ctx?.fillText('过供给区', addr1 / 2, y + FOR_VALUE / 2);
     this.ctx?.fillText('欠供给区', addr1 / 2, this.originY - this.finalY);
-    this.ctx?.fillText(
-      '超负载区',
-      addr1 + FOR_VALUE / 3,
-      (this.finalY + this.originY) / 2
-    );
+    this.ctx?.fillText('超负载区', addr1 + FOR_VALUE / 3, (this.finalY + this.originY) / 2);
   }
 
   /**
@@ -308,10 +286,8 @@ export class LitChartScatter extends BaseElement {
     }
     // data[1]用来标注n Hz均衡线
     let addr1: number =
-      ((this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) *
-        (data[0] / maxXAxis)) / FOR_VALUE;
-    let addr2: number =
-      (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE;
+      ((this.finalX - this.originX - ((this.finalX - this.originX) % QUYU)) * (data[0] / maxXAxis)) / FOR_VALUE;
+    let addr2: number = (this.originY - this.finalY - ((this.originY - this.finalY) % QUYU)) / FOR_VALUE;
     let x: number = this.originX;
     let y: number = this.originY;
     this.ctx!.strokeStyle = '#00ff00';
@@ -335,10 +311,7 @@ export class LitChartScatter extends BaseElement {
   }
 
   /*检测是否hover在散点之上*/
-  checkHover(
-    options: LitChartScatterConfig | undefined,
-    pos: Object
-  ): Object | boolean {
+  checkHover(options: LitChartScatterConfig | undefined, pos: Object): Object | boolean {
     let data: Array<Object> = [];
     if (options) {
       data = options.paintingData;
@@ -427,10 +400,21 @@ export class LitChartScatter extends BaseElement {
    * 显示提示框
    */
   showTip(data: any): void {
-    const Y_DELTA: number = 70;
+    const minWidth: number = 160;
+    const miniHeight: number = 70;
+    const canvasWidth: number = Number(this.canvas?.style.width.replace('px', ''));
+    const canvasHeight: number = Number(this.canvas?.style.height.replace('px', ''));
     this.scatterTipEL!.style.display = 'flex';
-    this.scatterTipEL!.style.top = `${data.y - Y_DELTA}px`;
-    this.scatterTipEL!.style.left = `${data.x}px`;
+    if (canvasWidth - data.x < minWidth && canvasHeight - data.y >= miniHeight) {
+      this.scatterTipEL!.style.top = `${data.y}px`;
+      this.scatterTipEL!.style.left = `${data.x - minWidth}px`;
+    } else if (canvasHeight - data.y < miniHeight && canvasWidth - data.x > minWidth) {
+      this.scatterTipEL!.style.top = `${data.y - miniHeight}px`;
+      this.scatterTipEL!.style.left = `${data.x}px`;
+    } else {
+      this.scatterTipEL!.style.top = `${data.y}px`;
+      this.scatterTipEL!.style.left = `${data.x}px`;
+    }
     this.scatterTipEL!.innerHTML = this.options!.tip(data);
     // @ts-ignore
     this.options!.hoverEvent('CPU-FREQ', true, data.c[2] - 1);
@@ -469,8 +453,7 @@ export class LitChartScatter extends BaseElement {
        */
       if (hoverPoint) {
         this.showTip(hoverPoint);
-        let samePoint: boolean =
-          this.options!.hoverData === hoverPoint ? true : false;
+        let samePoint: boolean = this.options!.hoverData === hoverPoint ? true : false;
         if (!samePoint) {
           this.resetHoverWithOffScreen();
           this.options!.hoverData = hoverPoint;
@@ -499,7 +482,8 @@ export class LitChartScatter extends BaseElement {
   }
 
   initHtml(): string {
-    return `
+    return (
+      `
             <style>   
             :host {
                 display: flex;
@@ -542,7 +526,8 @@ export class LitChartScatter extends BaseElement {
                 background-repeat:no-repeat;
                 background-position:center;
             }
-            ` + this.dismantlingHtml();
+            ` + this.dismantlingHtml()
+    );
   }
 
   /**
@@ -550,7 +535,7 @@ export class LitChartScatter extends BaseElement {
    * @returns html
    */
   dismantlingHtml(): string {
-    return`
+    return `
       #labels{
         display: grid;
         grid-template-columns: auto auto auto auto auto;
diff --git a/ide/src/base-ui/chart/scatter/LitChartScatterConfig.ts b/ide/src/base-ui/chart/scatter/LitChartScatterConfig.ts
index eb3b9daa588d795902778a5babfd86485367b25f..ea985de9e5ca2fa2149979fc5694451695494e89 100644
--- a/ide/src/base-ui/chart/scatter/LitChartScatterConfig.ts
+++ b/ide/src/base-ui/chart/scatter/LitChartScatterConfig.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2023 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/ide/src/base-ui/drawer/LitDrawer.ts b/ide/src/base-ui/drawer/LitDrawer.ts
index 3c038ff539a50c9acfd6883753c6a9b323fb2d24..813b717b9758614016ed9d53cfd5554bc00b5d59 100644
--- a/ide/src/base-ui/drawer/LitDrawer.ts
+++ b/ide/src/base-ui/drawer/LitDrawer.ts
@@ -216,7 +216,16 @@ const initHtmlStyle = (padding: string, width: string) => {
 @element('lit-drawer')
 export class LitDrawer extends BaseElement {
   static get observedAttributes() {
-    return ['drawer-title', 'visible', 'placement', 'mask', 'mask-closable', 'closeable', 'content-padding', 'content-width'];
+    return [
+      'drawer-title',
+      'visible',
+      'placement',
+      'mask',
+      'mask-closable',
+      'closeable',
+      'content-padding',
+      'content-width',
+    ];
   }
 
   initHtml(): string {
diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts
index e8884aadee505fb4f6039bf7b32796d2de9d5737..6ffe80d22a71db269d2f219ddd2e0f88f6fa031d 100644
--- a/ide/src/base-ui/menu/LitMainMenu.ts
+++ b/ide/src/base-ui/menu/LitMainMenu.ts
@@ -19,7 +19,7 @@ import './LitMainMenuGroup';
 import { LitMainMenuGroup } from './LitMainMenuGroup';
 import { LitMainMenuItem } from './LitMainMenuItem';
 
-const initHtmlStyle:string = `
+const initHtmlStyle: string = `
     <style>
         :host{
             width: 248px;
@@ -140,15 +140,21 @@ export class LitMainMenu extends BaseElement {
           } else {
             secondGroup.removeAttribute('describe');
           }
-          this.setChildren(item,group,groupName,groupDescribe,secondGroup);
+          this.setChildren(item, group, groupName, groupDescribe, secondGroup);
         } else {
-          this.notChildren(item,group,groupName,groupDescribe);
+          this.notChildren(item, group, groupName, groupDescribe);
         }
       });
     });
   }
 
-  setChildren(item:any,group: LitMainMenuGroup,groupName: LitMainMenuGroup,groupDescribe: LitMainMenuGroup,secondGroup: LitMainMenuGroup):void{
+  setChildren(
+    item: any,
+    group: LitMainMenuGroup,
+    groupName: LitMainMenuGroup,
+    groupDescribe: LitMainMenuGroup,
+    secondGroup: LitMainMenuGroup
+  ): void {
     secondGroup.setAttribute('icon', item.icon || '');
     if (item.second) {
       secondGroup.setAttribute('second', '');
@@ -196,7 +202,7 @@ export class LitMainMenu extends BaseElement {
     });
   }
 
-  notChildren(item:any,group: LitMainMenuGroup,groupName: LitMainMenuGroup,groupDescribe: LitMainMenuGroup):void{
+  notChildren(item: any, group: LitMainMenuGroup, groupName: LitMainMenuGroup, groupDescribe: LitMainMenuGroup): void {
     let th = new LitMainMenuItem();
     th.setAttribute('icon', item.icon || '');
     th.setAttribute('title', item.title || '');
diff --git a/ide/src/base-ui/menu/LitMainMenuGroup.ts b/ide/src/base-ui/menu/LitMainMenuGroup.ts
index 17622b31b4ff41326f0b0b14ca80596173529679..03c6296bab44576f14749e51aee64d06f256d07c 100644
--- a/ide/src/base-ui/menu/LitMainMenuGroup.ts
+++ b/ide/src/base-ui/menu/LitMainMenuGroup.ts
@@ -15,7 +15,7 @@
 
 import { BaseElement, element } from '../BaseElement';
 
-const initHtmlStyle:string = `
+const initHtmlStyle: string = `
     <style>
         :host(:not([collapsed])){ 
             width: 248px;
diff --git a/ide/src/base-ui/menu/LitMainMenuItem.ts b/ide/src/base-ui/menu/LitMainMenuItem.ts
index 15ed602c6b2b7a892b29822d5adb81dcb8cd4596..4e60fc6ed77e8a85896da924fd234f3649a3d319 100644
--- a/ide/src/base-ui/menu/LitMainMenuItem.ts
+++ b/ide/src/base-ui/menu/LitMainMenuItem.ts
@@ -15,7 +15,7 @@
 
 import { BaseElement, element } from '../BaseElement';
 
-const initHtmlStyle:string = `
+const initHtmlStyle: string = `
     <style>
             :host{
                 user-select: none;
diff --git a/ide/src/base-ui/popover/LitPopover.ts b/ide/src/base-ui/popover/LitPopover.ts
index e94be29043e2302185a05dc047215921cda28425..24e0f577d44bfce0dd320d17c7c816804c6a8f7f 100644
--- a/ide/src/base-ui/popover/LitPopover.ts
+++ b/ide/src/base-ui/popover/LitPopover.ts
@@ -377,7 +377,7 @@ export class LitPopover extends BaseElement {
     }
   }
 
-  setMultiple(dataSource: Array<SelectBean>){
+  setMultiple(dataSource: Array<SelectBean>) {
     this.litGroup = new LitCheckGroup();
     this.litGroup.setAttribute('layout', 'dispersion');
     this.popContent!.appendChild(this.litGroup);
diff --git a/ide/src/base-ui/popover/LitPopoverV.ts b/ide/src/base-ui/popover/LitPopoverV.ts
index 225e84e7c5b283737c614b239d7c2dfa438b827a..e069696eaaf53409e188fbac9a4cf61e99cb2a59 100644
--- a/ide/src/base-ui/popover/LitPopoverV.ts
+++ b/ide/src/base-ui/popover/LitPopoverV.ts
@@ -360,9 +360,9 @@ let css = `
         display: none;
     }
     </style>
-`
+`;
 const initHtmlStyle = (wid: string) => {
-  return replacePlaceholders(css,wid);
+  return replacePlaceholders(css, wid);
 };
 
 @element('lit-popover')
diff --git a/ide/src/base-ui/radiobox/LitRadioBox.ts b/ide/src/base-ui/radiobox/LitRadioBox.ts
index 21fab3d4c1a33460e1b7675a1101cc00affa99a9..0fb53e2081eb1558fe625ea57af6625fd16e0762 100644
--- a/ide/src/base-ui/radiobox/LitRadioBox.ts
+++ b/ide/src/base-ui/radiobox/LitRadioBox.ts
@@ -167,7 +167,6 @@ export class LitRadioBox extends BaseElement {
     return this.getAttribute('disabled') !== null;
   }
 
-
   get checked() {
     return this.getAttribute('checked') !== null;
   }
diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts
index 1f46499e1f710b62bba128e2074c0af65b8e10c2..33a08b068b158d2a184352e10da5e2a228a638fe 100644
--- a/ide/src/base-ui/select/LitSelect.ts
+++ b/ide/src/base-ui/select/LitSelect.ts
@@ -162,7 +162,6 @@ export class LitSelect extends BaseElement {
   }
 
   set dataSource(selectDataSource: any) {
-    
     this.innerHTML = `<slot></slot><slot name="footer"></slot>`;
     if (selectDataSource.length > 0) {
       this.bodyEl!.style.display = 'flex';
diff --git a/ide/src/base-ui/select/LitSelectV.ts b/ide/src/base-ui/select/LitSelectV.ts
index dc87e875011f1e927873288ad70e482ad9919107..f2f96fbcb9ba870544ebbf79b04b69f246d2fc01 100644
--- a/ide/src/base-ui/select/LitSelectV.ts
+++ b/ide/src/base-ui/select/LitSelectV.ts
@@ -15,7 +15,7 @@
 
 import { BaseElement, element } from '../BaseElement';
 import { LitSelectOption } from './LitSelectOption';
-import {selectHtmlStr, selectVHtmlStr} from './LitSelectHtml';
+import { selectHtmlStr, selectVHtmlStr } from './LitSelectHtml';
 
 @element('lit-select-v')
 export class LitSelectV extends BaseElement {
@@ -197,7 +197,7 @@ export class LitSelectV extends BaseElement {
     this.setEvent();
   }
 
-  setEvent():void{
+  setEvent(): void {
     this.onmouseout = this.onblur = (ev) => {
       this.focused = false;
     };
diff --git a/ide/src/base-ui/slicer/lit-slicer.ts b/ide/src/base-ui/slicer/lit-slicer.ts
index 89c77d8778b799477a5ab191bdca7596e0ca699c..17e18f8cfc429b50f12df50601a3a2a254c8f829 100644
--- a/ide/src/base-ui/slicer/lit-slicer.ts
+++ b/ide/src/base-ui/slicer/lit-slicer.ts
@@ -162,7 +162,7 @@ export class LitSlicerTrack extends HTMLElement {
     }
   }
 
-  isDirection(){
+  isDirection() {
     this.line!.className = 'rootV';
     let previousElementSibling = this.previousElementSibling as HTMLElement;
     let preY: number, preHeight: number;
diff --git a/ide/src/base-ui/switch/lit-switch.ts b/ide/src/base-ui/switch/lit-switch.ts
index 725f10df58d17494cc4165423dfe4706950ceb90..6db8caa7adc720a7f4115b49994617c9f9b8816d 100644
--- a/ide/src/base-ui/switch/lit-switch.ts
+++ b/ide/src/base-ui/switch/lit-switch.ts
@@ -15,7 +15,7 @@
 
 import { BaseElement, element } from '../BaseElement';
 
-const initHtmlStyle:string = `
+const initHtmlStyle: string = `
     <style>
         :host{ 
             display:inline-block; 
@@ -93,7 +93,7 @@ export default class LitSwitch extends BaseElement {
     return ['disabled', 'checked'];
   }
 
-  get disabled():boolean {
+  get disabled(): boolean {
     return this.getAttribute('disabled') !== null;
   }
 
@@ -109,7 +109,7 @@ export default class LitSwitch extends BaseElement {
     }
   }
 
-  set disabled(value:boolean) {
+  set disabled(value: boolean) {
     if (value === null || value === false) {
       this.removeAttribute('disabled');
     } else {
@@ -161,7 +161,7 @@ export default class LitSwitch extends BaseElement {
     this.setEvent();
   }
 
-  setEvent():void{
+  setEvent(): void {
     this.switch!.onfocus = (ev) => {
       ev.stopPropagation();
       if (!this.isfocus) {
diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts
index 441a731163d90e6eb5878232735b0ff449725114..c8ac236c51af67c0e42b54d8faa305872dcb70e1 100644
--- a/ide/src/base-ui/table/lit-table.ts
+++ b/ide/src/base-ui/table/lit-table.ts
@@ -348,6 +348,8 @@ export class LitTable extends HTMLElement {
     });
     this.shadowRoot!.addEventListener('load', function (event) {});
     this.tableElement!.addEventListener('mouseout', (ev) => this.mouseOut());
+    this.treeElement && (this.treeElement!.style.transform = `translateY(0px)`);
+    this.tbodyElement && (this.tbodyElement!.style.transform = `translateY(0px)`);
   }
 
   resolvingArea(columns: any, x: any, y: any, area: Array<any>, rowElement: HTMLDivElement) {
diff --git a/ide/src/base-ui/tabs/lit-tabs.html.ts b/ide/src/base-ui/tabs/lit-tabs.html.ts
index 8165147caa31b2eee321e2103c64e66f9ee22952..b3ad6560f13b2563fdcb0b861e7f8c78366fd2c1 100644
--- a/ide/src/base-ui/tabs/lit-tabs.html.ts
+++ b/ide/src/base-ui/tabs/lit-tabs.html.ts
@@ -410,4 +410,4 @@ export const LitTabsHtml = `
                 <slot id="slot">NEED CONTENT</slot>
             </div>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/base-ui/tabs/lit-tabs.ts b/ide/src/base-ui/tabs/lit-tabs.ts
index 022f725cbfc1be4142694ce091956fe564be4da3..cd2c338d4df21acb422f5f6c356ab196e98c2b2f 100644
--- a/ide/src/base-ui/tabs/lit-tabs.ts
+++ b/ide/src/base-ui/tabs/lit-tabs.ts
@@ -16,7 +16,7 @@
 import { element } from '../BaseElement';
 import { LitTabpane } from './lit-tabpane';
 import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil';
-import {LitTabsHtml} from "./lit-tabs.html";
+import { LitTabsHtml } from './lit-tabs.html';
 
 @element('lit-tabs')
 export class LitTabs extends HTMLElement {
@@ -211,8 +211,8 @@ export class LitTabs extends HTMLElement {
     }).observe(this.shadowRoot!.querySelector('#tab-filling')!);
   }
 
-  setItemNode(elements: Element[] | undefined ):void{
-    let navHtml:string = '';
+  setItemNode(elements: Element[] | undefined): void {
+    let navHtml: string = '';
     elements
       ?.map((it) => it as LitTabpane)
       .forEach((a) => {
@@ -230,9 +230,7 @@ export class LitTabs extends HTMLElement {
                     </div>`;
         } else {
           if (a.key === this.activekey) {
-            navHtml += `<div class="nav-item" data-key="${a.key}" data-selected ${
-              a.closeable ? 'data-closeable' : ''
-            }>
+            navHtml += `<div class="nav-item" data-key="${a.key}" data-selected ${a.closeable ? 'data-closeable' : ''}>
                         ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
                         <span>${a.tab}</span>
                         <lit-icon class="close-icon" name='close' size="16"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
@@ -270,7 +268,7 @@ export class LitTabs extends HTMLElement {
       }
       if (a.getAttribute('data-key') === key) {
         a.setAttribute('data-selected', 'true');
-        this.byKeyIsValid(isValid,a)
+        this.byKeyIsValid(isValid, a);
       } else {
         a.removeAttribute('data-selected');
       }
@@ -288,7 +286,7 @@ export class LitTabs extends HTMLElement {
     });
   }
 
-  byKeyIsValid(isValid:boolean,a:Element):void{
+  byKeyIsValid(isValid: boolean, a: Element): void {
     if (isValid) {
       let span = a.querySelector('span') as HTMLSpanElement;
       let title = span.innerText;
diff --git a/ide/src/base-ui/tree/LitTree.ts b/ide/src/base-ui/tree/LitTree.ts
index 9bc66d270c767d9a242fdeba9b94a7d5eca5970c..b9860899db707abf3e94f9726ebf8bdb027a4497 100644
--- a/ide/src/base-ui/tree/LitTree.ts
+++ b/ide/src/base-ui/tree/LitTree.ts
@@ -17,7 +17,7 @@ import './LitTreeNode';
 import { BaseElement, element } from '../BaseElement';
 import { type LitTreeNode } from './LitTreeNode';
 
-export interface TreeItemData   {
+export interface TreeItemData {
   key: string;
   title: string;
   icon?: string; //节点的自定义图标  设置show-icon才会生效
@@ -177,13 +177,13 @@ export class LitTree extends BaseElement {
   }
 
   drawTree(parent: any, array: Array<TreeItemData>, topDepth: boolean = false): void {
-    array.forEach((a:TreeItemData) => {
+    array.forEach((a: TreeItemData) => {
       let li: HTMLLIElement = document.createElement('li');
       let node: LitTreeNode = document.createElement('lit-tree-node') as LitTreeNode;
       node.title = a.title;
       node.setAttribute('key', a.key);
       node.topDepth = topDepth;
-      this.treeNodeDragable(node,a);
+      this.treeNodeDragable(node, a);
       // @ts-ignore
       li.data = a;
       li.append(node);
@@ -192,7 +192,7 @@ export class LitTree extends BaseElement {
       // @ts-ignore
       ul.open = 'true';
       ul.style.transition = '.3s all';
-      this.addEvent(a,node,li,ul);
+      this.addEvent(a, node, li, ul);
       // node 添加右键菜单功能
       node.oncontextmenu = (ev): void => {
         ev.preventDefault();
@@ -212,7 +212,7 @@ export class LitTree extends BaseElement {
     };
   }
 
-  treeNodeDragable(node: LitTreeNode,a:TreeItemData):void{
+  treeNodeDragable(node: LitTreeNode, a: TreeItemData): void {
     let that = this;
     if (this.hasAttribute('dragable')) {
       node.draggable = true;
@@ -251,7 +251,7 @@ export class LitTree extends BaseElement {
     this.nodeList.push(node);
   }
 
-  addEvent(a:TreeItemData,node: LitTreeNode,li: HTMLLIElement,ul: HTMLUListElement):void{
+  addEvent(a: TreeItemData, node: LitTreeNode, li: HTMLLIElement, ul: HTMLUListElement): void {
     if (a.children && a.children.length > 0) {
       if (this.hasAttribute('show-icon')) {
         if (a.icon) {
@@ -454,7 +454,7 @@ export class LitTree extends BaseElement {
       this.treeData.push(obj);
     }
   }
-  insertNodeDragEvent(insertNode: LitTreeNode){
+  insertNodeDragEvent(insertNode: LitTreeNode) {
     if (this.hasAttribute('dragable')) {
       insertNode.draggable = true;
       document.ondragover = function (e): void {
@@ -517,12 +517,12 @@ export class LitTree extends BaseElement {
     // @ts-ignore
     ul.open = 'true';
     ul.style.transition = '.3s all';
-    this.setChildren(a,insertNode,li,ul);
+    this.setChildren(a, insertNode, li, ul);
     // node 添加右键菜单功能
     this.addedRightClickMenuFunction(insertNode);
   }
 
-  addedRightClickMenuFunction(insertNode: LitTreeNode):void{
+  addedRightClickMenuFunction(insertNode: LitTreeNode): void {
     insertNode.oncontextmenu = (ev): void => {
       ev.preventDefault();
       this.selectedNode(insertNode);
@@ -534,7 +534,7 @@ export class LitTree extends BaseElement {
     };
   }
 
-  setDragableOfEvent(insertNode: LitTreeNode):void{
+  setDragableOfEvent(insertNode: LitTreeNode): void {
     if (this.hasAttribute('dragable')) {
       insertNode.draggable = true;
       document.ondragover = function (e): void {
@@ -552,7 +552,7 @@ export class LitTree extends BaseElement {
     }
   }
 
-  setChildren(a:any,insertNode: LitTreeNode,li: HTMLLIElement,ul: HTMLUListElement):void{
+  setChildren(a: any, insertNode: LitTreeNode, li: HTMLLIElement, ul: HTMLUListElement): void {
     if (a.children && a.children.length > 0) {
       if (this.hasAttribute('show-icon')) {
         if (a.icon) {
diff --git a/ide/src/base-ui/tree/LitTreeNode.html.ts b/ide/src/base-ui/tree/LitTreeNode.html.ts
index de67bc0f4bb6cf17077acb2ebc7b445804a42c43..13a9850624112bd99b2cdc1a0d1b96b34a2d8368 100644
--- a/ide/src/base-ui/tree/LitTreeNode.html.ts
+++ b/ide/src/base-ui/tree/LitTreeNode.html.ts
@@ -165,4 +165,4 @@ export const LitTreeNodeHtmlStyle = `
          }
          
         </style>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/base-ui/tree/LitTreeNode.ts b/ide/src/base-ui/tree/LitTreeNode.ts
index 87f85875033830f0f925cacedb2993a42d7102f1..a85af650bdba588ac66f375f0430bfd5b7777d6d 100644
--- a/ide/src/base-ui/tree/LitTreeNode.ts
+++ b/ide/src/base-ui/tree/LitTreeNode.ts
@@ -17,7 +17,7 @@ import '../icon/LitIcon';
 import { BaseElement, element } from '../BaseElement';
 import { type LitIcon } from '../icon/LitIcon';
 import { type TreeItemData } from './LitTree';
-import {LitTreeNodeHtmlStyle} from "./LitTreeNode.html";
+import { LitTreeNodeHtmlStyle } from './LitTreeNode.html';
 
 @element('lit-tree-node')
 export class LitTreeNode extends BaseElement {
diff --git a/ide/src/base-ui/utils/CSVFormater.ts b/ide/src/base-ui/utils/CSVFormater.ts
index 3b23a86ad6dc4ab29089816df1e3684863a222f5..dd34c2eeefad516df4949a01ea3d1ed9a4c7e3f7 100644
--- a/ide/src/base-ui/utils/CSVFormater.ts
+++ b/ide/src/base-ui/utils/CSVFormater.ts
@@ -51,7 +51,7 @@ export class JSONToCSV {
       row = '';
       // 如果存在自定义key值
       if (columns.key.length) {
-        row = that.getCsvStr(columns,obj,n,row);
+        row = that.getCsvStr(columns, obj, n, row);
       } else {
         for (key in n) {
           row +=
@@ -67,7 +67,7 @@ export class JSONToCSV {
     this.saveCsvFile(fileName, csv);
   }
 
-  static getCsvStr(columns: any,obj: any,n: any,row: string){
+  static getCsvStr(columns: any, obj: any, n: any, row: string) {
     let that = this;
     columns.key.map(function (m: any, idx: number) {
       let strItem: any = '';
@@ -91,8 +91,7 @@ export class JSONToCSV {
           (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) +
           '",';
       } else {
-        row +=
-          '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",';
+        row += '"' + (typeof columns.formatter === 'function' ? columns.formatter(m, n[m]) || n[m] : strItem) + '",';
       }
     });
     return row;
diff --git a/ide/src/base-ui/utils/ExcelFormater.ts b/ide/src/base-ui/utils/ExcelFormater.ts
index a251b19dc404ce25d1ede09202cffcda6acaebbd..c939f03e756f217379a9a01b0f53ace9db0bc9ea 100644
--- a/ide/src/base-ui/utils/ExcelFormater.ts
+++ b/ide/src/base-ui/utils/ExcelFormater.ts
@@ -16,11 +16,11 @@
 const htmlStr = () => {
   const html_start = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">`;
   return {
-    uri : 'data:application/vnd.ms-excel;base64,',
-    template_ExcelWorksheet : `<x:ExcelWorksheet><x:Name>{SheetName}</x:Name><x:WorksheetSource HRef="sheet{SheetIndex}.htm"/><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>`,
-    template_ListWorksheet : `<o:File HRef="sheet{SheetIndex}.htm"/>`,
-    template_WorkBook :
-    `MIME-Version: 1.0
+    uri: 'data:application/vnd.ms-excel;base64,',
+    template_ExcelWorksheet: `<x:ExcelWorksheet><x:Name>{SheetName}</x:Name><x:WorksheetSource HRef="sheet{SheetIndex}.htm"/><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>`,
+    template_ListWorksheet: `<o:File HRef="sheet{SheetIndex}.htm"/>`,
+    template_WorkBook:
+      `MIME-Version: 1.0
 X-Document-Type: Workbook
 Content-Type: multipart/related; boundary="----=_NextPart_dummy"
 
@@ -29,8 +29,8 @@ Content-Location: WorkBook.htm
 Content-Type: text/html; charset=windows-1252
 
 ` +
-    html_start +
-    `
+      html_start +
+      `
 <head>
 <meta name="Excel Workbook Frameset">
 <meta http-equiv="Content-Type" charset="UTF-8" content="text/html; charset=windows-1252">
@@ -57,9 +57,9 @@ Content-Type: text/xml; charset="utf-8"
     <o:File HRef="filelist.xml"/>
 </xml>
 ------=_NextPart_dummy--
-`
-  }
-}
+`,
+  };
+};
 
 export class ExcelFormater {
   static tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>';
@@ -184,16 +184,16 @@ export class ExcelFormater {
     dataSource: { columns: any[]; tables: any[]; sheetName: string }[]
   ) {
     const html_start = `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">`;
-    let {uri,template_ExcelWorksheet,template_ListWorksheet,template_WorkBook} = htmlStr();
-      let template_HTMLWorksheet =
-        `
+    let { uri, template_ExcelWorksheet, template_ListWorksheet, template_WorkBook } = htmlStr();
+    let template_HTMLWorksheet =
+      `
 ------=_NextPart_dummy
 Content-Location: sheet{SheetIndex}.htm
 Content-Type: text/html; charset=windows-1252
 
 ` +
-        html_start +
-        `
+      html_start +
+      `
 <head>
     <meta http-equiv="Content-Type" charset="UTF-8" content="text/html; charset=windows-1252">
     <link id="Main-File" rel="Main-File" href="../WorkBook.htm">
diff --git a/ide/src/doc/compile_trace_streamer.html b/ide/src/doc/compile_trace_streamer.html
index 677e50defec6e85ebe72a8b3dadb64013cb0d64f..a377d38b90fcccc5ed144e41a708d901d720121d 100644
--- a/ide/src/doc/compile_trace_streamer.html
+++ b/ide/src/doc/compile_trace_streamer.html
@@ -799,8 +799,10 @@
       <h4 class="mume-header fontColor">准备工作</h4>
 
       <p class="fontColor">
-        在码云上添加ssh公钥。<br />
-        本工具工程组织方式是gn。编译需要对应的编译器，编译前请自行配置本地编译器。<br />
+        在码云上添加ssh公钥。
+        <br />
+        本工具工程组织方式是gn。编译需要对应的编译器，编译前请自行配置本地编译器。
+        <br />
         所需编译器和版本如下表所示：
       </p>
       <table class="fontColor">
@@ -841,7 +843,8 @@
       <pre data-role="codeBlock" data-info="" class="fontColor light smartperf-"><code class="fontColor">./build.sh
     </code></pre>
       <p class="fontColor">
-        本脚本会下载和准备本地依赖的环境，并编译目标。<br />
+        本脚本会下载和准备本地依赖的环境，并编译目标。
+        <br />
         在不同的平台上编译后的目标在不同的文件夹，如下所示：
       </p>
       <table class="fontColor">
diff --git a/ide/src/doc/des_binder.html b/ide/src/doc/des_binder.html
index 0c9e8cbacdf7a1720cb75fb9d459317a1364e63d..749a5d3751a63a814052d558c6ceb804de31f8bb 100644
--- a/ide/src/doc/des_binder.html
+++ b/ide/src/doc/des_binder.html
@@ -782,9 +782,12 @@
       <h1 class="mume-header fontColor">binder事件上下文如何关联</h1>
 
       <p class="fontColor">
-        binder事件相对复杂，这里是从ftrace事件中抽离出来的binder相关消息，用来作为开发者或用户追踪binder事件的参考<br />
-        a binder event is identified by the sender and receive device, and a reply message only end<br />
-        the last binder msg which reply the calling one.<br />
+        binder事件相对复杂，这里是从ftrace事件中抽离出来的binder相关消息，用来作为开发者或用户追踪binder事件的参考
+        <br />
+        a binder event is identified by the sender and receive device, and a reply message only end
+        <br />
+        the last binder msg which reply the calling one.
+        <br />
         the alloc_buf msg can always flow the binder_transaction, so we no need to identify the alloc msg with
         transactionID
       </p>
diff --git a/ide/src/doc/des_stat.html b/ide/src/doc/des_stat.html
index df51e09f71fedb8fd9e93e84b075841c9f28095f..e9271123af89105140661995070d038367f02cf1 100644
--- a/ide/src/doc/des_stat.html
+++ b/ide/src/doc/des_stat.html
@@ -771,7 +771,8 @@
       <h1 class="mume-header fontColor">TraceStreamer 解析数据状态表</h1>
 
       <p class="fontColor">
-        TraceStreamer使用stat表统计解析trace数据源过程遇到的重要事件状态。通过stat表可以对trace数据源中各个类型事件的数据的数量，数据质量有一个基本了解。<br />
+        TraceStreamer使用stat表统计解析trace数据源过程遇到的重要事件状态。通过stat表可以对trace数据源中各个类型事件的数据的数量，数据质量有一个基本了解。
+        <br />
         我们对不同类型的数据，统计了收到多少条，数据逻辑是否匹配，是否有不合法数据，是否有数据丢失情况，所有这些，是基于对数据格式本身和数据前后关系的主观认识。欢迎开发者提供更多的思路来帮我们完善数据本身的校验工作。
       </p>
       <h2 class="mume-header fontColor">stat表支持统计的事件列表如下：</h2>
diff --git a/ide/src/doc/des_tables.html b/ide/src/doc/des_tables.html
index 2bacf2fe4aed0cb4c96951934e1418f288d49fd6..3cf6ddbe7f4bdee97a97d9bf3ff37a7db7d473bf 100644
--- a/ide/src/doc/des_tables.html
+++ b/ide/src/doc/des_tables.html
@@ -800,19 +800,23 @@
 
       <ul class="fontColor">
         <li>
-          常规泳道图数据表<br />
+          常规泳道图数据表
+          <br />
           <img src="../figures/traceStreamer/db_common.png" alt="GitHub Logo" />
         </li>
         <li>
-          native memory数据源相关表<br />
+          native memory数据源相关表
+          <br />
           <img src="../figures/traceStreamer/db_native_memory.png" alt="GitHub Logo" />
         </li>
         <li>
-          perf相关数据表<br />
+          perf相关数据表
+          <br />
           <img src="../figures/traceStreamer/db_hiperf.png" alt="GitHub Logo" />
         </li>
         <li>
-          hisysevent相关数据表<br />
+          hisysevent相关数据表
+          <br />
           <img src="../figures/traceStreamer/db_hisys_event.png" alt="GitHub Logo" />
         </li>
       </ul>
@@ -1620,41 +1624,47 @@
       <h3 class="mume-header fontColor">进程表与线程表关系</h3>
 
       <p class="fontColor">
-        当一个进程或者线程结束后，系统可能再次将该进程号或者线程号分配给其他进程或者线程，造成一个进程号或线程号代表多个进程或线程的情况。<br />
-        Process和Thread表中的id字段可以唯一标识进程和线程。process表中的id在其他表中用作ipid字段。thread表中的id在其他表中用作itid字段。<br />
-        thread表通过ipid字段关联process表的id字段，可以查询线程归属进程。<br />
+        当一个进程或者线程结束后，系统可能再次将该进程号或者线程号分配给其他进程或者线程，造成一个进程号或线程号代表多个进程或线程的情况。
+        <br />
+        Process和Thread表中的id字段可以唯一标识进程和线程。process表中的id在其他表中用作ipid字段。thread表中的id在其他表中用作itid字段。
+        <br />
+        thread表通过ipid字段关联process表的id字段，可以查询线程归属进程。
+        <br />
         <img src="../figures/traceStreamer/process_thread.png" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">查询举例</h3>
 
       <ul class="fontColor">
         <li>
-          已知pid = 123,查看当前进程下的所有线程信息,可以使用如下SQL语句：<br />
-          <code class="fontColor"
-            >select thread.* from thread, process where process.pid = 123 and thread.ipid = process.id</code
-          >
+          已知pid = 123,查看当前进程下的所有线程信息,可以使用如下SQL语句：
+          <br />
+          <code class="fontColor">
+            select thread.* from thread, process where process.pid = 123 and thread.ipid = process.id
+          </code>
         </li>
       </ul>
       <h3>线程表与线程运行状态表关系图</h3>
       <p class="fontColor">
         thread_state表记录所有线程的运行状态信息，包含ts(状态起始时间)，dur(状态持续时间)，cpu, itid,
-        state（线程状态）。 thread表的id字段与thread_state表的itid字段相关联。<br />
+        state（线程状态）。 thread表的id字段与thread_state表的itid字段相关联。
+        <br />
         <img src="../figures/traceStreamer/thread_state.png" alt="GitHub Logo" />
       </p>
       <h3>查询举例</h3>
       <ul class="fontColor">
         <li>
-          已知tid = 123, 查看当前线程的所有运行状态信息，可以使用如下SQL语句：<br />
-          <code class="fontColor"
-            >select thread_state.* from thread, thread_state where thread.tid = 123 and thread.id =
-            thread_state.itid</code
-          >
+          已知tid = 123, 查看当前线程的所有运行状态信息，可以使用如下SQL语句：
+          <br />
+          <code class="fontColor">
+            select thread_state.* from thread, thread_state where thread.tid = 123 and thread.id = thread_state.itid
+          </code>
         </li>
       </ul>
       <h3 class="mume-header fontColor">堆内存数据变化表关系图</h3>
 
       <p class="fontColor">
-        native_hook表记录堆内存申请(AllocEvent)和释放(FreeEvent)数据。native_hook表通过ipid和itid字段分别与process和thread表的id字段关联，通过callChainId与native_hook_frame表的callChainId字段相关联。<br />
+        native_hook表记录堆内存申请(AllocEvent)和释放(FreeEvent)数据。native_hook表通过ipid和itid字段分别与process和thread表的id字段关联，通过callChainId与native_hook_frame表的callChainId字段相关联。
+        <br />
         native_hook表字段解释如下：
       </p>
       <ul class="fontColor">
@@ -1666,40 +1676,47 @@
         <li>native_hook_size：堆内存申请/释放的大小。</li>
       </ul>
       <p class="fontColor">
-        native_hook_frame表记录内存申请/释放的调用堆栈。通过callChainId区分一组调用堆栈，depth为堆栈深度，depth为0时，表示当前行为栈顶数据。<br />
+        native_hook_frame表记录内存申请/释放的调用堆栈。通过callChainId区分一组调用堆栈，depth为堆栈深度，depth为0时，表示当前行为栈顶数据。
+        <br />
         <img src="../figures/traceStreamer/dump_and_mem.png" alt="GitHub Logo" />
       </p>
       <p class="fontColor">
-        native_hook_statistic表记录内存申请/释放的统计信息。通过callChainId区分一组调用堆栈。每个统计事件将记录当前事件的callChainId，并统计当前调用栈内存分配/释放的总次数和总大小。<br />
+        native_hook_statistic表记录内存申请/释放的统计信息。通过callChainId区分一组调用堆栈。每个统计事件将记录当前事件的callChainId，并统计当前调用栈内存分配/释放的总次数和总大小。
+        <br />
         <img src="../figures/traceStreamer/db_native_hook_statistic.png" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">查询举例</h3>
 
       <ul class="fontColor">
         <li>
-          已知tid = 123，查看当前线程的所有堆内存变化信息，可以使用如下SQL语句：<br />
-          <code class="fontColor"
-            >select native_hook.* from thread, native_hook where thread.tid = 123 and thread.id = native_hook.itid</code
-          >
+          已知tid = 123，查看当前线程的所有堆内存变化信息，可以使用如下SQL语句：
+          <br />
+          <code class="fontColor">
+            select native_hook.* from thread, native_hook where thread.tid = 123 and thread.id = native_hook.itid
+          </code>
         </li>
         <li>
-          已知callchainid = 1, 查看当前内存变化调用堆栈<br />
+          已知callchainid = 1, 查看当前内存变化调用堆栈
+          <br />
           <code class="fontColor">select * from native_hook_frame where callchain_id = 1</code>
         </li>
         <li>
-          已知callchainid = 1, 查看当前内存变化调用堆栈对应的统计信息<br />
+          已知callchainid = 1, 查看当前内存变化调用堆栈对应的统计信息
+          <br />
           <code class="fontColor">select * from native_hook_statistic where callchain_id = 1</code>
         </li>
       </ul>
       <h3>日志表与进程线程表关系图</h3>
       <p class="fontColor">
-        log表记录日志信息。可以根据seq字段的连续性，来判断是否存在日志丢失的情况。<br />
+        log表记录日志信息。可以根据seq字段的连续性，来判断是否存在日志丢失的情况。
+        <br />
         <img src="../figures/traceStreamer/log.png" alt="GitHub Logo" />
       </p>
       <h3>查询举例</h3>
       <ul class="fontColor">
         <li>
-          已知tid = 123，查看当前线程的所有error级别的日志，可以使用如下SQL语句：<br />
+          已知tid = 123，查看当前线程的所有error级别的日志，可以使用如下SQL语句：
+          <br />
           <code class="fontColor">select * from log where tid = 123 and level = "error"</code>
         </li>
       </ul>
@@ -1722,59 +1739,67 @@
       <ul class="fontColor">
         <li>
           <p class="fontColor">
-            已知同步后的时间戳为28463134340470，查询采样数据<br />
+            已知同步后的时间戳为28463134340470，查询采样数据
+            <br />
             <code class="fontColor">select * from perf_sample where timestamp_trace = 28463134340470</code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            已知同步后的时间戳为28463134340470，查询采样数据对应的的调用栈信息<br />
-            <code class="fontColor"
-              >select A.* from perf_callchain as A, perf_sample as B where B.timestamp_trace = 28463134340470 and
-              A.sample_id = B.sample_id</code
-            >
+            已知同步后的时间戳为28463134340470，查询采样数据对应的的调用栈信息
+            <br />
+            <code class="fontColor">
+              select A.* from perf_callchain as A, perf_sample as B where B.timestamp_trace = 28463134340470 and
+              A.sample_id = B.sample_id
+            </code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            已知同步后的时间戳为28463134277762，查询采样数据的函数名及文件路径<br />
-            <code class="fontColor"
-              >select A.*, B.name, C.path from perf_sample as A, perf_callchain as B, perf_files as C where
+            已知同步后的时间戳为28463134277762，查询采样数据的函数名及文件路径
+            <br />
+            <code class="fontColor">
+              select A.*, B.name, C.path from perf_sample as A, perf_callchain as B, perf_files as C where
               A.timestamp_trace = 28463134277762 and B.sample_id = A.sample_id and B.callchain_id = 0 and B.file_id =
-              C.file_id and C.serial_id = 0</code
-            >
+              C.file_id and C.serial_id = 0
+            </code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            已知线程号为6700，查询所有的采样记录<br />
+            已知线程号为6700，查询所有的采样记录
+            <br />
             <code class="fontColor">select * from perf_sample where thread_id = 6700</code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            已知进程号为7863，查询所有的采样记录<br />
-            <code class="fontColor"
-              >select A.* from perf_sample as A, perf_thread as B where B.process_id = 7863 and A.thread_id =
-              B.thread_id</code
-            >
+            已知进程号为7863，查询所有的采样记录
+            <br />
+            <code class="fontColor">
+              select A.* from perf_sample as A, perf_thread as B where B.process_id = 7863 and A.thread_id = B.thread_id
+            </code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            查询所有采样对应的事件类型<br />
-            <code class="fontColor"
-              >select A.*, B.report_value from perf_sample as A, perf_report as B where A.event_type_id = B.id</code
-            >
+            查询所有采样对应的事件类型
+            <br />
+            <code class="fontColor">
+              select A.*, B.report_value from perf_sample as A, perf_report as B where A.event_type_id = B.id
+            </code>
           </p>
         </li>
       </ul>
       <h3 class="mume-header fontColor">帧渲染表之间的关系图</h3>
 
       <p class="fontColor">
-        frame_slice: 记录RS(RenderService)和应用的帧渲染。<br />
-        gpu_slice: 记录RS的帧对应的gpu渲染时长。<br />
-        frame_maps:记录应用到RS的帧的映射关系。<br />
+        frame_slice: 记录RS(RenderService)和应用的帧渲染。
+        <br />
+        gpu_slice: 记录RS的帧对应的gpu渲染时长。
+        <br />
+        frame_maps:记录应用到RS的帧的映射关系。
+        <br />
         <img src="../figures/traceStreamer/frames.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">查询示例</h3>
@@ -1782,19 +1807,22 @@
       <ul class="fontColor">
         <li>
           <p class="fontColor">
-            已知进程，查询进程对应的实际渲染帧<br />
+            已知进程，查询进程对应的实际渲染帧
+            <br />
             <code class="fontColor">select * from frame_slice where ipid = 1</code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            已知进程的实际渲染帧的dst为12，求其对应的RS进程的渲染帧<br />
+            已知进程的实际渲染帧的dst为12，求其对应的RS进程的渲染帧
+            <br />
             <code class="fontColor">select * from frame_slice where id = 12</code>
           </p>
         </li>
         <li>
           <p class="fontColor">
-            已知RS的渲染帧在frame_slice中所在行是14，求其对应的GPU渲染时长<br />
+            已知RS的渲染帧在frame_slice中所在行是14，求其对应的GPU渲染时长
+            <br />
             <code class="fontColor">select * from gpu_slice where frame_row = 14</code>
           </p>
         </li>
@@ -1803,10 +1831,14 @@
       <p class="fontColor">js_heap_files：记录js内存数据的文件名和文件索引</p>
       <p class="fontColor"><img src="../figures/traceStreamer/js_heap_files.png" /></p>
       <p class="fontColor">
-        js_heap_nodes:记录js内存类对象数据<br />
-        js_heap_edges:记录js内存类对象的成员数据<br />
-        js_heap_trace_node:记录timeline的调用栈信息<br />
-        js_heap_sample:记录timeline的时间轴信息<br />
+        js_heap_nodes:记录js内存类对象数据
+        <br />
+        js_heap_edges:记录js内存类对象的成员数据
+        <br />
+        js_heap_trace_node:记录timeline的调用栈信息
+        <br />
+        js_heap_sample:记录timeline的时间轴信息
+        <br />
         <img src="../figures/traceStreamer/js_heap_nodes.png" />
       </p>
       <h2>TraceStreamer输出数据库表格详细介绍</h2>
@@ -3571,7 +3603,8 @@
       </p>
       <h4>字段详细描述</h4>
       <p class="fontColor">
-        过滤分类（type），过滤名称（key2），数据ID(key1)。<br />
+        过滤分类（type），过滤名称（key2），数据ID(key1)。
+        <br />
         数据ID在process_measure_filter, sys_event_filter中作为id。
       </p>
       <h3>meta表</h3>
@@ -4927,9 +4960,12 @@
         <li>clock_id：时钟号</li>
         <li>ts：时钟快照报的时间</li>
         <li>
-          clock_name：时钟号对应的时钟名字<br />
-          时钟快照是用来对齐不同时钟号的时间<br />
-          比如，时钟号1的时间100，和时钟号2的时间200对齐<br />
+          clock_name：时钟号对应的时钟名字
+          <br />
+          时钟快照是用来对齐不同时钟号的时间
+          <br />
+          比如，时钟号1的时间100，和时钟号2的时间200对齐
+          <br />
           则时钟号为2 的250，转换为时钟号1的时间后，为150
         </li>
       </ul>
@@ -4959,7 +4995,8 @@
       <ul class="fontColor">
         <li>data_source_name：数据源的名称，和数据源的插件名保持一致</li>
         <li>
-          clock_id：时钟号，对应clock_snapshot中的时钟号<br />
+          clock_id：时钟号，对应clock_snapshot中的时钟号
+          <br />
           这个表是用来告诉IDE，不同的事件源的事件，原始时钟号是多少，在数据库中保存的事件，通常是转换为boottime后的时间，但有些情况下，IDE仍然需要知道原始的时钟号是怎样的
         </li>
       </ul>
diff --git a/ide/src/doc/des_wakup.html b/ide/src/doc/des_wakup.html
index 1a586723b774bbb24bb0dbfecdb7000a5ed22e9c..47e01a3992437a3eacd5af20b03fac139e639389 100644
--- a/ide/src/doc/des_wakup.html
+++ b/ide/src/doc/des_wakup.html
@@ -780,8 +780,10 @@
   <body for="html-export" id="body">
     <div class="mume md">
       <p class="fontColor">
-        各应用程序对于trace事件的waking和wakeup处理是略有区别的。<br />
-        waking是开始唤醒线程，wakeup是线程正式被唤醒，进入runnable（可运行状态）<br />
+        各应用程序对于trace事件的waking和wakeup处理是略有区别的。
+        <br />
+        waking是开始唤醒线程，wakeup是线程正式被唤醒，进入runnable（可运行状态）
+        <br />
         我们的策略是：被唤醒才是真正进入runnable状态，在没有wakeup事件的情况下，以waking为准。
       </p>
     </div>
diff --git a/ide/src/doc/md/quickstart_Application_operation_skills.md b/ide/src/doc/md/quickstart_Application_operation_skills.md
index 6e56418483755c3b798b64745114969cdd677005..d984f28d5f306545d747abea207f4a73e3c0dbce 100644
--- a/ide/src/doc/md/quickstart_Application_operation_skills.md
+++ b/ide/src/doc/md/quickstart_Application_operation_skills.md
@@ -59,6 +59,11 @@
 导入 trace 文件后，页面右上角的出现漏斗图标，点击会出现 Display Template 页面，Template Select 区域显示已经添加到显示模板中的泳道图，每类泳道图后面会有一个多选框，默认不勾选，如果勾选页面上就只保留勾选的泳道图。
 ![GitHub Logo](../../figures/OperationSkills/Tabskilltemple.jpg)
 
+点击![GitHub Logo](../../figures/OperationSkills/Tabskilltempleshow.jpg)图标会以子系统-->部件-->泳道层级去显示：
+![GitHub Logo](../../figures/OperationSkills/Tabskillsubsystem.jpg)
+点击![GitHub Logo](../../figures/OperationSkills/subsystemupload.jpg)导入模板的 json 配置，点击![GitHub Logo](../../figures/OperationSkills/subsystemdownload.jpg)下载模板的 json 配置，模板的配置文件格式如下：
+![GitHub Logo](../../figures/OperationSkills/subsystemsconfig.jpg)
+
 ### 所有进程的用户输入事件归一显示，观察操作事件和对象
 
 对于用户 InputEvent 会绘制到固定的泳道图。
diff --git a/ide/src/doc/md/quickstart_ability_monitor.html b/ide/src/doc/md/quickstart_ability_monitor.html
index cde6491b81c6ef7b2485c0164d12622079c92d3f..016e5eb908c18a07553fadaf183afe7ca8be4aeb 100644
--- a/ide/src/doc/md/quickstart_ability_monitor.html
+++ b/ide/src/doc/md/quickstart_ability_monitor.html
@@ -749,26 +749,35 @@
       <h2 id="ability-monitor-的抓取">Ability Monitor 的抓取</h2>
       <h3 id="ability-monitor-抓取界面配置说明">Ability Monitor 抓取界面配置说明</h3>
       <p>
-        点击 Probes config，如选择抓取 AbilityMonitor。<br />
+        点击 Probes config，如选择抓取 AbilityMonitor。
+        <br />
         <img src="../../figures/AbilityMonitor/abilityset.jpg" alt="GitHub Logo" />
       </p>
       <h3 id="ability-monitor-文件的抓取">Ability Monitor 文件的抓取</h3>
       <p>
         点击 Record setting，在 output file path 输入文件名 hiprofiler_data_abilitymonitor.htrace，拖动滚动条设置 buffer
-        size 大小是 64M，抓取时长是 50s。<br />
-        <img src="../../figures/AbilityMonitor/abilitysetting.jpg" alt="GitHub Logo" /><br />
-        点击 Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
-        <img src="../../figures/AbilityMonitor/abilitycommand.jpg" alt="GitHub Logo" /><br />
-        输入 hdc_shell，进入设备，执行命令。<br />
-        <img src="../../figures/AbilityMonitor/abilityexcutecommand.jpg" alt="GitHub Logo" /><br />
-        进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的 trace 文件。<br />
+        size 大小是 64M，抓取时长是 50s。
+        <br />
+        <img src="../../figures/AbilityMonitor/abilitysetting.jpg" alt="GitHub Logo" />
+        <br />
+        点击 Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
+        <img src="../../figures/AbilityMonitor/abilitycommand.jpg" alt="GitHub Logo" />
+        <br />
+        输入 hdc_shell，进入设备，执行命令。
+        <br />
+        <img src="../../figures/AbilityMonitor/abilityexcutecommand.jpg" alt="GitHub Logo" />
+        <br />
+        进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的 trace 文件。
+        <br />
         <img src="../../figures/AbilityMonitor/abilityhtrace.jpg" alt="GitHub Logo" />
       </p>
       <h2 id="ability-monitor-功能介绍">Ability Monitor 功能介绍</h2>
       <p>将抓取的文件导入到 smartperf 工具查看，能了解 CPU，内存，磁盘 IO 和网络的使用情况。</p>
       <h3 id="ability-monitor-泳道图展示">Ability Monitor 泳道图展示</h3>
       <p>
-        Ability Monitor 展开就可以看到泳道图，包括 CPU，内存，磁盘 IO，网络的使用情况。<br />
+        Ability Monitor 展开就可以看到泳道图，包括 CPU，内存，磁盘 IO，网络的使用情况。
+        <br />
         <img src="../../figures/AbilityMonitor/abilitymonitorflowchart.jpg" alt="GitHub Logo" />
       </p>
       <ul>
@@ -860,8 +869,10 @@ Network Packets Out/Sec： 每秒发送的网络数据包数。
       <h3 id="ability-monitor-泳道图的框选功能">Ability Monitor 泳道图的框选功能</h3>
       <p>
         可以对 CPU，内存，磁盘 IO 和网络的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有六个 tab
-        页。<br />
-        Live Processes 的 Tab 页如图：<br />
+        页。
+        <br />
+        Live Processes 的 Tab 页如图：
+        <br />
         <img src="../../figures/AbilityMonitor/liveprocess.jpg" alt="GitHub Logo" />
       </p>
       <ul>
@@ -924,7 +935,8 @@ Disk Writes(B)：磁盘读入的字节数。
 Disk Reads(B)：磁盘写入的字节数。
 </pre
           >
-          Processes History 的 Tab 页如图：<br />
+          Processes History 的 Tab 页如图：
+          <br />
           <img src="../../figures/AbilityMonitor/ProcessesHistory.jpg" alt="GitHub Logo" />
         </li>
         <li>
@@ -974,7 +986,8 @@ User ID：用户ID。
 CPU Time：CPU运行时间。
 </pre
           >
-          框选 CPU Total Load，CPU User Load，CPU System Load 三个区域的泳道图，会展示 System CPU Summary 的 Tab 页。<br />
+          框选 CPU Total Load，CPU User Load，CPU System Load 三个区域的泳道图，会展示 System CPU Summary 的 Tab 页。
+          <br />
           <img src="../../figures/AbilityMonitor/cpusummary.jpg" alt="GitHub Logo" />
         </li>
         <li>
@@ -1012,7 +1025,8 @@ SystemLoad%：CPU在内核空间运行的使用率。
 Process：进程号。
 </pre
           >
-          框选 MemoryTotal，Cached，SwapTota 三个区域的泳道图，会展示 System Memory Summary 的 Tab 页。<br />
+          框选 MemoryTotal，Cached，SwapTota 三个区域的泳道图，会展示 System Memory Summary 的 Tab 页。
+          <br />
           <img src="../../figures/AbilityMonitor/memorytab.jpg" alt="GitHub Logo" />
         </li>
         <li>
@@ -1141,7 +1155,8 @@ CmaFree：空闲的可用内存。
 </pre
           >
           框选 Disk Bytes Read/Sec，Disk Bytes Written/Sec，Disk Read Ops/Sec，Disk Written Ops/Sec
-          四个区域的泳道图，会展示 System Disk Summary 的 Tab 页。<br />
+          四个区域的泳道图，会展示 System Disk Summary 的 Tab 页。
+          <br />
           <img src="../../figures/AbilityMonitor/disktab.jpg" alt="GitHub Logo" />
         </li>
         <li>
@@ -1204,7 +1219,8 @@ Write Out/sec：每秒写入的字节数。
 </pre
           >
           框选 Network Bytes In/Sec，Network Bytes Out/Sec，Network Packets In/Sec，Network Packets Out/Sec
-          四个区域的泳道图，会展示 System Network Summary 的 Tab 页。<br />
+          四个区域的泳道图，会展示 System Network Summary 的 Tab 页。
+          <br />
           <img src="../../figures/AbilityMonitor/network.jpg" alt="GitHub Logo" />
         </li>
         <li>
diff --git a/ide/src/doc/md/quickstart_device_record.md b/ide/src/doc/md/quickstart_device_record.md
index 9a1f750a7de1771577d1cca47d19e26fba85f3a6..1ddd0f149e436b0613937e94e64dff8de08cbfb0 100644
--- a/ide/src/doc/md/quickstart_device_record.md
+++ b/ide/src/doc/md/quickstart_device_record.md
@@ -13,7 +13,7 @@
 - Native Memory: NativeMemory 数据的抓取参数配置。
 - Hiperf: Hiperf 数据的抓取参数配置。
 - eBPF Config: ebpf 数据的抓取参数配置。
-- VM Tracker: Smaps数据的抓取参数配置。
+- VM Tracker: Smaps 数据的抓取参数配置。
 - HiSystemEvent: HiSystemEvent 数据抓取参数配置。
 - SDK Config: SDK 数据抓取参数配置。
 
diff --git a/ide/src/doc/md/quickstart_native_memory.md b/ide/src/doc/md/quickstart_native_memory.md
index ac216a72389fd3ef992bbbd9dc295112045d8572..6727ef5fcbcc947d5950341a981e2b3060178b39 100644
--- a/ide/src/doc/md/quickstart_native_memory.md
+++ b/ide/src/doc/md/quickstart_native_memory.md
@@ -141,7 +141,7 @@ Call Info 的 Tab 页，主要显示了调用树详细类型。
 
 ### 搜索框支持表达式输入
 
-调用栈默认会显示火焰图，新增搜索框表达式输入。表达式作用范围为 nativehook 的统计与非统计模式。其中处理的为 Responsible Library 与 Responsible Caller，其中 Responsible Library 和Responsible Caller 表示从下往上非 libc++ musl 的第一条调用栈的 lib 跟 symbol，如下图所示，由于最后一条 [ operator new(unsigned long) ] libc++.so 为 libc++.so 的函数，故跳过，所以该条调用栈的 Responsible Library 为 libhilog.so，Responsible Caller 为 OHOS::HiviewDFX::GetDomainLevel(unsigned int) 。
+调用栈默认会显示火焰图，新增搜索框表达式输入。表达式作用范围为 nativehook 的统计与非统计模式。其中处理的为 Responsible Library 与 Responsible Caller，其中 Responsible Library 和 Responsible Caller 表示从下往上非 libc++ musl 的第一条调用栈的 lib 跟 symbol，如下图所示，由于最后一条 [ operator new(unsigned long) ] libc++.so 为 libc++.so 的函数，故跳过，所以该条调用栈的 Responsible Library 为 libhilog.so，Responsible Caller 为 OHOS::HiviewDFX::GetDomainLevel(unsigned int) 。
 ![GitHub Logo](../../figures/NativeMemory/framecaller.jpg)
 
 表达式说明: 在 InputFilter 输入框可以进行搜索过滤和表达式过滤，其中表达式必须以@开头，英文括号包起所需要过滤的内容，每个括号必须包括 （Responsible Library，Responsible Caller）匹配全量以\*表示，否则认为该输入为搜索过滤。
diff --git a/ide/src/doc/md/quickstart_systemtrace.md b/ide/src/doc/md/quickstart_systemtrace.md
index b4f52d8d64e0334fd672388cb56b34d0438c94cf..ec574a05522028a2130809d9e5e5f35ea0f733f7 100644
--- a/ide/src/doc/md/quickstart_systemtrace.md
+++ b/ide/src/doc/md/quickstart_systemtrace.md
@@ -97,18 +97,25 @@ Thread States、Thread Switches 的 2 个 Tab 页，点击移动到某一行，
 点击画红框处的带箭头的标志，会从 CPU 的线程概览视图跳转到线程的详情视图，同时从线程的详情视图也能跳转到 CPU 的线程概览视图。
 ![GitHub Logo](../../figures/Web/jumpthread.jpg)
 
-#### 获取频点的busy_time
-框选Cpu Frequency泳道的Tab页有GetBusyTime的按钮，该按钮获取每个频点在Cpu State等于0时的时间信息，体现频点的忙碌时间。
+#### 获取频点的 busy_time
+
+框选 Cpu Frequency 泳道的 Tab 页有 GetBusyTime 的按钮，该按钮获取每个频点在 Cpu State 等于 0 时的时间信息，体现频点的忙碌时间。
 ![GitHub Logo](../../figures/Web/getbusytime.jpg)
-#### CPU频点数据切割
-框选区域内所有running状态的频点数据，以用户输入的某一方法作为切割依据，将频点数据以Single和Loop两种方式切割后展示在Tab标签页的表格中。
+
+#### CPU 频点数据切割
+
+框选区域内所有 running 状态的频点数据，以用户输入的某一方法作为切割依据，将频点数据以 Single 和 Loop 两种方式切割后展示在 Tab 标签页的表格中。
 ![GitHub Logo](../../figures/Web/Singe_loop.jpg)
+
 #### 关键路径标识
-在ftrace数据中的cpu泳道的区域，在界面顶部增加json文件导入按钮，导入json文件后，根据线程号跟对应的时间，在cpu区域高亮该时间的线程色块，点击界面上的x,可以取消高亮。json格式如下：
+
+在 ftrace 数据中的 cpu 泳道的区域，在界面顶部增加 json 文件导入按钮，导入 json 文件后，根据线程号跟对应的时间，在 cpu 区域高亮该时间的线程色块，点击界面上的 x,可以取消高亮。json 格式如下：
 ![GitHub Logo](../../figures/Web/json.jpg)
-导入json文件以后，会将ACCS0 [2716]线程对应时间点的slice色块高亮显示
+导入 json 文件以后，会将 ACCS0 [2716]线程对应时间点的 slice 色块高亮显示
 ![GitHub Logo](../../figures/Web/keyslice.jpg)
-### trace的其他功能
+
+### trace 的其他功能
+
 #### 小旗标志的功能
 
 将选中数据的时间点通过小旗的方式在时间轴上展示，直观的展示选中数据的时间。
diff --git a/ide/src/doc/quickstart_Application_operation_skills.html b/ide/src/doc/quickstart_Application_operation_skills.html
index 2ecbbf6fc4f62e0146a695ec0a51e40591df0ad1..b287169a929a42bf65ec013a0d0a3dc3e35f345e 100644
--- a/ide/src/doc/quickstart_Application_operation_skills.html
+++ b/ide/src/doc/quickstart_Application_operation_skills.html
@@ -794,128 +794,172 @@
       <h3 class="mume-header fontColor">可导入符号表</h3>
 
       <p class="fontColor">
-        符号表导入适用于所有支持调用栈的Tab页，选择一个文件夹，获取文件下及其子文件夹的所有so文件，更新数据库中符号数据。文件夹内so的格式需要与在设备上的路径一致，并且导入的so需要是有符号的，例如下图中，选择的文件夹为import，选择导入的libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是import/system/lib64/libnative_hook.z.so。<br />
-        <img src="../figures/OperationSkills/Operation_soimport_dir.jpg" alt="GitHub Logo" /><br />
-        以NativeMemory举例，导入NativeMemory文件，点击Call
-        info的Tab页，在搜索框中输入libnative_hook.z.so，会发现该so下的调用栈没有符号化完全。<br />
-        <img src="../figures/OperationSkills/Operation_soimport_nativehook.jpg" alt="GitHub Logo" /><br />
-        将本地编译的so通过导入按钮导入，本地导入路径是import/system/lib64/libnative_hook.z.so，红框处是导入按钮。<br />
-        <img src="../figures/OperationSkills/Operation_soimport_local.jpg" alt="GitHub Logo" /><br />
-        导入so以后，在搜索框中输入libnative_hook.z.so，会发现符号化数据已经更新。<br />
+        符号表导入适用于所有支持调用栈的 Tab 页，选择一个文件夹，获取文件下及其子文件夹的所有 so
+        文件，更新数据库中符号数据。文件夹内 so 的格式需要与在设备上的路径一致，例如下图中，选择的文件夹为
+        import，选择导入的 libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是
+        import/system/lib64/libnative_hook.z.so。
+        <br />
+        <img src="../figures/OperationSkills/Operation_soimport_dir.jpg" alt="GitHub Logo" />
+        <br />
+        以 NativeMemory 举例，导入 NativeMemory 文件，点击 Call info 的 Tab 页，在搜索框中输入
+        libnative_hook.z.so，会发现该 so 下的调用栈没有符号化完全。
+        <br />
+        <img src="../figures/OperationSkills/Operation_soimport_nativehook.jpg" alt="GitHub Logo" />
+        <br />
+        将本地编译的 so 通过导入按钮导入，本地导入路径是 import/system/lib64/libnative_hook.z.so，红框处是导入按钮。
+        <br />
+        <img src="../figures/OperationSkills/Operation_soimport_local.jpg" alt="GitHub Logo" />
+        <br />
+        导入 so 以后，在搜索框中输入 libnative_hook.z.so，会发现符号化数据已经更新。
+        <br />
         <img src="../figures/OperationSkills/Operation_soimport_new.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">网页链接文件打开接口</h3>
+      <h3 class="mume-header fontColor">网页连接文件打开接口</h3>
 
       <p class="fontColor">
-        网页链接文件打开接口可以在网址后增加文件地址，打开后直接打开trace。<br />
-        接口的url路径如下：<br />
+        网页连接文件打开接口可以在网址后增加文件地址，打开后直接打开 trace。
+        <br />
+        接口的 url 路径如下：
+        <br />
         <img src="../figures/OperationSkills/Opertion_urltrace.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
         <li>
           <pre class="smartperf-text fontColor light">
 蓝色框：是Smartperf工具的url(https://localhost:9000/application/)。
-</pre
-          >
+          </pre>
         </li>
         <li>
           <pre class="smartperf-text fontColor light">
 绿色框：trace文件的url，其中
-              第一部分是?trace=(固定格式)。
-              第二部分是trace文件的url(https://iot.itocm.com:9001/upload/ftrace_small.txt),此处根据文件的url实际地址填写。
-              第三部分,&amp;link=true(固定格式)。
-</pre
-          >
+                        第一部分是?trace=(固定格式)。
+                        第二部分是trace文件的url(https://iot.itocm.com:9001/upload/ftrace_small.txt),此处根据文件的url实际地址填写。
+                        第三部分,&amp;link=true(固定格式)。
+          </pre>
         </li>
       </ul>
       <h3 class="mume-header fontColor">内容支持宽度可伸缩</h3>
 
       <p class="fontColor">
-        在表格每行的表头添加一个灰色竖线，拖动时单元格宽度随之改变。<br />
+        在表格每行的表头添加一个灰色竖线，拖动时单元格宽度随之改变。
+        <br />
         <img src="../figures/OperationSkills/Tabdrag.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">一键展开和收起，逐级展开和收起</h3>
 
       <p class="fontColor">
-        将树形表格全部改为默认收起，在表头左上角添加双尖箭头图标,默认箭头朝外，点击图标，表格的每一层都展开，图标上的箭头改为朝里面，再次点击表格每一层都收起，图标上的箭头改为朝外面。<br />
+        将树形表格全部改为默认收起，在表头左上角添加双尖箭头图标,默认箭头朝外，点击图标，表格的每一层都展开，图标上的箭头改为朝里面，再次点击表格每一层都收起，图标上的箭头改为朝外面。
+        <br />
         <img src="../figures/OperationSkills/Taboneclick.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">
-        支持shift+m多次框选，框选列表显示和操作（跳转，取消）,快捷键跳转ctrl+[/]和一键取消
+        支持 shift+m 多次框选，框选列表显示和操作（跳转，取消）,快捷键跳转 ctrl+[/]和一键取消
       </h3>
 
       <p class="fontColor">
-        每次框选泳道图后，按下shift+m键，在当前框选的开始和结束位置出现卡尺，如果只按下m键，会将上一次按m键出现的卡尺清除，在当前框选位置画卡尺，页面上每个卡尺都放进tab页中，在tab页中可以给卡尺改变颜色和移除旗子。用快捷键改变当前选中的卡尺。按下快捷键“ctrl+[”或“ctrl+]”的时候，会跳转到当前选中卡尺的上\下一个卡尺上，也就是上\下一个卡尺两侧变为实心，对应表格中的那行背景颜色变浅蓝色。
+        每次框选泳道图后，按下 shift+m 键，在当前框选的开始和结束位置出现卡尺，如果只按下 m 键，会将上一次按 m
+        键出现的卡尺清除，在当前框选位置画卡尺，页面上每个卡尺都放进 tab 页中，在 tab
+        页中可以给卡尺改变颜色和移除旗子。用快捷键改变当前选中的卡尺。按下快捷键“ctrl+[”或“ctrl+]”的时候，会跳转到当前选中卡尺的上\下一个卡尺上，也就是上\下一个卡尺两侧变为实心，对应表格中的那行背景颜色变浅蓝色。
       </p>
       <h3 class="mume-header fontColor">
-        旗子标记可快速跳转，框选列表显示和操作（跳转，取消）,快捷跳转ctrl+,/.和一键取消
+        旗子标记可快速跳转，框选列表显示和操作（跳转，取消）,快捷跳转 ctrl+,/.和一键取消
       </h3>
 
       <p class="fontColor">
-        在时间刻度下方点击会出现旗子和tab页，每次点击都将旗子都放进tab页中，在tab页中可以给旗子改变颜色和移除旗子。用快捷键改变当前选中的旗子。按下快捷键“ctrl+，”或“ctrl+.”的时候，会跳转到当前选中旗子的上\下一个旗子上，也就是上\下一个旗子变为实心有旗杆，对应表格中的那行背景颜色变浅蓝色。<br />
+        在时间刻度下方点击会出现旗子和 tab 页，每次点击都将旗子都放进 tab 页中，在 tab
+        页中可以给旗子改变颜色和移除旗子。用快捷键改变当前选中的旗子。按下快捷键“ctrl+，”或“ctrl+.”的时候，会跳转到当前选中旗子的上\下一个旗子上，也就是上\下一个旗子变为实心有旗杆，对应表格中的那行背景颜色变浅蓝色。
+        <br />
         <img src="../figures/OperationSkills/rowskillflag.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">泳道图支持一键收起和展开（收起前的状态）</h3>
 
       <p class="fontColor">
-        点击时间刻度的最左边的双箭头，可以对已展开的泳道图进行一键收起和展开。<br />
+        点击时间刻度的最左边的双箭头，可以对已展开的泳道图进行一键收起和展开。
+        <br />
         <img src="../figures/OperationSkills/rowskilon.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">单个泳道图显示为多行时可折叠为1行（收藏和非收藏）</h3>
+      <h3 class="mume-header fontColor">单个泳道图显示为多行时可折叠为 1 行（收藏和非收藏）</h3>
 
       <p class="fontColor">
-        单个泳道图点击会将泳道图折叠为一行，折叠后的字体是蓝色。<br />
+        单个泳道图点击会将泳道图折叠为一行，折腾后的字体是蓝色。
+        <br />
         <img src="../figures/OperationSkills/Tabskillfold.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">已支持的泳道图按照模板分类显示，NaitveMemory，Hisysevent，应用内存等</h3>
 
       <p class="fontColor">
-        导入trace文件后，页面右上角的出现漏斗图标，点击会出现Display Template页面，Template
-        Select区域显示已经添加到显示模板中的泳道图，每类泳道图后面会有一个多选框，默认不勾选，如果勾选页面上就只保留勾选的泳道图。<br />
+        导入 trace 文件后，页面右上角的出现漏斗图标，点击会出现 Display Template 页面，Template Select
+        区域显示已经添加到显示模板中的泳道图，每类泳道图后面会有一个多选框，默认不勾选，如果勾选页面上就只保留勾选的泳道图。
+        <br />
         <img src="../figures/OperationSkills/Tabskilltemple.jpg" alt="GitHub Logo" />
       </p>
+      <p class="fontColor">
+        点击
+        <img src="../figures/OperationSkills/Tabskilltempleshow.jpg" alt="GitHub Logo" />
+        图标会以子系统--&gt;部件--&gt;泳道层级去显示：
+        <br />
+        <img src="../figures/OperationSkills/Tabskillsubsystem.jpg" alt="GitHub Logo" />
+        <br />
+        点击
+        <img src="../figures/OperationSkills/subsystemupload.jpg" alt="GitHub Logo" />
+        导入模板的json配置，点击
+        <img src="../figures/OperationSkills/subsystemdownload.jpg" alt="GitHub Logo" />
+        下载模板的json配置，模板的配置文件格式如下：
+        <br />
+        <img src="../figures/OperationSkills/subsystemsconfig.jpg" alt="GitHub Logo" />
+      </p>
       <h3 class="mume-header fontColor">所有进程的用户输入事件归一显示，观察操作事件和对象</h3>
 
       <p class="fontColor">
-        对于用户InputEvent会绘制到固定的泳道图。<br />
+        对于用户 InputEvent 会绘制到固定的泳道图。
+        <br />
         <img src="../figures/OperationSkills/rowskillinput.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">支持收藏的泳道图整体画布可伸缩</h3>
 
       <p class="fontColor">
-        收藏以后的泳道图可以在红线位置处上下伸缩拖动。<br />
+        收藏以后的泳道图可以在红线位置处上下伸缩拖动。
+        <br />
         <img src="../figures/OperationSkills/collectskilldrag.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">用户自定义分组化收藏（2组），及一键取消所有收藏</h3>
+      <h3 class="mume-header fontColor">用户自定义分组化收藏（2 组），及一键取消所有收藏</h3>
 
       <p class="fontColor">
-        选择界面上的G1和G2，可以根据自己的需求将泳道图收藏到对应G1或者G2中，点击G1和G2旁边的星号可以一键取消所有收藏。<br />
+        选择界面上的 G1 和 G2，可以根据自己的需求将泳道图收藏到对应 G1 或者 G2 中，点击 G1 和 G2
+        旁边的星号可以一键取消所有收藏。
+        <br />
         <img src="../figures/OperationSkills/collectskillg.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">trace顶部的cpu负载预览颜色随着负载降低，亮度降低的能力对比度提升</h3>
+      <h3 class="mume-header fontColor">trace 顶部的 cpu 负载预览颜色随着负载降低，亮度降低的能力对比度提升</h3>
 
       <p class="fontColor">
-        CPU负载颜色的亮度，负载越大颜色更深，负载越小颜色越浅。<br />
+        CPU 负载颜色的亮度，负载越大颜色更深，负载越小颜色越浅。
+        <br />
         <img src="../figures/OperationSkills/colorcontrast.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">
-        导航栏/泳道图背景颜色支持颜色可选，字体颜色可感知slice的颜色而进行变化，颜色动态可配
+        导航栏/泳道图背景颜色支持颜色可选，字体颜色可感知 slice 的颜色而进行变化，颜色动态可配
       </h3>
 
       <p class="fontColor">
-        给用户提供两种模式，浅色模式（导航栏白底黑字，泳道图颜色偏淡）和深色模式（导航栏黑底白字，泳道图颜色偏深），点击最左下方的小桶标志用户可以按需选择，并且用户可以自定义systemTrace页面的颜色，给用户更多自由，自己动手设置自己喜欢的颜色，提升用户体验。<br />
+        给用户提供两种模式，浅色模式（导航栏白底黑字，泳道图颜色偏淡）和深色模式（导航栏黑底白字，泳道图颜色偏深），点击最左下方的小桶标志用户可以按需选择，并且用户可以自定义
+        systemTrace 页面的颜色，给用户更多自由，自己动手设置自己喜欢的颜色，提升用户体验。
+        <br />
         <img src="../figures/OperationSkills/colorchoose.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">Trace抓取动态可停</h3>
+      <h3 class="mume-header fontColor">Trace 抓取动态可停</h3>
 
       <p class="fontColor">
-        在抓取trace过程中，点击StopRecord按钮会对抓取命令进行启停,等待抓取停止命令返回后,将生成的文件拉取下来进行文件的解析。<br />
+        在抓取 trace 过程中，点击 StopRecord
+        按钮会对抓取命令进行启停,等待抓取停止命令返回后,将生成的文件拉取下来进行文件的解析。
+        <br />
         <img src="../figures/OperationSkills/tracestop.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">Smartperf web端集成hdc命令能力</h3>
+      <h3 class="mume-header fontColor">Smartperf web 端集成 hdc 命令能力</h3>
 
       <p class="fontColor">
-        在现有的配置界面上，新增一个Web版本的shell界面，可以支持shell命令。<br />
+        在现有的配置界面上，新增一个 Web 版本的 shell 界面，可以支持 shell 命令。
+        <br />
         <img src="../figures/OperationSkills/shellconfig.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_Frametimeline.html b/ide/src/doc/quickstart_Frametimeline.html
index f52ac9b47a5f03dce14beb096df24c7faa6e284d..8bfedf6ec60d0d5127b86020351e4f06e1b8289a 100644
--- a/ide/src/doc/quickstart_Frametimeline.html
+++ b/ide/src/doc/quickstart_Frametimeline.html
@@ -799,16 +799,20 @@
       <h3 class="mume-header fontColor">Frame timeline抓取界面配置说明</h3>
 
       <p class="fontColor">
-        打开Frame timeline开关抓取Frametimeline数据。<br />
+        打开Frame timeline开关抓取Frametimeline数据。
+        <br />
         <img src="../figures/Frame/frameset.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Frame timeline文件的抓取</h3>
 
       <p class="fontColor">
         点击Record setting，在output file path输入文件名hiprofiler_dataframe.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/Frame/framesetting.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/Frame/framesetting.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
+        <br />
         <img src="../figures/Frame/frameexcuting.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Frame timeline功能介绍</h2>
@@ -817,7 +821,8 @@
       <h3 class="mume-header fontColor">Frame timeline泳道图展示</h3>
 
       <p class="fontColor">
-        Frame timeline展开就可以看到泳道图，泳道图上可以显示帧编号。<br />
+        Frame timeline展开就可以看到泳道图，泳道图上可以显示帧编号。
+        <br />
         <img src="../figures/Frame/framechart.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -837,8 +842,10 @@ Actual Timeline：真实帧泳道图。
       <h3 class="mume-header fontColor">Frame timeline泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对真实帧数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。<br />
-        Frames的Tab页如图：<br />
+        可以对真实帧数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。
+        <br />
+        Frames的Tab页如图：
+        <br />
         <img src="../figures/Frame/frameprocess.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -876,8 +883,10 @@ Occurrences：事件数。
       <h3 class="mume-header fontColor">Frame timeline泳道图的点选功能</h3>
 
       <p class="fontColor">
-        通过点选理想帧和真实帧展示Tab页(Current Selection)。<br />
-        理想帧Tab页如下图：<br />
+        通过点选理想帧和真实帧展示Tab页(Current Selection)。
+        <br />
+        理想帧Tab页如下图：
+        <br />
         <img src="../figures/Frame/frameexpectedtab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -913,7 +922,8 @@ Process：进程名。
         </li>
       </ul>
       <p class="fontColor">
-        真实帧Tab页如下图：<br />
+        真实帧Tab页如下图：
+        <br />
         <img src="../figures/Frame/frameactualtab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_Import_so.html b/ide/src/doc/quickstart_Import_so.html
index fa16d87969d1b2a21ccb624ddc9b6076d53451b4..0553b1a00171bcfa673e0a1230f1fd0ce373844b 100644
--- a/ide/src/doc/quickstart_Import_so.html
+++ b/ide/src/doc/quickstart_Import_so.html
@@ -798,8 +798,10 @@
 
       <p class="fontColor">
         Native
-        Memory分为三级统计，分别按照内存分配的类型(Alloc/Mmap)，lib库，函数进行统计分析。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。<br />
-        点击Analysis的Tab页，先以内存分配的类型去统计。<br />
+        Memory分为三级统计，分别按照内存分配的类型(Alloc/Mmap)，lib库，函数进行统计分析。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
+        <br />
+        点击Analysis的Tab页，先以内存分配的类型去统计。
+        <br />
         <img src="../figures/ImportSo/Native_import_all.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -853,7 +855,8 @@ Transient：框选区域内释放的大小。
         </li>
       </ul>
       <p class="fontColor">
-        以lib库去统计，如图显示的是AllocEvent的so占比的饼图和Table表。<br />
+        以lib库去统计，如图显示的是AllocEvent的so占比的饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/Native_import_so_Existing.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -907,7 +910,8 @@ Transient：框选区域内释放的大小。
         </li>
       </ul>
       <p class="fontColor">
-        以函数去统计，如图显示的是AllocEvent/libmali-bifrost-g52-g2p0-ohos.so的函数占比的饼图和Table表。<br />
+        以函数去统计，如图显示的是AllocEvent/libmali-bifrost-g52-g2p0-ohos.so的函数占比的饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/Native_import_so_function.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -963,8 +967,10 @@ Transient：框选区域内释放的大小。
       <h2 class="mume-header fontColor">Hiperf文件的不同库函数占比</h2>
 
       <p class="fontColor">
-        Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。<br />
-        点击Analysis的Tab页，先以进程去统计。<br />
+        Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。
+        <br />
+        点击Analysis的Tab页，先以进程去统计。
+        <br />
         <img src="../figures/ImportSo/Hiperf_import_all.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -988,7 +994,8 @@ Weight：该进程下的调用方法的执行次数。
         </li>
       </ul>
       <p class="fontColor">
-        以线程统计，如图显示的是hiperf进程下的线程的饼图和Table表。<br />
+        以线程统计，如图显示的是hiperf进程下的线程的饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/Hiperf_import_thread.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1012,7 +1019,8 @@ Weight：该线程下的调用方法的执行次数。
         </li>
       </ul>
       <p class="fontColor">
-        以lib库统计，如图显示的是hiperf线程下的各so占比饼图和Table表。<br />
+        以lib库统计，如图显示的是hiperf线程下的各so占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/Hiperf_import_lib.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1036,7 +1044,8 @@ Weight：该so的调用方法的执行次数。
         </li>
       </ul>
       <p class="fontColor">
-        以函数统计，如图显示的是ld-musl-aarch64.so.1下的各函数占比饼图和Table表。<br />
+        以函数统计，如图显示的是ld-musl-aarch64.so.1下的各函数占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/Hiperf_import_Fuc.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1062,8 +1071,10 @@ Weight：该so的调用方法的执行次数。
       <h2 class="mume-header fontColor">FileSystem文件的不同库函数占比</h2>
 
       <p class="fontColor">
-        FileSystem分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。<br />
-        点击Analysis的Tab页，先以进程去统计。<br />
+        FileSystem分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
+        <br />
+        点击Analysis的Tab页，先以进程去统计。
+        <br />
         <img src="../figures/ImportSo/filesystem_import_process.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1087,7 +1098,8 @@ Duration：总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以系统调用类型统计，如图显示的是grep进程下的Read和Write系统调用的时长占比饼图和Table表。<br />
+        以系统调用类型统计，如图显示的是grep进程下的Read和Write系统调用的时长占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/filesystem_import_Type.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1111,7 +1123,8 @@ Duration：系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以线程统计，如图显示的是系统调用是Read类型的线程的占比饼图和Table表。<br />
+        以线程统计，如图显示的是系统调用是Read类型的线程的占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/filesystem_import_thread.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1135,7 +1148,8 @@ Duration：该线程的系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以lib库统计，如图显示toybox的lib库的占比饼图和Table表。<br />
+        以lib库统计，如图显示toybox的lib库的占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/filesystem_import_lib.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1159,7 +1173,8 @@ Duration：该so的系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以函数统计，如图显示0x558111afbc (toybox)的函数占比饼图和Table表。<br />
+        以函数统计，如图显示0x558111afbc (toybox)的函数占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/filesystem_import_func.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1185,8 +1200,10 @@ Duration：该函数的系统调用的总时长。
       <h2 class="mume-header fontColor">Bio文件的不同库函数占比</h2>
 
       <p class="fontColor">
-        Bio分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非submit_bio第一条函数及其lib为每次分配归属的函数及lib库。<br />
-        点击Analysis的Tab页，先以进程去统计。<br />
+        Bio分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非submit_bio第一条函数及其lib为每次分配归属的函数及lib库。
+        <br />
+        点击Analysis的Tab页，先以进程去统计。
+        <br />
         <img src="../figures/ImportSo/bio_import_process.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1210,7 +1227,8 @@ Duration：总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以系统调用类型统计，如图显示的是jbd2/mmcblk0p11进程下的DATA_WRITE系统调用的时长占比饼图和Table表。<br />
+        以系统调用类型统计，如图显示的是jbd2/mmcblk0p11进程下的DATA_WRITE系统调用的时长占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/bio_import_Type.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1234,7 +1252,8 @@ Duration：系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以线程统计，如图显示的是系统调用是DATA_WRITE类型的线程的占比饼图和Table表。<br />
+        以线程统计，如图显示的是系统调用是DATA_WRITE类型的线程的占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/bio_import_thread.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1258,7 +1277,8 @@ Duration：该线程的系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以lib库统计，如图显示kallsyms的lib库的占比饼图和Table表。<br />
+        以lib库统计，如图显示kallsyms的lib库的占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/bio_import_lib.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1282,7 +1302,8 @@ Duration：该so的系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以函数统计，如图显示submit_bh的函数占比饼图和Table表。<br />
+        以函数统计，如图显示submit_bh的函数占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/bio_import_func.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1309,8 +1330,10 @@ Duration：该函数的系统调用的总时长。
 
       <p class="fontColor">
         Page
-        Fault分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。<br />
-        点击Analysis的Tab页，先以进程去统计。<br />
+        Fault分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
+        <br />
+        点击Analysis的Tab页，先以进程去统计。
+        <br />
         <img src="../figures/ImportSo/pagefault_import_process.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1334,7 +1357,8 @@ Duration：总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以系统调用类型统计，如图显示的是1.ui进程下的File Backed In和Copy On Writer系统调用的时长占比饼图和Table表。<br />
+        以系统调用类型统计，如图显示的是1.ui进程下的File Backed In和Copy On Writer系统调用的时长占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/pagefault_import_Type.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1358,7 +1382,8 @@ Duration：系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以线程统计，如图显示的是系统调用是File Backed In类型的线程的占比饼图和Table表。<br />
+        以线程统计，如图显示的是系统调用是File Backed In类型的线程的占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/pagefault_import_thread.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1382,7 +1407,8 @@ Duration：该线程的系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以lib库统计，如图显示各lib库的占比饼图和Table表。<br />
+        以lib库统计，如图显示各lib库的占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/pagefault_import_lib.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1406,7 +1432,8 @@ Duration：该so的系统调用的总时长。
         </li>
       </ul>
       <p class="fontColor">
-        以函数统计，如图显示各函数占比饼图和Table表。<br />
+        以函数统计，如图显示各函数占比饼图和Table表。
+        <br />
         <img src="../figures/ImportSo/pagefault_import_func.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_Js_memory.html b/ide/src/doc/quickstart_Js_memory.html
index b2ef07c0b9ffd1d73340838ef097ed4a60b223bf..5a382fce2b196f6d385e57688952b3e8013f5865 100644
--- a/ide/src/doc/quickstart_Js_memory.html
+++ b/ide/src/doc/quickstart_Js_memory.html
@@ -797,7 +797,8 @@
       <h3 class="mume-header fontColor">Js Memory抓取配置参数</h3>
 
       <p class="fontColor">
-        <img src="../figures/Jsmemory/jsmemorysetting.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/Jsmemory/jsmemorysetting.jpg" alt="GitHub Logo" />
+        <br />
         配置参数说明：
       </p>
       <ul class="fontColor">
@@ -812,11 +813,13 @@
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_jsmemory.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是30s。<br />
+        size大小是64M，抓取时长是30s。
+        <br />
         <img src="../figures/Jsmemory/jsmemoryset.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">
-        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。<br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
+        <br />
         <img src="../figures/Jsmemory/jsmemoryrecord.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Js Memory展示说明</h2>
@@ -825,7 +828,8 @@
       <h3 class="mume-header fontColor">Js Memory泳道图展示类型</h3>
 
       <p class="fontColor">
-        堆快照类型文件的泳道图展示。<br />
+        堆快照类型文件的泳道图展示。
+        <br />
         <img src="../figures/Jsmemory/jsnapshotChart.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -837,7 +841,8 @@ Heapsnapshot：堆快照性能分析会显示网页的JavaScript对象和相关D
         </li>
       </ul>
       <p class="fontColor">
-        时间轴上分配插桩类型文件的泳道图展示。<br />
+        时间轴上分配插桩类型文件的泳道图展示。
+        <br />
         <img src="../figures/Jsmemory/jstimelineChart.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -851,8 +856,10 @@ Heaptimeline：分配时间轴显示了插桩的JavaScript内存分配随时间
       <h3 class="mume-header fontColor">Js Memory泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。<br />
-        Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。<br />
+        可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。
+        <br />
+        Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。
+        <br />
         <img src="../figures/Jsmemory/JsSummary.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -875,7 +882,8 @@ Distance：使用节点的最短简单路径显示到根的距离。
             Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为100000000。在界面上显示为-，A、B、C、D、E、F、H为调用节点；以E为例，从A-&gt;D-&gt;F&gt;E,distance为4，从A-&gt;D-&gt;E，distance为3;从B-&gt;E,distance为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。
           </p>
           <p class="fontColor">
-            其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G)<br />
+            其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G)
+            <br />
             <img src="../figures/Jsmemory/js_sample.png" alt="GitHub Logo" />
           </p>
         </li>
@@ -934,7 +942,8 @@ RetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以
         </li>
       </ul>
       <p class="fontColor">
-        Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。<br />
+        Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。
+        <br />
         <img src="../figures/Jsmemory/JsComparison.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -987,7 +996,8 @@ Size Delta：Delta的Size。
       <h3 class="mume-header fontColor">Js Memory的辅助信息功能</h3>
 
       <p class="fontColor">
-        在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。<br />
+        在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。
+        <br />
         <img src="../figures/Jsmemory/jsmemorycallstack.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1019,7 +1029,8 @@ RetainedSize：对象以及其相关的对象一起被删除后所释放的内
       <h3 class="mume-header fontColor">Js Memory详细显示的过滤功能</h3>
 
       <p class="fontColor">
-        在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。<br />
+        在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。
+        <br />
         <img src="../figures/Jsmemory/Jsmemoryfilter.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_ability_monitor.html b/ide/src/doc/quickstart_ability_monitor.html
index b74904ec30e10ca70bcef95eb65ff5c079478bd3..7c902bfb6f234d26f2ef440e93b196a9bf20847b 100644
--- a/ide/src/doc/quickstart_ability_monitor.html
+++ b/ide/src/doc/quickstart_ability_monitor.html
@@ -798,20 +798,28 @@
       <h3 class="mume-header fontColor">Ability Monitor抓取界面配置说明</h3>
 
       <p class="fontColor">
-        点击Probes config，如选择抓取AbilityMonitor。<br />
+        点击Probes config，如选择抓取AbilityMonitor。
+        <br />
         <img src="../figures/AbilityMonitor/abilityset.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Ability Monitor文件的抓取</h3>
 
       <p class="fontColor">
         点击Record setting，在output file path输入文件名hiprofiler_data_abilitymonitor.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/AbilityMonitor/abilitysetting.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
-        <img src="../figures/AbilityMonitor/abilitycommand.jpg" alt="GitHub Logo" /><br />
-        输入hdc_shell，进入设备，执行命令。<br />
-        <img src="../figures/AbilityMonitor/abilityexcutecommand.jpg" alt="GitHub Logo" /><br />
-        进入指定目录，cd /data/local/tmp进入到目录，会看到生成的trace文件。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/AbilityMonitor/abilitysetting.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
+        <img src="../figures/AbilityMonitor/abilitycommand.jpg" alt="GitHub Logo" />
+        <br />
+        输入hdc_shell，进入设备，执行命令。
+        <br />
+        <img src="../figures/AbilityMonitor/abilityexcutecommand.jpg" alt="GitHub Logo" />
+        <br />
+        进入指定目录，cd /data/local/tmp进入到目录，会看到生成的trace文件。
+        <br />
         <img src="../figures/AbilityMonitor/abilityhtrace.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Ability Monitor功能介绍</h2>
@@ -820,7 +828,8 @@
       <h3 class="mume-header fontColor">Ability Monitor泳道图展示</h3>
 
       <p class="fontColor">
-        Ability Monitor展开就可以看到泳道图，包括CPU，内存，磁盘IO，网络的使用情况。<br />
+        Ability Monitor展开就可以看到泳道图，包括CPU，内存，磁盘IO，网络的使用情况。
+        <br />
         <img src="../figures/AbilityMonitor/abilitymonitorflowchart.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -912,8 +921,10 @@ Network Packets Out/Sec： 每秒发送的网络数据包数。
       <h3 class="mume-header fontColor">Ability Monitor泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对CPU，内存，磁盘IO和网络的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有六个tab页。<br />
-        Live Processes的Tab页如图：<br />
+        可以对CPU，内存，磁盘IO和网络的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有六个tab页。
+        <br />
+        Live Processes的Tab页如图：
+        <br />
         <img src="../figures/AbilityMonitor/liveprocess.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -979,7 +990,8 @@ Disk Reads(B)：磁盘写入的字节数。
         </li>
       </ul>
       <p class="fontColor">
-        Processes History的Tab页如图：<br />
+        Processes History的Tab页如图：
+        <br />
         <img src="../figures/AbilityMonitor/ProcessesHistory.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1033,7 +1045,8 @@ CPU Time：CPU运行时间。
         </li>
       </ul>
       <p class="fontColor">
-        框选CPU Total Load，CPU User Load，CPU System Load三个区域的泳道图，会展示System CPU Summary的Tab页。<br />
+        框选CPU Total Load，CPU User Load，CPU System Load三个区域的泳道图，会展示System CPU Summary的Tab页。
+        <br />
         <img src="../figures/AbilityMonitor/cpusummary.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1075,7 +1088,8 @@ Process：进程号。
         </li>
       </ul>
       <p class="fontColor">
-        框选MemoryTotal，Cached，SwapTota三个区域的泳道图，会展示System Memory Summary的Tab页。<br />
+        框选MemoryTotal，Cached，SwapTota三个区域的泳道图，会展示System Memory Summary的Tab页。
+        <br />
         <img src="../figures/AbilityMonitor/memorytab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1208,7 +1222,8 @@ CmaFree：空闲的可用内存。
       </ul>
       <p class="fontColor">
         框选Disk Bytes Read/Sec，Disk Bytes Written/Sec，Disk Read Ops/Sec，Disk Written
-        Ops/Sec四个区域的泳道图，会展示System Disk Summary的Tab页。<br />
+        Ops/Sec四个区域的泳道图，会展示System Disk Summary的Tab页。
+        <br />
         <img src="../figures/AbilityMonitor/disktab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1275,7 +1290,8 @@ Write Out/sec：每秒写入的字节数。
       </ul>
       <p class="fontColor">
         框选Network Bytes In/Sec，Network Bytes Out/Sec，Network Packets In/Sec，Network Packets
-        Out/Sec四个区域的泳道图，会展示System Network Summary的Tab页。<br />
+        Out/Sec四个区域的泳道图，会展示System Network Summary的Tab页。
+        <br />
         <img src="../figures/AbilityMonitor/network.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_app_startup.html b/ide/src/doc/quickstart_app_startup.html
index 6f03b5c92e33b23ec532abe25615de9ab13e710f..36ebbe246b2069812111e99178813f322f7287f5 100644
--- a/ide/src/doc/quickstart_app_startup.html
+++ b/ide/src/doc/quickstart_app_startup.html
@@ -797,7 +797,8 @@
       <h3 class="mume-header fontColor">App startup抓取参数的配置</h3>
 
       <p class="fontColor">
-        <img src="../figures/appstartup/appstartupconfig.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/appstartup/appstartupconfig.jpg" alt="GitHub Logo" />
+        <br />
         配置项说明：
       </p>
       <ul class="fontColor">
@@ -814,8 +815,10 @@ App startup：配置项的总开关。解析时请打开对应的Flags标记(Dis
       <h3 class="mume-header fontColor">App startup泳道图展示</h3>
 
       <p class="fontColor">
-        App startup的泳道图展示：<br />
-        <img src="../figures/appstartup/appstartuprow.jpg" alt="GitHub Logo" /><br />
+        App startup的泳道图展示：
+        <br />
+        <img src="../figures/appstartup/appstartuprow.jpg" alt="GitHub Logo" />
+        <br />
         应用启动包括六个阶段，分别是Process Creating(应用进程创建阶段)、Application Launching(加载应用阶段)、UI Ability
         Launching(加载UI Ability)、UI Ability OnForeground(应用进入前台)、First Frame - APP
         Phase(首帧渲染提交-应用)、First Frame - Render Phase(首帧渲染提交-Render
@@ -824,8 +827,10 @@ App startup：配置项的总开关。解析时请打开对应的Flags标记(Dis
       <h3 class="mume-header fontColor">App startup泳道图点选功能</h3>
 
       <p class="fontColor">
-        可以对启动各个阶段的Slice进行点选，点选后在最下方的弹出层中会展示点选数据的统计的tab页。<br />
-        以Process Creating的Slice点选为例：<br />
+        可以对启动各个阶段的Slice进行点选，点选后在最下方的弹出层中会展示点选数据的统计的tab页。
+        <br />
+        以Process Creating的Slice点选为例：
+        <br />
         <img src="../figures/appstartup/appstartupslice.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -863,9 +868,12 @@ Duration：应用启动的持续时间。
       <h3 class="mume-header fontColor">App startup泳道图Tab页跳转功能</h3>
 
       <p class="fontColor">
-        点击各阶段的起始或者结束时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。<br />
-        以Process Creating的跳转为例：<br />
-        <img src="../figures/appstartup/appstartupjump.jpg" alt="GitHub Logo" /><br />
+        点击各阶段的起始或者结束时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。
+        <br />
+        以Process Creating的跳转为例：
+        <br />
+        <img src="../figures/appstartup/appstartupjump.jpg" alt="GitHub Logo" />
+        <br />
         跳转说明：
       </p>
       <ul class="fontColor">
@@ -885,7 +893,8 @@ EndTime(Relative)的跳转： 跳转到H:virtual void OHOS::AppExecFwk::AppMgrSe
       <h3 class="mume-header fontColor">App startup泳道图的框选功能</h3>
 
       <p class="fontColor">
-        应用启动阶段泳道图框选功能主要是框选启动分析泳道图之后，统计应用各个启动阶段的耗费时长信息。<br />
+        应用启动阶段泳道图框选功能主要是框选启动分析泳道图之后，统计应用各个启动阶段的耗费时长信息。
+        <br />
         <img src="../figures/appstartup/appstartupdrag.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -911,13 +920,15 @@ Duration：应用各阶段启动时长。
       <h3 class="mume-header fontColor">So初始化泳道图展示</h3>
 
       <p class="fontColor">
-        So初始化的泳道图展示：<br />
+        So初始化的泳道图展示：
+        <br />
         <img src="../figures/appstartup/staticinitilizationrow.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">So初始化泳道图的点选功能</h3>
 
       <p class="fontColor">
-        点选So初始化的Slice，展示该so初始化信息的tab页。<br />
+        点选So初始化的Slice，展示该so初始化信息的tab页。
+        <br />
         <img src="../figures/appstartup/staticinitilizationslice.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -949,8 +960,10 @@ Duration：So初始化耗时。
       <h3 class="mume-header fontColor">So初始化泳道图Tab页跳转功能</h3>
 
       <p class="fontColor">
-        点击So初始化开始时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。<br />
-        <img src="../figures/appstartup/staticinitilizationjump.jpg" alt="GitHub Logo" /><br />
+        点击So初始化开始时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。
+        <br />
+        <img src="../figures/appstartup/staticinitilizationjump.jpg" alt="GitHub Logo" />
+        <br />
         跳转说明：
       </p>
       <ul class="fontColor">
@@ -964,7 +977,8 @@ StartTime(Relative)的跳转： 跳转到dlopen:  system/lib64/extensionability/
       <h3 class="mume-header fontColor">So初始化泳道图的框选功能</h3>
 
       <p class="fontColor">
-        So初始化泳道图框选功能主要是框选So初始化泳道图之后，统计各个进程下各个So的初始化耗费时长信息。<br />
+        So初始化泳道图框选功能主要是框选So初始化泳道图之后，统计各个进程下各个So的初始化耗费时长信息。
+        <br />
         <img src="../figures/appstartup/staticinitilizationdrag.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_bio.html b/ide/src/doc/quickstart_bio.html
index 6ed54a19f91a4113082c819fd32f067fb2ab7374..fe222c99d74d4ed0ebffd03e30608c864746ba89 100644
--- a/ide/src/doc/quickstart_bio.html
+++ b/ide/src/doc/quickstart_bio.html
@@ -799,7 +799,8 @@
       <h3 class="mume-header fontColor">Bio抓取配置参数</h3>
 
       <p class="fontColor">
-        <img src="../figures/Bio/Biosetting.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/Bio/Biosetting.jpg" alt="GitHub Logo" />
+        <br />
         配置项说明：
       </p>
       <ul class="fontColor">
@@ -824,15 +825,19 @@ Max Unwind Level：配置抓取调用栈的最大深度。
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_bio.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/Bio/Biorecord.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/Bio/Biorecord.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
+        <br />
         <img src="../figures/Bio/Bioexcuting.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Bio展示说明</h3>
 
       <p class="fontColor">
-        抓取结束后Bio的trace会自动加载展示。<br />
+        抓取结束后Bio的trace会自动加载展示。
+        <br />
         <img src="../figures/Bio/Biosummary.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">界面布局介绍：页内存整体界面布局分为3个部分：</p>
@@ -859,14 +864,17 @@ Max Unwind Level：配置抓取调用栈的最大深度。
       <h3 class="mume-header fontColor">Bio泳道图展示</h3>
 
       <p class="fontColor">
-        Bio泳道图鼠标悬浮以10ms为区间展示该周期内最大的读或者写延迟。<br />
+        Bio泳道图鼠标悬浮以10ms为区间展示该周期内最大的读或者写延迟。
+        <br />
         <img src="../figures/Bio/Biochart.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Bio泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。<br />
-        Disk I/O Tier Statistics的Tab页如图：<br />
+        可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。
+        <br />
+        Disk I/O Tier Statistics的Tab页如图：
+        <br />
         <img src="../figures/Bio/Biostatistics.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -908,7 +916,8 @@ Max Total Latency：最大延迟时间。
         </li>
       </ul>
       <p class="fontColor">
-        Disk I/O Latency CallTree的Tab页如图：<br />
+        Disk I/O Latency CallTree的Tab页如图：
+        <br />
         <img src="../figures/Bio/BioCalltree.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -932,7 +941,8 @@ Weight：调用方法的执行占比。
         </li>
       </ul>
       <p class="fontColor">
-        Trace Completion Times的Tab页如图：<br />
+        Trace Completion Times的Tab页如图：
+        <br />
         <img src="../figures/Bio/Biotimes.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1006,7 +1016,8 @@ BackTrace：调用栈顶部函数，并显示调用栈深度。
       <h3 class="mume-header fontColor">Bio支持多种Options展示风格</h3>
 
       <p class="fontColor">
-        点击Disk I/O Latency CallTree的Tab页底部的Options，会有两个CheckBox复选框。<br />
+        点击Disk I/O Latency CallTree的Tab页底部的Options，会有两个CheckBox复选框。
+        <br />
         <img src="../figures/Bio/BioOptions.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1027,7 +1038,8 @@ Hide System so：隐藏系统库文件  。
 
       <p class="fontColor">
         点击Disk I/O Latency CallTree的Tab页底部的Sample Count
-        Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。<br />
+        Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
+        <br />
         <img src="../figures/Bio/Biocounter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Bio功能的调用栈Group展示-数据分析支持剪裁功能</h3>
@@ -1050,29 +1062,38 @@ Hide System so：隐藏系统库文件  。
       <h3 class="mume-header fontColor">Bio功能的调用栈Group展示支持按条件过滤</h3>
 
       <p class="fontColor">
-        在Input Filter输入关键字，会显示出带有该关键字的展示信息。<br />
+        在Input Filter输入关键字，会显示出带有该关键字的展示信息。
+        <br />
         <img src="../figures/Bio/Bioinputfilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Bio辅助信息区展示调用栈</h3>
 
       <p class="fontColor">
-        当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：<br />
+        当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：
+        <br />
         <img src="../figures/Bio/Bioheaviesttrace.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Bio的Tier的过滤</h3>
 
       <p class="fontColor">
-        通过选择根据Tier去过滤。<br />
+        通过选择根据Tier去过滤。
+        <br />
         <img src="../figures/Bio/Biofilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Bio的火焰图功能</h3>
 
       <p class="fontColor">
-        点击Disk I/O Latency CallTree左下角的柱状图的图标，会切换到火焰图页面。<br />
-        <img src="../figures/Bio/Bioflame.jpg" alt="GitHub Logo" /><br />
-        进入到火焰图页面，火焰图的展示跟 Disk I/O Latency CallTree 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。<br />
-        <img src="../figures/Bio/Bioflameshow.jpg" alt="GitHub Logo" /><br />
-        鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。<br />
+        点击Disk I/O Latency CallTree左下角的柱状图的图标，会切换到火焰图页面。
+        <br />
+        <img src="../figures/Bio/Bioflame.jpg" alt="GitHub Logo" />
+        <br />
+        进入到火焰图页面，火焰图的展示跟 Disk I/O Latency CallTree
+        的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。
+        <br />
+        <img src="../figures/Bio/Bioflameshow.jpg" alt="GitHub Logo" />
+        <br />
+        鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。
+        <br />
         <img src="../figures/Bio/Bioflamelevel.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_device_record.html b/ide/src/doc/quickstart_device_record.html
index 5e2b90e0175b13a6a1d834fabf1365b0acb0ecf6..dc000ca439a5613e9e35ba1ab660a3925c6af747 100644
--- a/ide/src/doc/quickstart_device_record.html
+++ b/ide/src/doc/quickstart_device_record.html
@@ -797,7 +797,8 @@
       <h2 class="mume-header fontColor">界面配置说明</h2>
 
       <p class="fontColor">
-        <img src="../figures/hiprofilercmd/systraceconfig.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/hiprofilercmd/systraceconfig.jpg" alt="GitHub Logo" />
+        <br />
         说明：
       </p>
       <ul class="fontColor">
@@ -814,13 +815,19 @@
       <h2 class="mume-header fontColor">命令行的生成和trace文件的抓取</h2>
 
       <p class="fontColor">
-        点击Probes config，如选择抓取Scheduling details。<br />
-        <img src="../figures/hiprofilercmd/Scheduling.jpg" alt="GitHub Logo" /><br />
+        点击Probes config，如选择抓取Scheduling details。
+        <br />
+        <img src="../figures/hiprofilercmd/Scheduling.jpg" alt="GitHub Logo" />
+        <br />
         再点击Record setting，在output file path输入文件名hiprofiler_data_example.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/hiprofilercmd/tracesetting.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
-        <img src="../figures/hiprofilercmd/command.jpg" alt="GitHub Logo" /><br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/hiprofilercmd/tracesetting.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
+        <img src="../figures/hiprofilercmd/command.jpg" alt="GitHub Logo" />
+        <br />
         命令参数说明：
       </p>
       <ul class="fontColor">
@@ -835,13 +842,17 @@
         <li>hitrace_time:hitrace命令行抓取时间，与hiprofiler_cmd下发的-t配置联动。</li>
       </ul>
       <p class="fontColor">
-        输入hdc_std shell，进入设备，执行命令。<br />
+        输入hdc_std shell，进入设备，执行命令。
+        <br />
         <img src="../figures/hiprofilercmd/excutecommand.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">
-        执行完成后，命令行会给出提示。<br />
-        <img src="../figures/hiprofilercmd/commandend.jpg" alt="GitHub Logo" /><br />
-        进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的trace文件。<br />
+        执行完成后，命令行会给出提示。
+        <br />
+        <img src="../figures/hiprofilercmd/commandend.jpg" alt="GitHub Logo" />
+        <br />
+        进入指定目录，cd /data/local/tmp 进入到目录，会看到生成的trace文件。
+        <br />
         <img src="../figures/hiprofilercmd/htrace.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_filesystem.html b/ide/src/doc/quickstart_filesystem.html
index e85cb2dd484769ec34fce50891d654958560e8e3..d85c7fc6ceda24ca12e2221bbf386ad2b2cc9402 100644
--- a/ide/src/doc/quickstart_filesystem.html
+++ b/ide/src/doc/quickstart_filesystem.html
@@ -799,7 +799,8 @@
       <h3 class="mume-header fontColor">FileSystem抓取配置参数</h3>
 
       <p class="fontColor">
-        <img src="../figures/FileSystem/filesystemsetting.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/FileSystem/filesystemsetting.jpg" alt="GitHub Logo" />
+        <br />
         配置项说明：
       </p>
       <ul class="fontColor">
@@ -824,19 +825,27 @@ Max Unwind Level：配置抓取调用栈的最大深度。
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_filesystem.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/FileSystem/filesystemrecord.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
-        <img src="../figures/FileSystem/FileSystemcommand.jpg" alt="GitHub Logo" /><br />
-        输入hdc_std shell，进入设备，执行命令。<br />
-        <img src="../figures/FileSystem/FileSystemexcutecommand.jpg" alt="GitHub Logo" /><br />
-        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/FileSystem/filesystemrecord.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
+        <img src="../figures/FileSystem/FileSystemcommand.jpg" alt="GitHub Logo" />
+        <br />
+        输入hdc_std shell，进入设备，执行命令。
+        <br />
+        <img src="../figures/FileSystem/FileSystemexcutecommand.jpg" alt="GitHub Logo" />
+        <br />
+        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
+        <br />
         <img src="../figures/FileSystem/FileSystemfile.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">FileSystem展示说明</h3>
 
       <p class="fontColor">
-        将抓取的trace文件导入smartperf界面查看。<br />
+        将抓取的trace文件导入smartperf界面查看。
+        <br />
         <img src="../figures/FileSystem/FileSystemsummary.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">界面布局介绍：FileSystem整体界面布局分为3个部分：</p>
@@ -863,16 +872,21 @@ Max Unwind Level：配置抓取调用栈的最大深度。
       <h3 class="mume-header fontColor">FileSystem泳道图展示</h3>
 
       <p class="fontColor">
-        FileSystem泳道图按照读操作和写操作展示，鼠标移动都泳道图上，悬浮框会以10ms为周期展示读，写类型系统调用的次数。<br />
-        <img src="../figures/FileSystem/FileSystemchart.jpg" alt="GitHub Logo" /><br />
-        按住w键放大界面，悬浮框会显示当前时刻的文件读写次数。<br />
+        FileSystem泳道图按照读操作和写操作展示，鼠标移动都泳道图上，悬浮框会以10ms为周期展示读，写类型系统调用的次数。
+        <br />
+        <img src="../figures/FileSystem/FileSystemchart.jpg" alt="GitHub Logo" />
+        <br />
+        按住w键放大界面，悬浮框会显示当前时刻的文件读写次数。
+        <br />
         <img src="../figures/FileSystem/FileSystemcount.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">FileSystem泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对读写操作泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有五个tab页。<br />
-        FileSystem statistics的Tab页如图：<br />
+        可以对读写操作泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有五个tab页。
+        <br />
+        FileSystem statistics的Tab页如图：
+        <br />
         <img src="../figures/FileSystem/FileSystemstatistics.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -932,7 +946,8 @@ Max Duration：最大时长。
         </li>
       </ul>
       <p class="fontColor">
-        FileSystem Calltree的Tab页如图：<br />
+        FileSystem Calltree的Tab页如图：
+        <br />
         <img src="../figures/FileSystem/FileSystemCalltree.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -956,7 +971,8 @@ Weight：调用方法的执行占比。
         </li>
       </ul>
       <p class="fontColor">
-        FileSystem Events的Tab页如图：<br />
+        FileSystem Events的Tab页如图：
+        <br />
         <img src="../figures/FileSystem/FileSystemevents.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1046,7 +1062,8 @@ Backtrace：调用栈顶部函数，并显示调用栈深度。
         </li>
       </ul>
       <p class="fontColor">
-        File Descriptor History的Tab页如图：<br />
+        File Descriptor History的Tab页如图：
+        <br />
         <img src="../figures/FileSystem/FileSystemhistory.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1088,7 +1105,8 @@ Backtrace：调用栈顶部函数，并显示调用栈深度。
         </li>
       </ul>
       <p class="fontColor">
-        File Descriptor Time Slice的Tab页如图：<br />
+        File Descriptor Time Slice的Tab页如图：
+        <br />
         <img src="../figures/FileSystem/FileSystemtimeslice.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1126,7 +1144,8 @@ Backtrace：调用栈顶部函数，并显示调用栈深度。
       <h3 class="mume-header fontColor">FileSystem支持多种Options展示风格</h3>
 
       <p class="fontColor">
-        点击FileSystem Calltree的Tab页底部的Options，会有两个CheckBox复选框。<br />
+        点击FileSystem Calltree的Tab页底部的Options，会有两个CheckBox复选框。
+        <br />
         <img src="../figures/FileSystem/FileSystemOptions.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1147,7 +1166,8 @@ Hide System so：隐藏系统库文件。
 
       <p class="fontColor">
         点击FileSystem Calltree的Tab页底部的Sample Count
-        Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。<br />
+        Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
+        <br />
         <img src="../figures/FileSystem/FileSystemsamplecounter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">FileSystem功能的调用栈Group展示-数据分析支持剪裁功能</h3>
@@ -1170,29 +1190,38 @@ Hide System so：隐藏系统库文件。
       <h3 class="mume-header fontColor">FileSystem功能的调用栈Group展示支持按条件过滤</h3>
 
       <p class="fontColor">
-        在Input Filter输入关键字，会显示出带有该关键字的展示信息。<br />
+        在Input Filter输入关键字，会显示出带有该关键字的展示信息。
+        <br />
         <img src="../figures/FileSystem/FileSysteminputfilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">FileSystem辅助信息区展示调用栈</h3>
 
       <p class="fontColor">
-        当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：<br />
+        当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：
+        <br />
         <img src="../figures/FileSystem/FileSystemheaviesttrace.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">FileSystem的事件类型的过滤</h3>
 
       <p class="fontColor">
-        通过选择可以过滤是Open类型，还是Close类型事件。<br />
+        通过选择可以过滤是Open类型，还是Close类型事件。
+        <br />
         <img src="../figures/FileSystem/filesystemfilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">FileSystem的火焰图功能</h3>
 
       <p class="fontColor">
-        点击FileSystem Calltre左下角的柱状图的图标，会切换到火焰图页面。<br />
-        <img src="../figures/FileSystem/FileSystemflame.jpg" alt="GitHub Logo" /><br />
-        进入到火焰图页面，火焰图的展示跟 Filesystem Calltree 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。<br />
-        <img src="../figures/FileSystem/FileSystemflameshow.jpg" alt="GitHub Logo" /><br />
-        鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。<br />
+        点击FileSystem Calltre左下角的柱状图的图标，会切换到火焰图页面。
+        <br />
+        <img src="../figures/FileSystem/FileSystemflame.jpg" alt="GitHub Logo" />
+        <br />
+        进入到火焰图页面，火焰图的展示跟 Filesystem Calltree
+        的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。
+        <br />
+        <img src="../figures/FileSystem/FileSystemflameshow.jpg" alt="GitHub Logo" />
+        <br />
+        鼠标点击火焰图，会进入下一级界面，点击上级则返回上一级界面。
+        <br />
         <img src="../figures/FileSystem/FileSystemflamelevel.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_hilog.html b/ide/src/doc/quickstart_hilog.html
index 3eee1b295af03772d5ab8ce057ba5d199196842a..a4d66d89489cb29f93d253bd8adcfdc50f2a8103 100644
--- a/ide/src/doc/quickstart_hilog.html
+++ b/ide/src/doc/quickstart_hilog.html
@@ -799,19 +799,22 @@
       <h4 class="mume-header fontColor">Hilog的抓取配置参数</h4>
 
       <p class="fontColor">
-        打开Hilog开关抓取Hilog数据。<br />
+        打开Hilog开关抓取Hilog数据。
+        <br />
         <img src="../figures/Hilog/hilogconfig.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Hilog展示说明</h3>
 
       <p class="fontColor">
-        将抓取的hilog文件导入到smartperf中，查看日志信息。<br />
+        将抓取的hilog文件导入到smartperf中，查看日志信息。
+        <br />
         <img src="../figures/Hilog/hilogrow.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Hilog泳道图的框选功能</h3>
 
       <p class="fontColor">
-        框选Hilog的泳道图，展示Hilog的tab页,Log Level可以选择日志级别，也能根据Tag，Process name，Message去搜索。<br />
+        框选Hilog的泳道图，展示Hilog的tab页,Log Level可以选择日志级别，也能根据Tag，Process name，Message去搜索。
+        <br />
         <img src="../figures/Hilog/hilogtab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -853,7 +856,8 @@ Message：日志具体信息。
         </li>
       </ul>
       <p class="fontColor">
-        框选Hilog的泳道图，展示Summary的tab页。<br />
+        框选Hilog的泳道图，展示Summary的tab页。
+        <br />
         <img src="../figures/Hilog/hilogsummarytab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_hiperf.html b/ide/src/doc/quickstart_hiperf.html
index 0dcaf7d9633b17d3680c02aa4c4a13843ef40437..92114d796a26ba528a280eca4370437c4daf346a 100644
--- a/ide/src/doc/quickstart_hiperf.html
+++ b/ide/src/doc/quickstart_hiperf.html
@@ -799,7 +799,8 @@
       <h3 class="mume-header fontColor">HiPerf抓取配置参数</h3>
 
       <p class="fontColor">
-        <img src="../figures/perf/perfsetting.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/perf/perfsetting.jpg" alt="GitHub Logo" />
+        <br />
         配置项说明：
       </p>
       <ul class="fontColor">
@@ -836,19 +837,27 @@ Advance Options：更多的抓取配置项。
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_perf.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/perf/perfset.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
-        <img src="../figures/perf/perfcommand.jpg" alt="GitHub Logo" /><br />
-        输入hdc_shell，进入设备，执行命令。<br />
-        <img src="../figures/perf/perfexcutecommand.jpg" alt="GitHub Logo" /><br />
-        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/perf/perfset.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
+        <img src="../figures/perf/perfcommand.jpg" alt="GitHub Logo" />
+        <br />
+        输入hdc_shell，进入设备，执行命令。
+        <br />
+        <img src="../figures/perf/perfexcutecommand.jpg" alt="GitHub Logo" />
+        <br />
+        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
+        <br />
         <img src="../figures/perf/perffile.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiPerf展示说明</h3>
 
       <p class="fontColor">
-        将抓取的trace文件导入smartperf界面查看。<br />
+        将抓取的trace文件导入smartperf界面查看。
+        <br />
         <img src="../figures/perf/summary.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">界面布局介绍：Perf整体界面布局分为3个部分：</p>
@@ -875,18 +884,25 @@ Advance Options：更多的抓取配置项。
       <h3 class="mume-header fontColor">HiPerf泳道图展示</h3>
 
       <p class="fontColor">
-        Perf泳道图展示按照CPU使用量和线程和进程展示，鼠标移动到泳道图上，悬浮框会显示CPU的使用量。<br />
-        <img src="../figures/perf/chart.jpg" alt="GitHub Logo" /><br />
-        按住w键放大界面，泳道图会出现P的标志，鼠标移动到P图标上，悬浮框会显示每个callstack和调用的深度如下图。<br />
-        <img src="../figures/perf/callstack.jpg" alt="GitHub Logo" /><br />
-        Perf泳道图上浅色表示无效调用栈的采样点，抓取时由于设备上的对应的so无符号信息，函数跟地址都无法获取到，固该采样点在tab页中不做显示。<br />
+        Perf泳道图展示按照CPU使用量和线程和进程展示，鼠标移动到泳道图上，悬浮框会显示CPU的使用量。
+        <br />
+        <img src="../figures/perf/chart.jpg" alt="GitHub Logo" />
+        <br />
+        按住w键放大界面，泳道图会出现P的标志，鼠标移动到P图标上，悬浮框会显示每个callstack和调用的深度如下图。
+        <br />
+        <img src="../figures/perf/callstack.jpg" alt="GitHub Logo" />
+        <br />
+        Perf泳道图上浅色表示无效调用栈的采样点，抓取时由于设备上的对应的so无符号信息，函数跟地址都无法获取到，固该采样点在tab页中不做显示。
+        <br />
         <img src="../figures/perf/perf_nocallstack.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiPerf泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对CPU使用量区，线程和进程区数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。<br />
-        Perf Profile的Tab页如图：<br />
+        可以对CPU使用量区，线程和进程区数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。
+        <br />
+        Perf Profile的Tab页如图：
+        <br />
         <img src="../figures/perf/PerfProfile.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -916,7 +932,8 @@ Event Count：事件数量。
         </li>
       </ul>
       <p class="fontColor">
-        Sample List的Tab页如图：<br />
+        Sample List的Tab页如图：
+        <br />
         <img src="../figures/perf/Samplelist.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -960,7 +977,8 @@ Backtrace：栈顶的调用栈名称。
       <h3 class="mume-header fontColor">HiPerf支持多种Options展示风格</h3>
 
       <p class="fontColor">
-        点击Perf Profile的Tab页底部的Options，会有四个CheckBox复选框。<br />
+        点击Perf Profile的Tab页底部的Options，会有四个CheckBox复选框。
+        <br />
         <img src="../figures/perf/Options.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -992,7 +1010,8 @@ Hide Thread State：隐藏线程状态。
       <h3 class="mume-header fontColor">HiPerf支持过滤调用栈调用次数的展示风格</h3>
 
       <p class="fontColor">
-        点击Perf Profile的Tab页底部的Sample Count Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。<br />
+        点击Perf Profile的Tab页底部的Sample Count Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
+        <br />
         <img src="../figures/perf/samplecounter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiPerf功能的调用栈Group展示-数据分析支持剪裁功能</h3>
@@ -1015,32 +1034,39 @@ Hide Thread State：隐藏线程状态。
       <h3 class="mume-header fontColor">HiPerf功能的调用栈Group展示支持按条件过滤</h3>
 
       <p class="fontColor">
-        在Input Filter输入关键字，会显示出带有该关键字的展示信息。<br />
+        在Input Filter输入关键字，会显示出带有该关键字的展示信息。
+        <br />
         <img src="../figures/perf/inputfilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiPerf辅助信息区展示调用栈</h3>
 
       <p class="fontColor">
         当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。对上展示到根节点，对下则展示CPU占用率最大的调用栈。调用栈右侧有Sliding
-        bar可以滚动。<br />
-        如下图的Heaviest Stack Trace：<br />
+        bar可以滚动。
+        <br />
+        如下图的Heaviest Stack Trace：
+        <br />
         <img src="../figures/perf/heaviesttrace1.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiPerf的火焰图功能</h3>
 
       <p class="fontColor">
-        点击Perf Profile左下角的柱状图的图标，会切换到火焰图页面。<br />
-        <img src="../figures/perf/flame.jpg" alt="GitHub Logo" /><br />
-        进入到火焰图页面，火焰图的展示跟 Perf Profile 的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，lib，addr，Count，%in
-        current thread，%in current process，&amp;in all process。<br />
+        点击Perf Profile左下角的柱状图的图标，会切换到火焰图页面。
+        <br />
+        <img src="../figures/perf/flame.jpg" alt="GitHub Logo" />
+        <br />
+        进入到火焰图页面，火焰图的展示跟 Perf Profile
+        的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，lib，addr，Count，%in current thread，%in
+        current process，&amp;in all process。
+        <br />
         <img src="../figures/perf/flameshow.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiPerf的show event count功能</h3>
 
       <p class="fontColor">
         在Hiperf的父级泳道图上增加筛选功能，可在Cpu Usage 和各种event
-        type之间选择，切换选择之后即可将Hiperf下级各个泳道图数据更新，悬浮框可以根据选择的事件名显示对应的event
-        count。<br />
+        type之间选择，切换选择之后即可将Hiperf下级各个泳道图数据更新，悬浮框可以根据选择的事件名显示对应的event count。
+        <br />
         <img src="../figures/perf/showevent.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">
@@ -1049,7 +1075,8 @@ Hide Thread State：隐藏线程状态。
 
       <p class="fontColor">
         根据Hiperf父级泳道图所筛选的类型，来显示各个CPU或者线程的时序火焰图，用户可根据自己的需要，点击泳道图旁边的齿轮标志筛选出某个cpu
-        或者线程的火焰时序图数据。<br />
+        或者线程的火焰时序图数据。
+        <br />
         <img src="../figures/perf/cpuandthreadrow.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">
@@ -1057,11 +1084,16 @@ Hide Thread State：隐藏线程状态。
       </h3>
 
       <p class="fontColor">
-        HiPerf分为process、thread、library、function四层，调用栈均可在每层的表格上鼠标点击右键跳转到对应的火焰图Tab页。火焰图上方标题显示是由哪一层跳转而来，点击关闭图标火焰图重置为当前框选范围的所有数据。<br />
-        <img src="../figures/perf/perf_analysisjump.jpg" alt="GitHub Logo" /><br />
-        如上图，右键点击hiprofiler_plugins可以跳转到下图<br />
-        <img src="../figures/perf/perf_jumpframe.jpg" alt="GitHub Logo" /><br />
-        筛选面板新增Hide Thread、Hide Thread State筛选选项，Hiperf可隐藏线程和状态。<br />
+        HiPerf分为process、thread、library、function四层，调用栈均可在每层的表格上鼠标点击右键跳转到对应的火焰图Tab页。火焰图上方标题显示是由哪一层跳转而来，点击关闭图标火焰图重置为当前框选范围的所有数据。
+        <br />
+        <img src="../figures/perf/perf_analysisjump.jpg" alt="GitHub Logo" />
+        <br />
+        如上图，右键点击hiprofiler_plugins可以跳转到下图
+        <br />
+        <img src="../figures/perf/perf_jumpframe.jpg" alt="GitHub Logo" />
+        <br />
+        筛选面板新增Hide Thread、Hide Thread State筛选选项，Hiperf可隐藏线程和状态。
+        <br />
         <img src="../figures/perf/perf_hide.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_hisystemevent.html b/ide/src/doc/quickstart_hisystemevent.html
index e723184ee2b7a97bbc8c94ccecf3c5a1e0ad4c45..f8209b52ed1832378921ab7766ed46a57f47ee8e 100644
--- a/ide/src/doc/quickstart_hisystemevent.html
+++ b/ide/src/doc/quickstart_hisystemevent.html
@@ -801,16 +801,25 @@
       <h3 class="mume-header fontColor">HiSystemEvent抓取配置参数</h3>
 
       <p class="fontColor">
-        打开Start Hisystem Event Tracker Record开关抓取HiSystemEvent数据。<br />
-        <img src="../figures/HiSystemEvent/hisyseventsetting.jpg" alt="GitHub Logo" /><br />
+        打开Start Hisystem Event Tracker Record开关抓取HiSystemEvent数据。
+        <br />
+        <img src="../figures/HiSystemEvent/hisyseventsetting.jpg" alt="GitHub Logo" />
+        <br />
         再点击Record setting，在output file path输入文件名hiprofiler_data_hisystemevent.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/HiSystemEvent/hisystemeventrecord.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
-        <img src="../figures/HiSystemEvent/hisystemcommand.jpg" alt="GitHub Logo" /><br />
-        输入hdc_std shell，进入设备，执行上述生成的命令。<br />
-        <img src="../figures/HiSystemEvent/hisystemeventemexcute.jpg" alt="GitHub Logo" /><br />
-        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/HiSystemEvent/hisystemeventrecord.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
+        <img src="../figures/HiSystemEvent/hisystemcommand.jpg" alt="GitHub Logo" />
+        <br />
+        输入hdc_std shell，进入设备，执行上述生成的命令。
+        <br />
+        <img src="../figures/HiSystemEvent/hisystemeventemexcute.jpg" alt="GitHub Logo" />
+        <br />
+        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
+        <br />
         <img src="../figures/HiSystemEvent/hisystemeventfile.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">HiSystemEvent展示说明</h3>
@@ -818,8 +827,10 @@
       <h3 class="mume-header fontColor">HiSystemEvent的Energy泳道图展示</h3>
 
       <p class="fontColor">
-        将抓取的trace文件导入smartperf界面查看。<br />
-        <img src="../figures/HiSystemEvent/hisystemeventsummary.jpg" alt="GitHub Logo" /><br />
+        将抓取的trace文件导入smartperf界面查看。
+        <br />
+        <img src="../figures/HiSystemEvent/hisystemeventsummary.jpg" alt="GitHub Logo" />
+        <br />
         泳道图说明：
       </p>
       <ul class="fontColor">
@@ -887,13 +898,15 @@ Location Switch State泳道：鼠标悬浮可以显示GPS开关状态(enable：
       <h3 class="mume-header fontColor">HiSystemEvent的Energy泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对Energy各泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。<br />
-        System Details的Tab页如图：<br />
+        可以对Energy各泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格。
+        <br />
+        System Details的Tab页如图：
+        <br />
         <img src="../figures/HiSystemEvent/hisystemdetails.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
         <li>
-          <pr class="smartperf-text fontColor light"> Event Name： 事件名称，事件包括后台任务，应用锁，GPS定位。 </pr>
+          <pr class="smartperf-text fontColor light">Event Name： 事件名称，事件包括后台任务，应用锁，GPS定位。</pr>
         </li>
         <li>
           <pre class="smartperf-text fontColor light">
@@ -903,7 +916,8 @@ Time： 时间戳信息。
         </li>
       </ul>
       <p class="fontColor">
-        点击事件名会显示该事件的详细信息的Tab页。<br />
+        点击事件名会显示该事件的详细信息的Tab页。
+        <br />
         <img src="../figures/HiSystemEvent/systemselectdetals.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -963,7 +977,8 @@ TAG：锁名。
         </li>
       </ul>
       <p class="fontColor">
-        Power Battery的Tab页如图：<br />
+        Power Battery的Tab页如图：
+        <br />
         <img src="../figures/HiSystemEvent/hisyseventPowerBattery.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1011,7 +1026,8 @@ APP Name：应用包名。
         </li>
       </ul>
       <p class="fontColor">
-        Power Details的Tab页如图：<br />
+        Power Details的Tab页如图：
+        <br />
         <img src="../figures/HiSystemEvent/hisyseventPowerdetails.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1167,7 +1183,8 @@ Energy Percent(%)：功耗占比。
 
       <p class="fontColor">
         框选Hisysevent的泳道图，展示Hisysevents的tab页,有Filter by Domain，Filter by eventname，Filter by
-        contents输入框。All下拉框可以选择level级别<br />
+        contents输入框。All下拉框可以选择level级别
+        <br />
         <img src="../figures/HiSystemEvent/hisyseventtab.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1245,7 +1262,8 @@ contents：抓取内容。
         </li>
       </ul>
       <p class="fontColor">
-        框选Hisysevent的泳道图，展示Statistics的tab页。<br />
+        框选Hisysevent的泳道图，展示Statistics的tab页。
+        <br />
         <img src="../figures/HiSystemEvent/hisyseventStatistics.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_native_memory.html b/ide/src/doc/quickstart_native_memory.html
index 5f6d8223adeaa1858c04718376d4cd28b7f957e6..16eb6705594c17bd4226822505c1c7a9a99fd6cf 100644
--- a/ide/src/doc/quickstart_native_memory.html
+++ b/ide/src/doc/quickstart_native_memory.html
@@ -796,7 +796,8 @@
       <h3 class="mume-header fontColor">Native Memory抓取配置参数</h3>
 
       <p class="fontColor">
-        <img src="../figures/NativeMemory/nativememorysetting.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/NativeMemory/nativememorysetting.jpg" alt="GitHub Logo" />
+        <br />
         配置参数说明：
       </p>
       <ul class="fontColor">
@@ -812,11 +813,13 @@
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_nativememory.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
         <img src="../figures/NativeMemory/nativememoryset.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">
-        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。<br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击复制按钮，会将命令行复制。
+        <br />
         <img src="../figures/NativeMemory/nativememorycommand.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">命令行参数说明：</p>
@@ -835,9 +838,12 @@
         <li>startup_mode: 是否需要抓取应用启动阶段内存。</li>
       </ul>
       <p class="fontColor">
-        输入hdc_std shell，进入设备，执行命令。<br />
-        <img src="../figures/NativeMemory/nativeexcutecommand.jpg" alt="GitHub Logo" /><br />
-        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。<br />
+        输入hdc_std shell，进入设备，执行命令。
+        <br />
+        <img src="../figures/NativeMemory/nativeexcutecommand.jpg" alt="GitHub Logo" />
+        <br />
+        执行完成后，进入指定目录查看，在/data/local/tmp下就会生成trace文件。
+        <br />
         <img src="../figures/NativeMemory/naitvememoryfile.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Native Memory展示说明</h2>
@@ -846,7 +852,8 @@
       <h3 class="mume-header fontColor">Native Memory泳道图展示类型</h3>
 
       <p class="fontColor">
-        点击齿轮状的图标可以设置内存的展示单位。<br />
+        点击齿轮状的图标可以设置内存的展示单位。
+        <br />
         <img src="../figures/NativeMemory/NativeChart.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -884,8 +891,10 @@ All Anonymous VM：mmap分配的内存。
       <h3 class="mume-header fontColor">Native Memory泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。<br />
-        Statistics的Tab页，主要显示了统计明细类型。<br />
+        可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有四个tab页。
+        <br />
+        Statistics的Tab页，主要显示了统计明细类型。
+        <br />
         <img src="../figures/NativeMemory/Statistics.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -945,7 +954,8 @@ Existing/Total：框选区间内剩余的内存比上申请的内存，其中浅
         </li>
       </ul>
       <p class="fontColor">
-        Call Info的Tab页，主要显示了调用树详细类型。<br />
+        Call Info的Tab页，主要显示了调用树详细类型。
+        <br />
         <img src="../figures/NativeMemory/CallInfo.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -969,7 +979,8 @@ Count：相同调用栈出现的次数。
         </li>
       </ul>
       <p class="fontColor">
-        Native Memory的Tab页，主要显示了单次分配信息列表。<br />
+        Native Memory的Tab页，主要显示了单次分配信息列表。
+        <br />
         <img src="../figures/NativeMemory/NativeMemory.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1017,7 +1028,8 @@ Responsible Caller  ：调用该函数的方法。
         </li>
       </ul>
       <p class="fontColor">
-        Snapshot List的Tab页，主要显示了各时刻内存的增长的差值。<br />
+        Snapshot List的Tab页，主要显示了各时刻内存的增长的差值。
+        <br />
         <img src="../figures/NativeMemory/Snapshotlist.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1055,14 +1067,16 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配
       <h3 class="mume-header fontColor">Native Memory的辅助信息功能</h3>
 
       <p class="fontColor">
-        在Call Info和Native Memory的Tab页，点击选中某一行，右边画红线处会显示出该行调用栈的树结构信息。<br />
+        在Call Info和Native Memory的Tab页，点击选中某一行，右边画红线处会显示出该行调用栈的树结构信息。
+        <br />
         <img src="../figures/NativeMemory/nativecallstack.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Native Memory详细显示的过滤功能</h3>
 
       <p class="fontColor">
         点击下方的All Allocations可以对Allocation lifeSpan进行过滤，有三个选择：All Allocations，Created &amp;
-        Existing，Created &amp; Destroyed。<br />
+        Existing，Created &amp; Destroyed。
+        <br />
         <img src="../figures/NativeMemory/lifespan.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1086,7 +1100,8 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配
         </li>
       </ul>
       <p class="fontColor">
-        点击下方的All Heap&amp;Anonymous VM可以对内存类型进行过滤。<br />
+        点击下方的All Heap&amp;Anonymous VM可以对内存类型进行过滤。
+        <br />
         <img src="../figures/NativeMemory/AllocationType.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1111,19 +1126,22 @@ All Anonymous VM：mmap的匿名页。
       </ul>
       <p class="fontColor">
         点击下方的Mark Snapshot可以在时间轴上打标签。出现小旗的标志，通过标注多个时间点。点击到Snapshot
-        List标签页可以看到各个时间点的内存的增长值。<br />
+        List标签页可以看到各个时间点的内存的增长值。
+        <br />
         <img src="../figures/NativeMemory/Generation.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Native Memory的火焰图功能</h3>
 
       <p class="fontColor">
-        火焰图的展示跟Callinfo的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，栈的所在库名，地址，size大小，栈的个数。<br />
+        火焰图的展示跟Callinfo的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称，栈的所在库名，地址，size大小，栈的个数。
+        <br />
         <img src="../figures/NativeMemory/nativeflameshow.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">基于函数进行调用栈（单个或多个）选择后可以在时间轴上显示内存操作点</h3>
 
       <p class="fontColor">
-        点击火焰图函数时，触发火焰图点击中，显示调用栈中该函数出现在时间轴范围的分布情况。<br />
+        点击火焰图函数时，触发火焰图点击中，显示调用栈中该函数出现在时间轴范围的分布情况。
+        <br />
         <img src="../figures/NativeMemory/memoryframe.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">内存搜索大小写不敏感，上层火焰图的大小和总内存需要根据搜索内容动态调整</h3>
@@ -1134,7 +1152,8 @@ All Anonymous VM：mmap的匿名页。
       <h3 class="mume-header fontColor">焦点函数火焰图详细展开：选中函数的全部调用栈展示</h3>
 
       <p class="fontColor">
-        点击调用栈某个函数，点击函数调用的函数对应铺满画布，点击函数的parent，显示以及绘制的大小变化为点击函数的大小，如下图点击OHOS::EglCoreInit()函数，会显示该函数的全部调用栈。<br />
+        点击调用栈某个函数，点击函数调用的函数对应铺满画布，点击函数的parent，显示以及绘制的大小变化为点击函数的大小，如下图点击OHOS::EglCoreInit()函数，会显示该函数的全部调用栈。
+        <br />
         <img src="../figures/NativeMemory/eg_callstack.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">搜索框支持表达式输入</h3>
@@ -1144,9 +1163,11 @@ All Anonymous VM：mmap的匿名页。
         Library与Responsible Caller，其中Responsible Library，Responsible Caller表示从下往上非libc++
         musl的第一条调用栈的lib跟symbol，如下图所示，由于最后一条 [ operator new(unsigned long) ]
         libc++.so为libc++.so的函数，固跳过，所以该条调用栈的Responsible Library为
-        <a href="http://libhilog.so/">libhilog.so</a>，Responsible Caller为OHOS::HiviewDFX::GetDomainLevel(unsigned int)
-        。<br />
-        <img src="../figures/NativeMemory/framecaller.jpg" alt="GitHub Logo" /><br />
+        <a href="http://libhilog.so/">libhilog.so</a>
+        ，Responsible Caller为OHOS::HiviewDFX::GetDomainLevel(unsigned int) 。
+        <br />
+        <img src="../figures/NativeMemory/framecaller.jpg" alt="GitHub Logo" />
+        <br />
         表达式说明:在InputFilter输入框可以进行搜索过滤和表达式过滤，其中表达式必须以@开头，英文括号包起所需要过滤的内容，每个括号必须包括
         （Responsible Library，Responsible Caller）匹配全量以*表示，否则认为该输入为搜索过滤。
       </p>
@@ -1184,7 +1205,11 @@ All Anonymous VM：mmap的匿名页。
             <td>只显示Responsible Library路径/data/user且symbol为任意值的数据</td>
           </tr>
           <tr>
-            <td>@(<a href="http://mali.so/">mali.so</a> *,libGLES_mali.so *)</td>
+            <td>
+              @(
+              <a href="http://mali.so/">mali.so</a>
+              *,libGLES_mali.so *)
+            </td>
             <td>只显示Responsible Library包含mali.so或者libGLES_mali.so的数据</td>
           </tr>
           <tr>
@@ -1200,7 +1225,10 @@ All Anonymous VM：mmap的匿名页。
             <td>不显示Responsible Library包含libark且Responsible Caller包含jsvm或者table的数据</td>
           </tr>
           <tr>
-            <td>@-(librender picture, libskia picture) <br /></td>
+            <td>
+              @-(librender picture, libskia picture)
+              <br />
+            </td>
             <td>不显示Responsible Library包含librender或者libskia且Responsible Caller中包含picture的数据</td>
           </tr>
           <tr>
@@ -1225,13 +1253,15 @@ All Anonymous VM：mmap的匿名页。
 
       <p class="fontColor">
         选择Use Record Statistics和statistics interval配置项抓取的数据，只会显示Call Info的Tab页，Call
-        Info相关功能同上。<br />
+        Info相关功能同上。
+        <br />
         <img src="../figures/NativeMemory/statiscsCallInfo.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Native Memory多进程数据显示</h3>
 
       <p class="fontColor">
-        前端可以支持多进程数据的展示，通过在tab页切换不同进程，可以显示不同进程的hook数据。<br />
+        前端可以支持多进程数据的展示，通过在tab页切换不同进程，可以显示不同进程的hook数据。
+        <br />
         <img src="../figures/NativeMemory/hook_moreprocess.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_page_fault.html b/ide/src/doc/quickstart_page_fault.html
index bfaa5e4ddace5daac4263a04d50d984d60ede445..af872898eb38bbf5804bdb6a949d33a593727903 100644
--- a/ide/src/doc/quickstart_page_fault.html
+++ b/ide/src/doc/quickstart_page_fault.html
@@ -799,7 +799,8 @@
       <h3 class="mume-header fontColor">页内存抓取配置参数</h3>
 
       <p class="fontColor">
-        <img src="../figures/EBPF/ebpfsetting.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/EBPF/ebpfsetting.jpg" alt="GitHub Logo" />
+        <br />
         配置项说明：
       </p>
       <ul class="fontColor">
@@ -824,15 +825,19 @@ Max Unwind Level：配置抓取调用栈的最大深度。
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_ebpf.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/EBPF/ebpfrecord.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/EBPF/ebpfrecord.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
+        <br />
         <img src="../figures/EBPF/ebpfexcuting.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">页内存展示说明</h3>
 
       <p class="fontColor">
-        抓取结束后页内存的trace会自动加载展示。<br />
+        抓取结束后页内存的trace会自动加载展示。
+        <br />
         <img src="../figures/EBPF/ebpfsummary.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">界面布局介绍：页内存整体界面布局分为3个部分：</p>
@@ -859,16 +864,21 @@ Max Unwind Level：配置抓取调用栈的最大深度。
       <h3 class="mume-header fontColor">页内存泳道图展示</h3>
 
       <p class="fontColor">
-        页内存泳道图展示事件(Operation)发生的次数，每个事件都有持续时间，鼠标悬浮以10ms为区间进行次数统计。<br />
-        <img src="../figures/EBPF/EBPFchart.jpg" alt="GitHub Logo" /><br />
-        按住w键放大界面，悬浮框会显示当前时刻的事件发生次数。<br />
+        页内存泳道图展示事件(Operation)发生的次数，每个事件都有持续时间，鼠标悬浮以10ms为区间进行次数统计。
+        <br />
+        <img src="../figures/EBPF/EBPFchart.jpg" alt="GitHub Logo" />
+        <br />
+        按住w键放大界面，悬浮框会显示当前时刻的事件发生次数。
+        <br />
         <img src="../figures/EBPF/EBPFcount.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">页内存泳道图的框选功能</h3>
 
       <p class="fontColor">
-        可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。<br />
-        Page Fault Statistics的Tab页如图：<br />
+        可以对泳道图进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有三个tab页。
+        <br />
+        Page Fault Statistics的Tab页如图：
+        <br />
         <img src="../figures/EBPF/vmstatistics.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -910,9 +920,12 @@ Max Duration：最大时长。
         </li>
       </ul>
       <p class="fontColor">
-        点击下方的Statistics by Thread，可以切换到按照Thread为基点显示数据。<br />
-        <img src="../figures/EBPF/ebpf_bythread.jpg" alt="GitHub Logo" /><br />
-        Page Fault Calltree的Tab页如图：<br />
+        点击下方的Statistics by Thread，可以切换到按照Thread为基点显示数据。
+        <br />
+        <img src="../figures/EBPF/ebpf_bythread.jpg" alt="GitHub Logo" />
+        <br />
+        Page Fault Calltree的Tab页如图：
+        <br />
         <img src="../figures/EBPF/VMCalltree.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -936,7 +949,8 @@ Weight：调用方法的执行占比。
         </li>
       </ul>
       <p class="fontColor">
-        Page Fault Events的Tab页如图：<br />
+        Page Fault Events的Tab页如图：
+        <br />
         <img src="../figures/EBPF/VMEvents.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -980,7 +994,8 @@ Size：内存大小。
       <h3 class="mume-header fontColor">页内存支持多种Options展示风格</h3>
 
       <p class="fontColor">
-        点击Page Fault Calltree的Tab页底部的Options，会有两个CheckBox复选框。<br />
+        点击Page Fault Calltree的Tab页底部的Options，会有两个CheckBox复选框。
+        <br />
         <img src="../figures/EBPF/vmOptions.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1001,7 +1016,8 @@ Hide System so：隐藏系统库文件。
 
       <p class="fontColor">
         点击Page Fault Calltree的Tab页底部的Sample Count
-        Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。<br />
+        Filter，可以填上区间值。过滤出符合该区间值调用次数的调用栈信息。
+        <br />
         <img src="../figures/EBPF/vmcounter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">页内存功能的调用栈Group展示-数据分析支持剪裁功能</h3>
@@ -1018,29 +1034,37 @@ Hide System so：隐藏系统库文件。
       <h3 class="mume-header fontColor">页内存功能的调用栈Group展示支持按条件过滤</h3>
 
       <p class="fontColor">
-        在Input Filter输入关键字，会显示出带有该关键字的展示信息。<br />
+        在Input Filter输入关键字，会显示出带有该关键字的展示信息。
+        <br />
         <img src="../figures/EBPF/vminputfilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">页内存辅助信息区展示调用栈</h3>
 
       <p class="fontColor">
-        当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：<br />
+        当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：
+        <br />
         <img src="../figures/EBPF/vmheaviesttrace.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">页内存的事件类型的过滤</h3>
 
       <p class="fontColor">
-        通过选择类型事件进行过滤。<br />
+        通过选择类型事件进行过滤。
+        <br />
         <img src="../figures/EBPF/VMfilter.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">页内存的火焰图功能</h3>
 
       <p class="fontColor">
-        点击Page Fault Calltree左下角的柱状图的图标，会切换到火焰图页面。<br />
-        <img src="../figures/EBPF/vmflame.jpg" alt="GitHub Logo" /><br />
-        进入到火焰图页面，火焰图的展示跟Callinfo的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。<br />
-        <img src="../figures/EBPF/vmflameshow.jpg" alt="GitHub Logo" /><br />
-        鼠标左键火焰图，会进入下一级界面，右键回到上一级。<br />
+        点击Page Fault Calltree左下角的柱状图的图标，会切换到火焰图页面。
+        <br />
+        <img src="../figures/EBPF/vmflame.jpg" alt="GitHub Logo" />
+        <br />
+        进入到火焰图页面，火焰图的展示跟Callinfo的tab页的调用栈显示一致，鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长。
+        <br />
+        <img src="../figures/EBPF/vmflameshow.jpg" alt="GitHub Logo" />
+        <br />
+        鼠标左键火焰图，会进入下一级界面，右键回到上一级。
+        <br />
         <img src="../figures/EBPF/vmflamelevel.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_parsing_ability.html b/ide/src/doc/quickstart_parsing_ability.html
index 9bf2e25aca33a9c0c6f3dfd9de7d70c9f47014c3..aa321fec32928296b071138990aecc7e097fe2d2 100644
--- a/ide/src/doc/quickstart_parsing_ability.html
+++ b/ide/src/doc/quickstart_parsing_ability.html
@@ -794,7 +794,8 @@
       <h3 class="mume-header fontColor">焦点问题trace切割，选择焦点trace，聚焦问题发生时间范围，单独打开</h3>
 
       <p class="fontColor">
-        焦点问题切割是将现有的trace加载到界面时，对指定时间进行框选，截取框选时间范围内的trace数据通过跳转的方式去打开新的trace界面，新界面的trace数据就是按照这段时间范围去切割的。如下图框选一段时间范围，点击右上方的小剪刀图标对框选时间范围数据进行剪切。<br />
+        焦点问题切割是将现有的trace加载到界面时，对指定时间进行框选，截取框选时间范围内的trace数据通过跳转的方式去打开新的trace界面，新界面的trace数据就是按照这段时间范围去切割的。如下图框选一段时间范围，点击右上方的小剪刀图标对框选时间范围数据进行剪切。
+        <br />
         <img src="../figures/parsingability/cuttrace_bytime.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">超大trace分段打开，超大trace按照固定大小切割，分段打开显示</h3>
@@ -851,15 +852,19 @@ Single file max size： trace文件分割的大小。
       <h4 class="mume-header fontColor">本地导入超大trace</h4>
 
       <p class="fontColor">
-        本地导入超大trace是导入文件夹，将该文件夹中所有文件导入。如下图从Open long trace file入口导入。<br />
-        <img src="../figures/parsingability/longtraceload.jpg" alt="GitHub Logo" /><br />
-        本地导入以后，点击右上方的切页图标可以切页。<br />
+        本地导入超大trace是导入文件夹，将该文件夹中所有文件导入。如下图从Open long trace file入口导入。
+        <br />
+        <img src="../figures/parsingability/longtraceload.jpg" alt="GitHub Logo" />
+        <br />
+        本地导入以后，点击右上方的切页图标可以切页。
+        <br />
         <img src="../figures/parsingability/longtraceswitch.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">web端支持已打开的trace文件转换成systrace，并可下载</h3>
 
       <p class="fontColor">
-        已打开的trace界面，增加convert to systrace按钮，支持将htrace和row trace转为systrace。<br />
+        已打开的trace界面，增加convert to systrace按钮，支持将htrace和row trace转为systrace。
+        <br />
         <img src="../figures/parsingability/traceconvert.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">
@@ -868,10 +873,13 @@ Single file max size： trace文件分割的大小。
 
       <p class="fontColor">
         trace_streamer_shell
-        –q可以直接将sql查询结果显示在命令行里，如下图bytrace.ftrace是需要解析的文件，a.txt是sql语句。<br />
-        <img src="../figures/parsingability/tracestreamer_q.jpg" alt="GitHub Logo" /><br />
+        –q可以直接将sql查询结果显示在命令行里，如下图bytrace.ftrace是需要解析的文件，a.txt是sql语句。
+        <br />
+        <img src="../figures/parsingability/tracestreamer_q.jpg" alt="GitHub Logo" />
+        <br />
         trace_streamer_shell
-        –m可以直接将metric接口的查询结果显示在命令行里，如下图bytrace.ftrace是需要解析的文件，trace_stats是metric接口名。<br />
+        –m可以直接将metric接口的查询结果显示在命令行里，如下图bytrace.ftrace是需要解析的文件，trace_stats是metric接口名。
+        <br />
         <img src="../figures/parsingability/tsmetric.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_schedulinganalysis.html b/ide/src/doc/quickstart_schedulinganalysis.html
index d22311103d0f7565f35fb506f9b5731b08050672..09fc1c08278259afa52d87a51d0f405286afb848 100644
--- a/ide/src/doc/quickstart_schedulinganalysis.html
+++ b/ide/src/doc/quickstart_schedulinganalysis.html
@@ -799,16 +799,20 @@
       <h3 class="mume-header fontColor">Scheduling analysis抓取界面配置说明</h3>
 
       <p class="fontColor">
-        打开Scheduling analysis开关抓取调度分析数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。<br />
+        打开Scheduling analysis开关抓取调度分析数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。
+        <br />
         <img src="../figures/Schedulinganalysis/scheduset.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Scheduling analysis文件的抓取</h3>
 
       <p class="fontColor">
         点击Record setting，在output file path输入文件名hiprofiler_dataScheduling.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/Schedulinganalysis/schedusetting.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/Schedulinganalysis/schedusetting.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。
+        <br />
         <img src="../figures/Schedulinganalysis/scheduexcuting.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Scheduling analysis功能介绍</h2>
@@ -817,9 +821,12 @@
       <h3 class="mume-header fontColor">CPU频点分析</h3>
 
       <p class="fontColor">
-        点击下拉列表框选择CPU Frequency，可以看到各核CPU的各频点持续时长的占比图，以颜色区分各频点。<br />
-        <img src="../figures/Schedulinganalysis/CPUFrequencychart.jpg" alt="GitHub Logo" /><br />
-        点击CPU Frequency饼图，可以跳转到详细信息界面，用饼图和表格来展示某个CPU下各频点持续时长的的相关数据。<br />
+        点击下拉列表框选择CPU Frequency，可以看到各核CPU的各频点持续时长的占比图，以颜色区分各频点。
+        <br />
+        <img src="../figures/Schedulinganalysis/CPUFrequencychart.jpg" alt="GitHub Logo" />
+        <br />
+        点击CPU Frequency饼图，可以跳转到详细信息界面，用饼图和表格来展示某个CPU下各频点持续时长的的相关数据。
+        <br />
         <img src="../figures/Schedulinganalysis/CPUFrequencydetailinfo.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -861,7 +868,8 @@ duration：运行总时长。
         </li>
       </ul>
       <p class="fontColor">
-        点击详细页的CPU Frequency饼图，可以跳转某个CPU下某个频点的运行的线程信息。<br />
+        点击详细页的CPU Frequency饼图，可以跳转某个CPU下某个频点的运行的线程信息。
+        <br />
         <img src="../figures/Schedulinganalysis/CPUFrequencythreaddetail.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -905,9 +913,12 @@ duration：运行总时长。
       <h3 class="mume-header fontColor">CPU Idle分析</h3>
 
       <p class="fontColor">
-        点击下拉列表框选择CPU Idle，可以看到各CPU的Idle的时长占比饼图，以颜色区分各Idle。<br />
-        <img src="../figures/Schedulinganalysis/CPUidlechart.jpg" alt="GitHub Logo" /><br />
-        点击CPU Idle饼图，可以跳转到某CPU的idle分析的详细数据，以饼图和表格的形式展示。<br />
+        点击下拉列表框选择CPU Idle，可以看到各CPU的Idle的时长占比饼图，以颜色区分各Idle。
+        <br />
+        <img src="../figures/Schedulinganalysis/CPUidlechart.jpg" alt="GitHub Logo" />
+        <br />
+        点击CPU Idle饼图，可以跳转到某CPU的idle分析的详细数据，以饼图和表格的形式展示。
+        <br />
         <img src="../figures/Schedulinganalysis/CPUidledetailinfo.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -951,9 +962,12 @@ duration：运行总时长。
       <h3 class="mume-header fontColor">CPU Irq分析</h3>
 
       <p class="fontColor">
-        点击下拉列表框选择CPU Irq，可以看到各CPU的Irq的时长占比饼图，以颜色区分。<br />
-        <img src="../figures/Schedulinganalysis/CPUirqchart.jpg" alt="GitHub Logo" /><br />
-        点击CPU Irq饼图，可以跳转到某CPU的Irq分析的详细数据，以饼图和表格的形式展示。<br />
+        点击下拉列表框选择CPU Irq，可以看到各CPU的Irq的时长占比饼图，以颜色区分。
+        <br />
+        <img src="../figures/Schedulinganalysis/CPUirqchart.jpg" alt="GitHub Logo" />
+        <br />
+        点击CPU Irq饼图，可以跳转到某CPU的Irq分析的详细数据，以饼图和表格的形式展示。
+        <br />
         <img src="../figures/Schedulinganalysis/CPUirqdetailinfo.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1003,16 +1017,21 @@ duration：运行总时长。
       <h3 class="mume-header fontColor">CPU占用率显示</h3>
 
       <p class="fontColor">
-        以表格显示各CPU的占用率。<br />
+        以表格显示各CPU的占用率。
+        <br />
         <img src="../figures/Schedulinganalysis/CPUusagechart.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Top20线程大中小核占用率</h3>
 
       <p class="fontColor">
-        选择Thread Analysis标签页，各个CPU通过勾选big或者middle或者small来设置CPU的分类。<br />
-        <img src="../figures/Schedulinganalysis/CPUsetting.jpg" alt="GitHub Logo" /><br />
-        各CPU勾选好大中小核，点击Upload可以跳转到各个线程CPU占用率情况的展示页面。<br />
-        <img src="../figures/Schedulinganalysis/CPUdetailsetting.jpg" alt="GitHub Logo" /><br />
+        选择Thread Analysis标签页，各个CPU通过勾选big或者middle或者small来设置CPU的分类。
+        <br />
+        <img src="../figures/Schedulinganalysis/CPUsetting.jpg" alt="GitHub Logo" />
+        <br />
+        各CPU勾选好大中小核，点击Upload可以跳转到各个线程CPU占用率情况的展示页面。
+        <br />
+        <img src="../figures/Schedulinganalysis/CPUdetailsetting.jpg" alt="GitHub Logo" />
+        <br />
         如上图所示：
       </p>
       <ul class="fontColor">
@@ -1083,7 +1102,8 @@ cpu..(us)：运行总时长(..代表cpu号)。
       <h3 class="mume-header fontColor">单个线程频点分布</h3>
 
       <p class="fontColor">
-        点击单个线程频点分布的标签，通过在Thread Search选择线程，来展示单个线程的频点分布情况。<br />
+        点击单个线程频点分布的标签，通过在Thread Search选择线程，来展示单个线程的频点分布情况。
+        <br />
         <img src="../figures/Schedulinganalysis/CPUfrequencybythread.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1121,7 +1141,8 @@ duration：运行时长。
       <h3 class="mume-header fontColor">Top20单次运行超长线程</h3>
 
       <p class="fontColor">
-        通过点击Top20单次运行超长线程标签，显示线程的单次运行时长来统计出单次运行时长最大的20个线程。<br />
+        通过点击Top20单次运行超长线程标签，显示线程的单次运行时长来统计出单次运行时长最大的20个线程。
+        <br />
         <img src="../figures/Schedulinganalysis/Top20Threadduration.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1171,7 +1192,8 @@ timestamp：时间戳信息。
       <h3 class="mume-header fontColor">Top20进程线程数</h3>
 
       <p class="fontColor">
-        通过点击Top20进程线程数标签，显示线程数量最多的20个进程，以饼图和表格方式显示。<br />
+        通过点击Top20进程线程数标签，显示线程数量最多的20个进程，以饼图和表格方式显示。
+        <br />
         <img src="../figures/Schedulinganalysis/Top20Threadnum.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -1203,7 +1225,8 @@ thread count：线程数量。
       <h3 class="mume-header fontColor">Top20切换次数线程</h3>
 
       <p class="fontColor">
-        通过点击Top20切换次数线程标签，显示切换次数最多的20个进程，以饼图和表格方式显示。<br />
+        通过点击Top20切换次数线程标签，显示切换次数最多的20个进程，以饼图和表格方式显示。
+        <br />
         <img src="../figures/Schedulinganalysis/Top20swtichcount.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_sdk.html b/ide/src/doc/quickstart_sdk.html
index f47806089966c76dc051ab4c3abf59094061f159..7a82943345cac28dfc1ecded84dbadb01fdc680e 100644
--- a/ide/src/doc/quickstart_sdk.html
+++ b/ide/src/doc/quickstart_sdk.html
@@ -799,7 +799,8 @@
       <h3 class="mume-header fontColor">Sdk抓取配置参数</h3>
 
       <p class="fontColor">
-        打开Start Custom Config开关抓取Sdk数据。<br />
+        打开Start Custom Config开关抓取Sdk数据。
+        <br />
         <img src="../figures/sdk/sdk.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_smartperflinux_compile_guide.html b/ide/src/doc/quickstart_smartperflinux_compile_guide.html
index e905a41bf64f5f134bf405a358bc5e5f3e55d65b..f6f447208502ffa3d144dded3fd5eee829270834 100644
--- a/ide/src/doc/quickstart_smartperflinux_compile_guide.html
+++ b/ide/src/doc/quickstart_smartperflinux_compile_guide.html
@@ -854,7 +854,8 @@
         tsc -v
 </code></pre>
       <p class="fontColor">
-        验证安装完成:<br />
+        验证安装完成:
+        <br />
         <img src="../figures/deploy/install_tsc.png" alt="" />
       </p>
       <h3 class="mume-header fontColor">go 编译环境安装</h3>
@@ -877,10 +878,7 @@
       <p class="fontColor"><img src="../figures/deploy/yum_install_go.png" alt="" /></p>
       <ul class="fontColor">
         <li>
-          <p class="fontColor">
-            windows 系统下 从官网下载安装包，
-            一路next 完成 安装即可
-          </p>
+          <p class="fontColor">windows 系统下从官网下载安装包， 一路next 完成 安装即可</p>
         </li>
         <li>
           <p class="fontColor">安装完成后 命令行运行验证是否安装成功</p>
@@ -897,22 +895,26 @@
 
       <p class="fontColor">
         从如下
-        <a href="https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip"
-          >https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip</a
-        >
-        获取到sql.js的二进制包。<br />
+        <a href="https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip">
+          https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip
+        </a>
+        获取到sql.js的二进制包。
+        <br />
         将压缩包解压后， 将文件放置到项目third-party 目录下。
       </p>
       <p class="fontColor"><img src="../figures/deploy/third_party.png" alt="" /></p>
       <h4 class="mume-header fontColor">先编译获取trace_streamer 的二进制包</h4>
 
       <p class="fontColor">
-        参照:smartperf/trace_streamer/compile_trace_streamer.md 编译出wasm、linux、Windows版本的二进制文件。<br />
-        将获取到二进制文件放入到项目bin目录下，如果项目目录中无bin目录 先创建bin目录。<br />
+        参照:smartperf/trace_streamer/compile_trace_streamer.md 编译出wasm、linux、Windows版本的二进制文件。
+        <br />
+        将获取到二进制文件放入到项目bin目录下，如果项目目录中无bin目录 先创建bin目录。
+        <br />
         然后将trace_streamer的二进制文件放入bin目录中。
       </p>
       <p class="fontColor">
-        <img src="../figures/deploy/put_bin.png" alt="" /><br />
+        <img src="../figures/deploy/put_bin.png" alt="" />
+        <br />
         <img src="../figures/deploy/bin_files.png" alt="" />
       </p>
       <h4 class="mume-header fontColor">代码编译(依赖于上面node环境 和 go环境)</h4>
@@ -930,7 +932,8 @@
         class="fontColor light smartperf-"><code class="fontColor">        npm run compile
 </code></pre>
       <p class="fontColor">
-        <img src="../figures/deploy/compile.png" alt="" /><br />
+        <img src="../figures/deploy/compile.png" alt="" />
+        <br />
         编译成功后会有main 可执行文件生成。
       </p>
       <h2 class="mume-header fontColor">项目部署</h2>
@@ -943,18 +946,22 @@
 </code></pre>
       <p class="fontColor"><img src="../figures/deploy/chomd+x.png" alt="" /></p>
       <p class="fontColor">
-        直接运行 ./main 可执行程序，完成项目的部署。<br />
+        直接运行 ./main 可执行程序，完成项目的部署。
+        <br />
         <img src="../figures/deploy/run_main.png" alt="" />
       </p>
       <h2>访问项目</h2>
       <p class="fontColor">
-        在浏览器上打开 https://[部署机器ip地址]:9000/application/<br />
+        在浏览器上打开 https://[部署机器ip地址]:9000/application/
+        <br />
         !!! 注意一定是https。
       </p>
       <p class="fontColor"><img src="../figures/deploy/visit_website.png" alt="" /></p>
       <p class="fontColor">
-        备注：如果未出现如图所示网页.而是显示 无法访问此网站。<br />
-        可以在window cmd 里执行telnet [部署机器ip地址] 9000。<br />
+        备注：如果未出现如图所示网页.而是显示 无法访问此网站。
+        <br />
+        可以在window cmd 里执行telnet [部署机器ip地址] 9000。
+        <br />
         如果显示端口连接失败 可能是防火墙未对9000 端口放开即可。
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_sql_metrics.html b/ide/src/doc/quickstart_sql_metrics.html
index 53aec19df074bd9f53ef5f416b9767bd343b7ec5..94cdf447913c62c49ebd4a6c91bf1b40b7b66838 100644
--- a/ide/src/doc/quickstart_sql_metrics.html
+++ b/ide/src/doc/quickstart_sql_metrics.html
@@ -799,7 +799,8 @@
       <h2 class="mume-header fontColor">Sql分析功能介绍</h2>
 
       <p class="fontColor">
-        点击Query(SQL)，输入需要查询的sql语句，如select * from process，可以看到进程表数据。<br />
+        点击Query(SQL)，输入需要查询的sql语句，如select * from process，可以看到进程表数据。
+        <br />
         <img src="../figures/Metrics/Sql.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Metrics功能介绍</h2>
@@ -810,19 +811,22 @@
       <h3 class="mume-header fontColor">Metrics查询接口展示</h3>
 
       <p class="fontColor">
-        如下图，查询接口在下拉框中，如选择trace_task_names，点击run，就能展示线程和进程相关数据。<br />
+        如下图，查询接口在下拉框中，如选择trace_task_names，点击run，就能展示线程和进程相关数据。
+        <br />
         <img src="../figures/Metrics/metrics.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Info和stats功能</h2>
 
       <p class="fontColor">
-        点击Info and stats，能查看到meta表和stats表信息。<br />
+        点击Info and stats，能查看到meta表和stats表信息。
+        <br />
         <img src="../figures/Metrics/infoandstats.jpg" alt="GitHub Logo" />
       </p>
       <h2 class="mume-header fontColor">Download功能</h2>
 
       <p class="fontColor">
-        点击DownLoad按钮，会将在线抓取的文件下载到本地。<br />
+        点击DownLoad按钮，会将在线抓取的文件下载到本地。
+        <br />
         <img src="../figures/Metrics/download.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_systemtrace.html b/ide/src/doc/quickstart_systemtrace.html
index 2f642ec14b06649062b2387e8ff5fdfdb0ede289..b2e27b2ad2977012633d9f481d73b9ea82ee5409 100644
--- a/ide/src/doc/quickstart_systemtrace.html
+++ b/ide/src/doc/quickstart_systemtrace.html
@@ -794,7 +794,8 @@
       <h2 class="mume-header fontColor">文件加载入口</h2>
 
       <p class="fontColor">
-        将抓取的trace导入查看。<br />
+        将抓取的trace导入查看。
+        <br />
         <img src="../figures/Web/opentrace.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">说明：</p>
@@ -807,7 +808,8 @@
       <h2 class="mume-header fontColor">导入trace文件后显示页面</h2>
 
       <p class="fontColor">
-        <img src="../figures/Web/trace.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/Web/trace.jpg" alt="GitHub Logo" />
+        <br />
         说明：
       </p>
       <ul class="fontColor">
@@ -823,61 +825,85 @@
       <h3 class="mume-header fontColor">时间轴和cpu使用率</h3>
 
       <p class="fontColor">
-        <img src="../figures/Web/time.jpg" alt="GitHub Logo" /><br />
-        最上方带刻度的为时间轴，主要展示当前抓取数据的总时长和时间刻度的分布情况，如上图所示，左下角展示总时长。<br />
-        中间区域展示的是抓取数据时间段内的cpu使用率，颜色越深代表cpu使用率越高，颜色越浅代表cpu使用率越低。<br />
-        <img src="../figures/Web/highlit.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/Web/time.jpg" alt="GitHub Logo" />
+        <br />
+        最上方带刻度的为时间轴，主要展示当前抓取数据的总时长和时间刻度的分布情况，如上图所示，左下角展示总时长。
+        <br />
+        中间区域展示的是抓取数据时间段内的cpu使用率，颜色越深代表cpu使用率越高，颜色越浅代表cpu使用率越低。
+        <br />
+        <img src="../figures/Web/highlit.jpg" alt="GitHub Logo" />
+        <br />
         在白色背景时间轴区域内可以点击后拖拽鼠标，可以对从鼠标按下到拖拽完成鼠标松开的区域内的数据进行筛选，高亮显示的部分为当前所选区域，如上图所示。
       </p>
       <h3 class="mume-header fontColor">cpu使用情况</h3>
 
       <p class="fontColor"><img src="../figures/Web/cpu.jpg" alt="GitHub Logo" /></p>
       <p class="fontColor">
-        如上图所示，当前抓取数据有4个cpu工作，前四组数据对应的是当前调用cpu的线程和对应的进程情况，以颜色作为区分。后四组数据则为cpu的使用频率信息。鼠标移动到相应的线程上还会将当前选中的进程信息全部置为高亮，其他的进程会置灰，如下图所示。<br />
+        如上图所示，当前抓取数据有4个cpu工作，前四组数据对应的是当前调用cpu的线程和对应的进程情况，以颜色作为区分。后四组数据则为cpu的使用频率信息。鼠标移动到相应的线程上还会将当前选中的进程信息全部置为高亮，其他的进程会置灰，如下图所示。
+        <br />
         <img src="../figures/Web/gray.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">cpu使用情况的框选功能</h4>
 
       <p class="fontColor">
-        可以对cpu的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格,总共有六个tab页。<br />
+        可以对cpu的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格,总共有六个tab页。
+        <br />
         CPU by
-        thread的Tab页，主要显示了在框选时间区间内的进程名、进程号、线程名、线程号、总运行时长、平均运行时长和调度次数信息。<br />
-        <img src="../figures/Web/cpubythread.jpg" alt="GitHub Logo" /><br />
-        CPU by process的Tab页，主要显示了在框选时间区间内的进程名、进程号、总运行时长、平均运行时长和调度次数信息。<br />
-        <img src="../figures/Web/cpubyprocess.jpg" alt="GitHub Logo" /><br />
-        CPU Usage的Tab页，主要显示了在框选时间区间内，该频率时间占比前三的信息。<br />
-        <img src="../figures/Web/cpusage.jpg" alt="GitHub Logo" /><br />
+        thread的Tab页，主要显示了在框选时间区间内的进程名、进程号、线程名、线程号、总运行时长、平均运行时长和调度次数信息。
+        <br />
+        <img src="../figures/Web/cpubythread.jpg" alt="GitHub Logo" />
+        <br />
+        CPU by process的Tab页，主要显示了在框选时间区间内的进程名、进程号、总运行时长、平均运行时长和调度次数信息。
+        <br />
+        <img src="../figures/Web/cpubyprocess.jpg" alt="GitHub Logo" />
+        <br />
+        CPU Usage的Tab页，主要显示了在框选时间区间内，该频率时间占比前三的信息。
+        <br />
+        <img src="../figures/Web/cpusage.jpg" alt="GitHub Logo" />
+        <br />
         Thread
-        Switches的Tab页，按照状态&gt;进程&gt;线程，统计对应状态下的次数，持续时长，最小时长，平均时长，最大时长信息。<br />
-        <img src="../figures/Web/threadswitches.jpg" alt="GitHub Logo" /><br />
+        Switches的Tab页，按照状态&gt;进程&gt;线程，统计对应状态下的次数，持续时长，最小时长，平均时长，最大时长信息。
+        <br />
+        <img src="../figures/Web/threadswitches.jpg" alt="GitHub Logo" />
+        <br />
         Thread
-        States的Tab页，按进程&gt;线程&gt;状态的维度去统计，需要呈现该状态的线程名、进入该状态次数、该状态下时长、最小时长、平均时长、最大时长。<br />
-        <img src="../figures/Web/threadstates.jpg" alt="GitHub Logo" /><br />
+        States的Tab页，按进程&gt;线程&gt;状态的维度去统计，需要呈现该状态的线程名、进入该状态次数、该状态下时长、最小时长、平均时长、最大时长。
+        <br />
+        <img src="../figures/Web/threadstates.jpg" alt="GitHub Logo" />
+        <br />
         Sched
-        Priority的Tab页，按优先级显示调度，显示框选范围内所有Running以及Running之前的Runnable线程的最小，最大，平均耗时。<br />
-        <img src="../figures/Web/schedpritab.jpg" alt="GitHub Logo" /><br />
+        Priority的Tab页，按优先级显示调度，显示框选范围内所有Running以及Running之前的Runnable线程的最小，最大，平均耗时。
+        <br />
+        <img src="../figures/Web/schedpritab.jpg" alt="GitHub Logo" />
+        <br />
         Thread States、Thread
-        Switches的2个Tab页，点击移动到某一行，鼠标会变成一个小手的标志，并且会高亮，点击一下，就会进入辅助信息界面，会将选中行的辅助信息展示出来，包括开始时间、进程、线程、线程状态、对应的CPU、优先级等信息如下图。<br />
+        Switches的2个Tab页，点击移动到某一行，鼠标会变成一个小手的标志，并且会高亮，点击一下，就会进入辅助信息界面，会将选中行的辅助信息展示出来，包括开始时间、进程、线程、线程状态、对应的CPU、优先级等信息如下图。
+        <br />
         <img src="../figures/Web/details.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">cpu使用情况的单选功能</h4>
 
       <p class="fontColor">
-        单选CPU使用情况数据会在选中的色块外层加上深色边框，能够突出当前选中色块，弹出层中会展示当前CPU上的进程名，线程名，开始时间的相对时间，开始时间的绝对时间，运行时长，线程结束状态信息。<br />
+        单选CPU使用情况数据会在选中的色块外层加上深色边框，能够突出当前选中色块，弹出层中会展示当前CPU上的进程名，线程名，开始时间的相对时间，开始时间的绝对时间，运行时长，线程结束状态信息。
+        <br />
         <img src="../figures/Web/cpuclick.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">线程唤醒关系树</h3>
 
       <p class="fontColor">
-        线程唤醒关系树功能是点击GetWakeupList会以链式结构和表格分别在泳道图和tab上展示线程的唤醒关系树信息,点击GetWakeupList按钮旁边的星号按钮可以对唤醒树对应的泳道图一键收藏，对优先级最低且运行时长最长或者运行时长最长的线程会以红色字体高亮显示。<br />
+        线程唤醒关系树功能是点击GetWakeupList会以链式结构和表格分别在泳道图和tab上展示线程的唤醒关系树信息,点击GetWakeupList按钮旁边的星号按钮可以对唤醒树对应的泳道图一键收藏，对优先级最低且运行时长最长或者运行时长最长的线程会以红色字体高亮显示。
+        <br />
         <img src="../figures/Web/threadtree.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">进程、线程和方法数据</h3>
 
       <p class="fontColor">
-        下图是进程数据，左边部分展示进程名称和id，右边显示线程切换关系，线程的调用方法，进程间内存信息等。<br />
-        <img src="../figures/Web/process.jpg" alt="GitHub Logo" /><br />
-        点击进程名前面箭头可以展开对应的线程进行查看，展开后的线程如下图，如果存在堆内存占用情况，会显示出对应泳道图，如果出现两个名字和id一样的线程，则第一个为线程的使用情况，第二个为线程内的方法栈调用情况。<br />
+        下图是进程数据，左边部分展示进程名称和id，右边显示线程切换关系，线程的调用方法，进程间内存信息等。
+        <br />
+        <img src="../figures/Web/process.jpg" alt="GitHub Logo" />
+        <br />
+        点击进程名前面箭头可以展开对应的线程进行查看，展开后的线程如下图，如果存在堆内存占用情况，会显示出对应泳道图，如果出现两个名字和id一样的线程，则第一个为线程的使用情况，第二个为线程内的方法栈调用情况。
+        <br />
         <img src="../figures/Web/threadinfo.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">进程、线程和方法数据的框选功能</h4>
@@ -886,46 +912,57 @@
         可以对线程的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，包含线程运行状态，线程调用栈的统计情况。当框选的数据中同时存在线程运行状态和线程调用栈数据，下方的弹出层中就会出现多个tab选项，可以进行切换。
       </p>
       <p class="fontColor">
-        下图是线程运行状态框选统计信息,包括进程名、进程号、线程名、线程号、线程状态、状态持续时间、平均持续时间、该线程状态发生的次数。<br />
+        下图是线程运行状态框选统计信息,包括进程名、进程号、线程名、线程号、线程状态、状态持续时间、平均持续时间、该线程状态发生的次数。
+        <br />
         <img src="../figures/Web/threadselect.jpg" alt="GitHub Logo" />
       </p>
       <p class="fontColor">
-        下图是线程调用栈框选统计信息,包括方法名、持续时间、平均持续时间、调用的次数。<br />
+        下图是线程调用栈框选统计信息,包括方法名、持续时间、平均持续时间、调用的次数。
+        <br />
         <img src="../figures/Web/callstackselect.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">进程、线程和方法数据的单选功能</h4>
 
       <p class="fontColor">
-        单选线程的state数据时，会展示当前选中线程的状态数据，开始时间(相对和绝对时间)和持续时长，线程状态，所在进程名称，选中状态的前一个状态，选中状态的后一个状态。<br />
-        <img src="../figures/Web/threadclick.jpg" alt="GitHub Logo" /><br />
-        单选调用栈数据，单击方法会在选中的方法外层加上黑色边框，能够突出当前选中的方法，弹出层中会展示当前方法的名称、开始时间(相对和绝对时间)和运行时长信息，调用栈深度。<br />
+        单选线程的state数据时，会展示当前选中线程的状态数据，开始时间(相对和绝对时间)和持续时长，线程状态，所在进程名称，选中状态的前一个状态，选中状态的后一个状态。
+        <br />
+        <img src="../figures/Web/threadclick.jpg" alt="GitHub Logo" />
+        <br />
+        单选调用栈数据，单击方法会在选中的方法外层加上黑色边框，能够突出当前选中的方法，弹出层中会展示当前方法的名称、开始时间(相对和绝对时间)和运行时长信息，调用栈深度。
+        <br />
         <img src="../figures/Web/callstackclick.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">线程的跳转功能</h4>
 
       <p class="fontColor">
-        点击画红框处的带箭头的标志，会从CPU的线程概览视图跳转到线程的详情视图，同时从线程的详情视图也能跳转到CPU的线程概览视图。<br />
+        点击画红框处的带箭头的标志，会从CPU的线程概览视图跳转到线程的详情视图，同时从线程的详情视图也能跳转到CPU的线程概览视图。
+        <br />
         <img src="../figures/Web/jumpthread.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">获取频点的busy_time</h4>
 
       <p class="fontColor">
         框选Cpu Frequency泳道的Tab页有GetBusyTime的按钮，该按钮获取每个频点在Cpu
-        State等于0时的时间信息，体现频点的忙碌时间。<br />
+        State等于0时的时间信息，体现频点的忙碌时间。
+        <br />
         <img src="../figures/Web/getbusytime.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">CPU频点数据切割</h4>
 
       <p class="fontColor">
-        框选区域内所有running状态的频点数据，以用户输入的某一方法作为切割依据，将频点数据以Single和Loop两种方式切割后展示在Tab标签页的表格中。<br />
+        框选区域内所有running状态的频点数据，以用户输入的某一方法作为切割依据，将频点数据以Single和Loop两种方式切割后展示在Tab标签页的表格中。
+        <br />
         <img src="../figures/Web/Singe_loop.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">关键路径标识</h4>
 
       <p class="fontColor">
-        在ftrace数据中的cpu泳道的区域，在界面顶部增加json文件导入按钮，导入json文件后，根据线程号跟对应的时间，在cpu区域高亮该时间的线程色块，点击界面上的x,可以取消高亮。json格式如下：<br />
-        <img src="../figures/Web/json.jpg" alt="GitHub Logo" /><br />
-        导入json文件以后，会将ACCS0 [2716]线程对应时间点的slice色块高亮显示<br />
+        在ftrace数据中的cpu泳道的区域，在界面顶部增加json文件导入按钮，导入json文件后，根据线程号跟对应的时间，在cpu区域高亮该时间的线程色块，点击界面上的x,可以取消高亮。json格式如下：
+        <br />
+        <img src="../figures/Web/json.jpg" alt="GitHub Logo" />
+        <br />
+        导入json文件以后，会将ACCS0 [2716]线程对应时间点的slice色块高亮显示
+        <br />
         <img src="../figures/Web/keyslice.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">trace的其他功能</h3>
@@ -933,41 +970,51 @@
       <h4 class="mume-header fontColor">小旗标志的功能</h4>
 
       <p class="fontColor">
-        将选中数据的时间点通过小旗的方式在时间轴上展示，直观的展示选中数据的时间。<br />
+        将选中数据的时间点通过小旗的方式在时间轴上展示，直观的展示选中数据的时间。
+        <br />
         <img src="../figures/Web/flag.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">勾选功能</h4>
 
       <p class="fontColor">
-        框选某一区域，该区域左边会出现CheckBox的复选框，选中的区域的复选框会出现打勾的状态，可以取消勾选，也可以重新勾选。<br />
+        框选某一区域，该区域左边会出现CheckBox的复选框，选中的区域的复选框会出现打勾的状态，可以取消勾选，也可以重新勾选。
+        <br />
         <img src="../figures/Web/checkbox.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">搜索功能</h4>
 
       <p class="fontColor">
-        在搜索框中，可以输入线程，线程号等搜索自己想要的信息，搜索完成会高亮显示。<br />
-        <img src="../figures/Web/search.jpg" alt="GitHub Logo" /><br />
-        在搜索框中输入调用栈的方法名，会跳转到对应的调用栈。<br />
+        在搜索框中，可以输入线程，线程号等搜索自己想要的信息，搜索完成会高亮显示。
+        <br />
+        <img src="../figures/Web/search.jpg" alt="GitHub Logo" />
+        <br />
+        在搜索框中输入调用栈的方法名，会跳转到对应的调用栈。
+        <br />
         <img src="../figures/Web/searchcallstack.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Tab页信息和泳道图可跳转(点击和框选场景,框选类似搜索)</h3>
 
       <p class="fontColor">
         泳道图高亮场景：框选Cpu Frequency 或者Cpu State泳道图后，弹出Cpu Frequency或Cpu State
-        Tab页，在点击Tab页表格的行时，框选范围泳道图的当前行的Value值一样的部分上方会出现一条以圆点开头颜色比趋势图颜色同色但稍深的粗线条，如下图:<br />
-        <img src="../figures/Web/Tabskill.jpg" alt="GitHub Logo" /><br />
+        Tab页，在点击Tab页表格的行时，框选范围泳道图的当前行的Value值一样的部分上方会出现一条以圆点开头颜色比趋势图颜色同色但稍深的粗线条，如下图:
+        <br />
+        <img src="../figures/Web/Tabskill.jpg" alt="GitHub Logo" />
+        <br />
         搜索场景：框选函数调用栈的泳道图，弹出Slices
         Tab页，点击表格行，会跳转到框选范围内的第一条调用栈的位置，点击下图Slices Tab页的Background concurrent copying
-        GC调用栈。<br />
-        <img src="../figures/Web/Tabskillcalltack.jpg" alt="GitHub Logo" /><br />
-        会在搜索栏显示出该调用栈的搜索结果，并且会跳转到框选范围内第一条Background concurrent copying
-        GC调用栈的位置。<br />
+        GC调用栈。
+        <br />
+        <img src="../figures/Web/Tabskillcalltack.jpg" alt="GitHub Logo" />
+        <br />
+        会在搜索栏显示出该调用栈的搜索结果，并且会跳转到框选范围内第一条Background concurrent copying GC调用栈的位置。
+        <br />
         <img src="../figures/Web/Tabcallstackskip.jpg" alt="GitHub Logo" />
       </p>
       <h4 class="mume-header fontColor">M键测量功能</h4>
 
       <p class="fontColor">
-        放大trace中的色块，选中色块，键盘按下M，会出现像标尺一样的形状。<br />
+        放大trace中的色块，选中色块，键盘按下M，会出现像标尺一样的形状。
+        <br />
         <img src="../figures/Web/M.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_taskpool.html b/ide/src/doc/quickstart_taskpool.html
index 26484e6951f0a767cac4b34c56af6091c9f4e50a..c4445358056c9d8c130450544d9920c0326f3311 100644
--- a/ide/src/doc/quickstart_taskpool.html
+++ b/ide/src/doc/quickstart_taskpool.html
@@ -797,20 +797,24 @@
       <h2 class="mume-header fontColor">TaskPool的抓取</h2>
       <h4 class="mume-header fontColor">TaskPool的抓取配置参数</h4>
       <p class="fontColor">
-        打开Task pool开关抓取taskpool数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。<br />
+        打开Task pool开关抓取taskpool数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。
+        <br />
         <img src="../figures/Taskpool/taskpoolconfig.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">TaskPool展示说明</h3>
 
       <p class="fontColor">
-        将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。<br />
+        将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。
+        <br />
         <img src="../figures/Taskpool/taskpoolrow.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">TaskPool的任务关联关系跟踪</h3>
 
       <p class="fontColor">
-        任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。<br />
-        <img src="../figures/Taskpool/taskpoolrelation.jpg" alt="GitHub Logo" /><br />
+        任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。
+        <br />
+        <img src="../figures/Taskpool/taskpoolrelation.jpg" alt="GitHub Logo" />
+        <br />
         如上图所示，点击H:Task Perform: taskId : 2, executeId :
         2的调用栈会出现红色连线，红色连线展示了executeId是2的任务的关联关系，连接的调用栈分别是：
       </p>
@@ -837,13 +841,15 @@ H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful：
       <h3 class="mume-header fontColor">TaskPool的并发度</h3>
 
       <p class="fontColor">
-        点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。<br />
+        点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。
+        <br />
         <img src="../figures/Taskpool/taskpoolconcurrency.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">TaskPool泳道图的点选功能</h3>
 
       <p class="fontColor">
-        点选taskpool的Slice，展示该taskpool信息的tab页。<br />
+        点选taskpool的Slice，展示该taskpool信息的tab页。
+        <br />
         <img src="../figures/Taskpool/taskpoolselect.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -875,7 +881,8 @@ depth：调用栈层级。
       <h3 class="mume-header fontColor">TaskPool泳道图的框选功能</h3>
 
       <p class="fontColor">
-        框选taskpool的泳道图，展示Frames的tab页。<br />
+        框选taskpool的泳道图，展示Frames的tab页。
+        <br />
         <img src="../figures/Taskpool/taskpooldrag.jpg" alt="GitHub Logo" />
       </p>
       <ul class="fontColor">
@@ -913,13 +920,15 @@ Return Time(ms)：返回耗时(任务返回的结束时间 – 任务执行的
       <h3 class="mume-header fontColor">TaskPool的队列任务数和线程池里线程状态统计</h3>
 
       <p class="fontColor">
-        <img src="../figures/Taskpool/taskpoolnum.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/Taskpool/taskpoolnum.jpg" alt="GitHub Logo" />
+        <br />
         如上图，H:threadNum，H:runningThreadNum，H:idleThreadNum，H:timeoutThreadNum是线程池里线程状态统计，H:taskNum是队列任务数。
       </p>
       <h3 class="mume-header fontColor">TaskPool的任务超时退出</h3>
 
       <p class="fontColor">
-        在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。<br />
+        在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。
+        <br />
         <img src="../figures/Taskpool/taskpoolexit.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/doc/quickstart_web_record.html b/ide/src/doc/quickstart_web_record.html
index 3ac9c612bafac2a922013cd356bf41af89edba5a..0a822c5b7aaf2df3651eb30b5353c30b183b75df 100644
--- a/ide/src/doc/quickstart_web_record.html
+++ b/ide/src/doc/quickstart_web_record.html
@@ -797,7 +797,8 @@
       <h2 class="mume-header fontColor">界面配置说明</h2>
 
       <p class="fontColor">
-        <img src="../figures/hdc/hdc.jpg" alt="GitHub Logo" /><br />
+        <img src="../figures/hdc/hdc.jpg" alt="GitHub Logo" />
+        <br />
         说明：
       </p>
       <ul class="fontColor">
@@ -807,10 +808,14 @@
       <h2 class="mume-header fontColor">trace文件的在线抓取</h2>
 
       <p class="fontColor">
-        点击Add HDC Device在弹出的框里选择HDC-配对，点击连接，连接设备。<br />
-        <img src="../figures/hdc/Device.jpg" alt="GitHub Logo" /><br />
-        点击Probes config，如选择抓取Scheduling details。<br />
-        <img src="../figures/hdc/Schedulingdetails.jpg" alt="GitHub Logo" /><br />
+        点击Add HDC Device在弹出的框里选择HDC-配对，点击连接，连接设备。
+        <br />
+        <img src="../figures/hdc/Device.jpg" alt="GitHub Logo" />
+        <br />
+        点击Probes config，如选择抓取Scheduling details。
+        <br />
+        <img src="../figures/hdc/Schedulingdetails.jpg" alt="GitHub Logo" />
+        <br />
         抓取项说明：
       </p>
       <ul class="fontColor">
@@ -827,19 +832,27 @@
         <li>Kernel meminfo:内核内存。</li>
         <li>Virtual memory stats:系统虚拟内存。</li>
         <li>
-          Hitrace categories:Bytrace的抓取项，各解释项说明如下图：<br />
+          Hitrace categories:Bytrace的抓取项，各解释项说明如下图：
+          <br />
           <img src="../figures/hdc/bytacedescription.jpg" alt="GitHub Logo" />
         </li>
       </ul>
       <p class="fontColor">
         再点击Record setting，在output file path输入文件名hiprofiler_data_example.htrace，拖动滚动条设置buffer
-        size大小是64M，抓取时长是50s。<br />
-        <img src="../figures/hdc/examplerecord.jpg" alt="GitHub Logo" /><br />
-        点击Trace command，就会根据上面的配置生成抓取命令，点击Record。<br />
-        <img src="../figures/hdc/record.jpg" alt="GitHub Logo" /><br />
-        抓取过程中，上方会给出提示正在抓取，并显示出抓取时长。<br />
-        <img src="../figures/hdc/hdctracing.jpg" alt="GitHub Logo" /><br />
-        抓取完成后，界面会自动加载展示trace文件。<br />
+        size大小是64M，抓取时长是50s。
+        <br />
+        <img src="../figures/hdc/examplerecord.jpg" alt="GitHub Logo" />
+        <br />
+        点击Trace command，就会根据上面的配置生成抓取命令，点击Record。
+        <br />
+        <img src="../figures/hdc/record.jpg" alt="GitHub Logo" />
+        <br />
+        抓取过程中，上方会给出提示正在抓取，并显示出抓取时长。
+        <br />
+        <img src="../figures/hdc/hdctracing.jpg" alt="GitHub Logo" />
+        <br />
+        抓取完成后，界面会自动加载展示trace文件。
+        <br />
         <img src="../figures/hdc/hdcfile.jpg" alt="GitHub Logo" />
       </p>
     </div>
diff --git a/ide/src/figures/OperationSkills/Tabskillsubsystem.jpg b/ide/src/figures/OperationSkills/Tabskillsubsystem.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b0aa6e9eb69f7f75b48829094c6d1bcbd3085b07
Binary files /dev/null and b/ide/src/figures/OperationSkills/Tabskillsubsystem.jpg differ
diff --git a/ide/src/figures/OperationSkills/Tabskilltemple.jpg b/ide/src/figures/OperationSkills/Tabskilltemple.jpg
index 184e1ff8e7fe3d91e0bcd86c028f22e96d52e130..094d783c9f405092f8964020b6ee8f36cf8b29bf 100644
Binary files a/ide/src/figures/OperationSkills/Tabskilltemple.jpg and b/ide/src/figures/OperationSkills/Tabskilltemple.jpg differ
diff --git a/ide/src/figures/OperationSkills/Tabskilltempleshow.jpg b/ide/src/figures/OperationSkills/Tabskilltempleshow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..38cf501c7dcf3c495e6ad5c596d457bb941d81e5
Binary files /dev/null and b/ide/src/figures/OperationSkills/Tabskilltempleshow.jpg differ
diff --git a/ide/src/figures/OperationSkills/subsystemdownload.jpg b/ide/src/figures/OperationSkills/subsystemdownload.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3b7a5c18427d9d4afe8a95624aaf2435c2141427
Binary files /dev/null and b/ide/src/figures/OperationSkills/subsystemdownload.jpg differ
diff --git a/ide/src/figures/OperationSkills/subsystemsconfig.jpg b/ide/src/figures/OperationSkills/subsystemsconfig.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1f3db11c371bb2d653bc8e6c62f0c3d983df1323
Binary files /dev/null and b/ide/src/figures/OperationSkills/subsystemsconfig.jpg differ
diff --git a/ide/src/figures/OperationSkills/subsystemupload.jpg b/ide/src/figures/OperationSkills/subsystemupload.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a72bce2e0be4748112e2258eb6592f0721d341ca
Binary files /dev/null and b/ide/src/figures/OperationSkills/subsystemupload.jpg differ
diff --git a/ide/src/js-heap/LoadDatabase.ts b/ide/src/js-heap/LoadDatabase.ts
index 5b730c0b303340576d8ffd89db5655eaa993f65b..d1545e1837fb38166d3b1987f225967dadc1686c 100644
--- a/ide/src/js-heap/LoadDatabase.ts
+++ b/ide/src/js-heap/LoadDatabase.ts
@@ -22,9 +22,10 @@ import {
   queryHeapFile,
   queryHeapInfo,
   queryHeapNode,
-  queryHeapSample, queryHeapString
-} from "../trace/database/sql/SqlLite.sql";
-import {queryHeapFunction, queryHeapTraceNode} from "../trace/database/sql/Func.sql";
+  queryHeapSample,
+  queryHeapString,
+} from '../trace/database/sql/SqlLite.sql';
+import { queryHeapFunction, queryHeapTraceNode } from '../trace/database/sql/Func.sql';
 
 export class LoadDatabase {
   private static loadDB: LoadDatabase;
diff --git a/ide/src/statistics/util/SpStatisticsHttpUtil.ts b/ide/src/statistics/util/SpStatisticsHttpUtil.ts
index e89088f488d3d83d6a47206296c91f79a90e8245..d7cc210cf279406bc98193ce7f3bb90fd62a4748 100644
--- a/ide/src/statistics/util/SpStatisticsHttpUtil.ts
+++ b/ide/src/statistics/util/SpStatisticsHttpUtil.ts
@@ -38,13 +38,13 @@ export class SpStatisticsHttpUtil {
     try {
       let req = new XMLHttpRequest();
       req.onreadystatechange = () => {
-        if (req.readyState === 4 &&  req.status === 200) {
+        if (req.readyState === 4 && req.status === 200) {
           let requestInfo = req.getResponseHeader('request_info');
           if (requestInfo && requestInfo.length > 0) {
             SpStatisticsHttpUtil.requestServerInfo = requestInfo;
           }
         }
-      }
+      };
       req.open(
         'GET',
         `${window.location.protocol}//${window.location.host.split(':')[0]}:${
@@ -54,7 +54,7 @@ export class SpStatisticsHttpUtil {
       );
       req.send(null);
     } catch {
-      warn('Connect Server Failed')
+      warn('Connect Server Failed');
     }
     return '';
   }
diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts
index d623c516073ca6d679a155fc5e54f7165a589d5a..375287310e5dec687a01534032a15c23a84de00d 100644
--- a/ide/src/trace/SpApplication.ts
+++ b/ide/src/trace/SpApplication.ts
@@ -320,6 +320,7 @@ export class SpApplication extends BaseElement {
         event: 'help_page',
         action: 'help_doc',
       });
+      this.spHelp!.dark = this.dark;
       this.showContent(this.spHelp!);
     } else if (urlParams.get('action')!.length > 4) {
       this.showContent(this.spHelp!);
@@ -1716,27 +1717,29 @@ export class SpApplication extends BaseElement {
     this.initSystemTraceEvents();
     this.filterConfig!.addEventListener('click', (ev) => {
       SpSystemTrace.isMouseLeftDown = false;
-      if (this!.hasAttribute('chart_filter')) {
-        this!.removeAttribute('chart_filter');
-        this.chartFilter!.setAttribute('hidden', '');
-      } else {
-        this!.removeAttribute('custom-color');
-        this.customColor!.setAttribute('hidden', '');
-        this.customColor!.cancelOperate();
-        this!.setAttribute('chart_filter', '');
-        this.chartFilter!.removeAttribute('hidden');
-      }
+      this.filterRowConfigClickHandle();
     });
     this.configClose!.addEventListener('click', (ev) => {
-      if (this.hasAttribute('chart_filter')) {
-        this!.removeAttribute('chart_filter');
-      }
+      this.filterRowConfigClickHandle();
     });
     this.cutTraceFile!.addEventListener('click', (ev) => {
       this.croppingFile(this.progressEL!, this.litSearch!);
     });
   }
 
+  private filterRowConfigClickHandle() {
+    if (this!.hasAttribute('chart_filter')) {
+      this!.removeAttribute('chart_filter');
+      this.chartFilter!.setAttribute('hidden', '');
+    } else {
+      this!.removeAttribute('custom-color');
+      this.customColor!.setAttribute('hidden', '');
+      this.customColor!.cancelOperate();
+      this!.setAttribute('chart_filter', '');
+      this.chartFilter!.removeAttribute('hidden');
+    }
+  }
+
   private initRecordEvents(): void {
     this.exportRecord?.addEventListener('click', () => {
       this.headerDiv!.style.pointerEvents = 'none';
@@ -1748,6 +1751,7 @@ export class SpApplication extends BaseElement {
   private initSearchChangeEvents(): void {
     let timer: any = null;
     this.litSearch!.valueChangeHandler = (value: string) => {
+      this.litSearch!.list = [];
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
         this.litSearch!.isClearValue = false;
diff --git a/ide/src/trace/SpApplicationPublicFunc.ts b/ide/src/trace/SpApplicationPublicFunc.ts
index aed1c479ff8914cb2868037f0d67ee82c9826f62..47f5a80913822536d064e45ecea8e78f304743ff 100644
--- a/ide/src/trace/SpApplicationPublicFunc.ts
+++ b/ide/src/trace/SpApplicationPublicFunc.ts
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 
-import {DbPool} from "./database/SqlLite";
-import {log} from "../log/Log";
+import { DbPool } from './database/SqlLite';
+import { log } from '../log/Log';
 
 export const applicationHtml: string = `
         <style>
@@ -180,10 +180,6 @@ export const applicationHtml: string = `
             font-size: 20px;
             color: var(--dark-color1,#47A7E0);
          }
-         .chart-filter {
-            visibility: hidden;
-            z-index: -1;
-        }
         :host([chart_filter]) .chart-filter {
             display: grid;
             grid-template-rows: min-content min-content min-content max-content auto;
@@ -363,9 +359,9 @@ export const applicationHtml: string = `
                 </sp-welcome>
                 <sp-system-trace style="visibility:hidden;z-index: 101;" id="sp-system-trace">
                 </sp-system-trace>
-                <sp-record-trace style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 102" id="sp-record-trace">
+                <sp-record-trace style="overflow:auto;width:100%;height:100%;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 102" id="sp-record-trace">
                 </sp-record-trace>
-                <sp-record-trace record_template='' style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 102" id="sp-record-template">
+                <sp-record-trace record_template='' style="overflow:auto;width:100%;height:100%;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 102" id="sp-record-template">
                 </sp-record-trace>
                 <sp-scheduling-analysis style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;" id="sp-scheduling-analysis"></sp-scheduling-analysis>
                 <sp-metrics style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;z-index: 105" id="sp-metrics">
@@ -436,10 +432,8 @@ export function postLog(filename: string, fileSize: string) {
     }),
   })
     .then((response) => response.json())
-    .then((data) => {
-    })
-    .catch((error) => {
-    });
+    .then((data) => {})
+    .catch((error) => {});
 }
 
 export function indexedDataToBufferData(sourceData: any): ArrayBuffer {
@@ -486,7 +480,7 @@ export function findFreeSizeAlgorithm(numbers: Array<number>, freeSize: number):
   return finalIndex;
 }
 
-export function getCurrentDataTime(): string[]{
+export function getCurrentDataTime(): string[] {
   let current = new Date();
   let year = '' + current.getFullYear();
   let month = ('0' + (current.getMonth() + 1)).slice(-2);
diff --git a/ide/src/trace/bean/BinderProcessThread.ts b/ide/src/trace/bean/BinderProcessThread.ts
index ce0c0bda7f613015f77151814bdbdfff6861c702..77601e39e31463dbe85731f8ed5d56c53bd709a0 100644
--- a/ide/src/trace/bean/BinderProcessThread.ts
+++ b/ide/src/trace/bean/BinderProcessThread.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,7 +13,7 @@
  * limitations under the License.
  */
 export interface BinderGroup {
-  title: string | null | undefined ;
+  title: string | null | undefined;
   totalCount: number;
   binderAsyncRcvCount?: number;
   binderReplyCount?: number;
@@ -44,7 +43,7 @@ export class CycleBinderItem {
 }
 
 export interface ThreadBinderItem {
-  title: string ;
+  title: string;
   tid: number;
   pid: number;
   totalCount: number;
@@ -53,7 +52,7 @@ export interface ThreadBinderItem {
 }
 
 export interface ProcessBinderItem {
-  title: string ;
+  title: string;
   pid: number;
   totalCount: number;
   type: string;
@@ -61,7 +60,7 @@ export interface ProcessBinderItem {
 }
 
 export interface DataSource {
-  xName: string ;
+  xName: string;
   yAverage: number;
 }
 
@@ -86,7 +85,7 @@ export class FuncNameCycle {
 }
 
 export interface BinderDataStruct {
-  name: string ;
+  name: string;
   value: number;
   dur: number;
   startNS: number;
@@ -95,7 +94,7 @@ export interface BinderDataStruct {
 }
 
 export interface BinderItem {
-  name: string ;
+  name: string;
   ts: number;
   dur: number;
   tid: number;
diff --git a/ide/src/trace/bean/BoxSelection.ts b/ide/src/trace/bean/BoxSelection.ts
index 4ab04f4f7ee124ce6b84cb62b1f27693de6e892a..3b19582972746b4a63a7c7df068c8052af9ea2ef 100644
--- a/ide/src/trace/bean/BoxSelection.ts
+++ b/ide/src/trace/bean/BoxSelection.ts
@@ -136,13 +136,13 @@ export class SelectionParam {
     if (it.rowType == TraceRow.ROW_TYPE_SAMPLE) {
       let dataList: SampleStruct[] = JSON.parse(JSON.stringify(it.dataList));
       if (dataList.length > 0) {
-        dataList.forEach(
-          SampleStruct => {
-            SampleStruct.property = SampleStruct.property!.filter((i : any) => 
-              ((i.begin! - i.startTs!) ?? 0) >= TraceRow.rangeSelectObject!.startNS! &&
-              ((i.end! - i.startTs!) ?? 0) <= TraceRow.rangeSelectObject!.endNS!)
-          }
-        )
+        dataList.forEach((SampleStruct) => {
+          SampleStruct.property = SampleStruct.property!.filter(
+            (i: any) =>
+              (i.begin! - i.startTs! ?? 0) >= TraceRow.rangeSelectObject!.startNS! &&
+              (i.end! - i.startTs! ?? 0) <= TraceRow.rangeSelectObject!.endNS!
+          );
+        });
         if (dataList[0].property!.length !== 0) {
           this.sampleData.push(...dataList);
         }
@@ -159,7 +159,7 @@ export class SelectionParam {
 
   pushCpuStateFilterIds(it: TraceRow<any>) {
     if (it.rowType === TraceRow.ROW_TYPE_CPU_STATE_ALL) {
-      it.childrenList.forEach(child => {
+      it.childrenList.forEach((child) => {
         child.rangeSelect = true;
         child.checkType = '2';
         this.pushCpuStateFilterIds(child);
@@ -175,7 +175,7 @@ export class SelectionParam {
 
   pushCpuFreqFilter(it: TraceRow<any>) {
     if (it.rowType === TraceRow.ROW_TYPE_CPU_FREQ_ALL) {
-      it.childrenList.forEach(child => {
+      it.childrenList.forEach((child) => {
         child.rangeSelect = true;
         child.checkType = '2';
         this.pushCpuFreqFilter(child);
@@ -195,7 +195,7 @@ export class SelectionParam {
 
   pushCpuFreqLimit(it: TraceRow<any>) {
     if (it.rowType === TraceRow.ROW_TYPE_CPU_FREQ_LIMITALL) {
-      it.childrenList.forEach(child => {
+      it.childrenList.forEach((child) => {
         child.rangeSelect = true;
         child.checkType = '2';
         this.pushCpuFreqLimit(child);
@@ -725,7 +725,7 @@ export class SelectionParam {
 
   pushIrq(it: TraceRow<any>) {
     if (it.rowType === TraceRow.ROW_TYPE_IRQ_GROUP) {
-      it.childrenList.forEach(child => {
+      it.childrenList.forEach((child) => {
         child.rangeSelect = true;
         child.checkType = '2';
         this.pushIrq(child);
@@ -942,7 +942,7 @@ export class SelectionParam {
 
   pushClock(it: TraceRow<any>, sp: SpSystemTrace) {
     if (it.rowType === TraceRow.ROW_TYPE_CLOCK_GROUP) {
-      it.childrenList.forEach(it => {
+      it.childrenList.forEach((it) => {
         it.rangeSelect = true;
         it.checkType = '2';
         this.clockMapData.set(it.rowId || '', it.getCacheData);
diff --git a/ide/src/trace/bean/FpsStruct.ts b/ide/src/trace/bean/FpsStruct.ts
index 06c6b9ef9d044595ee50d60fdb07b512ce616e46..9041aa277e4d99b496af44c4a90976314c03403b 100644
--- a/ide/src/trace/bean/FpsStruct.ts
+++ b/ide/src/trace/bean/FpsStruct.ts
@@ -86,4 +86,4 @@ export class FpsStruct extends BaseStruct {
     );
     fpsStruct.frame = rectangle;
   }
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/bean/FrameChartStruct.ts b/ide/src/trace/bean/FrameChartStruct.ts
index dd60ef44787b3ba21326aceecb16320756804aac..7ecbd793c2c45b190ecc84d9855aaa537b1a744c 100644
--- a/ide/src/trace/bean/FrameChartStruct.ts
+++ b/ide/src/trace/bean/FrameChartStruct.ts
@@ -42,6 +42,13 @@ export class ChartStruct extends BaseStruct {
   symbol: string = '';
   lib: string = '';
 
+  id?: string;
+  eventType?: string;
+  parentId?: string;
+  self?: string; // only perf
+  eventPercent?: string; // only perf
+  title?: string;
+
   size: number = 0; // 实际size
   count: number = 0; // 实际count
   eventCount: number = 0;
@@ -168,11 +175,18 @@ export function draw(canvasCtx: CanvasRenderingContext2D, node: ChartStruct): vo
     } else {
       canvasCtx.fillStyle = '#000';
     }
-    drawString(canvasCtx, node.symbol || '', 5, node.frame, node);
+    drawString(canvasCtx, splitSymbol(node), 5, node.frame, node);
   }
   node.isDraw = true;
 }
 
+function splitSymbol(node: ChartStruct): string {
+  if (node.depth === 0 || node.isProcess || node.isThread) {
+    return node.symbol;
+  }
+  return node.symbol.split(' (')[0];
+}
+
 /**
  * 火焰图颜色计算，根据每个node占总大小的百分比调整
  * @param widthPercentage 百分比
diff --git a/ide/src/trace/bean/GpufreqBean.ts b/ide/src/trace/bean/GpufreqBean.ts
index 8ba1ecfedd72654e198f9ba47a684fe72d61b03a..6b6648de1bf7149cf2b253f44edc45a9d3b123b9 100644
--- a/ide/src/trace/bean/GpufreqBean.ts
+++ b/ide/src/trace/bean/GpufreqBean.ts
@@ -73,7 +73,7 @@ export class CycleDataBean {
   startNS: number = 0;
   cycle: number = 0;
   name: string = '';
-  depth: number = 1
+  depth: number = 1;
   constructor(
     colorIndex: number,
     dur: number,
@@ -81,14 +81,15 @@ export class CycleDataBean {
     startNS: number,
     cycle: number,
     name: string,
-    depth: number) {
+    depth: number
+  ) {
     this.colorIndex = colorIndex;
     this.dur = dur;
     this.value = value;
     this.startNS = startNS;
     this.cycle = cycle;
     this.name = name;
-    this.depth = this.depth
+    this.depth = this.depth;
   }
 }
 
@@ -124,6 +125,6 @@ export class TreeDataStringBean {
     this.cycle = cycle;
     this.children = children;
     this.startNS = startNS;
-    this.status = status
+    this.status = status;
   }
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/bean/NativeHook.ts b/ide/src/trace/bean/NativeHook.ts
index 69e6e6065f183ef8d7d0e9e0ddf0154f0cc9fc5a..bb25f8c96dcc6f7aeeff74c24b27f16132d11298 100644
--- a/ide/src/trace/bean/NativeHook.ts
+++ b/ide/src/trace/bean/NativeHook.ts
@@ -137,11 +137,8 @@ export class NativeHookSampleQueryInfo {
 }
 
 export class NativeHookCallInfo extends ChartStruct {
-  id: string = '';
   pid: string | undefined;
-  library: string = '';
   symbolId: number = 0;
-  title: string = '';
   count: number = 0;
   countValue: string = '';
   countPercent: string = '';
diff --git a/ide/src/trace/bean/NumBean.ts b/ide/src/trace/bean/NumBean.ts
index cdf52dfe1511121e56ac2accac563b2ecd4eb799..99e531af794916917f7189508cc16d67dd1e16ee 100644
--- a/ide/src/trace/bean/NumBean.ts
+++ b/ide/src/trace/bean/NumBean.ts
@@ -32,4 +32,4 @@ export const NUM_600 = 600;
 export const NUM_1800 = 1800;
 export const NUM_3600 = 3600;
 export const NUM_16384 = 16384;
-export const NUM_MILLON= 1000_000;
+export const NUM_MILLON = 1000_000;
diff --git a/ide/src/trace/bean/SchedSwitchStruct.ts b/ide/src/trace/bean/SchedSwitchStruct.ts
index 4da9824e8465e928256dbfed942a891d7ceeaaeb..6ff14aba0c36a7a4fb04328ab2a91a675b23cbfa 100644
--- a/ide/src/trace/bean/SchedSwitchStruct.ts
+++ b/ide/src/trace/bean/SchedSwitchStruct.ts
@@ -59,7 +59,7 @@ export class SchedSwitchCountBean {
     this.value = value;
     this.level = level;
     this.colorIndex = colorIndex;
-    this.children = children
+    this.children = children;
   }
 }
 export class TreeSwitchConfig {
@@ -96,6 +96,5 @@ export class CutDataObjConfig {
   processTitle: string = '';
   threadTitle: string = '';
   threadCountTotal: number = 0;
-  threadDurTotal!: number | string
+  threadDurTotal!: number | string;
 }
-
diff --git a/ide/src/trace/bean/StateModle.ts b/ide/src/trace/bean/StateModle.ts
index a415964ce635ee0e7dfe01300216f58dacc750ef..5e0fbce1d0e96d72b33220406b5f26c135278fd7 100644
--- a/ide/src/trace/bean/StateModle.ts
+++ b/ide/src/trace/bean/StateModle.ts
@@ -13,37 +13,37 @@
  * limitations under the License.
  */
 export class StateGroup {
-    SleepingCount: number = 0;
-    RunningCount: number = 0;
-    RunnableCount: number = 0;
-    DCount: number = 0;
-    RunningDur: number = 0;
-    RunnableDur: number = 0;
-    SleepingDur: number = 0;
-    DDur: number = 0;
-    title?: string = '';
-    pid: number = 0;
-    tid: number = 0;
-    ts: number = 0;
-    dur?: number = 0;
-    type: string = '';
-    state?: string = '';
-    children?: Array<StateGroup>;
-    isSelected?: boolean = false;
-    totalCount?: number = 0;
-    cycleDur?: number;
-    cycle:number = 0;
-    id?:number;
-    cpu?:number = 0;
+  SleepingCount: number = 0;
+  RunningCount: number = 0;
+  RunnableCount: number = 0;
+  DCount: number = 0;
+  RunningDur: number = 0;
+  RunnableDur: number = 0;
+  SleepingDur: number = 0;
+  DDur: number = 0;
+  title?: string = '';
+  pid: number = 0;
+  tid: number = 0;
+  ts: number = 0;
+  dur?: number = 0;
+  type: string = '';
+  state?: string = '';
+  children?: Array<StateGroup>;
+  isSelected?: boolean = false;
+  totalCount?: number = 0;
+  cycleDur?: number;
+  cycle: number = 0;
+  id?: number;
+  cpu?: number = 0;
 }
 
 export class FuncNameCycle {
-    funcName: string = '';
-    cycleStartTime: number = 0;
-    cycleDur: number = 0;
-    startTime: number = 0;
-    endTime: number = 0;
-    id: number = 0;
-    tid: number = 0;
-    pid: number = 0;
-  }
\ No newline at end of file
+  funcName: string = '';
+  cycleStartTime: number = 0;
+  cycleDur: number = 0;
+  startTime: number = 0;
+  endTime: number = 0;
+  id: number = 0;
+  tid: number = 0;
+  pid: number = 0;
+}
diff --git a/ide/src/trace/bean/ThreadStruct.ts b/ide/src/trace/bean/ThreadStruct.ts
index c15900dfd835fa513901cc951426a7d6b7349ea0..d80b5a4eb597499d96207f950e5f380b970ac438 100644
--- a/ide/src/trace/bean/ThreadStruct.ts
+++ b/ide/src/trace/bean/ThreadStruct.ts
@@ -34,7 +34,7 @@ export class ThreadStruct extends BaseStruct {
   tid: number | undefined;
   upid: number | undefined;
   utid: number | undefined;
-  switchCount:number | undefined;
+  switchCount: number | undefined;
   cpu: number | undefined;
   dur: number | undefined;
   end_ts: number | undefined;
diff --git a/ide/src/trace/component/SpFlags.ts b/ide/src/trace/component/SpFlags.ts
index ea2855c451960d2e38420ca7b64188be6f9148af..3a2920f3f9dd869d15d13e9e9c7825665a9f9cad 100644
--- a/ide/src/trace/component/SpFlags.ts
+++ b/ide/src/trace/component/SpFlags.ts
@@ -57,7 +57,7 @@ export class SpFlags extends BaseElement {
     });
     configSelect.addEventListener('change', () => {
       let title = configSelect.getAttribute('title');
-      FlagsConfig.updateFlagsConfig(title!, configSelect.selectedOptions[0].value);    
+      FlagsConfig.updateFlagsConfig(title!, configSelect.selectedOptions[0].value);
       if (title === 'VSync' && configSelect.selectedOptions[0].value === 'Enabled') {
         let vsyncSelect = this.shadowRoot?.querySelector('#vsyncSelect');
         vsyncSelect?.removeAttribute('disabled');
@@ -129,9 +129,9 @@ export class SpFlags extends BaseElement {
         configDiv.appendChild(configFooterDiv);
       }
 
-      if(config.title === 'VSync'){  
-         let configFooterDiv = this.createVsyncOption();
-         configDiv.appendChild(configFooterDiv); 
+      if (config.title === 'VSync') {
+        let configFooterDiv = this.createVsyncOption();
+        configDiv.appendChild(configFooterDiv);
       }
 
       this.bodyEl!.appendChild(configDiv);
@@ -141,10 +141,10 @@ export class SpFlags extends BaseElement {
   private createVsyncOption(): HTMLDivElement {
     let configFooterDiv = document.createElement('div');
     configFooterDiv.className = 'config_footer';
-    let vsyncLableEl = document.createElement("lable");
+    let vsyncLableEl = document.createElement('lable');
     vsyncLableEl.className = 'vsync_lable';
-    let vsyncTypeEl = document.createElement("select");
-    vsyncTypeEl.setAttribute("id", "vsyncSelect");
+    let vsyncTypeEl = document.createElement('select');
+    vsyncTypeEl.setAttribute('id', 'vsyncSelect');
     vsyncTypeEl.className = 'flag-select';
     let vsyncGenOption = document.createElement('option'); // VsyncGeneratior = H:VsyncGenerator
     vsyncGenOption.value = 'H:VsyncGenerator';
@@ -239,6 +239,11 @@ export class FlagsConfig {
       switchOptions: [{ option: 'Enabled' }, { option: 'Disabled', selected: true }],
       describeContent: 'VSync Signal drawing',
     },
+    {
+      title: 'LTPO',
+      switchOptions: [{ option: 'Enabled' }, { option: 'Disabled', selected: true }],
+      describeContent: 'Lost Frame and HitchTime templates',
+    },
   ];
 
   static getAllFlagConfig(): Array<FlagConfigItem> {
diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts
index 2e0c51540af388804256f77e511d6d5fca0fcccf..b4b933cb2882b5c96cee87db970e1e53b4c461ae 100644
--- a/ide/src/trace/component/SpHelp.ts
+++ b/ide/src/trace/component/SpHelp.ts
@@ -18,7 +18,7 @@ import { LitMainMenuGroup } from '../../base-ui/menu/LitMainMenuGroup';
 import { LitMainMenu, MenuItem } from '../../base-ui/menu/LitMainMenu';
 import { LitMainMenuItem } from '../../base-ui/menu/LitMainMenuItem';
 import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil';
-import { eventDefinitions } from '../enums/helpDocEnums'
+import { eventDefinitions } from '../enums/helpDocEnums';
 
 @element('sp-help')
 export class SpHelp extends BaseElement {
@@ -80,10 +80,11 @@ export class SpHelp extends BaseElement {
 
   private itemHelpClick(urlParams: URLSearchParams, that: this) {
     if (urlParams.get('action')!.length > 4) {
-      let helpDocIndex = urlParams.get('action')!.substring(5)
+      let helpDocIndex = urlParams.get('action')!.substring(5);
       let helpDocDetail = this.getEventDefinitionByIndex(Number(helpDocIndex));
-      that.appContent!.innerHTML =
-        `<object type="text/html" data='/application/doc/${helpDocDetail!.name}.html?${that.dark}' width="100%" height="100%"></object>`;
+      that.appContent!.innerHTML = `<object type="text/html" data='/application/doc/${helpDocDetail!.name}.html?${
+        that.dark
+      }' width="100%" height="100%"></object>`;
     }
   }
 
@@ -136,9 +137,7 @@ export class SpHelp extends BaseElement {
         second: false,
         icon: 'caret-down',
         describe: '',
-        children: [
-          this.setupSmartPerfMenu(that),
-        ],
+        children: [this.setupSmartPerfMenu(that)],
       },
     ];
   }
@@ -155,21 +154,21 @@ export class SpHelp extends BaseElement {
           title: '设备端抓取trace说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'record', 'quickstart_device_record','1');
+            that.handleMemoryMenuItemClick(that, 'record', 'quickstart_device_record', '1');
           },
         },
         {
           title: 'web端抓取trace说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'online_record', 'quickstart_web_record','2');
+            that.handleMemoryMenuItemClick(that, 'online_record', 'quickstart_web_record', '2');
           },
         },
         {
           title: 'web端加载trace说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'load', 'quickstart_systemtrace','3');
+            that.handleMemoryMenuItemClick(that, 'load', 'quickstart_systemtrace', '3');
           },
         },
       ],
@@ -188,15 +187,15 @@ export class SpHelp extends BaseElement {
   }
   private setupOtherMenuItems(that: this): MenuItem[] {
     return [
-      this.createSubMenuItem('Sql分析和Metrics说明', 'sql', 'quickstart_sql_metrics', that,'17'),
-      this.createSubMenuItem('HiSystemEvent抓取和展示说明', 'hisys', 'quickstart_hisystemevent', that,'18'),
-      this.createSubMenuItem('sdk抓取和展示说明', 'sdk_record', 'quickstart_sdk', that,'19'),
-      this.createSubMenuItem('调用栈可视化和不同库函数调用占比说明', 'import_so', 'quickstart_Import_so', that,'20'),
-      this.createSubMenuItem('Hilog抓取和展示说明', 'hilog', 'quickstart_hilog', that,'21'),
-      this.createSubMenuItem('Ability Monitor抓取和展示说明', 'ability', 'quickstart_ability_monitor', that,'22'),
-      this.createSubMenuItem('Trace解析能力增强', 'trace_parsing', 'quickstart_parsing_ability', that,'23'),
-      this.createSubMenuItem('应用操作技巧', 'operation_skills', 'quickstart_Application_operation_skills', that,'24'),
-      this.createSubMenuItem('快捷键说明', 'keywords_shortcuts', 'quickstart_keywords_shortcuts', that,'25'),
+      this.createSubMenuItem('Sql分析和Metrics说明', 'sql', 'quickstart_sql_metrics', that, '17'),
+      this.createSubMenuItem('HiSystemEvent抓取和展示说明', 'hisys', 'quickstart_hisystemevent', that, '18'),
+      this.createSubMenuItem('sdk抓取和展示说明', 'sdk_record', 'quickstart_sdk', that, '19'),
+      this.createSubMenuItem('调用栈可视化和不同库函数调用占比说明', 'import_so', 'quickstart_Import_so', that, '20'),
+      this.createSubMenuItem('Hilog抓取和展示说明', 'hilog', 'quickstart_hilog', that, '21'),
+      this.createSubMenuItem('Ability Monitor抓取和展示说明', 'ability', 'quickstart_ability_monitor', that, '22'),
+      this.createSubMenuItem('Trace解析能力增强', 'trace_parsing', 'quickstart_parsing_ability', that, '23'),
+      this.createSubMenuItem('应用操作技巧', 'operation_skills', 'quickstart_Application_operation_skills', that, '24'),
+      this.createSubMenuItem('快捷键说明', 'keywords_shortcuts', 'quickstart_keywords_shortcuts', that, '25'),
     ];
   }
 
@@ -210,7 +209,6 @@ export class SpHelp extends BaseElement {
     };
   }
 
-
   private setupMemoryMenu(that: this) {
     return {
       collapsed: false,
@@ -223,54 +221,53 @@ export class SpHelp extends BaseElement {
           title: 'Js Memory抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'js_memory', 'quickstart_Js_memory','4');
+            that.handleMemoryMenuItemClick(that, 'js_memory', 'quickstart_Js_memory', '4');
           },
         },
         {
           title: 'Native Memory抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'native', 'quickstart_native_memory','5');
+            that.handleMemoryMenuItemClick(that, 'native', 'quickstart_native_memory', '5');
           },
         },
         {
           title: '页内存抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'virtual_memory', 'quickstart_page_fault','6');
+            that.handleMemoryMenuItemClick(that, 'virtual_memory', 'quickstart_page_fault', '6');
           },
         },
         {
           title: '系统内存抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'memory_template', 'quickstart_memory_template','7');
+            that.handleMemoryMenuItemClick(that, 'memory_template', 'quickstart_memory_template', '7');
           },
         },
       ],
     };
   }
 
-  private handleMemoryMenuItemClick(that: this, event: string, docName: string,index?: string): void {
+  private handleMemoryMenuItemClick(that: this, event: string, docName: string, index?: string): void {
     SpStatisticsHttpUtil.addOrdinaryVisitAction({
       event: event,
       action: 'help_doc',
     });
-    that.appContent!.innerHTML =
-      `<object type="text/html" data='/application/doc/${docName}.html?${that.dark}' width="100%" height="100%"></object>`;
-      this.changeItemURL(index!);
+    that.appContent!.innerHTML = `<object type="text/html" data='/application/doc/${docName}.html?${that.dark}' width="100%" height="100%"></object>`;
+    this.changeItemURL(index!);
   }
 
   private changeItemURL(index: string) {
     let url = new URL(window.location.href);
-    let actionParam = url.searchParams.get("action");
-    let newActionValue = `help_${index}`; 
+    let actionParam = url.searchParams.get('action');
+    let newActionValue = `help_${index}`;
     if (actionParam) {
-      url.searchParams.set("action", newActionValue);
+      url.searchParams.set('action', newActionValue);
       let newURL = url.href;
-      history.pushState({}, "", newURL);
+      history.pushState({}, '', newURL);
     } else {
-      history.pushState({}, "", window.location.origin + window.location.pathname);
+      history.pushState({}, '', window.location.origin + window.location.pathname);
     }
   }
 
@@ -286,11 +283,11 @@ export class SpHelp extends BaseElement {
           title: 'HiPerf的抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'perf', 'quickstart_hiperf','8');
+            that.handleMemoryMenuItemClick(that, 'perf', 'quickstart_hiperf', '8');
           },
         },
       ],
-    }
+    };
   }
 
   private setupTsMenu(that: this) {
@@ -305,11 +302,11 @@ export class SpHelp extends BaseElement {
           title: 'Cpuprofiler抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'arkts', 'quickstart_arkts','9');
+            that.handleMemoryMenuItemClick(that, 'arkts', 'quickstart_arkts', '9');
           },
         },
       ],
-    }
+    };
   }
 
   private setupAnalysisTemplateMenu(that: this) {
@@ -324,39 +321,39 @@ export class SpHelp extends BaseElement {
           title: 'Frame timeline抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'frame_record', 'quickstart_Frametimeline','10');
+            that.handleMemoryMenuItemClick(that, 'frame_record', 'quickstart_Frametimeline', '10');
           },
         },
         {
           title: 'Animation的抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'animation', 'quickstart_animation','11');
+            that.handleMemoryMenuItemClick(that, 'animation', 'quickstart_animation', '11');
           },
         },
         {
           title: 'TaskPool抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'taskpool', 'quickstart_taskpool','12');
+            that.handleMemoryMenuItemClick(that, 'taskpool', 'quickstart_taskpool', '12');
           },
         },
         {
           title: 'App startup的抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'app_startup', 'quickstart_app_startup','13');
+            that.handleMemoryMenuItemClick(that, 'app_startup', 'quickstart_app_startup', '13');
           },
         },
         {
           title: 'Scheduling analysis抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'scheduling_record', 'quickstart_schedulinganalysis','14');
+            that.handleMemoryMenuItemClick(that, 'scheduling_record', 'quickstart_schedulinganalysis', '14');
           },
         },
       ],
-    }
+    };
   }
 
   private setupFileMenu(that: this) {
@@ -371,18 +368,18 @@ export class SpHelp extends BaseElement {
           title: 'FileSystem抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'file_system', 'quickstart_filesystem','15');
+            that.handleMemoryMenuItemClick(that, 'file_system', 'quickstart_filesystem', '15');
           },
         },
         {
           title: 'Bio抓取和展示说明',
           icon: '',
           clickHandler: function (item: MenuItem) {
-            that.handleMemoryMenuItemClick(that, 'bio', 'quickstart_bio','16');
+            that.handleMemoryMenuItemClick(that, 'bio', 'quickstart_bio', '16');
           },
         },
       ],
-    }
+    };
   }
 
   private setupDatabaseMenu(that: this) {
@@ -390,7 +387,7 @@ export class SpHelp extends BaseElement {
       title: 'TraceStreamer数据库说明',
       icon: '',
       clickHandler: function (item: MenuItem) {
-        that.handleMemoryMenuItemClick(that, 'trace_streamer_explain', 'des_tables','26');
+        that.handleMemoryMenuItemClick(that, 'trace_streamer_explain', 'des_tables', '26');
       },
     };
   }
@@ -432,7 +429,7 @@ export class SpHelp extends BaseElement {
       clickHandler: function (item: MenuItem) {
         that.handleMemoryMenuItemClick(that, 'support_event', 'des_support_event');
       },
-    }
+    };
   }
 
   private setupToolDescriptionMenu(that: this) {
diff --git a/ide/src/trace/component/SpInfoAndStas.html.ts b/ide/src/trace/component/SpInfoAndStas.html.ts
index c6664aa8f19f1bcc7d07f85b7122e7c2d4e85e17..cfc018d1ee7bf2b3f7607889546673c64742dc33 100644
--- a/ide/src/trace/component/SpInfoAndStas.html.ts
+++ b/ide/src/trace/component/SpInfoAndStas.html.ts
@@ -130,4 +130,4 @@ p{
         </div>
     </div>
 </div>
-`
+`;
diff --git a/ide/src/trace/component/SpKeyboard.ts b/ide/src/trace/component/SpKeyboard.ts
index 5cacda5b568292b5bfa904652e84a22abb097300..1e00e0c6e8ec15be2ad6a18e7203ab69548bb7eb 100644
--- a/ide/src/trace/component/SpKeyboard.ts
+++ b/ide/src/trace/component/SpKeyboard.ts
@@ -24,7 +24,7 @@ export class SpKeyboard extends BaseElement {
     parentElement.style.overflow = 'hidden';
     let closeWindow = this.shadowRoot?.querySelector('.close-icon');
     let keyboardDiv = document
-    .querySelector('body > sp-application')!
+      .querySelector('body > sp-application')!
       .shadowRoot!.querySelector<SpKeyboard>('#sp-keyboard')!;
     let shadow_box = this.shadowRoot?.querySelector('.shadow-box')!;
     closeWindow!.addEventListener('click', () => {
diff --git a/ide/src/trace/component/SpMetrics.html.ts b/ide/src/trace/component/SpMetrics.html.ts
index ad6ef40cccf0c3c0d250ca8f25686dd8a45ae40d..6e63281889fe252282a0cbe4accd608afc7952b4 100644
--- a/ide/src/trace/component/SpMetrics.html.ts
+++ b/ide/src/trace/component/SpMetrics.html.ts
@@ -142,4 +142,4 @@ p{
          </textarea>
     </div>
 </div>
-`
+`;
diff --git a/ide/src/trace/component/SpQuerySQL.html.ts b/ide/src/trace/component/SpQuerySQL.html.ts
index b6960db7eecddead6580e61e3939a2b88a237bd1..8bcd6dc0fd4f23afd2076e3b984b1b030e5465b7 100644
--- a/ide/src/trace/component/SpQuerySQL.html.ts
+++ b/ide/src/trace/component/SpQuerySQL.html.ts
@@ -194,4 +194,4 @@ lit-icon {
       <div class="query-sql">
         <div id="sqlList"></div>
       </div>
-`
+`;
diff --git a/ide/src/trace/component/SpQuerySQL.ts b/ide/src/trace/component/SpQuerySQL.ts
index c7de41d1f7f1ebf4664339bb3e3c6731f7cd68b1..824e1c2ecab2a2b822182ffaa8433833de8751df 100644
--- a/ide/src/trace/component/SpQuerySQL.ts
+++ b/ide/src/trace/component/SpQuerySQL.ts
@@ -24,7 +24,7 @@ import { PaginationBox } from '../../base-ui/chart/pagenation/PaginationBox';
 import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil';
 import { getAllSql } from './trace/base/CommonSql';
 import { LitIcon } from '../../base-ui/icon/LitIcon';
-import {queryCustomizeSelect} from "../database/sql/SqlLite.sql";
+import { queryCustomizeSelect } from '../database/sql/SqlLite.sql';
 import { SpQuerySQLHtml } from './SpQuerySQL.html';
 
 @element('sp-query-sql')
diff --git a/ide/src/trace/component/SpRecordConfigModel.ts b/ide/src/trace/component/SpRecordConfigModel.ts
index acd23429f55f25da54f7ee0149b18f099898418a..ca35178d8979d4d0a556d590d7f30db7fcb19a17 100644
--- a/ide/src/trace/component/SpRecordConfigModel.ts
+++ b/ide/src/trace/component/SpRecordConfigModel.ts
@@ -16,8 +16,12 @@
 import {
   ArkTSConfig,
   CreateSessionRequest,
-  FpsConfig, HiebpfConfig, HilogConfig,
-  HiperfPluginConfig, HiSystemEventConfig, levelFromJSON,
+  FpsConfig,
+  HiebpfConfig,
+  HilogConfig,
+  HiperfPluginConfig,
+  HiSystemEventConfig,
+  levelFromJSON,
   MemoryConfig,
   NativeHookConfig,
   ProfilerPluginConfig,
@@ -27,12 +31,12 @@ import {
   ProfilerSessionConfigMode,
   sysMeminfoTypeFromJSON,
   sysVMeminfoTypeFromJSON,
-  TracePluginConfig
+  TracePluginConfig,
 } from './setting/bean/ProfilerServiceTypes';
-import {SpRecordSetting} from './setting/SpRecordSetting';
-import {SpVmTracker} from './setting/SpVmTracker';
-import {SpProbesConfig} from './setting/SpProbesConfig';
-import {info} from '../../log/Log';
+import { SpRecordSetting } from './setting/SpRecordSetting';
+import { SpVmTracker } from './setting/SpVmTracker';
+import { SpProbesConfig } from './setting/SpProbesConfig';
+import { info } from '../../log/Log';
 import { SpAllocations } from './setting/SpAllocations';
 import { SpApplication } from '../SpApplication';
 import { PerfConfig, SpRecordPerf } from './setting/SpRecordPerf';
@@ -341,7 +345,7 @@ export function createMemoryPluginConfig(
   spVmTracker: SpVmTracker,
   probesConfig: SpProbesConfig,
   request: CreateSessionRequest
-):void {
+): void {
   let hasSamp = spVmTracker!.startSamp && spVmTracker!.process !== '';
   if (probesConfig!.memoryConfig.length > 0 || hasMonitorMemory || hasSamp) {
     let memoryConfig = initMemoryPluginConfig(hasSamp, spVmTracker, probesConfig);
@@ -382,7 +386,7 @@ export function createMemoryPluginConfig(
 function initMemoryPluginConfig(
   hasSamp: boolean,
   spVmTracker: SpVmTracker,
-  probesConfig: SpProbesConfig,
+  probesConfig: SpProbesConfig
 ): MemoryConfig {
   let memoryConfig: MemoryConfig = {
     reportProcessTree: false,
@@ -418,14 +422,8 @@ function initMemoryPluginConfig(
   return memoryConfig;
 }
 
-export function createHTracePluginConfig(
-  probesConfig: SpProbesConfig,
-  request: CreateSessionRequest
-): void {
-  if (
-      probesConfig!.traceConfig.length > 0 &&
-      probesConfig!.traceConfig.find((value) => value !== 'FPS'))
-  {
+export function createHTracePluginConfig(probesConfig: SpProbesConfig, request: CreateSessionRequest): void {
+  if (probesConfig!.traceConfig.length > 0 && probesConfig!.traceConfig.find((value) => value !== 'FPS')) {
     let tracePluginConfig: TracePluginConfig = {
       ftraceEvents: createTraceEvents(probesConfig!.traceConfig),
       hitraceCategories: [],
@@ -451,10 +449,7 @@ export function createHTracePluginConfig(
   }
 }
 
-export function createFpsPluginConfig(
-  probesConfig: SpProbesConfig,
-  request: CreateSessionRequest
-): void {
+export function createFpsPluginConfig(probesConfig: SpProbesConfig, request: CreateSessionRequest): void {
   let fpsConfig: FpsConfig = {
     reportFps: true,
   };
@@ -467,10 +462,7 @@ export function createFpsPluginConfig(
   }
 }
 
-export function createMonitorPlugin(
-  probesConfig: SpProbesConfig,
-  request: CreateSessionRequest
-): void {
+export function createMonitorPlugin(probesConfig: SpProbesConfig, request: CreateSessionRequest): void {
   hasMonitorMemory = probesConfig.recordAbility;
   if (!probesConfig.recordAbility) {
     return;
@@ -532,8 +524,12 @@ export function createNativePluginConfig(
         nativeConfig.responseLibraryMode = spAllocations!.response_lib_mode;
         maxProcessSize = 8;
       }
-      if (spAllocations!.sample_interval) {
-        nativeConfig.sampleInterval = spAllocations!.sample_interval;
+      if (spAllocations && spAllocations.sample_interval) {
+        if (spAllocations.record_statistics) {
+          nativeConfig.sampleInterval = spAllocations.sample_interval;
+        } else {
+          nativeConfig.mallocFreeMatchingInterval = spAllocations.sample_interval;
+        }
       }
       nativeConfig.jsStackReport = spAllocations!.recordJsStack;
       if (spAllocations!.recordJsStack) {
@@ -552,10 +548,7 @@ export function createNativePluginConfig(
   }
 }
 
-function initNativePluginConfig(
-  spAllocations: SpAllocations,
-  selectVersion: string | null,
-): NativeHookConfig {
+function initNativePluginConfig(spAllocations: SpAllocations, selectVersion: string | null): NativeHookConfig {
   let appProcess = spAllocations!.appProcess;
   let processName = '';
   let processId = '';
@@ -603,11 +596,8 @@ function initNativePluginConfig(
   return nativeConfig;
 }
 
-function initHiPerfConfig(
-  perfConfig: PerfConfig | undefined,
-  recordArgs: string
-): string{
-  if (!perfConfig){
+function initHiPerfConfig(perfConfig: PerfConfig | undefined, recordArgs: string): string {
+  if (!perfConfig) {
     return '';
   }
   if (perfConfig.cpu && !perfConfig.cpu.includes('ALL') && perfConfig.cpu.length > 0) {
@@ -741,10 +731,7 @@ export function createSystemConfig(
   });
 }
 
-export function createSdkConfig(
-  spSdkConfig: SpSdkConfig,
-  request: CreateSessionRequest
-): void {
+export function createSdkConfig(spSdkConfig: SpSdkConfig, request: CreateSessionRequest): void {
   if (spSdkConfig.startSamp && spSdkConfig.getPlugName() !== '') {
     let gpuConfig = spSdkConfig!.getGpuConfig();
     request.pluginConfigs.push({
@@ -756,10 +743,7 @@ export function createSdkConfig(
   return;
 }
 
-export function createHiSystemEventPluginConfig(
-  spHiSysEvent: SpHisysEvent,
-  request: CreateSessionRequest
-): void {
+export function createHiSystemEventPluginConfig(spHiSysEvent: SpHisysEvent, request: CreateSessionRequest): void {
   if (!spHiSysEvent.startSamp) {
     return;
   }
diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts
index 808bc6732e0d6038d64d5d92a6bccf2adb2dbdce..bde02a297e27c6895eec42aa799513ff2597d568 100644
--- a/ide/src/trace/component/SpRecordTrace.ts
+++ b/ide/src/trace/component/SpRecordTrace.ts
@@ -26,9 +26,7 @@ import { FlagsConfig } from './SpFlags';
 import LitSwitch from '../../base-ui/switch/lit-switch';
 import { LitSlider } from '../../base-ui/slider/LitSlider';
 
-import {
-  CreateSessionRequest
-} from './setting/bean/ProfilerServiceTypes';
+import { CreateSessionRequest } from './setting/bean/ProfilerServiceTypes';
 import { PluginConvertUtils } from './setting/utils/PluginConvertUtils';
 import { SpAllocations } from './setting/SpAllocations';
 import { SpRecordPerf } from './setting/SpRecordPerf';
@@ -66,7 +64,8 @@ import {
 } from './SpRecordConfigModel';
 import { SpRecordTraceHtml } from './SpRecordTrace.html';
 
-const DEVICE_NOT_CONNECT = '设备未连接，请使用系统管理员权限打开cmd窗口，并执行hdc kill,然后重新添加设备。若还没有效果，请重新插拔一下手机。'
+const DEVICE_NOT_CONNECT =
+  '设备未连接，请使用系统管理员权限打开cmd窗口，并执行hdc kill,然后重新添加设备。若还没有效果，请重新插拔一下手机。';
 
 @element('sp-record-trace')
 export class SpRecordTrace extends BaseElement {
@@ -74,7 +73,7 @@ export class SpRecordTrace extends BaseElement {
   public static selectVersion: string | null;
   public static isVscode = false;
   public static cancelRecord = false;
-  static supportVersions = ['3.2', '4.0+','5.0+'];
+  static supportVersions = ['3.2', '4.0+', '5.0+'];
   public deviceSelect: HTMLSelectElement | undefined;
   public deviceVersion: HTMLSelectElement | undefined;
   private _menuItems: Array<MenuItem> | undefined;
@@ -199,12 +198,12 @@ export class SpRecordTrace extends BaseElement {
               this.refreshDeviceVersion(option);
             }
           }
-        };
-        if(!optionNum){
+        }
+        if (!optionNum) {
           this.deviceSelect!.style!.border = '2px solid red';
           setTimeout(() => {
             this.deviceSelect!.style!.border = '1px solid #4D4D4D';
-          },3000);
+          }, 3000);
           this.recordButton!.hidden = true;
           this.disconnectButton!.hidden = true;
           this.devicePrompt!.innerText = 'Device not connected';
@@ -283,8 +282,8 @@ export class SpRecordTrace extends BaseElement {
       return '3.2';
     } else if (version.indexOf('4.') !== -1) {
       return '4.0+';
-    }else if (version.indexOf('5.') !== -1) {
-      return '5.0+'
+    } else if (version.indexOf('5.') !== -1) {
+      return '5.0+';
     }
     return '3.2';
   }
@@ -360,7 +359,7 @@ export class SpRecordTrace extends BaseElement {
       parentElement.style.overflow = 'hidden';
     }
     this.sp = document.querySelector('sp-application') as SpApplication;
-    if (!this.shadowRoot || !this.sp){
+    if (!this.shadowRoot || !this.sp) {
       return;
     }
     this.initConfigPage();
@@ -386,11 +385,11 @@ export class SpRecordTrace extends BaseElement {
     if (this.deviceSelect.options && this.deviceSelect.options.length > 0) {
       this.disconnectButton!.hidden = false;
       this.recordButton.hidden = false;
-      this.devicePrompt.innerText = ''; 
+      this.devicePrompt.innerText = '';
     } else {
       this.disconnectButton!.hidden = true;
       this.recordButton.hidden = true;
-      this.devicePrompt.innerText = 'Device not connected'; 
+      this.devicePrompt.innerText = 'Device not connected';
     }
   }
 
@@ -658,15 +657,13 @@ export class SpRecordTrace extends BaseElement {
     this.cancelButtonShow(false);
     if (this.vs) {
       let cmd = Cmd.formatString(CmdConstant.CMS_HDC_STOP, [SpRecordTrace.serialNumber]);
-      Cmd.execHdcCmd(cmd, (): void => {
-      });
+      Cmd.execHdcCmd(cmd, (): void => {});
     } else {
       let selectedOption = this.deviceSelect!.options[this.deviceSelect!.selectedIndex] as HTMLOptionElement;
       HdcDeviceManager.connect(selectedOption.value).then((result) => {
         if (result) {
           try {
-            HdcDeviceManager.shellResultAsString(CmdConstant.CMS_STOP, true).then((): void => {
-            });
+            HdcDeviceManager.shellResultAsString(CmdConstant.CMS_STOP, true).then((): void => {});
           } catch (exception) {
             this.recordButtonDisable(false);
             log(exception);
@@ -707,8 +704,7 @@ export class SpRecordTrace extends BaseElement {
             this.deviceSelect!.style.pointerEvents = 'auto';
             this.deviceVersion!.style.pointerEvents = 'auto';
             SpRecordTrace.cancelRecord = true;
-            HdcDeviceManager.stopHiprofiler(CmdConstant.CMS_CANCEL).then((): void => {
-            });
+            HdcDeviceManager.stopHiprofiler(CmdConstant.CMS_CANCEL).then((): void => {});
           } catch (exception) {
             log(exception);
           }
@@ -778,7 +774,8 @@ export class SpRecordTrace extends BaseElement {
     let recordModeSwitch = recordTrace.probesConfig?.shadowRoot?.querySelector('lit-switch') as LitSwitch;
     let checkDesBoxDis = recordTrace.probesConfig?.shadowRoot?.querySelectorAll('check-des-box');
     let litCheckBoxDis = recordTrace.probesConfig?.shadowRoot?.querySelectorAll('lit-check-box');
-    recordTrace.ftraceSlider = recordTrace.probesConfig?.shadowRoot?.querySelector<LitSlider>('#ftrace-buff-size-slider');
+    recordTrace.ftraceSlider =
+      recordTrace.probesConfig?.shadowRoot?.querySelector<LitSlider>('#ftrace-buff-size-slider');
     startNativeSwitch.addEventListener('change', (event: any): void => {
       let detail = event.detail;
       if (detail!.checked) {
@@ -850,7 +847,7 @@ export class SpRecordTrace extends BaseElement {
       this.buildMenuItem('HiSystemEvent', 'externaltools', this.spHiSysEvent!),
       this.buildMenuItem('Ark Ts', 'file-config', this.spArkTs!),
       this.buildMenuItem('Hilog', 'realIntentionBulb', this.spHiLog!),
-      this.buildMenuItem('SDK Config', 'file-config', this.spSdkConfig!)
+      this.buildMenuItem('SDK Config', 'file-config', this.spSdkConfig!),
     ];
   }
 
@@ -862,8 +859,7 @@ export class SpRecordTrace extends BaseElement {
       let option = this.deviceSelect!.children[index] as HTMLOptionElement;
       if (option.value === disConnectDevice.serialNumber) {
         let optValue = option.value;
-        HdcDeviceManager.disConnect(optValue).then(() => {
-        });
+        HdcDeviceManager.disConnect(optValue).then(() => {});
         this.deviceSelect!.removeChild(option);
         if (SpRecordTrace.serialNumber === optValue) {
           if (this.nowChildItem === this.spWebShell) {
@@ -915,7 +911,7 @@ export class SpRecordTrace extends BaseElement {
                 this.cancelButtonShow(false);
                 this.freshMenuDisable(false);
                 this.freshConfigMenuDisable(false);
-                fileHandler({detail: file});
+                fileHandler({ detail: file });
               } else {
                 SpRecordTrace.cancelRecord = false;
               }
@@ -995,7 +991,7 @@ export class SpRecordTrace extends BaseElement {
     let request = this.makeRequest();
     this.showHint = true;
     if (request.pluginConfigs.length === 0) {
-      this.hintEl!.textContent = 'It looks like you didn\'t add any probes. Please add at least one';
+      this.hintEl!.textContent = "It looks like you didn't add any probes. Please add at least one";
       return;
     }
     this.showHint = false;
@@ -1189,7 +1185,7 @@ export class SpRecordTrace extends BaseElement {
     let chunks = Math.ceil(buffer.byteLength / indexDBMaxSize);
     let offset = 0;
     let sliceLen = 0;
-    let message = {fileType: '', startIndex: 0, endIndex: 0, size: 0};
+    let message = { fileType: '', startIndex: 0, endIndex: 0, size: 0 };
     for (let chunkIndex = 0; chunkIndex < chunks; chunkIndex++) {
       let start = chunkIndex * indexDBMaxSize;
       let end = Math.min(start + indexDBMaxSize, buffer.byteLength);
@@ -1200,7 +1196,7 @@ export class SpRecordTrace extends BaseElement {
       }
       sliceLen = Math.min(buffer.byteLength - offset, indexDBMaxSize);
       if (chunkIndex === 0 && fileType === 'trace') {
-        this.sp!.longTraceHeadMessageList.push({ pageNum: pageNumber, data: buffer.slice(offset, kbSize)});
+        this.sp!.longTraceHeadMessageList.push({ pageNum: pageNumber, data: buffer.slice(offset, kbSize) });
       }
       this.sp!.longTraceDataList.push({
         index: chunkIndex,
@@ -1228,12 +1224,15 @@ export class SpRecordTrace extends BaseElement {
     }
   }
 
-  private longTraceFileMapHandler(pageNumber: number, message: {
-    fileType: string,
-    startIndex: number,
-    endIndex: number,
-    size: number,
-  }): void {
+  private longTraceFileMapHandler(
+    pageNumber: number,
+    message: {
+      fileType: string;
+      startIndex: number;
+      endIndex: number;
+      size: number;
+    }
+  ): void {
     if (this.sp!.longTraceTypeMessageMap) {
       if (this.sp!.longTraceTypeMessageMap?.has(pageNumber)) {
         let oldTypeList = this.sp!.longTraceTypeMessageMap?.get(pageNumber);
diff --git a/ide/src/trace/component/SpSystemTrace.event.ts b/ide/src/trace/component/SpSystemTrace.event.ts
index 1b275f6d275dc4ed30d30e985238d92387bc7c43..2e6faa6a0a69ef621b32714a350c489c975bc97f 100644
--- a/ide/src/trace/component/SpSystemTrace.event.ts
+++ b/ide/src/trace/component/SpSystemTrace.event.ts
@@ -13,36 +13,38 @@
  * limitations under the License.
  */
 
-import { SpSystemTrace } from "./SpSystemTrace";
-import { ThreadStruct, ThreadStructOnClick } from "../database/ui-worker/ProcedureWorkerThread";
-import { TraceRow } from "./trace/base/TraceRow";
-import { JankStruct, JankStructOnClick } from "../database/ui-worker/ProcedureWorkerJank";
-import { HeapSnapshotStruct, HeapSnapshotStructOnClick } from "../database/ui-worker/ProcedureWorkerHeapSnapshot";
-import { FuncStructOnClick } from "../database/ui-worker/ProcedureWorkerFunc";
-import { CpuFreqStructOnClick } from "../database/ui-worker/ProcedureWorkerFreq";
-import { ClockStructOnClick } from "../database/ui-worker/ProcedureWorkerClock";
-import { SnapshotStructOnClick } from "../database/ui-worker/ProcedureWorkerSnapshot";
-import { IrqStructOnClick } from "../database/ui-worker/ProcedureWorkerIrq";
-import { HeapStructOnClick } from "../database/ui-worker/ProcedureWorkerHeap";
-import { JsCpuProfilerStructOnClick } from "../database/ui-worker/ProcedureWorkerCpuProfiler";
-import { AppStartupStructOnClick } from "../database/ui-worker/ProcedureWorkerAppStartup";
-import { AllAppStartupStructOnClick } from "../database/ui-worker/ProcedureWorkerAllAppStartup";
-import { SoStructOnClick } from "../database/ui-worker/ProcedureWorkerSoInit";
-import { FrameAnimationStructOnClick } from "../database/ui-worker/ProcedureWorkerFrameAnimation";
-import { FrameDynamicStructOnClick } from "../database/ui-worker/ProcedureWorkerFrameDynamic";
-import { FrameSpacingStructOnClick } from "../database/ui-worker/ProcedureWorkerFrameSpacing";
-import { sampleStructOnClick } from "../database/ui-worker/ProcedureWorkerBpftrace";
-import { SportRuler } from "./trace/timer-shaft/SportRuler";
-import { SpStatisticsHttpUtil } from "../../statistics/util/SpStatisticsHttpUtil";
-import { LitSearch } from "./trace/search/Search";
-import { TabPaneCurrent } from "./trace/sheet/TabPaneCurrent";
-import type { SpKeyboard } from "./SpKeyboard";
-import { enableVSync } from "./chart/VSync";
-import { CpuStruct, CpuStructOnClick } from "../database/ui-worker/cpu/ProcedureWorkerCPU";
-import { CpuStateStructOnClick } from "../database/ui-worker/cpu/ProcedureWorkerCpuState";
-import { CpuFreqLimitsStructOnClick } from "../database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits";
-import { FlagsConfig } from "./SpFlags";
-import { LitMainMenu } from "../../base-ui/menu/LitMainMenu";
+import { SpSystemTrace } from './SpSystemTrace';
+import { ThreadStruct, ThreadStructOnClick } from '../database/ui-worker/ProcedureWorkerThread';
+import { TraceRow } from './trace/base/TraceRow';
+import { JankStruct, JankStructOnClick } from '../database/ui-worker/ProcedureWorkerJank';
+import { HeapSnapshotStruct, HeapSnapshotStructOnClick } from '../database/ui-worker/ProcedureWorkerHeapSnapshot';
+import { FuncStructOnClick } from '../database/ui-worker/ProcedureWorkerFunc';
+import { CpuFreqStructOnClick } from '../database/ui-worker/ProcedureWorkerFreq';
+import { ClockStructOnClick } from '../database/ui-worker/ProcedureWorkerClock';
+import { SnapshotStructOnClick } from '../database/ui-worker/ProcedureWorkerSnapshot';
+import { IrqStructOnClick } from '../database/ui-worker/ProcedureWorkerIrq';
+import { HeapStructOnClick } from '../database/ui-worker/ProcedureWorkerHeap';
+import { JsCpuProfilerStructOnClick } from '../database/ui-worker/ProcedureWorkerCpuProfiler';
+import { AppStartupStructOnClick } from '../database/ui-worker/ProcedureWorkerAppStartup';
+import { AllAppStartupStructOnClick } from '../database/ui-worker/ProcedureWorkerAllAppStartup';
+import { SoStructOnClick } from '../database/ui-worker/ProcedureWorkerSoInit';
+import { FrameAnimationStructOnClick } from '../database/ui-worker/ProcedureWorkerFrameAnimation';
+import { FrameDynamicStructOnClick } from '../database/ui-worker/ProcedureWorkerFrameDynamic';
+import { FrameSpacingStructOnClick } from '../database/ui-worker/ProcedureWorkerFrameSpacing';
+import { sampleStructOnClick } from '../database/ui-worker/ProcedureWorkerBpftrace';
+import { SportRuler } from './trace/timer-shaft/SportRuler';
+import { SpStatisticsHttpUtil } from '../../statistics/util/SpStatisticsHttpUtil';
+import { LitSearch } from './trace/search/Search';
+import { TabPaneCurrent } from './trace/sheet/TabPaneCurrent';
+import type { SpKeyboard } from './SpKeyboard';
+import { enableVSync } from './chart/VSync';
+import { CpuStruct, CpuStructOnClick } from '../database/ui-worker/cpu/ProcedureWorkerCPU';
+import { CpuStateStructOnClick } from '../database/ui-worker/cpu/ProcedureWorkerCpuState';
+import { CpuFreqLimitsStructOnClick } from '../database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits';
+import { FlagsConfig } from './SpFlags';
+import { LitMainMenu } from '../../base-ui/menu/LitMainMenu';
+import { PerfToolsStructOnClick } from "../database/ui-worker/ProcedureWorkerPerfTool";
+
 
 function timeoutJudge(sp: SpSystemTrace) {
   let timeoutJudge = setTimeout(() => {
@@ -151,7 +153,9 @@ function jankClickHandlerFunc(sp: SpSystemTrace) {
     if (d.rowId === 'actual frameTime') {
       jankRowParent = sp.shadowRoot?.querySelector<TraceRow<JankStruct>>("trace-row[row-id='frameTime']");
     } else {
-      jankRowParent = sp.shadowRoot?.querySelector<TraceRow<JankStruct>>(`trace-row[row-type='process'][row-id='${d.pid}']`);
+      jankRowParent = sp.shadowRoot?.querySelector<TraceRow<JankStruct>>(
+        `trace-row[row-type='process'][row-id='${d.pid}']`
+      );
     }
     jankRowParent!.expansion = true;
     let jankRow: any;
@@ -160,12 +164,15 @@ function jankClickHandlerFunc(sp: SpSystemTrace) {
         jankRow = item;
       }
     });
+    sp.currentRow = jankRow;
     if (jankRow) {
       JankStruct.selectJankStructList.length = 0;
       let findJankEntry = jankRow!.dataListCache!.find((dat: any) => dat.name == d.name && dat.pid == d.pid);
       if (findJankEntry) {
-        if (findJankEntry!.ts! + findJankEntry!.dur! < TraceRow.range!.startNS ||
-          findJankEntry!.ts! > TraceRow.range!.endNS) {
+        if (
+          findJankEntry!.ts! + findJankEntry!.dur! < TraceRow.range!.startNS ||
+          findJankEntry!.ts! > TraceRow.range!.endNS
+        ) {
           sp.timerShaftEL?.setRangeNS(
             findJankEntry!.ts! - findJankEntry!.dur! * 2,
             findJankEntry!.ts! + findJankEntry!.dur! + findJankEntry!.dur! * 2
@@ -175,16 +182,18 @@ function jankClickHandlerFunc(sp: SpSystemTrace) {
         JankStruct.hoverJankStruct = findJankEntry;
         JankStruct.selectJankStruct = findJankEntry;
         sp.timerShaftEL?.drawTriangle(findJankEntry!.ts || 0, 'inverted');
-        sp.traceSheetEL?.displayJankData(JankStruct.selectJankStruct!, (datas) => {
-          sp.removeLinkLinesByBusinessType('janks');
-          // 绘制跟自己关联的线
-          datas.forEach((data) => {
-            let endParentRow = sp.shadowRoot?.querySelector<TraceRow<any>>(
-              `trace-row[row-type='process'][row-id='${data.pid}'][folder]`
-            );
-            sp.drawJankLine(endParentRow, JankStruct.selectJankStruct!, data, true);
-          });
-        },
+        sp.traceSheetEL?.displayJankData(
+          JankStruct.selectJankStruct!,
+          (datas) => {
+            sp.removeLinkLinesByBusinessType('janks');
+            // 绘制跟自己关联的线
+            datas.forEach((data) => {
+              let endParentRow = sp.shadowRoot?.querySelector<TraceRow<any>>(
+                `trace-row[row-type='process'][row-id='${data.pid}'][folder]`
+              );
+              sp.drawJankLine(endParentRow, JankStruct.selectJankStruct!, data, true);
+            });
+          },
           jankClickHandler
         );
       }
@@ -197,9 +206,7 @@ function jankClickHandlerFunc(sp: SpSystemTrace) {
 function snapshotClickHandlerFunc(sp: SpSystemTrace) {
   let snapshotClickHandler = (d: HeapSnapshotStruct) => {
     sp.observerScrollHeightEnable = true;
-    let snapshotRow = sp.shadowRoot?.querySelector<TraceRow<HeapSnapshotStruct>>(
-      `trace-row[row-id='heapsnapshot']`
-    );
+    let snapshotRow = sp.shadowRoot?.querySelector<TraceRow<HeapSnapshotStruct>>(`trace-row[row-id='heapsnapshot']`);
     let task = () => {
       if (snapshotRow) {
         let findEntry = snapshotRow!.dataListCache!.find((dat) => dat.startTs === d.startTs);
@@ -246,9 +253,7 @@ function cpuClickHandlerTask(threadRow: TraceRow<any>, sp: SpSystemTrace, d: Cpu
         sp.removeLinkLinesByBusinessType('thread');
         if (str == 'wakeup tid') {
           datas.forEach((data) => {
-            let endParentRow = sp.shadowRoot?.querySelector<TraceRow<any>>(
-              `trace-row[row-id='${data.pid}'][folder]`
-            );
+            let endParentRow = sp.shadowRoot?.querySelector<TraceRow<any>>(`trace-row[row-id='${data.pid}'][folder]`);
             sp.drawThreadLine(endParentRow, ThreadStruct.firstselectThreadStruct, data);
           });
         }
@@ -314,10 +319,12 @@ function allStructOnClick(clickRowType: string, sp: SpSystemTrace, row?: TraceRo
     .then(() => AppStartupStructOnClick(clickRowType, sp, scrollToFuncHandlerFunc(sp)))
     .then(() => AllAppStartupStructOnClick(clickRowType, sp, scrollToFuncHandlerFunc(sp)))
     .then(() => SoStructOnClick(clickRowType, sp, scrollToFuncHandlerFunc(sp)))
-    .then(() => FrameAnimationStructOnClick(clickRowType, sp,scrollToFuncHandlerFunc(sp), row!))
+    .then(() => FrameAnimationStructOnClick(clickRowType, sp, scrollToFuncHandlerFunc(sp), row!))
     .then(() => FrameDynamicStructOnClick(clickRowType, sp, row))
     .then(() => FrameSpacingStructOnClick(clickRowType, sp, row!))
     .then(() => sampleStructOnClick(clickRowType, sp))
+    .then(() => PerfToolsStructOnClick(clickRowType, sp))
+    
     .then(() => {
       if (!JankStruct.hoverJankStruct && JankStruct.delJankLineFlag) {
         sp.removeLinkLinesByBusinessType('janks');
@@ -329,9 +336,15 @@ function allStructOnClick(clickRowType: string, sp: SpSystemTrace, row?: TraceRo
         sp.traceSheetEL?.setMode('hidden');
         sp.refreshCanvas(true);
       }
-    }).catch(e => { });
+    })
+    .catch((e) => {});
 }
-export default function spSystemTraceOnClickHandler(sp: SpSystemTrace, clickRowType: string, row?: TraceRow<any>, entry?: any) {
+export default function spSystemTraceOnClickHandler(
+  sp: SpSystemTrace,
+  clickRowType: string,
+  row?: TraceRow<any>,
+  entry?: any
+) {
   if (row) {
     sp.currentRow = row;
     sp.setAttribute('clickRow', clickRowType);
@@ -398,7 +411,8 @@ export function spSystemTraceDocumentOnMouseMove(sp: SpSystemTrace, ev: MouseEve
   }
   if (ev.ctrlKey && ev.button === 0 && SpSystemTrace.isMouseLeftDown) {
     // 计算当前tab组件的高度
-    let tabHeight: number = sp.shadowRoot?.querySelector(`trace-sheet`)!.shadowRoot?.querySelector('lit-tabs')!.clientHeight! + 1;
+    let tabHeight: number =
+      sp.shadowRoot?.querySelector(`trace-sheet`)!.shadowRoot?.querySelector('lit-tabs')!.clientHeight! + 1;
     // 计算当前屏幕内高与鼠标位置坐标高度的差值
     let diffHeight: number = window.innerHeight - ev.clientY;
     // 如果差值大于面板高度，意味着鼠标位于泳道区域，可以通过ctrl+鼠标左键移动。否则不予生效
@@ -417,10 +431,6 @@ export function spSystemTraceDocumentOnMouseMove(sp: SpSystemTrace, ev: MouseEve
   }
   let isMouseInTimeShaft = handleMouseInTimeShaft(sp, ev);
   let rows = sp.visibleRows;
-  if (sp.timerShaftEL?.isScaling()) {
-    return;
-  }
-
   sp.timerShaftEL?.documentOnMouseMove(ev, sp);
 
   if (isMouseInTimeShaft) {
@@ -470,7 +480,7 @@ export function spSystemTraceDocumentOnMouseOut(sp: SpSystemTrace, ev: MouseEven
     return;
   }
   TraceRow.isUserInteraction = false;
-  SpSystemTrace.isMouseLeftDown = false
+  SpSystemTrace.isMouseLeftDown = false;
   if (sp.isMouseInSheet(ev)) {
     return;
   }
@@ -506,8 +516,27 @@ export function SpSystemTraceDocumentOnKeyPress(this: any, sp: SpSystemTrace, ev
       }
     }
     if (keyPress === 'f') {
+      let isSelectSliceOrFlag = false;
+      // 设置当前选中的slicetime
+      let selectSlice: any = undefined;
+      sp._slicesList.forEach((slice: { selected: boolean }) => {
+        if (slice.selected === true) {
+          selectSlice = slice;
+        }
+      });
+      if (!!selectSlice) {
+        sp.currentSlicesTime.startTime = selectSlice.startTime;
+        sp.currentSlicesTime.endTime = selectSlice.endTime;
+        isSelectSliceOrFlag = true;
+      }
+
+      if (!!sp.selectFlag) {
+        sp.currentSlicesTime.startTime = sp.selectFlag?.time;
+        sp.currentSlicesTime.endTime = sp.selectFlag?.time;
+        isSelectSliceOrFlag = true;
+      }
       // 设置当前的slicesTime
-      sp.setCurrentSlicesTime();
+      !isSelectSliceOrFlag && sp.setCurrentSlicesTime();
     }
     let keyPressWASD = keyPress === 'w' || keyPress === 'a' || keyPress === 's' || keyPress === 'd';
     if (keyPressWASD) {
@@ -575,15 +604,17 @@ function handleTimerShaftActions(ev: MouseEvent, sp: SpSystemTrace) {
   if (ev.offsetX > sp.timerShaftEL!.canvas!.offsetLeft) {
     let x = ev.offsetX - sp.timerShaftEL!.canvas!.offsetLeft;
     let y = ev.offsetY;
-    if (sp.timerShaftEL!.sportRuler!.frame.contains(x, y) &&
+    if (
+      sp.timerShaftEL!.sportRuler!.frame.contains(x, y) &&
       x > (TraceRow.rangeSelectObject?.startX || 0) &&
-      x < (TraceRow.rangeSelectObject?.endX || 0)) {
+      x < (TraceRow.rangeSelectObject?.endX || 0)
+    ) {
       let findSlicestime = sp.timerShaftEL!.sportRuler?.findSlicesTime(x, y); // 查找帽子
       if (!findSlicestime) {
         // 如果没有找到帽子，则绘制一个旗子
         let time = Math.round(
           (x * (TraceRow.range?.endNS! - TraceRow.range?.startNS!)) / sp.timerShaftEL!.canvas!.offsetWidth +
-          TraceRow.range?.startNS!
+            TraceRow.range?.startNS!
         );
         sp.timerShaftEL!.sportRuler!.drawTriangle(time, 'squre');
       }
@@ -592,7 +623,6 @@ function handleTimerShaftActions(ev: MouseEvent, sp: SpSystemTrace) {
 }
 
 export function spSystemTraceDocumentOnMouseUp(sp: SpSystemTrace, ev: MouseEvent) {
-
   if ((window as any).collectResize) {
     return;
   }
@@ -634,16 +664,21 @@ export function spSystemTraceDocumentOnKeyUp(sp: SpSystemTrace, ev: KeyboardEven
       clearTimeout(timerId);
     }
   }
-  let flag: boolean = sp.parentElement?.querySelector('sp-record-trace')!.shadowRoot?.querySelector('lit-main-menu-item[icon="file-config"]')!.hasAttribute('back')!;
+  let flag: boolean = sp.parentElement
+    ?.querySelector('sp-record-trace')!
+    .shadowRoot?.querySelector('lit-main-menu-item[icon="file-config"]')!
+    .hasAttribute('back')!;
   if (ev.key.toLocaleLowerCase() === String.fromCharCode(47) && !flag) {
     if (SpSystemTrace.keyboardFlar) {
-      document.querySelector('body > sp-application')!
+      document
+        .querySelector('body > sp-application')!
         .shadowRoot!.querySelector<SpKeyboard>('#sp-keyboard')!.style.visibility = 'visible';
       SpSystemTrace.keyboardFlar = false;
     } else {
-      document.querySelector('body > sp-application')!
+      document
+        .querySelector('body > sp-application')!
         .shadowRoot!.querySelector<SpKeyboard>('#sp-keyboard')!.style.visibility = 'hidden';
-        SpSystemTrace.keyboardFlar = true;
+      SpSystemTrace.keyboardFlar = true;
     }
   }
   if (!sp.loadTraceCompleted) return;
@@ -659,7 +694,7 @@ export function spSystemTraceDocumentOnKeyUp(sp: SpSystemTrace, ev: KeyboardEven
   TraceRow.isUserInteraction = false;
   sp.observerScrollHeightEnable = false;
   sp.keyboardEnable && sp.timerShaftEL!.documentOnKeyUp(ev);
-  if (ev.code === 'Enter') {
+  if (ev.code === 'Enter' || ev.code === 'NumpadEnter') {
     document.removeEventListener('keydown', sp.documentOnKeyDown);
     if (ev.shiftKey) {
       sp.dispatchEvent(
@@ -680,20 +715,30 @@ export function spSystemTraceDocumentOnKeyUp(sp: SpSystemTrace, ev: KeyboardEven
   }
 
   if (ev.ctrlKey) {
-    spSystemTraceDocumentOnKeyUpCtrlKey(keyPress, sp);
+    spSystemTraceDocumentOnKeyUpCtrlKey(keyPress, sp, ev);
   }
 }
 
-function spSystemTraceDocumentOnKeyUpCtrlKey(keyPress: string, sp: SpSystemTrace) {
+function spSystemTraceDocumentOnKeyUpCtrlKey(keyPress: string, sp: SpSystemTrace, ev: KeyboardEvent) {
   if (keyPress === 'b') {
-    let menuBox = document.querySelector('body > sp-application')!.shadowRoot?.querySelector('#main-menu') as LitMainMenu;
-    let searchBox = document.querySelector('body > sp-application')
+    let menuBox = document
+      .querySelector('body > sp-application')!
+      .shadowRoot?.querySelector('#main-menu') as LitMainMenu;
+    let searchBox = document
+      .querySelector('body > sp-application')
       ?.shadowRoot?.querySelector('div > div.search-vessel') as HTMLDivElement;
-    let appContent = document.querySelector('body > sp-application')
+    let appContent = document
+      .querySelector('body > sp-application')
       ?.shadowRoot?.querySelector('div > #app-content') as HTMLDivElement;
-    let rowPane = appContent?.querySelector('#sp-system-trace')?.shadowRoot?.querySelector('div > div.rows-pane') as HTMLDivElement;
-    let timerShaft = appContent?.querySelector('#sp-system-trace')?.shadowRoot?.querySelector('div > timer-shaft-element') as HTMLDivElement;
-    let spChartList = appContent?.querySelector('#sp-system-trace')?.shadowRoot?.querySelector('div > sp-chart-list') as HTMLDivElement;
+    let rowPane = appContent
+      ?.querySelector('#sp-system-trace')
+      ?.shadowRoot?.querySelector('div > div.rows-pane') as HTMLDivElement;
+    let timerShaft = appContent
+      ?.querySelector('#sp-system-trace')
+      ?.shadowRoot?.querySelector('div > timer-shaft-element') as HTMLDivElement;
+    let spChartList = appContent
+      ?.querySelector('#sp-system-trace')
+      ?.shadowRoot?.querySelector('div > sp-chart-list') as HTMLDivElement;
     let canvasEle = spChartList.shadowRoot?.querySelector('canvas') as unknown as HTMLDivElement;
     let sidebarButton = searchBox!.querySelector('div > div.sidebar-button') as HTMLDivElement;
     let importConfigDiv = searchBox!.querySelector('div > #import-key-path') as HTMLDivElement;
@@ -718,13 +763,15 @@ function spSystemTraceDocumentOnKeyUpCtrlKey(keyPress: string, sp: SpSystemTrace
     }
   }
   if (keyPress === '[' && sp._slicesList.length > 1) {
-    sp.MarkJump(sp._slicesList, 'slice', 'previous');
+    sp.selectFlag = undefined;
+    sp.MarkJump(sp._slicesList, 'slice', 'previous', ev);
   } else if (keyPress === ',' && sp._flagList.length > 1) {
-    sp.MarkJump(sp._flagList, 'flag', 'previous');
+    sp.MarkJump(sp._flagList, 'flag', 'previous', ev);
   } else if (keyPress === ']' && sp._slicesList.length > 1) {
-    sp.MarkJump(sp._slicesList, 'slice', 'next');
+    sp.selectFlag = undefined;
+    sp.MarkJump(sp._slicesList, 'slice', 'next', ev);
   } else if (keyPress === '.' && sp._flagList.length > 1) {
-    sp.MarkJump(sp._flagList, 'flag', 'next');
+    sp.MarkJump(sp._flagList, 'flag', 'next', ev);
   } else {
     return;
   }
@@ -732,9 +779,11 @@ function spSystemTraceDocumentOnKeyUpCtrlKey(keyPress: string, sp: SpSystemTrace
 
 function handleClickActions(sp: SpSystemTrace, x: number, y: number, ev: MouseEvent) {
   if (
-    !(sp.timerShaftEL!.sportRuler!.frame.contains(x, y) &&
+    !(
+      sp.timerShaftEL!.sportRuler!.frame.contains(x, y) &&
       x > (TraceRow.rangeSelectObject?.startX || 0) &&
-      x < (TraceRow.rangeSelectObject?.endX || 0))
+      x < (TraceRow.rangeSelectObject?.endX || 0)
+    )
   ) {
     let inFavoriteArea = sp.favoriteChartListEL?.containPoint(ev);
     let rows = sp.visibleRows.filter((it) => it.focusContain(ev, inFavoriteArea!) && it.collect === inFavoriteArea);
@@ -743,7 +792,10 @@ function handleClickActions(sp: SpSystemTrace, x: number, y: number, ev: MouseEv
     }
     let strict = true;
     let offset = false;
-    if (rows[0] && (rows[0].rowType === TraceRow.ROW_TYPE_FRAME_DYNAMIC || rows[0].rowType === TraceRow.ROW_TYPE_FRAME_SPACING)) {
+    if (
+      rows[0] &&
+      (rows[0].rowType === TraceRow.ROW_TYPE_FRAME_DYNAMIC || rows[0].rowType === TraceRow.ROW_TYPE_FRAME_SPACING)
+    ) {
       strict = false;
       offset = true;
     }
diff --git a/ide/src/trace/component/SpSystemTrace.html.ts b/ide/src/trace/component/SpSystemTrace.html.ts
index 3361b352f23f73308d881232d0b66890d7e038bc..d33042bc90fe2e1c1b2d11007d11e5d6508febdf 100644
--- a/ide/src/trace/component/SpSystemTrace.html.ts
+++ b/ide/src/trace/component/SpSystemTrace.html.ts
@@ -108,4 +108,4 @@ export const SpSystemTraceHtml = `<!--suppress CssUnresolvedCustomProperty -->
         <div id="tip" class="tip"></div>
         <trace-sheet class="trace-sheet" mode="hidden" ondragstart="return false"></trace-sheet>
     </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/SpSystemTrace.init.ts b/ide/src/trace/component/SpSystemTrace.init.ts
index 84368f9db9c2bd70c42dab982dd32c18f3206987..04f6159648e0313449a0ce4ff293b5d4570d9f7f 100644
--- a/ide/src/trace/component/SpSystemTrace.init.ts
+++ b/ide/src/trace/component/SpSystemTrace.init.ts
@@ -184,9 +184,9 @@ function flagChangeHandler(sp: SpSystemTrace): (event: any) => void {
     if (event.detail.hidden) {
       sp.selectFlag = undefined;
       if (sp._flagList.length <= 0) {
-        if (TraceRow.rangeSelectObject) {
-          let showTab = sp.getShowTab();
-          showTab = showTab.filter((it) => it !== 'box-flag');
+        let showTab = sp.getShowTab();
+        showTab = showTab.filter((it) => it !== 'box-flag');
+        if (TraceRow.rangeSelectObject && showTab.length > 0) {
           sp.traceSheetEL?.displayTab(...showTab);
         } else {
           sp.traceSheetEL?.setMode('hidden');
@@ -202,9 +202,9 @@ function slicesChangeHandler(sp: SpSystemTrace): (event: any) => void {
     if (event.detail.hidden) {
       sp.slicestime = null;
       if (sp._slicesList.length <= 0) {
-        if (TraceRow.rangeSelectObject) {
-          let showTab = sp.getShowTab();
-          showTab = showTab.filter((it) => it !== 'tabpane-current');
+        let showTab = sp.getShowTab();
+        showTab = showTab.filter((it) => it !== 'tabpane-current');
+        if (TraceRow.rangeSelectObject && showTab.length > 0) {
           sp.traceSheetEL?.displayTab(...showTab);
         } else {
           sp.traceSheetEL?.setMode('hidden');
@@ -544,16 +544,6 @@ function intersectionObserverHandler(sp: SpSystemTrace): void {
           sp.visibleRows.indexOf(tr) === -1 && sp.visibleRows.push(tr);
           sp.invisibleRows = sp.invisibleRows.filter((it) => it.sleeping);
         }
-        sp.visibleRows
-          .filter((vr) => vr.expansion)
-          .forEach((vr) => {
-            vr.sticky = sp.visibleRows.some((vro) => {
-              vr.childrenList.filter((it) => !it.collect).indexOf(vro) >= 0;
-            });
-          });
-        sp.visibleRows
-          .filter((vr) => !vr.folder && vr.parentRowEl && vr.parentRowEl.expansion && !vr.collect)
-          .forEach((vr) => (vr.parentRowEl!.sticky = true));
         if (sp.handler) {
           clearTimeout(sp.handler);
         }
@@ -1036,3 +1026,21 @@ const eventMap = {
 export function spSystemTraceInitPointToEvent(sp: SpSystemTrace): void {
   sp.eventMap = eventMap;
 }
+
+export function spSystemTraceParentRowSticky(sp: SpSystemTrace, deltaY: number): void {
+  if (deltaY > 0) {
+    // 从上往下划
+    const expandRowList = sp.visibleRows.filter((vr) => vr.expansion);
+    expandRowList.forEach((vr: TraceRow<any>) => {
+      const visibleNotCollectList = vr.childrenList.filter((child: TraceRow<any>) => !child.collect && !child.sleeping);
+      vr.sticky = visibleNotCollectList.length > 0;
+    });
+  } else if (deltaY < 0) {
+    // 从下往上划
+    sp.visibleRows
+      .filter((vr) => !vr.folder && vr.parentRowEl && vr.parentRowEl.expansion && !vr.collect)
+      .forEach((vr) => (vr.parentRowEl!.sticky = true));
+  } else {
+    return;
+  }
+}
diff --git a/ide/src/trace/component/SpSystemTrace.line.ts b/ide/src/trace/component/SpSystemTrace.line.ts
index c8b3e075e7392c9eeae536410f7fe9c0eaed5c86..ffc9843efe7b1d8cb2ae53cbfb29eedafd26c97a 100644
--- a/ide/src/trace/component/SpSystemTrace.line.ts
+++ b/ide/src/trace/component/SpSystemTrace.line.ts
@@ -163,7 +163,9 @@ function addPointLink(
       if (data.children[0].frame_type == 'frameTime') {
         endP = sp.shadowRoot?.querySelector<TraceRow<any>>("trace-row[row-type='janks'][row-id='frameTime']");
       } else {
-        endP = sp.shadowRoot?.querySelector<TraceRow<any>>(`trace-row[row-type='process'][row-id='${data.children[0].pid}'][folder]`);
+        endP = sp.shadowRoot?.querySelector<TraceRow<any>>(
+          `trace-row[row-type='process'][row-id='${data.children[0].pid}'][folder]`
+        );
       }
       sp.drawJankLine(endP, findJankEntry, data.children[0]);
     }
@@ -483,8 +485,13 @@ export function spSystemTraceDrawTaskPollLine(sp: SpSystemTrace, row?: TraceRow<
   }
 }
 
-
-function jankPoint(endRowStruct: any, selectThreadStruct: ThreadStruct, startRow: any, endParentRow: any, sp: SpSystemTrace) {
+function jankPoint(
+  endRowStruct: any,
+  selectThreadStruct: ThreadStruct,
+  startRow: any,
+  endParentRow: any,
+  sp: SpSystemTrace
+) {
   let findJankEntry = endRowStruct!.fixedList[0];
   let ts: number = 0;
   if (findJankEntry) {
@@ -546,5 +553,3 @@ export function spSystemTraceDrawThreadLine(
     }
   }
 }
-
-
diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts
index 44f735fbbcf9dc949a6052e5d8b6d27ade901fcb..020eba66bdf47e4ed23993c66638cbeb9d6327ff 100644
--- a/ide/src/trace/component/SpSystemTrace.ts
+++ b/ide/src/trace/component/SpSystemTrace.ts
@@ -102,6 +102,7 @@ import {
   spSystemTraceInit,
   spSystemTraceInitElement,
   spSystemTraceInitPointToEvent,
+  spSystemTraceParentRowSticky,
   spSystemTraceShowStruct,
 } from './SpSystemTrace.init';
 import {
@@ -121,6 +122,7 @@ import spSystemTraceOnClickHandler, {
 } from './SpSystemTrace.event';
 import { SampleStruct } from '../database/ui-worker/ProcedureWorkerBpftrace';
 import { readTraceFileBuffer } from '../SpApplicationPublicFunc';
+import { PerfToolStruct } from '../database/ui-worker/ProcedureWorkerPerfTool';
 
 function dpr(): number {
   return window.devicePixelRatio || 1;
@@ -210,6 +212,7 @@ export class SpSystemTrace extends BaseElement {
   _flagList: Array<any> = [];
   static currentStartTime: number = 0;
   static retargetIndex: number = 0;
+  private prevScrollY: number = 0;
 
   set snapshotFile(data: FileInfo) {
     this.snapshotFiles = data;
@@ -506,6 +509,8 @@ export class SpSystemTrace extends BaseElement {
   top: number = 0;
   handler: any = undefined;
   rowsElOnScroll = (e: any): void => {
+    const currentScrollY = e.target.scrollTop;
+    const deltaY = currentScrollY - this.prevScrollY;
     this.linkNodes.forEach((itln) => {
       if (itln[0].rowEL.collect) {
         if (this.timerShaftEL?._checkExpand) {
@@ -539,6 +544,8 @@ export class SpSystemTrace extends BaseElement {
       requestAnimationFrame(() => this.refreshCanvas(false));
     }, 200);
     requestAnimationFrame(() => this.refreshCanvas(false));
+    spSystemTraceParentRowSticky(this, deltaY);
+    this.prevScrollY = currentScrollY;
   };
 
   private scrollTimer: any;
@@ -576,19 +583,8 @@ export class SpSystemTrace extends BaseElement {
     //draw trace row
     this.visibleRows.forEach((v, i) => {
       if (v.collect) {
-        if (this.timerShaftEL?._checkExpand) {
-          if (SpSystemTrace.isHiddenMenu) {
-            v.translateY = v.getBoundingClientRect().top - 195 + this.timerShaftEL.usageFoldHeight! + 48;
-          } else {
-            v.translateY = v.getBoundingClientRect().top - 195 + this.timerShaftEL.usageFoldHeight!;
-          }
-        } else {
-          if (SpSystemTrace.isHiddenMenu) {
-            v.translateY = v.getBoundingClientRect().top - 195 + 48;
-          } else {
-            v.translateY = v.getBoundingClientRect().top - 195;
-          }
-        }
+        v.translateY = v.getBoundingClientRect().top -
+          this.timerShaftEL?.clientHeight! - this.parentElement!.previousElementSibling!.clientHeight - 1;
       } else {
         v.translateY = v.offsetTop - this.rowsPaneEL!.scrollTop;
       }
@@ -852,12 +848,13 @@ export class SpSystemTrace extends BaseElement {
    * @param type 标记类型（卡尺和旗子）
    * @param direction 跳转方向（前一个/后一个）
    */
-  MarkJump(list: Array<any>, type: string, direction: string): void {
+  MarkJump(list: Array<any>, type: string, direction: string, ev: KeyboardEvent): void {
     this.traceSheetEL = this.shadowRoot?.querySelector('.trace-sheet');
     let find = list.find((it) => it.selected);
     if (!find) {
       // 如果当前没有选中的，就选中第一个
       list.forEach((it) => (it.selected = false));
+      this.ifSliceInView(list[0], type, ev);
       list[0].selected = true;
     } else {
       for (let i = 0; i < list.length; i++) {
@@ -867,20 +864,24 @@ export class SpSystemTrace extends BaseElement {
           if (direction === 'previous') {
             if (i === 0) {
               // 如果当前选中的是第一个，就循环到最后一个上
+              this.ifSliceInView(list[list.length - 1], type, ev);
               list[list.length - 1].selected = true;
               break;
             } else {
               // 选中当前的上一个
+              this.ifSliceInView(list[i - 1], type, ev);
               list[i - 1].selected = true;
               break;
             }
           } else if (direction === 'next') {
             if (i === list.length - 1) {
               // 如果当前选中的是最后一个，就循环到第一个上
+              this.ifSliceInView(list[0], type, ev);
               list[0].selected = true;
               break;
             } else {
               // 选中当前的下一个
+              this.ifSliceInView(list[i + 1], type, ev);
               list[i + 1].selected = true;
               break;
             }
@@ -910,6 +911,23 @@ export class SpSystemTrace extends BaseElement {
     }
   }
 
+  ifSliceInView(data: any, type: string, ev: KeyboardEvent) {
+    let timeRangeEndNS = this.timerShaftEL?.getRangeRuler()?.range.endNS;
+    let timeRangeStartNS = this.timerShaftEL?.getRangeRuler()?.range.startNS;
+    if (type === 'flag') {
+      data.startTime = data.time;
+      data.endTime = data.time;
+    }
+    let endTime = data.endTime;
+    let startTime = data.startTime;
+    if (endTime > timeRangeEndNS! || startTime < timeRangeStartNS!) {
+      this.timerShaftEL!.documentOnKeyPress(ev, data);
+      setTimeout(() => {
+        this.timerShaftEL!.documentOnKeyUp(ev);
+      }, 1000);
+    }
+  }
+
   isMouseInSheet = (ev: MouseEvent): boolean => {
     this.isMousePointInSheet =
       this.traceSheetEL?.getAttribute('mode') !== 'hidden' &&
@@ -1030,6 +1048,7 @@ export class SpSystemTrace extends BaseElement {
     SnapshotStruct.hoverSnapshotStruct = undefined;
     HiPerfCallChartStruct.hoverPerfCallCutStruct = undefined;
     SampleStruct.hoverSampleStruct = undefined;
+    PerfToolStruct.hoverPerfToolStruct = undefined;
     this.tipEL!.style.display = 'none';
     return this;
   }
@@ -1060,6 +1079,7 @@ export class SpSystemTrace extends BaseElement {
     LtpoStruct.selectLtpoStruct = undefined;
     HitchTimeStruct.selectHitchTimeStruct = undefined;
     SampleStruct.selectSampleStruct = undefined;
+    PerfToolStruct.selectPerfToolStruct = undefined;
     return this;
   }
 
@@ -1385,7 +1405,7 @@ export class SpSystemTrace extends BaseElement {
           scrollTop: this.rowsEL!.scrollTop,
           favoriteScrollTop: this.favoriteChartListEL!.scrollTop,
         });
-        this.downloadRecordFile(data).then(() => {});
+        this.downloadRecordFile(data).then(() => { });
       }
     });
   }
@@ -2080,14 +2100,14 @@ export class SpSystemTrace extends BaseElement {
     procedurePool.clearCache();
     Utils.clearData();
     InitAnalysis.getInstance().isInitAnalysis = true;
-    procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => {});
+    procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => { });
     if (threadPool) {
-      threadPool.submitProto(QueryEnum.ClearMemoryCache, {}, (res: any, len: number): void => {});
+      threadPool.submitProto(QueryEnum.ClearMemoryCache, {}, (res: any, len: number): void => { });
     }
     this.times.clear();
     resetVSync();
     SpSystemTrace.keyPathList = [];
-    TabPaneCurrentSelection.isTransformed = false;
+    Utils.isTransformed = false;
   }
 
   init = async (
diff --git a/ide/src/trace/component/SpThirdParty.ts b/ide/src/trace/component/SpThirdParty.ts
index ac645e564bf7927632c24085db17eb6314a0cf42..118529aee362ca9df52cd3af8b0a11f1019821f1 100644
--- a/ide/src/trace/component/SpThirdParty.ts
+++ b/ide/src/trace/component/SpThirdParty.ts
@@ -31,7 +31,7 @@ export class SpThirdParty extends BaseElement {
     this.inputEl = this.shadowRoot?.querySelector('#file');
     this.uploadEl?.addEventListener('click', () => {
       this.inputEl?.click();
-    })
+    });
     this.inputEl!.addEventListener('change', () => {
       let files = this.inputEl!.files;
       if (files && files.length > 0) {
@@ -40,11 +40,11 @@ export class SpThirdParty extends BaseElement {
         let child = children[0].children as Array<MenuItem>;
         let fileHandler = child[0].fileHandler!;
         fileHandler({
-          detail: files[0]
-        })
+          detail: files[0],
+        });
       }
       if (this.inputEl) this.inputEl.value = '';
-    })
+    });
   }
 
   initHtml(): string {
@@ -93,7 +93,4 @@ export class SpThirdParty extends BaseElement {
         </style>
     `;
   }
-
 }
-
-
diff --git a/ide/src/trace/component/Utils.ts b/ide/src/trace/component/Utils.ts
index 7fe99515374b8a7093c22bb76a6f2f5ea01d464c..441bce9236fda6895cb0e2401f69f1272b171385 100644
--- a/ide/src/trace/component/Utils.ts
+++ b/ide/src/trace/component/Utils.ts
@@ -98,10 +98,10 @@ export function parseKeyPathJson(content: string): Array<KeyPathStruct> {
 
 export function debounce(func: any, delay: number) {
   let timer: any = null;
-  return function() {
+  return function () {
     clearTimeout(timer);
     timer = setTimeout(() => {
       func();
-    }, delay)
-  }
-}
\ No newline at end of file
+    }, delay);
+  };
+}
diff --git a/ide/src/trace/component/chart/FrameChart.ts b/ide/src/trace/component/chart/FrameChart.ts
index cba83946a5489a9bf34035127a7e340bbc1e46bd..3d8f7162e370e7edfba9e59ec11b3e6e23b365fd 100644
--- a/ide/src/trace/component/chart/FrameChart.ts
+++ b/ide/src/trace/component/chart/FrameChart.ts
@@ -25,7 +25,9 @@ const filterPixel = 2; // 过滤像素
 const textMaxWidth = 50;
 const scaleRatio = 0.2; // 缩放比例
 const ms10 = 10_000_000;
+const jsHapKeys = ['.hap', 'hsp', 'har'];
 const jsStackPath = ['.ts', '.ets', '.js'];
+const textStyle = '12px bold';
 
 class NodeValue {
   size: number;
@@ -237,7 +239,11 @@ export class FrameChart extends BaseElement {
    * @returns 是否包含
    */
   private isJsStack(str: string): boolean {
-    for (const format of jsStackPath) {
+    let keyList = jsStackPath;
+    if (this._mode === ChartMode.Count || ChartMode.EventCount) {
+      keyList = jsStackPath.concat(jsHapKeys);
+    }
+    for (const format of keyList) {
       if (str.indexOf(format) > 0) {
         return true;
       }
@@ -245,6 +251,22 @@ export class FrameChart extends BaseElement {
     return false;
   }
 
+  private clearSuperfluousParams(node: ChartStruct): void {
+    node.id = undefined;
+    node.eventType = undefined;
+    node.parentId = undefined;
+    node.title = undefined;
+    node.eventType = undefined;
+    if (this.mode === ChartMode.Byte) {
+      node.self = undefined;
+      node.eventCount = 0;
+    }
+    if (this._mode !== ChartMode.Count && this._mode !== ChartMode.EventCount) {
+      node.eventCount = 0;
+      node.eventPercent = undefined;
+    }
+  }
+
   /**
    * 计算调用栈最大深度，计算每个node显示大小
    * @param node 函数块
@@ -254,6 +276,7 @@ export class FrameChart extends BaseElement {
   private initData(node: ChartStruct, depth: number, calDisplay: boolean): void {
     node.depth = depth;
     depth++;
+    this.clearSuperfluousParams(node);
     if (this.isJsStack(node.lib)) {
       node.isJsStack = true;
     } else {
@@ -346,6 +369,7 @@ export class FrameChart extends BaseElement {
   public async calculateChartData(): Promise<void> {
     this.clearCanvas();
     this.canvasContext?.beginPath();
+    this.canvasContext.font = textStyle;
     // 绘制刻度线
     this.drawCalibrationTails();
     // 绘制root节点
@@ -811,7 +835,7 @@ export class FrameChart extends BaseElement {
   private updateTipContent(): void {
     const hoverNode = ChartStruct.hoverFuncStruct;
     if (hoverNode) {
-      const name = hoverNode?.symbol.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      const name = hoverNode?.symbol.replace(/</g, '&lt;').replace(/>/g, '&gt;').split(' (')[0];
       const percent = ((hoverNode?.percent || 0) * 100).toFixed(2);
       const threadPercent = this.getCurrentPercentOfThread(hoverNode);
       const processPercent = this.getCurrentPercentOfProcess(hoverNode);
@@ -978,6 +1002,15 @@ export class FrameChart extends BaseElement {
           break;
       }
     });
+
+    document.addEventListener('keyup', (e) => {
+      if (!ChartStruct.hoverFuncStruct) {
+        return;
+      }
+      if (e.ctrlKey && e.key.toLocaleLowerCase() === 'c') {
+        navigator.clipboard.writeText(ChartStruct.hoverFuncStruct!.symbol);
+      }
+    });
     this.listenerResize();
   }
 
@@ -990,7 +1023,7 @@ export class FrameChart extends BaseElement {
                 background-color: white;
                 border: 1px solid #f9f9f9;
                 width: auto;
-                font-size: 8px;
+                font-size: 12px;
                 color: #50809e;
                 padding: 2px 10px;
                 display: none;
diff --git a/ide/src/trace/component/chart/PerfDataQuery.ts b/ide/src/trace/component/chart/PerfDataQuery.ts
index c7090f7d55f9034d373073935b8bae9d1db5dc3e..7a9c2943dc53c73d6f6aa7707a595ba867f37334 100644
--- a/ide/src/trace/component/chart/PerfDataQuery.ts
+++ b/ide/src/trace/component/chart/PerfDataQuery.ts
@@ -18,7 +18,7 @@ import { info } from '../../../log/Log';
 import { SpHiPerf } from './SpHiPerf';
 import { procedurePool } from '../../database/Procedure';
 import { SpSystemTrace } from '../SpSystemTrace';
-import {queryPerfFiles} from "../../database/sql/Perf.sql";
+import { queryPerfFiles } from '../../database/sql/Perf.sql';
 
 export class PerfDataQuery {
   filesData: any = {};
diff --git a/ide/src/trace/component/chart/SpAllAppStartups.ts b/ide/src/trace/component/chart/SpAllAppStartups.ts
index c37b3a61e3d181bcc1472878f18d3a7f5b8f128e..27231145e5e06834c8261872d564303c34a16ded 100644
--- a/ide/src/trace/component/chart/SpAllAppStartups.ts
+++ b/ide/src/trace/component/chart/SpAllAppStartups.ts
@@ -97,7 +97,7 @@ export class SpAllAppStartupsChart {
           process: undefined,
           tid: undefined,
           itid: undefined,
-          endItid: undefined
+          endItid: undefined,
         });
       }
       return sendRes;
diff --git a/ide/src/trace/component/chart/SpBpftraceChart.ts b/ide/src/trace/component/chart/SpBpftraceChart.ts
index 70b6e04f8c1f8b69258e78bf12ab36cb99833cc4..ee1bdebbc3d0d6de33afa0563d2c5cd2fb5b814b 100644
--- a/ide/src/trace/component/chart/SpBpftraceChart.ts
+++ b/ide/src/trace/component/chart/SpBpftraceChart.ts
@@ -22,7 +22,7 @@ import { SpStatisticsHttpUtil } from '../../../statistics/util/SpStatisticsHttpU
 
 export class SpBpftraceChart {
   private trace: SpSystemTrace;
-  
+
   constructor(trace: SpSystemTrace) {
     this.trace = trace;
   }
@@ -39,7 +39,7 @@ export class SpBpftraceChart {
   }
 
   async initSample(start_ts: number, file: any): Promise<TraceRow<SampleStruct>> {
-    let traceRow =  TraceRow.skeleton<SampleStruct>();
+    let traceRow = TraceRow.skeleton<SampleStruct>();
     traceRow.rowId = 'bpftrace';
     traceRow.index = 0;
     traceRow.rowType = TraceRow.ROW_TYPE_SAMPLE;
@@ -49,9 +49,6 @@ export class SpBpftraceChart {
     traceRow.name = 'bpftrace';
     traceRow.selectChangeHandler = this.trace.selectChangeHandler;
     traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    traceRow.findHoverStruct = () => {
-      SampleStruct.hoverSampleStruct = traceRow.getHoverStruct();
-    };
     //添加上传按钮
     traceRow.addRowSampleUpload();
     this.addTraceRowEventListener(traceRow, start_ts);
@@ -65,10 +62,10 @@ export class SpBpftraceChart {
         const height = (Math.max(...flattenTreeArray.map((obj: any) => obj.depth)) + 1) * 20;
         const sampleProperty = this.setRelationDataProperty(flattenTreeArray, uniqueProperty);
         const startTS = flattenTreeArray[0].property[0].begin;
-        traceRow.supplier = () => 
+        traceRow.supplier = () =>
           new Promise((resolve): void => {
-            resolve(sampleProperty)
-          })
+            resolve(sampleProperty);
+          });
         traceRow.onThreadHandler = (useCache) => {
           let context: CanvasRenderingContext2D;
           if (traceRow.currentContext) {
@@ -84,22 +81,48 @@ export class SpBpftraceChart {
               type: 'bpftrace',
               start_ts: startTS,
               uniqueProperty: uniqueProperty,
-              flattenTreeArray: flattenTreeArray
+              flattenTreeArray: flattenTreeArray,
             },
             traceRow
           );
-          traceRow.canvasRestore(context)
+          traceRow.canvasRestore(context);
         };
-        traceRow.style.height = `${ height }px`;
-      })
+        traceRow.style.height = `${height}px`;
+      });
+    } else {
+      traceRow.supplier = () =>
+        new Promise((resolve): void => {
+          resolve([])
+        })
+      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.sample as SampleRender).renderMainThread(
+          {
+            context: context,
+            useCache: useCache,
+            type: 'bpftrace',
+            start_ts: 0,
+            uniqueProperty: [],
+            flattenTreeArray: []
+          },
+          traceRow
+        );
+        traceRow.canvasRestore(context)
+      };
     }
     return traceRow;
   }
 
   /**
    * 监听文件上传事件
-   * @param row 
-   * @param start_ts 
+   * @param row
+   * @param start_ts
    */
   addTraceRowEventListener(row: TraceRow<any>, start_ts: number) {
     row.uploadEl?.addEventListener('sample-file-change', (e: any) => {
@@ -112,11 +135,11 @@ export class SpBpftraceChart {
         const height = (Math.max(...flattenTreeArray.map((obj: any) => obj.depth)) + 1) * 20;
         const sampleProperty = this.setRelationDataProperty(flattenTreeArray, uniqueProperty);
         const startTS = start_ts > 0 ? start_ts : flattenTreeArray[0].property[0].begin;
-        row.supplier = () => 
+        row.supplier = () =>
           new Promise((resolve): void => {
-            resolve(sampleProperty)
-          })
-          row.onThreadHandler = (useCache) => {
+            resolve(sampleProperty);
+          });
+        row.onThreadHandler = (useCache) => {
           let context: CanvasRenderingContext2D;
           if (row.currentContext) {
             context = row.currentContext;
@@ -131,20 +154,20 @@ export class SpBpftraceChart {
               type: 'bpftrace',
               start_ts: startTS,
               uniqueProperty: uniqueProperty,
-              flattenTreeArray: flattenTreeArray
+              flattenTreeArray: flattenTreeArray,
             },
             row
           );
-          row.canvasRestore(context)
+          row.canvasRestore(context);
         };
-        row.style.height = `${ height }px`;
-      })
-    })
+        row.style.height = `${height}px`;
+      });
+    });
   }
 
   /**
    * 清空缓存
-   * @param row 
+   * @param row
    */
   resetChartData(row: TraceRow<any>) {
     row.dataList = [];
@@ -155,8 +178,8 @@ export class SpBpftraceChart {
 
   /**
    * 获取上传的文件内容 转为json格式
-   * @param file 
-   * @returns 
+   * @param file
+   * @returns
    */
   getJsonData(file: any): Promise<any> {
     return new Promise((resolve, reject) => {
@@ -166,37 +189,33 @@ export class SpBpftraceChart {
         const fileContent = e.target?.result;
         try {
           resolve(JSON.parse(fileContent));
-          document.dispatchEvent(
-            new CustomEvent('file-correct')
-          )
+          document.dispatchEvent(new CustomEvent('file-correct'));
           SpStatisticsHttpUtil.addOrdinaryVisitAction({
             event: 'bpftrace',
             action: 'bpftrace',
           });
         } catch (error) {
-          document.dispatchEvent(
-            new CustomEvent('file-error')
-          )
+          document.dispatchEvent(new CustomEvent('file-error'));
         }
-      }
-    })
+      };
+    });
   }
 
   /**
    * 树结构扁平化
-   * @param treeData 
-   * @param depth 
-   * @param parentName 
-   * @returns 
+   * @param treeData
+   * @param depth
+   * @param parentName
+   * @returns
    */
   getFlattenTreeData(treeData: Array<any>, depth: number = 0, parentName: string = ''): Array<any> {
     let result: Array<object> = [];
-    treeData.forEach(node => {
+    treeData.forEach((node) => {
       const name: string = node['function_name'];
       const newNode: any = {};
       if (name.indexOf('unknown') > -1) {
         newNode['children'] = this.getUnknownAllChildrenNames(node);
-      } 
+      }
       newNode['detail'] = node['detail'];
       newNode['depth'] = depth;
       newNode['name'] = name;
@@ -204,46 +223,46 @@ export class SpBpftraceChart {
       newNode['property'] = [];
       result.push(newNode);
       if (node.children) {
-        result = result.concat(this.getFlattenTreeData(node.children, depth + 1, node['function_name']))
+        result = result.concat(this.getFlattenTreeData(node.children, depth + 1, node['function_name']));
       }
-    })
-    return result
+    });
+    return result;
   }
 
   /**
    * 查找重复项
-   * @param propertyData 
-   * @returns 
+   * @param propertyData
+   * @returns
    */
   removeDuplicates(propertyData: Array<any>): Array<any> {
     const result: Array<any> = [];
-    propertyData.forEach(propertyGroup => {
+    propertyData.forEach((propertyGroup) => {
       const groups: Array<any> = [];
       propertyGroup.forEach((property: any) => {
-        const duplicateObj = groups.find(group => group['func_name'] === property['func_name']);
+        const duplicateObj = groups.find((group) => group['func_name'] === property['func_name']);
         if (duplicateObj) {
           duplicateObj['begin'] = Math.min(duplicateObj['begin'], property['begin']);
           duplicateObj['end'] = Math.max(duplicateObj['end'], property['end']);
         } else {
-          groups.push(property)
+          groups.push(property);
         }
-      })
+      });
       result.push(groups);
-    })
-    return result
+    });
+    return result;
   }
-  
+
   /**
    * 关系树赋值
-   * @param relationData 
-   * @param propertyData 
+   * @param relationData
+   * @param propertyData
    */
   setRelationDataProperty(relationData: Array<any>, propertyData: Array<any>): Array<any> {
     const sampleProperty = relationData;
     //数组每一项进行比对
-    propertyData.forEach(propertyGroup => {
+    propertyData.forEach((propertyGroup) => {
       propertyGroup.forEach((property: any) => {
-        const relation = sampleProperty.find(relation => relation['name'] === property['func_name']);
+        const relation = sampleProperty.find((relation) => relation['name'] === property['func_name']);
         //property属性存储每帧数据
         relation?.property.push({
           name: property['func_name'],
@@ -252,67 +271,67 @@ export class SpBpftraceChart {
           begin: property['begin'],
           depth: relation['depth'],
           instructions: property['instructions'],
-          cycles: property['cycles']
-        })
-      })
-    })
+          cycles: property['cycles'],
+        });
+      });
+    });
 
     //获取所有名字为unknown的数据
-    const unknownRelation = sampleProperty.filter(relation => relation['name'].indexOf('unknown') > -1);
+    const unknownRelation = sampleProperty.filter((relation) => relation['name'].indexOf('unknown') > -1);
     //二维数组 用于存放unknown下所有子节点的数据
     let twoDimensionalArray: Array<any> = [];
     let result: Array<any> = [];
-    unknownRelation.forEach(unknownItem => {
+    unknownRelation.forEach((unknownItem) => {
       result = [];
       twoDimensionalArray = [];
       const children = unknownItem['children'];
       //先获取到unknwon节点下每个子节点的property
-      Object.keys(children).forEach(key => {
-        unknownItem.children[key] = (sampleProperty.find(relation => relation['name'] === key)).property;
-      })
+      Object.keys(children).forEach((key) => {
+        unknownItem.children[key] = sampleProperty.find((relation) => relation['name'] === key).property;
+      });
       //将每个子节点的property加到二维数组中
       Object.values(children).forEach((value: any) => {
         if (value.length > 0) {
-          twoDimensionalArray.push(value)
+          twoDimensionalArray.push(value);
         }
-      })
+      });
       if (twoDimensionalArray.length > 0) {
         //取每列的最大值和最小值
         for (let i = 0; i < twoDimensionalArray[0].length; i++) {
           const data = {
             name: unknownItem['name'],
             detail: unknownItem['detail'],
-            begin: (twoDimensionalArray[0][i]).begin,
+            begin: twoDimensionalArray[0][i].begin,
             end: 0,
-            depth: unknownItem['depth']
-          }
+            depth: unknownItem['depth'],
+          };
           for (let j = 0; j < twoDimensionalArray.length; j++) {
-            data['end'] = Math.max((twoDimensionalArray[j][i])['end'], data['end']);
-            data['begin'] = Math.min((twoDimensionalArray[j][i])['begin'], data['begin']);
+            data['end'] = Math.max(twoDimensionalArray[j][i]['end'], data['end']);
+            data['begin'] = Math.min(twoDimensionalArray[j][i]['begin'], data['begin']);
           }
           result.push(data);
         }
         unknownItem.property = result;
       }
-    })
+    });
     return sampleProperty;
   }
 
   /**
    * 获取unknown节点下所有孩子节点的名称
-   * @param node 
-   * @param names 
+   * @param node
+   * @param names
    */
   getUnknownAllChildrenNames(node: any, names: any = {}): object {
     if (node['children']) {
       node['children'].forEach((child: any) => {
         if (child['function_name'].indexOf('unknown') < 0) {
-          names[child['function_name']] = []
+          names[child['function_name']] = [];
         } else {
-          this.getUnknownAllChildrenNames(child, names)
+          this.getUnknownAllChildrenNames(child, names);
         }
-      })
+      });
     }
-    return names
+    return names;
   }
 }
diff --git a/ide/src/trace/component/chart/SpChartManager.ts b/ide/src/trace/component/chart/SpChartManager.ts
index 6c7ef0c58d01883626def53409716dfdec3bcac0..4b4e821e5b0d0599eab5a3686a66168d0c392478 100644
--- a/ide/src/trace/component/chart/SpChartManager.ts
+++ b/ide/src/trace/component/chart/SpChartManager.ts
@@ -43,12 +43,13 @@ import { SpHiSysEventChart } from './SpHiSysEventChart';
 import { SpAllAppStartupsChart } from './SpAllAppStartups';
 import { procedurePool } from '../../database/Procedure';
 import { SpSegmentationChart } from './SpSegmentationChart';
+import { SpPerfOutputDataChart } from './SpPerfOutputDataChart';
 import {
   queryAppStartupProcessIds,
   queryDataDICT,
   queryThreadAndProcessName,
 } from '../../database/sql/ProcessThread.sql';
-import { queryTaskPoolCallStack, queryTotalTime } from '../../database/sql/SqlLite.sql';
+import { queryTaskPoolCallStack, queryTotalTime, queryTraceRange } from '../../database/sql/SqlLite.sql';
 import { getCpuUtilizationRate } from '../../database/sql/Cpu.sql';
 import { queryMemoryConfig } from '../../database/sql/Memory.sql';
 import { SpLtpoChart } from './SpLTPO';
@@ -81,6 +82,8 @@ export class SpChartManager {
   private spHiSysEvent: SpHiSysEventChart;
   private spSegmentationChart: SpSegmentationChart;
   private spBpftraceChart: SpBpftraceChart;
+  private tranceRange = { startTs: 0, endTs: 0 };
+  private spPerfOutputDataChart: SpPerfOutputDataChart;
 
   constructor(trace: SpSystemTrace) {
     this.trace = trace;
@@ -106,6 +109,7 @@ export class SpChartManager {
     this.SpLtpoChart = new SpLtpoChart(trace);
     this.spSegmentationChart = new SpSegmentationChart(trace);
     this.spBpftraceChart = new SpBpftraceChart(trace);
+    this.spPerfOutputDataChart = new SpPerfOutputDataChart(trace);
   }
   async initPreprocessData(progress: Function): Promise<void> {
     progress('load data dict', 50);
@@ -127,6 +131,8 @@ export class SpChartManager {
     let ptArr = await queryThreadAndProcessName();
     this.handleProcessThread(ptArr);
     info('initData timerShaftEL Data initialized');
+    const range = await queryTraceRange();
+    this.tranceRange = range[0];
   }
 
   async initCpu(progress: Function): Promise<void> {
@@ -186,8 +192,9 @@ export class SpChartManager {
     await this.spAllAppStartupsChart.init();
     await this.SpLtpoChart.init();
     await this.frameTimeChart.init();
+    await this.spPerfOutputDataChart.init();
     progress('process', 92);
-    await this.process.initAsyncFuncData();
+    await this.process.initAsyncFuncData(this.tranceRange);
     await this.process.initDeliverInputEvent();
     await this.process.init();
     progress('display', 95);
diff --git a/ide/src/trace/component/chart/SpClockChart.ts b/ide/src/trace/component/chart/SpClockChart.ts
index 70dd584f2d9bd57bd62d5337d9513b71b938d73c..845ba7299c40e71e5cce417ce65a869ebaa7f0a4 100644
--- a/ide/src/trace/component/chart/SpClockChart.ts
+++ b/ide/src/trace/component/chart/SpClockChart.ts
@@ -42,10 +42,10 @@ export class SpClockChart {
       name: string;
       num: number;
       srcname: string;
+      maxValue?: number;
     },
     isState: boolean,
-    isScreenState: boolean,
-    maxValue: number
+    isScreenState: boolean
   ): void {
     traceRow.supplierFrame = (): Promise<ClockStruct[]> => {
       let promiseData = null;
@@ -62,8 +62,8 @@ export class SpClockChart {
         return promiseData.then((resultClock: Array<any>) => {
           for (let j = 0; j < resultClock.length; j++) {
             resultClock[j].type = 'measure';
-            if ((resultClock[j].value || 0) > maxValue) {
-              maxValue = resultClock[j].value || 0;
+            if ((resultClock[j].value || 0) > it.maxValue!) {
+              it.maxValue = resultClock[j].value || 0;
             }
             if (j > 0) {
               resultClock[j].delta = (resultClock[j].value || 0) - (resultClock[j - 1].value || 0);
@@ -83,10 +83,10 @@ export class SpClockChart {
       name: string;
       num: number;
       srcname: string;
+      maxValue?: number;
     },
     isState: boolean,
     isScreenState: boolean,
-    maxValue: number,
     clockId: number
   ): void {
     traceRow.onThreadHandler = (useCache): void => {
@@ -102,10 +102,12 @@ export class SpClockChart {
           context: context,
           useCache: useCache,
           type: it.name,
-          maxValue: maxValue === 0 ? 1 : maxValue,
+          maxValue: it.maxValue === 0 ? 1 : it.maxValue!,
           index: clockId,
           maxName:
-            isState || isScreenState ? maxValue.toString() : Utils.getFrequencyWithUnit(maxValue / 1000).maxFreqName,
+            isState || isScreenState
+              ? it.maxValue!.toString()
+              : Utils.getFrequencyWithUnit(it.maxValue! / 1000).maxFreqName,
         },
         traceRow
       );
@@ -124,7 +126,7 @@ export class SpClockChart {
     ClockStruct.maxValue = clockList.map((item) => item.num).reduce((a, b) => Math.max(a, b));
     for (let i = 0; i < clockList.length; i++) {
       const it = clockList[i];
-      let maxValue = 0;
+      it.maxValue = 0;
       let traceRow = TraceRow.skeleton<ClockStruct>();
       let isState = it.name.endsWith(' State');
       let isScreenState = it.name.endsWith('ScreenState');
@@ -137,7 +139,7 @@ export class SpClockChart {
       traceRow.setAttribute('children', '');
       traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
       traceRow.selectChangeHandler = this.trace.selectChangeHandler;
-      this.clockSupplierFrame(traceRow, it, isState, isScreenState, maxValue);
+      this.clockSupplierFrame(traceRow, it, isState, isScreenState);
       traceRow.getCacheData = (args: any): Promise<Array<any>> | undefined => {
         if (it.name.endsWith(' Frequency')) {
           return clockDataSender(it.srcname, 'clockFrequency', traceRow, args);
@@ -157,7 +159,7 @@ export class SpClockChart {
       traceRow.findHoverStruct = (): void => {
         ClockStruct.hoverClockStruct = traceRow.getHoverStruct();
       };
-      this.clockThreadHandler(traceRow, it, isState, isScreenState, maxValue, i);
+      this.clockThreadHandler(traceRow, it, isState, isScreenState, i);
       folder.addChildTraceRow(traceRow);
     }
     let durTime = new Date().getTime() - clockStartTime;
diff --git a/ide/src/trace/component/chart/SpEBPFChart.ts b/ide/src/trace/component/chart/SpEBPFChart.ts
index 4d0e772967aef3c0ac2d05cd3a12309b42ccd23d..90abc0692b52192c6aeb20a9f8378d15100df8ac 100644
--- a/ide/src/trace/component/chart/SpEBPFChart.ts
+++ b/ide/src/trace/component/chart/SpEBPFChart.ts
@@ -310,7 +310,7 @@ export class SpEBPFChart {
     return rowWrite;
   }
 
-  async initProcessDiskIOLatency(folder: TraceRow<any>):Promise<void> {
+  async initProcessDiskIOLatency(folder: TraceRow<any>): Promise<void> {
     let processes = (await getDiskIOProcess()) || [];
     for (let i = 0, len = processes.length; i < len; i++) {
       let process = processes[i];
diff --git a/ide/src/trace/component/chart/SpFpsChart.ts b/ide/src/trace/component/chart/SpFpsChart.ts
index 6d1001abe1436097c0723e0395408de0ca22034f..9b3b12d71d526fa711e613698a7c0cd0ae701105 100644
--- a/ide/src/trace/component/chart/SpFpsChart.ts
+++ b/ide/src/trace/component/chart/SpFpsChart.ts
@@ -18,7 +18,7 @@ import { TraceRow } from '../trace/base/TraceRow';
 import { info } from '../../../log/Log';
 import { renders } from '../../database/ui-worker/ProcedureWorker';
 import { FpsRender, FpsStruct } from '../../database/ui-worker/ProcedureWorkerFPS';
-import {getFps} from "../../database/sql/SqlLite.sql";
+import { getFps } from '../../database/sql/SqlLite.sql';
 
 export class SpFpsChart {
   private trace: SpSystemTrace;
diff --git a/ide/src/trace/component/chart/SpFrameTimeChart.ts b/ide/src/trace/component/chart/SpFrameTimeChart.ts
index b7872e65b82cb83d1a11b97e394caeb2036eaa47..5dac424685aa009b87f7069dbd2abae355708068 100644
--- a/ide/src/trace/component/chart/SpFrameTimeChart.ts
+++ b/ide/src/trace/component/chart/SpFrameTimeChart.ts
@@ -244,22 +244,25 @@ export class SpFrameTimeChart {
     let appNameMap: Map<number, string> = new Map();
     if (this.flagConfig?.AnimationAnalysis === 'Enabled') {
       if (process.processName?.startsWith('render_service')) {
+        let targetRowList = processRow.childrenList.filter(
+          (childRow) => childRow.rowType === 'thread' && childRow.name.startsWith('render_service')
+        );
         let nameArr: { name: string }[] = await queryFrameApp();
         if (nameArr && nameArr.length > 0) {
           let currentName = nameArr[0].name;
           let frameChart = await this.initFrameChart(processRow, nameArr);
-          if (secondRow !== null) {
-            processRow.addChildTraceRowAfter(frameChart, secondRow);
-          } else if (firstRow !== null) {
-            processRow.addChildTraceRowAfter(frameChart, firstRow);
+          if (firstRow !== null) {
+            processRow.addChildTraceRowBefore(frameChart, firstRow);
+          } else if (secondRow !== null) {
+            processRow.addChildTraceRowBefore(frameChart, secondRow);
           } else {
-            processRow.addChildTraceRowSpecifyLocation(frameChart, 0);
+            processRow.addChildTraceRowBefore(frameChart, targetRowList[0]);
           }
           let appNameList = await queryDynamicIdAndNameData();
           appNameList.forEach((item) => {
             appNameMap.set(item.id, item.appName);
           });
-          let animationRanges = await this.initAnimationChart(processRow, firstRow, secondRow);
+          let animationRanges = await this.initAnimationChart(processRow);
           await this.initDynamicCurveChart(appNameMap, frameChart, currentName, animationRanges);
           await this.initFrameSpacing(appNameMap, frameChart, currentName, animationRanges);
         }
@@ -357,11 +360,7 @@ export class SpFrameTimeChart {
     };
   }
 
-  async initAnimationChart(
-    processRow: TraceRow<BaseStruct>,
-    firstRow: TraceRow<BaseStruct>,
-    secondRow: TraceRow<BaseStruct>
-  ): Promise<AnimationRanges[]> {
+  async initAnimationChart(processRow: TraceRow<BaseStruct>): Promise<AnimationRanges[]> {
     let animationRanges: AnimationRanges[] = [];
     let frameAnimationRow = TraceRow.skeleton<FrameAnimationStruct>();
 
@@ -393,13 +392,7 @@ export class SpFrameTimeChart {
     frameAnimationRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     frameAnimationRow.selectChangeHandler = this.trace.selectChangeHandler;
     this.animationThreadHandler(frameAnimationRow);
-    if (firstRow !== null) {
-      processRow.addChildTraceRowBefore(frameAnimationRow, firstRow);
-    } else if (secondRow !== null) {
-      processRow.addChildTraceRowBefore(frameAnimationRow, secondRow);
-    } else {
-      processRow.addChildTraceRowSpecifyLocation(frameAnimationRow, 0);
-    }
+    processRow.addChildTraceRowSpecifyLocation(frameAnimationRow, 0);
     return animationRanges;
   }
 
diff --git a/ide/src/trace/component/chart/SpHiPerf.ts b/ide/src/trace/component/chart/SpHiPerf.ts
index 48fd64cb9b3e7b5b5952f8dae72d3dda57f588e5..5d9f09aeec2aff97d38e3405fe05e6573ee7f841 100644
--- a/ide/src/trace/component/chart/SpHiPerf.ts
+++ b/ide/src/trace/component/chart/SpHiPerf.ts
@@ -285,9 +285,15 @@ export class SpHiPerf {
     row.addRowSettingPop();
     row.rowSetting = 'enable';
     this.setCallChartRowSetting(row, cpuData, pt);
-    row.onThreadHandler = rowThreadHandler<HiPerfCallChartRender>('HiPerf-callchart', 'context', {
-      type: 'HiPerf-callchart',
-    }, row, this.trace);
+    row.onThreadHandler = rowThreadHandler<HiPerfCallChartRender>(
+      'HiPerf-callchart',
+      'context',
+      {
+        type: 'HiPerf-callchart',
+      },
+      row,
+      this.trace
+    );
   }
 
   setCallChartRowSetting(row: TraceRow<HiPerfCallChartStruct>, cpuData: Array<any>, pt: Map<string, any>): void {
@@ -363,16 +369,22 @@ export class SpHiPerf {
     cpuMergeRow.findHoverStruct = (): void => {
       HiPerfCpuStruct.hoverStruct = cpuMergeRow.getHoverStruct(false, (TraceRow.range?.scale || 50) <= 30_000_000);
     };
-    cpuMergeRow.onThreadHandler = this.rowThreadHandler<HiperfCpuRender2>('HiPerf-Cpu-2', 'context', {
-      type: 'HiPerf-Cpu-Merge',
-      maxCpu: this.maxCpuId + 1,
-      intervalPerf: SpHiPerf.stringResult?.fValue || 1,
-    }, cpuMergeRow, this.trace);
+    cpuMergeRow.onThreadHandler = this.rowThreadHandler<HiperfCpuRender2>(
+      'HiPerf-Cpu-2',
+      'context',
+      {
+        type: 'HiPerf-Cpu-Merge',
+        maxCpu: this.maxCpuId + 1,
+        intervalPerf: SpHiPerf.stringResult?.fValue || 1,
+      },
+      cpuMergeRow,
+      this.trace
+    );
     this.rowFolder.addChildTraceRow(cpuMergeRow);
     this.rowList?.push(cpuMergeRow);
   }
 
-  rowThreadHandler<T>(tag: string,  contextField: string, arg: any, row: TraceRow<any>, trace: SpSystemTrace) {
+  rowThreadHandler<T>(tag: string, contextField: string, arg: any, row: TraceRow<any>, trace: SpSystemTrace) {
     return (useCache: boolean): void => {
       let context: CanvasRenderingContext2D = getRowContext(row, trace);
       row.canvasSave(context);
@@ -416,11 +428,17 @@ export class SpHiPerf {
       perfCpuRow.findHoverStruct = (): void => {
         HiPerfCpuStruct.hoverStruct = perfCpuRow.getHoverStruct(false, (TraceRow.range?.scale || 50) <= 30_000_000);
       };
-      perfCpuRow.onThreadHandler = this.rowThreadHandler<HiperfCpuRender2>('HiPerf-Cpu-2', 'context', {
-        type: `HiPerf-Cpu-${i}`,
-        maxCpu: this.maxCpuId + 1,
-        intervalPerf: SpHiPerf.stringResult?.fValue || 1,
-      }, perfCpuRow, this.trace);
+      perfCpuRow.onThreadHandler = this.rowThreadHandler<HiperfCpuRender2>(
+        'HiPerf-Cpu-2',
+        'context',
+        {
+          type: `HiPerf-Cpu-${i}`,
+          maxCpu: this.maxCpuId + 1,
+          intervalPerf: SpHiPerf.stringResult?.fValue || 1,
+        },
+        perfCpuRow,
+        this.trace
+      );
       this.rowFolder.addChildTraceRow(perfCpuRow);
       this.rowList?.push(perfCpuRow);
     }
@@ -448,7 +466,8 @@ export class SpHiPerf {
       row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
       row.selectChangeHandler = this.trace.selectChangeHandler;
       row.supplierFrame = (): Promise<any> => {
-        return hiperfProcessDataSender(process.pid,
+        return hiperfProcessDataSender(
+          process.pid,
           row.drawType,
           this.maxCpuId + 1,
           SpHiPerf.stringResult?.fValue || 1,
@@ -460,10 +479,16 @@ export class SpHiPerf {
       row.findHoverStruct = (): void => {
         HiPerfProcessStruct.hoverStruct = row.getHoverStruct(false, (TraceRow.range?.scale || 50) <= 30_000_000);
       };
-      row.onThreadHandler = this.rowThreadHandler<HiperfProcessRender2>('HiPerf-Process-2', 'context', {
-        type: `HiPerf-Process-${row.index}`,
-        intervalPerf: SpHiPerf.stringResult?.fValue || 1,
-      }, row, this.trace);
+      row.onThreadHandler = this.rowThreadHandler<HiperfProcessRender2>(
+        'HiPerf-Process-2',
+        'context',
+        {
+          type: `HiPerf-Process-${row.index}`,
+          intervalPerf: SpHiPerf.stringResult?.fValue || 1,
+        },
+        row,
+        this.trace
+      );
       this.rowFolder.addChildTraceRow(row);
       this.rowList?.push(row);
       this.addHiPerfThreadRow(array, row);
@@ -500,10 +525,16 @@ export class SpHiPerf {
       thread.findHoverStruct = (): void => {
         HiPerfThreadStruct.hoverStruct = thread.getHoverStruct(false, (TraceRow.range?.scale || 50) <= 30_000_000);
       };
-      thread.onThreadHandler = this.rowThreadHandler<HiperfThreadRender2>('HiPerf-Thread-2', 'context', {
-        type: `HiPerf-Thread-${row.index}-${thread.index}`,
-        intervalPerf: SpHiPerf.stringResult?.fValue || 1,
-      }, thread, this.trace);
+      thread.onThreadHandler = this.rowThreadHandler<HiperfThreadRender2>(
+        'HiPerf-Thread-2',
+        'context',
+        {
+          type: `HiPerf-Thread-${row.index}-${thread.index}`,
+          intervalPerf: SpHiPerf.stringResult?.fValue || 1,
+        },
+        thread,
+        this.trace
+      );
       row.addChildTraceRow(thread);
       this.rowList?.push(thread);
     });
@@ -550,8 +581,9 @@ export class SpHiPerf {
         let perfCall = perfDataQuery.callChainMap.get(struct.callchain_id || 0);
         if (perfCall) {
           let perfName;
-          typeof perfCall.name === 'number' ? (perfName = SpSystemTrace.DATA_DICT.get(parseInt(perfCall.name))) :
-            (perfName = perfCall.name);
+          typeof perfCall.name === 'number'
+            ? (perfName = SpSystemTrace.DATA_DICT.get(parseInt(perfCall.name)))
+            : (perfName = perfCall.name);
           tip = `<span>${perfCall ? perfName : ''} (${perfCall ? perfCall.depth : '0'} other frames)</span>`;
         }
       }
diff --git a/ide/src/trace/component/chart/SpHiSysEnergyChart.ts b/ide/src/trace/component/chart/SpHiSysEnergyChart.ts
index aec455284f880fd33b6f2d89bcc2cf2c0e733dfd..88b32c0541da3ba77374afc30fead41104a549c2 100644
--- a/ide/src/trace/component/chart/SpHiSysEnergyChart.ts
+++ b/ide/src/trace/component/chart/SpHiSysEnergyChart.ts
@@ -17,35 +17,26 @@ import { SpSystemTrace } from '../SpSystemTrace';
 import { info } from '../../../log/Log';
 import { TraceRow } from '../trace/base/TraceRow';
 import { BaseStruct } from '../../bean/BaseStruct';
-import {
-  EnergyAnomalyRender,
-  EnergyAnomalyStruct
-} from '../../database/ui-worker/ProcedureWorkerEnergyAnomaly';
-import {
-  EnergySystemStruct,
-  EnergySystemRender
-} from '../../database/ui-worker/ProcedureWorkerEnergySystem';
-import {
-  EnergyPowerStruct,
-  EnergyPowerRender
-} from '../../database/ui-worker/ProcedureWorkerEnergyPower';
-import {
-  EnergyStateStruct,
-  EnergyStateRender
-} from '../../database/ui-worker/ProcedureWorkerEnergyState';
+import { EnergyAnomalyRender, EnergyAnomalyStruct } from '../../database/ui-worker/ProcedureWorkerEnergyAnomaly';
+import { EnergySystemStruct, EnergySystemRender } from '../../database/ui-worker/ProcedureWorkerEnergySystem';
+import { EnergyPowerStruct, EnergyPowerRender } from '../../database/ui-worker/ProcedureWorkerEnergyPower';
+import { EnergyStateStruct, EnergyStateRender } from '../../database/ui-worker/ProcedureWorkerEnergyState';
 import { renders } from '../../database/ui-worker/ProcedureWorker';
 import { EmptyRender } from '../../database/ui-worker/cpu/ProcedureWorkerCPU';
 import { TreeItemData } from '../../../base-ui/tree/LitTree';
 import {
   energySysEventSender,
-  hiSysEnergyAnomalyDataSender, hiSysEnergyPowerSender,
-  hiSysEnergyStateSender
+  hiSysEnergyAnomalyDataSender,
+  hiSysEnergyPowerSender,
+  hiSysEnergyStateSender,
 } from '../../database/data-trafic/EnergySysEventSender';
 import {
   queryAnomalyData,
   queryConfigEnergyAppName,
   queryEnergyAppName,
-  queryEnergyEventExits, queryMaxStateValue, queryStateInitValue
+  queryEnergyEventExits,
+  queryMaxStateValue,
+  queryStateInitValue,
 } from '../../database/sql/SqlLite.sql';
 import { queryPowerData } from '../../database/sql/ProcessThread.sql';
 import { NUM_200, NUM_3 } from '../../bean/NumBean';
@@ -104,7 +95,9 @@ export class SpHiSysEnergyChart {
 
   async init(): Promise<void> {
     let result = await queryEnergyEventExits();
-    if (result.length <= 0) {return}
+    if (result.length <= 0) {
+      return;
+    }
     let anomalyData = await queryAnomalyData();
     let powerData = await queryPowerData();
     for (let index = 0; index < anomalyData.length; index++) {
@@ -130,8 +123,8 @@ export class SpHiSysEnergyChart {
     await this.initEnergyChartRow();
     this.energyTraceRow!.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     this.energyTraceRow!.selectChangeHandler = this.trace.selectChangeHandler;
-    this.energyTraceRow!.supplier = (): Promise<BaseStruct[]> => new Promise<Array<BaseStruct>>(
-      (resolve) => resolve([]));
+    this.energyTraceRow!.supplier = (): Promise<BaseStruct[]> =>
+      new Promise<Array<BaseStruct>>((resolve) => resolve([]));
     this.energyTraceRow!.onThreadHandler = (useCache: boolean): void => {
       this.energyTraceRow?.canvasSave(this.trace.canvasPanelCtx!);
       if (this.energyTraceRow!.expansion) {
@@ -159,7 +152,7 @@ export class SpHiSysEnergyChart {
       }, NUM_200);
     });
     this.trace.rowsEL?.appendChild(this.energyTraceRow!);
-  };
+  }
 
   private initAnomaly = (): void => {
     let time = new Date().getTime();
@@ -308,9 +301,9 @@ export class SpHiSysEnergyChart {
             useCache: useCache,
             type: `energyState${index}`,
             maxState: maxStateData[0].maxValue,
-            maxStateName: maxStateData[0].type.toLocaleLowerCase().endsWith('br_switch_state') ?
-              '-1' :
-              maxStateTotal.toString(),
+            maxStateName: maxStateData[0].type.toLocaleLowerCase().endsWith('br_switch_state')
+              ? '-1'
+              : maxStateTotal.toString(),
           },
           stateTraceRow
         );
@@ -322,10 +315,12 @@ export class SpHiSysEnergyChart {
     }
   };
 
-  private getMaxStateTotal(maxStateData: Array<{
-    type: string;
-    maxValue: number;
-  }>): string {
+  private getMaxStateTotal(
+    maxStateData: Array<{
+      type: string;
+      maxValue: number;
+    }>
+  ): string {
     let maxStateTotal = maxStateData[0].maxValue.toString();
     let statType = maxStateData[0].type.toLocaleLowerCase();
     if (statType.includes('state') && !statType.endsWith('br_switch_state')) {
@@ -363,9 +358,7 @@ export class SpHiSysEnergyChart {
           EnergyStateStruct.hoverEnergyStateStruct?.value === 1 ? 'disable' : 'enable'
         }</span>`;
         if (EnergyStateStruct.hoverEnergyStateStruct?.type!.toLocaleLowerCase().endsWith('br_switch_state')) {
-          tip = `<span>${SpHiSysEnergyChart.getBlueToothState(
-            EnergyStateStruct.hoverEnergyStateStruct?.value
-          )}</span>`;
+          tip = `<span>${SpHiSysEnergyChart.getBlueToothState(EnergyStateStruct.hoverEnergyStateStruct?.value)}</span>`;
         }
       } else {
         tip = `<span>value: ${EnergyStateStruct.hoverEnergyStateStruct?.value?.toFixed(2) || 0}</span>`;
@@ -459,11 +452,7 @@ export class SpHiSysEnergyChart {
     systemTraceRow.setAttribute('children', '');
     systemTraceRow.name = 'System Event';
     systemTraceRow.focusHandler = (): void => {
-      this.trace?.displayTip(
-        systemTraceRow,
-        EnergySystemStruct.hoverEnergySystemStruct,
-        this.getSystemFocusHtml()
-      );
+      this.trace?.displayTip(systemTraceRow, EnergySystemStruct.hoverEnergySystemStruct, this.getSystemFocusHtml());
     };
     return systemTraceRow;
   }
@@ -543,11 +532,7 @@ export class SpHiSysEnergyChart {
     powerTraceRow.setAttribute('children', '');
     powerTraceRow.name = 'Power';
     powerTraceRow.focusHandler = (): void => {
-      this.trace?.displayTip(
-        powerTraceRow,
-        EnergyPowerStruct.hoverEnergyPowerStruct,
-        this.getPowerFocusHtml()
-      );
+      this.trace?.displayTip(powerTraceRow, EnergyPowerStruct.hoverEnergyPowerStruct, this.getPowerFocusHtml());
     };
     return powerTraceRow;
   }
@@ -555,45 +540,41 @@ export class SpHiSysEnergyChart {
   private getPowerData(items: any): EnergyPowerStruct[] {
     let powerDataMap: any = {};
     let appNameList: string[] = [];
-    items.forEach((item: {
-      id: number,
-      startNS: number,
-      eventName: string,
-      appKey: string,
-      eventValue: string
-    }): void => {
-      let dataItem = powerDataMap[item.startNS];
-      if (dataItem === undefined) {
-        if (item.appKey === 'APPNAME') {
-          let appMap: any = {};
-          let appNames = item.eventValue.split(',');
-          appNameList = appNames;
-          if (appNames.length > 0) {
-            for (let appNamesKey of appNames) {
-              appMap[appNamesKey] = new EnergyPowerStruct();
-              appMap[appNamesKey].name = appNamesKey;
-              appMap[appNamesKey].ts = item.startNS;
+    items.forEach(
+      (item: { id: number; startNS: number; eventName: string; appKey: string; eventValue: string }): void => {
+        let dataItem = powerDataMap[item.startNS];
+        if (dataItem === undefined) {
+          if (item.appKey === 'APPNAME') {
+            let appMap: any = {};
+            let appNames = item.eventValue.split(',');
+            appNameList = appNames;
+            if (appNames.length > 0) {
+              for (let appNamesKey of appNames) {
+                appMap[appNamesKey] = new EnergyPowerStruct();
+                appMap[appNamesKey].name = appNamesKey;
+                appMap[appNamesKey].ts = item.startNS;
+              }
+              powerDataMap[item.startNS] = appMap;
             }
-            powerDataMap[item.startNS] = appMap;
           }
-        }
-      } else {
-        if (item.appKey !== 'APPNAME') {
-          this.powerDataMap(item.eventName, item.eventValue, appNameList, dataItem);
         } else {
-          let dataMap = powerDataMap[item.startNS];
-          let appNames = item.eventValue.split(',');
-          appNameList = appNames;
-          if (appNames.length > 0) {
-            for (let appNamesKey of appNames) {
-              dataMap[appNamesKey] = new EnergyPowerStruct();
-              dataMap[appNamesKey].name = appNamesKey;
-              dataMap[appNamesKey].ts = item.startNS;
+          if (item.appKey !== 'APPNAME') {
+            this.powerDataMap(item.eventName, item.eventValue, appNameList, dataItem);
+          } else {
+            let dataMap = powerDataMap[item.startNS];
+            let appNames = item.eventValue.split(',');
+            appNameList = appNames;
+            if (appNames.length > 0) {
+              for (let appNamesKey of appNames) {
+                dataMap[appNamesKey] = new EnergyPowerStruct();
+                dataMap[appNamesKey].name = appNamesKey;
+                dataMap[appNamesKey].ts = item.startNS;
+              }
             }
           }
         }
       }
-    });
+    );
     return Object.values(powerDataMap);
   }
 
diff --git a/ide/src/trace/component/chart/SpHiSysEventChart.ts b/ide/src/trace/component/chart/SpHiSysEventChart.ts
index 0302323800900e51a90f31cb3a95f6e63b762c56..737d28b0341fb08e76eb3ae909c0586f87645334 100644
--- a/ide/src/trace/component/chart/SpHiSysEventChart.ts
+++ b/ide/src/trace/component/chart/SpHiSysEventChart.ts
@@ -18,7 +18,7 @@ import { TraceRow } from '../trace/base/TraceRow';
 import { renders } from '../../database/ui-worker/ProcedureWorker';
 import { HiSysEventRender, HiSysEventStruct } from '../../database/ui-worker/ProcedureWorkerHiSysEvent';
 import { hiSysEventDataSender } from '../../database/data-trafic/HiSysEventDataSender';
-import {queryHiSysEventData} from "../../database/sql/Perf.sql";
+import { queryHiSysEventData } from '../../database/sql/Perf.sql';
 
 export class SpHiSysEventChart {
   private trace: SpSystemTrace;
diff --git a/ide/src/trace/component/chart/SpIrqChart.ts b/ide/src/trace/component/chart/SpIrqChart.ts
index c56d65db3c53af162636dd489cc57daf0c26c245..6ea00955d53d2a76aa5665df83b1e09094008aea 100644
--- a/ide/src/trace/component/chart/SpIrqChart.ts
+++ b/ide/src/trace/component/chart/SpIrqChart.ts
@@ -80,15 +80,25 @@ export class SpIrqChart {
       });
     };
     traceRow.focusHandler = (ev) => {
-      this.trace?.displayTip(traceRow, IrqStruct.hoverIrqStruct, `<span>${IrqStruct.hoverIrqStruct?.name || ''}</span>`);
+      this.trace?.displayTip(
+        traceRow,
+        IrqStruct.hoverIrqStruct,
+        `<span>${IrqStruct.hoverIrqStruct?.name || ''}</span>`
+      );
     };
     traceRow.findHoverStruct = () => {
       IrqStruct.hoverIrqStruct = traceRow.getHoverStruct();
     };
-    traceRow.onThreadHandler = rowThreadHandler<IrqRender>('irq', 'context', {
-      type: it.name,
-      index: index,
-    }, traceRow, this.trace);
+    traceRow.onThreadHandler = rowThreadHandler<IrqRender>(
+      'irq',
+      'context',
+      {
+        type: it.name,
+        index: index,
+      },
+      traceRow,
+      this.trace
+    );
     folder.addChildTraceRow(traceRow);
   }
 
diff --git a/ide/src/trace/component/chart/SpLTPO.ts b/ide/src/trace/component/chart/SpLTPO.ts
index bc6038b3dbf6b3fdce004dafc7c8455856c56f25..b3c498c45376a37b0569440288d6939ccf835fe3 100644
--- a/ide/src/trace/component/chart/SpLTPO.ts
+++ b/ide/src/trace/component/chart/SpLTPO.ts
@@ -16,6 +16,7 @@
 import { SpSystemTrace } from '../SpSystemTrace';
 import { TraceRow } from '../trace/base/TraceRow';
 import { renders } from '../../database/ui-worker/ProcedureWorker';
+import { FlagsConfig } from '../SpFlags';
 import { CpuFreqStruct } from '../../database/ui-worker/ProcedureWorkerFreq';
 import {
   queryFanceNameList,
@@ -23,9 +24,9 @@ import {
   queryRealFpsList,
   queryRSNowTimeList,
   querySignaledList,
-  querySkipDataList
+  querySkipDataList,
 } from '../../database/sql/Ltpo.sql';
-import { LtpoRender, LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO'
+import { LtpoRender, LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO';
 import { HitchTimeStruct, hitchTimeRender } from '../../database/ui-worker/ProcedureWorkerHitchTime';
 import { lostFrameSender } from '../../database/data-trafic/LostFrameSender';
 import { fps } from '../../database/ui-worker/ProcedureWorkerFPS';
@@ -54,6 +55,10 @@ export class SpLtpoChart {
   }
 
   async init() {
+    let loadLtpo: boolean = FlagsConfig.getFlagsConfigEnableStatus('LTPO');
+    if (!loadLtpo) {
+      return;
+    }
     SpLtpoChart.ltpoDataArr = [];
     SpLtpoChart.fanceNameList = await queryFanceNameList();
     SpLtpoChart.fpsnameList = await queryFpsNameList();
@@ -65,7 +70,7 @@ export class SpLtpoChart {
     this.initFpsName();
     if (SpLtpoChart.realFpsList.length > 0) {
       this.initRealFps();
-    };
+    }
     this.initRsNowTime();
     //特殊情况：当前trace的RSHardwareThrea泳道最前面多一个单独的fence
     if (SpLtpoChart.fpsnameList.length > 0 && SpLtpoChart.fanceNameList.length - SpLtpoChart.fpsnameList.length === 1) {
@@ -78,21 +83,27 @@ export class SpLtpoChart {
       let fanceIndex = 0;
       while (fpsIndex < SpLtpoChart.fpsnameList!.length) {
         if (SpLtpoChart.fanceNameList[fanceIndex] && SpLtpoChart.fpsnameList[fpsIndex]) {
-          if (SpLtpoChart.fanceNameList[fanceIndex].ts! > SpLtpoChart.fpsnameList[fpsIndex].ts! &&
-            SpLtpoChart.fanceNameList[fanceIndex].ts! < SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!) {
+          if (
+            SpLtpoChart.fanceNameList[fanceIndex].ts! > SpLtpoChart.fpsnameList[fpsIndex].ts! &&
+            SpLtpoChart.fanceNameList[fanceIndex].ts! <
+              SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!
+          ) {
             fpsIndex++;
             fanceIndex++;
           } else if (SpLtpoChart.fanceNameList[fanceIndex].ts! < SpLtpoChart.fpsnameList[fpsIndex].ts!) {
             SpLtpoChart.fanceNameList.splice(fanceIndex, 1);
-          } else if (SpLtpoChart.fanceNameList[fanceIndex].ts! > SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!) {
+          } else if (
+            SpLtpoChart.fanceNameList[fanceIndex].ts! >
+            SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!
+          ) {
             SpLtpoChart.fpsnameList.splice(fpsIndex, 1);
           }
         } else if (SpLtpoChart.fanceNameList[fanceIndex] && !SpLtpoChart.fpsnameList[fpsIndex]) {
           SpLtpoChart.fanceNameList.splice(fanceIndex);
         } else if (!SpLtpoChart.fanceNameList[fanceIndex] && SpLtpoChart.fpsnameList[fpsIndex]) {
-          SpLtpoChart.fpsnameList.splice(fpsIndex)
+          SpLtpoChart.fpsnameList.splice(fpsIndex);
         } else {
-          return
+          return;
         }
       }
     }
@@ -103,14 +114,23 @@ export class SpLtpoChart {
         let startTime = Number(SpLtpoChart.fanceNameList[i]!.ts);
         let durtaion = Number(SpLtpoChart.fanceNameList[i]!.dur);
         if (SpLtpoChart.fanceNameList[i]!.signaled) {
-          this.pushLtpoData(SpLtpoChart.ltpoDataArr, SpLtpoChart.fanceNameList[i]!.fanceId!, tmpFps, signaled, startTime, durtaion, 0, 0);
+          this.pushLtpoData(
+            SpLtpoChart.ltpoDataArr,
+            SpLtpoChart.fanceNameList[i]!.fanceId!,
+            tmpFps,
+            signaled,
+            startTime,
+            durtaion,
+            0,
+            0
+          );
         } else {
           this.pushLtpoData(SpLtpoChart.ltpoDataArr, SpLtpoChart.fanceNameList[i]!.fanceId!, tmpFps, 0, 0, 0, 0, 0);
         }
       }
     } else {
       return;
-    };
+    }
     this.fenceToFps();
     this.fpsToRenderService();
     this.filterNowTime();
@@ -122,7 +142,7 @@ export class SpLtpoChart {
   //提取FenceId
   initFenceName(): void {
     SpLtpoChart.fanceNameList.map((item) => {
-      let cutFanceNameArr = item.name!.split(" ");
+      let cutFanceNameArr = item.name!.split(' ');
       if (cutFanceNameArr[cutFanceNameArr.length - 1] === 'signaled') {
         item.fanceId = Number(cutFanceNameArr[2]);
         item.signaled = 1;
@@ -130,8 +150,8 @@ export class SpLtpoChart {
       } else {
         item.fanceId = Number(cutFanceNameArr[cutFanceNameArr.length - 1]);
       }
-    })
-  };
+    });
+  }
   //从数据库中查询的name中提取fps
   initFpsName(): void {
     SpLtpoChart.fpsnameList.map((item) => {
@@ -144,8 +164,8 @@ export class SpLtpoChart {
         let cutFpsNameArr = item.name!.split('=');
         item.fps = Number(cutFpsNameArr[cutFpsNameArr.length - 1]);
       }
-    })
-  };
+    });
+  }
   //如果存在切帧，提取fps
   initRealFps(): void {
     SpLtpoChart.realFpsList.map((item) => {
@@ -153,33 +173,38 @@ export class SpLtpoChart {
       item.fps = Number(cutRealFpsArr[cutRealFpsArr.length - 1]);
     });
     this.setRealFps();
-  };
+  }
   //从render_service中获取nowTime
   initRsNowTime(): void {
     SpLtpoChart.rsNowTimeList.map((item) => {
       let cutRsNameArr = item.name!.split(' ')[2].split(':');
       item.nowTime = Number(cutRsNameArr[cutRsNameArr.length - 1]);
-    })
-  };
+    });
+  }
   //处理fps
   setRealFps(): void {
     let moreIndex = 0;
     let reallIndex = 0;
     while (moreIndex < SpLtpoChart.fpsnameList.length) {
-      let itemMoreEndTs = Number(SpLtpoChart.fpsnameList[moreIndex].ts) + Number(SpLtpoChart.fpsnameList[moreIndex].dur);
-      if (Number(SpLtpoChart.realFpsList[reallIndex].ts) < itemMoreEndTs) {//此时这一帧包含了两个fps，将真实的fps赋给SpLtpoChart.fpsnameList
+      let itemMoreEndTs =
+        Number(SpLtpoChart.fpsnameList[moreIndex].ts) + Number(SpLtpoChart.fpsnameList[moreIndex].dur);
+      if (Number(SpLtpoChart.realFpsList[reallIndex].ts) < itemMoreEndTs) {
+        //此时这一帧包含了两个fps，将真实的fps赋给SpLtpoChart.fpsnameList
         SpLtpoChart.fpsnameList[moreIndex].fps = SpLtpoChart.realFpsList[reallIndex].fps;
         moreIndex++;
-        if (reallIndex < SpLtpoChart.realFpsList.length - 1) {//判断SpLtpoChart.realFpsList有没有遍历完，没有就继续
+        if (reallIndex < SpLtpoChart.realFpsList.length - 1) {
+          //判断SpLtpoChart.realFpsList有没有遍历完，没有就继续
           reallIndex++;
-        } else {//否则跳出
+        } else {
+          //否则跳出
           return;
         }
-      } else {//如果不满足的话，SpLtpoChart.fpsnameList数组往下走，而reallIndex不变
+      } else {
+        //如果不满足的话，SpLtpoChart.fpsnameList数组往下走，而reallIndex不变
         moreIndex++;
       }
     }
-  };
+  }
   //RSHardwareThread泳道的fps数组集成FenceId数组中的FenceId和signaled
   fenceToFps() {
     if (SpLtpoChart.fanceNameList.length === SpLtpoChart.fpsnameList.length) {
@@ -187,17 +212,23 @@ export class SpLtpoChart {
       let fpsIndex = 0;
       while (fpsIndex < SpLtpoChart.fpsnameList.length) {
         if (SpLtpoChart.fpsnameList[fpsIndex] && SpLtpoChart.fanceNameList[fenceIndex]) {
-          if (SpLtpoChart.fanceNameList[fenceIndex].ts! > SpLtpoChart.fpsnameList[fpsIndex].ts! &&
-            SpLtpoChart.fanceNameList[fenceIndex].ts! < (SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!)) {
+          if (
+            SpLtpoChart.fanceNameList[fenceIndex].ts! > SpLtpoChart.fpsnameList[fpsIndex].ts! &&
+            SpLtpoChart.fanceNameList[fenceIndex].ts! <
+              SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!
+          ) {
             SpLtpoChart.fpsnameList[fpsIndex].fanceId = SpLtpoChart.fanceNameList[fenceIndex].fanceId;
             if (SpLtpoChart.fanceNameList[fenceIndex].signaled) {
               SpLtpoChart.fpsnameList[fpsIndex].signaled = SpLtpoChart.fanceNameList[fenceIndex].signaled;
-            };
+            }
             fenceIndex++;
             fpsIndex++;
           } else if (SpLtpoChart.fanceNameList[fenceIndex].ts! < SpLtpoChart.fpsnameList[fpsIndex].ts!) {
             fenceIndex++;
-          } else if (SpLtpoChart.fanceNameList[fenceIndex].ts! > (SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!)) {
+          } else if (
+            SpLtpoChart.fanceNameList[fenceIndex].ts! >
+            SpLtpoChart.fpsnameList[fpsIndex].ts! + SpLtpoChart.fpsnameList[fpsIndex].dur!
+          ) {
             fpsIndex++;
           }
         } else {
@@ -205,7 +236,7 @@ export class SpLtpoChart {
         }
       }
     }
-  };
+  }
   //render_service的nowTime 集成RSHardThread泳道Fps数组的FenceId和Signaled
   fpsToRenderService(): void {
     if (SpLtpoChart.signaledList.length || SpLtpoChart.skipDataList.length) {
@@ -213,7 +244,8 @@ export class SpLtpoChart {
       let hardIndex = 0;
       while (rsIndex < SpLtpoChart.rsNowTimeList.length) {
         if (SpLtpoChart.fpsnameList[hardIndex] && SpLtpoChart.rsNowTimeList[rsIndex]) {
-          if (SpLtpoChart.rsNowTimeList[rsIndex].nowTime! > SpLtpoChart.fpsnameList[hardIndex].nowTime!) { //处理nowTime不一致的情况
+          if (SpLtpoChart.rsNowTimeList[rsIndex].nowTime! > SpLtpoChart.fpsnameList[hardIndex].nowTime!) {
+            //处理nowTime不一致的情况
             hardIndex++;
           } else if (SpLtpoChart.rsNowTimeList[rsIndex].nowTime! < SpLtpoChart.fpsnameList[hardIndex].nowTime!) {
             rsIndex++;
@@ -222,7 +254,7 @@ export class SpLtpoChart {
             SpLtpoChart.rsNowTimeList[rsIndex].fps = SpLtpoChart.fpsnameList[hardIndex].fps;
             if (SpLtpoChart.fpsnameList[hardIndex].signaled) {
               SpLtpoChart.rsNowTimeList[rsIndex].signaled = SpLtpoChart.fpsnameList[hardIndex].signaled;
-            };
+            }
             hardIndex++;
             rsIndex++;
           }
@@ -231,13 +263,13 @@ export class SpLtpoChart {
         }
       }
     }
-  };
+  }
   //render_service中找出skip和signaled，将需要从上平时间减去的时间计算出来存在对应的nowTime的item中
   filterNowTime(): void {
     let skipIndex = 0;
     let nowTimeIndex = 0;
     let cutTimeSum = 0;
-    let tempFps = 0;//如果中间出现signaled，记录一下fps；
+    let tempFps = 0; //如果中间出现signaled，记录一下fps；
     //将render_service中的nowTime数组中的skip去除掉
     SpLtpoChart.tempRsNowTimeList = SpLtpoChart.rsNowTimeList.filter((item) => item.fps);
     while (skipIndex < SpLtpoChart.skipDataList.length) {
@@ -248,8 +280,9 @@ export class SpLtpoChart {
             if (!SpLtpoChart.tempRsNowTimeList[nowTimeIndex].signaled) {
               cutTimeSum = 0;
             }
-          };
-          if (SpLtpoChart.tempRsNowTimeList[nowTimeIndex].signaled && nowTimeIndex > 0) {//两帧之间初心signaled
+          }
+          if (SpLtpoChart.tempRsNowTimeList[nowTimeIndex].signaled && nowTimeIndex > 0) {
+            //两帧之间初心signaled
             tempFps = SpLtpoChart.tempRsNowTimeList[nowTimeIndex].fps!;
             cutTimeSum += 1000 / tempFps;
             SpLtpoChart.tempRsNowTimeList[nowTimeIndex - 1].cutTime = cutTimeSum;
@@ -261,7 +294,7 @@ export class SpLtpoChart {
           }
         } else if (SpLtpoChart.skipDataList[skipIndex].ts! <= SpLtpoChart.tempRsNowTimeList[nowTimeIndex].ts!) {
           if (nowTimeIndex > 0) {
-            cutTimeSum += tempFps ? (1000 / tempFps) : (1000 / SpLtpoChart.tempRsNowTimeList[nowTimeIndex - 1].fps!);
+            cutTimeSum += tempFps ? 1000 / tempFps : 1000 / SpLtpoChart.tempRsNowTimeList[nowTimeIndex - 1].fps!;
           }
           skipIndex++;
         }
@@ -269,7 +302,7 @@ export class SpLtpoChart {
         return;
       }
     }
-  };
+  }
   pushLtpoData(
     lptoArr: any[] | undefined,
     fanceId: Number,
@@ -280,17 +313,15 @@ export class SpLtpoChart {
     nextStartTs: Number,
     nextDur: number
   ): void {
-    lptoArr?.push(
-      {
-        fanceId: fanceId,
-        fps: fps,
-        signaled: signaled,
-        startTs: startTs,
-        dur: dur,
-        nextStartTs: nextStartTs,
-        nextDur: nextDur
-      }
-    );
+    lptoArr?.push({
+      fanceId: fanceId,
+      fps: fps,
+      signaled: signaled,
+      startTs: startTs,
+      dur: dur,
+      nextStartTs: nextStartTs,
+      nextDur: nextDur,
+    });
   }
   sendDataHandle(presentArr: LtpoStruct[], ltpoDataArr: LtpoStruct[]): Array<LtpoStruct> {
     let sendDataArr: LtpoStruct[] = [];
@@ -302,13 +333,18 @@ export class SpLtpoChart {
     this.deleteUselessFence(presentArr, ltpoDataArr);
     while (presentIndex < presentArr.length) {
       if (presentArr[presentIndex] && ltpoDataArr[ltpoIndex]) {
-        if ((presentArr[presentIndex].startTime! + presentArr[presentIndex].dur! - (window as any).recordStartNS) === TraceRow.range!.totalNS) {
-          presentArr.splice(presentIndex, 1)
+        if (
+          presentArr[presentIndex].startTime! + presentArr[presentIndex].dur! - (window as any).recordStartNS ===
+          TraceRow.range!.totalNS
+        ) {
+          presentArr.splice(presentIndex, 1);
         }
         if (presentArr[presentIndex].presentId === ltpoDataArr[ltpoIndex].fanceId) {
           ltpoDataArr[ltpoIndex].startTs = Number(presentArr[presentIndex].startTime) - (window as any).recordStartNS;
           ltpoDataArr[ltpoIndex].dur = presentArr[presentIndex].dur;
-          ltpoDataArr[ltpoIndex].nextStartTs = presentArr[presentIndex + 1] ? Number(presentArr[presentIndex + 1].startTime) - (window as any).recordStartNS : '';
+          ltpoDataArr[ltpoIndex].nextStartTs = presentArr[presentIndex + 1]
+            ? Number(presentArr[presentIndex + 1].startTime) - (window as any).recordStartNS
+            : '';
           ltpoDataArr[ltpoIndex].nextDur = presentArr[presentIndex + 1] ? presentArr[presentIndex + 1].dur : 0;
           presentIndex++;
           ltpoIndex++;
@@ -327,8 +363,9 @@ export class SpLtpoChart {
       let cutSendDur: number | undefined = 0;
       if (ltpoDataArr[ltpoDataIndex].fanceId !== -1 && ltpoDataArr[ltpoDataIndex].nextDur) {
         sendStartTs = Number(ltpoDataArr[ltpoDataIndex].startTs) + Number(ltpoDataArr[ltpoDataIndex].dur);
-        sendDur = Number(ltpoDataArr[ltpoDataIndex].nextStartTs) + Number(ltpoDataArr[ltpoDataIndex].nextDur) - sendStartTs;
-      };
+        sendDur =
+          Number(ltpoDataArr[ltpoDataIndex].nextStartTs) + Number(ltpoDataArr[ltpoDataIndex].nextDur) - sendStartTs;
+      }
       if (ltpoDataArr[ltpoDataIndex] && SpLtpoChart.tempRsNowTimeList[tempRsNowTimeIndex]) {
         if (ltpoDataArr[ltpoDataIndex].fanceId! < SpLtpoChart.tempRsNowTimeList[tempRsNowTimeIndex].fanceId!) {
           ltpoDataIndex++;
@@ -336,38 +373,36 @@ export class SpLtpoChart {
           tempRsNowTimeIndex++;
         } else {
           if (SpLtpoChart.tempRsNowTimeList[tempRsNowTimeIndex].cutTime) {
-            cutSendDur = sendDur - (SpLtpoChart.tempRsNowTimeList[tempRsNowTimeIndex].cutTime! * 1000000);
+            cutSendDur = sendDur - SpLtpoChart.tempRsNowTimeList[tempRsNowTimeIndex].cutTime! * 1000000;
             cutSendDur = cutSendDur < 0 ? 0 : cutSendDur;
           }
         }
-      };
-      let tmpDur = cutSendDur ? ((Math.ceil(cutSendDur / 100000)) / 10) : (Math.ceil(sendDur / 100000)) / 10;
+      }
+      let tmpDur = cutSendDur ? Math.ceil(cutSendDur / 100000) / 10 : Math.ceil(sendDur / 100000) / 10;
       if (tmpDur < 170) {
-        sendDataArr.push(
-          {
-            dur: sendDur,
-            cutSendDur: cutSendDur,
-            value: 0,
-            startTs: sendStartTs,
-            pid: ltpoDataArr[ltpoDataIndex].fanceId,
-            itid: ltpoDataArr[ltpoDataIndex].fanceId,
-            name: undefined,
-            presentId: ltpoDataArr[ltpoDataIndex].fanceId,
-            ts: undefined,
-            fanceId: ltpoDataArr[ltpoDataIndex].fanceId,
-            fps: ltpoDataArr[ltpoDataIndex].fps,
-            nextStartTs: ltpoDataArr[ltpoDataIndex].nextStartTs,
-            nextDur: ltpoDataArr[ltpoDataIndex].nextDur,
-            translateY: undefined,
-            frame: undefined,
-            isHover: false,
-            startTime: undefined,
-            signaled: undefined,
-            nowTime: undefined,
-            cutTime: undefined
-          }
-        );
-      };
+        sendDataArr.push({
+          dur: sendDur,
+          cutSendDur: cutSendDur,
+          value: 0,
+          startTs: sendStartTs,
+          pid: ltpoDataArr[ltpoDataIndex].fanceId,
+          itid: ltpoDataArr[ltpoDataIndex].fanceId,
+          name: undefined,
+          presentId: ltpoDataArr[ltpoDataIndex].fanceId,
+          ts: undefined,
+          fanceId: ltpoDataArr[ltpoDataIndex].fanceId,
+          fps: ltpoDataArr[ltpoDataIndex].fps,
+          nextStartTs: ltpoDataArr[ltpoDataIndex].nextStartTs,
+          nextDur: ltpoDataArr[ltpoDataIndex].nextDur,
+          translateY: undefined,
+          frame: undefined,
+          isHover: false,
+          startTime: undefined,
+          signaled: undefined,
+          nowTime: undefined,
+          cutTime: undefined,
+        });
+      }
       ltpoDataIndex++;
       tempRsNowTimeIndex++;
     }
@@ -377,14 +412,16 @@ export class SpLtpoChart {
     //当有present缺失时：
     let presentIndex = 0;
     let fpsIndex = 0;
-    while (fpsIndex < ltpoDataArr.length) {//遍历present，把ltpoDataArr中不包含present中presentFance的item舍弃掉
+    while (fpsIndex < ltpoDataArr.length) {
+      //遍历present，把ltpoDataArr中不包含present中presentFance的item舍弃掉
       if (presentArr[presentIndex] && ltpoDataArr[fpsIndex]) {
         if (Number(presentArr[presentIndex].presentId) < Number(ltpoDataArr[fpsIndex].fanceId)) {
           presentArr.splice(presentIndex, 1);
         } else if (Number(presentArr[presentIndex].presentId) > Number(ltpoDataArr[fpsIndex].fanceId)) {
           ltpoDataArr.splice(fpsIndex, 1);
         } else {
-          if (presentIndex === presentArr.length - 1 && fpsIndex < ltpoDataArr.length - 1) {//此时present已经遍历到最后一项，如果ltpoDataArr还没有遍历到最后一项，就把后面的舍弃掉
+          if (presentIndex === presentArr.length - 1 && fpsIndex < ltpoDataArr.length - 1) {
+            //此时present已经遍历到最后一项，如果ltpoDataArr还没有遍历到最后一项，就把后面的舍弃掉
             ltpoDataArr.splice(fpsIndex);
           }
           presentIndex++;
@@ -393,7 +430,7 @@ export class SpLtpoChart {
       } else {
         return;
       }
-    };
+    }
   }
   //六舍七入
   specialValue(num: number) {
@@ -410,12 +447,9 @@ export class SpLtpoChart {
           return Math.floor(num);
         }
       }
-
     }
-
   }
 
-
   async initFolder() {
     SpLtpoChart.presentArr = [];
     let row: TraceRow<LtpoStruct> = TraceRow.skeleton<LtpoStruct>();
@@ -432,15 +466,21 @@ export class SpLtpoChart {
         SpLtpoChart.presentArr = res;
         SpLtpoChart.sendLTPODataArr = this.sendDataHandle(SpLtpoChart.presentArr, SpLtpoChart.ltpoDataArr);
         for (let i = 0; i < SpLtpoChart.sendLTPODataArr.length; i++) {
-          let tmpDur = SpLtpoChart.sendLTPODataArr[i].cutSendDur ? (SpLtpoChart.sendLTPODataArr[i].cutSendDur! / 1000000) : (SpLtpoChart.sendLTPODataArr[i].dur! / 1000000);
-          let mathValue = tmpDur * Number(SpLtpoChart.sendLTPODataArr[i].fps) / 1000 - 1;
+          let tmpDur = SpLtpoChart.sendLTPODataArr[i].cutSendDur
+            ? SpLtpoChart.sendLTPODataArr[i].cutSendDur! / 1000000
+            : SpLtpoChart.sendLTPODataArr[i].dur! / 1000000;
+          let mathValue = (tmpDur * Number(SpLtpoChart.sendLTPODataArr[i].fps)) / 1000 - 1;
           SpLtpoChart.sendLTPODataArr[i].value = this.specialValue(mathValue);
         }
         return SpLtpoChart.sendLTPODataArr;
-      })
-    }
+      });
+    };
     row.focusHandler = () => {
-      SpLtpoChart.trace?.displayTip(row!, LtpoStruct.hoverLtpoStruct, `<span>${(LtpoStruct.hoverLtpoStruct?.value!)}</span>`)
+      SpLtpoChart.trace?.displayTip(
+        row!,
+        LtpoStruct.hoverLtpoStruct,
+        `<span>${LtpoStruct.hoverLtpoStruct?.value!}</span>`
+      );
     };
     row.onThreadHandler = (useCache): void => {
       let context: CanvasRenderingContext2D;
@@ -455,7 +495,9 @@ export class SpLtpoChart {
           ltpoContext: context,
           useCache: useCache,
           type: `ltpo-present ${row.rowId}`,
-        }, row);
+        },
+        row
+      );
       row.canvasRestore(context);
     };
     SpLtpoChart.trace.rowsEL?.appendChild(row);
@@ -472,27 +514,28 @@ export class SpLtpoChart {
           let tmpVale = 0;
           let tmpDur = 0;
           if (SpLtpoChart.sendHitchDataArr[i].cutSendDur) {
-            tmpVale = (Math.ceil(((SpLtpoChart.sendHitchDataArr[i].cutSendDur! / 1000000) - (1000 / SpLtpoChart.sendHitchDataArr[i].fps!)) * 10)) / 10;
+            tmpVale =
+              SpLtpoChart.sendHitchDataArr[i].cutSendDur! / 1000000 - 1000 / SpLtpoChart.sendHitchDataArr[i].fps!;
             tmpDur = SpLtpoChart.sendHitchDataArr[i].cutSendDur! / 1000000;
           } else {
-            tmpVale = (Math.ceil(((SpLtpoChart.sendHitchDataArr[i].dur! / 1000000) - (1000 / SpLtpoChart.sendHitchDataArr[i].fps!)) * 10)) / 10;
+            tmpVale = SpLtpoChart.sendHitchDataArr[i].dur! / 1000000 - 1000 / SpLtpoChart.sendHitchDataArr[i].fps!;
             tmpDur = SpLtpoChart.sendHitchDataArr[i].dur! / 1000000;
           }
 
-          let mathValue = tmpDur * Number(SpLtpoChart.sendHitchDataArr[i].fps) / 1000 - 1;
-          SpLtpoChart.sendHitchDataArr[i].value = tmpVale! < 0 ? 0 : tmpVale;
-          SpLtpoChart.sendHitchDataArr[i].name = this.specialValue(mathValue).toString();
+          let mathValue = (tmpDur * Number(SpLtpoChart.sendHitchDataArr[i].fps)) / 1000 - 1;
+          let finalValue = tmpVale! < 0 ? 0 : tmpVale;
+          SpLtpoChart.sendHitchDataArr[i].value = this.specialValue(finalValue);
+          SpLtpoChart.sendHitchDataArr[i].name = this.specialValue(mathValue)!.toString();
         }
         return SpLtpoChart.sendHitchDataArr;
-      })
-    }
+      });
+    };
     row.focusHandler = () => {
-      let viewValue = (HitchTimeStruct.hoverHitchTimeStruct?.value!)! + '';
-      let rep = /[\.]/;
-      if (!rep.test(viewValue) && viewValue !== '0') {
-        viewValue += '.0';
-      }
-      SpLtpoChart.trace?.displayTip(row!, HitchTimeStruct.hoverHitchTimeStruct, `<span>${viewValue}</span>`)
+      SpLtpoChart.trace?.displayTip(
+        row!,
+        HitchTimeStruct.hoverHitchTimeStruct,
+        `<span>${HitchTimeStruct.hoverHitchTimeStruct?.value!}</span>`
+      );
     };
     row.onThreadHandler = (useCache): void => {
       let context: CanvasRenderingContext2D;
@@ -507,7 +550,9 @@ export class SpLtpoChart {
           hitchTimeContext: context,
           useCache: useCache,
           type: `hitch ${row.rowId}`,
-        }, row);
+        },
+        row
+      );
       row.canvasRestore(context);
     };
     SpLtpoChart.trace.rowsEL?.appendChild(row);
diff --git a/ide/src/trace/component/chart/SpLogChart.ts b/ide/src/trace/component/chart/SpLogChart.ts
index bd946543f8640b74f4bca0128405969469b09f83..65d3bfd7471a11a70935975c6f50e661a8f3ec25 100644
--- a/ide/src/trace/component/chart/SpLogChart.ts
+++ b/ide/src/trace/component/chart/SpLogChart.ts
@@ -18,7 +18,7 @@ import { TraceRow } from '../trace/base/TraceRow';
 import { renders } from '../../database/ui-worker/ProcedureWorker';
 import { LogRender, LogStruct } from '../../database/ui-worker/ProcedureWorkerLog';
 import { LogDataSender } from '../../database/data-trafic/LogDataSender';
-import {queryLogData} from "../../database/sql/SqlLite.sql";
+import { queryLogData } from '../../database/sql/SqlLite.sql';
 
 export class SpLogChart {
   private trace: SpSystemTrace;
diff --git a/ide/src/trace/component/chart/SpNativeMemoryChart.ts b/ide/src/trace/component/chart/SpNativeMemoryChart.ts
index e5e07d2f89bb25c0f8a819dd2c956a1eeae00fb1..cf2d836a80782654d2b8266cbaa709153d882bc2 100644
--- a/ide/src/trace/component/chart/SpNativeMemoryChart.ts
+++ b/ide/src/trace/component/chart/SpNativeMemoryChart.ts
@@ -27,10 +27,10 @@ import {
   nativeMemoryChartDataCacheSender,
   nativeMemoryChartDataSender,
 } from '../../database/data-trafic/NativeMemoryDataSender';
-import {queryNativeHookProcess, queryNativeHookStatisticsCount} from "../../database/sql/NativeHook.sql";
-import {queryHeapGroupByEvent} from "../../database/sql/SqlLite.sql";
-import {queryNativeMemoryRealTime} from "../../database/sql/Memory.sql";
-import {queryBootTime} from "../../database/sql/Clock.sql";
+import { queryNativeHookProcess, queryNativeHookStatisticsCount } from '../../database/sql/NativeHook.sql';
+import { queryHeapGroupByEvent } from '../../database/sql/SqlLite.sql';
+import { queryNativeMemoryRealTime } from '../../database/sql/Memory.sql';
+import { queryBootTime } from '../../database/sql/Clock.sql';
 
 export class SpNativeMemoryChart {
   static EVENT_HEAP: Array<NativeEventHeap> = [];
diff --git a/ide/src/trace/component/chart/SpPerfOutputDataChart.ts b/ide/src/trace/component/chart/SpPerfOutputDataChart.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0be4d1521bf7c3a1b5837e1a70ad3e18cf773ad3
--- /dev/null
+++ b/ide/src/trace/component/chart/SpPerfOutputDataChart.ts
@@ -0,0 +1,159 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SpSystemTrace } from '../SpSystemTrace';
+import { TraceRow } from '../trace/base/TraceRow';
+import { renders } from '../../database/ui-worker/ProcedureWorker';
+import { info } from '../../../log/Log';
+import { PerfToolRender, PerfToolStruct } from '../../database/ui-worker/ProcedureWorkerPerfTool';
+import { EmptyRender } from '../../database/ui-worker/cpu/ProcedureWorkerCPU';
+import { queryPerfOutputData, queryPerfToolsDur } from '../../database/sql/SqlLite.sql';
+
+export class SpPerfOutputDataChart {
+  private trace: SpSystemTrace;
+  private startTime: number | undefined;
+  private perfOutputArr: Array<string> | undefined;
+  private dur: number | undefined;
+
+  constructor(trace: SpSystemTrace) {
+    this.trace = trace;
+  }
+
+  async init(): Promise<void> {
+    let perfOutputData = await queryPerfOutputData();
+    if (perfOutputData.length === 0) {
+      return;
+    }
+    let perfToolsDur = await queryPerfToolsDur();
+    if (perfToolsDur.length > 0) {
+      this.dur = perfToolsDur[0].dur;
+    } else {
+      this.dur = 3000000000;
+    }
+    this.perfOutputArr = perfOutputData[0].name.split(':')[2].split(',');
+    let endTime: number = perfOutputData[0].ts;
+    this.startTime = endTime - window.recordStartNS - this.dur!;
+    if (this.startTime < 0) {
+      this.startTime = 0;
+    }
+    let folder = await this.initFolder();
+    this.trace.rowsEL?.appendChild(folder);
+    this.initData(folder);
+  }
+
+  private clockThreadHandler(
+    traceRow: TraceRow<PerfToolStruct>,
+    it: {
+      name: string;
+    },
+    perfId: number
+  ): void {
+    traceRow.onThreadHandler = (useCache): void => {
+      let context: CanvasRenderingContext2D;
+      if (traceRow.currentContext) {
+        context = traceRow.currentContext;
+      } else {
+        context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      }
+      traceRow.canvasSave(context);
+      (renders['perfTool'] as PerfToolRender).renderMainThread(
+        {
+          context: context,
+          useCache: useCache,
+          type: it.name,
+          index: perfId,
+        },
+        traceRow
+      );
+      traceRow.canvasRestore(context, this.trace);
+    };
+  }
+
+  async initData(folder: TraceRow<any>): Promise<void> {
+    let perfToolStartTime = new Date().getTime();
+    let perfToolList = [
+      { name: 'Application Process CPU Power Consumption(MAS)', idx: 27 },
+      { name: 'RS Process CPU Power Consumption(MAS)', idx: 28 },
+      { name: 'Media Process CPU Power Consumption(MAS)', idx: 29 },
+      { name: 'Foundation Process CPU Power Consumption(MAS)', idx: 30 },
+      { name: 'Gpu Power Consumption(MAS)', idx: 31 },
+      { name: 'DDR Power Consumption(MAS)', idx: 32 },
+      { name: 'IO Count', idx: 35 },
+      { name: 'Block Count', idx: 36 },
+      { name: 'IPI Count(Application Main Thread)', idx: 51 },
+      { name: 'IPI Count(RS)', idx: 52 }];
+    info('perfTools data size is: ', perfToolList!.length);
+    for (let i = 0; i < perfToolList.length; i++) {
+      const it = perfToolList[i];
+      let traceRow = TraceRow.skeleton<PerfToolStruct>();
+      traceRow.rowId = i + '';
+      traceRow.rowType = TraceRow.ROW_TYPE_PERF_TOOL;
+      traceRow.rowParentId = folder.rowId;
+      traceRow.style.height = '40px';
+      traceRow.name = it.name;
+      traceRow.rowHidden = !folder.expansion;
+      traceRow.setAttribute('children', '');
+      traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+      traceRow.selectChangeHandler = this.trace.selectChangeHandler;
+      traceRow.supplierFrame = (): Promise<PerfToolStruct[]> => {
+        let data = new PerfToolStruct();
+        data.startNS = this.startTime;
+        data.dur = this.dur;
+        data.count = this.perfOutputArr![it.idx];
+        data.id = i + 1;
+        data.name = it.name;
+        return new Promise<Array<any>>((resolve) => resolve([data]));
+      };
+      traceRow.findHoverStruct = (): void => {
+        PerfToolStruct.hoverPerfToolStruct = traceRow.getHoverStruct();
+      };
+      this.clockThreadHandler(traceRow, it, i);
+      folder.addChildTraceRow(traceRow);
+    }
+    let durTime = new Date().getTime() - perfToolStartTime;
+    info('The time to load the ClockData is: ', durTime);
+  }
+
+  async initFolder(): Promise<TraceRow<any>> {
+    let perfFolder = TraceRow.skeleton();
+    perfFolder.rowId = 'perfTool';
+    perfFolder.index = 0;
+    perfFolder.rowType = TraceRow.ROW_TYPE_PERF_TOOL_GROUP;
+    perfFolder.rowParentId = '';
+    perfFolder.style.height = '40px';
+    perfFolder.folder = true;
+    perfFolder.name = 'Perf Tools';
+    perfFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    perfFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    perfFolder.supplier = (): Promise<any[]> => new Promise<Array<any>>((resolve) => resolve([]));
+    perfFolder.onThreadHandler = (useCache): void => {
+      perfFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (perfFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, perfFolder.frame.width, perfFolder.frame.height);
+      } else {
+        (renders['empty'] as EmptyRender).renderMainThread(
+          {
+            context: this.trace.canvasPanelCtx,
+            useCache: useCache,
+            type: '',
+          },
+          perfFolder
+        );
+      }
+      perfFolder.canvasRestore(this.trace.canvasPanelCtx!, this.trace);
+    };
+    return perfFolder;
+  }
+}
diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts
index 4224bd749f8db0bf8c269b084b057c697eb7c538..e73b34ba8f826c70679ccccc0777defcaca72cc4 100644
--- a/ide/src/trace/component/chart/SpProcessChart.ts
+++ b/ide/src/trace/component/chart/SpProcessChart.ts
@@ -21,9 +21,9 @@ import { ProcessRender, ProcessStruct } from '../../database/ui-worker/Procedure
 import { ThreadRender, ThreadStruct } from '../../database/ui-worker/ProcedureWorkerThread';
 import { FuncRender, FuncStruct } from '../../database/ui-worker/ProcedureWorkerFunc';
 import { MemRender, ProcessMemStruct } from '../../database/ui-worker/ProcedureWorkerMem';
-import {folderSupplier, folderThreadHandler, getRowContext, rowThreadHandler, SpChartManager} from './SpChartManager';
+import { folderSupplier, folderThreadHandler, getRowContext, rowThreadHandler, SpChartManager } from './SpChartManager';
 import { JankRender, JankStruct } from '../../database/ui-worker/ProcedureWorkerJank';
-import {isFrameContainPoint, ns2xByTimeShaft, PairPoint} from '../../database/ui-worker/ProcedureWorkerCommon';
+import { isFrameContainPoint, ns2xByTimeShaft, PairPoint } from '../../database/ui-worker/ProcedureWorkerCommon';
 import { AppStartupRender, AppStartupStruct } from '../../database/ui-worker/ProcedureWorkerAppStartup';
 import { SoRender, SoStruct } from '../../database/ui-worker/ProcedureWorkerSoInit';
 import { FlagsConfig } from '../SpFlags';
@@ -78,8 +78,16 @@ export class SpProcessChart {
     this.trace = trace;
   }
 
-  initAsyncFuncData = async (): Promise<void> => {
-    let asyncFuncList: any[] = await queryProcessAsyncFunc();
+  initAsyncFuncData = async (traceRange: { startTs: number; endTs: number }): Promise<void> => {
+    const funcNamesArray = await queryAllFuncNames();
+    funcNamesArray.forEach((it) => {
+      this.funcNameMap.set(it.id, it.name);
+    });
+    let asyncFuncList: any[] = await queryProcessAsyncFunc(traceRange);
+    for (const func of asyncFuncList) {
+      func.funName = this.funcNameMap.get(func.id);
+      func.threadName = Utils.THREAD_MAP.get(func.tid);
+    }
     info('AsyncFuncData Count is: ', asyncFuncList!.length);
     this.processAsyncFuncArray = asyncFuncList;
     this.processAsyncFuncMap = Utils.groupBy(asyncFuncList, 'pid');
@@ -113,7 +121,11 @@ export class SpProcessChart {
     });
   };
 
-  private createDeliverInputEventRow(parentRow: TraceRow<any>, key: number,asyncFuncGroups: Array<any>): TraceRow<FuncStruct> {
+  private createDeliverInputEventRow(
+    parentRow: TraceRow<any>,
+    key: number,
+    asyncFuncGroups: Array<any>
+  ): TraceRow<FuncStruct> {
     let funcRow = TraceRow.skeleton<FuncStruct>();
     funcRow.rowId = `${asyncFuncGroups[0].funName}-${key}`;
     funcRow.asyncFuncName = asyncFuncGroups[0].funName;
@@ -125,20 +137,25 @@ export class SpProcessChart {
     funcRow.style.width = '100%';
     funcRow.name = `${asyncFuncGroups[0].funName} ${key}`;
     funcRow.setAttribute('children', '');
-    funcRow.supplierFrame = () => {
-      return processDeliverInputEventDataSender(key, funcRow!).then((res: Array<any>) => {
-        this.deliverInputEventSendCallback(res, funcRow, asyncFuncGroups);
-        return res;
-      });
+    funcRow.supplierFrame = async (): Promise<FuncStruct[]> => {
+      const res = await processDeliverInputEventDataSender(key, funcRow!);
+      this.deliverInputEventSendCallback(res, funcRow, asyncFuncGroups);
+      return res;
     };
     funcRow.findHoverStruct = (): void => {
       FuncStruct.hoverFuncStruct = funcRow.getHoverStruct();
-    }
+    };
     funcRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     funcRow.selectChangeHandler = this.trace.selectChangeHandler;
-    funcRow.onThreadHandler = rowThreadHandler<FuncRender>('func', 'context', {
-      type: `func-${asyncFuncGroups[0].funName}-${key}`,
-    }, funcRow, this.trace);
+    funcRow.onThreadHandler = rowThreadHandler<FuncRender>(
+      'func',
+      'context',
+      {
+        type: `func-${asyncFuncGroups[0].funName}-${key}`,
+      },
+      funcRow,
+      this.trace
+    );
     return funcRow;
   }
   private deliverInputEventSendCallback(res: Array<any>, funcRow: TraceRow<any>, asyncFuncGroups: Array<any>): void {
@@ -147,7 +164,7 @@ export class SpProcessChart {
       left.dur + right.dur;
     let depths: any = [];
     let createDepth = (currentDepth: number, index: number): void => {
-      if (depths[currentDepth] == undefined || !isIntersect(depths[currentDepth], res[index])) {
+      if (depths[currentDepth] === undefined || !isIntersect(depths[currentDepth], res[index])) {
         res[index].depth = currentDepth;
         depths[currentDepth] = res[index];
       } else {
@@ -157,7 +174,7 @@ export class SpProcessChart {
     res.forEach((it, i) => {
       res[i].funName = this.funcNameMap.get(res[i].id!);
       res[i].threadName = Utils.THREAD_MAP.get(res[i].tid!);
-      if (it.dur == -1 || it.dur === null || it.dur === undefined) {
+      if (it.dur === -1 || it.dur === null || it.dur === undefined) {
         it.dur = (TraceRow.range?.endNS || 0) - it.startTs;
         it.flag = 'Did not end';
       }
@@ -171,14 +188,12 @@ export class SpProcessChart {
     }
   }
 
-
-
   async init(): Promise<void> {
     await this.prepareData();
     if (
-      this.eventCountMap['print'] == 0 &&
-      this.eventCountMap['tracing_mark_write'] == 0 &&
-      this.eventCountMap['sched_switch'] == 0
+      this.eventCountMap['print'] === 0 &&
+      this.eventCountMap['tracing_mark_write'] === 0 &&
+      this.eventCountMap['sched_switch'] === 0
     ) {
       return;
     }
@@ -209,10 +224,7 @@ export class SpProcessChart {
     maxValues.forEach((it) => {
       this.filterIdMaxValue.set(it.filterId, it.maxValue);
     });
-    let funcNamesArray = await queryAllFuncNames();
-    funcNamesArray.forEach((it) => {
-      this.funcNameMap.set(it.id, it.name);
-    });
+
     let soInitNamesArray = await queryAllSoInitNames();
     soInitNamesArray.forEach((it) => {
       this.soInitNameMap.set(it.id, it.name);
@@ -254,14 +266,19 @@ export class SpProcessChart {
     info('The amount of initialized process threads data is : ', this.processThreads!.length);
   }
 
-  private async initProcessRow(pArr: Array<any>, allTaskPoolPid: Array<{ pid: number }>, jankArr: Array<number>, rsProcess: Array<any>) {
+  private async initProcessRow(
+    pArr: Array<any>,
+    allTaskPoolPid: Array<{ pid: number }>,
+    jankArr: Array<number>,
+    rsProcess: Array<any>
+  ): Promise<void> {
     for (let i = 0; i < pArr.length; i++) {
       const it = pArr[i];
       if (
-        (this.processThreadDataCountMap.get(it.pid) || 0) == 0 &&
-        (this.processThreadCountMap.get(it.pid) || 0) == 0 &&
-        (this.processFuncDataCountMap.get(it.pid) || 0) == 0 &&
-        (this.processMemDataCountMap.get(it.pid) || 0) == 0
+        (this.processThreadDataCountMap.get(it.pid) || 0) === 0 &&
+        (this.processThreadCountMap.get(it.pid) || 0) === 0 &&
+        (this.processFuncDataCountMap.get(it.pid) || 0) === 0 &&
+        (this.processMemDataCountMap.get(it.pid) || 0) === 0
       ) {
         continue;
       }
@@ -279,29 +296,39 @@ export class SpProcessChart {
           soRow = this.addSoInitRow(processRow, maxSoDepth.maxDepth);
         }
       }
-      /* Janks Frames */
+
       let actualRow: TraceRow<JankStruct> | null = null;
       let expectedRow: TraceRow<JankStruct> | null = null;
-      if (jankArr.indexOf(it.pid) > -1) {
-        expectedRow = this.addExpectedRow(it, processRow, rsProcess);
-        actualRow = this.addActualRow(it, processRow, rsProcess);
-      }
-      this.addProcessRowListener(processRow, actualRow);
       this.renderRow = null;
       if (it.processName === 'render_service') {
         this.addThreadList(it, processRow, expectedRow, actualRow, soRow, startupRow);
         this.addProcessMemInfo(it, processRow);
+        if (jankArr.indexOf(it.pid!) > -1) {
+          expectedRow = this.addExpectedRow(it, processRow, rsProcess);
+          actualRow = this.addActualRow(it, processRow, rsProcess);
+        }
+        this.addProcessRowListener(processRow, actualRow);
         this.addAsyncFunction(it, processRow);
       } else {
+        if (jankArr.indexOf(it.pid!) > -1) {
+          expectedRow = this.addExpectedRow(it, processRow, rsProcess);
+          actualRow = this.addActualRow(it, processRow, rsProcess);
+        }
+        this.addProcessRowListener(processRow, actualRow);
         this.addAsyncFunction(it, processRow);
         this.addProcessMemInfo(it, processRow);
         this.addThreadList(it, processRow, expectedRow, actualRow, soRow, startupRow);
       }
+
       await this.trace.chartManager?.frameTimeChart.initAnimatedScenesChart(processRow, it, expectedRow!, actualRow!);
     }
   }
 
-  private createProcessRow(index: number, process: any, allTaskPoolPid: Array<{ pid: number }>) {
+  private createProcessRow(
+    index: number,
+    process: any,
+    allTaskPoolPid: Array<{ pid: number }>
+  ): TraceRow<ProcessStruct> {
     let processRow = TraceRow.skeleton<ProcessStruct>();
     processRow.rowId = `${process.pid}`;
     processRow.index = index;
@@ -324,14 +351,20 @@ export class SpProcessChart {
     };
     processRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     processRow.selectChangeHandler = this.trace.selectChangeHandler;
-    processRow.onThreadHandler = rowThreadHandler<ProcessRender>('process', 'context', {
-      pid: process.pid,
-      type: `process ${processRow.index} ${process.processName}`
-    }, processRow, this.trace);
+    processRow.onThreadHandler = rowThreadHandler<ProcessRender>(
+      'process',
+      'context',
+      {
+        pid: process.pid,
+        type: `process ${processRow.index} ${process.processName}`,
+      },
+      processRow,
+      this.trace
+    );
     return processRow;
   }
 
-  addProcessRowListener(processRow: TraceRow<ProcessStruct>, actualRow: TraceRow<JankStruct> | null) {
+  addProcessRowListener(processRow: TraceRow<ProcessStruct>, actualRow: TraceRow<JankStruct> | null): void {
     let offsetYTimeOut: any = undefined;
     processRow.addEventListener('expansion-change', (e: any) => {
       JankStruct.delJankLineFlag = false;
@@ -375,9 +408,9 @@ export class SpProcessChart {
     });
   }
 
-  handler1(e: any, linkItem: PairPoint[], actualRow: TraceRow<JankStruct> | null) {
+  handler1(e: any, linkItem: PairPoint[], actualRow: TraceRow<JankStruct> | null): void {
     JankStruct.selectJankStructList?.forEach((selectProcessStruct: any) => {
-      if (e.detail.rowId == selectProcessStruct.pid) {
+      if (e.detail.rowId === selectProcessStruct.pid) {
         JankStruct.selectJankStruct = selectProcessStruct;
         JankStruct.hoverJankStruct = selectProcessStruct;
       }
@@ -387,12 +420,12 @@ export class SpProcessChart {
     this.updatePairPointTranslateY(linkItem[1]);
     linkItem[1].y = linkItem[1].rowEL!.translateY! + linkItem[1].offsetY;
     if (actualRow) {
-      if (linkItem[0].rowEL.rowId == e.detail.rowId) {
+      if (linkItem[0].rowEL.rowId === e.detail.rowId) {
         linkItem[0].x = ns2xByTimeShaft(linkItem[0].ns, this.trace.timerShaftEL!);
         linkItem[0].y = actualRow!.translateY! + linkItem[0].offsetY * 2;
         linkItem[0].offsetY = linkItem[0].offsetY * 2;
         linkItem[0].rowEL = actualRow!;
-      } else if (linkItem[1].rowEL.rowId == e.detail.rowId) {
+      } else if (linkItem[1].rowEL.rowId === e.detail.rowId) {
         linkItem[1].x = ns2xByTimeShaft(linkItem[1].ns, this.trace.timerShaftEL!);
         linkItem[1].y = actualRow!.translateY! + linkItem[1].offsetY * 2;
         linkItem[1].offsetY = linkItem[1].offsetY * 2;
@@ -401,21 +434,21 @@ export class SpProcessChart {
     }
   }
 
-  handler2(e: any, linkItem: PairPoint[], processRow: TraceRow<ProcessStruct>) {
+  handler2(e: any, linkItem: PairPoint[], processRow: TraceRow<ProcessStruct>): void {
     this.updatePairPointTranslateY(linkItem[0]);
     linkItem[0].y = linkItem[0].rowEL!.translateY! + linkItem[0].offsetY;
     this.updatePairPointTranslateY(linkItem[1]);
     linkItem[1].y = linkItem[1].rowEL!.translateY! + linkItem[1].offsetY;
-    if (linkItem[0].rowEL.rowParentId == e.detail.rowId) {
+    if (linkItem[0].rowEL.rowParentId === e.detail.rowId) {
       this.updatePairPoint(linkItem[0], processRow);
-    } else if (linkItem[1].rowEL.rowParentId == e.detail.rowId) {
+    } else if (linkItem[1].rowEL.rowParentId === e.detail.rowId) {
       this.updatePairPoint(linkItem[1], processRow);
     }
   }
 
-  handler3(e: any, linkItem: PairPoint[]) {
+  handler3(e: any, linkItem: PairPoint[]): void {
     ThreadStruct.selectThreadStructList?.forEach((selectProcessStruct: any) => {
-      if (e.detail.rowId == selectProcessStruct.pid) {
+      if (e.detail.rowId === selectProcessStruct.pid) {
         ThreadStruct.selectThreadStruct = selectProcessStruct;
         ThreadStruct.hoverThreadStruct = selectProcessStruct;
       }
@@ -436,20 +469,20 @@ export class SpProcessChart {
     }
   }
 
-  handler4(e: any, linkItem: PairPoint[], processRow: TraceRow<ProcessStruct>) {
+  handler4(e: any, linkItem: PairPoint[], processRow: TraceRow<ProcessStruct>): void {
     this.updatePairPointTranslateY(linkItem[0]);
     linkItem[0].y = processRow!.translateY + linkItem[0].offsetY;
     this.updatePairPointTranslateY(linkItem[1]);
     linkItem[1].y = linkItem[1].rowEL!.translateY + linkItem[1].offsetY;
-    if (linkItem[0].rowEL.rowParentId == e.detail.rowId) {
+    if (linkItem[0].rowEL.rowParentId === e.detail.rowId) {
       this.updatePairPoint(linkItem[0], processRow);
     }
-    if (linkItem[1].rowEL.rowParentId == e.detail.rowId) {
+    if (linkItem[1].rowEL.rowParentId === e.detail.rowId) {
       this.updatePairPoint(linkItem[1], processRow);
     }
   }
 
-  updatePairPointTranslateY(pair: PairPoint) {
+  updatePairPointTranslateY(pair: PairPoint): void {
     if (pair.rowEL.collect) {
       pair.rowEL.translateY = pair.rowEL.getBoundingClientRect().top - 195;
     } else {
@@ -457,7 +490,7 @@ export class SpProcessChart {
     }
   }
 
-  updatePairPoint(pair: PairPoint, processRow: TraceRow<ProcessStruct>) {
+  updatePairPoint(pair: PairPoint, processRow: TraceRow<ProcessStruct>): void {
     if (!pair.rowEL.collect) {
       pair.x = ns2xByTimeShaft(pair.ns, this.trace.timerShaftEL!);
       pair.y = processRow!.translateY! + pair.offsetY / 2;
@@ -465,7 +498,7 @@ export class SpProcessChart {
       pair.rowEL = processRow!;
     }
   }
-
+  /* Janks Frames */
   addExpectedRow(process: any, processRow: TraceRow<any>, renderServiceProcess: Array<any>): TraceRow<JankStruct> {
     let expectedRow = TraceRow.skeleton<JankStruct>();
     expectedRow.asyncFuncName = process.processName;
@@ -477,17 +510,27 @@ export class SpProcessChart {
     expectedRow.name = 'Expected Timeline';
     expectedRow.addTemplateTypes('FrameTimeline');
     expectedRow.setAttribute('children', '');
-    expectedRow.supplierFrame = async () => {
+    expectedRow.supplierFrame = async (): Promise<JankStruct[]> => {
       let res = await processExpectedDataSender(process.pid, expectedRow!);
       this.jankSenderCallback(res, 'expected', process, expectedRow, renderServiceProcess);
       return res;
     };
     expectedRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     expectedRow.selectChangeHandler = this.trace.selectChangeHandler;
-    expectedRow.onThreadHandler = rowThreadHandler<JankRender>('jank', 'context', {
-      type: 'expected_frame_timeline_slice',
-    }, expectedRow, this.trace);
-    processRow.addChildTraceRow(expectedRow);
+    expectedRow.onThreadHandler = rowThreadHandler<JankRender>(
+      'jank',
+      'context',
+      {
+        type: 'expected_frame_timeline_slice',
+      },
+      expectedRow,
+      this.trace
+    );
+    if (this.renderRow) {
+      processRow.addChildTraceRowBefore(expectedRow, this.renderRow);
+    } else {
+      processRow.addChildTraceRow(expectedRow);
+    }
     return expectedRow;
   }
 
@@ -500,21 +543,37 @@ export class SpProcessChart {
     actualRow.name = 'Actual Timeline';
     actualRow.addTemplateTypes('FrameTimeline');
     actualRow.setAttribute('children', '');
-    actualRow.supplierFrame = async () => {
+    actualRow.supplierFrame = async (): Promise<JankStruct[]> => {
       let res = await processActualDataSender(process.pid, actualRow!);
       this.jankSenderCallback(res, 'actual', process, actualRow, renderServiceProcess);
       return res;
     };
     actualRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     actualRow.selectChangeHandler = this.trace.selectChangeHandler;
-    actualRow.onThreadHandler = rowThreadHandler<JankRender>('jank', 'context', {
-      type: 'actual_frame_timeline_slice',
-    }, actualRow, this.trace);
-    processRow.addChildTraceRow(actualRow);
+    actualRow.onThreadHandler = rowThreadHandler<JankRender>(
+      'jank',
+      'context',
+      {
+        type: 'actual_frame_timeline_slice',
+      },
+      actualRow,
+      this.trace
+    );
+    if (this.renderRow) {
+      processRow.addChildTraceRowBefore(actualRow, this.renderRow);
+    } else {
+      processRow.addChildTraceRow(actualRow);
+    }
     return actualRow;
   }
 
-  jankSenderCallback(res: JankStruct[], type: string, process: any, row: TraceRow<JankStruct>, renderServiceProcess: Array<any>) {
+  jankSenderCallback(
+    res: JankStruct[],
+    type: string,
+    process: any,
+    row: TraceRow<JankStruct>,
+    renderServiceProcess: Array<any>
+  ): void {
     let maxDepth: number = 1;
     let unitHeight: number = 20;
     for (let j = 0; j < res.length; j++) {
@@ -557,11 +616,11 @@ export class SpProcessChart {
     startupRow.rowHidden = !processRow.expansion;
     startupRow.index = 0;
     startupRow.style.height = '30px';
-    startupRow.style.width = `100%`;
-    startupRow.name = `App Startups`;
+    startupRow.style.width = '100%';
+    startupRow.name = 'App Startups';
     startupRow.findHoverStruct = (): void => {
       AppStartupStruct.hoverStartupStruct = startupRow.getHoverStruct();
-    }
+    };
     startupRow.setAttribute('children', '');
     startupRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     startupRow.selectChangeHandler = this.trace.selectChangeHandler;
@@ -577,9 +636,15 @@ export class SpProcessChart {
         }
         return res;
       });
-    startupRow.onThreadHandler = rowThreadHandler<AppStartupRender>('app-start-up', 'appStartupContext', {
-      type: `app-startup ${processRow.rowId}`,
-    }, startupRow, this.trace);
+    startupRow.onThreadHandler = rowThreadHandler<AppStartupRender>(
+      'app-start-up',
+      'appStartupContext',
+      {
+        type: `app-startup ${processRow.rowId}`,
+      },
+      startupRow,
+      this.trace
+    );
     processRow.addChildTraceRow(startupRow);
     return startupRow;
   }
@@ -594,14 +659,14 @@ export class SpProcessChart {
     soRow.rowHidden = !processRow.expansion;
     soRow.index = 0;
     soRow.style.height = `${maxHeight}px`;
-    soRow.style.width = `100%`;
-    soRow.name = `Static Initialization`;
+    soRow.style.width = '100%';
+    soRow.name = 'Static Initialization';
     soRow.setAttribute('children', '');
     soRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     soRow.selectChangeHandler = this.trace.selectChangeHandler;
     soRow.findHoverStruct = (): void => {
       SoStruct.hoverSoStruct = soRow.getHoverStruct();
-    }
+    };
     soRow.supplierFrame = (): Promise<Array<SoStruct>> =>
       processSoInitDataSender(parseInt(processRow.rowId!), soRow).then((res) => {
         if (res.length <= 0) {
@@ -615,16 +680,22 @@ export class SpProcessChart {
         });
         return res;
       });
-    soRow.onThreadHandler = rowThreadHandler<SoRender>('app-so-init', 'context', {
-      type: `static-init ${processRow.rowId}`,
-    }, soRow, this.trace);
+    soRow.onThreadHandler = rowThreadHandler<SoRender>(
+      'app-so-init',
+      'context',
+      {
+        type: `static-init ${processRow.rowId}`,
+      },
+      soRow,
+      this.trace
+    );
     processRow.addChildTraceRow(soRow);
     return soRow;
   }
 
   insertAfter(newEl: HTMLElement, targetEl: HTMLElement): void {
     let parentEl = targetEl.parentNode;
-    if (parentEl!.lastChild == targetEl) {
+    if (parentEl!.lastChild === targetEl) {
       parentEl!.appendChild(newEl);
     } else {
       parentEl!.insertBefore(newEl, targetEl.nextSibling);
@@ -634,63 +705,69 @@ export class SpProcessChart {
   //add thread list
   addThreadList(
     it: { pid: number | null; processName: string | null },
-    processRow: TraceRow<ProcessStruct>,
+    pRow: TraceRow<ProcessStruct>,
     expectedRow: TraceRow<JankStruct> | null,
     actualRow: TraceRow<JankStruct> | null,
     soRow: TraceRow<SoStruct> | undefined,
-    startupRow: TraceRow<AppStartupStruct> | undefined,
-  ) {
-    let threads = this.processThreads.filter((thread) => thread.pid === it.pid && thread.tid != 0);
-    let threadRowArr: Array<TraceRow<BaseStruct>> = [];
+    startupRow: TraceRow<AppStartupStruct> | undefined
+  ): void {
+    let threads = this.processThreads.filter((thread) => thread.pid === it.pid && thread.tid !== 0);
+    let tRowArr: Array<TraceRow<BaseStruct>> = [];
     for (let j = 0; j < threads.length; j++) {
       let thread = threads[j];
-      let threadRow = TraceRow.skeleton<ThreadStruct>();
-      threadRow.rowId = `${thread.tid}`;
-      threadRow.rowType = TraceRow.ROW_TYPE_THREAD;
-      threadRow.rowParentId = `${it.pid}`;
-      threadRow.rowHidden = !processRow.expansion;
-      threadRow.index = j;
-      threadRow.style.height = '18px';
-      threadRow.style.width = '100%';
-      threadRow.name = `${thread.threadName || 'Thread'} ${thread.tid}`;
-      threadRow.namePrefix = `${thread.threadName || 'Thread'}`;
-      threadRow.setAttribute('children', '');
-      threadRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-      threadRow.selectChangeHandler = this.trace.selectChangeHandler;
-      threadRow.findHoverStruct = (): void => this.threadRowFindHoverStruct(threadRow);
-      threadRow.supplierFrame = async (): Promise<Array<ThreadStruct>> => {
-        const res = await threadDataSender(thread.tid || 0, it.pid || 0, threadRow);
+      let tRow = TraceRow.skeleton<ThreadStruct>();
+      tRow.rowId = `${thread.tid}`;
+      tRow.rowType = TraceRow.ROW_TYPE_THREAD;
+      tRow.rowParentId = `${it.pid}`;
+      tRow.rowHidden = !pRow.expansion;
+      tRow.index = j;
+      tRow.style.height = '18px';
+      tRow.style.width = '100%';
+      tRow.name = `${thread.threadName || 'Thread'} ${thread.tid}`;
+      tRow.namePrefix = `${thread.threadName || 'Thread'}`;
+      tRow.setAttribute('children', '');
+      tRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+      tRow.selectChangeHandler = this.trace.selectChangeHandler;
+      tRow.findHoverStruct = (): void => this.threadRowFindHoverStruct(tRow);
+      tRow.supplierFrame = async (): Promise<Array<ThreadStruct>> => {
+        const res = await threadDataSender(thread.tid || 0, it.pid || 0, tRow);
         if (res === true) {
           return [];
         } else {
           let rs = res as ThreadStruct[];
-          if (rs.length <= 0 && !threadRow.isComplete) {
+          if (rs.length <= 0 && !tRow.isComplete) {
             this.trace.refreshCanvas(true);
           }
           return rs;
         }
       };
-      threadRow.onThreadHandler = rowThreadHandler<ThreadRender>('thread', 'context', {
-        type: `thread ${thread.tid} ${thread.threadName}`,
-        translateY: threadRow.translateY,
-      }, threadRow, this.trace);
-      this.insertThreadRowToDocument(it, j, thread, processRow, threadRow, threads, threadRowArr, actualRow, expectedRow, startupRow, soRow);
-      this.addFuncStackRow(it, thread, j, threads, threadRowArr, threadRow, processRow);
+      tRow.onThreadHandler = rowThreadHandler<ThreadRender>(
+        'thread',
+        'context',
+        {
+          type: `thread ${thread.tid} ${thread.threadName}`,
+          translateY: tRow.translateY,
+        },
+        tRow,
+        this.trace
+      );
+      this.insertRowToDoc(it, j, thread, pRow, tRow, threads, tRowArr, actualRow, expectedRow, startupRow, soRow);
+      this.addFuncStackRow(it, thread, j, threads, tRowArr, tRow, pRow);
       if ((thread.switchCount || 0) === 0) {
-        threadRow.rowDiscard = true;
+        tRow.rowDiscard = true;
       }
     }
   }
 
-  threadRowFindHoverStruct(threadRow: TraceRow<ThreadStruct>) {
+  threadRowFindHoverStruct(threadRow: TraceRow<ThreadStruct>): void {
     let arr = threadRow.dataListCache.filter(
       (re) => re.frame && isFrameContainPoint(re.frame, threadRow.hoverX, threadRow.hoverY, true, false)
     );
-    let runItem = arr.find(it => it.state === 'Running');
+    let runItem = arr.find((it) => it.state === 'Running');
     if (runItem) {
       ThreadStruct.hoverThreadStruct = runItem;
     } else {
-      let otherItem = arr.find(it => it.state !== 'S');
+      let otherItem = arr.find((it) => it.state !== 'S');
       if (otherItem) {
         ThreadStruct.hoverThreadStruct = otherItem;
       } else {
@@ -699,7 +776,7 @@ export class SpProcessChart {
     }
   }
 
-  insertThreadRowToDocument(
+  insertRowToDoc(
     it: any,
     index: number,
     thread: ThreadStruct,
@@ -711,7 +788,7 @@ export class SpProcessChart {
     expectedRow: TraceRow<any> | null,
     startupRow: TraceRow<AppStartupStruct> | null | undefined,
     soRow: TraceRow<SoStruct> | null | undefined
-  ) {
+  ): void {
     if (it.processName === 'render_service') {
       if (threadRow.name === `${it.processName} ${it.pid}`) {
         this.renderRow = threadRow;
@@ -745,8 +822,8 @@ export class SpProcessChart {
     threadRowArr: Array<any>,
     threadRow: TraceRow<ThreadStruct>,
     processRow: TraceRow<ProcessStruct>
-  ) {
-    if (this.threadFuncMaxDepthMap.get(`${thread.upid}-${thread.tid}`) != undefined) {
+  ): void {
+    if (this.threadFuncMaxDepthMap.get(`${thread.upid}-${thread.tid}`) !== undefined) {
       let max = this.threadFuncMaxDepthMap.get(`${thread.upid}-${thread.tid}`) || 1;
       let maxHeight = max * 18 + 6;
       let funcRow = TraceRow.skeleton<FuncStruct>();
@@ -769,10 +846,16 @@ export class SpProcessChart {
       funcRow.selectChangeHandler = this.trace.selectChangeHandler;
       funcRow.findHoverStruct = (): void => {
         FuncStruct.hoverFuncStruct = funcRow.getHoverStruct();
-      }
-      funcRow.onThreadHandler = rowThreadHandler<FuncRender>('func', 'context', {
-        type: `func${thread.tid}${thread.threadName}`,
-      }, funcRow, this.trace);
+      };
+      funcRow.onThreadHandler = rowThreadHandler<FuncRender>(
+        'func',
+        'context',
+        {
+          type: `func${thread.tid}${thread.threadName}`,
+        },
+        funcRow,
+        this.trace
+      );
       if (process.processName === 'render_service') {
         let flag = threads.length === index + 1;
         processRow.sortRenderServiceData(funcRow, threadRow, threadRowArr, flag);
@@ -808,7 +891,7 @@ export class SpProcessChart {
   }
 
   //进程内存信息
-  addProcessMemInfo(it: { pid: number | null; processName: string | null }, processRow: TraceRow<ProcessStruct>) {
+  addProcessMemInfo(it: { pid: number | null; processName: string | null }, processRow: TraceRow<ProcessStruct>): void {
     let processMem = this.processMem.filter((mem) => mem.pid === it.pid);
     processMem.forEach((mem) => {
       let row = TraceRow.skeleton<ProcessMemStruct>();
@@ -823,7 +906,11 @@ export class SpProcessChart {
       row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
       row.selectChangeHandler = this.trace.selectChangeHandler;
       row.focusHandler = (): void => {
-        this.trace.displayTip(row, ProcessMemStruct.hoverProcessMemStruct, `<span>${ProcessMemStruct.hoverProcessMemStruct?.value || '0'}</span>`);
+        this.trace.displayTip(
+          row,
+          ProcessMemStruct.hoverProcessMemStruct,
+          `<span>${ProcessMemStruct.hoverProcessMemStruct?.value || '0'}</span>`
+        );
       };
       row.findHoverStruct = (): void => {
         ProcessMemStruct.hoverProcessMemStruct = row.getHoverStruct(false);
@@ -846,9 +933,15 @@ export class SpProcessChart {
           }
           return resultProcess;
         });
-      row.onThreadHandler = rowThreadHandler<MemRender>('mem', 'context', {
-        type: `mem ${mem.trackId} ${mem.trackName}`,
-      }, row, this.trace);
+      row.onThreadHandler = rowThreadHandler<MemRender>(
+        'mem',
+        'context',
+        {
+          type: `mem ${mem.trackId} ${mem.trackName}`,
+        },
+        row,
+        this.trace
+      );
       if (this.renderRow && row.name === 'H:PreferredFrameRate') {
         processRow.addChildTraceRowBefore(row, this.renderRow);
       } else {
@@ -856,7 +949,7 @@ export class SpProcessChart {
       }
     });
   }
-  private calMaxHeight(asyncFunctions: any[]) : number{
+  private calMaxHeight(asyncFunctions: any[]): number {
     let max = 0;
     asyncFunctions.forEach((it) => {
       const depth = it.depth || 0;
@@ -865,11 +958,11 @@ export class SpProcessChart {
       }
     });
     max += 1;
-    return max * 18 + 6;;
+    return max * 18 + 6;
   }
 
   //Async Function
-  addAsyncFunction(it: { pid: number; processName: string | null }, processRow: TraceRow<ProcessStruct>) {
+  addAsyncFunction(it: { pid: number; processName: string | null }, processRow: TraceRow<ProcessStruct>): void {
     let asyncFuncList = this.processAsyncFuncMap[it.pid] || [];
     let asyncFuncGroup = Utils.groupBy(asyncFuncList, 'funName');
     Reflect.ownKeys(asyncFuncGroup).map((key: any) => {
@@ -885,7 +978,10 @@ export class SpProcessChart {
           }
           let currentDepth = 0;
           let index = i;
-          while (depthArray[currentDepth] !== undefined && isIntersect(depthArray[currentDepth], asyncFunctions[index])) {
+          while (
+            depthArray[currentDepth] !== undefined &&
+            isIntersect(depthArray[currentDepth], asyncFunctions[index])
+          ) {
             currentDepth++;
           }
           asyncFunctions[index].depth = currentDepth;
@@ -907,13 +1003,19 @@ export class SpProcessChart {
         funcRow.setAttribute('children', '');
         funcRow.findHoverStruct = (): void => {
           FuncStruct.hoverFuncStruct = funcRow.getHoverStruct();
-        }
+        };
         funcRow.supplier = (): Promise<any> => new Promise((resolve) => resolve(asyncFunctions));
         funcRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
         funcRow.selectChangeHandler = this.trace.selectChangeHandler;
-        funcRow.onThreadHandler = rowThreadHandler<FuncRender>('func', 'context', {
-          type: `func-${asyncFunctions[0].funName}-${it.pid}`,
-        }, funcRow, this.trace);
+        funcRow.onThreadHandler = rowThreadHandler<FuncRender>(
+          'func',
+          'context',
+          {
+            type: `func-${asyncFunctions[0].funName}-${it.pid}`,
+          },
+          funcRow,
+          this.trace
+        );
         processRow.addChildTraceRow(funcRow);
       }
     });
diff --git a/ide/src/trace/component/chart/SpSdkChart.ts b/ide/src/trace/component/chart/SpSdkChart.ts
index 5fb96f035e652c72327a8d31d38949af0526942f..3fc0d9ca5638f21af0a688268a171cc54abd1fb8 100644
--- a/ide/src/trace/component/chart/SpSdkChart.ts
+++ b/ide/src/trace/component/chart/SpSdkChart.ts
@@ -22,12 +22,7 @@ import { renders } from '../../database/ui-worker/ProcedureWorker';
 import { SdkSliceRender, SdkSliceStruct } from '../../database/ui-worker/ProduceWorkerSdkSlice';
 import { EmptyRender } from '../../database/ui-worker/cpu/ProcedureWorkerCPU';
 import { TabUtil } from '../trace/sheet/sdk/TabUtil';
-import {
-  queryCounterMax,
-  querySdkCount,
-  querySdkCounterData,
-  querySdkSliceData
-} from '../../database/sql/Sdk.sql';
+import { queryCounterMax, querySdkCount, querySdkCounterData, querySdkSliceData } from '../../database/sql/Sdk.sql';
 import { queryStartTime } from '../../database/sql/SqlLite.sql';
 import { NUM_7 } from '../../bean/NumBean';
 
@@ -64,27 +59,22 @@ export class SpSdkChart {
       startTime,
       showType.tableName,
       showType.columns,
-      'where' + ` slice_id = $column_id and (start_ts - ${  startTime  }) between $startNS and $endNS;`
+      'where' + ` slice_id = $column_id and (start_ts - ${startTime}) between $startNS and $endNS;`
     );
     let innerTable = showType.inner;
     let countSql;
     let countOtherSql = '';
     if (configObj.pluginName === this.pluginName) {
-      countSql = this.createSql(
-        startTime,
-        innerTable.tableName,
-        innerTable.columns,
-        'where slice_name like $suffix'
-      );
+      countSql = this.createSql(startTime, innerTable.tableName, innerTable.columns, 'where slice_name like $suffix');
       countOtherSql = this.createSql(
         startTime,
         innerTable.tableName,
         innerTable.columns,
         '' +
-        'where slice_name not like \'%_cpu\' and slice_name not like \'%_display\' and ' +
-        'slice_name not like \'%_gpu\' and slice_name not like \'%_System_idle\' and ' +
-        'slice_name not like \'%_wifi_data\' and slice_name not like \'%_sensor\' and ' +
-        'slice_name not like \'%_audio\' '
+          "where slice_name not like '%_cpu' and slice_name not like '%_display' and " +
+          "slice_name not like '%_gpu' and slice_name not like '%_System_idle' and " +
+          "slice_name not like '%_wifi_data' and slice_name not like '%_sensor' and " +
+          "slice_name not like '%_audio' "
       );
     } else {
       countSql = this.createSql(startTime, innerTable.tableName, innerTable.columns);
@@ -99,7 +89,7 @@ export class SpSdkChart {
     });
   }
 
-  parseJson(startTime: number, map: Map<number, string>): Map<number, any>{
+  parseJson(startTime: number, map: Map<number, string>): Map<number, any> {
     let tablesMap = new Map();
     let keys = map.keys();
     for (let key of keys) {
@@ -132,28 +122,28 @@ export class SpSdkChart {
     for (let i = 0; i < columns.length; i++) {
       let column = columns[i];
       if (column.column === 'start_ts') {
-        column.column = `(start_ts - ${  startTime  }) AS start_ts`;
+        column.column = `(start_ts - ${startTime}) AS start_ts`;
       }
       if (column.column === 'end_ts') {
-        column.column = `(end_ts - ${  startTime  }) AS end_ts`;
+        column.column = `(end_ts - ${startTime}) AS end_ts`;
       }
       if (i === columns.length - 1) {
-        sliceSelectSql = `${sliceSelectSql + column.column  } `;
+        sliceSelectSql = `${sliceSelectSql + column.column} `;
       } else {
-        sliceSelectSql = `${sliceSelectSql + column.column  }, `;
+        sliceSelectSql = `${sliceSelectSql + column.column}, `;
       }
     }
-    sliceSelectSql = `${sliceSelectSql  }from ${  tableName}`;
+    sliceSelectSql = `${sliceSelectSql}from ${tableName}`;
     if (where !== undefined) {
-      sliceSelectSql = `${sliceSelectSql  } ${  where}`;
+      sliceSelectSql = `${sliceSelectSql} ${where}`;
     }
     return sliceSelectSql;
   }
 
   private createMaxValueSql(tableName: string, where?: string): string {
-    let selectSql = `select max(value) as max_value from ${  tableName}`;
+    let selectSql = `select max(value) as max_value from ${tableName}`;
     if (where !== undefined) {
-      selectSql = `${selectSql  } ${  where}`;
+      selectSql = `${selectSql} ${where}`;
     }
     return selectSql;
   }
@@ -163,24 +153,26 @@ export class SpSdkChart {
     for (let i = 0; i < columns.length; i++) {
       let column = columns[i];
       if (column.column === 'ts') {
-        column.column = `ts - ${  startTime  } AS ts`;
+        column.column = `ts - ${startTime} AS ts`;
       }
       if (i === columns.length - 1) {
-        selectSql = `${selectSql + column.column  } `;
+        selectSql = `${selectSql + column.column} `;
       } else {
-        selectSql = `${selectSql + column.column  }, `;
+        selectSql = `${selectSql + column.column}, `;
       }
     }
-    selectSql = `${selectSql  }from ${  tableName}`;
+    selectSql = `${selectSql}from ${tableName}`;
     if (where !== undefined) {
-      selectSql = `${selectSql  } ${  where}`;
+      selectSql = `${selectSql} ${where}`;
     }
     return selectSql;
   }
 
   async init(): Promise<void> {
     let configMap = SpSystemTrace.SDK_CONFIG_MAP;
-    if (configMap === undefined) {return}
+    if (configMap === undefined) {
+      return;
+    }
     let res = await queryStartTime();
     let startTime = res[0].start_ts;
     let tablesMap = this.parseJson(startTime, configMap);
@@ -199,7 +191,7 @@ export class SpSdkChart {
           } else if (sqlMap.type === 'slice' && sqlMap.pluginName === this.pluginName) {
             let suffixList = ['cpu', 'display', 'gpu', 'System_idle', 'wifi_data', 'sensor', 'audio'];
             for (let i = 0; i < suffixList.length; i++) {
-              let result = await querySdkCount(sqlMap.countSql, componentId, {$suffix: `%${  suffixList[i]}`});
+              let result = await querySdkCount(sqlMap.countSql, componentId, { $suffix: `%${suffixList[i]}` });
               if (result.length > 0) {
                 let groupNodeRow = await this.initSecondaryRow(nodeRow, i, suffixList[i]);
                 for (let i = 0; i < result.length; i++) {
@@ -224,7 +216,7 @@ export class SpSdkChart {
       }
     }
   }
-  
+
   private initCounterChartRow(
     componentId: number,
     expansion: boolean,
@@ -234,7 +226,7 @@ export class SpSdkChart {
     let traceRow = TraceRow.skeleton<CounterStruct>();
     traceRow.rowParentId = `Sdk-${componentId}`;
     traceRow.rowHidden = !expansion;
-    traceRow.rowId = `${counterId  }-${  componentId}`;
+    traceRow.rowId = `${counterId}-${componentId}`;
     traceRow.rowType = TraceRow.ROW_TYPE_SDK_COUNTER;
     traceRow.folderPaddingLeft = 30;
     traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
@@ -360,7 +352,7 @@ export class SpSdkChart {
     this.trace.rowsEL?.appendChild(sdkSecondFolder);
     return sdkSecondFolder;
   };
-  
+
   private initSliceChartRow(
     expansion: boolean,
     rowId: string,
@@ -379,7 +371,7 @@ export class SpSdkChart {
     traceRow.setAttribute('children', '');
     traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     traceRow.selectChangeHandler = this.trace.selectChangeHandler;
-    traceRow.rowId = `${sliceId  }-${  componentId}`;
+    traceRow.rowId = `${sliceId}-${componentId}`;
     return traceRow;
   }
 
@@ -390,9 +382,14 @@ export class SpSdkChart {
     sqlMap: any,
     componentId: number
   ): Promise<void> => {
-    let traceRow = this.initSliceChartRow(nodeRow.expansion, nodeRow.rowId!,
-      result.slice_id, result.slice_name, componentId);
-    traceRow.supplier = async () : Promise<SdkSliceStruct[]>=>
+    let traceRow = this.initSliceChartRow(
+      nodeRow.expansion,
+      nodeRow.rowId!,
+      result.slice_id,
+      result.slice_name,
+      componentId
+    );
+    traceRow.supplier = async (): Promise<SdkSliceStruct[]> =>
       querySdkSliceData(
         sqlMap.chartSql,
         result.slice_id,
diff --git a/ide/src/trace/component/chart/SpSegmentationChart.ts b/ide/src/trace/component/chart/SpSegmentationChart.ts
index c4d201560b2b195549ada764b6b29340cb3d7c2e..796c6657e37b650fdc2fbcc311b7b6c77cbfa706 100644
--- a/ide/src/trace/component/chart/SpSegmentationChart.ts
+++ b/ide/src/trace/component/chart/SpSegmentationChart.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -52,7 +51,7 @@ export class SpSegmentationChart {
   // state泳道联动
   static setStateChartData(data: Array<StateGroup>) {
     let stateChartData = new Array();
-    stateChartData = data.map(v => {
+    stateChartData = data.map((v) => {
       return {
         dur: v.dur,
         pid: v.pid,
@@ -75,7 +74,7 @@ export class SpSegmentationChart {
     SpSegmentationChart.statesRow!.supplier = (): Promise<Array<ThreadStruct>> =>
       new Promise<Array<ThreadStruct>>((resolve) => resolve(stateChartData));
     SpSegmentationChart.trace.refreshCanvas(false);
-  };
+  }
 
   // binder联动调用
   static setBinderChartData(data: Array<Array<FreqChartDataStruct>>): void {
@@ -98,10 +97,10 @@ export class SpSegmentationChart {
             v.name === 'binder transaction'
               ? 0
               : v.name === 'binder transaction async'
-                ? 1
-                : v.name === 'binder reply'
-                  ? MS_TO_US
-                  : 3,
+              ? 1
+              : v.name === 'binder reply'
+              ? MS_TO_US
+              : 3,
           startNS: v.startNS,
           dur: v.dur,
           name: `${v.name}`,
@@ -110,7 +109,9 @@ export class SpSegmentationChart {
           cycle: v.cycle,
         };
       });
-      SpSegmentationChart.binderRow!.style.height = `${BinderStruct.maxHeight > MIN_HEIGHT ? BinderStruct.maxHeight * UNIT_HEIGHT + UNIT_HEIGHT : 40}px`;
+      SpSegmentationChart.binderRow!.style.height = `${
+        BinderStruct.maxHeight > MIN_HEIGHT ? BinderStruct.maxHeight * UNIT_HEIGHT + UNIT_HEIGHT : 40
+      }px`;
       // @ts-ignore
       SpSegmentationChart.binderRow!.supplier = (): Promise<Array<FreqChartDataStruct>> =>
         new Promise<Array<FreqChartDataStruct>>((resolve) => resolve(chartData));
@@ -156,9 +157,8 @@ export class SpSegmentationChart {
           CpuFreqExtendStruct.isTabHover = true;
           BinderStruct.isTabHover = false;
         }
-
       }
-      CpuFreqExtendStruct.hoverType = type
+      CpuFreqExtendStruct.hoverType = type;
     } else if (type === 'BINDER') {
       if (cycle === BinderStruct.hoverCycle) {
         BinderStruct.hoverCycle = -1;
@@ -184,7 +184,7 @@ export class SpSegmentationChart {
       await this.initBinderTrace();
       await this.initAllStates();
     } else {
-      return
+      return;
     }
   }
   async initFolder() {
@@ -229,24 +229,28 @@ export class SpSegmentationChart {
     SpSegmentationChart.cpuRow.addRowCheckFilePop();
     SpSegmentationChart.cpuRow.rowSetting = 'checkFile';
     // 拿到了用户传递的数据
-    SpSegmentationChart.cpuRow.onRowCheckFileChangeHandler = (e: string | ArrayBuffer | null): void => {
-      // @ts-ignore
-      let chartData = JSON.parse(e);
-      let mapData = new Map<number, number>();
-      // @ts-ignore
-      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();
-      });
+    SpSegmentationChart.cpuRow.onRowCheckFileChangeHandler = (): void => {
+      SpSegmentationChart.freqInfoMapData = new Map<number, Map<number, number>>();
+      if (sessionStorage.getItem('freqInfoData')) {
+        // @ts-ignore
+        let chartData = JSON.parse(JSON.parse(sessionStorage.getItem('freqInfoData')));
+        let mapData = new Map<number, number>();
+        // @ts-ignore
+        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();
+        });
+      }
     };
     SpSegmentationChart.cpuRow.focusHandler = (ev): void => {
       SpSegmentationChart.trace?.displayTip(
         SpSegmentationChart.cpuRow!,
         CpuFreqExtendStruct.hoverCpuFreqStruct,
-        `<span>${CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value!
+        `<span>${
+          CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value!
         }</span>`
       );
     };
@@ -295,7 +299,8 @@ export class SpSegmentationChart {
       SpSegmentationChart.trace?.displayTip(
         SpSegmentationChart.GpuRow!,
         CpuFreqExtendStruct.hoverCpuFreqStruct,
-        `<span>${CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value!
+        `<span>${
+          CpuFreqExtendStruct.hoverCpuFreqStruct === undefined ? 0 : CpuFreqExtendStruct.hoverCpuFreqStruct.value!
         }</span>`
       );
     };
@@ -388,7 +393,9 @@ export class SpSegmentationChart {
       if (SpSegmentationChart.statesRow!.currentContext) {
         context = SpSegmentationChart.statesRow!.currentContext;
       } else {
-        context = SpSegmentationChart.statesRow!.collect ? SpSegmentationChart.trace.canvasFavoritePanelCtx! : SpSegmentationChart.trace.canvasPanelCtx!;
+        context = SpSegmentationChart.statesRow!.collect
+          ? SpSegmentationChart.trace.canvasFavoritePanelCtx!
+          : SpSegmentationChart.trace.canvasPanelCtx!;
       }
       SpSegmentationChart.statesRow!.canvasSave(context);
       (renders['thread'] as ThreadRender).renderMainThread(
@@ -418,14 +425,16 @@ export class SpSegmentationChart {
     SpSegmentationChart.binderRow.findHoverStruct = () => {
       BinderStruct.hoverCpuFreqStruct = SpSegmentationChart.binderRow!.dataListCache.find((v: BinderStruct) => {
         if (SpSegmentationChart.binderRow!.isHover) {
-          if (v.frame!.x < SpSegmentationChart.binderRow!.hoverX
-            && v.frame!.x + v.frame!.width > SpSegmentationChart.binderRow!.hoverX
-            && (BinderStruct.maxHeight * 20 - v.depth * 20 + 20) < SpSegmentationChart.binderRow!.hoverY
-            && BinderStruct.maxHeight * 20 - v.depth * 20 + v.value * 20 + 20 > SpSegmentationChart.binderRow!.hoverY) {
+          if (
+            v.frame!.x < SpSegmentationChart.binderRow!.hoverX &&
+            v.frame!.x + v.frame!.width > SpSegmentationChart.binderRow!.hoverX &&
+            BinderStruct.maxHeight * 20 - v.depth * 20 + 20 < SpSegmentationChart.binderRow!.hoverY &&
+            BinderStruct.maxHeight * 20 - v.depth * 20 + v.value * 20 + 20 > SpSegmentationChart.binderRow!.hoverY
+          ) {
             return v;
           }
         }
-      })
+      });
     };
     SpSegmentationChart.binderRow.supplier = (): Promise<Array<BinderStruct>> =>
       new Promise<Array<BinderStruct>>((resolve) => resolve([]));
@@ -453,12 +462,15 @@ export class SpSegmentationChart {
       SpSegmentationChart.trace!.displayTip(
         SpSegmentationChart.binderRow!,
         BinderStruct.hoverCpuFreqStruct,
-        `<span style='font-weight: bold;'>Cycle: ${BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.cycle : 0
-        }</span><br>
-                <span style='font-weight: bold;'>Name: ${BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.name : ''
+        `<span style='font-weight: bold;'>Cycle: ${
+          BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.cycle : 0
         }</span><br>
-                <span style='font-weight: bold;'>Count: ${BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.value : 0
-        }</span>`
+                <span style='font-weight: bold;'>Name: ${
+                  BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.name : ''
+                }</span><br>
+                <span style='font-weight: bold;'>Count: ${
+                  BinderStruct.hoverCpuFreqStruct ? BinderStruct.hoverCpuFreqStruct.value : 0
+                }</span>`
       );
     };
     SpSegmentationChart.trace.rowsEL?.appendChild(SpSegmentationChart.binderRow);
@@ -539,8 +551,8 @@ function setBinderData(data: Array<Array<FreqChartDataStruct>>, binderList: Arra
             return i.name === 'binder transaction';
           }).length > 0
             ? v.filter((i: FreqChartDataStruct) => {
-              return i.name === 'binder transaction';
-            })[0].value
+                return i.name === 'binder transaction';
+              })[0].value
             : 0);
       }
       if (t.name === 'binder reply') {
@@ -550,15 +562,15 @@ function setBinderData(data: Array<Array<FreqChartDataStruct>>, binderList: Arra
             return i.name === 'binder transaction';
           }).length > 0
             ? v.filter((i: FreqChartDataStruct) => {
-              return i.name === 'binder transaction';
-            })[0].value
+                return i.name === 'binder transaction';
+              })[0].value
             : 0) +
           (v.filter((i: FreqChartDataStruct) => {
             return i.name === 'binder transaction async';
           }).length > 0
             ? v.filter((i: FreqChartDataStruct) => {
-              return i.name === 'binder transaction async';
-            })[0].value
+                return i.name === 'binder transaction async';
+              })[0].value
             : 0);
       }
       if (t.name === 'binder async rcv') {
@@ -568,22 +580,22 @@ function setBinderData(data: Array<Array<FreqChartDataStruct>>, binderList: Arra
             return i.name === 'binder transaction';
           }).length > 0
             ? v.filter((i: FreqChartDataStruct) => {
-              return i.name === 'binder transaction';
-            })[0].value
+                return i.name === 'binder transaction';
+              })[0].value
             : 0) +
           (v.filter((i: FreqChartDataStruct) => {
             return i.name === 'binder transaction async';
           }).length > 0
             ? v.filter((i: FreqChartDataStruct) => {
-              return i.name === 'binder transaction async';
-            })[0].value
+                return i.name === 'binder transaction async';
+              })[0].value
             : 0) +
           (v.filter((i: FreqChartDataStruct) => {
             return i.name === 'binder reply';
           }).length > 0
             ? v.filter((i: FreqChartDataStruct) => {
-              return i.name === 'binder reply';
-            })[0].value
+                return i.name === 'binder reply';
+              })[0].value
             : 0);
       }
       binderList.push(t);
diff --git a/ide/src/trace/component/chart/SpVirtualMemChart.ts b/ide/src/trace/component/chart/SpVirtualMemChart.ts
index dc7a67f97f81e7ea7192b7fc471db1c44a41999b..3f5c765a5ab90cdba0030efa0de1c7e80291a248 100644
--- a/ide/src/trace/component/chart/SpVirtualMemChart.ts
+++ b/ide/src/trace/component/chart/SpVirtualMemChart.ts
@@ -15,10 +15,7 @@
 
 import { SpSystemTrace } from '../SpSystemTrace';
 import { TraceRow } from '../trace/base/TraceRow';
-import {
-  VirtualMemoryRender,
-  VirtualMemoryStruct
-} from '../../database/ui-worker/ProcedureWorkerVirtualMemory';
+import { VirtualMemoryRender, VirtualMemoryStruct } from '../../database/ui-worker/ProcedureWorkerVirtualMemory';
 import { renders } from '../../database/ui-worker/ProcedureWorker';
 import { EmptyRender } from '../../database/ui-worker/cpu/ProcedureWorkerCPU';
 import { virtualMemoryDataSender } from '../../database/data-trafic/VirtualMemoryDataSender';
diff --git a/ide/src/trace/component/chart/SpVmTrackerChart.ts b/ide/src/trace/component/chart/SpVmTrackerChart.ts
index 4fe370e73a06bc002fd7bb5693c6246feb05b168..4c981253fbcd66357b19297fda0ac7d7b31e7a2f 100644
--- a/ide/src/trace/component/chart/SpVmTrackerChart.ts
+++ b/ide/src/trace/component/chart/SpVmTrackerChart.ts
@@ -36,19 +36,19 @@ import {
   shmDataSender,
 } from '../../database/data-trafic/VmTrackerDataSender';
 import { resetVmTracker } from '../../database/data-trafic/VmTrackerDataReceiver';
-import {querySmapsExits} from "../../database/sql/Smaps.sql";
+import { querySmapsExits } from '../../database/sql/Smaps.sql';
 import {
   queryisExistsGpuMemoryData,
   queryisExistsPurgeableData,
-  queryisExistsShmData
-} from "../../database/sql/Memory.sql";
-import {queryisExistsDmaData} from "../../database/sql/Dma.sql";
+  queryisExistsShmData,
+} from '../../database/sql/Memory.sql';
+import { queryisExistsDmaData } from '../../database/sql/Dma.sql';
 import {
   queryGpuTotalType,
   queryGpuWindowType,
   queryisExistsGpuData,
-  queryisExistsGpuResourceData
-} from "../../database/sql/Gpu.sql";
+  queryisExistsGpuResourceData,
+} from '../../database/sql/Gpu.sql';
 
 export class VmTrackerChart {
   private trace: SpSystemTrace;
diff --git a/ide/src/trace/component/chart/VSync.ts b/ide/src/trace/component/chart/VSync.ts
index eb91ccfc770cadc3b514117817223f181aee6ce8..ffbf14e2c6f97dc4083863a05d709325a0067579 100644
--- a/ide/src/trace/component/chart/VSync.ts
+++ b/ide/src/trace/component/chart/VSync.ts
@@ -48,28 +48,27 @@ export const querySfVSyncData = (): Promise<Array<VSyncData>> =>
                              })`
   );
 
-  export const querySingleVSyncData = (): Promise<Array<VSyncData>> => {
-    let flagsItem = window.localStorage.getItem(FlagsConfig.FLAGS_CONFIG_KEY);
-    let flagsItemJson = JSON.parse(flagsItem!);
-    let vsyncValue = flagsItemJson.vsyncValue;  
-    let vsyncCondition = '';
-    if (vsyncValue === 'H:VsyncGenerator' || vsyncValue === '') {
-      vsyncCondition = ` AND (callstack.name like 'H:GenerateVsyncCount%' or callstack.name like 'H:VSyncGenerator::ThreadLoop::Continue%'))`;
-    } else {
-      vsyncCondition = ` AND callstack.name like '${vsyncValue}%' )`;
-    }
-  
-    let sql =
-      `SELECT c.ts - tb.start_ts startTime
+export const querySingleVSyncData = (): Promise<Array<VSyncData>> => {
+  let flagsItem = window.localStorage.getItem(FlagsConfig.FLAGS_CONFIG_KEY);
+  let flagsItemJson = JSON.parse(flagsItem!);
+  let vsyncValue = flagsItemJson.vsyncValue;
+  let vsyncCondition = '';
+  if (vsyncValue === 'H:VsyncGenerator' || vsyncValue === '') {
+    vsyncCondition = ` AND (callstack.name like 'H:GenerateVsyncCount%' or callstack.name like 'H:VSyncGenerator::ThreadLoop::Continue%'))`;
+  } else {
+    vsyncCondition = ` AND callstack.name like '${vsyncValue}%' )`;
+  }
+
+  let sql =
+    `SELECT c.ts - tb.start_ts startTime
      FROM callstack c,
           trace_range tb
      WHERE c.id IN (SELECT callstack.id AS trackId
                     FROM callstack
                              JOIN process
-                    WHERE process.name = 'render_service'`
-      + vsyncCondition;
-    return query('querySingleVSyncData', sql);
-  }
+                    WHERE process.name = 'render_service'` + vsyncCondition;
+  return query('querySingleVSyncData', sql);
+};
 
 /**
  * load single vsync data
diff --git a/ide/src/trace/component/schedulingAnalysis/CheckCpuSetting.html.ts b/ide/src/trace/component/schedulingAnalysis/CheckCpuSetting.html.ts
index aaa47106545dfb02462c7b9f783b959b512332b2..c73744f0cf6b91380dabb7ab5f99b8547bec45ee 100644
--- a/ide/src/trace/component/schedulingAnalysis/CheckCpuSetting.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/CheckCpuSetting.html.ts
@@ -69,4 +69,4 @@ export const CheckCpuSettingHtml = `
             </div>
         </div>
         
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.html.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.html.ts
index 23562fe01796068b32e23707a1ea2ac625364e5c..60c2065b5ab149dba88c9da69c6e7bb2577f12ba 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.html.ts
@@ -82,4 +82,4 @@ export const TabCpuAnalysisHtml = `
         <lit-drawer id="drawer-right" drawer-title="CPU：0" content-width="65vw" placement="right" style="position: fixed" fixed mask mask-closeable closeable content-padding="0">
             <drawer-cpu-tabs id="drawer-cpu-tabs"></drawer-cpu-tabs>
         </lit-drawer>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.html.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.html.ts
index b54c839b0be37aacf2b9db27091b64803ece0d25..58a9a2cda70392ff7b525313a093047a02851c75 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.html.ts
@@ -66,4 +66,4 @@ export const TabCpuDetailsFrequencyHtml = `
             </div>
         </div>
         <tab-cpu-details-threads id="tab-cpu-details-threads"></tab-cpu-details-threads>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.html.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.html.ts
index 30fa26dfd026b8d6078ad458e7dab7329f4d3fbf..a35ad593d0945bd5ffb65a994aaa6545bc57b8b4 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.html.ts
@@ -62,4 +62,4 @@ export const TabCpuDetailsIdleHtml = `
                  </table-no-data>
             </div>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
index 6cf911db0515cdec90bc7c1f5d873e6cd8dc7886..8eeeccda8d6be3702200121924e1d33dfaf22200 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
@@ -115,8 +115,8 @@ export class TabCpuDetailsIdle extends BaseElement {
           type !== 'CPU Idle'
             ? undefined
             : (it) => {
-              return pieChartColors[(it as any).value];
-            },
+                return pieChartColors[(it as any).value];
+              },
       },
       hoverHandler: (data) => {
         if (data) {
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.html.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.html.ts
index 3c080cef952cd9212c42c665b8729ed709a2f9df..bd7fd93756c2a3ee04b367160271eccd3b84eb0a 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.html.ts
@@ -63,4 +63,4 @@ export const TabCpuDetailsIrqHtml = `
                 </table-no-data>
             </div>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.html.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.html.ts
index 54309260e6316e785eb31026cd6a0b61888a6fc6..37f62f0ad73b5329fc55b69ab345a3ccb4b79f35 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.html.ts
@@ -88,4 +88,4 @@ export const TabCpuDetailsThreadsHtml = `
                 </table-no-data>
             </div>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.html.ts b/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.html.ts
index f57b118f9131f61ab00ecb2ba2be2db7f11a4138..5ff0a95de38170e41709ba97620f70d127a6049b 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.html.ts
@@ -61,4 +61,4 @@ export const TabThreadAnalysisHtml = `
             <top20-process-switch-count id="top20_process_switch_count" style="display: none"></top20-process-switch-count>
             <top20-frequency-thread id="top20_frequency_thread" style="display: none"></top20-frequency-thread>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.html.ts b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.html.ts
index 7bb8b4f6cd15ce4bf86d79b8a8625d89e72f93fe..d934781d059702e72758af4a61c778f1417dbc17 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.html.ts
@@ -67,4 +67,4 @@ export const Top20FrequencyThreadHtml = `
             </div>
         </div>
         </table-no-data>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts
index 3087644b30dbae208d14cd6d0a3693e0e4b96142..a8c2f79e24a42954173eed4835ae6cdd343fff01 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts
@@ -26,7 +26,7 @@ import { LitProgressBar } from '../../../base-ui/progress-bar/LitProgressBar';
 import './TableNoData';
 import { TableNoData } from './TableNoData';
 import { getProbablyTime } from '../../database/logic-worker/ProcedureLogicWorkerCommon';
-import {queryThreads} from "../../database/sql/ProcessThread.sql";
+import { queryThreads } from '../../database/sql/ProcessThread.sql';
 import { Top20FrequencyThreadHtml } from './Top20FrequencyThread.html';
 
 @element('top20-frequency-thread')
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.html.ts b/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.html.ts
index cd0507e9dfb01cdfb9e411baf9aad9a353de737d..34f7f3ac5e99ffbdead928178d326ed35fa2d384 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.html.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.html.ts
@@ -126,4 +126,4 @@ export const Top20ThreadCpuUsageHtml = `
         </div>
         </table-no-data>
         
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/setting/SpAllocation.html.ts b/ide/src/trace/component/setting/SpAllocation.html.ts
index 8487003f00faedf9c564c8c957a9c5aa8d6b4f8c..e9125bfb01578413cf64ad3650b3293bfb3e8c18 100644
--- a/ide/src/trace/component/setting/SpAllocation.html.ts
+++ b/ide/src/trace/component/setting/SpAllocation.html.ts
@@ -16,90 +16,87 @@
 export const SpAllocationHtml = `
 <style>
 :host{
-    display: block;
-    width: 100%;
-    border-radius: 0 16px 16px 0;
-    height: 100%;
+  display: block;
+  width: 100%;
+  border-radius: 0 16px 16px 0;
+  height: 100%;
 }
 .title {
-    grid-column: span 2 / auto;
-    margin-top: 5vh;
+  grid-column: span 2 / auto;
+  margin-top: 5vh;
 }
 .allocation-font-style{
-    font-family: Helvetica-Bold;
-    font-size: 1em;
-    color: var(--dark-color1,#000000);
-    line-height: 28px;
-    font-weight: 700;
+  font-family: Helvetica-Bold;
+  font-size: 1em;
+  color: var(--dark-color1,#000000);
+  line-height: 28px;
+  font-weight: 700;
 }
 .root {
-    padding-top: 30px;
-    margin-left: 40px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: min-content 1fr min-content;
-    width: 90%;
-    border-radius: 0 16px 16px 0;
-    margin-bottom: 30px;
+  padding-top: 30px;
+  padding-left: 54px;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content 1fr min-content;
+  width: 81%;
+  border-radius: 0 16px 16px 0;
+  margin-bottom: 30px;
+  margin-right: 30px;
 }
 .allocation-inner-font-style {
-    font-family: Helvetica,serif;
-    font-size: 1em;
-    color: var(--dark-color1,#000000);
-    text-align: left;
-    line-height: 20px;
-    font-weight: 400;
-    display:flex;
-    width:75%; 
-    margin-top: 3px;
-   
+  font-family: Helvetica,serif;
+  text-align: left;
+  line-height: 40px;
+  font-weight: 700;
+  margin-right: 10px;
+  opacity: 0.9;
+  font-size: 18px;
 }
 input {
-   width: 72%;
-   height: 25px;
-   border:0;
-   outline:none;
-   border-radius: 16px;
-   text-indent:2%
+  width: 72%;
+  height: 25px;
+  border:0;
+  outline:none;
+  border-radius: 16px;
+  text-indent:2%
 }
 input::-webkit-input-placeholder{
-    color:var(--bark-prompt,#999999);
+  color:var(--bark-prompt,#999999);
 }
 .allocation-select {
-    height: 30px;
-    border: 0;
-    border-radius: 3px;
-    outline: none;
-    border: 1px solid var(--dark-border,#B3B3B3);
-    width: 60px;
-    background-color:var(--dark-background5, #FFFFFF)
-    font-family: Helvetica;
-    font-size: 14px;
-    color: var(--dark-color,#212121)
-    text-align: center;
-    line-height: 16px;
-    font-weight: 400;
-    border-radius: 16px;
+  height: 30px;
+  outline: none;
+  border: 1px solid var(--dark-border,#B3B3B3);
+  width: 60px;
+  background-color:var(--dark-background5, #FFFFFF)
+  font-family: Helvetica;
+  font-size: 14px;
+  color: var(--dark-color,#212121)
+  text-align: center;
+  line-height: 16px;
+  font-weight: 400;
+  border-radius: 16px;
 }
 .allocation-application{
-   display: flex;
-   flex-direction: column;
-   grid-gap: 15px;
-   margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+  margin-top: 40px;
+  grid-column: 1 / 3;
 }
 .allocation-switchstyle{
-   margin-top: 40px;
-   display: flex;
+  margin-top: 40px;
+  width: 92%;
 }
 .allocation-inputstyle{
-    background: var(--dark-background5,#FFFFFF);
-    border: 1px solid var(--dark-background5,#ccc);
-    font-family: Helvetica;
-    font-size: 14px;
-    color: var(--dark-color1,#212121);
-    text-align: left;
-    line-height: 16px;
-    font-weight: 400;
+  background: var(--dark-background5,#FFFFFF);
+  border: 1px solid var(--dark-background5,#ccc);
+  font-family: Helvetica;
+  font-size: 14px;
+  color: var(--dark-color1,#212121);
+  text-align: left;
+  line-height: 16px;
+  font-weight: 400;
 }
 
 input::-webkit-input-placeholder{
@@ -107,89 +104,101 @@ input::-webkit-input-placeholder{
 }
 
 :host([startSamp]) .allocation-inputstyle {
-    background: var(--dark-background5,#FFFFFF);
+  background: var(--dark-background5,#FFFFFF);
 }
 
 :host(:not([startSamp])) .allocation-inputstyle {
-    color: #b7b7b7;
-    background: var(--dark-background1,#f5f5f5);
+  color: #b7b7b7;
+  background: var(--dark-background1,#f5f5f5);
 }
 
 #one_mb{
-    background-color:var(--dark-background5, #FFFFFF)
+  background-color:var(--dark-background5, #FFFFFF)
 }
 #one_kb{
-    background-color:var(--dark-background5, #FFFFFF)
+  background-color:var(--dark-background5, #FFFFFF)
 }
 #two_mb{
-    background-color:var(--dark-background5, #FFFFFF)
+  background-color:var(--dark-background5, #FFFFFF)
 }
 #two_kb{
-    background-color:var(--dark-background5, #FFFFFF)
+  background-color:var(--dark-background5, #FFFFFF)
 }
 .processSelect, .packageSelect {
-    border-radius: 15px;
-    width: 84%;
-    height: 27px;
+  border-radius: 15px;
+  width: 92%;
+  height: 27px;
 }
 .value-range {
   opacity: 0.6;
   font-family: Helvetica;
-  font-size: 1em;
-  color: var(--dark-color,#000000);
-  text-align: left;
-  line-height: 20px;
+  line-height: 35px;
+  text-align: center;
   font-weight: 400;
+  font-size: 14px;
 }
 .record-title{
-    margin-bottom: 16px;
-    grid-column: span 3;
+  margin-bottom: 16px;
+  grid-column: 1 / 3;
+  width: auto;
 }
 #interval-slider {
-    margin: 0 8px;
-    grid-column: span 2;
+  margin: 0 8px;
+  grid-column: 1 / 2;
 }
 .resultSize{
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: min-content min-content;
-    background-color: var(--dark-background5,#F2F2F2);
-    -webkit-appearance:none;
-    color: var(--dark-color,#6a6f77);
-    width: 150px;
-    margin: 0 30px 0 0;
-    height: 40px;
-    border-radius:20px;
-    outline:0;
-    border:1px solid var(--dark-border,#c8cccf);
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: min-content min-content;
+  background-color: var(--dark-background5,#F2F2F2);
+  -webkit-appearance:none;
+  color: var(--dark-color,#6a6f77);
+  width: 150px;
+  height: 40px;
+  border-radius:20px;
+  outline:0;
+  border:1px solid var(--dark-border,#c8cccf);
 }
 .record-mode{
-    font-family: Helvetica-Bold;
-    font-size: 1em;
-    color: var(--dark-color1,#000000);
-    line-height: 28px;
-    font-weight: 400;
-    margin-bottom: 16px;
-    grid-column: span 1;
+  font-family: Helvetica,serif;
+  font-size: 18px;
+  color: var(--dark-color1,#000000);
+  line-height: 40px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  grid-column: span 1;
+  text-align: left;
+  margin-right: 10px;
+  opacity: 0.9;
+}
+.record-mode-available {
+  opacity: 0.6;
+  font-family: Helvetica;
+  line-height: 35px;
+  text-align: left;
+  font-weight: 400;
+  font-size: 14px;
 }
 .allocation-record-prompt{
-      opacity: 0.6;
-      font-family: Helvetica;
-      font-size: 14px;
-      text-align: center;
-      line-height: 35px;
-      font-weight: 400;
-}
-.interval-result{
-    -webkit-appearance:none;
-    border: none;
-    text-align: center;
-    width: 90px;
-    font-size:14px;
-    outline:0;
-    margin: 5px 0 5px 5px;
-    background-color: var(--dark-background5,#F2F2F2);
-    color:var(--dark-color,#6a6f77);
+  opacity: 0.6;
+  font-family: Helvetica;
+  font-size: 14px;
+  line-height: 35px;
+  font-weight: 400;
+  grid-column: 1 / 3;
+  text-align: left;
+  width: 50%;
+}
+.interval-result {
+  -webkit-appearance:none;
+  border: none;
+  text-align: center;
+  width: 90px;
+  font-size:14px;
+  outline:0;
+  margin: 5px 0 5px 5px;
+  background-color: var(--dark-background5,#F2F2F2);
+  color:var(--dark-color,#6a6f77);
 }
 
 .allocation-title {
@@ -203,133 +212,187 @@ input::-webkit-input-placeholder{
 }
 
 lit-switch {
-  height: 38px;
-  margin-top: 10px;
   display: inline;
   float: right;
 }
 
+#addOptions {
+  border-radius: 15px;
+  border-color:rgb(0,0,0,0.1);
+  width: 150px;
+  height: 40px;
+  font-family: Helvetica;
+  font-size: 1em;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 20px;
+  font-weight: 400;
+  margin-right: 5%;
+  float: right;
+  grid-column: 2;
+  justify-self: end;
+}
+
+:host(:not([startSamp])) #addOptions {
+  background: #999999;
+  cursor: no-drop;
+}
+:host([startSamp]) #addOptions {
+  background: #3391FF;
+  cursor: default;
+}
+
+.divider {
+  position: absolute;
+  border-top: 1px dashed rgba(0, 0, 0, 0.5);
+  width: 80%;
+  opacity: 0.3;
+  align-self: center;
+}
+.advance-option-div {
+  display: none;
+  flex-direction: row;
+  grid-column: 1 / 3;
+  align-items: center;
+  width: 92%;
+}
+
+input:disabled {
+  cursor: no-drop;
+}
+
 </style>
 <div class="root">
   <div class = "title" style="width: 92%;">
     <span class="allocation-title">Start Native Memory Record</span>
     <lit-switch id="switch-disabled"></lit-switch>
   </div>
-  <div class="allocation-application">
-     <span class="allocation-inner-font-style">ProcessId or ProcessName</span>
-     <span class="value-range">Record process</span>
-     <lit-select-v class="processSelect" rounded mode="multiple" default-value="" id="pid" 
-     placement="bottom" title="process" placeholder="please select process">
-     </lit-select-v>
-     <lit-select default-value="" rounded="" class="packageSelect" canInsert="" id="packageName"
-     title="package" rounded placement = "bottom" placeholder="please select package" showSearchInput>
-     </lit-select>
-  </div>
-  <div class="allocation-application">
-    <span class="allocation-inner-font-style" >Max unwind level</span>
-    <span class="value-range">Max Unwind Level Rang is 0 - 512, default 10</span>
-    <input id= "unwind"  class="allocation-inputstyle inputBoxes" type="text" 
-    placeholder="Enter the Max Unwind Level" 
-    oninput="if(this.value > 512){this.value = '512'} if(this.value > 0 && 
-    this.value.toString().startsWith('0')){ this.value = Number(this.value) }"  
-    onkeyup="this.value=this.value.replace(/\\D/g,'')" value="10">
-  </div>
-  <div class="allocation-application">
-    <span class="allocation-inner-font-style">Shared Memory Size (One page equals 4 KB)</span>
-    <span class="value-range">Shared Memory Size Range is 0 - 131072 page, default 16384 page</span>
+  <!-- ProcessId or ProcessName(default) -->
+  <div class="allocation-application" style="grid-column: 1 / 3;">
     <div>
-      <input id = "shareMemory" class="allocation-inputstyle inputBoxes" type="text" 
-      placeholder="Enter the Shared Memory Size" 
-      oninput="if(this.value > 131072){this.value = '131072'} if(this.value > 0 && 
-      this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 
-      onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
-      <span>Page</span>
+      <span class="allocation-inner-font-style">Process</span>
+      <span class="value-range">Record process id or process name</span>
     </div>
+    <lit-select-v class="processSelect" rounded mode="multiple" default-value="" id="pid"
+    placement="bottom" title="process" placeholder="please select process">
+    </lit-select-v>
+    <lit-select default-value="" rounded="" class="packageSelect" canInsert="" id="packageName"
+    title="package" rounded placement = "bottom" placeholder="please select package" showSearchInput>
+    </lit-select>
   </div>
-  <div class="allocation-application">
-    <span class="allocation-inner-font-style" >Filter Memory Size </span>
-    <span class="value-range">Filter size Range is 0 - 65535 byte, default 0 byte</span> 
-    <div>
-         <input id = "filterSized" class="allocation-inputstyle inputBoxes" type="text" 
-         placeholder="Enter the Filter Memory Size" 
-         oninput="if(this.value > 65535){this.value = '65535'} if(this.value > 0 && 
-         this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 
-         onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0">
-         <span>Byte</span>
-    </div>
+  <!-- Use Fp Unwind(default) -->
+  <div class="allocation-switchstyle" id="max_stack_depth_div" style="align-items: center;grid-column: 1 / 3;">
+    <span class="allocation-inner-font-style" id="fp-unwind">Use Fp Unwind</span>
+    <lit-switch class="lts" id="use_fp_unwind" title="fp unwind model" checked="true"></lit-switch>
   </div>
-  <div class="allocation-switchstyle version-controller" style="flex-wrap: wrap;grid-gap: 15px;">
-    <span class="allocation-inner-font-style" >Sample Interval (Available on recent OpenHarmony 4.0)</span>
-    <span class="value-range">Max Sample Interval Rang is 0 - 65535, default 0</span>
-    <input id= "sample-interval-input"  class="allocation-inputstyle inputBoxes" type="text" 
-    placeholder="Enter the sample interval" 
-    oninput="if(this.value > 65535){this.value = '65535'} if(this.value < 0 && 
-    this.value.toString().startsWith('0')){ this.value = '1'}"  
-    onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0">
+  <!-- Use Record Js Stack(default) -->
+  <div class="allocation-switchstyle" style="align-items: center;grid-column: 1 / 3;">
+    <span class="allocation-inner-font-style" id="record-js-stack">Use Record Js Stack</span>
+    <lit-switch class="lts" id="use_js-stack" title="js stack model"></lit-switch>
   </div>
-  <div id="napi-div" class="allocation-application" style="display: none">
-    <span class="allocation-inner-font-style" >Filter Napi Name </span>
-    <span class="value-range">Record napi name</span> 
-    <div>
-         <input id = "napiName" class="allocation-inputstyle inputBoxes" type="text" 
-         placeholder="enter the napi name" value="">
+  <!-- Use statistics slide(default) -->
+  <div class="allocation-switchstyle record-statistics-result version-controller"
+  style="grid-row: 5; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 2fr;
+  grid-template-columns: 1fr min-content;">
+    <div class="record-title">
+      <span class="record-mode">Use Record Statistics</span>
+      <span class="record-mode-available">(Available on recent OpenHarmony 4.0)</span>
+      <lit-switch class="lts" id="use_statistics" title="statistics model" checked="true"></lit-switch>
     </div>
-  </div>
-  <div id="js-stack-depth-div" class="allocation-application" style="display: none">
-    <span class="allocation-inner-font-style" >Max Js Stack Depth </span>
-    <span class="value-range">js stack max depth Range</span> 
-    <div>
-         <input id = "jsStackDepth" class="allocation-inputstyle inputBoxes" type="text" 
-         placeholder="0" 
-         oninput="if(this.value > 128){this.value = '128'} if(this.value > 0 && 
-         this.value.toString().startsWith('0')){ this.value = Number(this.value) }" 
-         onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0">
+    <span class="allocation-record-prompt"> Time between following interval (0 = disabled) </span>
+    <lit-slider id="interval-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
+    </lit-slider>
+    <div class='resultSize'>
+      <input class="interval-result inputBoxes" type="text" value='0'
+      onkeyup="this.value=this.value.replace(/\\D/g,'')"
+      oninput="if(this.value > 3600){this.value = '3600'} if(this.value > 0 &&
+      this.value.toString().startsWith('0')){ this.value = Number(this.value) }" >
+      <span style="text-align: center; margin: 8px"> S </span>
     </div>
   </div>
-  <div class="allocation-switchstyle">
-      <span class="allocation-inner-font-style" id="fp-unwind">Use Fp Unwind</span>               
-      <lit-switch class="lts" id="use_fp_unwind" title="fp unwind" checked="true"></lit-switch>
+  <!-- Advance Options(default) -->
+  <div style="position: relative; display: grid; grid-column: 1 / 3;margin-top: 30px">
+    <button id ="addOptions">Advance Options</button>
+    <div class="divider"></div>
   </div>
-  <div class="allocation-switchstyle version-controller">
-      <span class="allocation-inner-font-style" id="record_accurately ">
-      Use Record Accurately (Available on recent OpenHarmony 4.0)</span> 
-      <lit-switch   class="lts" id="use_record_accurately" title="record_accurately" checked="true"></lit-switch>
+  <!-- Use Startup Mode(advance) -->
+   <div class="allocation-switchstyle version-controller advance-option-div" id="use-startup-el">
+    <span class="allocation-inner-font-style" id="startup_mode">Use Startup Mode</span>
+    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
+    <lit-switch class="lts" id="use_startup_mode" title="startup_mode"></lit-switch>
   </div>
-  <div class="allocation-switchstyle version-controller">
-      <span class="allocation-inner-font-style" id="offline_symbolization">
-      Use Offline Symbolization (Available on recent OpenHarmony 4.0)</span> 
-      <lit-switch class="lts" id="use_offline_symbolization" title="offline_symbolization" checked="true"></lit-switch>
+  <!-- Use Response Lib Mode(advance) -->
+  <div class="allocation-switchstyle version-controller advance-option-div" id="use-response-lib-el">
+    <span class="allocation-inner-font-style" id="response_lib_mode_span">Use Response Lib Mode</span>
+    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
+    <lit-switch class="lts" id="response_lib_mode" title="response_lib_mode"></lit-switch>
   </div>
-   <div class="allocation-switchstyle version-controller">
-      <span class="allocation-inner-font-style" id="startup_mode">
-      Use Startup Mode (Available on recent OpenHarmony 4.0)</span> 
-      <lit-switch class="lts" id="use_startup_mode" title="startup_mode"></lit-switch>
-  </div>   
-  <div class="allocation-switchstyle version-controller">
-      <span class="allocation-inner-font-style" id="response_lib_mode_span">
-      Use Response Lib Mode (Available on recent OpenHarmony 4.0)</span> 
-      <lit-switch class="lts" id="response_lib_mode" title="response_lib_mode"></lit-switch>
+  <!-- record_accurately(advance) -->
+  <div class="allocation-switchstyle version-controller advance-option-div" id="record_accurately_div">
+    <span class="allocation-inner-font-style" id="record_accurately ">Use Record Accurately</span>
+    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
+    <lit-switch class="lts" id="use_record_accurately" title="record_accurately" checked="true"></lit-switch>
   </div>
-    <div class="allocation-switchstyle">
-      <span class="allocation-inner-font-style" id="record-js-stack">Record Js Stack</span>               
-      <lit-switch class="lts" id="use_js-stack" title="js stack"></lit-switch>
+  <!-- offline_symbolization(advance) -->
+  <div class="allocation-switchstyle version-controller advance-option-div" id="offline_symbolization_div">
+    <span class="allocation-inner-font-style" id="offline_symbolization">Use Offline Symbolization</span>
+    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
+    <lit-switch class="lts" id="use_offline_symbolization" title="offline_symbolization" checked="true"></lit-switch>
   </div>
-  <div class="allocation-switchstyle record-statistics-result version-controller" 
-  style="grid-row: 10; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 1fr;
-  grid-template-columns: 1fr min-content;">
-    <div class="record-title">
-        <span class="record-mode">Use Record Statistics (Available on recent OpenHarmony 4.0)</span> 
-        <span class="allocation-record-prompt"> Time between following interval (0 = disabled) </span>
-    </div>
-    <lit-slider id="interval-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
-    </lit-slider>
-    <div class='resultSize'>
-        <input class="interval-result inputBoxes" type="text" value='0' 
-        onkeyup="this.value=this.value.replace(/\\D/g,'')"  
-        oninput="if(this.value > 3600){this.value = '3600'} if(this.value > 0 && 
-        this.value.toString().startsWith('0')){ this.value = Number(this.value) }" >
-        <span style="text-align: center; margin: 8px"> S </span>
-    </div>
+  <!-- Max Sample Interval Rang(advance) -->
+  <div class="allocation-switchstyle version-controller advance-option-div" id="sample-interval-el" style="flex-wrap: wrap;">
+    <span class="allocation-inner-font-style" id="statistics-interval-name">Sample Interval</span>
+    <span class="record-mode-available" style="margin-right: auto;">(Available on recent OpenHarmony 4.0)</span>
+    <span class="value-range" style="margin-right: auto;" id="statistics-interval-range">Rang is 0 - 65535, default 10 S</span>
+    <input id= "statistics-interval-input" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
+    placeholder="Enter the interval" value="10">
+  </div>
+  <!-- Shared Memory Size(advance) -->
+  <div class="allocation-application advance-option-div" id="shared-memory-size-el">
+    <span class="allocation-inner-font-style">Shared Memory Size</span>
+    <span class="value-range" style="margin-right: auto;">Range is 0 - 131072, default 16384 page (One page equals 4 KB)</span>
+    <input id = "shareMemory" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
+      placeholder="Enter the Shared Memory Size" 
+      oninput="if(this.value > 131072){this.value = '131072'} if(this.value > 0 &&
+      this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
+      onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
+  </div>
+  <!-- Max unwind level(advance) -->
+  <div class="allocation-application advance-option-div" id="max-unwind-level-el">
+    <span class="allocation-inner-font-style" >Max unwind level</span>
+    <span class="value-range" style="margin-right: auto;">Rang is 0 - 512, default 20</span>
+    <input id= "unwind" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
+    placeholder="Enter the Max Unwind Level" 
+    oninput="if(this.value > 512){this.value = '512'} if(this.value > 0 && 
+    this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
+    onkeyup="this.value=this.value.replace(/\\D/g,'')" value="20">
+  </div>
+  <!-- Max Js Stack Depth(advance) -->
+  <div id="js-stack-depth-div" class="allocation-application advance-option-div">
+    <span class="allocation-inner-font-style" >Max Js Stack Depth </span>
+    <span class="value-range" style="margin-right: auto;">Range 0 - 128, default 20 </span>
+    <input id = "jsStackDepth" class="allocation-inputstyle inputBoxes" style="width: auto;" type="text"
+       placeholder="0"
+       oninput="if(this.value > 128){this.value = '128'} if(this.value > 0 &&
+       this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
+       onkeyup="this.value=this.value.replace(/\\D/g,'')" value="20">
+  </div>
+  <!-- Filter Memory Size(advance) -->
+  <div class="allocation-application advance-option-div" id="filter-memory-size-el">
+    <span class="allocation-inner-font-style" >Filter Memory Size </span>
+    <span class="value-range" style="margin-right: auto;">Range is 0 - 65535, default 0 Byte</span>
+    <input id = "filterSized" style="width: auto;" class="allocation-inputstyle inputBoxes" type="text"
+       placeholder="Enter the Filter Memory Size"
+       oninput="if(this.value > 65535){this.value = '65535'} if(this.value > 0 &&
+       this.value.toString().startsWith('0')){ this.value = Number(this.value) }"
+       onkeyup="this.value=this.value.replace(/\\D/g,'')" value="0">
+  </div>
+  <!-- Filter Napi Name(advance) -->
+  <div id="napi-div" class="allocation-application advance-option-div" style="margin-bottom: 40px;">
+    <span class="allocation-inner-font-style" >Filter Napi Name </span>
+    <span class="value-range" style="margin-right: auto;">napi name to filter</span>
+    <input id = "napiName" class="allocation-inputstyle inputBoxes" style="width: 50%;" type="text"
+       placeholder="enter the napi name" value="">
   </div>
 </div>
 `;
diff --git a/ide/src/trace/component/setting/SpAllocations.ts b/ide/src/trace/component/setting/SpAllocations.ts
index 72fe9aae7ad80d3270c1776a94bc55f053485846..9717422628f080155aeaa1afe4281cbb73ecada5 100644
--- a/ide/src/trace/component/setting/SpAllocations.ts
+++ b/ide/src/trace/component/setting/SpAllocations.ts
@@ -26,26 +26,41 @@ import { LitSelect } from '../../../base-ui/select/LitSelect';
 
 @element('sp-allocations')
 export class SpAllocations extends BaseElement {
+  // normal option
   private processId: LitSelectV | null | undefined;
   private packageName: LitSelect | null | undefined;
   private unwindEL: HTMLInputElement | null | undefined;
-  private shareMemory: HTMLInputElement | null | undefined;
-  private shareMemoryUnit: HTMLSelectElement | null | undefined;
-  private filterMemory: HTMLInputElement | null | undefined;
   private intervalResultInput: HTMLInputElement | null | undefined;
   private fpUnWind: LitSwitch | null | undefined;
   private statisticsSlider: LitSlider | null | undefined;
+  private useStatisticsEl: LitSwitch | null | undefined;
+  private recordStatisticsResult: HTMLDivElement | null | undefined;
+  private addOptionButton: HTMLButtonElement | undefined | null;
+  // advance option
+  private recordAccuratelyDivEl: HTMLDivElement | undefined | null;
+  private offlineSymbolizationDivEl: HTMLDivElement | undefined | null;
+  private maxUnwindLevelEl: HTMLDivElement | undefined | null;
+  private sharedMemorySizeEl: HTMLDivElement | undefined | null;
+  private filterMemorySizeEl: HTMLDivElement | undefined | null;
+  private sampleIntervalEl: HTMLDivElement | undefined | null;
+  private useStartupEl: HTMLDivElement | undefined | null;
+  private useResponseLibEl: HTMLDivElement | undefined | null;
+  private jsStackRecordDepthEl: HTMLDivElement | undefined | null;
+  private napiRecordEl: HTMLDivElement | undefined | null;
+  private advanceItems: Array<HTMLDivElement | undefined | null> = [];
+  private shareMemory: HTMLInputElement | null | undefined;
+  private shareMemoryUnit: HTMLSelectElement | null | undefined;
+  private filterMemory: HTMLInputElement | null | undefined;
   private recordAccurately: LitSwitch | null | undefined;
   private offlineSymbol: LitSwitch | null | undefined;
   private startupMode: LitSwitch | null | undefined;
   private jsStackModel: LitSwitch | null | undefined;
   private responseLibMode: LitSwitch | null | undefined;
-  private recordStatisticsResult: HTMLDivElement | null | undefined;
-  private sampleInterval: HTMLInputElement | null | undefined;
-
-  private filterSize: HTMLInputElement | null | undefined;
   private napiName: HTMLInputElement | null | undefined;
   private jsStackDepth: HTMLInputElement | null | undefined;
+  private statisticsIntervalInput: HTMLInputElement | null | undefined;
+  private statisticsIntervalName: HTMLSpanElement | null | undefined;
+  private statisticsIntervalRange: HTMLSpanElement | null | undefined;
 
   set startSamp(allocationStart: boolean) {
     if (allocationStart) {
@@ -111,9 +126,9 @@ export class SpAllocations extends BaseElement {
   }
 
   get record_statistics(): boolean {
-    if (this.recordStatisticsResult?.hasAttribute('percent')) {
-      let value = Number(this.recordStatisticsResult?.getAttribute('percent'));
-      return value > 0;
+    let value = this.useStatisticsEl!.checked;
+    if (value !== undefined) {
+      return value;
     }
     return true;
   }
@@ -177,11 +192,11 @@ export class SpAllocations extends BaseElement {
   }
 
   get sample_interval(): number {
-    return Number(this.sampleInterval!.value);
+    return Number(this.statisticsIntervalInput!.value);
   }
 
   get filter_napi_name(): string {
-    if (this.jsStackModel?.checked) {
+    if (this.jsStackModel?.checked && !this.fp_unwind) {
       return this.napiName!.value || '';
     }
     return '';
@@ -189,120 +204,161 @@ export class SpAllocations extends BaseElement {
 
   get max_js_stack_depth(): number {
     if (this.jsStackModel?.checked) {
-      return Number(this.jsStackDepth!.value);
+      return Number(this.jsStackDepth!.value) || 10;
     }
     return 0;
   }
 
+  initElements(): void {
+    // normal option
+    this.processId = this.shadowRoot?.getElementById('pid') as LitSelectV;
+    this.packageName = this.shadowRoot?.getElementById('packageName') as LitSelect;
+    this.unwindEL = this.shadowRoot?.getElementById('unwind') as HTMLInputElement;
+    this.fpUnWind = this.shadowRoot?.getElementById('use_fp_unwind') as LitSwitch;
+    this.statisticsSlider = this.shadowRoot?.querySelector<LitSlider>('#interval-slider') as LitSlider;
+    this.recordStatisticsResult = this.shadowRoot?.querySelector<HTMLDivElement>('.record-statistics-result');
+    this.addOptionButton = this.shadowRoot?.querySelector<HTMLButtonElement>('#addOptions');
+    this.intervalResultInput = this.shadowRoot?.querySelector('.interval-result') as HTMLInputElement;
+    // advance option
+    this.recordAccuratelyDivEl = this.shadowRoot?.getElementById('record_accurately_div') as HTMLDivElement;
+    this.offlineSymbolizationDivEl = this.shadowRoot?.getElementById('offline_symbolization_div') as HTMLDivElement;
+    this.jsStackRecordDepthEl = this.shadowRoot?.getElementById('js-stack-depth-div') as HTMLDivElement;
+    this.napiRecordEl = this.shadowRoot?.getElementById('napi-div') as HTMLDivElement;
+    this.maxUnwindLevelEl = this.shadowRoot?.getElementById('max-unwind-level-el') as HTMLDivElement;
+    this.sharedMemorySizeEl = this.shadowRoot?.getElementById('shared-memory-size-el') as HTMLDivElement;
+    this.filterMemorySizeEl = this.shadowRoot?.getElementById('filter-memory-size-el') as HTMLDivElement;
+    this.sampleIntervalEl = this.shadowRoot?.getElementById('sample-interval-el') as HTMLDivElement;
+    this.useStartupEl = this.shadowRoot?.getElementById('use-startup-el') as HTMLDivElement;
+    this.useResponseLibEl = this.shadowRoot?.getElementById('use-response-lib-el') as HTMLDivElement;
+
+    this.recordAccurately = this.shadowRoot?.getElementById('use_record_accurately') as LitSwitch;
+    this.shareMemory = this.shadowRoot?.getElementById('shareMemory') as HTMLInputElement;
+    this.shareMemoryUnit = this.shadowRoot?.getElementById('shareMemoryUnit') as HTMLSelectElement;
+    this.filterMemory = this.shadowRoot?.getElementById('filterSized') as HTMLInputElement;
+    this.offlineSymbol = this.shadowRoot?.getElementById('use_offline_symbolization') as LitSwitch;
+    this.startupMode = this.shadowRoot?.getElementById('use_startup_mode') as LitSwitch;
+    this.jsStackModel = this.shadowRoot?.getElementById('use_js-stack') as LitSwitch;
+    this.responseLibMode = this.shadowRoot?.getElementById('response_lib_mode') as LitSwitch;
+    this.useStatisticsEl = this.shadowRoot?.getElementById('use_statistics') as LitSwitch;
+    this.statisticsIntervalInput = this.shadowRoot?.getElementById('statistics-interval-input') as HTMLInputElement;
+    this.napiName = this.shadowRoot?.getElementById('napiName') as HTMLInputElement;
+    this.jsStackDepth = this.shadowRoot?.getElementById('jsStackDepth') as HTMLInputElement;
+    this.statisticsIntervalName = this.shadowRoot?.getElementById('statistics-interval-name') as HTMLSpanElement;
+    this.statisticsIntervalRange = this.shadowRoot?.getElementById('statistics-interval-range') as HTMLSpanElement;
+    this.initNativeSwitchOption();
+  }
+
+  initHtml(): string {
+    return SpAllocationHtml;
+  }
+
   connectedCallback(): void {
-    this.unwindEL?.addEventListener('keydown', this.handleInputChange);
-    this.shareMemory?.addEventListener('keydown', this.handleInputChange);
-    this.shareMemoryUnit?.addEventListener('keydown', this.handleInputChange);
-    this.filterMemory?.addEventListener('keydown', this.handleInputChange);
-    this.intervalResultInput?.addEventListener('keydown', this.handleInputChange);
-    this.filterSize?.addEventListener('keydown', this.handleInputChange);
-    this.statisticsSlider?.addEventListener('input', this.statisticsSliderInputHandler);
-    this.intervalResultInput?.addEventListener('input', this.intervalResultInputHandler);
-    this.intervalResultInput?.addEventListener('focusout', this.intervalResultFocusOutHandler);
+    this.unwindEL?.addEventListener('keydown', this.handleInputChangeEvent);
+    this.shareMemory?.addEventListener('keydown', this.handleInputChangeEvent);
+    this.shareMemoryUnit?.addEventListener('keydown', this.handleInputChangeEvent);
+    this.filterMemory?.addEventListener('keydown', this.handleInputChangeEvent);
+    this.intervalResultInput?.addEventListener('keydown', this.handleInputChangeEvent);
+    this.statisticsSlider?.addEventListener('input', this.statisticsSliderInputEvent);
+    this.intervalResultInput?.addEventListener('input', this.statisticsValueInputEvent);
+    this.intervalResultInput?.addEventListener('focusout', this.statisticsFocusOutEvent);
     this.statisticsSlider?.shadowRoot
-      ?.querySelector<HTMLElement>('#slider')!
-      .addEventListener('mouseup', this.statisticsSliderMouseupHandler);
-    this.startupMode?.addEventListener('change', this.startupModeChangeHandler);
-    this.jsStackModel?.addEventListener('change', this.jsStackModelChangeHandler);
+      ?.querySelector('#slider')!
+      .addEventListener('mouseup', this.statisticsSliderMouseupEvent);
+    this.startupMode?.addEventListener('change', this.startupModeChangeEvent);
+    this.jsStackModel?.addEventListener('change', this.jsStackModelChangeEvent);
+    this.addOptionButton?.addEventListener('click', this.advanceOptionClickEvent);
+    this.fpUnWind?.addEventListener('change', this.fpUnWindChangeEvent);
+    this.useStatisticsEl?.addEventListener('change', this.useStatisticsChangeEvent);
+    this.statisticsIntervalInput?.addEventListener('input', this.statisticsIntervalInputEvent);
+    this.statisticsIntervalInput?.addEventListener('keyup', this.statisticsIntervalKeyUpEvent);
   }
 
   disconnectedCallback(): void {
-    this.unwindEL?.removeEventListener('keydown', this.handleInputChange);
-    this.shareMemory?.removeEventListener('keydown', this.handleInputChange);
-    this.shareMemoryUnit?.removeEventListener('keydown', this.handleInputChange);
-    this.filterMemory?.removeEventListener('keydown', this.handleInputChange);
-    this.intervalResultInput?.removeEventListener('keydown', this.handleInputChange);
-    this.filterSize?.removeEventListener('keydown', this.handleInputChange);
-    this.statisticsSlider?.removeEventListener('input', this.statisticsSliderInputHandler);
-    this.intervalResultInput?.removeEventListener('input', this.intervalResultInputHandler);
-    this.intervalResultInput?.removeEventListener('focusout', this.jsStackModelChangeHandler);
+    this.unwindEL?.removeEventListener('keydown', this.handleInputChangeEvent);
+    this.shareMemory?.removeEventListener('keydown', this.handleInputChangeEvent);
+    this.shareMemoryUnit?.removeEventListener('keydown', this.handleInputChangeEvent);
+    this.filterMemory?.removeEventListener('keydown', this.handleInputChangeEvent);
+    this.intervalResultInput?.removeEventListener('keydown', this.handleInputChangeEvent);
+    this.statisticsSlider?.removeEventListener('input', this.statisticsSliderInputEvent);
+    this.intervalResultInput?.removeEventListener('input', this.statisticsValueInputEvent);
+    this.intervalResultInput?.removeEventListener('focusout', this.statisticsFocusOutEvent);
     this.statisticsSlider?.shadowRoot
-      ?.querySelector<HTMLElement>('#slider')!
-      .removeEventListener('mouseup', this.statisticsSliderMouseupHandler);
-    this.startupMode?.removeEventListener('change', this.startupModeChangeHandler);
-    this.jsStackModel?.removeEventListener('change', this.startupModeChangeHandler);
+      ?.querySelector('#slider')!
+      .removeEventListener('mouseup', this.statisticsSliderMouseupEvent);
+    this.startupMode?.removeEventListener('change', this.startupModeChangeEvent);
+    this.jsStackModel?.removeEventListener('change', this.jsStackModelChangeEvent);
+    this.addOptionButton?.removeEventListener('click', this.advanceOptionClickEvent);
+    this.fpUnWind?.removeEventListener('change', this.fpUnWindChangeEvent);
+    this.useStatisticsEl?.removeEventListener('change', this.useStatisticsChangeEvent);
+    this.statisticsIntervalInput?.removeEventListener('input', this.statisticsIntervalInputEvent);
+    this.statisticsIntervalInput?.removeEventListener('keyup', this.statisticsIntervalKeyUpEvent);
   }
 
-  handleInputChange = (ev: KeyboardEvent): void => {
+  handleInputChangeEvent = (ev: KeyboardEvent): void => {
     // @ts-ignore
     if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') {
       ev.preventDefault();
     }
   };
 
-  initElements(): void {
-    this.filterSize = this.shadowRoot?.querySelector('#filterSized');
-    this.processId = this.shadowRoot?.getElementById('pid') as LitSelectV;
-    this.packageName = this.shadowRoot?.getElementById('packageName') as LitSelect;
-    this.packageName.style.display = 'none';
-    let process = this.processId.shadowRoot?.querySelector('input') as HTMLInputElement;
-    process!.addEventListener('mousedown', () => {
-      this.processMouseDownHandler(process);
-    });
-    let packageInput = this.packageName.shadowRoot?.querySelector('input') as HTMLInputElement;
-    packageInput!.addEventListener('mousedown', () => {
-      this.packageMouseDownHandler(packageInput);
-    });
-    this.unwindEL = this.shadowRoot?.getElementById('unwind') as HTMLInputElement;
-    this.shareMemory = this.shadowRoot?.getElementById('shareMemory') as HTMLInputElement;
-    this.shareMemoryUnit = this.shadowRoot?.getElementById('shareMemoryUnit') as HTMLSelectElement;
-    this.filterMemory = this.shadowRoot?.getElementById('filterSized') as HTMLInputElement;
-    this.fpUnWind = this.shadowRoot?.getElementById('use_fp_unwind') as LitSwitch;
-    this.recordAccurately = this.shadowRoot?.getElementById('use_record_accurately') as LitSwitch;
-    this.offlineSymbol = this.shadowRoot?.getElementById('use_offline_symbolization') as LitSwitch;
-    this.startupMode = this.shadowRoot?.getElementById('use_startup_mode') as LitSwitch;
-    this.jsStackModel = this.shadowRoot?.getElementById('use_js-stack') as LitSwitch;
-    this.responseLibMode = this.shadowRoot?.getElementById('response_lib_mode') as LitSwitch;
-    this.sampleInterval = this.shadowRoot?.getElementById('sample-interval-input') as HTMLInputElement;
-    this.napiName = this.shadowRoot?.getElementById('napiName') as HTMLInputElement;
-    this.jsStackDepth = this.shadowRoot?.getElementById('jsStackDepth') as HTMLInputElement;
-    this.statisticsSlider = this.shadowRoot?.querySelector<LitSlider>('#interval-slider') as LitSlider;
-    this.recordStatisticsResult = this.shadowRoot?.querySelector<HTMLDivElement>(
-      '.record-statistics-result'
-    ) as HTMLDivElement;
-    this.statisticsSlider.sliderStyle = {
+  statisticsSliderInputEvent = (): void => {
+    this.statisticsSlider!.sliderStyle = {
       minRange: 0,
       maxRange: 3600,
-      defaultValue: '900',
+      defaultValue: `${this.recordStatisticsResult!.getAttribute('percent')}`,
       resultUnit: 'S',
       stepSize: 450,
       lineColor: 'var(--dark-color3,#46B1E3)',
       buttonColor: '#999999',
     };
+    this.intervalResultInput!.style.color = 'var(--dark-color1,#000000)';
+    if (this.recordStatisticsResult!.hasAttribute('percent')) {
+      let step = Math.round(Number(this.recordStatisticsResult!.getAttribute('percent')) / NUM_450);
+      this.recordStatisticsResult!.setAttribute('percentValue', `${stepValue[step]}`);
+      this.intervalResultInput!.value = `${stepValue[step]}`;
+    }
+  };
+
+  statisticsValueInputEvent = (): void => {
+    if (this.intervalResultInput!.value === '0') {
+      this.useStatisticsEl!.checked = false;
+      this.useStatisticsChangeHandle(false);
+    } else {
+      this.statisticsIntervalHandle();
+    }
+  };
+
+  statisticsFocusOutEvent = (): void => {
     let parentElement = this.statisticsSlider!.parentNode as Element;
-    this.intervalResultInput = this.shadowRoot?.querySelector('.interval-result') as HTMLInputElement;
-    this.intervalResultInput.value = '10';
-    parentElement.setAttribute('percent', '3600');
-    this.intervalResultInput.style.color = 'var(--dark-color1,#000000)';
-    let litSwitch = this.shadowRoot?.querySelector('#switch-disabled') as LitSwitch;
-    litSwitch.addEventListener('change', (event: Event): void => {
-      // @ts-ignore
-      let detail = event.detail;
-      if (detail.checked) {
-        this.unDisable();
-      } else {
-        this.disable();
-      }
-    });
-    this.initProcessInputStatus();
-    this.disable();
-  }
+    if (this.intervalResultInput!.value.trim() === '') {
+      parentElement.setAttribute('percent', '3600');
+      this.intervalResultInput!.value = '3600';
+      this.intervalResultInput!.style.color = 'var(--dark-color,#6a6f77)';
+      parentElement.setAttribute('percent', this.intervalResultInput!.value);
+      parentElement.setAttribute('percentValue', this.intervalResultInput!.value);
+      this.statisticsSlider!.percent = this.intervalResultInput!.value;
+      let htmlInputElement = this.statisticsSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement;
+      htmlInputElement.value = this.intervalResultInput!.value;
+    }
+  };
 
-  private initProcessInputStatus(): void {
-    this.packageName!.style.display = 'none';
-    this.processId!.style.display = 'block';
-    let process = this.processId?.shadowRoot?.querySelector('.root') as HTMLDivElement;
-    if (process) {
-      process.style.width = 'auto';
+  useStatisticsChangeEvent = (): void => {
+    let useStatistics = this.useStatisticsEl!.checked;
+    this.useStatisticsChangeHandle(useStatistics);
+  };
+
+  fpUnWindChangeEvent = (): void => {
+    this.napiName!.disabled = !(!this.fp_unwind && this.recordJsStack);
+  };
+
+  advanceOptionClickEvent = (): void => {
+    if (!this.startSamp) {
+      return;
     }
-  }
+    this.advanceOptionHandle(this.addOptionButton!.textContent!);
+  };
 
-  startupModeChangeHandler = (): void => {
+  startupModeChangeEvent = (): void => {
     let process = this.processId?.shadowRoot?.querySelector('input') as HTMLInputElement;
     let processDiv = this.processId?.shadowRoot?.querySelector('.root') as HTMLDivElement;
     process.value = '';
@@ -326,63 +382,140 @@ export class SpAllocations extends BaseElement {
     }
   };
 
-  jsStackModelChangeHandler = (): void => {
-    let napiRecordName = this.shadowRoot?.querySelector('#napi-div') as HTMLDivElement;
-    let jsStackRecordDepth = this.shadowRoot?.querySelector('#js-stack-depth-div') as HTMLDivElement;
-    if (this.recordJsStack) {
-      napiRecordName.style.display = 'flex';
-      jsStackRecordDepth.style.display = 'flex';
-    } else {
-      napiRecordName.style.display = 'none';
-      jsStackRecordDepth.style.display = 'none';
-    }
+  jsStackModelChangeEvent = (): void => {
+    this.jsStackDepth!.disabled = !this.recordJsStack;
+    this.napiName!.disabled = !(!this.fp_unwind && this.recordJsStack);
   };
 
-  statisticsSliderMouseupHandler = (): void => {
-    setTimeout(() => {
+  statisticsSliderMouseupEvent = (): void => {
+    setTimeout((): void => {
       let percentValue = this.recordStatisticsResult!.getAttribute('percent');
       let index = Math.round(Number(percentValue) / NUM_450);
       index = index < 1 ? 0 : index;
       this.intervalResultInput!.value = `${stepValue[index]}`;
       this.recordStatisticsResult!.setAttribute('percentValue', `${stepValue[index]}`);
+      if (this.intervalResultInput!.value === '0') {
+        this.useStatisticsEl!.checked = false;
+        this.useStatisticsChangeHandle(false);
+      }
     });
   };
 
-  intervalResultFocusOutHandler = (): void => {
-    let parentElement = this.statisticsSlider!.parentNode as Element;
-    if (this.intervalResultInput!.value.trim() === '') {
-      parentElement.setAttribute('percent', '3600');
-      this.intervalResultInput!.value = '3600';
-      this.intervalResultInput!.style.color = 'var(--dark-color,#6a6f77)';
-      parentElement.setAttribute('percent', this.intervalResultInput!.value);
-      parentElement.setAttribute('percentValue', this.intervalResultInput!.value);
-      this.statisticsSlider!.percent = this.intervalResultInput!.value;
-      let htmlInputElement = this.statisticsSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement;
-      htmlInputElement.value = this.intervalResultInput!.value;
+  statisticsIntervalInputEvent = (): void => {
+    let intervalValue = Number(this.statisticsIntervalInput!.value);
+    if (intervalValue > 65535) {
+      this.statisticsIntervalInput!.value = '65535';
+    }
+    if (intervalValue === 0 || this.statisticsIntervalInput!.value.startsWith('0')) {
+      let resultValue = parseInt(this.statisticsIntervalInput!.value, 10);
+      this.statisticsIntervalInput!.value = `${resultValue}`;
     }
   };
 
-  statisticsSliderInputHandler = (): void => {
+  statisticsIntervalKeyUpEvent = (): void => {
+    this.statisticsIntervalInput!.value = this.statisticsIntervalInput!.value.replace(/\D/g, '');
+  };
+
+  private useStatisticsChangeHandle(useStatistics: boolean): void {
+    if (useStatistics) {
+      this.intervalResultInput!.value = '10';
+      this.statisticsIntervalHandle();
+      this.statisticsIntervalName!.textContent = 'Sample Interval';
+      this.statisticsIntervalRange!.textContent = 'Rang is 0 - 65535, default 10';
+      this.statisticsIntervalInput!.value = '10';
+      this.statisticsSlider!.disabled = false;
+      this.intervalResultInput!.disabled = false;
+    } else {
+      this.intervalResultInput!.value = '0';
+      this.statisticsIntervalHandle();
+      this.statisticsIntervalName!.textContent = 'Malloc Free Matching Interval';
+      this.statisticsIntervalRange!.textContent = 'Rang is 0 - 65535, default 10';
+      this.statisticsIntervalInput!.value = '10';
+      this.statisticsSlider!.disabled = true;
+      this.intervalResultInput!.disabled = true;
+    }
+  }
+
+  private advanceOptionHandle(textValue: string): void {
+    this.resetAdvanceItems();
+    let displayStyle = 'none';
+    if (textValue === 'Advance Options') {
+      this.addOptionButton!.textContent = 'Normal Options';
+      displayStyle = 'flex';
+    } else {
+      this.addOptionButton!.textContent = 'Advance Options';
+    }
+    this.advanceItems.forEach((itemEl) => {
+      if (itemEl) {
+        itemEl.style.display = displayStyle;
+      }
+    });
+    this.jsStackDepth!.disabled = !this.recordJsStack;
+    this.napiName!.disabled = !(!this.fp_unwind && this.recordJsStack);
+  }
+
+  private resetAdvanceItems(): void {
+    this.advanceItems = [
+      this.recordAccuratelyDivEl,
+      this.recordAccuratelyDivEl,
+      this.offlineSymbolizationDivEl,
+      this.jsStackRecordDepthEl,
+      this.napiRecordEl,
+      this.maxUnwindLevelEl,
+      this.sharedMemorySizeEl,
+      this.filterMemorySizeEl,
+      this.sampleIntervalEl,
+      this.useStartupEl,
+      this.useResponseLibEl,
+    ];
+  }
+
+  private initNativeSwitchOption(): void {
+    this.packageName!.style.display = 'none';
+    let processInputEl = this.processId!.shadowRoot?.querySelector('input') as HTMLInputElement;
+    processInputEl.addEventListener('mousedown', (): void => {
+      this.processMouseDownHandler(processInputEl);
+    });
+    let packageInput = this.packageName!.shadowRoot?.querySelector('input') as HTMLInputElement;
+    packageInput.addEventListener('mousedown', (): void => {
+      this.packageMouseDownHandler(packageInput);
+    });
     this.statisticsSlider!.sliderStyle = {
       minRange: 0,
       maxRange: 3600,
-      defaultValue: `${this.recordStatisticsResult!.getAttribute('percent')}`,
+      defaultValue: '900',
       resultUnit: 'S',
       stepSize: 450,
       lineColor: 'var(--dark-color3,#46B1E3)',
       buttonColor: '#999999',
     };
+    let parentElement = this.statisticsSlider!.parentNode as Element;
+    this.intervalResultInput!.value = '10';
+    parentElement.setAttribute('percent', '3600');
     this.intervalResultInput!.style.color = 'var(--dark-color1,#000000)';
-    if (this.recordStatisticsResult!.hasAttribute('percent')) {
-      let step = Math.round(Number(this.recordStatisticsResult!.getAttribute('percent')) / NUM_450);
-      this.recordStatisticsResult!.setAttribute('percentValue', `${stepValue[step]}`);
-      this.intervalResultInput!.value = `${stepValue[step]}`;
+    let litSwitch = this.shadowRoot?.querySelector('#switch-disabled') as LitSwitch;
+    litSwitch.addEventListener('change', (event: Event): void => {
+      // @ts-ignore
+      let detail = event.detail;
+      if (detail.checked) {
+        this.unDisable();
+      } else {
+        this.disable();
+      }
+      this.addOptionButton!.textContent = 'Advance Options';
+    });
+    this.packageName!.style.display = 'none';
+    this.processId!.style.display = 'block';
+    let processDivEl = this.processId?.shadowRoot?.querySelector('.root') as HTMLDivElement;
+    if (processDivEl) {
+      processDivEl.style.width = 'auto';
     }
-  };
+    this.disable();
+  }
 
   private processMouseDownHandler(process: HTMLInputElement): void {
     if (this.startSamp && !this.startup_mode) {
-      Cmd.getProcess().then((processList) => {
+      Cmd.getProcess().then((processList: string[]): void => {
         this.processId?.dataSource(processList, '');
         if (processList.length > 0) {
           this.processId?.dataSource(processList, 'ALL-Process');
@@ -400,9 +533,10 @@ export class SpAllocations extends BaseElement {
     } else {
     }
   }
+
   private packageMouseDownHandler(packageInput: HTMLInputElement): void {
     if (this.startSamp && this.startup_mode) {
-      Cmd.getPackage().then((packageList) => {
+      Cmd.getPackage().then((packageList: string[]): void => {
         if (packageList.length > 0) {
           this.packageName!.dataSource = packageList;
         } else {
@@ -416,7 +550,7 @@ export class SpAllocations extends BaseElement {
     }
   }
 
-  intervalResultInputHandler = (): void => {
+  private statisticsIntervalHandle(): void {
     let parentElement = this.statisticsSlider!.parentNode as Element;
     if (this.recordStatisticsResult!.hasAttribute('percent')) {
       this.recordStatisticsResult!.removeAttribute('percent');
@@ -466,7 +600,7 @@ export class SpAllocations extends BaseElement {
       parentElement.setAttribute('percent', this.intervalResultInput!.value);
       parentElement.setAttribute('percentValue', this.intervalResultInput!.value);
     }
-  };
+  }
 
   private unDisable(): void {
     this.startSamp = true;
@@ -488,12 +622,15 @@ export class SpAllocations extends BaseElement {
     if (this.responseLibMode) {
       this.responseLibMode.disabled = false;
     }
-    if (this.sampleInterval) {
-      this.sampleInterval.disabled = false;
+    if (this.statisticsIntervalInput) {
+      this.statisticsIntervalInput.disabled = false;
+    }
+    if (this.useStatisticsEl) {
+      this.useStatisticsEl.disabled = false;
     }
     this.processId!.removeAttribute('disabled');
     let inputBoxes = this.shadowRoot?.querySelectorAll<HTMLInputElement>('.inputBoxes');
-    inputBoxes!.forEach((item) => {
+    inputBoxes!.forEach((item: HTMLInputElement): void => {
       item.disabled = false;
     });
     if (this.startup_mode) {
@@ -506,6 +643,7 @@ export class SpAllocations extends BaseElement {
 
   private disable(): void {
     this.startSamp = false;
+    this.advanceOptionHandle('Normal Options');
     if (this.fpUnWind) {
       this.fpUnWind.disabled = true;
     }
@@ -524,12 +662,15 @@ export class SpAllocations extends BaseElement {
     if (this.responseLibMode) {
       this.responseLibMode.disabled = true;
     }
-    if (this.sampleInterval) {
-      this.sampleInterval.disabled = true;
+    if (this.statisticsIntervalInput) {
+      this.statisticsIntervalInput.disabled = true;
+    }
+    if (this.useStatisticsEl) {
+      this.useStatisticsEl.disabled = true;
     }
     this.processId!.setAttribute('disabled', '');
     let inputBoxes = this.shadowRoot?.querySelectorAll<HTMLInputElement>('.inputBoxes');
-    inputBoxes!.forEach((item) => {
+    inputBoxes!.forEach((item: HTMLInputElement): void => {
       item.disabled = true;
     });
     if (this.startup_mode) {
@@ -539,10 +680,6 @@ export class SpAllocations extends BaseElement {
     }
     this.statisticsSlider!.disabled = true;
   }
-
-  initHtml(): string {
-    return SpAllocationHtml;
-  }
 }
 
-const stepValue = [0, 1, 10, NUM_30, NUM_60, NUM_300, NUM_600, NUM_1800, NUM_3600];
+const stepValue: number[] = [0, 1, 10, NUM_30, NUM_60, NUM_300, NUM_600, NUM_1800, NUM_3600];
diff --git a/ide/src/trace/component/setting/SpHilogRecord.html.ts b/ide/src/trace/component/setting/SpHilogRecord.html.ts
index b121c1601143586a98446c3af6f4145ca37c2136..d0454da906465c414f4ed2fa3949b04e529a37ca 100644
--- a/ide/src/trace/component/setting/SpHilogRecord.html.ts
+++ b/ide/src/trace/component/setting/SpHilogRecord.html.ts
@@ -104,11 +104,10 @@ export const SpHiLogRecordHtml = `
         <lit-select default-value="" rounded="" class="record-logs-select config-select" canInsert="" 
         title="Select Log Level" rounded placement = "bottom" placeholder=" ">
           ${getHiLogLevel()
-    .map(
-      (level): string =>
-        `<lit-select-option class="div-button" value="${  level  }">${  level  }</lit-select-option>`
-    )
-    .join('')}
+            .map(
+              (level): string => `<lit-select-option class="div-button" value="${level}">${level}</lit-select-option>`
+            )
+            .join('')}
                 </lit-select>
               </div>
             </div>
diff --git a/ide/src/trace/component/setting/SpProbesConfig.ts b/ide/src/trace/component/setting/SpProbesConfig.ts
index 52db0c685aee8bf244f0dec30e0d548f40be00ee..67bf829169531c21be17cd4138ec0dc4b14e1310 100644
--- a/ide/src/trace/component/setting/SpProbesConfig.ts
+++ b/ide/src/trace/component/setting/SpProbesConfig.ts
@@ -46,8 +46,7 @@ export class SpProbesConfig extends BaseElement {
   }
 
   get traceConfig() {
-    let selectedTrace = this._traceConfig?.
-      querySelectorAll<SpCheckDesBox>('check-des-box[checked]') || [];
+    let selectedTrace = this._traceConfig?.querySelectorAll<SpCheckDesBox>('check-des-box[checked]') || [];
     let values = [];
     for (const litCheckBoxElement of selectedTrace) {
       values.push(litCheckBoxElement.value);
@@ -292,13 +291,8 @@ export class SpProbesConfig extends BaseElement {
     let checkDesBoxDis = this.shadowRoot?.querySelectorAll<SpCheckDesBox>('check-des-box');
     let litCheckBoxDis = this.shadowRoot?.querySelectorAll<LitCheckBox>('lit-check-box');
     let defaultSelected: any = [];
-    defaultSelected = defaultSelected.concat(
-      traceConfigList,
-      memoryConfigList,
-      abilityConfigList,
-      hiTraceConfigList
-    );
-    this.shadowRoot?.querySelector<SpCheckDesBox>('[value=\'Hitrace categories\']')?.setAttribute('checked', 'true');
+    defaultSelected = defaultSelected.concat(traceConfigList, memoryConfigList, abilityConfigList, hiTraceConfigList);
+    this.shadowRoot?.querySelector<SpCheckDesBox>("[value='Hitrace categories']")?.setAttribute('checked', 'true');
     this.ftraceSlider!.removeAttribute('disabled');
     checkDesBoxDis?.forEach((item: SpCheckDesBox) => {
       item.removeAttribute('disabled');
@@ -308,8 +302,7 @@ export class SpProbesConfig extends BaseElement {
     });
     defaultSelected.filter((item: any) => {
       if (item.isSelect) {
-        this.shadowRoot?.querySelector<SpCheckDesBox>(`[value='${item.value}']`)?.
-          setAttribute('checked', 'true');
+        this.shadowRoot?.querySelector<SpCheckDesBox>(`[value='${item.value}']`)?.setAttribute('checked', 'true');
       }
     });
   }
@@ -351,73 +344,73 @@ export class SpProbesConfig extends BaseElement {
 }
 
 const hiTraceConfigList = [
-  {value: 'ability', isSelect: true},
-  {value: 'accesscontrol', isSelect: false},
-  {value: 'accessibility', isSelect: false},
-  {value: 'account', isSelect: false},
-  {value: 'ace', isSelect: true},
-  {value: 'app', isSelect: true},
-  {value: 'ark', isSelect: true},
-  {value: 'binder', isSelect: true},
-  {value: 'bluetooth', isSelect: false},
-  {value: 'cloud', isSelect: false},
-  {value: 'commonlibrary', isSelect: false},
-  {value: 'daudio', isSelect: false},
-  {value: 'dcamera', isSelect: false},
-  {value: 'deviceauth', isSelect: false},
-  {value: 'devicemanager', isSelect: false},
-  {value: 'deviceprofile', isSelect: false},
-  {value: 'dhfwk', isSelect: false},
-  {value: 'dinput', isSelect: false},
-  {value: 'disk', isSelect: true},
-  {value: 'distributeddatamgr', isSelect: false},
-  {value: 'dlpcre', isSelect: false},
-  {value: 'dsched', isSelect: false},
-  {value: 'dscreen', isSelect: false},
-  {value: 'dslm', isSelect: false},
-  {value: 'dsoftbus', isSelect: false},
-  {value: 'ffrt', isSelect: false},
-  {value: 'filemanagement', isSelect: false},
-  {value: 'freq', isSelect: true},
-  {value: 'graphic', isSelect: true},
-  {value: 'gresource', isSelect: false},
-  {value: 'hdcd', isSelect: false},
-  {value: 'hdf', isSelect: false},
-  {value: 'huks', isSelect: false},
-  {value: 'i2c', isSelect: false},
-  {value: 'idle', isSelect: true},
-  {value: 'interconn', isSelect: false},
-  {value: 'irq', isSelect: true},
-  {value: 'mdfs', isSelect: false},
-  {value: 'memory', isSelect: false},
-  {value: 'memreclaim', isSelect: true},
-  {value: 'misc', isSelect: false},
-  {value: 'mmc', isSelect: true},
-  {value: 'msdp', isSelect: false},
-  {value: 'multimodalinput', isSelect: true},
-  {value: 'musl', isSelect: false},
-  {value: 'net', isSelect: false},
-  {value: 'notification', isSelect: false},
-  {value: 'nweb', isSelect: false},
-  {value: 'ohos', isSelect: true},
-  {value: 'pagecache', isSelect: true},
-  {value: 'power', isSelect: false},
-  {value: 'regulators', isSelect: false},
-  {value: 'rpc', isSelect: true},
-  {value: 'samgr', isSelect: false},
-  {value: 'sched', isSelect: true},
-  {value: 'sensors', isSelect: false},
-  {value: 'sync', isSelect: true},
-  {value: 'usb', isSelect: false},
-  {value: 'ufs', isSelect: false},
-  {value: 'useriam', isSelect: false},
-  {value: 'virse', isSelect: false},
-  {value: 'window', isSelect: true},
-  {value: 'workq', isSelect: true},
-  {value: 'zaudio', isSelect: true},
-  {value: 'zcamera', isSelect: true},
-  {value: 'zimage', isSelect: true},
-  {value: 'zmedia', isSelect: true},
+  { value: 'ability', isSelect: true },
+  { value: 'accesscontrol', isSelect: false },
+  { value: 'accessibility', isSelect: false },
+  { value: 'account', isSelect: false },
+  { value: 'ace', isSelect: true },
+  { value: 'app', isSelect: true },
+  { value: 'ark', isSelect: true },
+  { value: 'binder', isSelect: true },
+  { value: 'bluetooth', isSelect: false },
+  { value: 'cloud', isSelect: false },
+  { value: 'commonlibrary', isSelect: false },
+  { value: 'daudio', isSelect: false },
+  { value: 'dcamera', isSelect: false },
+  { value: 'deviceauth', isSelect: false },
+  { value: 'devicemanager', isSelect: false },
+  { value: 'deviceprofile', isSelect: false },
+  { value: 'dhfwk', isSelect: false },
+  { value: 'dinput', isSelect: false },
+  { value: 'disk', isSelect: true },
+  { value: 'distributeddatamgr', isSelect: false },
+  { value: 'dlpcre', isSelect: false },
+  { value: 'dsched', isSelect: false },
+  { value: 'dscreen', isSelect: false },
+  { value: 'dslm', isSelect: false },
+  { value: 'dsoftbus', isSelect: false },
+  { value: 'ffrt', isSelect: false },
+  { value: 'filemanagement', isSelect: false },
+  { value: 'freq', isSelect: true },
+  { value: 'graphic', isSelect: true },
+  { value: 'gresource', isSelect: false },
+  { value: 'hdcd', isSelect: false },
+  { value: 'hdf', isSelect: false },
+  { value: 'huks', isSelect: false },
+  { value: 'i2c', isSelect: false },
+  { value: 'idle', isSelect: true },
+  { value: 'interconn', isSelect: false },
+  { value: 'irq', isSelect: true },
+  { value: 'mdfs', isSelect: false },
+  { value: 'memory', isSelect: false },
+  { value: 'memreclaim', isSelect: true },
+  { value: 'misc', isSelect: false },
+  { value: 'mmc', isSelect: true },
+  { value: 'msdp', isSelect: false },
+  { value: 'multimodalinput', isSelect: true },
+  { value: 'musl', isSelect: false },
+  { value: 'net', isSelect: false },
+  { value: 'notification', isSelect: false },
+  { value: 'nweb', isSelect: false },
+  { value: 'ohos', isSelect: true },
+  { value: 'pagecache', isSelect: true },
+  { value: 'power', isSelect: false },
+  { value: 'regulators', isSelect: false },
+  { value: 'rpc', isSelect: true },
+  { value: 'samgr', isSelect: false },
+  { value: 'sched', isSelect: true },
+  { value: 'sensors', isSelect: false },
+  { value: 'sync', isSelect: true },
+  { value: 'usb', isSelect: false },
+  { value: 'ufs', isSelect: false },
+  { value: 'useriam', isSelect: false },
+  { value: 'virse', isSelect: false },
+  { value: 'window', isSelect: true },
+  { value: 'workq', isSelect: true },
+  { value: 'zaudio', isSelect: true },
+  { value: 'zcamera', isSelect: true },
+  { value: 'zimage', isSelect: true },
+  { value: 'zmedia', isSelect: true },
 ];
 
 const traceConfigList = [
diff --git a/ide/src/trace/component/setting/SpRecordPerf.ts b/ide/src/trace/component/setting/SpRecordPerf.ts
index 24ff7b8c8d1506cd6baf3d304b514f8e75f2739c..f18d42accc3a51405f4c9e7ba3f18d757c918a17 100644
--- a/ide/src/trace/component/setting/SpRecordPerf.ts
+++ b/ide/src/trace/component/setting/SpRecordPerf.ts
@@ -401,23 +401,23 @@ export class SpRecordPerf extends BaseElement {
     this.initRecordPerfConfig();
     this.sp = document.querySelector('sp-application') as SpApplication;
     this.recordPerfSearch = this.sp?.shadowRoot?.querySelector('#lit-record-search') as LitSearch;
-    this.processSelect = this.shadowRoot?.querySelector<LitSelectV>('lit-select-v[title=\'Process\']');
+    this.processSelect = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='Process']");
     this.recordProcessInput = this.processSelect?.shadowRoot?.querySelector<HTMLInputElement>('input');
     this.processInput = this.processSelect!.shadowRoot?.querySelector('input') as HTMLInputElement;
-    this.cpuSelect = this.shadowRoot?.querySelector<LitSelectV>('lit-select-v[title=\'CPU\']');
+    this.cpuSelect = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='CPU']");
     this.inputCpu = this.cpuSelect!.shadowRoot?.querySelector('input') as HTMLInputElement;
-    this.eventSelect = this.shadowRoot?.querySelector<LitSelectV>('lit-select-v[title=\'Event List\']');
+    this.eventSelect = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='Event List']");
     this.inputEvent = this.eventSelect!.shadowRoot?.querySelector('input') as HTMLInputElement;
-    this.frequencySetInput = this.shadowRoot?.querySelector<HTMLInputElement>('input[title=\'Frequency\']');
+    this.frequencySetInput = this.shadowRoot?.querySelector<HTMLInputElement>("input[title='Frequency']");
     this.frequencySetInput!.onkeydown = (ev): void => {
       // @ts-ignore
       if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') {
         ev.preventDefault();
       }
     };
-    this.offCPUSwitch = this.shadowRoot?.querySelector<LitSwitch>('lit-switch[title=\'Off CPU\']');
+    this.offCPUSwitch = this.shadowRoot?.querySelector<LitSwitch>("lit-switch[title='Off CPU']");
     this.kernelChainSwitch = this.shadowRoot?.querySelector<LitSwitch>("lit-switch[title='Kernel Chain']");
-    this.callSelect = this.shadowRoot?.querySelector<LitSelect>('lit-select[title=\'Call Stack\']');
+    this.callSelect = this.shadowRoot?.querySelector<LitSelect>("lit-select[title='Call Stack']");
     this.addOptionButton!.addEventListener('click', () => {
       if (!this.startSamp) {
         return;
@@ -554,8 +554,11 @@ mode="multiple" canInsert="" title="${config.title}" rounded placement = "bottom
         type = line.substring(line.indexOf(startSign) + startSign.length, line.lastIndexOf(':')).trim();
         events = [];
         eventMap.set(type, events);
-      } else if (line.indexOf('not support') !== -1 || line.trim().length === 0 ||
-        line.indexOf('Text file busy') !== -1) {
+      } else if (
+        line.indexOf('not support') !== -1 ||
+        line.trim().length === 0 ||
+        line.indexOf('Text file busy') !== -1
+      ) {
         // do not need deal with it
       } else {
         let event: string = line.split(' ')[0];
@@ -752,7 +755,7 @@ const perfConfigList = [
   },
   {
     title: 'No Inherit',
-    des: 'Don\'t trace child processes',
+    des: "Don't trace child processes",
     hidden: true,
     type: 'switch',
     value: false,
diff --git a/ide/src/trace/component/setting/SpRecordSetting.ts b/ide/src/trace/component/setting/SpRecordSetting.ts
index b47d10ba1126ff1fec9f3abe30f6cf9d37cf9f32..d1815eeea12be81efc2ed26bdbab7b0614f68301 100644
--- a/ide/src/trace/component/setting/SpRecordSetting.ts
+++ b/ide/src/trace/component/setting/SpRecordSetting.ts
@@ -115,8 +115,8 @@ export class SpRecordSetting extends BaseElement {
     if (durationInput.style.color !== 'var(--dark-color1,#000000)' && this.lastDurationValue) {
       durationInput.style.color = 'var(--dark-color1,#000000)';
       let durationList = this.lastDurationValue.split(':');
-      let resultDuration = Number(durationList[0]) * NUM_3600 +
-        Number(durationList[1]) * NUM_60 + Number(durationList[2]);
+      let resultDuration =
+        Number(durationList[0]) * NUM_3600 + Number(durationList[1]) * NUM_60 + Number(durationList[2]);
       durationInput.value = this.lastDurationValue;
       this.maxDurationSliders!.sliderStyle = {
         minRange: 10,
@@ -334,8 +334,8 @@ export class SpRecordSetting extends BaseElement {
     let regExpMatch = durationInput.value.trim().match('^\\d{1,2}\\:\\d{1,2}\\:\\d{1,2}$');
     if (regExpMatch) {
       let durationList = regExpMatchArray.split(':');
-      let resultDuration = Number(durationList[0]) *
-        NUM_3600 + Number(durationList[1]) * NUM_60 + Number(durationList[2]);
+      let resultDuration =
+        Number(durationList[0]) * NUM_3600 + Number(durationList[1]) * NUM_60 + Number(durationList[2]);
       if (
         Number(durationList[0]) > NUM_60 ||
         Number(durationList[1]) > NUM_60 ||
diff --git a/ide/src/trace/component/setting/SpSdkConfig.ts b/ide/src/trace/component/setting/SpSdkConfig.ts
index cf1a825bba82bae30ee33e38ce935145f1235bef..02e863874caf1a5ad42d8a63e430c7944d04e1ef 100644
--- a/ide/src/trace/component/setting/SpSdkConfig.ts
+++ b/ide/src/trace/component/setting/SpSdkConfig.ts
@@ -205,7 +205,6 @@ export class SpSdkConfig extends BaseElement {
     this.isAbleShowConfig(true);
   }
 
-
   private sdkConfigByBooleanType(key: string, sdkConfigSwitch: LitSwitch, sdkConfigHeadDiv: HTMLDivElement): void {
     sdkConfigSwitch.className = 'switch1 config';
     sdkConfigSwitch.setAttribute('configName', key);
diff --git a/ide/src/trace/component/setting/SpWebHdcShell.ts b/ide/src/trace/component/setting/SpWebHdcShell.ts
index 60e19a09070a7457d37f31584c7fe50e613b1b59..677ac673b1351c73c3231a04745a4f9870c100c2 100644
--- a/ide/src/trace/component/setting/SpWebHdcShell.ts
+++ b/ide/src/trace/component/setting/SpWebHdcShell.ts
@@ -506,8 +506,7 @@ export class SpWebHdcShell extends BaseElement {
     const index = this.resultStr.lastIndexOf('\n');
     const resultStrLength = this.resultStr.length;
     if (index > -1 && resultStrLength > index) {
-      this.resultStr =
-        this.resultStr.substring(0, index + 1) + this.textDecoder.decode(arrayA.slice(1, arrayA.length));
+      this.resultStr = this.resultStr.substring(0, index + 1) + this.textDecoder.decode(arrayA.slice(1, arrayA.length));
     } else {
       if (this.resultStr.split('\n').length === 1) {
         const index = this.cursorRow.lastIndexOf('\n');
diff --git a/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts b/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts
index 65a784f39b26a50c31230dc913165b9167f97a27..64382a1ec9b89059241cec7b2167b4fb1141d701 100644
--- a/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts
+++ b/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts
@@ -363,7 +363,7 @@ const sysMemInfo = [
   SysMeminfoType.PMEM_ACTIVE_PURG,
   SysMeminfoType.PMEM_INACTIVE_PURG,
   SysMeminfoType.PMEM_PINED_PURG,
-  SysMeminfoType.UNRECOGNIZED
+  SysMeminfoType.UNRECOGNIZED,
 ];
 
 const sysMeminfoCase = (object: any): SysMeminfoType => {
@@ -374,7 +374,7 @@ const sysMeminfoCase = (object: any): SysMeminfoType => {
         return sysMemType;
       }
     }
-    return SysMeminfoType.UNRECOGNIZED
+    return SysMeminfoType.UNRECOGNIZED;
   } else {
     // @ts-ignore
     let sysMemType = SysMeminfoType[object];
@@ -455,6 +455,7 @@ export interface NativeHookConfig {
   callframeCompress?: boolean;
   startupMode?: boolean;
   statisticsInterval?: number;
+  mallocFreeMatchingInterval?: number;
   sampleInterval?: number;
   expandPids?: number[];
   responseLibraryMode?: boolean;
@@ -489,8 +490,7 @@ export interface DiskioConfig {
   reportIoStats: string;
 }
 
-export interface NetworkConfig {
-}
+export interface NetworkConfig {}
 
 export interface HiperfPluginConfig {
   isRoot: boolean;
diff --git a/ide/src/trace/component/setting/utils/PluginConvertUtils.ts b/ide/src/trace/component/setting/utils/PluginConvertUtils.ts
index e61e152825eefd2e22e87d69659db38f7c5fdf3c..4f1008abff5ebcc3a6f2d2cfdb40a87818916f5f 100644
--- a/ide/src/trace/component/setting/utils/PluginConvertUtils.ts
+++ b/ide/src/trace/component/setting/utils/PluginConvertUtils.ts
@@ -69,7 +69,13 @@ export class PluginConvertUtils {
     }
   }
 
-  private static getPrefixText(prefixText: string, indentation: number, needColon: boolean, spacesNumber: number, bean: any): string {
+  private static getPrefixText(
+    prefixText: string,
+    indentation: number,
+    needColon: boolean,
+    spacesNumber: number,
+    bean: any
+  ): string {
     // @ts-ignore
     for (const [key, value] of Object.entries(bean)) {
       const repeatedKey = Array.isArray(value);
@@ -134,7 +140,13 @@ export class PluginConvertUtils {
     return prefixText;
   }
 
-  private static handleObjByStr(prefixText: string, value: any, spacesNumber: number, key: string, indentation: number): string {
+  private static handleObjByStr(
+    prefixText: string,
+    value: any,
+    spacesNumber: number,
+    key: string,
+    indentation: number
+  ): string {
     if (LevelConfigEnumList.indexOf(value) >= 0 || value.startsWith('IO_REPORT')) {
       prefixText =
         prefixText +
@@ -196,8 +208,14 @@ export class PluginConvertUtils {
     key: string,
     arrValue: any
   ): string {
-    return text + ' '.repeat(spacesNumber).repeat(indentation + 1) +
-      this.humpToSnake(key) + ': ' + arrValue.toString() + this.crlf;
+    return (
+      text +
+      ' '.repeat(spacesNumber).repeat(indentation + 1) +
+      this.humpToSnake(key) +
+      ': ' +
+      arrValue.toString() +
+      this.crlf
+    );
   }
 
   private static handleArrayByBoolean(
@@ -207,8 +225,14 @@ export class PluginConvertUtils {
     key: string,
     arrValue: any
   ): string {
-    return text + ' '.repeat(spacesNumber).repeat(indentation + 1) + this.humpToSnake(key) + ': ' +
-      arrValue.toString() + this.crlf;
+    return (
+      text +
+      ' '.repeat(spacesNumber).repeat(indentation + 1) +
+      this.humpToSnake(key) +
+      ': ' +
+      arrValue.toString() +
+      this.crlf
+    );
   }
 
   private static handleArrayByNumber(
@@ -218,8 +242,14 @@ export class PluginConvertUtils {
     key: string,
     arrValue: any
   ): string {
-    return text + ' '.repeat(spacesNumber).repeat(indentation + 1) + this.humpToSnake(key) + ': ' +
-      arrValue.toString() + this.crlf;
+    return (
+      text +
+      ' '.repeat(spacesNumber).repeat(indentation + 1) +
+      this.humpToSnake(key) +
+      ': ' +
+      arrValue.toString() +
+      this.crlf
+    );
   }
 
   private static handleArrayByStr(
diff --git a/ide/src/trace/component/trace/SpChartList.ts b/ide/src/trace/component/trace/SpChartList.ts
index fea441b0127ef914f6e17c82a4d01562bea32eb3..553fa4da650e3665a7e02b6ae1c764a6f463a2f9 100644
--- a/ide/src/trace/component/trace/SpChartList.ts
+++ b/ide/src/trace/component/trace/SpChartList.ts
@@ -172,8 +172,8 @@ export class SpChartList extends BaseElement {
     }
   }
 
-  getRowScrollTop() : number {
-    return this.rootEl?.scrollTop || 0
+  getRowScrollTop(): number {
+    return this.rootEl?.scrollTop || 0;
   }
 
   expandSearchRowGroup(row: TraceRow<any>): void {
@@ -204,7 +204,7 @@ export class SpChartList extends BaseElement {
   }
 
   getCollectRowsInfo(group: string) {
-    return  (group === SpChartList.COLLECT_G1 ? this.collectRowList1 : this.collectRowList2).map(row => {
+    return (group === SpChartList.COLLECT_G1 ? this.collectRowList1 : this.collectRowList2).map((row) => {
       let rowJson = {
         type: row.rowType,
         name: row.name,
@@ -293,7 +293,7 @@ export class SpChartList extends BaseElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    const vessel = this.parentNode as HTMLDivElement
+    const vessel = this.parentNode as HTMLDivElement;
     vessel.addEventListener('mousedown', this.onMouseDown);
     vessel.addEventListener('mouseup', this.onMouseUp);
     vessel.addEventListener('mousemove', this.onMouseMove);
@@ -302,7 +302,7 @@ export class SpChartList extends BaseElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    const vessel = this.parentNode as HTMLDivElement
+    const vessel = this.parentNode as HTMLDivElement;
     vessel.removeEventListener('mousedown', this.onMouseDown);
     vessel.removeEventListener('mouseup', this.onMouseUp);
     vessel.removeEventListener('mousemove', this.onMouseMove);
@@ -380,7 +380,7 @@ export class SpChartList extends BaseElement {
     this.canResize = false;
     this.style.cursor = 'default';
     (window as any).collectResize = false;
-    if(this.style.display === 'flex'){
+    if (this.style.display === 'flex') {
       this.refreshFavoriteCanvas();
     }
   };
diff --git a/ide/src/trace/component/trace/TimerShaftElement.html.ts b/ide/src/trace/component/trace/TimerShaftElement.html.ts
index 04dc46941229e0e0fa3b70f0d4360a5ec4f60c1d..f797266cff7af093c8aa0825aa9d5667904d7be8 100644
--- a/ide/src/trace/component/trace/TimerShaftElement.html.ts
+++ b/ide/src/trace/component/trace/TimerShaftElement.html.ts
@@ -122,4 +122,4 @@ export const TimerShaftElementHtml = `
     </div>
     <canvas class="panel"></canvas>
 </div>
-`
+`;
diff --git a/ide/src/trace/component/trace/TimerShaftElement.ts b/ide/src/trace/component/trace/TimerShaftElement.ts
index 25868890cd8cab973a7a279a04f4df0e11aca0ed..68e7a512416cd204af38418ebd88d4f430cdbfcb 100644
--- a/ide/src/trace/component/trace/TimerShaftElement.ts
+++ b/ide/src/trace/component/trace/TimerShaftElement.ts
@@ -26,6 +26,7 @@ import { SelectionParam } from '../../bean/BoxSelection';
 import { type SpSystemTrace, CurrentSlicesTime } from '../SpSystemTrace';
 import './timer-shaft/CollapseButton';
 import { TimerShaftElementHtml } from './TimerShaftElement.html';
+import { SpChartList } from './SpChartList';
 //随机生成十六位进制颜色
 export function randomRgbColor() {
   let r = Math.floor(Math.random() * 255);
@@ -141,6 +142,7 @@ export class TimerShaftElement extends BaseElement {
   public usageEL: HTMLDivElement | null | undefined;
   public timerShaftEL: TimerShaftElement | null | undefined;
   public rowsPaneEL: HTMLDivElement | null | undefined;
+  public favoriteChartListEL: SpChartList | undefined | null;
   _checkExpand: boolean = false; //是否展开
   _usageFoldHeight: number = 56.25; //初始化时折叠的负载区高度
   usageExpandHeight: number = 75; //给定的展开的负载区高度
@@ -212,10 +214,6 @@ export class TimerShaftElement extends BaseElement {
     this._endNS = value;
   }
 
-  isScaling(): boolean {
-    return this._rangeRuler?.isPress || false;
-  }
-
   reset(): void {
     this.loadComplete = false;
     this.totalNS = 10_000_000_000;
@@ -283,6 +281,7 @@ export class TimerShaftElement extends BaseElement {
     this.usageEL = this.shadowRoot?.querySelector('.cpu-usage');
     this.timerShaftEL = this.shadowRoot!.host.parentNode?.querySelector('.timer-shaft');
     this.rowsPaneEL = this.shadowRoot!.host.parentNode?.querySelector('.rows-pane');
+    this.favoriteChartListEL = this.shadowRoot!.host.parentNode?.querySelector('#favorite-chart-list');
     const height = this.canvas?.clientHeight || 0;
     // 点击cpu usage部分，切换折叠展开
     this.usageEL?.addEventListener('click', (e) => {
@@ -302,6 +301,7 @@ export class TimerShaftElement extends BaseElement {
           this.sportRuler.frame.y = 100;
           this.render();
           this._checkExpand = false;
+          this.favoriteChartListEL?.refreshFavoriteCanvas();//刷新收藏泳道画布高度
         } else {
           sessionStorage.setItem('expand', String(this._checkExpand));
           sessionStorage.setItem('foldHeight', String(this._usageFoldHeight));
@@ -314,6 +314,7 @@ export class TimerShaftElement extends BaseElement {
           this.sportRuler.frame.y = 100 - this._usageFoldHeight;
           this.render();
           this._checkExpand = true;
+          this.favoriteChartListEL?.refreshFavoriteCanvas();//刷新收藏泳道画布高度
         }
       }
     });
@@ -483,7 +484,7 @@ export class TimerShaftElement extends BaseElement {
     this._rangeRuler?.keyUp(ev);
   };
 
-  disconnectedCallback(): void {}
+  disconnectedCallback(): void { }
 
   firstRender = true;
 
diff --git a/ide/src/trace/component/trace/base/CustomThemeColor.html.ts b/ide/src/trace/component/trace/base/CustomThemeColor.html.ts
index 25c685e6e91a84da1dc186cadd9cc0ac3e12f936..e984e39586c4764708c2a4018a7bd2c21c2f25a0 100644
--- a/ide/src/trace/component/trace/base/CustomThemeColor.html.ts
+++ b/ide/src/trace/component/trace/base/CustomThemeColor.html.ts
@@ -174,4 +174,4 @@ export const CustomThemeColorHtml = `
             <button class="btn" id='confirm'>Confirm</button>
          </div>
         </div>
-    `;
\ No newline at end of file
+    `;
diff --git a/ide/src/trace/component/trace/base/Extension.ts b/ide/src/trace/component/trace/base/Extension.ts
index 45500794dc86c055ed46036c1ea7fbfffd355366..297f6c937e865bf75e27dcc81ec22f43657431fb 100644
--- a/ide/src/trace/component/trace/base/Extension.ts
+++ b/ide/src/trace/component/trace/base/Extension.ts
@@ -128,11 +128,11 @@ window.SmartEvent = {
     DeviceDisConnect: 'SmartEvent-DEVICE_DISCONNECT',
     HoverNull: 'SmartEvent-Hover-NULL',
     KeyPath: 'SmartEvent-UI-UploadKeyPath',
-    LoadFinish: 'SmartEvent-UI-LoadFinish',//所有泳道刷新完成触发
-    LoadFinishFrame: 'SmartEvent-UI-LoadFinishFrame',//单个泳道刷新完成触发
-    ShowBottomTab: 'SmartEvent-UI-ShowBottomTab',// 显示底部 tab
+    LoadFinish: 'SmartEvent-UI-LoadFinish', //所有泳道刷新完成触发
+    LoadFinishFrame: 'SmartEvent-UI-LoadFinishFrame', //单个泳道刷新完成触发
+    ShowBottomTab: 'SmartEvent-UI-ShowBottomTab', // 显示底部 tab
     ImportRecord: 'SmartEvent-UI-ImportRecord',
-    ExportRecord: 'SmartEvent-UI-ExportRecord'
+    ExportRecord: 'SmartEvent-UI-ExportRecord',
   },
 };
 Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn);
diff --git a/ide/src/trace/component/trace/base/RangeSelect.ts b/ide/src/trace/component/trace/base/RangeSelect.ts
index e8feaaac1cdc4db96ce21211ecb6a8a343016202..0d00505e1be3dbbef33d6385bf94bd2ec811a5f2 100644
--- a/ide/src/trace/component/trace/base/RangeSelect.ts
+++ b/ide/src/trace/component/trace/base/RangeSelect.ts
@@ -72,11 +72,15 @@ export class RangeSelect {
     TraceRow.rangeSelectObject = undefined;
     // 遍历当前可视区域所有的泳道，如果有render_service进程，查询该进程下对应泳道的方法存起来，以便框选时直接使用
     this.trace?.visibleRows.forEach((row) => {
-      if (row.getAttribute('row-type') === 'process' && row.getAttribute('name')?.startsWith('render_service')) {
-        this.queryRowsData(row.childrenList)
+      if (row.getAttribute('name')?.startsWith('render_service')) {
+        if (row.getAttribute('row-type') === 'process') {
+          this.queryRowsData(row.childrenList);
+        } else {
+          this.queryRowsData(row.parentRowEl!.childrenList);
+        }
         return;
       }
-    })
+    });
   }
 
   // 对应查询方法行所有的数据
@@ -91,16 +95,13 @@ export class RangeSelect {
           this.savePresentData(row, 'H:Waiting for Present Fence');
         }
       }
-    })
+    });
   }
 
   // 查到所有的数据存储起来
   saveFrameRateData(row: TraceRow<any>, funcName: string): void {
-    let dataList: any = []
-    queryFuncRowData(
-      funcName,
-      Number(row?.getAttribute('row-id')),
-    ).then((res) => {
+    let dataList: any = [];
+    queryFuncRowData(funcName, Number(row?.getAttribute('row-id'))).then((res) => {
       if (res.length) {
         res.forEach((item) => {
           dataList?.push({ startTime: item.startTime!, tid: item.tid });
@@ -115,11 +116,8 @@ export class RangeSelect {
   }
   // 查到present泳道所有的数据存储起来
   savePresentData(row: TraceRow<any>, funcName: string): void {
-    let dataList: any = []
-    fuzzyQueryFuncRowData(
-      funcName,
-      Number(row?.getAttribute('row-id')),
-    ).then((res) => {
+    let dataList: any = [];
+    fuzzyQueryFuncRowData(funcName, Number(row?.getAttribute('row-id'))).then((res) => {
       if (res.length) {
         res.forEach((item) => {
           dataList?.push({ endTime: item.endTime!, tid: item.tid });
@@ -140,16 +138,19 @@ export class RangeSelect {
       }
       //查询render_service数据
       if (this.rangeTraceRow?.length) {
-        this.checkRowsName(this.rangeTraceRow)
+        this.checkRowsName(this.rangeTraceRow);
       }
     }
     this.isMouseDown = false;
   }
 
-
   checkRowsName(rowList: Array<TraceRow<any>>) {
     rowList.forEach((row) => {
-      if (row.getAttribute('row-type') === 'func' && row.parentRowEl?.getAttribute('name')?.startsWith('render_service')) {
+      if (
+        row.getAttribute('row-type') === 'func' &&
+        row.parentRowEl?.getAttribute('name')?.startsWith('render_service')
+      ) {
+        row.frameRateList = [];
         if (row.getAttribute('name')?.startsWith('render_service')) {
           this.filterRateData(row, this.docomList);
         } else if (row.getAttribute('name')?.startsWith('RSHardwareThrea')) {
@@ -158,7 +159,7 @@ export class RangeSelect {
           this.filterPresentData(row, this.presentList);
         }
       }
-    })
+    });
   }
 
   // 过滤处理数据
@@ -171,14 +172,14 @@ export class RangeSelect {
       ) {
         row.frameRateList?.push(it.startTime);
       }
-    })
+    });
     if (row.frameRateList?.length) {
-      row.frameRateList = [...new Set(row.frameRateList)];
-      row.frameRateList.sort((a, b) => a - b);
-      if (row.frameRateList?.length >= 2) {
+      if (row.frameRateList.length < 2) {
+        row.frameRateList = [];
+      } else {
         const CONVERT_SECONDS = 1000000000;
-        let cutres: number = (row.frameRateList[row.frameRateList.length - 1] - row.frameRateList[0]);
-        row.avgRateTxt = ((row.frameRateList.length - 1) / cutres * CONVERT_SECONDS).toFixed(1) + 'fps';
+        let cutres: number = row.frameRateList[row.frameRateList.length - 1] - row.frameRateList[0];
+        row.avgRateTxt = (((row.frameRateList.length - 1) / cutres) * CONVERT_SECONDS).toFixed(1) + 'fps';
       }
     }
   }
@@ -191,32 +192,33 @@ export class RangeSelect {
         it.endTime <= TraceRow.rangeSelectObject!.endNS! &&
         Number(row.rowId) === Number(it.tid)
       ) {
-        row.frameRateList?.push(it.endTime)
+        row.frameRateList?.push(it.endTime);
       }
-    })
+    });
     if (row.frameRateList?.length) {
-      row.frameRateList = [...new Set(row.frameRateList)];//去重
-      row.frameRateList.sort((a, b) => a - b); //排序
-      if (row.frameRateList?.length >= 2) {
+      if (row.frameRateList?.length < 2) {
+        row.frameRateList = [];
+      } else {
         let hitchTimeList: Array<number> = [];
         for (let i = 0; i < SpLtpoChart.sendHitchDataArr.length; i++) {
-          if (SpLtpoChart.sendHitchDataArr[i].startTs! >= row.frameRateList[0]!
-            &&
-            SpLtpoChart.sendHitchDataArr[i].startTs! < row.frameRateList[row.frameRateList.length - 1]!) {
-            hitchTimeList.push(SpLtpoChart.sendHitchDataArr[i].value!);
-          } else if (
-            SpLtpoChart.sendHitchDataArr[i].startTs! >= row.frameRateList[row.frameRateList.length - 1]!
+          if (
+            SpLtpoChart.sendHitchDataArr[i].startTs! >= row.frameRateList[0]! &&
+            SpLtpoChart.sendHitchDataArr[i].startTs! < row.frameRateList[row.frameRateList.length - 1]!
           ) {
+            hitchTimeList.push(SpLtpoChart.sendHitchDataArr[i].value!);
+          } else if (SpLtpoChart.sendHitchDataArr[i].startTs! >= row.frameRateList[row.frameRateList.length - 1]!) {
             break;
           }
         }
         const CONVERT_SECONDS = 1000000000;
-        let cutres: number = (row.frameRateList[row.frameRateList.length - 1] - row.frameRateList[0]);
-        let avgRate: string = ((row.frameRateList.length - 1) / cutres * CONVERT_SECONDS).toFixed(1) + 'fps';
+        let cutres: number = row.frameRateList[row.frameRateList.length - 1] - row.frameRateList[0];
+        let avgRate: string = (((row.frameRateList.length - 1) / cutres) * CONVERT_SECONDS).toFixed(1) + 'fps';
         let sum: number = hitchTimeList.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // ∑hitchTimeData
-        let hitchRate: number = (sum / ((TraceRow.rangeSelectObject!.endNS! - TraceRow.rangeSelectObject!.startNS!) / 1000000));
+        let hitchRate: number =
+          sum / ((TraceRow.rangeSelectObject!.endNS! - TraceRow.rangeSelectObject!.startNS!) / 1000000);
         let perHitchRate: string = (Number(hitchRate) * 100).toFixed(2) + '%';
-        row.avgRateTxt = avgRate + ' ' + ',' + ' ' + 'HitchTime:' + ' ' + sum.toFixed(1) + 'ms' + ' ' + ',' + ' ' + perHitchRate;
+        row.avgRateTxt =
+          avgRate + ' ' + ',' + ' ' + 'HitchTime:' + ' ' + sum.toFixed(1) + 'ms' + ' ' + ',' + ' ' + perHitchRate;
       }
     }
   }
@@ -289,12 +291,15 @@ export class RangeSelect {
         itRect.height = 0;
       }
       if (
-        Rect.intersect(itRect as Rect, {
-          x: Math.min(this.startPageX, this.endPageX),
-          y: Math.min(this.startPageY, this.endPageY),
-          width: Math.abs(this.startPageX - this.endPageX),
-          height: Math.abs(this.startPageY - this.endPageY),
-        } as Rect)
+        Rect.intersect(
+          itRect as Rect,
+          {
+            x: Math.min(this.startPageX, this.endPageX),
+            y: Math.min(this.startPageY, this.endPageY),
+            width: Math.abs(this.startPageX - this.endPageX),
+            height: Math.abs(this.startPageY - this.endPageY),
+          } as Rect
+        )
       ) {
         if (!rangeSelect) {
           it.setTipLeft(0, null);
@@ -375,8 +380,7 @@ export class RangeSelect {
         (this.timerShaftEL?.canvas?.clientWidth || 0)) /
       (TraceRow.range!.endNS - TraceRow.range!.startNS);
     let x2 =
-      ((TraceRow.rangeSelectObject!.endNS! - TraceRow.range!.startNS) *
-        (this.timerShaftEL?.canvas?.clientWidth || 0)) /
+      ((TraceRow.rangeSelectObject!.endNS! - TraceRow.range!.startNS) * (this.timerShaftEL?.canvas?.clientWidth || 0)) /
       (TraceRow.range!.endNS - TraceRow.range!.startNS);
     this.mark = { startMark: x1, endMark: x2 };
     let mouseX = ev.pageX - this.rowsPaneEL!.getBoundingClientRect().left - 248;
diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts
index 3d81568048fb96fe5a1f91071d80d10b23cae449..7aad00cdae6c7d386742105d217715fbb9f3f878 100644
--- a/ide/src/trace/component/trace/base/TraceRow.ts
+++ b/ide/src/trace/component/trace/base/TraceRow.ts
@@ -27,10 +27,7 @@ import '../../../../base-ui/tree/LitTree';
 import { LitPopover } from '../../../../base-ui/popover/LitPopoverV';
 import { info } from '../../../../log/Log';
 import { ColorUtils } from './ColorUtils';
-import {
-  drawSelectionRange,
-  isFrameContainPoint
-} from '../../../database/ui-worker/ProcedureWorkerCommon';
+import { drawSelectionRange, isFrameContainPoint } from '../../../database/ui-worker/ProcedureWorkerCommon';
 import { TraceRowConfig } from './TraceRowConfig';
 import { type TreeItemData, LitTree } from '../../../../base-ui/tree/LitTree';
 import { SpSystemTrace } from '../../SpSystemTrace';
@@ -129,8 +126,10 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   static ROW_TYPE_PURGEABLE_TOTAL_VM = 'purgeable-total-vm';
   static ROW_TYPE_PURGEABLE_PIN_VM = 'purgeable-pin-vm';
   static ROW_TYPE_LOGS = 'logs';
-  static ROW_TYPE_SAMPLE = 'sample';
+  static ROW_TYPE_SAMPLE = 'bpftrace';
   static ROW_TYPE_ALL_APPSTARTUPS = 'all-appstartups';
+  static ROW_TYPE_PERF_TOOL_GROUP = 'perf-tool-group';
+  static ROW_TYPE_PERF_TOOL = 'perf-tool';
   static FRAME_WIDTH: number = 0;
   static range: TimeRange | undefined | null;
   static rangeSelectObject: RangeSelectStruct | undefined;
@@ -157,7 +156,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   public collectEL: LitIcon | null | undefined;
   public onThreadHandler: ((useCache: boolean, buf: ArrayBuffer | undefined | null) => void) | undefined | null;
   public onRowSettingChangeHandler: ((keys: Array<string>, nodes: Array<any>) => void) | undefined | null;
-  public onRowCheckFileChangeHandler: ((file: string | ArrayBuffer | null) => void) | undefined | null;
+  public onRowCheckFileChangeHandler: (() => void) | undefined | null;
   public supplier: (() => Promise<Array<T>>) | undefined | null;
   public favoriteChangeHandler: ((fav: TraceRow<any>) => void) | undefined | null;
   public selectChangeHandler: ((traceRow: TraceRow<any>) => void) | undefined | null;
@@ -194,7 +193,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   public loadingFrame: boolean = false; //实时查询,正在查询中
   public needRefresh: boolean = true;
   _frameRateList: Array<number> | undefined; //存储平均帧率数据
-  _avgRateTxt: string | undefined | null;//存储帧率显示文字
+  _avgRateTxt: string | undefined | null; //存储帧率显示文字
   public folderIcon: LitIcon | null | undefined;
   private sampleUploadEl: HTMLDivElement | null | undefined;
   private jsonFileEl: HTMLInputElement | null | undefined;
@@ -223,7 +222,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   ) {
     super();
     this.args = args;
-    this.attachShadow({mode: 'open'}).innerHTML = this.initHtml();
+    this.attachShadow({ mode: 'open' }).innerHTML = this.initHtml();
     this.initElements();
   }
 
@@ -558,19 +557,22 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     }
   };
 
-  getHoverStruct(strict: boolean = true, offset: boolean = false, maxKey: string | undefined = undefined): T | undefined {
+  getHoverStruct(
+    strict: boolean = true,
+    offset: boolean = false,
+    maxKey: string | undefined = undefined
+  ): T | undefined {
     if (this.isHover) {
       if (maxKey) {
-        let arr = this.dataListCache.filter(
-          (re) => re.frame && isFrameContainPoint(re.frame, this.hoverX, this.hoverY, strict, offset)
-        ).sort((targetA, targetB) => (targetB as any)[maxKey] - (targetA as any)[maxKey]);
+        let arr = this.dataListCache
+          .filter((re) => re.frame && isFrameContainPoint(re.frame, this.hoverX, this.hoverY, strict, offset))
+          .sort((targetA, targetB) => (targetB as any)[maxKey] - (targetA as any)[maxKey]);
         return arr[0];
       } else {
         return this.dataListCache.find(
           (re) => re.frame && isFrameContainPoint(re.frame, this.hoverX, this.hoverY, strict, offset)
         );
       }
-
     }
   }
 
@@ -625,22 +627,22 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
       <label for="file" style="cursor:pointer">
         <lit-icon class="folder" name="copy-csv" size="19"></lit-icon>
       </label>
-    `
+    `;
     this.jsonFileEl = this.sampleUploadEl!.querySelector('.file') as HTMLInputElement;
     this.sampleUploadEl!.addEventListener('change', () => {
       let files = this.jsonFileEl!.files;
       if (files && files.length > 0) {
         this.sampleUploadEl!.dispatchEvent(
           new CustomEvent('sample-file-change', {
-            detail: files[0]
+            detail: files[0],
           })
-        )
+        );
         if (this.jsonFileEl) this.jsonFileEl.value = '';
       }
-    })
+    });
     this.sampleUploadEl!.addEventListener('click', (e) => {
       e.stopPropagation();
-    })
+    });
     this.describeEl?.appendChild(this.sampleUploadEl!);
   }
 
@@ -664,7 +666,12 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     }
   }
 
-  sortRenderServiceData(child: TraceRow<BaseStruct>, targetRow: TraceRow<BaseStruct>, threadRowArr: Array<TraceRow<BaseStruct>>, flag: boolean) {
+  sortRenderServiceData(
+    child: TraceRow<BaseStruct>,
+    targetRow: TraceRow<BaseStruct>,
+    threadRowArr: Array<TraceRow<BaseStruct>>,
+    flag: boolean
+  ) {
     if (child.rowType === 'thread') {
       threadRowArr.push(child);
     } else {
@@ -676,17 +683,27 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
       }
     }
     if (flag) {
-      let order: string[] = ['VSyncGenerator', 'VSync-rs', 'VSync-app', 'render_service', 'Acquire Fence', 'RSHardwareThrea', 'Present Fence'];
+      let order: string[] = [
+        'VSyncGenerator',
+        'VSync-rs',
+        'VSync-app',
+        'render_service',
+        'RSUniRenderThre',
+        'Acquire Fence',
+        'RSHardwareThrea',
+        'Present Fence',
+      ];
       let filterOrderArr: Array<TraceRow<BaseStruct>> = [];
       let filterNotOrderArr: Array<TraceRow<BaseStruct>> = [];
       for (let i = 0; i < threadRowArr.length; i++) {
         const element: TraceRow<any> = threadRowArr[i];
-        let renderFlag: boolean = element.name.startsWith('render_service') && element.rowId === element.rowParentId ? true : false;
+        let renderFlag: boolean =
+          element.name.startsWith('render_service') && element.rowId === element.rowParentId ? true : false;
         if (renderFlag) {
           filterOrderArr.push(element);
-        } else if (order.includes(element.namePrefix!) && !(element.name.startsWith('render_service'))) {
+        } else if (order.includes(element.namePrefix!) && !element.name.startsWith('render_service')) {
           filterOrderArr.push(element);
-        } else if (!(order.includes(element.namePrefix!)) || !renderFlag) {
+        } else if (!order.includes(element.namePrefix!) || !renderFlag) {
           filterNotOrderArr.push(element);
         }
       }
@@ -694,9 +711,11 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
         return order.indexOf(star.namePrefix!) - order.indexOf(next.namePrefix!);
       });
       let combinedArr = [...filterOrderArr, ...filterNotOrderArr];
-      combinedArr.forEach((item) => { this.addChildTraceRow(item) })
+      combinedArr.forEach((item) => {
+        this.addChildTraceRow(item);
+      });
     }
-  }  
+  }
 
   set tip(value: string) {
     if (this.tipEL) {
@@ -876,26 +895,41 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
       window.publish(window.SmartEvent.UI.HoverNull, undefined);
     });
     this.fileEL = this.rowCheckFilePop.querySelector('#jsoninput');
-    this.rowCheckFilePop.onclick = (): void => {
+    this.rowCheckFilePop.addEventListener('click', (e) => {
       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.fileEL.addEventListener('click', (event: Event) => {
+      event.stopPropagation();
+    });
+
+    let that = this;
+    window.addEventListener('storage', function (e) {
+      if (e.storageArea === sessionStorage) {
+        if (e.key === 'freqInfoData') {
+          that.onRowCheckFileChangeHandler?.();
+        }
+      }
+    });
+    this.fileEL.addEventListener(
+      'change',
+      (e: any) => {
+        let file = e.target.files[0];
+        if (file && file.type === 'application/json') {
+          let file_reader = new FileReader();
+          file_reader.readAsText(file, 'UTF-8');
+          file_reader.onload = () => {
+            let fc = file_reader.result;
+            window.sessionStorage.setItem('freqInfoData', JSON.stringify(fc));
+            this.onRowCheckFileChangeHandler?.();
+            alert('json文件上传成功！');
+            this.fileEL.value = '';
+          };
+        } else {
+          return;
+        }
+      },
+      false
+    );
     this.describeEl?.appendChild(this.rowCheckFilePop);
   }
 
@@ -975,7 +1009,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
 
   initCanvas(list: Array<HTMLCanvasElement>): void {
     let timerShaftEL = document!
-    .querySelector('body > sp-application')!
+      .querySelector('body > sp-application')!
       .shadowRoot!.querySelector('#sp-system-trace')!
       .shadowRoot!.querySelector('div > timer-shaft-element');
     let timerShaftCanvas = timerShaftEL!.shadowRoot!.querySelector<HTMLCanvasElement>('canvas');
@@ -1201,7 +1235,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
             this.dataListCache.push(...this.fixedList);
             this.isComplete = true;
             this.loadingFrame = false;
-            let idx = TraceRow.currentActiveRows.findIndex(it => it === `${this.rowType}-${this.rowId}`);
+            let idx = TraceRow.currentActiveRows.findIndex((it) => it === `${this.rowType}-${this.rowId}`);
             if (idx != -1) {
               TraceRow.currentActiveRows.splice(idx, 1);
             }
diff --git a/ide/src/trace/component/trace/base/TraceRowConfig.ts b/ide/src/trace/component/trace/base/TraceRowConfig.ts
index 01ab776535d788f3119fb342d438e4f0d6b5ed6d..2f8a80067e5d1bea7c537ce9b450fde0abf2e1c1 100644
--- a/ide/src/trace/component/trace/base/TraceRowConfig.ts
+++ b/ide/src/trace/component/trace/base/TraceRowConfig.ts
@@ -82,6 +82,12 @@ export class TraceRowConfig extends BaseElement {
       );
     TraceRowConfig.allTraceRowList.push(...this.traceRowList!);
     this.refreshAllConfig(true, true);
+    // 鼠标移入该页面,隐藏泳道图tip
+    this.onmouseenter = () => {
+      this.spSystemTrace!.tipEL!.style.display = 'none';
+      this.spSystemTrace!.hoverStructNull();
+      this.spSystemTrace!.refreshCanvas(true);
+    };
   }
 
   private refreshAllConfig(
@@ -421,7 +427,7 @@ export class TraceRowConfig extends BaseElement {
     }/application/trace/config/custom_temp_config.json`;
     let localJson = '';
     this.switchButton!.addEventListener('click', () => {
-      if(this.switchButton!.title === 'Show charts template') {
+      if (this.switchButton!.title === 'Show charts template') {
         this.switchButton!.title = 'Show subSystem template';
         this.refreshAllConfig(true, true);
         this.resetChartTable();
@@ -434,22 +440,22 @@ export class TraceRowConfig extends BaseElement {
         this.exportFileIcon!.style.display = 'block';
         this.configTitle!.innerHTML = 'SubSystem Template';
         let localText = window.localStorage.getItem(LOCAL_STORAGE_JSON);
-        if(localText) {
+        if (localText) {
           this.loadTempConfig(localText);
         } else {
           if (localJson === '') {
             fetch(jsonUrl)
-            .then((res) => {
-              if (res.ok) {
-                res.text().then((text) => {
-                  localJson = text;
-                  this.loadTempConfig(localJson);
-                });
-              }
-            })
+              .then((res) => {
+                if (res.ok) {
+                  res.text().then((text) => {
+                    localJson = text;
+                    this.loadTempConfig(localJson);
+                  });
+                }
+              })
               ['catch']((err) => {
-              console.log(err);
-            });
+                console.log(err);
+              });
           } else {
             this.loadTempConfig(localJson);
           }
@@ -557,8 +563,12 @@ export class TraceRowConfig extends BaseElement {
     let subsystemList = [];
     for (let subIndex = 0; subIndex < subsystemsData.length; subIndex++) {
       let currentSystemData = subsystemsData[subIndex];
-      if(!currentSystemData.hasOwnProperty('subsystem') || currentSystemData.subsystem === '' ||
-        subsystemList.indexOf(currentSystemData.subsystem) > -1 || Array.isArray(currentSystemData.subsystem)) {
+      if (
+        !currentSystemData.hasOwnProperty('subsystem') ||
+        currentSystemData.subsystem === '' ||
+        subsystemList.indexOf(currentSystemData.subsystem) > -1 ||
+        Array.isArray(currentSystemData.subsystem)
+      ) {
         continue;
       }
       let currentSubName = currentSystemData.subsystem;
@@ -579,8 +589,11 @@ export class TraceRowConfig extends BaseElement {
         }
         for (let compIndex = 0; compIndex < currentCompDates.length; compIndex++) {
           let currentCompDate = currentCompDates[compIndex];
-          if(!currentCompDate.hasOwnProperty('component') || currentCompDate.component === '' ||
-            !currentCompDate.hasOwnProperty('charts')) {
+          if (
+            !currentCompDate.hasOwnProperty('component') ||
+            currentCompDate.component === '' ||
+            !currentCompDate.hasOwnProperty('charts')
+          ) {
             continue;
           }
           id = this.setSubsystemComp(currentCompDate, id, subsystemStruct);
@@ -619,8 +632,10 @@ export class TraceRowConfig extends BaseElement {
     };
     for (let chartIndex = 0; chartIndex < currentChartDates.length; chartIndex++) {
       let currentChartDate = currentChartDates[chartIndex];
-      if ((!currentChartDate.hasOwnProperty('chartName') && !currentChartDate.hasOwnProperty('chartId'))
-        || Array.isArray(currentChartDate.chartName)) {
+      if (
+        (!currentChartDate.hasOwnProperty('chartName') && !currentChartDate.hasOwnProperty('chartId')) ||
+        Array.isArray(currentChartDate.chartName)
+      ) {
         continue;
       }
       let currentChartName = `${currentChartDate.chartName}`;
@@ -654,7 +669,12 @@ export class TraceRowConfig extends BaseElement {
     return id;
   }
 
-  private setSubsystemChart(currentChartName: string, currentChartId: string, scene: Array<string>, findChartNames: Array<string>) {
+  private setSubsystemChart(
+    currentChartName: string,
+    currentChartId: string,
+    scene: Array<string>,
+    findChartNames: Array<string>
+  ) {
     if (this.traceRowList) {
       for (let index = 0; index < this.traceRowList.length; index++) {
         let item = this.traceRowList[index];
@@ -666,21 +686,31 @@ export class TraceRowConfig extends BaseElement {
           chartId = match[0].trim();
           name = item.name.split(match[0])[0];
           if (name !== 'Cpu') {
-            if ((currentChartName !== undefined && currentChartName !== '' &&
-              name.toLowerCase().endsWith(currentChartName.toLowerCase())) || currentChartId === chartId) {
+            if (
+              (currentChartName !== undefined &&
+                currentChartName !== '' &&
+                name.toLowerCase().endsWith(currentChartName.toLowerCase())) ||
+              currentChartId === chartId
+            ) {
               scene.push(...item.templateType);
               findChartNames.push(item.name);
             }
           } else {
-            if ((currentChartName !== undefined && currentChartName !== '' &&
-              name.toLowerCase().endsWith(currentChartName.toLowerCase()))) {
+            if (
+              currentChartName !== undefined &&
+              currentChartName !== '' &&
+              name.toLowerCase().endsWith(currentChartName.toLowerCase())
+            ) {
               scene.push(...item.templateType);
               findChartNames.push(item.name);
             }
           }
         } else {
-          if ((currentChartName !== undefined && currentChartName !== '' &&
-            name.toLowerCase().endsWith(currentChartName.toLowerCase()))) {
+          if (
+            currentChartName !== undefined &&
+            currentChartName !== '' &&
+            name.toLowerCase().endsWith(currentChartName.toLowerCase())
+          ) {
             scene.push(...item.templateType);
             findChartNames.push(item.name);
           }
@@ -824,21 +854,21 @@ export class TraceRowConfig extends BaseElement {
   private setChildIsSelect(node: SubsystemNode, configCheckBox: LitCheckBox): void {
     node.isCheck = configCheckBox.checked;
     if (node.children.length > 0) {
-      node.children.forEach(childItem => {
+      node.children.forEach((childItem) => {
         this.displayRow(childItem, configCheckBox);
         this.setChildIsSelect(childItem, configCheckBox);
       });
     }
   }
 
-  private displayRow(node:SubsystemNode, configCheckBox: LitCheckBox):void {
+  private displayRow(node: SubsystemNode, configCheckBox: LitCheckBox): void {
     if (node.depth === 3) {
-      let chartNumber = this.subsystemSelectList?.findIndex(item => item.nodeName === node.nodeName!);
+      let chartNumber = this.subsystemSelectList?.findIndex((item) => item.nodeName === node.nodeName!);
       if (configCheckBox.checked) {
-        if(chartNumber === -1) {
+        if (chartNumber === -1) {
           this.subsystemSelectList?.push({
             nodeName: node.nodeName!,
-            scene: configCheckBox.title.split(',')
+            scene: configCheckBox.title.split(','),
           });
         }
       } else {
diff --git a/ide/src/trace/component/trace/base/TraceRowObject.ts b/ide/src/trace/component/trace/base/TraceRowObject.ts
index aa55e8f7ae742ed4307f9b5481dc1c3ae69147dd..bb51910fa26593a1d2cbec578b58749f8b3d34e7 100644
--- a/ide/src/trace/component/trace/base/TraceRowObject.ts
+++ b/ide/src/trace/component/trace/base/TraceRowObject.ts
@@ -55,7 +55,9 @@ export class TraceRowObject<T extends BaseStruct> {
           | WebGL2RenderingContext
           | null
           | undefined
-      ) => void) | undefined | null;
+      ) => void)
+    | undefined
+    | null;
   public top: number = 0;
   public rowIndex: number = 0;
   public preObject: TraceRowObject<T> | undefined | null;
diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts
index b93e8794b3ac34813ac2af9f96ae91b350c56f42..7dfc6f7eabfd016d06c29bfbd900c24a35ebf4a9 100644
--- a/ide/src/trace/component/trace/base/TraceSheet.ts
+++ b/ide/src/trace/component/trace/base/TraceSheet.ts
@@ -87,6 +87,7 @@ import { TabPaneSampleInstruction } from '../sheet/bpftrace/TabPaneSampleInstruc
 import { TabPaneFreqStatesDataCut } from '../sheet/states/TabPaneFreqStatesDataCut';
 import { TabPaneDataCut } from '../sheet/TabPaneDataCut';
 import { SpSystemTrace } from '../../SpSystemTrace';
+import { PerfToolStruct } from '../../../database/ui-worker/ProcedureWorkerPerfTool';
 
 @element('trace-sheet')
 export class TraceSheet extends BaseElement {
@@ -179,11 +180,11 @@ export class TraceSheet extends BaseElement {
       document.dispatchEvent(
         new CustomEvent('sample-popver-change', {
           detail: {
-            select: select[0]
-          }
+            select: select[0],
+          },
         })
-      )
-    }
+      );
+    };
     this.processTree!.onChange = (e: any): void => {
       const select = this.processTree!.getCheckdKeys();
       const selectIPid = Number(select[0]);
@@ -254,7 +255,7 @@ export class TraceSheet extends BaseElement {
     }
   }
 
-  private nativeAnalysisListener(e: MouseEvent):void {
+  private nativeAnalysisListener(e: MouseEvent): void {
     //@ts-ignore
     if (e.detail.button === 2) {
       let pane = this.getPaneByID('box-native-calltree');
@@ -274,7 +275,7 @@ export class TraceSheet extends BaseElement {
 
   private virtualMemoryListener(e: any): void {
     if (e.detail.button === 0) {
-      this.selection!.fileSystemVMData = {path: e.detail.path};
+      this.selection!.fileSystemVMData = { path: e.detail.path };
       let pane = this.getPaneByID('box-vm-events');
       this.litTabs?.activeByKey(pane.key);
       if (e.detail.path) {
@@ -283,9 +284,9 @@ export class TraceSheet extends BaseElement {
     }
   }
 
-  private ioTierListener(e: any):void {
+  private ioTierListener(e: any): void {
     if (e.detail.button === 0) {
-      this.selection!.fileSystemIoData = {path: e.detail.path};
+      this.selection!.fileSystemIoData = { path: e.detail.path };
       let pane = this.getPaneByID('box-io-events');
       this.litTabs?.activeByKey(pane.key);
       if (e.detail.path) {
@@ -326,8 +327,7 @@ export class TraceSheet extends BaseElement {
     this.nav = this.shadowRoot?.querySelector('#tabs')?.shadowRoot?.querySelector('.tab-nav-vessel');
     this.tabs = this.shadowRoot?.querySelector('#tabs');
     this.navRoot = this.shadowRoot?.querySelector('#tabs')?.shadowRoot?.querySelector('.nav-root');
-    this.search = document.querySelector('body > sp-application')
-      ?.shadowRoot?.querySelector('div > div.search-vessel');
+    this.search = document.querySelector('body > sp-application')?.shadowRoot?.querySelector('div > div.search-vessel');
     this.timerShaft = this.parentElement?.querySelector('.timer-shaft');
     this.spacer = this.parentElement?.querySelector('.spacer');
     this.rowsPaneEL = this.parentElement?.querySelector('.rows-pane');
@@ -338,7 +338,8 @@ export class TraceSheet extends BaseElement {
     this.initNavElements(tabsPackUp!, borderTop, initialHeight);
     this.exportBt = this.shadowRoot?.querySelector<LitIcon>('#export-btn');
     tabsOpenUp!.onclick = (): void => {
-      this.tabs!.style.height = window.innerHeight - this.search!.offsetHeight - this.timerShaft!.offsetHeight - borderTop + 'px';
+      this.tabs!.style.height =
+        window.innerHeight - this.search!.offsetHeight - this.timerShaft!.offsetHeight - borderTop + 'px';
       let litTabpane: NodeListOf<HTMLDivElement> | undefined | null =
         this.shadowRoot?.querySelectorAll('#tabs > lit-tabpane');
       litTabpane!.forEach((node: HTMLDivElement): void => {
@@ -360,7 +361,7 @@ export class TraceSheet extends BaseElement {
       if (tabsPackUp!.name == 'down') {
         let beforeHeight = this.clientHeight;
         this.tabs!.style.height = this.navRoot!.offsetHeight + 'px';
-        window.publish(window.SmartEvent.UI.ShowBottomTab, { show: 2 , delta: beforeHeight - this.clientHeight })
+        window.publish(window.SmartEvent.UI.ShowBottomTab, { show: 2, delta: beforeHeight - this.clientHeight });
         litTabpane!.forEach((node: HTMLDivElement) => (node!.style.height = '0px'));
         tabsPackUp!.name = 'up';
         tabsPackUp!.title = 'Reset Tab';
@@ -380,8 +381,9 @@ export class TraceSheet extends BaseElement {
     let that = this;
     // 节点挂载时给Tab面板绑定鼠标按下事件
     this.nav!.onmousedown = (event): void => {
-      if (SpSystemTrace.isKeyUp === false) 
-      { return };
+      if (SpSystemTrace.isKeyUp === false) {
+        return;
+      }
       (window as any).isSheetMove = true;
       // 获取所有标签页的节点数组
       let litTabpane: NodeListOf<HTMLDivElement> | undefined | null =
@@ -389,7 +391,9 @@ export class TraceSheet extends BaseElement {
       // 获取当前选中面板的key值，后续用来确定当前面板是哪一个。 对于用户来说，直观看到的只有当前面板，其他面板可以在拖动完成后一次性设置好新的高度
       // @ts-ignore
       let litTabNavKey: string = this.nav!.querySelector('.nav-item[data-selected=true]').dataset.key;
-      let currentPane: HTMLDivElement = this.shadowRoot?.querySelector('#tabs > lit-tabpane[key="' + litTabNavKey + '"]')!;
+      let currentPane: HTMLDivElement = this.shadowRoot?.querySelector(
+        '#tabs > lit-tabpane[key="' + litTabNavKey + '"]'
+      )!;
       // 原函数 绑定鼠标移动事件，动态获取鼠标位置信息
       this.navMouseMove(event, currentPane!, that, tabsPackUp, borderTop);
       document.onmouseup = function (): void {
@@ -411,73 +415,78 @@ export class TraceSheet extends BaseElement {
     };
   }
 
-  private navMouseMove(event: MouseEvent, litTabpane: HTMLDivElement,
-    that: this, tabsPackUp: LitIcon, borderTop: number): void {
-      // 鼠标移动前记录此时的鼠标位置信息，后续根据新值与前次值作比对
-      let preY = event.pageY;
-      // 获取此时tab组件的偏移高度 需要包含水平滚动条的高度等
-      let preHeight = this.tabs!.offsetHeight;
-      // 获取此时整个滚动区域高度
-      let scrollH = that.rowsPaneEL!.scrollHeight;
-      // 获取此时滚动区域上方被隐藏的高度
-      let scrollT = that.rowsPaneEL!.scrollTop;
-      // 获取当前内容区高度加上上下内边距高度，即面板组件高度
-      let ch = that.clientHeight;
-      // 鼠标移动事件
-      document.onmousemove = function (event): void {
-        // 移动前的面板高度 - 移动前后鼠标的坐标差值 = 新的面板高度
-        let newHeight: number = preHeight - (event.pageY - preY);
-        // that指向的是tracesheet节点 spacer为垫片  rowsPaneEl为泳道   tabs为tab页组件  
-        // litTabpane为当前面板 navRoot为面板头部区的父级容器  search为顶部搜索区整个区域
-        // 这四个判断条件中，第一个尚未找到触发条件 后续和润和确认是否会触发
-        if (that.spacer!.offsetHeight > that.rowsPaneEL!.offsetHeight) {
-          that.tabs!.style.height = newHeight + 'px';
-          litTabpane!.style.height = newHeight - that.navRoot!.offsetHeight + 'px';
-          // 设置右上角面板大小化的箭头样式，面板在移动到最底部时，箭头向上，其余情况箭头向下
-          tabsPackUp!.name = 'down';
-        } else if (
-          // 只要没有移动到边界区域都会进入该条件
-          that.navRoot!.offsetHeight <= newHeight &&
-          that.search!.offsetHeight + that.timerShaft!.offsetHeight + borderTop + that.spacer!.offsetHeight <=
-          window.innerHeight - newHeight
-        ) {
-          that.tabs!.style.height = newHeight + 'px';
-          litTabpane!.style.height = newHeight - that.navRoot!.offsetHeight + 'px';
-          tabsPackUp!.name = 'down';
-        } else if (that.navRoot!.offsetHeight >= newHeight) {
-          // 该条件在面板置底时触发
-          that.tabs!.style.height = that.navRoot!.offsetHeight + 'px';
-          litTabpane!.style.height = '0px';
-          tabsPackUp!.name = 'up';
-        } else if (
-          that.search!.offsetHeight + that.timerShaft!.offsetHeight + borderTop + that.spacer!.offsetHeight >=
+  private navMouseMove(
+    event: MouseEvent,
+    litTabpane: HTMLDivElement,
+    that: this,
+    tabsPackUp: LitIcon,
+    borderTop: number
+  ): void {
+    // 鼠标移动前记录此时的鼠标位置信息，后续根据新值与前次值作比对
+    let preY = event.pageY;
+    // 获取此时tab组件的偏移高度 需要包含水平滚动条的高度等
+    let preHeight = this.tabs!.offsetHeight;
+    // 获取此时整个滚动区域高度
+    let scrollH = that.rowsPaneEL!.scrollHeight;
+    // 获取此时滚动区域上方被隐藏的高度
+    let scrollT = that.rowsPaneEL!.scrollTop;
+    // 获取当前内容区高度加上上下内边距高度，即面板组件高度
+    let ch = that.clientHeight;
+    // 鼠标移动事件
+    document.onmousemove = function (event): void {
+      // 移动前的面板高度 - 移动前后鼠标的坐标差值 = 新的面板高度
+      let newHeight: number = preHeight - (event.pageY - preY);
+      // that指向的是tracesheet节点 spacer为垫片  rowsPaneEl为泳道   tabs为tab页组件
+      // litTabpane为当前面板 navRoot为面板头部区的父级容器  search为顶部搜索区整个区域
+      // 这四个判断条件中，第一个尚未找到触发条件 后续和润和确认是否会触发
+      if (that.spacer!.offsetHeight > that.rowsPaneEL!.offsetHeight) {
+        that.tabs!.style.height = newHeight + 'px';
+        litTabpane!.style.height = newHeight - that.navRoot!.offsetHeight + 'px';
+        // 设置右上角面板大小化的箭头样式，面板在移动到最底部时，箭头向上，其余情况箭头向下
+        tabsPackUp!.name = 'down';
+      } else if (
+        // 只要没有移动到边界区域都会进入该条件
+        that.navRoot!.offsetHeight <= newHeight &&
+        that.search!.offsetHeight + that.timerShaft!.offsetHeight + borderTop + that.spacer!.offsetHeight <=
           window.innerHeight - newHeight
-        ) {
-          // 该条件在面板高度置顶时触发
-          that.tabs!.style.height =
-            window.innerHeight -
-            that.search!.offsetHeight -
-            that.timerShaft!.offsetHeight -
-            borderTop -
-            that.spacer!.offsetHeight +
-            'px';
-          litTabpane!.style.height =
-            window.innerHeight -
-            that.search!.offsetHeight -
-            that.timerShaft!.offsetHeight -
-            that.navRoot!.offsetHeight -
-            borderTop -
-            that.spacer!.offsetHeight +
-            'px';
-          tabsPackUp!.name = 'down';
-        }
-        that.tabPaneHeight = litTabpane!.style.height;
-        let currentSH = that.rowsPaneEL!.scrollHeight;
-        // 第一个判断条件尚未确定如何触发,currentSH与scrollH始终相等
-        if (currentSH > scrollH && currentSH > that.rowsPaneEL!.scrollTop + that.clientHeight) {
-          that.rowsPaneEL!.scrollTop = scrollT - (ch - that.clientHeight);
-        }
-      };
+      ) {
+        that.tabs!.style.height = newHeight + 'px';
+        litTabpane!.style.height = newHeight - that.navRoot!.offsetHeight + 'px';
+        tabsPackUp!.name = 'down';
+      } else if (that.navRoot!.offsetHeight >= newHeight) {
+        // 该条件在面板置底时触发
+        that.tabs!.style.height = that.navRoot!.offsetHeight + 'px';
+        litTabpane!.style.height = '0px';
+        tabsPackUp!.name = 'up';
+      } else if (
+        that.search!.offsetHeight + that.timerShaft!.offsetHeight + borderTop + that.spacer!.offsetHeight >=
+        window.innerHeight - newHeight
+      ) {
+        // 该条件在面板高度置顶时触发
+        that.tabs!.style.height =
+          window.innerHeight -
+          that.search!.offsetHeight -
+          that.timerShaft!.offsetHeight -
+          borderTop -
+          that.spacer!.offsetHeight +
+          'px';
+        litTabpane!.style.height =
+          window.innerHeight -
+          that.search!.offsetHeight -
+          that.timerShaft!.offsetHeight -
+          that.navRoot!.offsetHeight -
+          borderTop -
+          that.spacer!.offsetHeight +
+          'px';
+        tabsPackUp!.name = 'down';
+      }
+      that.tabPaneHeight = litTabpane!.style.height;
+      let currentSH = that.rowsPaneEL!.scrollHeight;
+      // 第一个判断条件尚未确定如何触发,currentSH与scrollH始终相等
+      if (currentSH > scrollH && currentSH > that.rowsPaneEL!.scrollTop + that.clientHeight) {
+        that.rowsPaneEL!.scrollTop = scrollT - (ch - that.clientHeight);
+      }
+    };
   }
 
   private importClickEvent(): void {
@@ -499,12 +508,13 @@ export class TraceSheet extends BaseElement {
             'upload-so',
             '',
             fileList,
-            (res: string) => {
+            (res: any) => {
               importFileBt!.disabled = false;
-              if (res === 'ok') {
+              if (res.result === 'ok') {
                 window.publish(window.SmartEvent.UI.UploadSOFile, {});
               } else {
-                window.publish(window.SmartEvent.UI.Error, 'parse so file failed!');
+                const failedList = res.failedArray.join(',');
+                window.publish(window.SmartEvent.UI.Error, `parse so file ${failedList} failed!`);
               }
             },
             'upload-so'
@@ -613,7 +623,7 @@ export class TraceSheet extends BaseElement {
     data: ThreadStruct,
     scrollCallback: ((e: ThreadStruct) => void) | undefined,
     scrollWakeUp: (d: any) => void | undefined,
-    callback?: ((data: Array<any>, str:string) => void)
+    callback?: (data: Array<any>, str: string) => void
   ) =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setThreadData(
       data,
@@ -623,12 +633,14 @@ export class TraceSheet extends BaseElement {
     );
   displayMemData = (data: ProcessMemStruct): void =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setMemData(data);
-  displayClockData = (data: ClockStruct): void =>
+  displayClockData = (data: ClockStruct): Promise<void> =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setClockData(data);
+  displayPerfToolsData = (data: PerfToolStruct): void =>
+    this.displayTab<TabPaneCurrentSelection>('current-selection').setPerfToolsData(data);
   displayIrqData = (data: IrqStruct): void =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setIrqData(data);
-  displayStartupData = (data: AppStartupStruct, scrollCallback: Function,rowData:any): void =>
-    this.displayTab<TabPaneCurrentSelection>('current-selection').setStartupData(data, scrollCallback,rowData);
+  displayStartupData = (data: AppStartupStruct, scrollCallback: Function, rowData: any): void =>
+    this.displayTab<TabPaneCurrentSelection>('current-selection').setStartupData(data, scrollCallback, rowData);
   displayAllStartupData = (data: AllAppStartupStruct, scrollCallback: Function): void =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setAllStartupData(data, scrollCallback);
   displayStaticInitData = (data: SoStruct, scrollCallback: Function): void =>
@@ -663,7 +675,8 @@ export class TraceSheet extends BaseElement {
     data: CpuStruct,
     callback: ((data: WakeupBean | null) => void) | undefined = undefined,
     scrollCallback?: (data: CpuStruct) => void
-  ): void => this.displayTab<TabPaneCurrentSelection>('current-selection').setCpuData(data, callback, scrollCallback);
+  ): Promise<void> =>
+    this.displayTab<TabPaneCurrentSelection>('current-selection').setCpuData(data, callback, scrollCallback);
   displayJankData = (
     data: JankStruct,
     callback: ((data: Array<any>) => void) | undefined = undefined,
@@ -722,8 +735,8 @@ export class TraceSheet extends BaseElement {
   displayFreqLimitData = (): CpuFreqLimitsStruct | undefined =>
     (this.displayTab<TabPaneCurrentSelection>('box-freq-limit').data = CpuFreqLimitsStruct.selectCpuFreqLimitsStruct);
 
-  displayFrameAnimationData = (data: FrameAnimationStruct,scrollCallback: Function): Promise<void> =>
-    this.displayTab<TabPaneCurrentSelection>('current-selection').setFrameAnimationData(data,scrollCallback);
+  displayFrameAnimationData = (data: FrameAnimationStruct, scrollCallback: Function): Promise<void> =>
+    this.displayTab<TabPaneCurrentSelection>('current-selection').setFrameAnimationData(data, scrollCallback);
   displayFrameDynamicData = (row: TraceRow<FrameDynamicStruct>, data: FrameDynamicStruct): void =>
     this.displayTab<TabPaneFrameDynamic>('box-frame-dynamic').buildDynamicTable([data], true);
   displayFrameSpacingData = (data: FrameSpacingStruct): void =>
@@ -838,17 +851,21 @@ export class TraceSheet extends BaseElement {
   };
   displaySampleData = (data: SampleStruct, reqProperty: any): void => {
     this.displayTab<TabPaneSampleInstruction>('box-sample-instruction').setSampleInstructionData(data, reqProperty);
-    this.optionsDiv!.style.display = "flex";
-    const select = this.optionsSettingTree!.getCheckdKeys().length === 0 ? ['0'] : this.optionsSettingTree!.getCheckdKeys();
-    this.optionsSettingTree!.treeData = [{key: '0', title: 'instruction', checked: select[0] === '0'}, {key: '1', title: 'cycles', checked: select[0] === '1'}];
-  }
+    this.optionsDiv!.style.display = 'flex';
+    const select =
+      this.optionsSettingTree!.getCheckdKeys().length === 0 ? ['0'] : this.optionsSettingTree!.getCheckdKeys();
+    this.optionsSettingTree!.treeData = [
+      { key: '0', title: 'instruction', checked: select[0] === '0' },
+      { key: '1', title: 'cycles', checked: select[0] === '1' },
+    ];
+  };
 
   displaySystemStatesData = (): void => {
-    let dataCutPane = this.shadowRoot?.querySelector<TabPaneDataCut>("tabpane-datacut");
+    let dataCutPane = this.shadowRoot?.querySelector<TabPaneDataCut>('tabpane-datacut');
     if (dataCutPane) {
       dataCutPane.initTabSheetEl(this);
     }
-    let tblStatesPanel = this.shadowRoot?.querySelector<TabPaneFreqStatesDataCut>("tabpane-states-datacut");
+    let tblStatesPanel = this.shadowRoot?.querySelector<TabPaneFreqStatesDataCut>('tabpane-states-datacut');
     if (tblStatesPanel) {
       tblStatesPanel.initTabSheetEl(this);
     }
@@ -894,8 +911,12 @@ export class TraceSheet extends BaseElement {
   showOptionsBt(selection: SelectionParam | null | undefined): void {
     if (selection && selection.sampleData.length > 0) {
       this.optionsDiv!.style.display = 'flex';
-      const select = this.optionsSettingTree!.getCheckdKeys().length === 0 ? ['0'] : this.optionsSettingTree!.getCheckdKeys();
-      this.optionsSettingTree!.treeData = [{key: '0', title: 'instruction', checked: select[0] === '0'}, {key: '1', title: 'cycles', checked: select[0] === '1'}];
+      const select =
+        this.optionsSettingTree!.getCheckdKeys().length === 0 ? ['0'] : this.optionsSettingTree!.getCheckdKeys();
+      this.optionsSettingTree!.treeData = [
+        { key: '0', title: 'instruction', checked: select[0] === '0' },
+        { key: '1', title: 'cycles', checked: select[0] === '1' },
+      ];
     } else {
       this.optionsDiv!.style.display = 'none';
     }
@@ -1019,7 +1040,7 @@ export class TraceSheet extends BaseElement {
     if (mode === 'hidden') {
       this.selection = undefined;
     }
-    window.publish(window.SmartEvent.UI.ShowBottomTab, { show: show , delta: delta});
+    window.publish(window.SmartEvent.UI.ShowBottomTab, { show: show, delta: delta });
   }
 
   rowClickHandler(e: any): void {
diff --git a/ide/src/trace/component/trace/base/TraceSheetConfig.ts b/ide/src/trace/component/trace/base/TraceSheetConfig.ts
index 024a06fae37b29de057f85ba3741e69e4dd973be..9c851b11bd974fedac10f72498d7bfc1af347589 100644
--- a/ide/src/trace/component/trace/base/TraceSheetConfig.ts
+++ b/ide/src/trace/component/trace/base/TraceSheetConfig.ts
@@ -129,7 +129,6 @@ import { TabPaneSampleInstructionTotalTime } from '../sheet/bpftrace/TabPaneSamp
 import { TabPaneSampleInstructionSelection } from '../sheet/bpftrace/TabPaneSampleInstructionSelection';
 import { TabPaneDataCut } from '../sheet/TabPaneDataCut';
 
-
 export let tabConfig: any = {
   'current-selection': {
     title: 'Current Selection',
@@ -660,28 +659,30 @@ export let tabConfig: any = {
   'tabpane-gpufreq': {
     title: 'Gpufreq Usage',
     type: TabPaneGpufreq,
-    require: (param: SelectionParam) => param.clockMapData.size === 1 && param.clockMapData.has('gpufreq Frequency') === true,
+    require: (param: SelectionParam) =>
+      param.clockMapData.size === 1 && param.clockMapData.has('gpufreq Frequency') === true,
   },
   'tabpane-datacut': {
     title: 'Data Cut',
     type: TabPaneDataCut,
-    require: (param: SelectionParam) => param.threadIds.length > 0 ||
+    require: (param: SelectionParam) =>
+      param.threadIds.length > 0 ||
       (param.clockMapData.size === 1 && param.clockMapData.has('gpufreq Frequency') === true),
   },
   'box-sample-instruction-selection': {
     title: 'Data Selection',
     type: TabPaneSampleInstructionSelection,
-    require: (param: SelectionParam) => param.sampleData.length > 0
+    require: (param: SelectionParam) => param.sampleData.length > 0,
   },
   'box-sample-instruction-distribution-selection': {
     title: 'Data Distribution',
     type: TabPaneSampleInstructionDistributions,
-    require: (param: SelectionParam) => param.sampleData.length > 0
+    require: (param: SelectionParam) => param.sampleData.length > 0,
   },
   'box-sample-instruction-totaltime-selection': {
     title: 'Total Duration',
     type: TabPaneSampleInstructionTotalTime,
-    require: (param: SelectionParam) => param.sampleData.length > 0
+    require: (param: SelectionParam) => param.sampleData.length > 0,
   },
   'box-sample-instruction': {
     title: 'Data Flow',
diff --git a/ide/src/trace/component/trace/base/Utils.ts b/ide/src/trace/component/trace/base/Utils.ts
index 2633a95ee4625644b9ba3e2d8e02f94449fc6cc7..bdce3b4b119fef0959434937d526005f94a2bc1b 100644
--- a/ide/src/trace/component/trace/base/Utils.ts
+++ b/ide/src/trace/component/trace/base/Utils.ts
@@ -15,9 +15,10 @@
 
 import { SelectionParam } from '../../../bean/BoxSelection';
 import { procedurePool } from '../../../database/Procedure';
-import {queryNativeHookResponseTypes} from "../../../database/sql/NativeHook.sql";
+import { queryNativeHookResponseTypes } from '../../../database/sql/NativeHook.sql';
 
 export class Utils {
+  static isTransformed: boolean = false;
   private static statusMap: Map<string, string> = new Map<string, string>();
   private static instance: Utils | null = null;
   static THREAD_MAP: Map<number, string> = new Map<number, string>();
diff --git a/ide/src/trace/component/trace/search/Search.html.ts b/ide/src/trace/component/trace/search/Search.html.ts
index 1af33f8aef37682b2c7254ec3517b987f016c46c..33705e584afc07e8beb9267dc5323ad70e5db7f2 100644
--- a/ide/src/trace/component/trace/search/Search.html.ts
+++ b/ide/src/trace/component/trace/search/Search.html.ts
@@ -151,4 +151,4 @@ export const SearchHtml = `
         <div class="search-history">
               <ul class="search-history-list"></ul>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/trace/search/Search.ts b/ide/src/trace/component/trace/search/Search.ts
index d32e2a64d143bba84eae7cda870b526e8a1a99be..37df9d97c2e14856ea6524668e5bb5cfeaf90588 100644
--- a/ide/src/trace/component/trace/search/Search.ts
+++ b/ide/src/trace/component/trace/search/Search.ts
@@ -201,7 +201,7 @@ export class LitSearch extends BaseElement {
   }
 
   private searchKeyupListener(e: KeyboardEvent) {
-    if (e.code === 'Enter') {
+    if (e.code === 'Enter' || e.code === 'NumpadEnter') {
       this.updateSearchList(this.search!.value);
       if (e.shiftKey) {
         this.dispatchEvent(
diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrent.html.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrent.html.ts
index 3aae22cbdd887dd41cbb9833259adba2d57737f4..078742cc679a86cf721db4576e1c522293295476 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrent.html.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrent.html.ts
@@ -62,4 +62,4 @@ export const TabPaneCurrentHtml = `
                 </template>
             </lit-table-column>
         </lit-table>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.html.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.html.ts
index 7cb5b4655b33eae04d9c65263326c45216195b94..f891ec7c401d78e1c66e546530663af2c4f582e3 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.html.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.html.ts
@@ -109,4 +109,4 @@ export const TabPaneCurrentSelectionHtml = `
             </div>
         </div>
         </div>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
index f6706af81ddc99878d5498bfb0bc004ee0862b72..03c8542fc1a865ff2a3e39dc919286810949a761 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
@@ -35,16 +35,15 @@ import { SpSystemTrace } from '../../SpSystemTrace';
 import { AppStartupStruct } from '../../../database/ui-worker/ProcedureWorkerAppStartup';
 import { SoStruct } from '../../../database/ui-worker/ProcedureWorkerSoInit';
 import { type SelectionParam } from '../../../bean/BoxSelection';
-import {
-  type FrameAnimationStruct
-} from '../../../database/ui-worker/ProcedureWorkerFrameAnimation';
+import { type FrameAnimationStruct } from '../../../database/ui-worker/ProcedureWorkerFrameAnimation';
 import {
   queryBinderByArgsId,
   queryBinderBySliceId,
   queryFlowsData,
   queryPrecedingData,
   queryThreadByItid,
-  queryFpsSourceList
+  queryFpsSourceList,
+  queryStateFreqList,
 } from '../../../database/sql/SqlLite.sql';
 import {
   queryBinderArgsByArgset,
@@ -52,18 +51,27 @@ import {
   queryThreadNearData,
   queryThreadStateArgs,
   queryThreadWakeUp,
-  queryThreadWakeUpFrom
+  queryThreadWakeUpFrom,
 } from '../../../database/sql/ProcessThread.sql';
 import { queryGpuDur } from '../../../database/sql/Gpu.sql';
 import { queryWakeupListPriority } from '../../../database/sql/Cpu.sql';
 import { TabPaneCurrentSelectionHtml } from './TabPaneCurrentSelection.html';
-import {queryRealTime} from "../../../database/sql/Clock.sql";
+import { queryRealTime } from '../../../database/sql/Clock.sql';
+import { PerfToolStruct } from '../../../database/ui-worker/ProcedureWorkerPerfTool';
 
 const INPUT_WORD =
   'This is the interval from when the task became eligible to run \n(e.g.because of notifying a wait queue it was a suspended on) to\n when it started running.';
 
-export function getTimeString(ns: number): string {
+const CLOCK_STARTTIME_ABSALUTED_ID: string = 'clockStartTimeAbsaluteId';
+const CLOCK_TRANSF_BTN_ID: string = 'clockTransfBtnId';
+const CPU_STARTTIME_ABSALUTED_ID: string = 'cpuStartTimeAbsaluteId';
+const CPU_TRANSF_BTN_ID: string = 'cpuTransfBtnId';
+const THREAD_STARTTIME_ABSALUTED_ID: string = 'threadStartTimeAbsaluteId';
+const THREAD_TRANSF_BTN_ID: string = 'threadTransfBtnId';
+const FUN_STARTTIME_ABSALUTED_ID: string = 'funStartTimeAbsaluteId';
+const FUN_TRANSF_BTN_ID: string = 'funTransfBtnId';
 
+export function getTimeString(ns: number): string {
   if (ns === 0) {
     return '0';
   }
@@ -75,7 +83,6 @@ export function getTimeString(ns: number): string {
   let microsecond1 = 1_000; // 1 microsecond
   let res = '';
   if (currentTimeNs >= hour1) {
-
     res += Math.floor(currentTimeNs / hour1) + 'h ';
     currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / hour1) * hour1;
   }
@@ -103,7 +110,6 @@ export function getTimeString(ns: number): string {
 
 @element('tabpane-current-selection')
 export class TabPaneCurrentSelection extends BaseElement {
-  static isTransformed : boolean = false;
   weakUpBean: WakeupBean | null | undefined;
   selectWakeupBean: any;
   private currentSelectionTbl: LitTable | null | undefined;
@@ -127,11 +133,65 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  setCpuData(
+  /**
+   * 创建StartTime的Dom节点
+   * @param selectTable面板的dom树对象
+   * @param startTs 开始时间
+   * @param transfBtnId 转换按钮id
+   * @param startTimeAbsaluteId 开始时间的id
+   */
+  createStartTimeNode(list: any[], startTs: number, transfBtnId: string, startTimeAbsaluteId: string): void {
+    let timeStr: string = '';
+    let startTimeValue: string = '';
+    let startTimeAbsolute = startTs + (window as any).recordStartNS;
+    if (this.realTime > 0) {
+      if (Utils.isTransformed) {
+        timeStr = this.getRealTimeStr(startTimeAbsolute);
+      } else {
+        timeStr = startTimeAbsolute / 1000000000 + 's';
+      }
+      startTimeValue = `<div style="white-space: nowrap;display: flex;align-items: center">
+                            <div id="${startTimeAbsaluteId}" style="white-space:pre-wrap" >${timeStr}</div>                             
+                            <lit-icon id="${transfBtnId}" class="temp-icon" title="Convert to realtime" name="restore" size="30" 
+                                  style="position: relative; top: 5px; left: 10px;"></lit-icon>
+                        </div>`;
+    } else {
+      startTimeValue = startTimeAbsolute / 1000000000 + 's';
+    }
+    list.push({
+      name: 'StartTime(Absolute)',
+      value: startTimeValue,
+    });
+  }
+
+  /**
+   * 给转换按钮添加点击事件
+   * @param startTimeAbsolute 开始时间
+   * @param transfBtnId 转换按钮id
+   * @param startTimeAbsaluteId 开始时间ID
+   */
+  addClickToTransfBtn(startTimeAbsolute: number, transfBtnId: string, startTimeAbsaluteId: string): void {
+    let transfBtn = this.currentSelectionTbl?.shadowRoot?.querySelector(`#${transfBtnId}`);
+    transfBtn?.addEventListener('click', () => {
+      let startTimeAbsalute = this.currentSelectionTbl?.shadowRoot?.querySelector(`#${startTimeAbsaluteId}`);
+      if (startTimeAbsalute) {
+        if (Utils.isTransformed) {
+          startTimeAbsalute!.innerHTML = startTimeAbsolute / 1000000000 + 's';
+          Utils.isTransformed = false;
+        } else {
+          startTimeAbsalute!.innerHTML = this.getRealTimeStr(startTimeAbsolute);
+          Utils.isTransformed = true;
+        }
+      }
+    });
+  }
+
+  async setCpuData(
     data: CpuStruct,
     callback: ((data: WakeupBean | null) => void) | undefined = undefined,
     scrollCallback?: (data: CpuStruct) => void
-  ): void {
+  ): Promise<void> {
+    await this.setRealTime();
     this.setTableHeight('650px');
     let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
     if (leftTitle) {
@@ -151,6 +211,9 @@ export class TabPaneCurrentSelection extends BaseElement {
         });
       }
       this.currentSelectionTbl!.dataSource = list;
+      let startTimeAbsolute = (data.startTime || 0) + (window as any).recordStartNS;
+      this.addClickToTransfBtn(startTimeAbsolute, CPU_TRANSF_BTN_ID, CPU_STARTTIME_ABSALUTED_ID);
+
       let rightArea: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#table-right');
       let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
       let rightButton: HTMLElement | null | undefined = this?.shadowRoot
@@ -189,8 +252,12 @@ export class TabPaneCurrentSelection extends BaseElement {
     });
   }
 
-  private updateRightTitleUI(rightArea: HTMLElement, rightTitle: HTMLElement, rightButton: HTMLElement,
-    rightStar: HTMLElement) {
+  private updateRightTitleUI(
+    rightArea: HTMLElement,
+    rightTitle: HTMLElement,
+    rightButton: HTMLElement,
+    rightStar: HTMLElement
+  ) {
     if (rightArea !== null && rightArea) {
       rightArea.style.visibility = 'visible';
     }
@@ -202,8 +269,12 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  private handleNullBeanUI(rightArea: HTMLElement, rightTitle: HTMLElement, rightButton: HTMLElement,
-    rightStar: HTMLElement) {
+  private handleNullBeanUI(
+    rightArea: HTMLElement,
+    rightTitle: HTMLElement,
+    rightButton: HTMLElement,
+    rightStar: HTMLElement
+  ) {
     this.weakUpBean = null;
     if (rightArea !== null && rightArea) {
       rightArea.style.visibility = 'hidden';
@@ -247,21 +318,18 @@ export class TabPaneCurrentSelection extends BaseElement {
 </div>`,
       });
     }
-    list.push({ name: 'StartTime(Relative)', value: getTimeString(data.startTime || 0), });
-    list.push({
-      name: 'StartTime(Absolute)',
-      value: ((data.startTime || 0) + (window as any).recordStartNS) / 1000000000 + 's',
-    });
+
+    list.push({ name: 'StartTime(Relative)', value: getTimeString(data.startTime || 0) });
+    this.createStartTimeNode(list, data.startTime || 0, CPU_TRANSF_BTN_ID, CPU_STARTTIME_ABSALUTED_ID);
     list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
     list.push({ name: 'Prio', value: data.priority || 0 });
     list.push({ name: 'End State', value: state });
   }
-
-  async setFunctionData(data: FuncStruct, scrollCallback: Function): Promise<void> {
-    //方法信息     
-    await queryRealTime().then((result) => {
+  // 设置真实时间和启动时间的值
+  private async setRealTime(): Promise<any> {
+    return queryRealTime().then((result) => {
       if (result && result.length > 0) {
-        result.forEach(item => {
+        result.forEach((item) => {
           if (item.name === 'realtime') {
             this.realTime = item.ts;
           } else {
@@ -269,8 +337,12 @@ export class TabPaneCurrentSelection extends BaseElement {
           }
         });
       }
-    }); 
+    });
+  }
 
+  async setFunctionData(data: FuncStruct, scrollCallback: Function): Promise<void> {
+    //方法信息
+    await this.setRealTime();
     this.tabCurrentSelectionInit('Slice Details');
     let list: any[] = [];
     let name = this.transferString(data.funName ?? '');
@@ -288,64 +360,33 @@ export class TabPaneCurrentSelection extends BaseElement {
     } else {
       this.setTableHeight('auto');
       list.push({ name: 'Name', value: name });
-      let timeStr: string = '';
-      let startTimeValue: string = '';
-      let startTimeAbsolute = (data.startTs || 0) + (window as any).recordStartNS;
-
-      if (this.realTime > 0) {
-        if (TabPaneCurrentSelection.isTransformed) {
-          timeStr = this.getRealTimeStr(startTimeAbsolute);
-        } else {
-          timeStr = startTimeAbsolute / 1000000000 + 's';
-        }
-        startTimeValue = `<div style="white-space: nowrap;display: flex;align-items: center">
-                              <div id="startTimeAbsalute" style="white-space:pre-wrap" >${timeStr}</div>                             
-                              <lit-icon id="transfBtn" class="temp-icon" title="Convert to realtime" name="restore" size="30" 
-                                    style="position: relative; top: 5px; left: 10px;"></lit-icon>
-                          </div>`;
-      } else {
-        startTimeValue = startTimeAbsolute / 1000000000 + 's';
-      }
       list.push({
         name: 'StartTime(Relative)',
         value: getTimeString(data.startTs || 0),
       });
-      list.push({
-        name: 'StartTime(Absolute)',
-        value: startTimeValue,
-      });
+      this.createStartTimeNode(list, data.startTs || 0, FUN_TRANSF_BTN_ID, FUN_STARTTIME_ABSALUTED_ID);
       list.push({
         name: 'Duration',
         value: getTimeString(data.dur || 0),
       });
       list.push({ name: 'depth', value: data.depth });
       this.currentSelectionTbl!.dataSource = list;
-      let transfBtn = this.currentSelectionTbl?.shadowRoot?.querySelector('#transfBtn');
-      transfBtn?.addEventListener('click', () => {
-        let startTimeAbsalute = this.currentSelectionTbl?.shadowRoot?.querySelector('#startTimeAbsalute');
-        if (startTimeAbsalute) {
-          if (TabPaneCurrentSelection.isTransformed) {
-            startTimeAbsalute!.innerHTML = startTimeAbsolute / 1000000000 + 's';
-            TabPaneCurrentSelection.isTransformed = false;
-          } else {
-            startTimeAbsalute!.innerHTML = this.getRealTimeStr(startTimeAbsolute);
-            TabPaneCurrentSelection.isTransformed = true;
-          }
-        }
-      });
+      let startTimeAbsolute = (data.startTs || 0) + (window as any).recordStartNS;
+      this.addClickToTransfBtn(startTimeAbsolute, FUN_TRANSF_BTN_ID, FUN_STARTTIME_ABSALUTED_ID);
     }
   }
 
   // 计算真实时间
-  private getRealTimeStr(startTs: number): string { 
-    let time = (startTs || 0) + (window as any).recordStartNS - this.bootTime + this.realTime;    
-    const formateDateStr = this.getDate(parseInt(time.toString().substring(0, 13)));    
+  private getRealTimeStr(startTs: number): string {
+    let time = (startTs || 0) + (window as any).recordStartNS - this.bootTime + this.realTime;
+    const formateDateStr =
+      this.getDate(parseInt(time.toString().substring(0, 13))) + '.' + time.toString().substring(10);
     return formateDateStr;
   }
 
   // 格式化时间戳为字符串格式 yyyy/mm/dd hh:mi:ss
-  private getDate(timestamp: number): string { 
-    let date = new Date(timestamp);   
+  private getDate(timestamp: number): string {
+    let date = new Date(timestamp);
     let gmt = date.toLocaleString();
     return gmt;
   }
@@ -477,7 +518,8 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  setClockData(data: ClockStruct): void {
+  async setClockData(data: ClockStruct): Promise<void> {
+    await this.setRealTime();
     this.setTableHeight('auto');
     //时钟信息
     this.tabCurrentSelectionInit('Counter Details');
@@ -486,13 +528,37 @@ export class TabPaneCurrentSelection extends BaseElement {
       name: 'StartTime(Relative)',
       value: getTimeString(data.startNS || 0),
     });
+    this.createStartTimeNode(list, data.startNS || 0, CLOCK_TRANSF_BTN_ID, CLOCK_STARTTIME_ABSALUTED_ID);
+    list.push({
+      name: 'Value',
+      value: ColorUtils.formatNumberComma(data.value || 0),
+    });
+    list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
+    this.currentSelectionTbl!.dataSource = list;
+    let startTimeAbsolute = (data.startNS || 0) + (window as any).recordStartNS;
+    this.addClickToTransfBtn(startTimeAbsolute, CLOCK_TRANSF_BTN_ID, CLOCK_STARTTIME_ABSALUTED_ID);
+  }
+
+  setPerfToolsData(data: PerfToolStruct): void {
+    this.setTableHeight('auto');
+    //Perf Tools info
+    this.tabCurrentSelectionInit('Slice Details');
+    let list: any[] = [];
+    list.push({
+      name: 'Name',
+      value: data.name,
+    });
+    list.push({
+      name: 'StartTime(Relative)',
+      value: getTimeString(data.startNS || 0),
+    });
     list.push({
       name: 'StartTime(Absolute)',
       value: ((data.startNS || 0) + (window as any).recordStartNS) / 1000000000 + 's',
     });
     list.push({
       name: 'Value',
-      value: ColorUtils.formatNumberComma(data.value || 0),
+      value: Number(data.count),
     });
     list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
     this.currentSelectionTbl!.dataSource = list;
@@ -553,13 +619,14 @@ export class TabPaneCurrentSelection extends BaseElement {
     });
   }
 
-  setThreadData(
+  async setThreadData(
     data: ThreadStruct,
     scrollCallback: ((d: any) => void) | undefined,
     scrollWakeUp: (d: any) => void | undefined,
-    callback?: ((data: Array<any>, str: string) => void)
-  ): void {
+    callback?: (data: Array<any>, str: string) => void
+  ): Promise<void> {
     //线程信息
+    await this.setRealTime();
     this.setTableHeight('550px');
     this.initCanvas();
     let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
@@ -579,29 +646,31 @@ export class TabPaneCurrentSelection extends BaseElement {
   private sortByNearData(nearData: any[], data: ThreadStruct, list: any[]): any[] {
     let preData: any = undefined;
     let nextData: any = undefined;
-    nearData.sort((near1, near2) => near1.startTime - near2.startTime).forEach((near) => {
-      if (near.itid === data.id) {
-        if (near.startTime < data.startTime!) {
-          preData = near;
-          list.push({
-            name: 'Previous State',
-            value: `<div style="white-space: nowrap;display: flex;align-items: center">
+    nearData
+      .sort((near1, near2) => near1.startTime - near2.startTime)
+      .forEach((near) => {
+        if (near.itid === data.id) {
+          if (near.startTime < data.startTime!) {
+            preData = near;
+            list.push({
+              name: 'Previous State',
+              value: `<div style="white-space: nowrap;display: flex;align-items: center">
               <div style="white-space:pre-wrap">${Utils.getEndState(near.state)}</div>
               <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="previous-state-click" name="select" color="#7fa1e7" size="20"></lit-icon>
               </div>`,
-          });
-        } else {
-          nextData = near;
-          list.push({
-            name: 'Next State',
-            value: `<div style="white-space: nowrap;display: flex;align-items: center">
+            });
+          } else {
+            nextData = near;
+            list.push({
+              name: 'Next State',
+              value: `<div style="white-space: nowrap;display: flex;align-items: center">
               <div style="white-space:pre-wrap">${Utils.getEndState(near.state)}</div>
               <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="next-state-click" name="select" color="#7fa1e7" size="20"></lit-icon>
               </div>`,
-          });
+            });
+          }
         }
-      }
-    });
+      });
     return [preData, nextData];
   }
 
@@ -635,7 +704,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     list: any[],
     jankJumperList: ThreadTreeNode[],
     callback: ((data: Array<any>, str: string) => void) | undefined,
-    scrollWakeUp: (d: any) => (void | undefined),
+    scrollWakeUp: (d: any) => void | undefined,
     scrollCallback: ((d: any) => void) | undefined
   ): void {
     Promise.all([
@@ -655,6 +724,8 @@ export class TabPaneCurrentSelection extends BaseElement {
         });
       }
       this.currentSelectionTbl!.dataSource = list;
+      let startTimeAbsolute = (data.startTime || 0) + (window as any).recordStartNS;
+      this.addClickToTransfBtn(startTimeAbsolute, THREAD_TRANSF_BTN_ID, THREAD_STARTTIME_ABSALUTED_ID);
       let timeLineNode = new ThreadTreeNode(data.tid!, data.pid!, data.startTime!);
       jankJumperList.push(timeLineNode);
       if (callback) {
@@ -669,7 +740,7 @@ export class TabPaneCurrentSelection extends BaseElement {
   private wakeupClickHandler(
     wakeUps: WakeupBean[],
     fromBean: WakeupBean | undefined,
-    scrollWakeUp: (d: any) => (void | undefined)
+    scrollWakeUp: (d: any) => void | undefined
   ): void {
     this.currentSelectionTbl?.shadowRoot?.querySelector('#wakeup-from')?.addEventListener('click', () => {
       //点击跳转，唤醒和被唤醒的 线程
@@ -713,7 +784,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     preData: any,
     nextData: any,
     data: ThreadStruct,
-    scrollWakeUp: (d: any) => (void | undefined),
+    scrollWakeUp: (d: any) => void | undefined,
     scrollCallback: ((d: any) => void) | undefined
   ): void {
     this.currentSelectionTbl?.shadowRoot?.querySelector('#next-state-click')?.addEventListener('click', () => {
@@ -754,15 +825,12 @@ export class TabPaneCurrentSelection extends BaseElement {
     });
   }
 
-  private prepareThreadInfo(list: any[], data: ThreadStruct): void {
+  private async prepareThreadInfo(list: any[], data: ThreadStruct): Promise<void> {
     list.push({
       name: 'StartTime(Relative)',
       value: getTimeString(data.startTime || 0),
     });
-    list.push({
-      name: 'StartTime(Absolute)',
-      value: ((data.startTime || 0) + (window as any).recordStartNS) / 1000000000 + 's',
-    });
+    this.createStartTimeNode(list, data.startTime || 0, THREAD_TRANSF_BTN_ID, THREAD_STARTTIME_ABSALUTED_ID);
     list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
     let state;
     if (data.state) {
@@ -784,6 +852,26 @@ export class TabPaneCurrentSelection extends BaseElement {
     } else {
       list.push({ name: 'State', value: `${state}` });
     }
+    if (state.includes('Running')) {
+      let startTime: number = data.startTime || 0;
+      let endTime: number = (data.startTime || 0) + (data.dur || 0);
+      let freqList: Array<any> = [];
+      let str = '';
+      freqList = await queryStateFreqList(startTime, endTime, data.cpu || 0);
+      freqList.forEach((it) => {
+        if (it.startTime < startTime! && it.endTime > endTime!) {
+          it.stateDur = data.dur;
+        } else if (it.startTime < startTime! && startTime! < it.endTime && it.endTime < endTime!) {
+          it.stateDur = it.endTime - startTime!;
+        } else if (it.startTime > startTime! && startTime! < it.endTime && it.endTime < endTime!) {
+          it.stateDur = it.dur;
+        } else if (it.startTime > startTime! && endTime! > it.startTime && it.endTime > endTime!) {
+          it.stateDur = endTime! - it.startTime;
+        }
+        str += '[' + it.value + ': ' + (it.stateDur || 0) / 1000 + ']' + ',';
+      });
+      list.push({ name: 'Freq [KHz,μs]', value: str.substring(0, str.length - 1) });
+    }
     let slice = Utils.SCHED_SLICE_MAP.get(`${data.id}-${data.startTime}`);
     if (slice) {
       list.push({ name: 'Prio', value: `${slice.priority}` });
@@ -820,8 +908,12 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  private handleTypeJank(data: JankStruct, list: any[], scrollCallback: ((d: any) => void) | undefined,
-    callback: ((data: Array<any>) => void) | undefined): void {
+  private handleTypeJank(
+    data: JankStruct,
+    list: any[],
+    scrollCallback: ((d: any) => void) | undefined,
+    callback: ((data: Array<any>) => void) | undefined
+  ): void {
     this.setJankType(data, list);
     let jankJumperList = new Array<JankTreeNode>();
     if (data.frame_type === 'render_service') {
@@ -838,8 +930,13 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  private handleFrameTimeJank(data: JankStruct, list: any[], jankJumperList: JankTreeNode[],
-    scrollCallback: ((d: any) => void) | undefined, callback: ((data: Array<any>) => void) | undefined): void {
+  private handleFrameTimeJank(
+    data: JankStruct,
+    list: any[],
+    jankJumperList: JankTreeNode[],
+    scrollCallback: ((d: any) => void) | undefined,
+    callback: ((data: Array<any>) => void) | undefined
+  ): void {
     queryGpuDur(data.id!).then((it) => {
       if (it.length > 0) {
         list.push({
@@ -925,8 +1022,13 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  private handleAppJank(list: any[], data: JankStruct, jankJumperList: JankTreeNode[],
-    scrollCallback: ((d: any) => void) | undefined, callback: ((data: Array<any>) => void) | undefined): void {
+  private handleAppJank(
+    list: any[],
+    data: JankStruct,
+    jankJumperList: JankTreeNode[],
+    scrollCallback: ((d: any) => void) | undefined,
+    callback: ((data: Array<any>) => void) | undefined
+  ): void {
     list.push({
       name: 'FrameTimeLine flows',
       value: '',
@@ -972,8 +1074,13 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
-  private handleRenderServiceJank(data: JankStruct, list: any[], jankJumperList: JankTreeNode[],
-    scrollCallback: ((d: any) => void) | undefined, callback: ((data: Array<any>) => void) | undefined): void {
+  private handleRenderServiceJank(
+    data: JankStruct,
+    list: any[],
+    jankJumperList: JankTreeNode[],
+    scrollCallback: ((d: any) => void) | undefined,
+    callback: ((data: Array<any>) => void) | undefined
+  ): void {
     if (data.src_slice) {
       queryFlowsData(data.src_slice!.split(',')).then((it) => {
         if (it.length > 0) {
@@ -1096,12 +1203,31 @@ export class TabPaneCurrentSelection extends BaseElement {
       });
     }
     list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
-    rowData.forEach((item: any, index: number) => {
+    let sortedArray = rowData.slice().sort(function (a: { startTs: number }, b: { startTs: number }) {
+      return a.startTs - b.startTs;
+    });
+    sortedArray.forEach((item: any, index: number) => {
       if (item.startName === data.startName) {
-        list.push({ name: 'StartSlice', value: index === 0 ? 'NULL' : `${AppStartupStruct.getStartupName(rowData[index - 1].startName)}     ${getTimeString(rowData[index - 1].startTs + rowData[index - 1].dur)}` });
-        list.push({ name: 'EndSlice', value: index === rowData.length - 1 ? 'NULL' : `${AppStartupStruct.getStartupName(rowData[index + 1].startName)}      ${getTimeString(rowData[index + 1].startTs)}` });
+        list.push({
+          name: 'StartSlice',
+          value:
+            index === 0
+              ? 'NULL'
+              : `${AppStartupStruct.getStartupName(sortedArray[index - 1].startName)}     ${getTimeString(
+                  sortedArray[index - 1].startTs + sortedArray[index - 1].dur
+                )}`,
+        });
+        list.push({
+          name: 'EndSlice',
+          value:
+            index === sortedArray.length - 1
+              ? 'NULL'
+              : `${AppStartupStruct.getStartupName(sortedArray[index + 1].startName)}      ${getTimeString(
+                  sortedArray[index + 1].startTs
+                )}`,
+        });
       }
-    })
+    });
     this.currentSelectionTbl!.dataSource = list;
     this.attachScrollHandlers(data, scrollCallback);
   }
@@ -1137,7 +1263,7 @@ export class TabPaneCurrentSelection extends BaseElement {
             tid: number;
             dur: number;
             name: string;
-            depth: number
+            depth: number;
           } = result[0];
           scrollCallback({
             pid: pt.pid,
@@ -1209,7 +1335,7 @@ export class TabPaneCurrentSelection extends BaseElement {
               tid: number;
               dur: number;
               name: string;
-              depth: number
+              depth: number;
             } = result[0];
             scrollCallback({
               pid: pt.pid,
@@ -1240,7 +1366,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     });
     list.push({
       name: 'End time(Relative)',
-      value: `${Utils.getTimeString(dataTs + (data.dur || 0))}`
+      value: `${Utils.getTimeString(dataTs + (data.dur || 0))}`,
     });
     list.push({
       name: 'End time(Absolute)',
@@ -1253,10 +1379,12 @@ export class TabPaneCurrentSelection extends BaseElement {
         if (frameFpsMessage[1] !== '0') {
           if (this.isFpsAvailable) {
             list.push({
-              name: 'FPS', value: `<div style="white-space: nowrap;display: flex;align-items: center">
+              name: 'FPS',
+              value: `<div style="white-space: nowrap;display: flex;align-items: center">
             <div style="white-space:pre-wrap">${frameFpsMessage[1]}</div>
             <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="fps-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
-            </div>` });
+            </div>`,
+            });
           } else {
             list.push({ name: 'FPS', value: `${frameFpsMessage[1]}` });
           }
@@ -1284,7 +1412,7 @@ export class TabPaneCurrentSelection extends BaseElement {
             name: string;
             ts: number;
             dur: number;
-            depth: number
+            depth: number;
           } = result[0];
           scrollCallback({
             pid: pt.tid,
@@ -1300,7 +1428,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           this.isFpsAvailable = false;
         }
       });
-    })
+    });
   }
 
   private setJankType(data: JankStruct, list: any[]): void {
@@ -1545,8 +1673,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     this.currentSelectionTbl = this.shadowRoot?.querySelector<LitTable>('#selectionTbl');
     this.wakeupListTbl = this.shadowRoot?.querySelector<LitTable>('#wakeupListTbl');
     this.scrollView = this.shadowRoot?.querySelector<HTMLDivElement>('#scroll_view');
-    this.currentSelectionTbl?.addEventListener('column-click', (ev: any) => {
-    });
+    this.currentSelectionTbl?.addEventListener('column-click', (ev: any) => {});
     window.subscribe(window.SmartEvent.UI.WakeupList, (data: Array<WakeupBean>) => this.showWakeupListTableData(data));
   }
 
diff --git a/ide/src/trace/component/trace/sheet/TabPaneDataCut.ts b/ide/src/trace/component/trace/sheet/TabPaneDataCut.ts
index b11208efe4c30426a001adada430642350f80628..798b777cc8c97c17ba2d35c04fe78280f082229b 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneDataCut.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneDataCut.ts
@@ -27,7 +27,6 @@ import { TraceSheet } from '../base/TraceSheet';
 
 @element('tabpane-datacut')
 export class TabPaneDataCut extends BaseElement {
-
   private currentSelection: SelectionParam | undefined;
   private tabSelector: LitSelect | undefined | null;
   private tabContainer: HTMLDivElement | undefined | null;
@@ -92,24 +91,29 @@ export class TabPaneDataCut extends BaseElement {
   initTabSelectorOptions(): void {
     let options = [];
     if (this.currentSelection!.threadIds.length > 0) {
-      options.push(...[
-        {
-          name: 'Sched Switch'
-        },
-        {
-          name: 'Thread Binder'
-        },
-        {
-          name: 'Cpu Freq'
-        },
-        {
-          name: 'Thread States'
-        },
-      ]);
+      options.push(
+        ...[
+          {
+            name: 'Sched Switch',
+          },
+          {
+            name: 'Thread Binder',
+          },
+          {
+            name: 'Cpu Freq',
+          },
+          {
+            name: 'Thread States',
+          },
+        ]
+      );
     }
-    if (this.currentSelection!.clockMapData.size === 1 && this.currentSelection!.clockMapData.has('gpufreq Frequency') === true) {
+    if (
+      this.currentSelection!.clockMapData.size === 1 &&
+      this.currentSelection!.clockMapData.has('gpufreq Frequency') === true
+    ) {
       options.push({
-        name: 'Gpu Freq'
+        name: 'Gpu Freq',
       });
     }
     this.currentTabKey = options[0].name;
@@ -124,7 +128,7 @@ export class TabPaneDataCut extends BaseElement {
     this.tabSelector!.onchange = () => {
       this.currentTabKey = this.tabSelector!.value;
       this.showTabPane();
-    }
+    };
   }
 
   connectedCallback() {
diff --git a/ide/src/trace/component/trace/sheet/TabPaneFilter.html.ts b/ide/src/trace/component/trace/sheet/TabPaneFilter.html.ts
index ce4dc3658a3352b1820105a1fffd873b9c2a9d9a..fd517a1c0316d923fec0ac6defe16918dc48600f 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneFilter.html.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneFilter.html.ts
@@ -321,7 +321,7 @@ margin-left: 15px;
     <lit-icon name="swap" class="spacing" size="16"></lit-icon>
     <div style="margin-left: 5px" class="describe statistics-name">Statistics by Thread</div>
 </div>
-`
+`;
 export const TabPaneFilterHtml = (input: string): string => {
   return replacePlaceholders(html, input);
-}
+};
diff --git a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
index b585ce23306df004f83d46b6e46bc0f1ec74d594..911f74dc112d5e9ddca01a179449f2c162787588 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
@@ -21,7 +21,7 @@ import { LitIcon } from '../../../../base-ui/icon/LitIcon';
 import '../../../../base-ui/popover/LitPopoverV';
 import { LitCheckBox } from '../../../../base-ui/checkbox/LitCheckBox';
 import { LitSelect } from '../../../../base-ui/select/LitSelect';
-import {queryTransferList} from "../../../database/sql/Perf.sql";
+import { queryTransferList } from '../../../database/sql/Perf.sql';
 import { TabPaneFilterHtml } from './TabPaneFilter.html';
 
 export interface FilterData {
@@ -196,7 +196,7 @@ export class TabPaneFilter extends BaseElement {
       if (this.getFilter) {
         this.getFilter(this.filterData('mark', { mark: true }));
       }
-    }
+    };
     this.filterInputEL?.addEventListener('keyup', (event: any): void => {
       if (event.keyCode === 13 && this.getFilter) {
         this.getFilter(
@@ -383,7 +383,11 @@ export class TabPaneFilter extends BaseElement {
     return thtml;
   }
 
-  private getSelectSecondListHtml(secondTitle: string, secondList: Array<any> | null | undefined, html: string): string {
+  private getSelectSecondListHtml(
+    secondTitle: string,
+    secondList: Array<any> | null | undefined,
+    html: string
+  ): string {
     if (secondList) {
       html += `<lit-select default-value="" id="second-select" class="spacing" placeholder="please choose">`;
       if (secondTitle != '') {
@@ -411,7 +415,7 @@ export class TabPaneFilter extends BaseElement {
     return html;
   }
 
-  private initSelectElListener(): void{
+  private initSelectElListener(): void {
     this.firstSelectEL!.onchange = (e): void => {
       if (this.getFilter) {
         this.getFilter(this.filterData('firstSelect'));
@@ -439,13 +443,13 @@ export class TabPaneFilter extends BaseElement {
     }
   }
 
-  private treeCheckClickSwitch(idx: number, check: boolean, row: NodeListOf<Element>): void{
+  private treeCheckClickSwitch(idx: number, check: boolean, row: NodeListOf<Element>): void {
     let checkList = [];
     for (let index = 0; index < 5; index++) {
       if (idx === index) {
         checkList.push(check);
       } else {
-        checkList.push(row[index].querySelector<LitCheckBox>('lit-check-box')!.checked)
+        checkList.push(row[index].querySelector<LitCheckBox>('lit-check-box')!.checked);
       }
     }
     this.getCallTree!({
diff --git a/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts b/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts
index 6af0f2fda40798796788d663e09fcf52de237590..1a612508dd29a769601bca72345fdd3615588ba5 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts
@@ -20,8 +20,7 @@ import { TabPaneJsMemoryFilterHtml } from './TabPaneJsMemoryFilter.html';
 
 @element('tab-pane-js-memory-filter')
 export class TabPaneJsMemoryFilter extends BaseElement {
-  initElements(): void {
-  }
+  initElements(): void {}
 
   initHtml(): string {
     return TabPaneJsMemoryFilterHtml;
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts
index 95c769efcbe1df86e7f4b8373b7fb19af2fd026a..59cded62b3a0d7a67505ccb2a409bafed4eb97b5 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts
@@ -142,26 +142,29 @@ export class TabPaneCpuAbility extends BaseElement {
         `;
   }
 
-  getPropertyByType = (property: string, type: string) => (data: SystemCpuSummary): number | string => {
-    switch (type) {
-      case 'number':
-        // @ts-ignore
-        return parseFloat(data[property]);
-      case 'durationStr':
-        return data.duration;
-      case 'totalLoadStr':
-        return data.totalLoad;
-      case 'userLoadStr':
-        return data.userLoad;
-      case 'systemLoadStr':
-        return data.systemLoad;
-      default:
-        // @ts-ignore
-        return data[property];
-    }
-  };
+  getPropertyByType =
+    (property: string, type: string) =>
+    (data: SystemCpuSummary): number | string => {
+      switch (type) {
+        case 'number':
+          // @ts-ignore
+          return parseFloat(data[property]);
+        case 'durationStr':
+          return data.duration;
+        case 'totalLoadStr':
+          return data.totalLoad;
+        case 'userLoadStr':
+          return data.userLoad;
+        case 'systemLoadStr':
+          return data.systemLoad;
+        default:
+          // @ts-ignore
+          return data[property];
+      }
+    };
 
-  compareFunction = (sort: number, getProperty: (data: SystemCpuSummary) => number | string) =>
+  compareFunction =
+    (sort: number, getProperty: (data: SystemCpuSummary) => number | string) =>
     (cpuAbilityLeftData: SystemCpuSummary, cpuAbilityRightData: SystemCpuSummary): number => {
       let leftValue = getProperty(cpuAbilityLeftData);
       let rightValue = getProperty(cpuAbilityRightData);
@@ -174,8 +177,11 @@ export class TabPaneCpuAbility extends BaseElement {
       return result;
     };
 
-  compare = (property: string, sort: number, type: string):
-    (cpuAbilityLeftData: SystemCpuSummary, cpuAbilityRightData: SystemCpuSummary) => number => {
+  compare = (
+    property: string,
+    sort: number,
+    type: string
+  ): ((cpuAbilityLeftData: SystemCpuSummary, cpuAbilityRightData: SystemCpuSummary) => number) => {
     let getProperty = this.getPropertyByType(property, type);
     return this.compareFunction(sort, getProperty);
   };
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts
index f0ea4d9f64d18123d7f3c844c6c943d01bb9a9b0..cf01000c208e0f05b2d942b5379221dd554ae4a2 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts
@@ -160,25 +160,28 @@ export class TabPaneDiskAbility extends BaseElement {
         `;
   }
 
-  getPropertyByType = (property: string, type: string) => (data: SystemDiskIOSummary): number | string => {
-    let typeMap = {
+  getPropertyByType =
+    (property: string, type: string) =>
+    (data: SystemDiskIOSummary): number | string => {
+      let typeMap = {
+        // @ts-ignore
+        number: parseFloat(data[property]),
+        durationStr: data.duration,
+        dataReadStr: data.dataRead,
+        dataReadSecStr: data.dataReadSec,
+        dataWriteStr: data.dataWrite,
+        dataWriteSecStr: data.dataWriteSec,
+        readsInStr: data.readsIn,
+        readsInSecStr: data.readsInSec,
+        writeOutStr: data.writeOut,
+        writeOutSecStr: data.writeOutSec,
+      };
       // @ts-ignore
-      number: parseFloat(data[property]),
-      durationStr: data.duration,
-      dataReadStr: data.dataRead,
-      dataReadSecStr: data.dataReadSec,
-      dataWriteStr: data.dataWrite,
-      dataWriteSecStr: data.dataWriteSec,
-      readsInStr: data.readsIn,
-      readsInSecStr: data.readsInSec,
-      writeOutStr: data.writeOut,
-      writeOutSecStr: data.writeOutSec
+      return typeMap[type] || data[property];
     };
-    // @ts-ignore
-    return typeMap[type] || data[property];
-  };
 
-  compareFunction = (sort: number, getProperty: (data: SystemDiskIOSummary) => number | string) =>
+  compareFunction =
+    (sort: number, getProperty: (data: SystemDiskIOSummary) => number | string) =>
     (diskAbilityLeftData: SystemDiskIOSummary, diskAbilityRightData: SystemDiskIOSummary): number => {
       let leftValue = getProperty(diskAbilityLeftData);
       let rightValue = getProperty(diskAbilityRightData);
@@ -191,8 +194,11 @@ export class TabPaneDiskAbility extends BaseElement {
       return result;
     };
 
-  compareDisk(property: string, sort: number, type: string):
-    (diskAbilityLeftData: SystemDiskIOSummary, diskAbilityRightData: SystemDiskIOSummary) => number {
+  compareDisk(
+    property: string,
+    sort: number,
+    type: string
+  ): (diskAbilityLeftData: SystemDiskIOSummary, diskAbilityRightData: SystemDiskIOSummary) => number {
     let getProperty = this.getPropertyByType(property, type);
     return this.compareFunction(sort, getProperty);
   }
@@ -208,7 +214,7 @@ export class TabPaneDiskAbility extends BaseElement {
       readsInStr: 'readsInStr',
       readsInSecStr: 'readsInSecStr',
       writeOutStr: 'writeOutStr',
-      writeOutSecStr: 'writeOutSecStr'
+      writeOutSecStr: 'writeOutSecStr',
     };
     // @ts-ignore
     let type = typeMapping[detail.key] || 'number';
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts
index 7c64c9fbe7fbd2b160d502dc9626c2bd08ae0cc3..3b26bf57d64e40aee207d458581a1ea9f4a32088 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts
@@ -70,46 +70,47 @@ export class TabPaneDmaAbility extends BaseElement {
   }
 
   queryDataByDB(val: SelectionParam): void {
-    getTabDmaAbilityData(val.leftNs, val.rightNs,
-      (MemoryConfig.getInstance().interval * NUM_MILLON) / NUM_5).then((data) => {
-      this.dmaSource = data;
-      this.dmaTbl!.loading = false;
-      if (data.length !== null && data.length > 0) {
-        this.total = new Dma();
-        this.total.process = '*All*';
-        data.forEach((dmaItem) => {
-          if (dmaItem.processName !== null) {
-            dmaItem.process = `${dmaItem.processName}(${dmaItem.processId})`;
-          } else {
-            dmaItem.process = `Process(${dmaItem.processId})`;
-          }
+    getTabDmaAbilityData(val.leftNs, val.rightNs, (MemoryConfig.getInstance().interval * NUM_MILLON) / NUM_5).then(
+      (data) => {
+        this.dmaSource = data;
+        this.dmaTbl!.loading = false;
+        if (data.length !== null && data.length > 0) {
+          this.total = new Dma();
+          this.total.process = '*All*';
+          data.forEach((dmaItem) => {
+            if (dmaItem.processName !== null) {
+              dmaItem.process = `${dmaItem.processName}(${dmaItem.processId})`;
+            } else {
+              dmaItem.process = `Process(${dmaItem.processId})`;
+            }
 
-          this.total.avgSize += dmaItem.avgSize;
-          if (this.total.minSize < 0) {
-            this.total.minSize = dmaItem.minSize;
-          }
-          if (this.total.maxSize < 0) {
-            this.total.maxSize = dmaItem.maxSize;
-          }
-          this.total.minSize = Math.min(this.total.minSize, dmaItem.minSize);
-          this.total.maxSize = Math.max(this.total.maxSize, dmaItem.maxSize);
+            this.total.avgSize += dmaItem.avgSize;
+            if (this.total.minSize < 0) {
+              this.total.minSize = dmaItem.minSize;
+            }
+            if (this.total.maxSize < 0) {
+              this.total.maxSize = dmaItem.maxSize;
+            }
+            this.total.minSize = Math.min(this.total.minSize, dmaItem.minSize);
+            this.total.maxSize = Math.max(this.total.maxSize, dmaItem.maxSize);
 
-          dmaItem.avgSizes = Utils.getBinaryByteWithUnit(Math.round(dmaItem.avgSize));
-          dmaItem.minSizes = Utils.getBinaryByteWithUnit(dmaItem.minSize);
-          dmaItem.maxSizes = Utils.getBinaryByteWithUnit(dmaItem.maxSize);
-        });
-        this.total.avgSizes = Utils.getBinaryByteWithUnit(Math.round(this.total.avgSize / data.length));
-        this.total.minSizes = Utils.getBinaryByteWithUnit(this.total.minSize);
-        this.total.maxSizes = Utils.getBinaryByteWithUnit(this.total.maxSize);
-        this.dmaSource.sort(function (dmaAbilityLeftData: Dma, dmaAbilityRightData: Dma) {
-          return dmaAbilityRightData.avgSize - dmaAbilityLeftData.avgSize;
-        });
-        this.dmaTbl!.recycleDataSource = [this.total, ...this.dmaSource];
-      } else {
-        this.dmaTbl!.recycleDataSource = [];
-        this.dmaSource = [];
+            dmaItem.avgSizes = Utils.getBinaryByteWithUnit(Math.round(dmaItem.avgSize));
+            dmaItem.minSizes = Utils.getBinaryByteWithUnit(dmaItem.minSize);
+            dmaItem.maxSizes = Utils.getBinaryByteWithUnit(dmaItem.maxSize);
+          });
+          this.total.avgSizes = Utils.getBinaryByteWithUnit(Math.round(this.total.avgSize / data.length));
+          this.total.minSizes = Utils.getBinaryByteWithUnit(this.total.minSize);
+          this.total.maxSizes = Utils.getBinaryByteWithUnit(this.total.maxSize);
+          this.dmaSource.sort(function (dmaAbilityLeftData: Dma, dmaAbilityRightData: Dma) {
+            return dmaAbilityRightData.avgSize - dmaAbilityLeftData.avgSize;
+          });
+          this.dmaTbl!.recycleDataSource = [this.total, ...this.dmaSource];
+        } else {
+          this.dmaTbl!.recycleDataSource = [];
+          this.dmaSource = [];
+        }
       }
-    });
+    );
   }
 
   initHtml(): string {
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts
index f6f4d97bda71463688e80a507c688f196c578913..90214cfce908bb914da12371d7927dca482bb378 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts
@@ -169,7 +169,9 @@ export class TabPaneDmaSelectAbility extends BaseElement {
       case 'expTaskComm':
       case 'bufName':
       case 'expName':
-        this.damClickTable!.recycleDataSource = array.sort((leftData, rightData) => sortFunction(leftData, rightData, sort, column));
+        this.damClickTable!.recycleDataSource = array.sort((leftData, rightData) =>
+          sortFunction(leftData, rightData, sort, column)
+        );
         break;
       case 'startNs':
       case 'fd':
@@ -177,7 +179,9 @@ export class TabPaneDmaSelectAbility extends BaseElement {
       case 'ino':
       case 'expPid':
       case 'flag':
-        this.damClickTable!.recycleDataSource = array.sort((leftData, rightData) => sortFunction(leftData, rightData, sort, column));
+        this.damClickTable!.recycleDataSource = array.sort((leftData, rightData) =>
+          sortFunction(leftData, rightData, sort, column)
+        );
         break;
     }
   }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts
index 60c53871061ad6f2be5c1c9d69b9a55cd7075181..bb26626802010f5cf0de71b00c2be0b27adde6b6 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts
@@ -24,7 +24,7 @@ import { Utils } from '../../base/Utils';
 import { compare, resizeObserverFromMemory } from '../SheetUtils';
 import '../TabPaneJsMemoryFilter';
 import { type TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter';
-import {getTabGpuMemoryComparisonData} from "../../../../database/sql/Ability.sql";
+import { getTabGpuMemoryComparisonData } from '../../../../database/sql/Ability.sql';
 
 @element('tabpane-gpu-memory-comparison')
 export class TabPaneGpuMemoryComparison extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts
index ae1b86a0dce410c3656b991c46893beb803182c9..253b14f75429cfb3685890b8a6f48726c8b4be46 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts
@@ -18,7 +18,7 @@ import { type LitTable } from '../../../../../base-ui/table/lit-table';
 import { type GpuMemory } from '../../../../bean/AbilityMonitor';
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
 import { Utils } from '../../base/Utils';
-import {getTabGpuMemoryAbilityClickData} from "../../../../database/sql/Ability.sql";
+import { getTabGpuMemoryAbilityClickData } from '../../../../database/sql/Ability.sql';
 
 @element('tabpane-gpu-memory-selection-ability')
 export class TabPaneGpuMemorySelectAbility extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts
index 0d4de4a4fb8e812e2020e9ef6a59d1abb11c33f2..2f2266901f369075287baf56c91f58a77dd9cd3b 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts
@@ -173,8 +173,12 @@ export class TabPaneHistoryProcesses extends BaseElement {
 
     return function (historyProcessLeftData: ProcessHistory, historyProcessRightData: ProcessHistory) {
       if (type === 'number') {
-        // @ts-ignore
-        return compareValues(parseFloat(historyProcessLeftData[property]), parseFloat(historyProcessRightData[property]));
+        return compareValues(
+          // @ts-ignore
+          parseFloat(historyProcessLeftData[property]),
+          // @ts-ignore
+          parseFloat(historyProcessRightData[property])
+        );
       } else if (type === 'cpuTime' || type === 'lastSeen' || type === 'firstSeen') {
         // @ts-ignore
         return compareValues(historyProcessLeftData[type + 'Number'], historyProcessRightData[type + 'Number']);
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts
index b83f12562cf4f57598409a7d475f8e67e145fe5d..468648abd6b368931bb3f3a52d2c55a9ab74c369 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts
@@ -20,7 +20,7 @@ import { LiveProcess } from '../../../../bean/AbilityMonitor';
 import { Utils } from '../../base/Utils';
 import { log } from '../../../../../log/Log';
 import { resizeObserver } from '../SheetUtils';
-import {getTabLiveProcessData} from "../../../../database/sql/ProcessThread.sql";
+import { getTabLiveProcessData } from '../../../../database/sql/ProcessThread.sql';
 
 @element('tabpane-live-processes')
 export class TabPaneLiveProcesses extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts
index a833e173b36dd87e44aa88fac58e84067c1eb2b9..8fe02e8f1bd8700780e8881f59b2f42281381fdb 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts
@@ -101,7 +101,7 @@ export class TabPaneMemoryAbility extends BaseElement {
       'sys.mem.cma.total': 'cmaTotal',
       'sys.mem.cma.free': 'cmaFree',
       'sys.mem.kernel.reclaimable': 'kReclaimable',
-      'sys.mem.zram': 'zram'
+      'sys.mem.zram': 'zram',
     };
   }
 
@@ -116,10 +116,11 @@ export class TabPaneMemoryAbility extends BaseElement {
           let lastTime = 0;
           for (const item of items) {
             let systemMemorySummary = new SystemMemorySummary();
-            systemMemorySummary.startTimeStr = (item.startTime - startTime <= 0) ? '0:000.000.000'
-              : Utils.getTimeStampHMS(item.startTime - startTime);
-            systemMemorySummary.durationNumber = (lastTime !== 0) ? item.startTime - lastTime : 0;
-            systemMemorySummary.durationStr = (lastTime !== 0) ? Utils.getDurString(systemMemorySummary.durationNumber) : '-';
+            systemMemorySummary.startTimeStr =
+              item.startTime - startTime <= 0 ? '0:000.000.000' : Utils.getTimeStampHMS(item.startTime - startTime);
+            systemMemorySummary.durationNumber = lastTime !== 0 ? item.startTime - lastTime : 0;
+            systemMemorySummary.durationStr =
+              lastTime !== 0 ? Utils.getDurString(systemMemorySummary.durationNumber) : '-';
             lastTime = item.startTime;
             let memorys = item.value.split(',');
             let names = item.name.split(',');
@@ -134,7 +135,6 @@ export class TabPaneMemoryAbility extends BaseElement {
                 systemMemorySummary[key] = Utils.getBinaryKBWithUnit(Number(memorys[i]));
               }
             }
-            ;
             this.memoryAbilitySource.push(systemMemorySummary);
           }
           this.memoryAbilityTbl!.recycleDataSource = this.memoryAbilitySource;
@@ -199,9 +199,9 @@ export class TabPaneMemoryAbility extends BaseElement {
         if (type === 'number') {
           return sort === 2
             ? // @ts-ignore
-            parseFloat(memoryAbilityRightData[property]) - parseFloat(memoryAbilityLeftData[property])
+              parseFloat(memoryAbilityRightData[property]) - parseFloat(memoryAbilityLeftData[property])
             : // @ts-ignore
-            parseFloat(memoryAbilityLeftData[property]) - parseFloat(memoryAbilityRightData[property]);
+              parseFloat(memoryAbilityLeftData[property]) - parseFloat(memoryAbilityRightData[property]);
         } else if (type === 'durationStr') {
           return sort === 2
             ? memoryAbilityRightData.durationNumber - memoryAbilityLeftData.durationNumber
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts
index b310757b88f7ab67ce4e949dffa41839080dcb33..e42827ba7eb0e15394981f16d2c5c7b69232498c 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts
@@ -147,7 +147,8 @@ export class TabPaneNetworkAbility extends BaseElement {
     return this.compareFunction(sort, getProperty);
   }
 
-  compareFunction = (sort: number, getProperty: (data: SystemNetworkSummary) => number | string) =>
+  compareFunction =
+    (sort: number, getProperty: (data: SystemNetworkSummary) => number | string) =>
     (networkAbilityLeftData: SystemNetworkSummary, networkAbilityRightData: SystemNetworkSummary) => {
       let leftValue = getProperty(networkAbilityLeftData);
       let rightValue = getProperty(networkAbilityRightData);
@@ -160,23 +161,25 @@ export class TabPaneNetworkAbility extends BaseElement {
       return result;
     };
 
-  getPropertyByType = (property: string, type: string) => (data: SystemNetworkSummary): number | string => {
-    let typeMap = {
+  getPropertyByType =
+    (property: string, type: string) =>
+    (data: SystemNetworkSummary): number | string => {
+      let typeMap = {
+        // @ts-ignore
+        number: parseFloat(data[property]),
+        durationStr: data.duration,
+        dataReceivedStr: data.dataReceived,
+        dataReceivedSecStr: data.dataReceivedSec,
+        dataSendStr: data.dataSend,
+        dataSendSecStr: data.dataSendSec,
+        packetsInStr: data.packetsIn,
+        packetsInSecStr: data.packetsInSec,
+        packetsOutStr: data.packetsOut,
+        packetsOutSecStr: data.packetsOutSec,
+      };
       // @ts-ignore
-      number: parseFloat(data[property]),
-      durationStr: data.duration,
-      dataReceivedStr: data.dataReceived,
-      dataReceivedSecStr: data.dataReceivedSec,
-      dataSendStr: data.dataSend,
-      dataSendSecStr: data.dataSendSec,
-      packetsInStr: data.packetsIn,
-      packetsInSecStr: data.packetsInSec,
-      packetsOutStr: data.packetsOut,
-      packetsOutSecStr: data.packetsOutSec
+      return typeMap[type] || data[property];
     };
-    // @ts-ignore
-    return typeMap[type] || data[property];
-  };
 
   sortByColumn(detail: any) {
     // @ts-ignore
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts
index 007b056195fc3e55d87a52d0f38d8bf03bd46b92..71b92dc801f8f697e9d4c0882f46996a5f89380a 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts
@@ -73,11 +73,9 @@ export class TabPanePurgPin extends BaseElement {
   getDataSource(res: any): void {
     if (res.length > 0) {
       for (let i = 0; i < res.length; i++) {
-        this.purgeablePinSource.push(
-          this.toTabStruct(res[i].name, res[i].maxSize, res[i].minSize, res[i].avgSize)
-        );
+        this.purgeablePinSource.push(this.toTabStruct(res[i].name, res[i].maxSize, res[i].minSize, res[i].avgSize));
       }
-      this.sortByColumn({key: this.sortKey, sort: this.sortType});
+      this.sortByColumn({ key: this.sortKey, sort: this.sortType });
       let total = this.totalData(this.purgeablePinSource);
       this.purgeablePinSource.unshift(total);
       this.purgeablePinTable!.recycleDataSource = this.purgeablePinSource;
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts
index 014e99b3a75072d86e2ddb40e8f2630c290bce5a..d880510d653dcd7a01241c2cafa3e6e005d6b462 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts
@@ -20,8 +20,8 @@ import { type SelectionParam } from '../../../../bean/BoxSelection';
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
 import { Utils } from '../../base/Utils';
 import { resizeObserver } from '../SheetUtils';
-import {querySysPurgeableSelectionTab} from "../../../../database/sql/Ability.sql";
-import {queryProcessPurgeableSelectionTab} from "../../../../database/sql/ProcessThread.sql";
+import { querySysPurgeableSelectionTab } from '../../../../database/sql/Ability.sql';
+import { queryProcessPurgeableSelectionTab } from '../../../../database/sql/ProcessThread.sql';
 
 @element('tabpane-purg-pin-selection')
 export class TabPanePurgPinSelection extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts
index a62e13cd14c793ed7be738e0e1e431f6af043aef..0128ce112f8f753542ab7b3e54729038582b214c 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts
@@ -75,7 +75,7 @@ export class TabPanePurgTotal extends BaseElement {
           this.toTabStruct(results[i].name, results[i].maxSize, results[i].minSize, results[i].avgSize)
         );
       }
-      this.sortByColumn({key: this.sortKey, sort: this.sortType});
+      this.sortByColumn({ key: this.sortKey, sort: this.sortType });
       let total = this.totalData(this.purgeableTotalSource);
       this.purgeableTotalSource.unshift(total);
       this.purgeableTotalTable!.recycleDataSource = this.purgeableTotalSource;
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts
index 025f74d2ac696f2d9d30e3b45fc9c981b6ee7b2d..cb85d9ba51dd8bea09b4c37acee5b0f76b02362d 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts
@@ -39,7 +39,7 @@ export class TabPanePurgTotalSelection extends BaseElement {
       await querySysPurgeableSelectionTab(startNs).then((purgeTotalSelectResults) => {
         this.purgeableSelectionSource = [];
         if (purgeTotalSelectResults.length > 0) {
-          this.purgeableSelectionSource.push({name: 'TimeStamp', value: ns2s(startNs)});
+          this.purgeableSelectionSource.push({ name: 'TimeStamp', value: ns2s(startNs) });
           this.purgeableSelectionSource.push({
             name: 'TimeStamp(Absolute)',
             value: (startNs + (window as any).recordStartNS) / 1000000000,
@@ -55,7 +55,7 @@ export class TabPanePurgTotalSelection extends BaseElement {
       await queryProcessPurgeableSelectionTab(startNs, MemoryConfig.getInstance().iPid).then((results) => {
         this.purgeableSelectionSource = [];
         if (results.length > 0) {
-          this.purgeableSelectionSource.push({name: 'TimeStamp(Relative)', value: ns2s(startNs)});
+          this.purgeableSelectionSource.push({ name: 'TimeStamp(Relative)', value: ns2s(startNs) });
           this.purgeableSelectionSource.push({
             name: 'TimeStamp(Absolute)',
             value: (startNs + (window as any).recordStartNS) / 1000000000,
diff --git a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts
index 8c3ea96c53ce8ece24e1e45b36b5d3f9712f1161..090054ea6326528caabcbc320df497ee8c77ecba 100644
--- a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts
@@ -176,12 +176,7 @@ export class TabPaneJsCpuStatistics extends BaseElement {
     time: number,
     percentage: number
   ): JsCpuProfilerStatisticsStruct {
-    return new JsCpuProfilerStatisticsStruct(
-      type,
-      time,
-      ns2s(time),
-      ((time / percentage || 0) * 100).toFixed(1)
-    );
+    return new JsCpuProfilerStatisticsStruct(type, time, ns2s(time), ((time / percentage || 0) * 100).toFixed(1));
   }
 
   private sortByColumn(detail: any): void {
diff --git a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts
index a168b4fe84d93c6b77e224b0709e41e06b2aa264..736359197ac734aeb6a09707d21631e459ba29fa 100644
--- a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts
+++ b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts
@@ -93,14 +93,14 @@ export class TabPaneSummary extends BaseElement {
     this.fileSize = file.size;
     this.summary.forEach((summaryEl: any) => {
       if (summaryEl.childCount > 1) {
-        let count = `${summaryEl.nodeName  } ×${summaryEl.childCount}`;
+        let count = `${summaryEl.nodeName} ×${summaryEl.childCount}`;
         summaryEl.objectName = count;
         summaryEl.count = ` ×${summaryEl.childCount}`;
       } else {
         summaryEl.objectName = summaryEl.nodeName;
       }
-      let shallow = `${Math.round((summaryEl.shallowSize / file.size) * 100)  }%`;
-      let retained = `${Math.round((summaryEl.retainedSize / file.size) * 100)  }%`;
+      let shallow = `${Math.round((summaryEl.shallowSize / file.size) * 100)}%`;
+      let retained = `${Math.round((summaryEl.retainedSize / file.size) * 100)}%`;
       summaryEl.shallowPercent = shallow;
       summaryEl.retainedPercent = retained;
       if (summaryEl.distance >= 100000000 || summaryEl.distance === -5) {
@@ -178,9 +178,9 @@ export class TabPaneSummary extends BaseElement {
   private retainsTableByObjectName(currentLeftItem: ConstructorItem, sort: number): void {
     const getList = function (list: Array<ConstructorItem>): void {
       list.sort((leftA, rightB) => {
-        return sort === 1 ?
-          (`${leftA.objectName  }`).localeCompare(`${rightB.objectName  }`) :
-          (`${rightB.objectName  }`).localeCompare(`${leftA.objectName  }`);
+        return sort === 1
+          ? `${leftA.objectName}`.localeCompare(`${rightB.objectName}`)
+          : `${rightB.objectName}`.localeCompare(`${leftA.objectName}`);
       });
       list.forEach(function (row) {
         if (row.children.length > 0) {
@@ -225,9 +225,9 @@ export class TabPaneSummary extends BaseElement {
   }
   private sortLeftByObjectNameColum(sort: number): void {
     this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
-      return sort === 1 ?
-        (`${leftData.objectName  }`).localeCompare(`${rightData.objectName  }`) :
-        (`${rightData.objectName  }`).localeCompare(`${leftData.objectName  }`);
+      return sort === 1
+        ? `${leftData.objectName}`.localeCompare(`${rightData.objectName}`)
+        : `${rightData.objectName}`.localeCompare(`${leftData.objectName}`);
     });
     this.leftArray.forEach((currentLeftItem) => {
       this.retainsTableByObjectName(currentLeftItem, sort);
@@ -237,9 +237,9 @@ export class TabPaneSummary extends BaseElement {
 
   private sortLeftByRetainedSizeColum(sort: number): void {
     this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
-      return sort === 1 ?
-        leftData.retainedSize - rightData.retainedSize :
-        rightData.retainedSize - leftData.retainedSize;
+      return sort === 1
+        ? leftData.retainedSize - rightData.retainedSize
+        : rightData.retainedSize - leftData.retainedSize;
     });
     this.leftArray.forEach((currentLeftItem) => {
       this.retainsTableByRetainedSize(currentLeftItem, sort);
@@ -249,9 +249,7 @@ export class TabPaneSummary extends BaseElement {
 
   private sortLeftByShallowSizeColum(sort: number): void {
     this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
-      return sort === 1 ?
-        leftData.shallowSize - rightData.shallowSize :
-        rightData.shallowSize - leftData.shallowSize;
+      return sort === 1 ? leftData.shallowSize - rightData.shallowSize : rightData.shallowSize - leftData.shallowSize;
     });
     this.leftArray.forEach((currentLeftItem) => {
       this.retainsTableByShallowSize(currentLeftItem, sort);
@@ -306,9 +304,9 @@ export class TabPaneSummary extends BaseElement {
             break;
           case 'objectName':
             this.tbs!.snapshotDataSource = this.rightArray.sort((a, b) => {
-              return sort === 1 ?
-                (`${a.objectName  }`).localeCompare(`${b.objectName  }`) :
-                (`${b.objectName  }`).localeCompare(`${a.objectName  }`);
+              return sort === 1
+                ? `${a.objectName}`.localeCompare(`${b.objectName}`)
+                : `${b.objectName}`.localeCompare(`${a.objectName}`);
             });
             this.rightArray.forEach((list) => {
               this.retainsTableByObjectName(list, sort);
@@ -393,27 +391,29 @@ export class TabPaneSummary extends BaseElement {
   connectedCallback(): void {
     super.connectedCallback();
     let filterHeight = 0;
-    let parentWidth = `${this.parentElement!.clientWidth  }px`;
+    let parentWidth = `${this.parentElement!.clientWidth}px`;
     let system = document
       .querySelector('body > sp-application')
       ?.shadowRoot?.querySelector('#app-content > sp-system-trace');
     new ResizeObserver(() => {
       let summaryPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (summaryPaneFilter.clientHeight > 0) {filterHeight = summaryPaneFilter.clientHeight}
+      if (summaryPaneFilter.clientHeight > 0) {
+        filterHeight = summaryPaneFilter.clientHeight;
+      }
       if (this.parentElement!.clientHeight > filterHeight) {
         summaryPaneFilter.style.display = 'flex';
       } else {
         summaryPaneFilter.style.display = 'none';
       }
-      parentWidth = `${this.parentElement!.clientWidth  }px`;
+      parentWidth = `${this.parentElement!.clientWidth}px`;
       this.tbs!.style.height = 'calc(100% - 30px)';
       this.tbsTable!.style.width = `calc(${parentWidth} - ${this.leftTable!.style.width} - 5px)`;
       this.tbs!.reMeauseHeight();
       this.tblSummary!.reMeauseHeight();
     }).observe(this.parentElement!);
     new ResizeObserver(() => {
-      this.parentElement!.style.width = `${system!.clientWidth  }px`;
-      this.style.width = `${system!.clientWidth  }px`;
+      this.parentElement!.style.width = `${system!.clientWidth}px`;
+      this.style.width = `${system!.clientWidth}px`;
     }).observe(system!);
     new ResizeObserver(() => {
       this.tbsTable!.style.width = `calc(${parentWidth} - ${this.leftTable!.style.width} - 5px)`;
@@ -458,12 +458,12 @@ export class TabPaneSummary extends BaseElement {
       let retainsTable = (): void => {
         const getList = (list: Array<ConstructorItem>): void => {
           list.forEach((currentRow: ConstructorItem) => {
-            let shallow = `${Math.round((currentRow.shallowSize / this.fileSize) * 100)  }%`;
-            let retained = `${Math.round((currentRow.retainedSize / this.fileSize) * 100)  }%`;
+            let shallow = `${Math.round((currentRow.shallowSize / this.fileSize) * 100)}%`;
+            let retained = `${Math.round((currentRow.retainedSize / this.fileSize) * 100)}%`;
             currentRow.shallowPercent = shallow;
             currentRow.retainedPercent = retained;
-            let nodeId = `${currentRow.nodeName  } @${currentRow.id}`;
-            currentRow.objectName = `${currentRow.edgeName  }\xa0` + 'in' + `\xa0${  nodeId}`;
+            let nodeId = `${currentRow.nodeName} @${currentRow.id}`;
+            currentRow.objectName = `${currentRow.edgeName}\xa0` + 'in' + `\xa0${nodeId}`;
             if (currentRow.distance >= 100000000 || currentRow.distance === -5) {
               // @ts-ignore
               currentRow.distance = '-';
@@ -510,22 +510,22 @@ export class TabPaneSummary extends BaseElement {
           return b.retainedSize - a.retainedSize;
         });
         data.children.forEach((summaryDataEl: any) => {
-          let shallow = `${Math.round((summaryDataEl.shallowSize / this.fileSize) * 100)  }%`;
-          let retained = `${Math.round((summaryDataEl.retainedSize / this.fileSize) * 100)  }%`;
+          let shallow = `${Math.round((summaryDataEl.shallowSize / this.fileSize) * 100)}%`;
+          let retained = `${Math.round((summaryDataEl.retainedSize / this.fileSize) * 100)}%`;
           summaryDataEl.shallowPercent = shallow;
           summaryDataEl.retainedPercent = retained;
           if (summaryDataEl.distance >= 100000000 || summaryDataEl.distance === -5) {
             summaryDataEl.distance = '-';
           }
-          let nodeId = `${summaryDataEl.nodeName  } @${summaryDataEl.id}`;
+          let nodeId = `${summaryDataEl.nodeName} @${summaryDataEl.id}`;
           summaryDataEl.nodeId = ` @${summaryDataEl.id}`;
           if (data.isString()) {
-            summaryDataEl.objectName = `"${  summaryDataEl.nodeName  }"` + ` @${summaryDataEl.id}`;
+            summaryDataEl.objectName = `"${summaryDataEl.nodeName}"` + ` @${summaryDataEl.id}`;
           } else {
             summaryDataEl.objectName = nodeId;
           }
           if (summaryDataEl.edgeName !== '') {
-            summaryDataEl.objectName = `${summaryDataEl.edgeName  }\xa0` + '::' + `\xa0${  nodeId}`;
+            summaryDataEl.objectName = `${summaryDataEl.edgeName}\xa0` + '::' + `\xa0${nodeId}`;
           }
         });
       } else {
@@ -587,12 +587,12 @@ export class TabPaneSummary extends BaseElement {
       let retainsTable = (): void => {
         const getList = (list: Array<ConstructorItem>): void => {
           list.forEach((summaryRow: ConstructorItem) => {
-            let retainsShallow = `${Math.round((summaryRow.shallowSize / this.fileSize) * 100)  }%`;
-            let retained = `${Math.round((summaryRow.retainedSize / this.fileSize) * 100)  }%`;
+            let retainsShallow = `${Math.round((summaryRow.shallowSize / this.fileSize) * 100)}%`;
+            let retained = `${Math.round((summaryRow.retainedSize / this.fileSize) * 100)}%`;
             summaryRow.shallowPercent = retainsShallow;
             summaryRow.retainedPercent = retained;
-            let nodeId = `${summaryRow.nodeName  } @${summaryRow.id}`;
-            summaryRow.objectName = `${summaryRow.edgeName  }\xa0` + 'in' + `\xa0${  nodeId}`;
+            let nodeId = `${summaryRow.nodeName} @${summaryRow.id}`;
+            summaryRow.objectName = `${summaryRow.edgeName}\xa0` + 'in' + `\xa0${nodeId}`;
             if (summaryRow.distance >= 100000000 || summaryRow.distance === -5) {
               //@ts-ignore
               summaryRow.distance = '-';
@@ -625,16 +625,16 @@ export class TabPaneSummary extends BaseElement {
     this.retainsData = [];
     this.retainsData = HeapDataInterface.getInstance().getRetains(data);
     this.retainsData.forEach((element) => {
-      let shallow = `${Math.round((element.shallowSize / this.fileSize) * 100)  }%`;
-      let retained = `${Math.round((element.retainedSize / this.fileSize) * 100)  }%`;
+      let shallow = `${Math.round((element.shallowSize / this.fileSize) * 100)}%`;
+      let retained = `${Math.round((element.retainedSize / this.fileSize) * 100)}%`;
       element.shallowPercent = shallow;
       element.retainedPercent = retained;
       if (element.distance >= 100000000 || element.distance === -5) {
         //@ts-ignore
         element.distance = '-';
       }
-      let nodeId = `${element.nodeName  } @${element.id}`;
-      element.objectName = `${element.edgeName  }\xa0` + 'in' + `\xa0${  nodeId}`;
+      let nodeId = `${element.nodeName} @${element.id}`;
+      element.objectName = `${element.edgeName}\xa0` + 'in' + `\xa0${nodeId}`;
     });
   }
 
diff --git a/ide/src/trace/component/trace/sheet/binder/TabPaneBinderDataCut.ts b/ide/src/trace/component/trace/sheet/binder/TabPaneBinderDataCut.ts
index f1cd2f2cc8a8f39443981d6a6bf1bfc6d08c1c6b..d71ff62cf9fa4f0a5a7460aea1d06127c00b6e00 100644
--- a/ide/src/trace/component/trace/sheet/binder/TabPaneBinderDataCut.ts
+++ b/ide/src/trace/component/trace/sheet/binder/TabPaneBinderDataCut.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,7 +25,7 @@ import {
   type BinderDataStruct,
   CycleBinderItem,
 } from '../../../../bean/BinderProcessThread';
-import { queryFuncNameCycle } from '../../../../../trace/database/sql/Func.sql';
+import { queryFuncNameCycle, queryLoopFuncNameCycle } from '../../../../../trace/database/sql/Func.sql';
 import { queryBinderByThreadId } from '../../../../../trace/database/sql/ProcessThread.sql';
 import { resizeObserver } from '../SheetUtils';
 import { type LitChartColumn } from '../../../../../base-ui/chart/column/LitChartColumn';
@@ -55,8 +54,9 @@ export class TabPaneBinderDataCut extends BaseElement {
   private threadArr: Array<ThreadBinderItem> = [];
   private threadBinderMap: Map<string, Array<BinderItem>> = new Map();
   private processIds: Array<number> = [];
-  private isQueryDataFromDb: boolean = false;
-  private funcCycleArr: Array<FunctionItem> = [];
+  private funcCycleArr: Array<any> = [];
+  private currentCutThreadId: string | undefined;
+  private currentCutFuncName: string | undefined;
 
   set data(threadStatesParam: SelectionParam) {
     if (this.currentSelectionParam === threadStatesParam) {
@@ -72,10 +72,11 @@ export class TabPaneBinderDataCut extends BaseElement {
     this.hideQueryArea(true);
     this.clickLoop(false);
     this.clickSingle(false);
-    this.isQueryDataFromDb = false;
     this.threadBindersTbl!.recycleDataSource = [];
     this.tHeadClick(this.threadBindersTbl!.recycleDataSource);
     this.parentElement!.style.overflow = 'hidden';
+    this.currentCutThreadId = '';
+    this.currentCutFuncName = '';
     new ResizeObserver(() => {
       // @ts-ignore
       let lastHeight: number = this.threadBindersTbl.tableElement!.offsetHeight;
@@ -113,24 +114,26 @@ export class TabPaneBinderDataCut extends BaseElement {
     threadFuncName: string,
     threadIds: Array<number>,
     leftNS: number,
-    rightNS: number
+    rightNS: number,
+    type: string
   ): Promise<void> {
     let binderArr: Array<BinderItem> = await queryBinderByThreadId(this.processIds, threadIds, leftNS, rightNS);
     if (binderArr.length > 0) {
       this.structureThreadBinderMap(binderArr);
     }
-    this.funcCycleArr = await queryFuncNameCycle(threadFuncName, threadIdValue, leftNS, rightNS);
+    if (type === 'loop') {
+      this.funcCycleArr = await queryLoopFuncNameCycle(threadFuncName, threadIdValue, leftNS, rightNS);
+    } else {
+      this.funcCycleArr = await queryFuncNameCycle(threadFuncName, threadIdValue, leftNS, rightNS);
+    }
   }
 
   //点击single loop 切割按钮方法
-  async dataCutFunc(
-    threadId: HTMLInputElement,
-    threadFunc: HTMLInputElement,
-    type: string,
-  ): Promise<void> {
+  async dataCutFunc(threadId: HTMLInputElement, threadFunc: HTMLInputElement, type: string): Promise<void> {
     this.currentThreadId = '';
     let threadIdValue = threadId.value.trim();
     let threadFuncName = threadFunc.value.trim();
+
     this.clickLoop(type === 'loop' ? true : false);
     this.clickSingle(type === 'loop' ? false : true);
     //清空泳道图
@@ -140,16 +143,16 @@ export class TabPaneBinderDataCut extends BaseElement {
       this.threadBindersTbl!.loading = true;
       threadId.style.border = '1px solid rgb(151,151,151)';
       threadFunc.style.border = '1px solid rgb(151,151,151)';
-      if (!this.isQueryDataFromDb) {
-        let threadIds = this.currentSelectionParam.threadIds;
-        let leftNS = this.currentSelectionParam.leftNs;
-        let rightNS = this.currentSelectionParam.rightNs;
-        await this.queryDataFromDb(threadIdValue, threadFuncName, threadIds, leftNS, rightNS);
-        this.isQueryDataFromDb = true;
-      }
+      let threadIds = this.currentSelectionParam.threadIds;
+      let leftNS = this.currentSelectionParam.leftNs;
+      let rightNS = this.currentSelectionParam.rightNs;
+      this.threadArr = [];
+      this.threadBinderMap.clear();
+      await this.queryDataFromDb(threadIdValue, threadFuncName, threadIds, leftNS, rightNS, type);
       if (this.funcCycleArr.length !== 0) {
-        let cycleMap: Map<string, Array<CycleBinderItem>> = type === 'loop' ?
-          this.loopDataCutCycleMap(this.funcCycleArr) : this.singleDataCutCycleMap(this.funcCycleArr);
+        let cycleMap: Map<string, Array<CycleBinderItem>> = type === 'loop'
+          ? this.loopDataCutCycleMap(this.funcCycleArr)
+          : this.singleDataCutCycleMap(this.funcCycleArr);
         this.threadBindersTbl!.recycleDataSource = this.mergeData(cycleMap);
         this.threadBindersTbl!.loading = false;
         this.tHeadClick(this.threadBindersTbl!.recycleDataSource);
@@ -194,7 +197,10 @@ export class TabPaneBinderDataCut extends BaseElement {
     for (let b of binderArr) {
       if (!this.threadBinderMap.has(b.pid + '_' + b.tid)) {
         this.threadArr.push({
-          title: Utils.THREAD_MAP.get(b.tid) === null ? 'Thread' + ' ' + '[' + b.tid + ']' : Utils.THREAD_MAP.get(b.tid) + ' ' + '[' + b.tid + ']',
+          title:
+            Utils.THREAD_MAP.get(b.tid) === null
+              ? 'Thread' + ' ' + '[' + b.tid + ']'
+              : Utils.THREAD_MAP.get(b.tid) + ' ' + '[' + b.tid + ']',
           totalCount: 0,
           tid: b.tid,
           pid: b.pid,
@@ -214,8 +220,8 @@ export class TabPaneBinderDataCut extends BaseElement {
       threadBinderMap.forEach((val, key) => {
         const k = key;
         const v = JSON.parse(JSON.stringify(val));
-        cloneThreadBinderMap.set(k, v)
-      })
+        cloneThreadBinderMap.set(k, v);
+      });
     }
     return cloneThreadBinderMap;
   }
@@ -242,7 +248,10 @@ export class TabPaneBinderDataCut extends BaseElement {
           countBinder.tsNs = func.cycleStartTime;
           countBinder.cycleDur = Number((func.dur / MILLIONS).toFixed(THREE));
           countBinder.cycleStartTime = Number((func.cycleStartTime / MILLIONS).toFixed(THREE));
-          if (tBinder[j].ts + tBinder[j].dur > func.cycleStartTime && tBinder[j].ts + tBinder[j].dur < func.cycleStartTime + func!.dur) {
+          if (
+            tBinder[j].ts + tBinder[j].dur > func.cycleStartTime &&
+            tBinder[j].ts + tBinder[j].dur < func.cycleStartTime + func!.dur
+          ) {
             countBinder.totalCount += 1;
             countBinder.binderTransactionCount += tBinder[j].name === 'binder transaction' ? 1 : 0;
             countBinder.binderAsyncRcvCount += tBinder[j].name === 'binder async rcv' ? 1 : 0;
@@ -279,9 +288,14 @@ export class TabPaneBinderDataCut extends BaseElement {
           countBinder.pid = tBinder[j].pid;
           countBinder.durNs = funcNameArr[i + 1].cycleStartTime - funcNameArr[i].cycleStartTime;
           countBinder.tsNs = funcNameArr[i].cycleStartTime;
-          countBinder.cycleDur = Number(((funcNameArr[i + 1].cycleStartTime - funcNameArr[i].cycleStartTime) / MILLIONS).toFixed(THREE));
+          countBinder.cycleDur = Number(
+            ((funcNameArr[i + 1].cycleStartTime - funcNameArr[i].cycleStartTime) / MILLIONS).toFixed(THREE)
+          );
           countBinder.cycleStartTime = Number((funcNameArr[i].cycleStartTime / MILLIONS).toFixed(THREE));
-          if (tBinder[j].ts + tBinder[j].dur > funcNameArr[i].cycleStartTime && tBinder[j].ts + tBinder[j].dur < funcNameArr[i + 1].cycleStartTime) {
+          if (
+            tBinder[j].ts + tBinder[j].dur > funcNameArr[i].cycleStartTime &&
+            tBinder[j].ts + tBinder[j].dur < funcNameArr[i + 1].cycleStartTime
+          ) {
             countBinder.totalCount += 1;
             countBinder!.binderTransactionCount += tBinder[j].name === 'binder transaction' ? 1 : 0;
             countBinder!.binderAsyncRcvCount += tBinder[j].name === 'binder async rcv' ? 1 : 0;
@@ -318,17 +332,18 @@ export class TabPaneBinderDataCut extends BaseElement {
       }
     }
     // process级的数组数据，也就是树结构的根数据层
-    processIds.forEach(pid => {
-      processArr.push(
-        {
-          pid: pid,
-          title: Utils.PROCESS_MAP.get(pid) === null ? 'Process' + ' ' + '[' + pid + ']' : Utils.PROCESS_MAP.get(pid) + ' ' + '[' + pid + ']',
-          totalCount: 0,
-          type: 'Process',
-          children: [],
-        }
-      );
-    })
+    processIds.forEach((pid) => {
+      processArr.push({
+        pid: pid,
+        title:
+          Utils.PROCESS_MAP.get(pid) === null
+            ? 'Process' + ' ' + '[' + pid + ']'
+            : Utils.PROCESS_MAP.get(pid) + ' ' + '[' + pid + ']',
+        totalCount: 0,
+        type: 'Process',
+        children: [],
+      });
+    });
     // 将process级下的thread数据放入对应的process下
     for (let process of processArr) {
       for (let thread of this.threadArr) {
@@ -512,10 +527,14 @@ export class TabPaneBinderDataCut extends BaseElement {
   queryBtnClick(): void {
     this.shadowRoot?.querySelector('#query-btn')?.addEventListener('click', () => {
       this.cycleARangeArr = this.rowCycleData?.filter((it: CycleBinderItem) => {
-        return (it.cycleDur >= Number(this.cycleAStartRangeDIV!.value) && it.cycleDur < Number(this.cycleAEndRangeDIV!.value));
+        return (
+          it.cycleDur >= Number(this.cycleAStartRangeDIV!.value) && it.cycleDur < Number(this.cycleAEndRangeDIV!.value)
+        );
       });
       this.cycleBRangeArr = this.rowCycleData?.filter((it: CycleBinderItem) => {
-        return (it.cycleDur >= Number(this.cycleBStartRangeDIV!.value) && it.cycleDur < Number(this.cycleBEndRangeDIV!.value));
+        return (
+          it.cycleDur >= Number(this.cycleBStartRangeDIV!.value) && it.cycleDur < Number(this.cycleBEndRangeDIV!.value)
+        );
       });
       let cycleACount: number = 0;
       this.cycleARangeArr?.forEach((it: CycleBinderItem) => {
@@ -702,7 +721,7 @@ export class TabPaneBinderDataCut extends BaseElement {
             <lit-slicer style="width:100%">
                 <div style="width:65%;">
                     <lit-table id="tb-binder-count" style="height: auto; overflow-x:auto;width:100%" tree>
-                        <lit-table-column width="250px" title="Process/Thread/Cycle" data-index="title" key="title"  align="flex-start" retract>
+                        <lit-table-column width="240px" title="Process/Thread/Cycle" data-index="title" key="title"  align="flex-start" retract>
                         </lit-table-column>
                         <lit-table-column width="100px" title="Total count" data-index="totalCount" key="totalCount" align="center">
                         </lit-table-column>
@@ -716,7 +735,7 @@ export class TabPaneBinderDataCut extends BaseElement {
                         </lit-table-column>
                         <lit-table-column width="100px" title="Cycle start time(ms)" data-index="cycleStartTime" key="cycleStartTime" align="flex-start">
                         </lit-table-column>
-                        <lit-table-column width="100px" title="Duration(ms)" data-index="cycleDur" key="cycleDur" align="flex-start">
+                        <lit-table-column width="110px" title="Duration(ms)" data-index="cycleDur" key="cycleDur" align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </div>
diff --git a/ide/src/trace/component/trace/sheet/binder/TabPaneBinders.ts b/ide/src/trace/component/trace/sheet/binder/TabPaneBinders.ts
index dcc8ddd288e8fca4969ae6168ab5d1c8088ae4d4..a11ba7aacf49dbd7b3c15eb38505576f0b32200e 100644
--- a/ide/src/trace/component/trace/sheet/binder/TabPaneBinders.ts
+++ b/ide/src/trace/component/trace/sheet/binder/TabPaneBinders.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2023 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstruction.ts b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstruction.ts
index a034342c4e0af55d5f9f0b907027a5319c0615b2..23aed73c275a57893b266d74ac22730aec6d8fa5 100644
--- a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstruction.ts
+++ b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstruction.ts
@@ -25,7 +25,7 @@ const Y_PADDING = 4;
 @element('tab-sample-instruction')
 export class TabPaneSampleInstruction extends BaseElement {
   private instructionEle: HTMLCanvasElement | undefined | null;
-  private ctx: CanvasRenderingContext2D| undefined | null;
+  private ctx: CanvasRenderingContext2D | undefined | null;
   private textEle: HTMLSpanElement | undefined | null;
   private instructionArray: Array<any> = [];
   private instructionData: Array<any> = [];
@@ -35,7 +35,7 @@ export class TabPaneSampleInstruction extends BaseElement {
   private canvasY = -1; // 鼠标当前所在画布y坐标
   private startX = 0; // 画布相对于整个界面的x坐标
   private startY = 0; // 画布相对于整个界面的y坐标
-  private hintContent = ""; //悬浮框内容
+  private hintContent = ''; //悬浮框内容
   private floatHint!: HTMLDivElement | undefined | null; //悬浮框
   private canvasScrollTop = 0; // tab页上下滚动位置
   private hoverSampleStruct: any | undefined;
@@ -90,7 +90,7 @@ export class TabPaneSampleInstruction extends BaseElement {
           <span class="headline">指令数数据流</span>
         </div>
       </div>
-    `
+    `;
   }
 
   initElements(): void {
@@ -105,7 +105,7 @@ export class TabPaneSampleInstruction extends BaseElement {
     this.parentElement!.onscroll = () => {
       this.canvasScrollTop = this.parentElement!.scrollTop;
       this.hideTip();
-    }
+    };
     this.instructionEle!.onmousemove = (e): void => {
       if (!this.isUpdateCanvas) {
         this.updateCanvasCoord();
@@ -113,21 +113,21 @@ export class TabPaneSampleInstruction extends BaseElement {
       this.canvasX = e.clientX - this.startX;
       this.canvasY = e.clientY - this.startY + this.canvasScrollTop;
       this.onMouseMove();
-    }
+    };
     this.instructionEle!.onmouseleave = () => {
       this.hideTip();
-    }
+    };
     document.addEventListener('sample-popver-change', (e: any) => {
       const select = Number(e.detail.select);
       this.isChecked = Boolean(select);
       this.hoverSampleStruct = undefined;
       this.drawInstructionData(this.isChecked);
-    })
+    });
     this.listenerResize();
   }
   /**
    * 初始化窗口大小
-   * @param newWidth 
+   * @param newWidth
    */
   updateCanvas(newWidth?: number): void {
     if (this.instructionEle instanceof HTMLCanvasElement) {
@@ -189,7 +189,7 @@ export class TabPaneSampleInstruction extends BaseElement {
       this.floatHint.style.display = 'none';
     }
   }
-  
+
   /**
    * 显示悬浮框
    */
@@ -199,7 +199,7 @@ export class TabPaneSampleInstruction extends BaseElement {
     let x = this.canvasX;
     let y = this.canvasY - this.canvasScrollTop;
     //右边的函数悬浮框显示在左侧
-    if (this.canvasX + this.floatHint!.clientWidth > (this.instructionEle!.clientWidth) || 0) {
+    if (this.canvasX + this.floatHint!.clientWidth > this.instructionEle!.clientWidth || 0) {
       x -= this.floatHint!.clientWidth - 1;
     } else {
       x += 30;
@@ -211,7 +211,7 @@ export class TabPaneSampleInstruction extends BaseElement {
 
   /**
    * 更新悬浮框内容
-   * @returns 
+   * @returns
    */
   updateTipContent(): void {
     const hoverNode = this.hoverSampleStruct;
@@ -219,16 +219,16 @@ export class TabPaneSampleInstruction extends BaseElement {
       return;
     }
     this.hintContent = `<span class="text">${hoverNode.detail}(${hoverNode.name})</span></br>
-      <span class="text">${ this.isChecked ? hoverNode.hoverCycles : hoverNode.hoverInstructions}
+      <span class="text">${this.isChecked ? hoverNode.hoverCycles : hoverNode.hoverInstructions}
       </span>
     `;
   }
 
   /**
    * 设置绘制所需的坐标及宽高
-   * @param sampleNode 
-   * @param instructions 
-   * @param x 
+   * @param sampleNode
+   * @param instructions
+   * @param x
    */
   setSampleFrame(sampleNode: SampleStruct, instructions: number, x: number): void {
     if (!sampleNode.frame) {
@@ -242,10 +242,10 @@ export class TabPaneSampleInstruction extends BaseElement {
 
   /**
    * 判断鼠标当前在那个函数上
-   * @param frame 
-   * @param x 
-   * @param y 
-   * @returns 
+   * @param frame
+   * @param x
+   * @param y
+   * @returns
    */
   isContains(frame: any, x: number, y: number): boolean {
     return x >= frame.x && x <= frame.x + frame.width && frame.y <= y && y <= frame.y + frame.height;
@@ -253,41 +253,46 @@ export class TabPaneSampleInstruction extends BaseElement {
 
   /**
    * 绘制
-   * @param isCycles 
+   * @param isCycles
    */
   drawInstructionData(isCycles: boolean): void {
-    this.isChecked ? this.textEle!.innerText = "cycles数据流" : this.textEle!.innerText = "instructions数据流";
+    this.isChecked ? (this.textEle!.innerText = 'cycles数据流') : (this.textEle!.innerText = 'instructions数据流');
     const clientWidth = this.instructionEle!.width;
     //将数据转换为层级结构
     const instructionArray = this.flattenTreeData
-    .filter((item: SampleStruct) => isCycles ? item.cycles : item.instructions)
-    .reduce((pre: any, cur: any) => {
-      (pre[`${cur.depth}`] = pre[`${cur.depth}`] || []).push(cur);
-      return pre;
-    }, {});
+      .filter((item: SampleStruct) => (isCycles ? item.cycles : item.instructions))
+      .reduce((pre: any, cur: any) => {
+        (pre[`${cur.depth}`] = pre[`${cur.depth}`] || []).push(cur);
+        return pre;
+      }, {});
     for (const key in instructionArray) {
       for (let i = 0; i < instructionArray[key].length; i++) {
         const cur = instructionArray[key][i];
         //第一级节点直接将宽度设置为容器宽度
         if (key === '0') {
-          this.setSampleFrame(cur, clientWidth, 0)
+          this.setSampleFrame(cur, clientWidth, 0);
         } else {
           //获取上一层级节点数据
           const preList = instructionArray[Number(key) - 1];
           //获取当前节点的父节点
           const parentNode = preList.find((node: SampleStruct) => node.name === cur.parentName);
           //计算当前节点下指令数之和 用于计算每个节点所占的宽度比
-          const total = isCycles ? instructionArray[key].filter((i: any) => i.parentName === parentNode.name).reduce((pre: number, cur: SampleStruct) => pre + cur.cycles!, 0) :
-            instructionArray[key].filter((i: any) => i.parentName === parentNode.name).reduce((pre: number, cur: SampleStruct) => pre + cur.instructions!, 0);
+          const total = isCycles
+            ? instructionArray[key]
+                .filter((i: any) => i.parentName === parentNode.name)
+                .reduce((pre: number, cur: SampleStruct) => pre + cur.cycles!, 0)
+            : instructionArray[key]
+                .filter((i: any) => i.parentName === parentNode.name)
+                .reduce((pre: number, cur: SampleStruct) => pre + cur.instructions!, 0);
           const curWidth = isCycles ? cur.cycles : cur.instructions;
           const width = Math.floor(parentNode.frame.width * (curWidth / total));
           if (i === 0) {
             this.setSampleFrame(cur, width, parentNode.frame.x);
           } else {
             const preNode = instructionArray[key][i - 1];
-            preNode.parentName === parentNode.name ?
-              this.setSampleFrame(cur, width, preNode.frame.x + preNode.frame.width) :
-              this.setSampleFrame(cur, width, parentNode.frame.x);
+            preNode.parentName === parentNode.name
+              ? this.setSampleFrame(cur, width, preNode.frame.x + preNode.frame.width)
+              : this.setSampleFrame(cur, width, parentNode.frame.x);
           }
         }
       }
@@ -298,10 +303,10 @@ export class TabPaneSampleInstruction extends BaseElement {
     for (const key in this.instructionArray) {
       for (let i = 0; i < this.instructionArray[key].length; i++) {
         const cur = this.instructionArray[key][i];
-        this.draw(this.ctx!, cur)
+        this.draw(this.ctx!, cur);
       }
     }
-    this.ctx!.closePath()
+    this.ctx!.closePath();
   }
 
   /**
@@ -321,15 +326,15 @@ export class TabPaneSampleInstruction extends BaseElement {
 
   /**
    * 获取鼠标悬停的函数
-   * @param nodes 
-   * @param canvasX 
-   * @param canvasY 
-   * @returns 
+   * @param nodes
+   * @param canvasX
+   * @param canvasY
+   * @returns
    */
   searchDataByCoord(nodes: any, canvasX: number, canvasY: number) {
     for (const key in nodes) {
       for (let i = 0; i < nodes[key].length; i++) {
-       const cur = nodes[key][i];
+        const cur = nodes[key][i];
         if (this.isContains(cur.frame, canvasX, canvasY)) {
           return cur;
         }
@@ -340,15 +345,17 @@ export class TabPaneSampleInstruction extends BaseElement {
 
   /**
    * 绘制方法
-   * @param ctx 
-   * @param data 
+   * @param ctx
+   * @param data
    */
   draw(ctx: CanvasRenderingContext2D, data: SampleStruct) {
     let spApplication = <SpApplication>document.getElementsByTagName('sp-application')[0];
     if (data.frame) {
       ctx.globalAlpha = 1;
-      ctx.fillStyle = ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
-      const textColor = ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
+      ctx.fillStyle =
+        ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
+      const textColor =
+        ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
       ctx.lineWidth = 0.4;
       if (this.hoverSampleStruct && data.name == this.hoverSampleStruct.name) {
         if (spApplication.dark) {
@@ -372,36 +379,38 @@ export class TabPaneSampleInstruction extends BaseElement {
 
   /**
    * 关系树节点赋值
-   * @param relationData 
-   * @param clickData 
+   * @param relationData
+   * @param clickData
    */
   setRelationDataProperty(relationData: Array<any>, clickData: SampleStruct): void {
-    const propertyData = this.instructionData.find((subArr: any) => subArr.some((obj: SampleStruct) => obj.begin === clickData.begin));
+    const propertyData = this.instructionData.find((subArr: any) =>
+      subArr.some((obj: SampleStruct) => obj.begin === clickData.begin)
+    );
     //获取非unknown数据
-    const knownRelation = relationData.filter(relation => relation['name'].indexOf('unknown') < 0);
+    const knownRelation = relationData.filter((relation) => relation['name'].indexOf('unknown') < 0);
     propertyData.forEach((property: any) => {
-      const relation = knownRelation.find(relation => relation['name'] === property['func_name']);
+      const relation = knownRelation.find((relation) => relation['name'] === property['func_name']);
       relation['instructions'] = Math.ceil(property['instructions']) || 1;
       relation['hoverInstructions'] = Math.ceil(property['instructions']);
       relation['cycles'] = Math.ceil(property['cycles']) || 1;
       relation['hoverCycles'] = Math.ceil(property['cycles']);
       this.maxDepth = Math.max(this.maxDepth, relation['depth']);
-    })
+    });
     //获取所有unknown数据
     let instructionSum = 0;
     let cyclesSum = 0;
-    let hoverInstructionsSum= 0;
+    let hoverInstructionsSum = 0;
     let hoverCyclesSum = 0;
-    const unknownRelation = relationData.filter(relation => relation['name'].indexOf('unknown') > -1);
+    const unknownRelation = relationData.filter((relation) => relation['name'].indexOf('unknown') > -1);
     if (unknownRelation.length > 0) {
-      unknownRelation.forEach(unknownItem => {
+      unknownRelation.forEach((unknownItem) => {
         instructionSum = 0;
         cyclesSum = 0;
         hoverInstructionsSum = 0;
         hoverCyclesSum = 0;
         const children = unknownItem['children'];
         for (const key in children) {
-          const it = relationData.find(relation => relation['name'] === key);
+          const it = relationData.find((relation) => relation['name'] === key);
           instructionSum += it['instructions'] ?? 0;
           cyclesSum += it['cycles'] ?? 0;
           hoverInstructionsSum += it['hoverInstructions'] ?? 0;
@@ -411,7 +420,7 @@ export class TabPaneSampleInstruction extends BaseElement {
         unknownItem['hoverInstructions'] = hoverInstructionsSum;
         unknownItem['cycles'] = cyclesSum;
         unknownItem['hoverCycles'] = hoverCyclesSum;
-      })
+      });
     }
   }
 
@@ -424,11 +433,9 @@ export class TabPaneSampleInstruction extends BaseElement {
         const box = this.instructionEle!.getBoundingClientRect();
         const element = this.parentElement!;
         this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft;
-        this.startY = 
+        this.startY =
           box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop;
       }
-    }).observe(this.parentElement!)
+    }).observe(this.parentElement!);
   }
-
-
 }
diff --git a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionDistributions.ts b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionDistributions.ts
index 4afdcb64cc3013c60325b50751ac97a697e309aa..ae03fc528d34a8c55033c1afd362e0f92e74e7a9 100644
--- a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionDistributions.ts
+++ b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionDistributions.ts
@@ -19,14 +19,14 @@ import { debounce } from '../../../Utils';
 const paddingLeft = 100;
 const paddingBottom = 15;
 const xStep = 50; // x轴间距
-const barWidth = 2 // 柱子宽度
+const barWidth = 2; // 柱子宽度
 
 @element('tab-sample-instructions-distrubtions-chart')
 export class TabPaneSampleInstructionDistributions extends BaseElement {
   private instructionChartEle: HTMLCanvasElement | undefined | null;
   private ctx: CanvasRenderingContext2D | undefined | null;
   private onReadableData: Array<any> = [];
-  private hintContent = ""; //悬浮框内容
+  private hintContent = ''; //悬浮框内容
   private floatHint!: HTMLDivElement | undefined | null; //悬浮框
   private canvasScrollTop = 0; // tab页上下滚动位置
   private isUpdateCanvas = false;
@@ -73,7 +73,7 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
       </style>
       <canvas id="instruct-chart-canvas" height="280"></canvas>
       <div id="float_hint" class="frame-tip"></div>
-    `
+    `;
   }
 
   initElements(): void {
@@ -92,7 +92,7 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
     this.parentElement!.onscroll = () => {
       this.canvasScrollTop = this.parentElement!.scrollTop;
       this.hideTip();
-    }
+    };
     this.instructionChartEle!.onmousemove = (e): void => {
       if (!this.isUpdateCanvas) {
         this.updateCanvasCoord();
@@ -100,15 +100,15 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
       this.canvasX = e.clientX - this.startX;
       this.canvasY = e.clientY - this.startY + this.canvasScrollTop;
       this.onMouseMove();
-    }
+    };
     this.instructionChartEle!.onmouseleave = () => {
       this.hideTip();
-    }
+    };
     document.addEventListener('sample-popver-change', (e: any) => {
       const select = Number(e.detail.select);
       this.isChecked = Boolean(select);
       this.calInstructionRangeCount(this.isChecked);
-    })
+    });
     this.listenerResize();
   }
 
@@ -129,10 +129,10 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 获取鼠标悬停的函数
-   * @param nodes 
-   * @param canvasX 
-   * @param canvasY 
-   * @returns 
+   * @param nodes
+   * @param canvasX
+   * @param canvasY
+   * @returns
    */
   searchDataByCoord(nodes: any, canvasX: number, canvasY: number) {
     for (let i = 0; i < nodes.length; i++) {
@@ -184,7 +184,7 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
     let x = this.canvasX;
     let y = this.canvasY - this.canvasScrollTop;
     //右边的函数悬浮框显示在左侧
-    if (this.canvasX + this.floatHint!.clientWidth > (this.instructionChartEle!.clientWidth  || 0)) {
+    if (this.canvasX + this.floatHint!.clientWidth > (this.instructionChartEle!.clientWidth || 0)) {
       x -= this.floatHint!.clientWidth - 1;
     } else {
       x += 20;
@@ -196,7 +196,7 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 更新悬浮框内容
-   * @returns 
+   * @returns
    */
   updateTipContent(): void {
     const hoverNode = this.hoverBar;
@@ -212,10 +212,10 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 判断鼠标当前在那个函数上
-   * @param frame 
-   * @param x 
-   * @param y 
-   * @returns 
+   * @param frame
+   * @param x
+   * @param y
+   * @returns
    */
   isContains(point: any, x: number, y: number): boolean {
     return x >= point.x && x <= point.x + 2 && point.y <= y && y <= point.y + point.height;
@@ -223,7 +223,7 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 统计onReadable数据各指令的个数
-   * @param isCycles 
+   * @param isCycles
    */
   calInstructionRangeCount(isCycles: boolean) {
     if (this.onReadableData.length === 0) return;
@@ -234,19 +234,25 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
       instructions = this.onReadableData.reduce((pre: any, current: any) => {
         (pre[`${Math.ceil(current.cycles)}`] = pre[`${Math.ceil(current.cycles)}`] || []).push(current);
         return pre;
-      }, {})
+      }, {});
     } else {
       instructions = this.onReadableData.reduce((pre: any, current: any) => {
         (pre[`${Math.ceil(current.instructions)}`] = pre[`${Math.ceil(current.instructions)}`] || []).push(current);
         return pre;
-      }, {})
+      }, {});
     }
     this.ctx!.clearRect(0, 0, this.instructionChartEle!.width, this.instructionChartEle!.height);
     this.instructionChartEle!.width = this.clientWidth;
 
-    this.xMaxValue = Object.keys(instructions).map(i => Number(i)).reduce((pre, cur) => Math.max(pre, cur), 0) + 10;
-    const yMaxValue = Object.values(instructions).reduce((pre: number, cur: any) => Math.max(pre, Number((cur.length / count).toFixed(2))), 0);
-    this.yAvg = Number((yMaxValue / 5 * 1.5).toFixed(2)) || yMaxValue;
+    this.xMaxValue =
+      Object.keys(instructions)
+        .map((i) => Number(i))
+        .reduce((pre, cur) => Math.max(pre, cur), 0) + 10;
+    const yMaxValue = Object.values(instructions).reduce(
+      (pre: number, cur: any) => Math.max(pre, Number((cur.length / count).toFixed(2))),
+      0
+    );
+    this.yAvg = Number(((yMaxValue / 5) * 1.5).toFixed(2)) || yMaxValue;
     const height = this.instructionChartEle!.height;
     const width = this.instructionChartEle!.width;
     this.drawLineLabelMarkers(width, height, isCycles);
@@ -255,29 +261,29 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 绘制柱状图
-   * @param instructionData 
-   * @param height 
-   * @param count 
+   * @param instructionData
+   * @param height
+   * @param count
    */
   drawBar(instructionData: any, height: number, count: number) {
     const yTotal = Number((this.yAvg * 5).toFixed(2));
     const interval = Math.floor((height - paddingBottom) / 6);
     for (const x in instructionData) {
       const xNum = Number(x);
-      const xPosition = xStep + (xNum / (this.xCount * this.xAvg)) * (this.xCount * this.xSpacing) - (barWidth / 2);
+      const xPosition = xStep + (xNum / (this.xCount * this.xAvg)) * (this.xCount * this.xSpacing) - barWidth / 2;
       const yNum = Number((instructionData[x].length / count).toFixed(3));
       const percent = Number((yNum / yTotal).toFixed(2));
       const barHeight = (height - paddingBottom - interval) * percent;
       this.drawRect(xPosition, height - paddingBottom - barHeight, barWidth, barHeight);
-      const existX = this.cacheData.find(i => i.instruct === x);
+      const existX = this.cacheData.find((i) => i.instruct === x);
       if (!existX) {
         this.cacheData.push({
           instruct: x,
           x: xPosition,
           y: height - paddingBottom - barHeight,
           height: barHeight,
-          heightPer: parseFloat((yNum * 100).toFixed(2))
-        })
+          heightPer: parseFloat((yNum * 100).toFixed(2)),
+        });
       } else {
         existX.x = xPosition;
       }
@@ -286,15 +292,15 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 绘制x y轴
-   * @param width 
-   * @param height 
-   * @param isCycles 
+   * @param width
+   * @param height
+   * @param isCycles
    */
   drawLineLabelMarkers(width: number, height: number, isCycles: boolean) {
-    this.ctx!.font = "12px Arial";
+    this.ctx!.font = '12px Arial';
     this.ctx!.lineWidth = 1;
-    this.ctx!.fillStyle = "#333";
-    this.ctx!.strokeStyle = "#ccc";
+    this.ctx!.fillStyle = '#333';
+    this.ctx!.strokeStyle = '#ccc';
     if (isCycles) {
       this.ctx!.fillText('cycles数(1e5)', width - paddingLeft + 10, height - paddingBottom);
     } else {
@@ -306,15 +312,15 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
     //绘制y轴
     this.drawLine(xStep, 5, xStep, height - paddingBottom);
     //绘制标记
-    this.drawMarkers(width, height)
+    this.drawMarkers(width, height);
   }
 
   /**
    * 绘制横线
-   * @param x 
-   * @param y 
-   * @param X 
-   * @param Y 
+   * @param x
+   * @param y
+   * @param X
+   * @param Y
    */
   drawLine(x: number, y: number, X: number, Y: number) {
     this.ctx!.beginPath;
@@ -326,8 +332,8 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
 
   /**
    * 绘制x y轴刻度
-   * @param width 
-   * @param height 
+   * @param width
+   * @param height
    */
   drawMarkers(width: number, height: number) {
     this.xCount = 0;
@@ -336,11 +342,11 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
     let y = height - paddingBottom;
     const clientWidth = width - paddingLeft - 50;
     if (clientWidth > this.xMaxValue) {
-      this.xSpacing = Math.floor(clientWidth / 20)
-      this.xAvg = Math.ceil(this.xMaxValue / 20)
+      this.xSpacing = Math.floor(clientWidth / 20);
+      this.xAvg = Math.ceil(this.xMaxValue / 20);
     } else {
-      this.xSpacing = Math.floor(clientWidth / 10)
-      this.xAvg = Math.ceil(this.xMaxValue / 10)
+      this.xSpacing = Math.floor(clientWidth / 10);
+      this.xAvg = Math.ceil(this.xMaxValue / 10);
     }
     while (serrateX <= clientWidth) {
       this.xCount++;
@@ -348,53 +354,53 @@ export class TabPaneSampleInstructionDistributions extends BaseElement {
       this.drawLine(serrateX, y, serrateX, y + 5);
     }
     //绘制x轴刻度
-    this.ctx!.textAlign = "center";
+    this.ctx!.textAlign = 'center';
     for (let i = 0; i <= this.xCount; i++) {
-      const x = xStep + (i * this.xSpacing);
+      const x = xStep + i * this.xSpacing;
       this.ctx!.fillText(`${i * this.xAvg}`, x, height);
     }
     //绘制y轴刻度
-    this.ctx!.textAlign = "center";
+    this.ctx!.textAlign = 'center';
     const yPadding = Math.floor((height - paddingBottom) / 6);
     for (let i = 0; i < 6; i++) {
       if (i === 0) {
         this.ctx!.fillText(`${i}%`, 30, y);
       } else {
-        const y = (height - paddingBottom) - (i * yPadding);
+        const y = height - paddingBottom - i * yPadding;
         this.drawLine(xStep, y, width - paddingLeft, y);
         this.ctx!.fillText(`${parseFloat((i * this.yAvg).toFixed(2)) * 100}%`, 30, y);
       }
     }
   }
 
-
-
   /**
    * 监听页面size变化
    */
   listenerResize(): void {
-    new ResizeObserver(debounce(() => {
-      if (this.instructionChartEle!.getBoundingClientRect()) {
-        const box = this.instructionChartEle!.getBoundingClientRect();
-        const element = this.parentElement!;
-        this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft;
-        this.startY =
-          box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop;
-        this.calInstructionRangeCount(this.isChecked);
-      }
-    }, 100)).observe(this.parentElement!)
+    new ResizeObserver(
+      debounce(() => {
+        if (this.instructionChartEle!.getBoundingClientRect()) {
+          const box = this.instructionChartEle!.getBoundingClientRect();
+          const element = this.parentElement!;
+          this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft;
+          this.startY =
+            box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop;
+          this.calInstructionRangeCount(this.isChecked);
+        }
+      }, 100)
+    ).observe(this.parentElement!);
   }
   /**
    * 绘制方块
-   * @param x 
-   * @param y 
-   * @param X 
-   * @param Y 
+   * @param x
+   * @param y
+   * @param X
+   * @param Y
    */
   drawRect(x: number, y: number, X: number, Y: number) {
     this.ctx!.beginPath();
     this.ctx!.rect(x, y, X, Y);
     this.ctx!.fill();
-    this.ctx!.closePath()
+    this.ctx!.closePath();
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelection.ts b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelection.ts
index 3229352fd9d6865d3595407db66effd1ceb9a8f2..0542aca5232faae68e32781bfe7dbfc4c28994ac 100644
--- a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelection.ts
+++ b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelection.ts
@@ -26,7 +26,7 @@ const Y_PADDING = 4;
 @element('tab-sample-instruction-selection')
 export class TabPaneSampleInstructionSelection extends BaseElement {
   private instructionEle: HTMLCanvasElement | undefined | null;
-  private ctx: CanvasRenderingContext2D| undefined | null;
+  private ctx: CanvasRenderingContext2D | undefined | null;
   private textEle: HTMLSpanElement | undefined | null;
   private instructionArray: Array<any> = [];
   private instructionData: Array<any> = [];
@@ -35,7 +35,7 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
   private canvasY = -1; // 鼠标当前所在画布y坐标
   private startX = 0; // 画布相对于整个界面的x坐标
   private startY = 0; // 画布相对于整个界面的y坐标
-  private hintContent = ""; //悬浮框内容
+  private hintContent = ''; //悬浮框内容
   private floatHint: HTMLDivElement | undefined | null; //悬浮框
   private canvasScrollTop = 0; // tab页上下滚动位置
   private hoverSampleStruct: any | undefined;
@@ -90,7 +90,7 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
           <span class="headline">指令数数据流</span>
         </div>
       </div>
-    `
+    `;
   }
 
   initElements(): void {
@@ -107,7 +107,7 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
     queueMicrotask(() => {
       this.updateCanvas(this.clientWidth);
       this.drawInstructionData(this.isChecked);
-    })
+    });
   }
 
   connectedCallback(): void {
@@ -115,7 +115,7 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
     this.parentElement!.onscroll = () => {
       this.canvasScrollTop = this.parentElement!.scrollTop;
       this.hideTip();
-    }
+    };
     this.instructionEle!.onmousemove = (e): void => {
       if (!this.isUpdateCanvas) {
         this.updateCanvasCoord();
@@ -123,22 +123,22 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
       this.canvasX = e.clientX - this.startX;
       this.canvasY = e.clientY - this.startY + this.canvasScrollTop;
       this.onMouseMove();
-    }
+    };
     this.instructionEle!.onmouseleave = () => {
       this.hideTip();
-    }
+    };
     document.addEventListener('sample-popver-change', (e: any) => {
       const select = Number(e.detail.select);
       this.hoverSampleStruct = undefined;
       this.isChecked = Boolean(select);
       this.drawInstructionData(this.isChecked);
-    })
+    });
     this.listenerResize();
   }
 
   /**
    * 初始化窗口大小
-   * @param newWidth 
+   * @param newWidth
    */
   updateCanvas(newWidth?: number): void {
     if (this.instructionEle instanceof HTMLCanvasElement) {
@@ -190,7 +190,7 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
       this.floatHint.style.display = 'none';
     }
   }
-  
+
   /**
    * 显示悬浮框
    */
@@ -200,7 +200,7 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
     let x = this.canvasX;
     let y = this.canvasY - this.canvasScrollTop;
     //右边的函数悬浮框显示在左侧
-    if (this.canvasX + this.floatHint!.clientWidth > (this.instructionEle!.clientWidth) || 0) {
+    if (this.canvasX + this.floatHint!.clientWidth > this.instructionEle!.clientWidth || 0) {
       x -= this.floatHint!.clientWidth - 1;
     } else {
       x += 30;
@@ -210,10 +210,9 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
     this.floatHint!.style.transform = `translate(${x}px, ${y}px)`;
   }
 
-
   /**
    * 更新悬浮框内容
-   * @returns 
+   * @returns
    */
   updateTipContent(): void {
     const hoverNode = this.hoverSampleStruct;
@@ -221,16 +220,16 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
       return;
     }
     this.hintContent = `<span class="text">${hoverNode.detail}(${hoverNode.name})</span></br>
-      <span class="text">${ this.isChecked ? hoverNode.hoverCycles : hoverNode.hoverInstructions}
+      <span class="text">${this.isChecked ? hoverNode.hoverCycles : hoverNode.hoverInstructions}
       </span>
     `;
   }
 
   /**
    * 设置绘制所需的坐标及宽高
-   * @param sampleNode 
-   * @param instructions 
-   * @param x 
+   * @param sampleNode
+   * @param instructions
+   * @param x
    */
   setSampleFrame(sampleNode: SampleStruct, instructions: number, x: number): void {
     if (!sampleNode.frame) {
@@ -244,10 +243,10 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
 
   /**
    * 判断鼠标当前在那个函数上
-   * @param frame 
-   * @param x 
-   * @param y 
-   * @returns 
+   * @param frame
+   * @param x
+   * @param y
+   * @returns
    */
   isContains(frame: any, x: number, y: number): boolean {
     return x >= frame.x && x <= frame.x + frame.width && frame.y <= y && y <= frame.y + frame.height;
@@ -255,41 +254,46 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
 
   /**
    * 绘制
-   * @param isCycles 
+   * @param isCycles
    */
   drawInstructionData(isCycles: boolean): void {
-    this.isChecked ? this.textEle!.innerText = "cycles数据流" : this.textEle!.innerText = "instructions数据流";
+    this.isChecked ? (this.textEle!.innerText = 'cycles数据流') : (this.textEle!.innerText = 'instructions数据流');
     const clientWidth = this.instructionEle!.width;
     //将数据转换为层级结构
     const instructionArray = this.instructionData
-    .filter((item: any) => isCycles ? item.cycles : item.instructions)
-    .reduce((pre: any, cur: any) => {
-      (pre[`${cur.depth}`] = pre[`${cur.depth}`] || []).push(cur);
-      return pre;
-    }, {});
+      .filter((item: any) => (isCycles ? item.cycles : item.instructions))
+      .reduce((pre: any, cur: any) => {
+        (pre[`${cur.depth}`] = pre[`${cur.depth}`] || []).push(cur);
+        return pre;
+      }, {});
     for (const key in instructionArray) {
       for (let i = 0; i < instructionArray[key].length; i++) {
         const cur = instructionArray[key][i];
         //第一级节点直接将宽度设置为容器宽度
         if (key === '0') {
-          this.setSampleFrame(cur, clientWidth, 0)
+          this.setSampleFrame(cur, clientWidth, 0);
         } else {
           //获取上一层级节点数据
           const preList = instructionArray[Number(key) - 1];
           //获取当前节点的父节点
           const parentNode = preList.find((node: SampleStruct) => node.name === cur.parentName);
           //计算当前节点下指令数之和 用于计算每个节点所占的宽度比
-          const total = isCycles ? instructionArray[key].filter((i: any) => i.parentName === parentNode.name).reduce((pre: number, cur: SampleStruct) => pre + cur.cycles!, 0) :
-            instructionArray[key].filter((i: any) => i.parentName === parentNode.name).reduce((pre: number, cur: SampleStruct) => pre + cur.instructions!, 0);
+          const total = isCycles
+            ? instructionArray[key]
+                .filter((i: any) => i.parentName === parentNode.name)
+                .reduce((pre: number, cur: SampleStruct) => pre + cur.cycles!, 0)
+            : instructionArray[key]
+                .filter((i: any) => i.parentName === parentNode.name)
+                .reduce((pre: number, cur: SampleStruct) => pre + cur.instructions!, 0);
           const curWidth = isCycles ? cur.cycles : cur.instructions;
           const width = Math.floor(parentNode.frame.width * (curWidth / total));
           if (i === 0) {
             this.setSampleFrame(cur, width, parentNode.frame.x);
           } else {
             const preNode = instructionArray[key][i - 1];
-            preNode.parentName === parentNode.name ?
-              this.setSampleFrame(cur, width, preNode.frame.x + preNode.frame.width) :
-              this.setSampleFrame(cur, width, parentNode.frame.x);
+            preNode.parentName === parentNode.name
+              ? this.setSampleFrame(cur, width, preNode.frame.x + preNode.frame.width)
+              : this.setSampleFrame(cur, width, parentNode.frame.x);
           }
         }
       }
@@ -301,10 +305,10 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
     for (const key in instructionArray) {
       for (let i = 0; i < instructionArray[key].length; i++) {
         const cur = instructionArray[key][i];
-        this.draw(this.ctx!, cur)
+        this.draw(this.ctx!, cur);
       }
     }
-    this.ctx!.closePath()
+    this.ctx!.closePath();
   }
 
   /**
@@ -324,15 +328,15 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
 
   /**
    * 获取鼠标悬停的函数
-   * @param nodes 
-   * @param canvasX 
-   * @param canvasY 
-   * @returns 
+   * @param nodes
+   * @param canvasX
+   * @param canvasY
+   * @returns
    */
   searchDataByCoord(nodes: any, canvasX: number, canvasY: number) {
     for (const key in nodes) {
       for (let i = 0; i < nodes[key].length; i++) {
-       const cur = nodes[key][i];
+        const cur = nodes[key][i];
         if (this.isContains(cur.frame, canvasX, canvasY)) {
           return cur;
         }
@@ -343,15 +347,17 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
 
   /**
    * 绘制方法
-   * @param ctx 
-   * @param data 
+   * @param ctx
+   * @param data
    */
   draw(ctx: CanvasRenderingContext2D, data: SampleStruct) {
     let spApplication = <SpApplication>document.getElementsByTagName('sp-application')[0];
     if (data.frame) {
       ctx.globalAlpha = 1;
-      ctx.fillStyle = ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
-      const textColor = ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
+      ctx.fillStyle =
+        ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
+      const textColor =
+        ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth!, ColorUtils.FUNC_COLOR.length)];
       ctx.lineWidth = 0.4;
       if (this.hoverSampleStruct && data.name == this.hoverSampleStruct.name) {
         if (spApplication.dark) {
@@ -375,45 +381,51 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
 
   /**
    * 统计框选指令数的平均值
-   * @param instructionData 
-   * @returns 
+   * @param instructionData
+   * @returns
    */
   getAvgInstructionData(instructionData: Array<any>) {
     const length = instructionData[0].property.length;
-    const knowData = instructionData.filter(instruction => instruction["name"].indexOf("unknown") < 0);
-    knowData.forEach(instruction => {
+    const knowData = instructionData.filter((instruction) => instruction['name'].indexOf('unknown') < 0);
+    knowData.forEach((instruction) => {
       if (instruction.property.length > 0) {
-        const totalInstruction = instruction["property"].reduce((pre: number, cur: SampleStruct) => pre + Math.ceil(cur["instructions"]!), 0);
-        const totalCycles = instruction["property"].reduce((pre: number, cur: SampleStruct) => pre + Math.ceil(cur["cycles"]!), 0);
-        instruction["instructions"] = Math.ceil(totalInstruction / length) || 1;
-        instruction["cycles"] = Math.ceil(totalCycles / length) || 1;
+        const totalInstruction = instruction['property'].reduce(
+          (pre: number, cur: SampleStruct) => pre + Math.ceil(cur['instructions']!),
+          0
+        );
+        const totalCycles = instruction['property'].reduce(
+          (pre: number, cur: SampleStruct) => pre + Math.ceil(cur['cycles']!),
+          0
+        );
+        instruction['instructions'] = Math.ceil(totalInstruction / length) || 1;
+        instruction['cycles'] = Math.ceil(totalCycles / length) || 1;
         instruction['hoverInstructions'] = Math.ceil(totalInstruction / length);
         instruction['hoverCycles'] = Math.ceil(totalCycles / length);
-        this.maxDepth = Math.max(this.maxDepth, instruction["depth"]);
+        this.maxDepth = Math.max(this.maxDepth, instruction['depth']);
       }
-    })
-    const unknownData = instructionData.filter(instruction  => instruction["name"].indexOf("unknown") > -1);
+    });
+    const unknownData = instructionData.filter((instruction) => instruction['name'].indexOf('unknown') > -1);
     let instructionSum = 0;
     let cyclesSum = 0;
-    let hoverInstructionsSum= 0;
+    let hoverInstructionsSum = 0;
     let hoverCyclesSum = 0;
-    unknownData.forEach(unknown => {
+    unknownData.forEach((unknown) => {
       instructionSum = 0;
       cyclesSum = 0;
-      hoverInstructionsSum= 0;
+      hoverInstructionsSum = 0;
       hoverCyclesSum = 0;
-      for (const key in unknown["children"]) {
-        const child = instructionData.find(instruction => instruction["name"] === key);
-        instructionSum +=  child['instructions'] ?? 0;
-        cyclesSum += child["cycles"] ?? 0;
+      for (const key in unknown['children']) {
+        const child = instructionData.find((instruction) => instruction['name'] === key);
+        instructionSum += child['instructions'] ?? 0;
+        cyclesSum += child['cycles'] ?? 0;
         hoverInstructionsSum += child['hoverInstructions'] ?? 0;
         hoverCyclesSum += child['hoverCycles'] ?? 0;
       }
-      unknown["instructions"] = instructionSum;
-      unknown["cycles"] = cyclesSum;
+      unknown['instructions'] = instructionSum;
+      unknown['cycles'] = cyclesSum;
       unknown['hoverInstructions'] = hoverInstructionsSum;
       unknown['hoverCycles'] = hoverCyclesSum;
-    })
+    });
     return instructionData;
   }
 
@@ -426,11 +438,9 @@ export class TabPaneSampleInstructionSelection extends BaseElement {
         const box = this.instructionEle!.getBoundingClientRect();
         const element = document.documentElement;
         this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft;
-        this.startY = 
+        this.startY =
           box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop;
       }
-    }).observe(this.parentElement!)
+    }).observe(this.parentElement!);
   }
-
-
 }
diff --git a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelectionTotalTime.ts b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelectionTotalTime.ts
index 03afdc2f99ce40dd4c5663f92ceaff391db9b61b..ca061a5602890cfae35a8ce85ef77e6a1ec1c55c 100644
--- a/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelectionTotalTime.ts
+++ b/ide/src/trace/component/trace/sheet/bpftrace/TabPaneSampleInstructionSelectionTotalTime.ts
@@ -20,13 +20,13 @@ import { debounce } from '../../../Utils';
 const paddingLeft = 100;
 const paddingBottom = 15;
 const xStart = 50; // x轴起始位置
-const barWidth = 2 // 柱子宽度
+const barWidth = 2; // 柱子宽度
 const millisecond = 1_000_000;
 
 @element('tab-sample-instructions-totaltime-selection')
 export class TabPaneSampleInstructionTotalTime extends BaseElement {
   private instructionChartEle: HTMLCanvasElement | undefined | null;
-  private ctx: CanvasRenderingContext2D| undefined | null;
+  private ctx: CanvasRenderingContext2D | undefined | null;
   private cacheData: Array<any> = [];
   private canvasX = -1; // 鼠标当前所在画布x坐标
   private canvasY = -1; // 鼠标当前所在画布y坐标
@@ -34,7 +34,7 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
   private startY = 0; // 画布相对于整个界面的y坐标
   private hoverBar: any;
   private onReadableData: Array<any> = [];
-  private hintContent = ""; //悬浮框内容
+  private hintContent = ''; //悬浮框内容
   private floatHint: HTMLDivElement | undefined | null; //悬浮框
   private canvasScrollTop = 0; // tab页上下滚动位置
   private isUpdateCanvas = false;
@@ -73,7 +73,7 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
       </style>
       <canvas id="instruct-chart-canvas" height="280"></canvas>
       <div id="float_hint" class="frame-tip"></div>
-    `
+    `;
   }
 
   initElements(): void {
@@ -92,7 +92,7 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
     this.parentElement!.onscroll = () => {
       this.canvasScrollTop = this.parentElement!.scrollTop;
       this.hideTip();
-    }
+    };
     this.instructionChartEle!.onmousemove = (e): void => {
       if (!this.isUpdateCanvas) {
         this.updateCanvasCoord();
@@ -100,10 +100,10 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
       this.canvasX = e.clientX - this.startX;
       this.canvasY = e.clientY - this.startY + this.canvasScrollTop;
       this.onMouseMove();
-    }
+    };
     this.instructionChartEle!.onmouseleave = () => {
       this.hideTip();
-    }
+    };
     this.listenerResize();
   }
 
@@ -124,20 +124,20 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
 
   /**
    * 获取鼠标悬停的函数
-   * @param nodes 
-   * @param canvasX 
-   * @param canvasY 
-   * @returns 
+   * @param nodes
+   * @param canvasX
+   * @param canvasY
+   * @returns
    */
-    searchDataByCoord(nodes: any, canvasX: number, canvasY: number) {
-      for (let i = 0; i < nodes.length; i++) {
-        const element = nodes[i];
-        if (this.isContains(element, canvasX, canvasY)) {
-          return element;
-        }
+  searchDataByCoord(nodes: any, canvasX: number, canvasY: number) {
+    for (let i = 0; i < nodes.length; i++) {
+      const element = nodes[i];
+      if (this.isContains(element, canvasX, canvasY)) {
+        return element;
       }
-      return null;
     }
+    return null;
+  }
 
   /**
    * 鼠标移动
@@ -172,22 +172,22 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
   /**
    * 显示悬浮框
    */
-    showTip(): void {
-      this.floatHint!.innerHTML = this.hintContent;
-      this.floatHint!.style.display = 'block';
-      this.instructionChartEle!.style.cursor = 'pointer';
-      let x = this.canvasX;
-      let y = this.canvasY - this.canvasScrollTop;
-      //右边的函数悬浮框显示在左侧
-      if (this.canvasX + this.floatHint!.clientWidth > (this.instructionChartEle!.clientWidth || 0)) {
-        x -= this.floatHint!.clientWidth - 1;
-      } else {
-        x += 30;
-      }
-      //最下边的函数悬浮框显示在上方
-      y -= this.floatHint!.clientHeight - 1;
-      this.floatHint!.style.transform = `translate(${x}px, ${y}px)`;
+  showTip(): void {
+    this.floatHint!.innerHTML = this.hintContent;
+    this.floatHint!.style.display = 'block';
+    this.instructionChartEle!.style.cursor = 'pointer';
+    let x = this.canvasX;
+    let y = this.canvasY - this.canvasScrollTop;
+    //右边的函数悬浮框显示在左侧
+    if (this.canvasX + this.floatHint!.clientWidth > (this.instructionChartEle!.clientWidth || 0)) {
+      x -= this.floatHint!.clientWidth - 1;
+    } else {
+      x += 30;
     }
+    //最下边的函数悬浮框显示在上方
+    y -= this.floatHint!.clientHeight - 1;
+    this.floatHint!.style.transform = `translate(${x}px, ${y}px)`;
+  }
 
   /**
    * 更新悬浮框内容
@@ -206,14 +206,14 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
 
   /**
    * 判断鼠标当前在那个函数上
-   * @param frame 
-   * @param x 
-   * @param y 
-   * @returns 
+   * @param frame
+   * @param x
+   * @param y
+   * @returns
    */
-    isContains(point: any, x: number, y: number): boolean {
-      return x >= point.x && x <= point.x + 2 && point.y <= y && y <= point.y + point.height;
-    }
+  isContains(point: any, x: number, y: number): boolean {
+    return x >= point.x && x <= point.x + 2 && point.y <= y && y <= point.y + point.height;
+  }
 
   /**
    * 统计onReadable数据各指令数个数
@@ -231,40 +231,46 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
     this.ctx!.clearRect(0, 0, this.instructionChartEle!.width, this.instructionChartEle!.height);
     this.instructionChartEle!.width = this.clientWidth;
 
-    this.xMaxValue = Object.keys(instructionArray).map(i => Number(i)).reduce((pre, cur) => Math.max(pre, cur), 0) + 5;
-    const yMaxValue = Object.values(instructionArray).reduce((pre: number, cur: any) => Math.max(pre, Number((cur.length / count).toFixed(2))), 0);
+    this.xMaxValue =
+      Object.keys(instructionArray)
+        .map((i) => Number(i))
+        .reduce((pre, cur) => Math.max(pre, cur), 0) + 5;
+    const yMaxValue = Object.values(instructionArray).reduce(
+      (pre: number, cur: any) => Math.max(pre, Number((cur.length / count).toFixed(2))),
+      0
+    );
     this.yAvg = Number(((yMaxValue / 5) * 1.5).toFixed(2));
     const height = this.instructionChartEle!.height;
     const width = this.instructionChartEle!.width;
     this.drawLineLabelMarkers(width, height);
     this.drawBar(instructionArray, height, count);
   }
-  
+
   /**
    * 绘制柱状图
-   * @param instructionData 
-   * @param height 
-   * @param count 
+   * @param instructionData
+   * @param height
+   * @param count
    */
   drawBar(instructionData: any, height: number, count: number) {
     const yTotal = Number((this.yAvg * 5).toFixed(2));
     const interval = Math.floor((height - paddingBottom) / 6);
     for (const x in instructionData) {
       const xNum = Number(x);
-      const xPosition = xStart + ( xNum / (this.xCount * this.xAvg) ) * (this.xCount * this.xSpacing) - (barWidth / 2);
+      const xPosition = xStart + (xNum / (this.xCount * this.xAvg)) * (this.xCount * this.xSpacing) - barWidth / 2;
       const yNum = Number((instructionData[x].length / count).toFixed(3));
       const percent = Number((yNum / yTotal).toFixed(2));
       const barHeight = (height - paddingBottom - interval) * percent;
       this.drawRect(xPosition, height - paddingBottom - barHeight, barWidth, barHeight);
-      const existX = this.cacheData.find(i => i.instruct === x);
+      const existX = this.cacheData.find((i) => i.instruct === x);
       if (!existX) {
         this.cacheData.push({
           instruct: x,
           x: xPosition,
           y: height - paddingBottom - barHeight,
           height: barHeight,
-          heightPer: parseFloat((yNum * 100).toFixed(2))
-        })
+          heightPer: parseFloat((yNum * 100).toFixed(2)),
+        });
       } else {
         existX.x = xPosition;
       }
@@ -273,14 +279,14 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
 
   /**
    * 绘制x y轴
-   * @param width 
-   * @param height 
+   * @param width
+   * @param height
    */
   drawLineLabelMarkers(width: number, height: number) {
-    this.ctx!.font = "12px Arial";
+    this.ctx!.font = '12px Arial';
     this.ctx!.lineWidth = 1;
-    this.ctx!.fillStyle = "#333";    
-    this.ctx!.strokeStyle = "#ccc";
+    this.ctx!.fillStyle = '#333';
+    this.ctx!.strokeStyle = '#ccc';
 
     this.ctx!.fillText('时长 / ms', width - paddingLeft, height - paddingBottom);
 
@@ -289,17 +295,17 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
     //绘制y轴
     this.drawLine(xStart, 5, xStart, height - paddingBottom);
     //绘制标记
-    this.drawMarkers(width, height)
+    this.drawMarkers(width, height);
   }
 
   /**
    * 绘制横线
-   * @param x 
-   * @param y 
-   * @param X 
-   * @param Y 
+   * @param x
+   * @param y
+   * @param X
+   * @param Y
    */
-  drawLine(x:number, y: number, X: number, Y: number) {
+  drawLine(x: number, y: number, X: number, Y: number) {
     this.ctx!.beginPath;
     this.ctx!.moveTo(x, y);
     this.ctx!.lineTo(X, Y);
@@ -309,8 +315,8 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
 
   /**
    * 绘制x y轴刻度
-   * @param width 
-   * @param height 
+   * @param width
+   * @param height
    */
   drawMarkers(width: number, height: number) {
     this.xCount = 0;
@@ -319,11 +325,11 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
     let yHeight = height - paddingBottom;
     const clientWidth = width - paddingLeft - 50;
     if (clientWidth > this.xMaxValue) {
-      this.xSpacing = Math.floor(clientWidth / 20)
-      this.xAvg = Math.ceil(this.xMaxValue / 20)
+      this.xSpacing = Math.floor(clientWidth / 20);
+      this.xAvg = Math.ceil(this.xMaxValue / 20);
     } else {
-      this.xSpacing = Math.floor(clientWidth / 10)
-      this.xAvg = Math.ceil(this.xMaxValue / 10)
+      this.xSpacing = Math.floor(clientWidth / 10);
+      this.xAvg = Math.ceil(this.xMaxValue / 10);
     }
     while (serrateX <= clientWidth) {
       this.xCount++;
@@ -331,16 +337,16 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
       this.drawLine(serrateX, yHeight, serrateX, yHeight + 5);
     }
     //绘制x轴刻度
-    this.ctx!.textAlign = "center";
+    this.ctx!.textAlign = 'center';
     for (let i = 0; i <= this.xCount; i++) {
-      const x = xStart + (i * this.xSpacing);
+      const x = xStart + i * this.xSpacing;
       this.ctx!.fillText(`${i * this.xAvg}`, x, height);
     }
     //绘制y轴刻度
-    this.ctx!.textAlign = "center";
+    this.ctx!.textAlign = 'center';
     const yPadding = Math.floor((height - paddingBottom) / 6);
     for (let i = 0; i < 6; i++) {
-      const y = (height - paddingBottom) - (i * yPadding);
+      const y = height - paddingBottom - i * yPadding;
       if (i === 0) {
         this.ctx!.fillText(`${i}%`, 30, y);
       } else {
@@ -354,28 +360,30 @@ export class TabPaneSampleInstructionTotalTime extends BaseElement {
    * 监听页面size变化
    */
   listenerResize(): void {
-    new ResizeObserver(debounce(() => {
-      if (this.instructionChartEle!.getBoundingClientRect()) {
-        const box = this.instructionChartEle!.getBoundingClientRect();
-        const element = this.parentElement!;
-        this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft;
-        this.startY = 
-          box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop;
-        this.calInstructionRangeCount();
-      }
-    }, 100)).observe(this.parentElement!)
+    new ResizeObserver(
+      debounce(() => {
+        if (this.instructionChartEle!.getBoundingClientRect()) {
+          const box = this.instructionChartEle!.getBoundingClientRect();
+          const element = this.parentElement!;
+          this.startX = box.left + Math.max(element.scrollLeft, document.body.scrollLeft) - element.clientLeft;
+          this.startY =
+            box.top + Math.max(element.scrollTop, document.body.scrollTop) - element.clientTop + this.canvasScrollTop;
+          this.calInstructionRangeCount();
+        }
+      }, 100)
+    ).observe(this.parentElement!);
   }
   /**
    * 绘制方块
-   * @param x 
-   * @param y 
-   * @param X 
-   * @param Y 
+   * @param x
+   * @param y
+   * @param X
+   * @param Y
    */
   drawRect(x: number, y: number, X: number, Y: number) {
     this.ctx!.beginPath();
     this.ctx!.rect(x, y, X, Y);
     this.ctx!.fill();
-    this.ctx!.closePath()
+    this.ctx!.closePath();
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts b/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts
index 3182b0f7137c21d0d809ca1eb2120f812772fa1f..b839174a24c08aa00baad848afd081ecaae5d320 100644
--- a/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts
+++ b/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts
@@ -42,7 +42,11 @@ export class TabPaneClockCounter extends BaseElement {
     this.clockCounterTbl!.loading = true;
     for (let key of collect.keys()) {
       let counters = collect.get(key);
-      let res = await counters?.({ startNS: clockCounterValue.leftNs, endNS: clockCounterValue.rightNs, queryAll: true });
+      let res = await counters?.({
+        startNS: clockCounterValue.leftNs,
+        endNS: clockCounterValue.rightNs,
+        queryAll: true,
+      });
       let sd = this.createSelectCounterData(key, res || [], clockCounterValue.leftNs, clockCounterValue.rightNs);
       sumCount += Number.parseInt(sd.count || '0');
       dataSource.push(sd);
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts
index 0e8281ab6099c684b34de8b1a78e488c58e6d442..eaf2b54eda680af801fd979ee32038b55fc4dbc0 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts
@@ -19,7 +19,7 @@ import { BoxJumpParam, SelectionData } from '../../../../bean/BoxSelection';
 import { Utils } from '../../base/Utils';
 import { SPTChild } from '../../../../bean/StateProcessThread';
 import { resizeObserver } from '../SheetUtils';
-import {getTabBoxChildData} from "../../../../database/sql/ProcessThread.sql";
+import { getTabBoxChildData } from '../../../../database/sql/ProcessThread.sql';
 
 @element('tabpane-box-child')
 export class TabPaneBoxChild extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts
index fa4d260d8b33b2d4a829ec3c2585cfeeb78bd712..06452c6885887456112835e9e92af93a5a1a044c 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts
@@ -25,7 +25,7 @@ import { TraceRow } from '../../base/TraceRow';
 import { CpuFreqStruct } from '../../../../database/ui-worker/ProcedureWorkerFreq';
 import { CpuState } from '../../../../database/logic-worker/ProcedureLogicWorkerCpuState';
 import { CpuStateStruct } from '../../../../database/ui-worker/cpu/ProcedureWorkerCpuState';
-import {getTabPaneCounterSampleData} from "../../../../database/sql/Cpu.sql";
+import { getTabPaneCounterSampleData } from '../../../../database/sql/Cpu.sql';
 
 @element('tabpane-counter-sample')
 export class TabPaneCounterSample extends BaseElement {
@@ -102,7 +102,7 @@ export class TabPaneCounterSample extends BaseElement {
                 cpuStateFilter[i].value === data.value &&
                 cpuStateFilter[i].cpu === data.cpu &&
                 Math.max(TraceRow.rangeSelectObject?.startNS!, cpuStateFilter[i].startTs!) <
-                Math.min(TraceRow.rangeSelectObject?.endNS!, cpuStateFilter[i].startTs! + cpuStateFilter[i].dur!)
+                  Math.min(TraceRow.rangeSelectObject?.endNS!, cpuStateFilter[i].startTs! + cpuStateFilter[i].dur!)
               ) {
                 CpuStateStruct.hoverStateStruct = cpuStateFilter[i];
               }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts
index 7e29ecad9f1f1523a89afaed4dfd53f2f681ca29..eeb078a01f3a0a2b09258dac4b8273907708b31c 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts
@@ -19,7 +19,7 @@ import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection';
 import { log } from '../../../../../log/Log';
 import { Utils } from '../../base/Utils';
 import { resizeObserver } from '../SheetUtils';
-import {getTabCpuByProcess} from "../../../../database/sql/Cpu.sql";
+import { getTabCpuByProcess } from '../../../../database/sql/Cpu.sql';
 
 @element('tabpane-cpu-process')
 export class TabPaneCpuByProcess extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts
index e17b74227c6dbf6d2e8c4a4d0459dcde5ec12c81..0d7d4c083958f036869d06252f8c936b3f68cffe 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts
@@ -128,10 +128,7 @@ export class TabPaneCpuByThread extends BaseElement {
   private updateCpuValues(e: any, cpuByThreadValue: any, cpuByThreadObject: any): void {
     cpuByThreadObject[`cpu${e.cpu}`] = e.wallDuration || 0;
     cpuByThreadObject[`cpu${e.cpu}TimeStr`] = getProbablyTime(e.wallDuration || 0);
-    let ratio = (
-      (100.0 * (e.wallDuration || 0)) /
-      (cpuByThreadValue.rightNs - cpuByThreadValue.leftNs)
-    ).toFixed(2);
+    let ratio = ((100.0 * (e.wallDuration || 0)) / (cpuByThreadValue.rightNs - cpuByThreadValue.leftNs)).toFixed(2);
     if (ratio === '0.00') {
       ratio = '0';
     }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts
index ee6d1cf28c173acd43abed02fd47e2ef63402cde..aad75ebedfea639d923bf914a575283f76616bfd 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts
@@ -18,7 +18,7 @@ import { LitTable } from '../../../../../base-ui/table/lit-table';
 import { SelectionParam } from '../../../../bean/BoxSelection';
 import { CpuUsage, Freq } from '../../../../bean/CpuUsage';
 import { resizeObserver } from '../SheetUtils';
-import {getTabCpuFreq, getTabCpuUsage} from "../../../../database/sql/Cpu.sql";
+import { getTabCpuFreq, getTabCpuUsage } from '../../../../database/sql/Cpu.sql';
 
 @element('tabpane-cpu-usage')
 export class TabPaneCpuUsage extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts
index 36fdc4feab9733366d3eed450bfd3aba49619378..deaff2b04f17a6c1851e0970470ae71d983dfb19 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts
@@ -106,7 +106,7 @@ export class TabPaneFrequencySample extends BaseElement {
               freqFilter[i].value === data.value &&
               freqFilter[i].cpu === data.cpu &&
               Math.max(TraceRow.rangeSelectObject?.startNS!, freqFilter[i].startNS!) <
-              Math.min(TraceRow.rangeSelectObject?.endNS!, freqFilter[i].startNS! + freqFilter[i].dur!)
+                Math.min(TraceRow.rangeSelectObject?.endNS!, freqFilter[i].startNS! + freqFilter[i].dur!)
             ) {
               CpuFreqStruct.hoverCpuFreqStruct = freqFilter[i];
             }
@@ -189,7 +189,7 @@ export class TabPaneFrequencySample extends BaseElement {
       });
     } else {
       frqSampleParam.cpuFreqFilterNames.forEach((item: string) => {
-        let cpuStateIds:any = frqSampleParam.cpuStateRowsId.filter(
+        let cpuStateIds: any = frqSampleParam.cpuStateRowsId.filter(
           (it: any) => it.cpu === Number(item.replace(/[^\d]/g, ' ').trim())
         );
         stateFiliterIds.push(cpuStateIds[0].filterId);
@@ -201,7 +201,11 @@ export class TabPaneFrequencySample extends BaseElement {
         stateFiliterIds
       );
       let msg = {
-        timeParam: { leftNs: frqSampleParam.leftNs, rightNs: frqSampleParam.rightNs, recordStartNs: frqSampleParam.recordStartNs },
+        timeParam: {
+          leftNs: frqSampleParam.leftNs,
+          rightNs: frqSampleParam.rightNs,
+          recordStartNs: frqSampleParam.recordStartNs,
+        },
         result,
         sampleMap,
         res,
@@ -222,7 +226,9 @@ export class TabPaneFrequencySample extends BaseElement {
   getInitTime(initFreqResult: Array<any>, sampleMap: Map<any, any>, selectionParam: SelectionParam) {
     let leftStartNs = selectionParam.leftNs + selectionParam.recordStartNs;
     let rightEndNs = selectionParam.rightNs + selectionParam.recordStartNs;
-    if (initFreqResult.length === 0) { return };
+    if (initFreqResult.length === 0) {
+      return;
+    }
     let includeData = initFreqResult.findIndex((a) => a.ts >= leftStartNs);
     if (includeData !== 0) {
       initFreqResult = initFreqResult.slice(
@@ -230,7 +236,9 @@ export class TabPaneFrequencySample extends BaseElement {
         initFreqResult.length
       );
     }
-    if (initFreqResult[0].ts < leftStartNs && includeData !== 0) { initFreqResult[0].ts = leftStartNs };
+    if (initFreqResult[0].ts < leftStartNs && includeData !== 0) {
+      initFreqResult[0].ts = leftStartNs;
+    }
     initFreqResult.forEach((item, idx) => {
       if (idx + 1 === initFreqResult.length) {
         item.time = rightEndNs - item.ts;
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts b/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
index be6692f70ed4e5a384b76ee5fe38a5b12f69f84e..21375a5453bf04cc29eff8d23f878015a5bfee70 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
@@ -19,7 +19,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection';
 import { resizeObserver } from '../SheetUtils';
 import { Utils } from '../../base/Utils';
 import { SliceGroup } from '../../../../bean/StateProcessThread';
-import {sliceSPTSender} from "../../../../database/data-trafic/SliceSender";
+import { sliceSPTSender } from '../../../../database/data-trafic/SliceSender';
 
 @element('tabpane-pts')
 export class TabPanePTS extends BaseElement {
@@ -45,7 +45,7 @@ export class TabPanePTS extends BaseElement {
 
   getDataByPTS(ptsLeftNs: number, ptsRightNs: number, cpus: Array<number>) {
     this.ptsTbl!.loading = true;
-    sliceSPTSender(ptsLeftNs, ptsRightNs, cpus, 'spt-getPTS').then(res => {
+    sliceSPTSender(ptsLeftNs, ptsRightNs, cpus, 'spt-getPTS').then((res) => {
       this.ptsTbl!.loading = false;
       this.ptsTbl!.recycleDataSource = res;
       this.theadClick(res);
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts
index 0e4081182b38dbc1be0648d76fb6a71f9a3668b1..f505a9b35b1f71f992fde32b3b5e9f71d3c80cc4 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts
@@ -19,7 +19,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection';
 import { SliceGroup } from '../../../../bean/StateProcessThread';
 import { resizeObserver } from '../SheetUtils';
 import { Utils } from '../../base/Utils';
-import {sliceSPTSender} from "../../../../database/data-trafic/SliceSender";
+import { sliceSPTSender } from '../../../../database/data-trafic/SliceSender';
 
 @element('tabpane-spt')
 export class TabPaneSPT extends BaseElement {
@@ -54,7 +54,7 @@ export class TabPaneSPT extends BaseElement {
 
   getDataBySPT(leftNs: number, rightNs: number, cpus: Array<number>) {
     this.sptTbl!.loading = true;
-    sliceSPTSender(leftNs, rightNs, cpus, 'spt-getSPT').then(res => {
+    sliceSPTSender(leftNs, rightNs, cpus, 'spt-getSPT').then((res) => {
       this.sptTbl!.loading = false;
       this.sptTbl!.recycleDataSource = res;
       this.theadClick(res);
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneSchedPriority.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneSchedPriority.ts
index 579879dae230bf2d89be806563842d55a2ea5a8a..7d1c691659ba2793a4b1d1ac232ab7f3c1a3077f 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneSchedPriority.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneSchedPriority.ts
@@ -21,7 +21,7 @@ import { Utils } from '../../base/Utils';
 import { Priority } from '../../../../bean/StateProcessThread';
 import { queryThreadStateArgsByName } from '../../../../database/sql/ProcessThread.sql';
 import { FlagsConfig } from '../../../../component/SpFlags';
-import {sliceSPTSender} from "../../../../database/data-trafic/SliceSender";
+import { sliceSPTSender } from '../../../../database/data-trafic/SliceSender';
 
 @element('tabpane-sched-priority')
 export class TabPaneSchedPriority extends BaseElement {
@@ -64,8 +64,8 @@ export class TabPaneSchedPriority extends BaseElement {
     function setPriority(item: Priority, strArg: string[]) {
       let flagsItem = window.localStorage.getItem(FlagsConfig.FLAGS_CONFIG_KEY);
       let flagsItemJson = JSON.parse(flagsItem!);
-      let hmKernel = flagsItemJson.HMKernel; 
-      if (hmKernel === "Enabled") {
+      let hmKernel = flagsItemJson.HMKernel;
+      if (hmKernel === 'Enabled') {
         if (item.priority >= 0 && item.priority <= 40) {
           item.priorityType = 'CFS';
         } else {
@@ -86,11 +86,10 @@ export class TabPaneSchedPriority extends BaseElement {
           item.priorityType = 'CFS';
         }
       }
-      
     }
     // thread_state表中runnable数据的Map
     const runnableMap = new Map<string, Priority>();
-    sliceSPTSender(sptParam.leftNs, sptParam.rightNs, [], 'spt-getCpuPriorityByTime').then(res => {
+    sliceSPTSender(sptParam.leftNs, sptParam.rightNs, [], 'spt-getCpuPriorityByTime').then((res) => {
       for (const item of res) {
         if (['R', 'R+'].includes(item.state)) {
           runnableMap.set(`${item.id}_${item.startTime + item.dur}`, item);
@@ -101,7 +100,7 @@ export class TabPaneSchedPriority extends BaseElement {
         this.fetchData(item, setPriority, resultData, runnableMap);
       }
       this.getDataByPriority(resultData);
-    })
+    });
   }
 
   private fetchData(
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts b/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts
index e695da9cbc59842500e3ec23d5eae4d11f100277..a1be579d8cdbc3388ec53e94023f33ac6ff59860 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts
@@ -46,22 +46,27 @@ export class TabPaneEnergyAnomaly extends BaseElement {
           }
           if (!tempSet.has(values[0])) {
             tempSet.add(values[0]);
-            htmlText += '<div><table' +
+            htmlText +=
+              '<div><table' +
               ' style=\'border:none;table-layout:fixed;word-break:break-all\' cellspacing="5"; cellpadding="5"><tbody>' +
               '<tr><td colspan="5" style=\'font-weight: 700;font-size: 14px\'>' +
-              values[1] + '</td></tr>';
+              values[1] +
+              '</td></tr>';
           }
           // @ts-ignore
           if (tempSet.has(Object.values(bean[index])[0])) {
             let appValues = values[TabPaneEnergyAnomaly.VALUE_INDEX].split(',');
             htmlText +=
-              '<tr><td style=\'font-weight: 400;font-size: 14px;opacity:0.9;width:150px;\'>' +
+              "<tr><td style='font-weight: 400;font-size: 14px;opacity:0.9;width:150px;'>" +
               values[TabPaneEnergyAnomaly.KEY_INDEX] +
-              '</td><td style=\'font-weight: 400;font-size: 14px;opacity:0.6;width:250px;\'>' +
-              (findAppNameIndex >= 0 ? appValues.length > 1 ? appValues[findAppNameIndex] :
-                values[TabPaneEnergyAnomaly.VALUE_INDEX] : values[TabPaneEnergyAnomaly.VALUE_INDEX]) +
+              "</td><td style='font-weight: 400;font-size: 14px;opacity:0.6;width:250px;'>" +
+              (findAppNameIndex >= 0
+                ? appValues.length > 1
+                  ? appValues[findAppNameIndex]
+                  : values[TabPaneEnergyAnomaly.VALUE_INDEX]
+                : values[TabPaneEnergyAnomaly.VALUE_INDEX]) +
               TabPaneEnergyAnomaly.getUnit(values[TabPaneEnergyAnomaly.KEY_INDEX]) +
-              '</td><td style=\'width:100px\'></td>';
+              "</td><td style='width:100px'></td>";
           }
           if (index + 1 < bean.length) {
             // @ts-ignore
@@ -78,13 +83,13 @@ export class TabPaneEnergyAnomaly extends BaseElement {
     }
   }
 
-  private spliceHtmlText(findAppNameIndex: number, nextValues: any[], htmlText: string, tempSet: Set<any>): string{
+  private spliceHtmlText(findAppNameIndex: number, nextValues: any[], htmlText: string, tempSet: Set<any>): string {
     let appValues = nextValues[TabPaneEnergyAnomaly.VALUE_INDEX].split(',');
     if (tempSet.has(nextValues[0])) {
       htmlText +=
-        '<td style=\'font-weight: 400;font-size: 14px;opacity:0.9;width:150px;\'>' +
+        "<td style='font-weight: 400;font-size: 14px;opacity:0.9;width:150px;'>" +
         nextValues[TabPaneEnergyAnomaly.KEY_INDEX] +
-        '</td><td style=\'font-weight: 400;font-size: 14px;opacity:0.6;width:250px;\'>' +
+        "</td><td style='font-weight: 400;font-size: 14px;opacity:0.6;width:250px;'>" +
         (findAppNameIndex >= 0
           ? appValues.length > 1
             ? appValues[findAppNameIndex]
@@ -95,9 +100,9 @@ export class TabPaneEnergyAnomaly extends BaseElement {
     } else {
       htmlText += '</tr>';
       htmlText += '</tbody></table></div>';
-      return htmlText
+      return htmlText;
     }
-    return htmlText
+    return htmlText;
   }
 
   private setFilterAppMapByAnomalyData(bean: EnergyAnomalyStruct[]): Map<string, any> {
@@ -146,8 +151,7 @@ export class TabPaneEnergyAnomaly extends BaseElement {
 
   initElements(): void {
     this.tblAnomaly = this.shadowRoot?.querySelector<LitTable>('#anomalyselectionTbl');
-    this.tblAnomaly?.addEventListener('column-click', (ev: any) => {
-    });
+    this.tblAnomaly?.addEventListener('column-click', (ev: any) => {});
   }
 
   connectedCallback() {
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts b/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts
index 130029e9e0ac5afe0fc39be1e82076b089bd891f..7593069cc3a1b03cbdd4ea9a3bef3697136c7e70 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts
@@ -19,7 +19,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection';
 import { SpHiSysEnergyChart } from '../../../chart/SpHiSysEnergyChart';
 import '../../../../../base-ui/table/lit-table';
 import { resizeObserver } from '../SheetUtils';
-import {getTabPowerBatteryData} from "../../../../database/sql/ProcessThread.sql";
+import { getTabPowerBatteryData } from '../../../../database/sql/ProcessThread.sql';
 
 @element('tabpane-power-battery')
 export class TabPanePowerBattery extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts
index 242c8c51337961a24f4bba01e3bd2088200c137d..8b8c44a461a96ec4f0a11884e5cc928454af1997 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts
@@ -128,7 +128,7 @@ export class TabPanePowerDetails extends BaseElement {
       time_type: [],
       duration_type: [],
       energy_type: [],
-      count_type: []
+      count_type: [],
     };
     this.itemType.time_type = this.getTimeTypeValue();
     this.itemType.duration_type = this.getDurationTypeValue();
@@ -151,7 +151,8 @@ export class TabPanePowerDetails extends BaseElement {
   }
 
   getTotalEnergy(powerData: any) {
-    return powerData.POWER_IDE_CPU.getTotalEnergy(false) +
+    return (
+      powerData.POWER_IDE_CPU.getTotalEnergy(false) +
       powerData.POWER_IDE_LOCATION.getTotalEnergy(false) +
       powerData.POWER_IDE_GPU.getTotalEnergy(true) +
       powerData.POWER_IDE_DISPLAY.getTotalEnergy(true) +
@@ -159,7 +160,8 @@ export class TabPanePowerDetails extends BaseElement {
       powerData.POWER_IDE_BLUETOOTH.getTotalEnergy(false) +
       powerData.POWER_IDE_FLASHLIGHT.getTotalEnergy(false) +
       powerData.POWER_IDE_AUDIO.getTotalEnergy(false) +
-      powerData.POWER_IDE_WIFISCAN.getTotalEnergy(false);
+      powerData.POWER_IDE_WIFISCAN.getTotalEnergy(false)
+    );
   }
 
   queryDataByDB(val: SelectionParam | any): void {
@@ -182,9 +184,14 @@ export class TabPanePowerDetails extends BaseElement {
           tsMax = 0;
         } else if (currentAppIndex > -1 && (set.has(item.appKey) ? item.startNS >= tsMax : true)) {
           if (set.has(item.appKey)) {
-            powerDatum[item.appKey.toLocaleLowerCase()] = item.startNS >= tsMax ? (tsMax = item.startNS , item.eventValue) : powerDatum[item.appKey.toLocaleLowerCase()];
+            powerDatum[item.appKey.toLocaleLowerCase()] =
+              item.startNS >= tsMax
+                ? ((tsMax = item.startNS), item.eventValue)
+                : powerDatum[item.appKey.toLocaleLowerCase()];
           } else {
-            powerDatum[item.appKey.toLocaleLowerCase()] = (powerDatum[item.appKey.toLocaleLowerCase()] || 0) + parseInt(item.eventValue.split(',')[currentAppIndex]);
+            powerDatum[item.appKey.toLocaleLowerCase()] =
+              (powerDatum[item.appKey.toLocaleLowerCase()] || 0) +
+              parseInt(item.eventValue.split(',')[currentAppIndex]);
           }
         }
       });
@@ -261,13 +268,13 @@ export class TabPanePowerDetails extends BaseElement {
         if (type === 'number') {
           return sort === 2
             ? // @ts-ignore
-            parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]) -
-            // @ts-ignore
-            parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property])
+              parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]) -
+                // @ts-ignore
+                parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property])
             : // @ts-ignore
-            parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property]) -
-            // @ts-ignore
-            parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]);
+              parseFloat(aPowerDetails[property] === '-' ? 0 : aPowerDetails[property]) -
+                // @ts-ignore
+                parseFloat(bPowerDetails[property] === '-' ? 0 : bPowerDetails[property]);
         } else {
           // @ts-ignore
           if (bPowerDetails[property] > aPowerDetails[property]) {
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
index 9f460a56da4f3646c741d913b9a0e0647c647f04..9e30a8f95d1e4ae2026eed365856f680c47b1f9a 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
@@ -23,8 +23,8 @@ import { type LitSlicerTrack } from '../../../../../base-ui/slicer/lit-slicer';
 import {
   querySysLocationDetailsData,
   querySysLockDetailsData,
-  querySystemWorkData
-} from "../../../../database/sql/SqlLite.sql";
+  querySystemWorkData,
+} from '../../../../database/sql/SqlLite.sql';
 
 @element('tabpane-system-details')
 export class TabPaneSystemDetails extends BaseElement {
@@ -101,10 +101,10 @@ export class TabPaneSystemDetails extends BaseElement {
       this.detailsTbl!.dataSource = this.detailsSource;
       this.boxDetails!.style.width = '65%';
     }
-   this.detailsTblStyle();
+    this.detailsTblStyle();
   }
 
-  detailsTblStyle(){
+  detailsTblStyle() {
     this.detailsTbl!.shadowRoot?.querySelectorAll<HTMLDivElement>('.tr').forEach((tr) => {
       tr.style.gridTemplateColumns = '120px 1fr';
     });
@@ -173,7 +173,7 @@ export class TabPaneSystemDetails extends BaseElement {
     });
   }
 
-  tblSystemDetailsStyle(){
+  tblSystemDetailsStyle() {
     this.tblSystemDetails?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
       td.style.fontSize = '14px';
       if (td.getAttribute('title') === 'Event Name' || td.getAttribute('title') === 'Time') {
@@ -213,7 +213,7 @@ export class TabPaneSystemDetails extends BaseElement {
             watchIndex[number] = number + filterData.ts;
           }
         } else {
-          lifeCycleData = this.getSysDataExtend(rightNs, watchIndex, filterData, lifeCycleData)
+          lifeCycleData = this.getSysDataExtend(rightNs, watchIndex, filterData, lifeCycleData);
         }
       }
     }
@@ -235,12 +235,7 @@ export class TabPaneSystemDetails extends BaseElement {
     return resultData;
   }
 
-  getSysDataExtend(
-    rightNs: number,
-    watchIndex: Array<string>,
-    filterData: any,
-    lifeCycleData: any[]
-  ): any[]{
+  getSysDataExtend(rightNs: number, watchIndex: Array<string>, filterData: any, lifeCycleData: any[]): any[] {
     let number = watchIndex.indexOf(filterData.workId);
     if (number > -1) {
       lifeCycleData[number].rangeData.push(filterData);
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts
index 588cfa522a927a4c135bdb9c4356b55b7615f791..5b51903c2c2c05e76421a8729e13903f7283a215 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.html.ts
@@ -56,7 +56,7 @@ export const TabPaneCallTreeHtml = `
         <lit-slicer style="width:100%">
         <div id="left_table" style="width: 65%">
             <lit-table id="tb-calltree" style="height: auto" tree>
-                <lit-table-column class="call-tree-column" width="70%" title="Call Stack" data-index="symbolName" key="symbolName"  align="flex-start" retract></lit-table-column>
+                <lit-table-column class="call-tree-column" width="70%" title="Call Stack" data-index="symbol" key="symbol"  align="flex-start" retract></lit-table-column>
                 <lit-table-column class="call-tree-column" width="1fr" title="Local" data-index="self" key="self"  align="flex-start"  order></lit-table-column>
                 <lit-table-column class="call-tree-column" width="1fr" title="Weight" data-index="weight" key="weight"  align="flex-start"  order></lit-table-column>
                 <lit-table-column class="call-tree-column" width="1fr" title="%" data-index="weightPercent" key="weightPercent"  align="flex-start"  order></lit-table-column>
@@ -72,7 +72,7 @@ export const TabPaneCallTreeHtml = `
                 </template>
             </lit-table-column>
             <lit-table-column class="call-tree-column" width="60px" title="" data-index="count" key="count"  align="flex-start"></lit-table-column>
-            <lit-table-column class="call-tree-column" width="1fr" title="" data-index="symbolName" key="symbolName"  align="flex-start"></lit-table-column>
+            <lit-table-column class="call-tree-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start"></lit-table-column>
         </lit-table>
         </div>
         </lit-slicer>
@@ -83,4 +83,4 @@ export const TabPaneCallTreeHtml = `
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>
     <div class="loading call-tree-loading"></div>
-    </div>`;
\ No newline at end of file
+    </div>`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
index 7bcc472a3371576ec40b5ad0ac93283d630d007d..e989a6affdb2dbe42484da5e0db8b40eaaf2f39d 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
@@ -288,8 +288,7 @@ export class TabPaneCallTree extends BaseElement {
     this.getChildTree(bean.children as Array<MerageBean>, maxId, children);
     let callTreeArr = parents.reverse().concat(children.reverse());
     for (let data of callTreeArr) {
-      data.type =
-        data.libName.endsWith('.so.1') || data.libName.endsWith('.dll') || data.libName.endsWith('.so') ? 0 : 1;
+      data.type = data.lib.endsWith('.so.1') || data.lib.endsWith('.dll') || data.lib.endsWith('.so') ? 0 : 1;
     }
     let len = callTreeArr.length;
     this.callTreeRightSource = callTreeArr;
@@ -406,10 +405,10 @@ export class TabPaneCallTree extends BaseElement {
   }
 
   private handleSymbolCase(data: any, callTreeFuncArgs: any[]): void {
-    this.callTreeFilter!.addDataMining({ name: this.callTreeSelectedData.symbolName }, data.item);
+    this.callTreeFilter!.addDataMining({ name: this.callTreeSelectedData.symbol }, data.item);
     callTreeFuncArgs.push({
       funcName: 'splitTree',
-      funcArgs: [this.callTreeSelectedData.symbolName, false, true],
+      funcArgs: [this.callTreeSelectedData.symbol, false, true],
     });
   }
 
@@ -453,10 +452,10 @@ export class TabPaneCallTree extends BaseElement {
         funcName: 'resetAllNode',
         funcArgs: [],
       });
-      list.forEach((symbolName: string) => {
+      list.forEach((symbol: string) => {
         callTreeFuncArgs.push({
           funcName: 'clearSplitMapData',
-          funcArgs: [symbolName],
+          funcArgs: [symbol],
         });
       });
     }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts
index 7ba23a150b4aa986b239237efd219637bb7022d3..72c9406b7e4332dfb1ef3a890f9ecebed7f3418e 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.html.ts
@@ -59,7 +59,7 @@ export const TabPaneFileSystemCalltreeHtml = `
         <lit-slicer style="width:100%">
         <div id="left_table" style="width: 65%">
             <lit-table id="tb-filesystem-calltree" style="height: auto" tree>
-                <lit-table-column class="fs-call-tree-column" width="70%" title="Call Stack" data-index="symbolName" key="symbolName"  align="flex-start"retract></lit-table-column>
+                <lit-table-column class="fs-call-tree-column" width="70%" title="Call Stack" data-index="symbol" key="symbol"  align="flex-start"retract></lit-table-column>
                 <lit-table-column class="fs-call-tree-column" width="1fr" title="Local" data-index="self" key="self"  align="flex-start"  order></lit-table-column>
                 <lit-table-column class="fs-call-tree-column" width="1fr" title="Weight" data-index="weight" key="weight"  align="flex-start"  order></lit-table-column>
                 <lit-table-column class="fs-call-tree-column" width="1fr" title="%" data-index="weightPercent" key="weightPercent"  align="flex-start"  order></lit-table-column>
@@ -76,7 +76,7 @@ export const TabPaneFileSystemCalltreeHtml = `
                 </template>
             </lit-table-column>
             <lit-table-column class="fs-call-tree-column" width="60px" title="" data-index="count" key="count"  align="flex-start"></lit-table-column>
-            <lit-table-column class="fs-call-tree-column" width="1fr" title="" data-index="symbolName" key="symbolName"  align="flex-start"></lit-table-column>
+            <lit-table-column class="fs-call-tree-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start"></lit-table-column>
         </lit-table>
         </div>
         </lit-slicer>
@@ -87,4 +87,4 @@ export const TabPaneFileSystemCalltreeHtml = `
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>
     <div class="loading fs-call-tree-loading"></div>
-    </div>`;
\ No newline at end of file
+    </div>`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
index 8e47b5b9da782f90036228e8ffcb1c2098610dc6..ccae08aa1be47c531192e5402b4289df71c6cf8a 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
@@ -265,8 +265,7 @@ export class TabpaneFilesystemCalltree extends BaseElement {
     this.getChildTree(merageBean.children as Array<FileMerageBean>, maxId, children);
     let fsMerageParentsList = parents.reverse().concat(children.reverse());
     for (let data of fsMerageParentsList) {
-      data.type =
-        data.libName.endsWith('.so.1') || data.libName.endsWith('.dll') || data.libName.endsWith('.so') ? 0 : 1;
+      data.type = data.lib.endsWith('.so.1') || data.lib.endsWith('.dll') || data.lib.endsWith('.so') ? 0 : 1;
     }
     let len = fsMerageParentsList.length;
     this.fsCallTreeRightSource = fsMerageParentsList;
@@ -335,10 +334,10 @@ export class TabpaneFilesystemCalltree extends BaseElement {
   }
 
   private handleSymbolCase(data: any, fsCallTreeFuncArgs: any[]): void {
-    this.fsCallTreeFilter!.addDataMining({ name: this.fsCallTreeCurrentSelectedData.symbolName }, data.item);
+    this.fsCallTreeFilter!.addDataMining({ name: this.fsCallTreeCurrentSelectedData.symbol }, data.item);
     fsCallTreeFuncArgs.push({
       funcName: 'splitTree',
-      funcArgs: [this.fsCallTreeCurrentSelectedData.symbolName, false, true],
+      funcArgs: [this.fsCallTreeCurrentSelectedData.symbol, false, true],
     });
   }
 
@@ -492,10 +491,10 @@ export class TabpaneFilesystemCalltree extends BaseElement {
         funcName: 'resetAllNode',
         funcArgs: [],
       });
-      list.forEach((symbolName: string) => {
+      list.forEach((symbol: string) => {
         fsCallTreeFuncArgs.push({
           funcName: 'clearSplitMapData',
-          funcArgs: [symbolName],
+          funcArgs: [symbol],
         });
       });
     }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts
index dff44cc63bf9c42aa16f09dcd42822d2476633ca..83717e142d29a5244072afb50a1b366d456aba9b 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.html.ts
@@ -84,4 +84,4 @@ export const TabPaneFileSystemDescHistoryHtml = `
             <tab-pane-filter id="filesystem-desc-history-filter" first second></tab-pane-filter>
             <div class="filesystem-desc-history-loading"></div>
         </div>
-`;
\ No newline at end of file
+`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts
index a8fccd6610729732af0cea6741c020268b237876..28c4b96198afe2bf67f4a7bed361b75b1253a4d4 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.html.ts
@@ -83,4 +83,4 @@ export const TabPaneFileSystemDescTimeSliceHtml = `
             <tab-pane-filter id="fs-slice-filter"></tab-pane-filter>
             <div class="loading fs-slice-loading"></div>
         </div>
-`;
\ No newline at end of file
+`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
index 24403958dfbfc962fb91a8b9626d279edaacc00f..96c765586e14e7df40e2dbafd6c5bc86a0716ceb 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
@@ -46,8 +46,9 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
     }
     if (this.fsDescTimeSliceTblData) {
       // @ts-ignore
-      this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height =
-        `${this.parentElement!.clientHeight - 20 - 31  }px`;
+      this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = `${
+        this.parentElement!.clientHeight - 20 - 31
+      }px`;
     }
     this.fsDescTimeSliceTbl!.recycleDataSource = [];
     this.fsDescTimeSliceTblData!.recycleDataSource = [];
@@ -123,17 +124,19 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
       if (this.parentElement?.clientHeight != 0) {
         if (this.fsDescTimeSliceTbl) {
           // @ts-ignore
-          this.fsDescTimeSliceTbl.shadowRoot.querySelector('.table').style.height =
-            `${this.parentElement!.clientHeight - 10 - 31  }px`;
+          this.fsDescTimeSliceTbl.shadowRoot.querySelector('.table').style.height = `${
+            this.parentElement!.clientHeight - 10 - 31
+          }px`;
           this.fsDescTimeSliceTbl.reMeauseHeight();
         }
-       if (this.fsDescTimeSliceTblData) {
-         // @ts-ignore
-         this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height =
-           `${this.parentElement!.clientHeight - 10 - 31  }px`;
-         this.fsDescTimeSliceTblData.reMeauseHeight();
-         this.fsDescTimeSliceLoadingPage.style.height = `${this.parentElement!.clientHeight - 24  }px`;
-       }
+        if (this.fsDescTimeSliceTblData) {
+          // @ts-ignore
+          this.fsDescTimeSliceTblData.shadowRoot.querySelector('.table').style.height = `${
+            this.parentElement!.clientHeight - 10 - 31
+          }px`;
+          this.fsDescTimeSliceTblData.reMeauseHeight();
+          this.fsDescTimeSliceLoadingPage.style.height = `${this.parentElement!.clientHeight - 24}px`;
+        }
       }
     }).observe(this.parentElement!);
   }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts
index 16fd24f67347a2b45f2abbe8b4f1581592ea56be..89aa33ae2976573d2754e2345d4284b901b41d3c 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.html.ts
@@ -91,4 +91,4 @@ export const TabPaneFileSystemEventsHtml = `
             <tab-pane-filter id="fs-event-filter" first second></tab-pane-filter>
             <div class="loading fs-event-loading"></div>
         </div>
-`;
\ No newline at end of file
+`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
index 83ac450a25fa582ace85a835d16aad44084ea070..d5b6be160a3a864279c109ff5976b30e26f4e549 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
@@ -246,9 +246,9 @@ export class TabPaneFileSystemEvents extends BaseElement {
       let arr = Array.from(this.fsSysEventFilterSource);
       arr.sort((fsEventA, fsEventB): number => {
         if (key == 'startTsStr') {
-          return (type === 1) ? (fsEventA.startTs - fsEventB.startTs) : (fsEventB.startTs - fsEventA.startTs);
+          return type === 1 ? fsEventA.startTs - fsEventB.startTs : fsEventB.startTs - fsEventA.startTs;
         } else if (key == 'durStr') {
-          return (type === 1) ? (fsEventA.dur - fsEventB.dur) : (fsEventB.dur - fsEventA.dur);
+          return type === 1 ? fsEventA.dur - fsEventB.dur : fsEventB.dur - fsEventA.dur;
         } else if (key == 'process') {
           return this.sortProcessCase(fsEventA, fsEventB, type);
         } else if (key == 'thread') {
@@ -256,7 +256,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
         } else if (key == 'typeStr') {
           return this.sortTypeCase(fsEventA, fsEventB, type);
         } else if (key == 'fd') {
-          return (type === 1) ? ((fsEventA.fd || 0) - (fsEventB.fd || 0)) : ((fsEventB.fd || 0) - (fsEventA.fd || 0));
+          return type === 1 ? (fsEventA.fd || 0) - (fsEventB.fd || 0) : (fsEventB.fd || 0) - (fsEventA.fd || 0);
         } else if (key == 'path') {
           return this.sortPathCase(fsEventA, fsEventB, type);
         } else {
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts
index 8cd91e7ecc7a74803a8a0040ee12b0c36d545af0..e69eec0c980defc2a4fea2c290f8b4360beb9bed 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.html.ts
@@ -106,4 +106,4 @@ export const TabPaneFilesystemStatisticsAnalysisHtml = `
             </div>
         </div>
         <tab-pane-filter id="filter" options></tab-pane-filter>
-`;
\ No newline at end of file
+`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts
index 181e751376ec875bffa22f764284a16e42254908..f39880859480ca998f48ed7cf080189db55d039e 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.html.ts
@@ -106,4 +106,4 @@ export const TabPaneIOTierStatisticsAnalysisHtml = `
             </div>
         </div>
         <tab-pane-filter id="filter" options></tab-pane-filter>
-`;
\ No newline at end of file
+`;
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
index 5fccecc81bf82c8bdd997710ce29b0852ea5206d..ca9a07a1fd5510dee07e1eb3362ba1adad3125af 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
@@ -78,7 +78,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       for (let ioTable of this.ioTableArray) {
         initSort(ioTable!, this.ioSortColumn, this.ioSortType);
       }
-    }   
+    }
     this.reset(this.ioTierTableProcess!, false);
     this.hideProcessCheckBox!.checked = false;
     this.hideThreadCheckBox!.checked = false;
@@ -108,7 +108,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         this.disableCheckBox();
         this.getIOTierProcess(this.processData);
       }
-    );   
+    );
   }
 
   initElements(): void {
@@ -188,7 +188,12 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         this.hideProcess();
       } else {
         this.reset(this.ioTierTableProcess!, false);
-        this.showAssignLevel(this.ioTierTableProcess!, this.ioTierTableThread!, 1, this.tierTableType!.recycleDataSource);
+        this.showAssignLevel(
+          this.ioTierTableProcess!,
+          this.ioTierTableThread!,
+          1,
+          this.tierTableType!.recycleDataSource
+        );
         this.getIOTierProcess(this.processData);
       }
     });
@@ -258,7 +263,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
           tierTable.style.display = 'grid';
           tierTable!.removeAttribute('hideDownload');
         } else {
-          tierTable!.style.display = 'none'; 
+          tierTable!.style.display = 'none';
           tierTable.setAttribute('hideDownload', '');
         }
       }
@@ -274,7 +279,12 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.tableFunction!.recycleDataSource = [];
   }
 
-  private showAssignLevel(showIoTable: LitTable, hideIoTable: LitTable, currentLevel: number,currentLevelData: Array<any>): void {
+  private showAssignLevel(
+    showIoTable: LitTable,
+    hideIoTable: LitTable,
+    currentLevel: number,
+    currentLevelData: Array<any>
+  ): void {
     showIoTable!.style.display = 'grid';
     hideIoTable!.style.display = 'none';
     hideIoTable.setAttribute('hideDownload', '');
@@ -287,7 +297,12 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.iOTierStatisticsAnalysisBack!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By type AllDuration') {
         this.iOTierStatisticsAnalysisBack!.style.visibility = 'hidden';
-        this.showAssignLevel(this.ioTierTableProcess!, this.tierTableType!, 0, this.ioTierTableProcess!.recycleDataSource);
+        this.showAssignLevel(
+          this.ioTierTableProcess!,
+          this.tierTableType!,
+          0,
+          this.ioTierTableProcess!.recycleDataSource
+        );
         this.processPieChart();
       } else if (this.tabName!.textContent === 'Statistic By Thread AllDuration') {
         if (this.hideProcessCheckBox?.checked) {
@@ -305,7 +320,12 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
           this.showAssignLevel(this.tierTableType!, this.ioTierTableSo!, 1, this.tierTableType!.recycleDataSource);
           this.typePieChart();
         } else {
-          this.showAssignLevel(this.ioTierTableThread!, this.ioTierTableSo!, 2, this.ioTierTableThread!.recycleDataSource);
+          this.showAssignLevel(
+            this.ioTierTableThread!,
+            this.ioTierTableSo!,
+            2,
+            this.ioTierTableThread!.recycleDataSource
+          );
           this.threadPieChart();
         }
       } else if (this.tabName!.textContent === 'Statistic By Function AllDuration') {
@@ -846,7 +866,9 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       for (let item of value) {
         dur += item.dur;
         tName = item.threadName =
-          item.threadName === null || item.threadName === undefined ? `Thread(${item.tid})` : `${item.threadName}(${item.tid})`;
+          item.threadName === null || item.threadName === undefined
+            ? `Thread(${item.tid})`
+            : `${item.threadName}(${item.tid})`;
       }
       const threadData = {
         tableName: tName,
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
index b0cf348a38b350bbaa2059027b73031fc506c78e..a8ea69dceefe3201087b64b4d2cc05aee234e541 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
@@ -53,16 +53,18 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     });
     if (this.ioCompletionTimesTbl) {
       // @ts-ignore
-      this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height =
-        `${this.parentElement!.clientHeight - 20 - 31  }px`;
+      this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height = `${
+        this.parentElement!.clientHeight - 20 - 31
+      }px`;
       this.ioCompletionTimesTbl.recycleDataSource = [];
     }
-   if (this.ioCompletionTimesTblData) {
-     // @ts-ignore
-     this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height =
-       `${this.parentElement!.clientHeight - 20 - 31  }px`;
-     this.ioCompletionTimesTblData.recycleDataSource = [];
-   }
+    if (this.ioCompletionTimesTblData) {
+      // @ts-ignore
+      this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height = `${
+        this.parentElement!.clientHeight - 20 - 31
+      }px`;
+      this.ioCompletionTimesTblData.recycleDataSource = [];
+    }
   }
 
   connectedCallback() {
@@ -70,17 +72,19 @@ export class TabPaneIoCompletionTimes extends BaseElement {
       if (this.parentElement?.clientHeight != 0) {
         if (this.ioCompletionTimesTbl) {
           // @ts-ignore
-          this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height =
-            `${this.parentElement!.clientHeight - 10 - 33  }px`;
+          this.ioCompletionTimesTbl.shadowRoot.querySelector('.table').style.height = `${
+            this.parentElement!.clientHeight - 10 - 33
+          }px`;
           this.ioCompletionTimesTbl.reMeauseHeight();
         }
         if (this.ioCompletionTimesTblData) {
           // @ts-ignore
-          this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height =
-            `${this.parentElement!.clientHeight - 10 - 33  }px`;
+          this.ioCompletionTimesTblData.shadowRoot.querySelector('.table').style.height = `${
+            this.parentElement!.clientHeight - 10 - 33
+          }px`;
           this.ioCompletionTimesTblData.reMeauseHeight();
         }
-        this.ioCompletionTimesLoadingPage.style.height = `${this.parentElement!.clientHeight - 24  }px`;
+        this.ioCompletionTimesLoadingPage.style.height = `${this.parentElement!.clientHeight - 24}px`;
       }
     }).observe(this.parentElement!);
   }
@@ -155,14 +159,14 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     if (this.currentSelection != ioCompletionTimeParam) {
       this.currentSelection = ioCompletionTimeParam;
       filter!.setSelectList(this.native_type, null, 'Tier');
-      filter!.firstSelect = `${typeIndexOf  }`;
+      filter!.firstSelect = `${typeIndexOf}`;
       this.queryData(ioCompletionTimeParam);
     } else {
       if (typeIndexOf == parseInt(filter!.firstSelect)) {
         return;
       }
       filter!.setSelectList(this.native_type, null, 'Tier');
-      filter!.firstSelect = `${typeIndexOf  }`;
+      filter!.firstSelect = `${typeIndexOf}`;
       this.filterTypeData(ioCompletionTimeParam?.fileSystemIoData?.path || undefined);
       ioCompletionTimeParam.fileSystemIoData = undefined;
       this.ioCompletionTimesTbl!.recycleDataSource = this.ioCompletionTimesSource;
@@ -281,8 +285,11 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     });
   }
 
-  private sortOperationCase(ioCompletionTimesA: IoCompletionTimes,
-    ioCompletionTimesB: IoCompletionTimes, type: number): number {
+  private sortOperationCase(
+    ioCompletionTimesA: IoCompletionTimes,
+    ioCompletionTimesB: IoCompletionTimes,
+    type: number
+  ): number {
     if (ioCompletionTimesA.operation > ioCompletionTimesB.operation) {
       return type === 2 ? 1 : -1;
     } else if (ioCompletionTimesA.operation == ioCompletionTimesB.operation) {
@@ -292,8 +299,11 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     }
   }
 
-  private sortThreadCase(ioCompletionTimesA: IoCompletionTimes,
-    ioCompletionTimesB: IoCompletionTimes, type: number): number {
+  private sortThreadCase(
+    ioCompletionTimesA: IoCompletionTimes,
+    ioCompletionTimesB: IoCompletionTimes,
+    type: number
+  ): number {
     if (ioCompletionTimesA.thread > ioCompletionTimesB.thread) {
       return type === 2 ? 1 : -1;
     } else if (ioCompletionTimesA.thread == ioCompletionTimesB.thread) {
@@ -303,8 +313,11 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     }
   }
 
-  private sortProcessCase(ioCompletionTimesA: IoCompletionTimes,
-    ioCompletionTimesB: IoCompletionTimes, type: number): number {
+  private sortProcessCase(
+    ioCompletionTimesA: IoCompletionTimes,
+    ioCompletionTimesB: IoCompletionTimes,
+    type: number
+  ): number {
     if (ioCompletionTimesA.process > ioCompletionTimesB.process) {
       return type === 2 ? 1 : -1;
     } else if (ioCompletionTimesA.process == ioCompletionTimesB.process) {
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
index 71912250d50847d60225fcaec3d5dcab0e2c0a2a..60b9b372cfe7eed0013bd20178263d7be2a8d1b6 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
@@ -21,7 +21,7 @@ import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressB
 import { procedurePool } from '../../../../database/Procedure';
 import { VirtualMemoryEvent, VM_TYPE_MAP } from '../../../../database/logic-worker/ProcedureLogicWorkerFileSystem';
 import { FilterData, TabPaneFilter } from '../TabPaneFilter';
-import {getTabVirtualMemoryType} from '../../../../database/sql/Memory.sql';
+import { getTabVirtualMemoryType } from '../../../../database/sql/Memory.sql';
 import { TabPaneVMEventsHtml } from './TabPaneVMEvents.html';
 
 @element('tabpane-virtualmemory-event')
@@ -49,7 +49,8 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
     });
     if (this.vmEventTbl) {
       // @ts-ignore
-      this.vmEventTbl.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+      this.vmEventTbl.shadowRoot.querySelector('.table').style.height =
+        this.parentElement!.clientHeight - 20 - 31 + 'px';
       this.vmEventTbl.recycleDataSource = [];
     }
     if (this.vmEventTblData) {
@@ -69,12 +70,12 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
             this.parentElement!.clientHeight - 10 - 33 + 'px';
           this.vmEventTbl.reMeauseHeight();
         }
-       if (this.vmEventTblData) {
-         // @ts-ignore
-         this.vmEventTblData.shadowRoot.querySelector('.table').style.height =
-           this.parentElement!.clientHeight - 10 - 33 + 'px';
-         this.vmEventTblData.reMeauseHeight();
-       }
+        if (this.vmEventTblData) {
+          // @ts-ignore
+          this.vmEventTblData.shadowRoot.querySelector('.table').style.height =
+            this.parentElement!.clientHeight - 10 - 33 + 'px';
+          this.vmEventTblData.reMeauseHeight();
+        }
         this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
diff --git a/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts b/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts
index 59af7ad2ac6ccb52792fe389fb3ba3ef89fad202..8d7251733fd8575dc709be70bd7a4a366cdd7fc8 100644
--- a/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts
+++ b/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts
@@ -19,7 +19,7 @@ import { SelectionParam } from '../../../../bean/BoxSelection';
 import { Utils } from '../../base/Utils';
 import { log } from '../../../../../log/Log';
 import { resizeObserver } from '../SheetUtils';
-import {getTabFps} from "../../../../database/sql/SqlLite.sql";
+import { getTabFps } from '../../../../database/sql/SqlLite.sql';
 
 @element('tabpane-fps')
 export class TabPaneFps extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts b/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts
index fc9a8cbc6818b04dea643bdf9ba5801dab23891e..e526ce98ef39daa30e3cb2dca60ccc39c6af58c3 100644
--- a/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts
+++ b/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts
@@ -20,7 +20,7 @@ import { Utils } from '../../base/Utils';
 import { ColorUtils } from '../../base/ColorUtils';
 import { CpuFreqLimitsStruct } from '../../../../database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits';
 import { resizeObserver } from '../SheetUtils';
-import { getCpuLimitFreqBoxSelect } from "../../../../database/sql/Cpu.sql";
+import { getCpuLimitFreqBoxSelect } from '../../../../database/sql/Cpu.sql';
 
 @element('tabpane-cpu-freq-limits')
 export class TabPaneCpuFreqLimits extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts
index 9a0c10b06083396bbeb3e64ddb2f415fdd7d1d84..a98bc0b29422385619baf53a0acfd66e20144f1d 100644
--- a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts
+++ b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqDataCut.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2023 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,7 +23,7 @@ import { Utils } from '../../base/Utils';
 import { resizeObserver } from '../SheetUtils';
 import { LitChartScatter } from '../../../../../base-ui/chart/scatter/LitChartScatter';
 import { SpSegmentationChart } from '../../../chart/SpSegmentationChart';
-import { TabPaneFreqUsageConfig, type TabPaneRunningConfig, TabPaneCpuFreqConfig} from './TabPaneFreqUsageConfig';
+import { TabPaneFreqUsageConfig, type TabPaneRunningConfig, TabPaneCpuFreqConfig } from './TabPaneFreqUsageConfig';
 @element('tabpane-freqdatacut')
 export class TabPaneFreqDataCut extends BaseElement {
   private threadStatesTbl: LitTable | null | undefined;
@@ -55,7 +54,19 @@ export class TabPaneFreqDataCut extends BaseElement {
       pidArr.push(
         new TabPaneFreqUsageConfig(
           Utils.PROCESS_MAP.get(i) === null ? 'Process ' + i : Utils.PROCESS_MAP.get(i) + ' ' + i,
-          '', i, '', 0, '', '', 0, '', 0, 'process', -1, [])
+          '',
+          i,
+          '',
+          0,
+          '',
+          '',
+          0,
+          '',
+          0,
+          'process',
+          -1,
+          []
+        )
       );
     }
     // 拷贝给私有属性，以便后续进行数据切割时免除整理进程层级数据
@@ -65,14 +76,14 @@ export class TabPaneFreqDataCut extends BaseElement {
    * 初始化数据
    */
   async init(threadStatesParam: SelectionParam): Promise<void> {
-    let {runningMap, sum}: {
-      runningMap: Map<string, Array<TabPaneRunningConfig>>,
-      sum: number
-    }
-      = await this.queryRunningData(threadStatesParam);
-    let cpuFreqData: Array<TabPaneCpuFreqConfig> = await this.queryCpuFreqData(
-      threadStatesParam
-    );
+    let {
+      runningMap,
+      sum,
+    }: {
+      runningMap: Map<string, Array<TabPaneRunningConfig>>;
+      sum: number;
+    } = await this.queryRunningData(threadStatesParam);
+    let cpuFreqData: Array<TabPaneCpuFreqConfig> = await this.queryCpuFreqData(threadStatesParam);
     if (runningMap.size > 0) {
       // 将cpu频点数据与running状态数据整合，保证其上该段时长内有对应的cpu频点数据
       this.mergeFreqData(runningMap, cpuFreqData, sum);
@@ -133,42 +144,59 @@ export class TabPaneFreqDataCut extends BaseElement {
       startNS: number;
       filter_id: number;
       value: number;
-      dur: number}
-    > = await queryCpuFreqUsageData(queryId);
+      dur: number;
+    }> = await queryCpuFreqUsageData(queryId);
     for (let i of res) {
       dealArr.push(
-        new TabPaneCpuFreqConfig(
-          i.startNS + threadStatesParam.recordStartNs,
-          idMap.get(i.filter_id)!,
-          i.value,
-          i.dur
-        ));
+        new TabPaneCpuFreqConfig(i.startNS + threadStatesParam.recordStartNs, idMap.get(i.filter_id)!, i.value, i.dur)
+      );
     }
     return dealArr;
   }
   /**
    * 查询框选区域内的所有running状态数据
    */
-  async queryRunningData(threadStatesParam: SelectionParam):
-    Promise<{runningMap: Map<string, Array<TabPaneRunningConfig>>; sum: number}> {
-    let result: Array<TabPaneRunningConfig>
-      = await getTabRunningPercent(threadStatesParam.threadIds, threadStatesParam.leftNs, threadStatesParam.rightNs);
+  async queryRunningData(
+    threadStatesParam: SelectionParam
+  ): Promise<{ runningMap: Map<string, Array<TabPaneRunningConfig>>; sum: number }> {
+    let result: Array<TabPaneRunningConfig> = await getTabRunningPercent(
+      threadStatesParam.threadIds,
+      threadStatesParam.leftNs,
+      threadStatesParam.rightNs
+    );
     let needDeal: Map<string, Array<TabPaneRunningConfig>> = new Map();
     let sum: number = 0;
     if (result !== null && result.length > 0) {
-      let processArr: Array<number> = threadStatesParam.processIds.length > 1
-        ? [...new Set(threadStatesParam.processIds)] : threadStatesParam.processIds;
+      let processArr: Array<number> =
+        threadStatesParam.processIds.length > 1
+          ? [...new Set(threadStatesParam.processIds)]
+          : threadStatesParam.processIds;
       for (let e of result) {
         if (processArr.includes(e.pid)) {
           if (needDeal.get(e.pid + '_' + e.tid) === undefined) {
             this.threadArr.push(
-              new TabPaneFreqUsageConfig(Utils.THREAD_MAP.get(e.tid) + ' ' + e.tid,
-                '', e.pid, e.tid, 0, '', '', 0, '', 0, 'thread', -1, [])
+              new TabPaneFreqUsageConfig(
+                Utils.THREAD_MAP.get(e.tid) + ' ' + e.tid,
+                '',
+                e.pid,
+                e.tid,
+                0,
+                '',
+                '',
+                0,
+                '',
+                0,
+                'thread',
+                -1,
+                []
+              )
             );
             needDeal.set(e.pid + '_' + e.tid, new Array());
           }
-          if (e.ts < threadStatesParam.leftNs + threadStatesParam.recordStartNs &&
-            e.ts + e.dur > threadStatesParam.leftNs + threadStatesParam.recordStartNs) {
+          if (
+            e.ts < threadStatesParam.leftNs + threadStatesParam.recordStartNs &&
+            e.ts + e.dur > threadStatesParam.leftNs + threadStatesParam.recordStartNs
+          ) {
             const ts = e.ts;
             e.ts = threadStatesParam.leftNs + threadStatesParam.recordStartNs;
             e.dur = ts + e.dur - (threadStatesParam.leftNs + threadStatesParam.recordStartNs);
@@ -184,7 +212,7 @@ export class TabPaneFreqDataCut extends BaseElement {
         }
       }
     }
-    return {'runningMap': needDeal, 'sum': sum};
+    return { runningMap: needDeal, sum: sum };
   }
   /**
    * 将cpu频点数据与running状态数据整合，保证其上该段时长内有对应的cpu频点数据
@@ -201,42 +229,122 @@ export class TabPaneFreqDataCut extends BaseElement {
           // 只需要判断running状态数据与频点数据cpu相同的情况
           if (value[i].cpu === dealArr[j].cpu) {
             // running状态数据的开始时间大于频点数据开始时间，小于频点结束时间。且running状态数据的持续时间小于频点结束时间减去running状态数据开始时间的情况
-            if (value[i].ts > dealArr[j].startNS &&
+            if (
+              value[i].ts > dealArr[j].startNS &&
               value[i].ts < dealArr[j].startNS + dealArr[j].dur &&
-              value[i].dur < dealArr[j].startNS + dealArr[j].dur - value[i].ts) {
-              resultList.push(new TabPaneFreqUsageConfig(value[i].thread, value[i].ts, value[i].pid,
-                value[i].tid, 0, value[i].cpu,dealArr[j].value, value[i].dur, '', (value[i].dur / sum) * 100,
-                'freqdata', -1, undefined));
+              value[i].dur < dealArr[j].startNS + dealArr[j].dur - value[i].ts
+            ) {
+              resultList.push(
+                new TabPaneFreqUsageConfig(
+                  value[i].thread,
+                  value[i].ts,
+                  value[i].pid,
+                  value[i].tid,
+                  0,
+                  value[i].cpu,
+                  dealArr[j].value,
+                  value[i].dur,
+                  '',
+                  (value[i].dur / sum) * 100,
+                  'freqdata',
+                  -1,
+                  undefined
+                )
+              );
               break;
             }
             // running状态数据的开始时间大于频点数据开始时间，小于频点结束时间。且running状态数据的持续时间大于频点结束时间减去running状态数据开始时间的情况
-            if (value[i].ts > dealArr[j].startNS &&
+            if (
+              value[i].ts > dealArr[j].startNS &&
               value[i].ts < dealArr[j].startNS + dealArr[j].dur &&
-              value[i].dur > dealArr[j].startNS + dealArr[j].dur - value[i].ts) {
-              resultList.push(new TabPaneFreqUsageConfig(value[i].thread, value[i].ts, value[i].pid,
-                value[i].tid, 0, value[i].cpu, dealArr[j].value, dealArr[j].startNS + dealArr[j].dur - value[i].ts, '',
-                ((dealArr[j].startNS + dealArr[j].dur - value[i].ts) / sum) * 100, 'freqdata', -1, undefined));
+              value[i].dur > dealArr[j].startNS + dealArr[j].dur - value[i].ts
+            ) {
+              resultList.push(
+                new TabPaneFreqUsageConfig(
+                  value[i].thread,
+                  value[i].ts,
+                  value[i].pid,
+                  value[i].tid,
+                  0,
+                  value[i].cpu,
+                  dealArr[j].value,
+                  dealArr[j].startNS + dealArr[j].dur - value[i].ts,
+                  '',
+                  ((dealArr[j].startNS + dealArr[j].dur - value[i].ts) / sum) * 100,
+                  'freqdata',
+                  -1,
+                  undefined
+                )
+              );
             }
             // running状态数据的开始时间小于频点数据开始时间，running状态数据的结束时间大于频点数据开始时间。且running状态数据在频点数据开始时间后的持续时间小于频点数据持续时间的情况
-            if (value[i].ts < dealArr[j].startNS &&
+            if (
+              value[i].ts < dealArr[j].startNS &&
               value[i].ts + value[i].dur > dealArr[j].startNS &&
-              value[i].dur + value[i].ts - dealArr[j].startNS < dealArr[j].dur) {
-              resultList.push(new TabPaneFreqUsageConfig(value[i].thread, dealArr[j].startNS, value[i].pid,
-                value[i].tid, 0, value[i].cpu, dealArr[j].value, value[i].dur + value[i].ts - dealArr[j].startNS, '',
-                ((value[i].dur + value[i].ts - dealArr[j].startNS) / sum) * 100, 'freqdata', -1, undefined ));
+              value[i].dur + value[i].ts - dealArr[j].startNS < dealArr[j].dur
+            ) {
+              resultList.push(
+                new TabPaneFreqUsageConfig(
+                  value[i].thread,
+                  dealArr[j].startNS,
+                  value[i].pid,
+                  value[i].tid,
+                  0,
+                  value[i].cpu,
+                  dealArr[j].value,
+                  value[i].dur + value[i].ts - dealArr[j].startNS,
+                  '',
+                  ((value[i].dur + value[i].ts - dealArr[j].startNS) / sum) * 100,
+                  'freqdata',
+                  -1,
+                  undefined
+                )
+              );
               break;
             }
             // running状态数据的开始时间小于频点数据开始时间，running状态数据的结束时间大于频点数据开始时间。且running状态数据在频点数据开始时间后的持续时间大于频点数据持续时间的情况
-            if (value[i].ts < dealArr[j].startNS &&
+            if (
+              value[i].ts < dealArr[j].startNS &&
               value[i].ts + value[i].dur > dealArr[j].startNS &&
-              value[i].dur + value[i].ts - dealArr[j].startNS > dealArr[j].dur) {
-              resultList.push(new TabPaneFreqUsageConfig( value[i].thread, dealArr[j].startNS, value[i].pid, value[i].tid,
-                0, value[i].cpu, dealArr[j].value, dealArr[j].dur, '', (dealArr[j].dur / sum) * 100, 'freqdata', -1, undefined));
+              value[i].dur + value[i].ts - dealArr[j].startNS > dealArr[j].dur
+            ) {
+              resultList.push(
+                new TabPaneFreqUsageConfig(
+                  value[i].thread,
+                  dealArr[j].startNS,
+                  value[i].pid,
+                  value[i].tid,
+                  0,
+                  value[i].cpu,
+                  dealArr[j].value,
+                  dealArr[j].dur,
+                  '',
+                  (dealArr[j].dur / sum) * 100,
+                  'freqdata',
+                  -1,
+                  undefined
+                )
+              );
             }
             // running状态数据的开始时间小于频点数据开始时间，running状态数据的持续时间小于频点数据开始时间的情况
             if (value[i].ts < dealArr[j].startNS && value[i].ts + value[i].dur < dealArr[j].startNS) {
-              resultList.push(new TabPaneFreqUsageConfig(value[i].thread, value[i].ts, value[i].pid, value[i].tid,
-                0, value[i].cpu, 'unknown', value[i].dur, '', (value[i].dur / sum) * 100, 'freqdata', -1, undefined));
+              resultList.push(
+                new TabPaneFreqUsageConfig(
+                  value[i].thread,
+                  value[i].ts,
+                  value[i].pid,
+                  value[i].tid,
+                  0,
+                  value[i].cpu,
+                  'unknown',
+                  value[i].dur,
+                  '',
+                  (value[i].dur / sum) * 100,
+                  'freqdata',
+                  -1,
+                  undefined
+                )
+              );
               break;
             }
           }
@@ -261,44 +369,46 @@ export class TabPaneFreqDataCut extends BaseElement {
     this.threadStatesTbl.value = [];
     if (threadIdValue !== '' && threadFuncName !== '') {
       // 根据用户输入的线程ID，方法名去查询数据库，得到对应的方法起始时间，持续时间等数据，以便作为依据进行后续数据切割
-      querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then((result) => {
-        if (result !== null && result.length > 0) {
-          // targetMap为全局initData的拷贝对象，dealArr数组用来存放周期切割依据数据
-          let targetMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
-          let dealArr: Array<{ts: number, dur: number}> = [];
-          // 新创建map对象接收传过来的实参map
-          resultList.forEach((item: Array<TabPaneFreqUsageConfig>, key: string) => {
-            targetMap.set(key, JSON.parse(JSON.stringify(item)));
-          });
-          // 整理周期切割依据的数据
-          for (let i of result) {
-            if (i.startTime! + recordStartNs + i.dur! < rightNS + recordStartNs) {
-              dealArr.push({ts: i.startTime! + recordStartNs, dur: i.dur!});
+      querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then(
+        (result) => {
+          if (result !== null && result.length > 0) {
+            // targetMap为全局initData的拷贝对象，dealArr数组用来存放周期切割依据数据
+            let targetMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
+            let dealArr: Array<{ ts: number; dur: number }> = [];
+            // 新创建map对象接收传过来的实参map
+            resultList.forEach((item: Array<TabPaneFreqUsageConfig>, key: string) => {
+              targetMap.set(key, JSON.parse(JSON.stringify(item)));
+            });
+            // 整理周期切割依据的数据
+            for (let i of result) {
+              if (i.startTime! + recordStartNs + i.dur! < rightNS + recordStartNs) {
+                dealArr.push({ ts: i.startTime! + recordStartNs, dur: i.dur! });
+              }
             }
+            let cycleMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
+            let totalList: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
+            this.mergeSingleData(dealArr, targetMap, cycleMap, totalList);
+            // 拷贝线程数组，防止数据污染
+            let threadArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.threadArr));
+            // 拷贝进程数组，防止数据污染
+            let processArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.processArr));
+            // 将周期层级防止到线程层级下
+            this.mergeThreadData(threadArr, cycleMap);
+            // 将原始数据放置到对应的线程层级下，周期数据前
+            this.mergeTotalData(threadArr, this.merge(totalList));
+            // 合并数据到进程层级下
+            this.mergePidData(processArr, threadArr);
+            this.fixedDeal(processArr);
+            this.threadStatesTblSource = processArr;
+            this.threadStatesTbl!.recycleDataSource = processArr;
+            this.threadClick(processArr);
+          } else {
+            this.threadStatesTblSource = [];
+            this.threadStatesTbl!.recycleDataSource = [];
           }
-          let cycleMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
-          let totalList: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
-          this.mergeSingleData(dealArr, targetMap, cycleMap, totalList);
-          // 拷贝线程数组，防止数据污染
-          let threadArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.threadArr));
-          // 拷贝进程数组，防止数据污染
-          let processArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.processArr));
-          // 将周期层级防止到线程层级下
-          this.mergeThreadData(threadArr, cycleMap);
-          // 将原始数据放置到对应的线程层级下，周期数据前
-          this.mergeTotalData(threadArr, this.merge(totalList));
-          // 合并数据到进程层级下
-          this.mergePidData(processArr, threadArr);
-          this.fixedDeal(processArr);
-          this.threadStatesTblSource = processArr;
-          this.threadStatesTbl!.recycleDataSource = processArr;
-          this.threadClick(processArr);
-        } else {
-          this.threadStatesTblSource = [];
-          this.threadStatesTbl!.recycleDataSource = [];
+          this.threadStatesTbl!.loading = false;
         }
-        this.threadStatesTbl!.loading = false;
-      });
+      );
     } else {
       this.threadStatesTbl!.loading = false;
       if (threadIdValue === '') {
@@ -313,7 +423,7 @@ export class TabPaneFreqDataCut extends BaseElement {
    * 整合Single切割方式中的频点数据与方法周期数据
    */
   mergeSingleData(
-    dealArr: Array<{ts: number, dur: number}>,
+    dealArr: Array<{ ts: number; dur: number }>,
     targetMap: Map<string, Array<TabPaneFreqUsageConfig>>,
     cycleMap: Map<string, Array<TabPaneFreqUsageConfig>>,
     totalList: Map<string, Array<TabPaneFreqUsageConfig>>
@@ -330,10 +440,25 @@ export class TabPaneFreqDataCut extends BaseElement {
         const countMutiple: number = 1000000;
         const MIN_NUM: number = 3;
         cpuMap.set(key, new Array());
-        cycleMap.get(key)?.push(
-          new TabPaneFreqUsageConfig('cycle' + (i + 1) + '—' + value[0].thread,
-            ((dealArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM), key.split('_')[0], key.split('_')[1],
-            0, '', '', 0, (dealArr[i].dur / countMutiple).toFixed(MIN_NUM), 0, 'cycle', i + 1, [] ));
+        cycleMap
+          .get(key)
+          ?.push(
+            new TabPaneFreqUsageConfig(
+              'cycle' + (i + 1) + '—' + value[0].thread,
+              ((dealArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM),
+              key.split('_')[0],
+              key.split('_')[1],
+              0,
+              '',
+              '',
+              0,
+              (dealArr[i].dur / countMutiple).toFixed(MIN_NUM),
+              0,
+              'cycle',
+              i + 1,
+              []
+            )
+          );
         this.dismantlingSingle(
           value,
           dealArr[i],
@@ -342,7 +467,7 @@ export class TabPaneFreqDataCut extends BaseElement {
             key: key,
             countMutiple: countMutiple,
             cpuArr,
-            cpuMap
+            cpuMap,
           },
           resList,
           totalList
@@ -364,11 +489,18 @@ export class TabPaneFreqDataCut extends BaseElement {
    * @param totalList total数组
    */
   dismantlingSingle(
-    value: Array<TabPaneFreqUsageConfig>, funData: {ts: number, dur: number},
-    constant: {i: number, key: string, countMutiple: number, cpuArr: Array<number>, cpuMap: Map<string, Array<TabPaneFreqUsageConfig>>},
+    value: Array<TabPaneFreqUsageConfig>,
+    funData: { ts: number; dur: number },
+    constant: {
+      i: number;
+      key: string;
+      countMutiple: number;
+      cpuArr: Array<number>;
+      cpuMap: Map<string, Array<TabPaneFreqUsageConfig>>;
+    },
     resList: Array<TabPaneFreqUsageConfig>,
     totalList: Map<string, Array<TabPaneFreqUsageConfig>>
-  ): void{
+  ): void {
     // 判断若用户导入json文件，则替换为对应cpu下的对应频点的算力值进行算力消耗计算
     for (let j = 0; j < value.length; j++) {
       let startTime = Number(value[j].ts);
@@ -377,48 +509,145 @@ export class TabPaneFreqDataCut extends BaseElement {
       let consumptionMap: Map<number, number> =
         SpSegmentationChart.freqInfoMapData.size > 0 && SpSegmentationChart.freqInfoMapData.get(Number(value[j].cpu));
       // 若存在算力值，则直接取值做计算。若不存在算力值，且频点值不为unknown的情况，则取频点值做计算，若为unknown，则取0做兼容
-      const consumption: number = Number(consumptionMap && consumptionMap.get(Number(value[j].freq))
-        ? consumptionMap.get(Number(value[j].freq)) : (value[j].freq === 'unknown' ? 0 : value[j].freq));
+      const consumption: number = Number(
+        consumptionMap && consumptionMap.get(Number(value[j].freq))
+          ? consumptionMap.get(Number(value[j].freq))
+          : value[j].freq === 'unknown'
+          ? 0
+          : value[j].freq
+      );
       if (!constant.cpuArr.includes(Number(value[j].cpu))) {
         constant.cpuArr.push(Number(value[j].cpu));
-        constant.cpuMap.get(constant.key)?.push(
-          new TabPaneFreqUsageConfig('cycle' + (constant.i + 1) + '—' + value[j].thread, '',
-            value[j].pid, value[j].tid, 0, value[j].cpu, '', 0, '', 0, 'cpu', -1, []));
+        constant.cpuMap
+          .get(constant.key)
+          ?.push(
+            new TabPaneFreqUsageConfig(
+              'cycle' + (constant.i + 1) + '—' + value[j].thread,
+              '',
+              value[j].pid,
+              value[j].tid,
+              0,
+              value[j].cpu,
+              '',
+              0,
+              '',
+              0,
+              'cpu',
+              -1,
+              []
+            )
+          );
       }
       // 以下为频点数据按Single周期切割数据如何取舍的判断条件，dealArr为周期切割依据，value为某一线程下的频点汇总数据
       // 如果频点数据开始时间大于某一周期起始时间，小于该周期的结束时间。且频点数据结束时间小于周期结束时间的情况
-      if (funData.ts < startTime && funData.ts + funData.dur > startTime &&
-        funData.ts + funData.dur > startTime + value[j].dur) {
-        resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 1)!);
-        totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 1)!);
+      if (
+        funData.ts < startTime &&
+        funData.ts + funData.dur > startTime &&
+        funData.ts + funData.dur > startTime + value[j].dur
+      ) {
+        resList.push(
+          this.returnSingleObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            funData,
+            1
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnSingleObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              funData,
+              1
+            )!
+          );
       }
       // 如果频点数据开始时间大于某一周期起始时间，小于该周期的结束时间。且频点数据结束时间大于等于周期结束时间的情况
-      if (funData.ts < startTime && funData.ts + funData.dur > startTime &&
-        funData.ts + funData.dur <= startTime + value[j].dur) {
-        resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 2)!);
-        totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 2)!);
+      if (
+        funData.ts < startTime &&
+        funData.ts + funData.dur > startTime &&
+        funData.ts + funData.dur <= startTime + value[j].dur
+      ) {
+        resList.push(
+          this.returnSingleObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            funData,
+            2
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnSingleObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              funData,
+              2
+            )!
+          );
         break;
       }
       // 如果频点数据开始时间小于某一周期起始时间，结束时间大于该周期的开始时间。且频点数据结束时间大于周期结束时间的情况
-      if (funData.ts > startTime && startTime + value[j].dur > funData.ts &&
-        startTime + value[j].dur > funData.ts + funData.dur) {
-        resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 3)!);
-        totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 3)!);
+      if (
+        funData.ts > startTime &&
+        startTime + value[j].dur > funData.ts &&
+        startTime + value[j].dur > funData.ts + funData.dur
+      ) {
+        resList.push(
+          this.returnSingleObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            funData,
+            3
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnSingleObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              funData,
+              3
+            )!
+          );
         break;
       }
       // 如果频点数据开始时间小于某一周期起始时间，结束时间大于该周期的开始时间。且频点数据结束时间小于等于周期结束时间的情况
-      if (funData.ts > startTime && startTime + value[j].dur > funData.ts &&
-        startTime + value[j].dur <= funData.ts + funData.dur) {
-        resList.push(this.returnSingleObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 4)!);
-        totalList.get(constant.key)?.push(this.returnSingleObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], funData, 4)!);
+      if (
+        funData.ts > startTime &&
+        startTime + value[j].dur > funData.ts &&
+        startTime + value[j].dur <= funData.ts + funData.dur
+      ) {
+        resList.push(
+          this.returnSingleObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            funData,
+            4
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnSingleObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              funData,
+              4
+            )!
+          );
       }
     }
   }
@@ -433,28 +662,76 @@ export class TabPaneFreqDataCut extends BaseElement {
    */
   returnSingleObj(
     str: string,
-    arg: {i: number, percent: number, startTime: number, consumption: number, countMutiple: number},
+    arg: { i: number; percent: number; startTime: number; consumption: number; countMutiple: number },
     value: TabPaneFreqUsageConfig,
-    funData: {ts: number, dur: number},
+    funData: { ts: number; dur: number },
     flag: number
-  ): TabPaneFreqUsageConfig | undefined{
+  ): TabPaneFreqUsageConfig | undefined {
     switch (flag) {
       case 1:
-        return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid,  (arg.consumption * value.dur) / arg.countMutiple,
-          value.cpu, value.freq, value.dur, '', arg.percent, 'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          (arg.consumption * value.dur) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          value.dur,
+          '',
+          arg.percent,
+          'freqdata',
+          arg.i,
+          undefined
+        );
       case 2:
-        return new TabPaneFreqUsageConfig(str,'', value.pid, value.tid, ((funData.ts + funData.dur - arg.startTime)
-          * arg.consumption) / arg.countMutiple, value.cpu, value.freq, funData.ts + funData.dur - arg.startTime, '',
-          ((funData.ts + funData.dur - arg.startTime) / value.dur) * arg.percent, 'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          ((funData.ts + funData.dur - arg.startTime) * arg.consumption) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          funData.ts + funData.dur - arg.startTime,
+          '',
+          ((funData.ts + funData.dur - arg.startTime) / value.dur) * arg.percent,
+          'freqdata',
+          arg.i,
+          undefined
+        );
       case 3:
-        return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, (funData.dur * arg.consumption) / arg.countMutiple, value.cpu,
-          value.freq, funData.dur, '', (funData.dur / value.dur) * arg.percent, 'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          (funData.dur * arg.consumption) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          funData.dur,
+          '',
+          (funData.dur / value.dur) * arg.percent,
+          'freqdata',
+          arg.i,
+          undefined
+        );
       case 4:
-        return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid,
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
           ((arg.startTime + value.dur - funData.ts) * arg.consumption) / arg.countMutiple,
-          value.cpu, value.freq, arg.startTime + value.dur - funData.ts, '',
+          value.cpu,
+          value.freq,
+          arg.startTime + value.dur - funData.ts,
+          '',
           ((arg.startTime + value.dur - funData.ts) / value.dur) * arg.percent,
-          'freqdata', arg.i, undefined);
+          'freqdata',
+          arg.i,
+          undefined
+        );
       default:
         break;
     }
@@ -474,38 +751,42 @@ export class TabPaneFreqDataCut extends BaseElement {
     // @ts-ignore
     this.threadStatesTbl.value = [];
     if (threadIdValue !== '' && threadFuncName !== '') {
-      querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then((res) => {
-        if (res !== null && res.length > 0) {
-          // targetMap为全局initData的拷贝对象，cutArr数组用来存放周期切割依据数据
-          let targetMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
-          let cutArr: Array<{ts: number, dur?: number}> = [];
-          // 新创建map对象接收传过来的实参map
-          resultList.forEach((item: Array<TabPaneFreqUsageConfig>, key: string) => {
-            targetMap.set(key, JSON.parse(JSON.stringify(item)));
-          });
-          // 根据线程id及方法名获取的数据，处理后用作切割时间依据，时间跨度为整个方法开始时间到末个方法开始时间
-          for (let i of res) {
-            cutArr[cutArr.length - 1] && (cutArr[cutArr.length - 1].dur = i.startTime ? i.startTime +
-              recordStartNs - cutArr[cutArr.length - 1].ts : 0);
-            cutArr.push({ts: i.startTime! + recordStartNs});
+      querySearchFuncData(threadFuncName, Number(threadIdValue), this.currentSelectionParam.leftNs, rightNS).then(
+        (res) => {
+          if (res !== null && res.length > 0) {
+            // targetMap为全局initData的拷贝对象，cutArr数组用来存放周期切割依据数据
+            let targetMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
+            let cutArr: Array<{ ts: number; dur?: number }> = [];
+            // 新创建map对象接收传过来的实参map
+            resultList.forEach((item: Array<TabPaneFreqUsageConfig>, key: string) => {
+              targetMap.set(key, JSON.parse(JSON.stringify(item)));
+            });
+            // 根据线程id及方法名获取的数据，处理后用作切割时间依据，时间跨度为整个方法开始时间到末个方法开始时间
+            for (let i of res) {
+              cutArr[cutArr.length - 1] &&
+                (cutArr[cutArr.length - 1].dur = i.startTime
+                  ? i.startTime + recordStartNs - cutArr[cutArr.length - 1].ts
+                  : 0);
+              cutArr.push({ ts: i.startTime! + recordStartNs });
+            }
+            let cycleMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
+            let totalList: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
+            this.mergeLoopData(cutArr, targetMap, cycleMap, totalList);
+            let threadArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.threadArr));
+            let processArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.processArr));
+            this.mergeThreadData(threadArr, cycleMap);
+            this.mergeTotalData(threadArr, this.merge(totalList));
+            this.mergePidData(processArr, threadArr);
+            this.fixedDeal(processArr);
+            this.threadStatesTblSource = processArr;
+            this.threadStatesTbl!.recycleDataSource = processArr;
+            this.threadClick(processArr);
+          } else {
+            this.threadStatesTblSource = [];
+            this.threadStatesTbl!.recycleDataSource = [];
           }
-          let cycleMap: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
-          let totalList: Map<string, Array<TabPaneFreqUsageConfig>> = new Map();
-          this.mergeLoopData(cutArr, targetMap, cycleMap, totalList);
-          let threadArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.threadArr));
-          let processArr: Array<TabPaneFreqUsageConfig> = JSON.parse(JSON.stringify(this.processArr));
-          this.mergeThreadData(threadArr, cycleMap);
-          this.mergeTotalData(threadArr, this.merge(totalList));
-          this.mergePidData(processArr, threadArr);
-          this.fixedDeal(processArr);
-          this.threadStatesTblSource = processArr;
-          this.threadStatesTbl!.recycleDataSource = processArr;
-          this.threadClick(processArr);
-        } else {
-          this.threadStatesTblSource = [];
-          this.threadStatesTbl!.recycleDataSource = [];
         }
-      });
+      );
       this.threadStatesTbl!.loading = false;
     } else {
       this.threadStatesTbl!.loading = false;
@@ -521,7 +802,7 @@ export class TabPaneFreqDataCut extends BaseElement {
    * 整合Loop切割方式中的频点数据与方法周期数据
    */
   mergeLoopData(
-    cutArr: Array<{ts: number, dur?: number}>,
+    cutArr: Array<{ ts: number; dur?: number }>,
     targetMap: Map<string, Array<TabPaneFreqUsageConfig>>,
     cycleMap: Map<string, Array<TabPaneFreqUsageConfig>>,
     totalList: Map<string, Array<TabPaneFreqUsageConfig>>
@@ -539,9 +820,25 @@ export class TabPaneFreqDataCut extends BaseElement {
         const MIN_NUM: number = 3;
         cpuMap.set(key, new Array());
         // 创建周期层级数据
-        cycleMap.get(key)?.push(new TabPaneFreqUsageConfig('cycle' + (i + 1) + '—' + value[0].thread,
-          ((cutArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM), key.split('_')[0], key.split('_')[1], 0, '',
-          '', 0, (cutArr[i].dur! / countMutiple).toFixed(MIN_NUM), 0, 'cycle', i + 1, []));
+        cycleMap
+          .get(key)
+          ?.push(
+            new TabPaneFreqUsageConfig(
+              'cycle' + (i + 1) + '—' + value[0].thread,
+              ((cutArr[i].ts - timeDur) / countMutiple).toFixed(MIN_NUM),
+              key.split('_')[0],
+              key.split('_')[1],
+              0,
+              '',
+              '',
+              0,
+              (cutArr[i].dur! / countMutiple).toFixed(MIN_NUM),
+              0,
+              'cycle',
+              i + 1,
+              []
+            )
+          );
         this.dismantlingLoop(
           value,
           cutArr,
@@ -550,7 +847,7 @@ export class TabPaneFreqDataCut extends BaseElement {
             key: key,
             countMutiple: countMutiple,
             cpuArr,
-            cpuMap
+            cpuMap,
           },
           resList,
           totalList
@@ -573,10 +870,18 @@ export class TabPaneFreqDataCut extends BaseElement {
    * @param totalList total数组
    */
   dismantlingLoop(
-    value: Array<TabPaneFreqUsageConfig>, cutArr:Array<{ts: number, dur?: number}>,
-    constant: {i: number, key: string, countMutiple: number, cpuArr: Array<number>, cpuMap: Map<string, Array<TabPaneFreqUsageConfig>>},
+    value: Array<TabPaneFreqUsageConfig>,
+    cutArr: Array<{ ts: number; dur?: number }>,
+    constant: {
+      i: number;
+      key: string;
+      countMutiple: number;
+      cpuArr: Array<number>;
+      cpuMap: Map<string, Array<TabPaneFreqUsageConfig>>;
+    },
     resList: Array<TabPaneFreqUsageConfig>,
-    totalList: Map<string, Array<TabPaneFreqUsageConfig>>): void {
+    totalList: Map<string, Array<TabPaneFreqUsageConfig>>
+  ): void {
     for (let j = 0; j < value.length; j++) {
       // 判断若用户导入json文件，则替换为对应cpu下的对应频点的算力值进行算力消耗计算
       let startTime = Number(value[j].ts);
@@ -585,46 +890,135 @@ export class TabPaneFreqDataCut extends BaseElement {
       let consumptionMap: Map<number, number> =
         SpSegmentationChart.freqInfoMapData.size > 0 && SpSegmentationChart.freqInfoMapData.get(Number(value[j].cpu));
       // 若存在算力值，则直接取值做计算。若不存在算力值，且频点值不为unknown的情况，则取频点值做计算，若为unknown，则取0做兼容
-      const consumption: number = Number(consumptionMap && consumptionMap.get(Number(value[j].freq))
-        ? consumptionMap.get(Number(value[j].freq)) : (value[j].freq === 'unknown' ? 0 : value[j].freq));
+      const consumption: number = Number(
+        consumptionMap && consumptionMap.get(Number(value[j].freq))
+          ? consumptionMap.get(Number(value[j].freq))
+          : value[j].freq === 'unknown'
+          ? 0
+          : value[j].freq
+      );
       if (!constant.cpuArr.includes(Number(value[j].cpu))) {
         constant.cpuArr.push(Number(value[j].cpu));
         // 创建cpu层级数据，以便后续生成树结构
-        constant.cpuMap.get(constant.key)?.push(new TabPaneFreqUsageConfig('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          '', value[j].pid, value[j].tid, 0, value[j].cpu, '', 0, '', 0, 'cpu', -1, []));
+        constant.cpuMap
+          .get(constant.key)
+          ?.push(
+            new TabPaneFreqUsageConfig(
+              'cycle' + (constant.i + 1) + '—' + value[j].thread,
+              '',
+              value[j].pid,
+              value[j].tid,
+              0,
+              value[j].cpu,
+              '',
+              0,
+              '',
+              0,
+              'cpu',
+              -1,
+              []
+            )
+          );
       }
       // 以下为频点数据按Loop周期切割数据如何取舍的判断条件，cutArr为周期切割依据，value为某一线程下的频点汇总数据
       // 如果频点数据开始时间大于某一周期起始时间，且结束时间小于等于下一同名方法开始时间的情况
       if (startTime >= cutArr[constant.i].ts && startTime + value[j].dur <= cutArr[constant.i + 1].ts) {
-        resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 1)!);
-        totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 1)!);
+        resList.push(
+          this.returnLoopObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            cutArr,
+            1
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnLoopObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              cutArr,
+              1
+            )!
+          );
       }
       // 如果频点数据开始时间大于某一周期起始时间，且结束时间大于下一同名方法开始时间的情况
       if (startTime >= cutArr[constant.i].ts && startTime + value[j].dur > cutArr[constant.i + 1].ts) {
         if (cutArr[constant.i + 1].ts - startTime > 0) {
-          resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-            {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 2)!);
-          totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread,
-            {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 2)!);
+          resList.push(
+            this.returnLoopObj(
+              'cycle' + (constant.i + 1) + '—' + value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              cutArr,
+              2
+            )!
+          );
+          totalList
+            .get(constant.key)
+            ?.push(
+              this.returnLoopObj(
+                value[j].thread,
+                { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+                value[j],
+                cutArr,
+                2
+              )!
+            );
           break;
         }
       }
       // 如果频点数据开始时间小于某一周期起始时间，且结束时间大于下一同名方法开始时间的情况
       if (startTime < cutArr[constant.i].ts && startTime + value[j].dur > cutArr[constant.i + 1].ts) {
-        resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 3)!);
-        totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 3)!);
+        resList.push(
+          this.returnLoopObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            cutArr,
+            3
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnLoopObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              cutArr,
+              3
+            )!
+          );
       }
       // 如果频点数据开始时间小于某一周期起始时间，结束时间大于该方法开始时间。且频点数据结束时间小于下一同名方法开始时间
-      if (startTime < cutArr[constant.i].ts &&
-        startTime + value[j].dur > cutArr[constant.i].ts && startTime + value[j].dur < cutArr[constant.i + 1].ts) {
-        resList.push(this.returnLoopObj('cycle' + (constant.i + 1) + '—' + value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 4)!);
-        totalList.get(constant.key)?.push(this.returnLoopObj(value[j].thread,
-          {i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple} ,value[j], cutArr, 4)!);
+      if (
+        startTime < cutArr[constant.i].ts &&
+        startTime + value[j].dur > cutArr[constant.i].ts &&
+        startTime + value[j].dur < cutArr[constant.i + 1].ts
+      ) {
+        resList.push(
+          this.returnLoopObj(
+            'cycle' + (constant.i + 1) + '—' + value[j].thread,
+            { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+            value[j],
+            cutArr,
+            4
+          )!
+        );
+        totalList
+          .get(constant.key)
+          ?.push(
+            this.returnLoopObj(
+              value[j].thread,
+              { i: constant.i, percent, startTime, consumption, countMutiple: constant.countMutiple },
+              value[j],
+              cutArr,
+              4
+            )!
+          );
       }
     }
   }
@@ -639,30 +1033,76 @@ export class TabPaneFreqDataCut extends BaseElement {
    */
   returnLoopObj(
     str: string,
-    arg: {i: number, percent: number, startTime: number, consumption: number, countMutiple: number},
+    arg: { i: number; percent: number; startTime: number; consumption: number; countMutiple: number },
     value: TabPaneFreqUsageConfig,
-    cutArr: Array<{ts: number, dur?: number}>,
+    cutArr: Array<{ ts: number; dur?: number }>,
     flag: number
-  ): TabPaneFreqUsageConfig | undefined{
+  ): TabPaneFreqUsageConfig | undefined {
     switch (flag) {
       case 1:
-        return new TabPaneFreqUsageConfig(str, '', value.pid,
-          value.tid, (arg.consumption * value.dur) / arg.countMutiple, value.cpu, value.freq,
-          value.dur, '', value.percent, 'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          (arg.consumption * value.dur) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          value.dur,
+          '',
+          value.percent,
+          'freqdata',
+          arg.i,
+          undefined
+        );
       case 2:
-        return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid,
-          (arg.consumption * (cutArr[arg.i + 1].ts - arg.startTime)) / arg.countMutiple, value.cpu, value.freq,
-          cutArr[arg.i + 1].ts - arg.startTime, '', arg.percent * ((cutArr[arg.i + 1].ts - arg.startTime) / value.dur),
-          'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          (arg.consumption * (cutArr[arg.i + 1].ts - arg.startTime)) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          cutArr[arg.i + 1].ts - arg.startTime,
+          '',
+          arg.percent * ((cutArr[arg.i + 1].ts - arg.startTime) / value.dur),
+          'freqdata',
+          arg.i,
+          undefined
+        );
       case 3:
-        return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid,
-          (arg.consumption * (cutArr[arg.i + 1].ts - cutArr[arg.i].ts)) / arg.countMutiple, value.cpu, value.freq,
-          cutArr[arg.i + 1].ts - cutArr[arg.i].ts, '', arg.percent * ((cutArr[arg.i + 1].ts - cutArr[arg.i].ts) / value.dur),
-          'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          (arg.consumption * (cutArr[arg.i + 1].ts - cutArr[arg.i].ts)) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          cutArr[arg.i + 1].ts - cutArr[arg.i].ts,
+          '',
+          arg.percent * ((cutArr[arg.i + 1].ts - cutArr[arg.i].ts) / value.dur),
+          'freqdata',
+          arg.i,
+          undefined
+        );
       case 4:
-        return new TabPaneFreqUsageConfig(str, '', value.pid, value.tid, (arg.consumption * (value.dur + arg.startTime - cutArr[arg.i].ts))
-          / arg.countMutiple, value.cpu, value.freq, value.dur + arg.startTime - cutArr[arg.i].ts, '', arg.percent
-          * ((value.dur + arg.startTime - cutArr[arg.i].ts) / value.dur), 'freqdata', arg.i, undefined);
+        return new TabPaneFreqUsageConfig(
+          str,
+          '',
+          value.pid,
+          value.tid,
+          (arg.consumption * (value.dur + arg.startTime - cutArr[arg.i].ts)) / arg.countMutiple,
+          value.cpu,
+          value.freq,
+          value.dur + arg.startTime - cutArr[arg.i].ts,
+          '',
+          arg.percent * ((value.dur + arg.startTime - cutArr[arg.i].ts) / value.dur),
+          'freqdata',
+          arg.i,
+          undefined
+        );
       default:
         break;
     }
@@ -675,9 +1115,7 @@ export class TabPaneFreqDataCut extends BaseElement {
     cycleMap: Map<string, Array<TabPaneFreqUsageConfig>>
   ): void {
     for (let i = 0; i < threadArr.length; i++) {
-      let cycleMapData: Array<TabPaneFreqUsageConfig> = cycleMap.get(
-        threadArr[i].pid + '_' + threadArr[i].tid
-      )!;
+      let cycleMapData: Array<TabPaneFreqUsageConfig> = cycleMap.get(threadArr[i].pid + '_' + threadArr[i].tid)!;
       for (let j = 0; j < cycleMapData!.length; j++) {
         threadArr[i].children?.push(cycleMapData![j]);
         threadArr[i].count += cycleMapData![j].count;
@@ -690,10 +1128,7 @@ export class TabPaneFreqDataCut extends BaseElement {
   /**
    * 切割后整合好的线程级频点数据放置到对应的进程
    */
-  mergePidData(
-    pidArr: Array<TabPaneFreqUsageConfig>,
-    threadArr: Array<TabPaneFreqUsageConfig>
-  ): void {
+  mergePidData(pidArr: Array<TabPaneFreqUsageConfig>, threadArr: Array<TabPaneFreqUsageConfig>): void {
     for (let i = 0; i < pidArr.length; i++) {
       for (let j = 0; j < threadArr.length; j++) {
         if (pidArr[i].pid === threadArr[j].pid) {
@@ -731,10 +1166,7 @@ export class TabPaneFreqDataCut extends BaseElement {
   /**
    * 将cpu层级数据放到对应的周期层级下
    */
-  mergeCycleData(
-    obj: TabPaneFreqUsageConfig,
-    arr: Array<TabPaneFreqUsageConfig>
-  ): void {
+  mergeCycleData(obj: TabPaneFreqUsageConfig, arr: Array<TabPaneFreqUsageConfig>): void {
     for (let i = 0; i < arr!.length; i++) {
       if (arr![i].count === 0 && arr![i].dur === 0) {
         continue;
@@ -749,10 +1181,7 @@ export class TabPaneFreqDataCut extends BaseElement {
   /**
    * 将切割好的不区分周期的数据作为total数据放到对应的线程层级下，周期数据前
    */
-  mergeTotalData(
-    threadArr: Array<TabPaneFreqUsageConfig>,
-    totalData: Array<TabPaneFreqUsageConfig>
-  ): void {
+  mergeTotalData(threadArr: Array<TabPaneFreqUsageConfig>, totalData: Array<TabPaneFreqUsageConfig>): void {
     for (let i = 0; i < threadArr.length; i++) {
       for (let j = 0; j < totalData.length; j++) {
         if (
@@ -769,17 +1198,11 @@ export class TabPaneFreqDataCut extends BaseElement {
   /**
    * 整理排序相同周期下的数据
    */
-  mergeCpuData(
-    cpuArray: Array<TabPaneFreqUsageConfig>,
-    resList: Array<TabPaneFreqUsageConfig>
-  ): void {
+  mergeCpuData(cpuArray: Array<TabPaneFreqUsageConfig>, resList: Array<TabPaneFreqUsageConfig>): void {
     // 以算力消耗降序排列
     resList.sort((a, b) => b.count - a.count);
     // 以cpu升序排列
-    cpuArray.sort((
-      a: TabPaneFreqUsageConfig,
-      b: TabPaneFreqUsageConfig
-    ) => Number(a.cpu) - Number(b.cpu));
+    cpuArray.sort((a: TabPaneFreqUsageConfig, b: TabPaneFreqUsageConfig) => Number(a.cpu) - Number(b.cpu));
     cpuArray.forEach((item: TabPaneFreqUsageConfig) => {
       for (let s = 0; s < resList.length; s++) {
         if (item.cpu === resList[s].cpu) {
@@ -795,15 +1218,11 @@ export class TabPaneFreqDataCut extends BaseElement {
   /**
    * 切割好的不区分周期的数据，以相同cpu相同频点的进行整合
    */
-  merge(
-    totalList: Map<string, Array<TabPaneFreqUsageConfig>>
-  ): Array<TabPaneFreqUsageConfig> {
+  merge(totalList: Map<string, Array<TabPaneFreqUsageConfig>>): Array<TabPaneFreqUsageConfig> {
     let result: Array<TabPaneFreqUsageConfig> = new Array();
     totalList.forEach((value: Array<TabPaneFreqUsageConfig>, key: string) => {
       let countNum = result.push(
-        new TabPaneFreqUsageConfig('', '', key.split('_')[0], key.split('_')[1],
-          0, '', '', 0, '', 0, 'cycle', 0, []
-        )
+        new TabPaneFreqUsageConfig('', '', key.split('_')[0], key.split('_')[1], 0, '', '', 0, '', 0, 'cycle', 0, [])
       );
       let cpuArr: Array<TabPaneFreqUsageConfig> = [];
       let flagArr: Array<number | string> = [];
@@ -811,8 +1230,20 @@ export class TabPaneFreqDataCut extends BaseElement {
         if (!flagArr.includes(value[i].cpu)) {
           flagArr.push(value[i].cpu);
           let flag = cpuArr.push(
-            new TabPaneFreqUsageConfig(value[i].thread, '', value[i].pid, value[i].tid,
-              0, value[i].cpu, '', 0, '', 0, 'cpu', -1, []
+            new TabPaneFreqUsageConfig(
+              value[i].thread,
+              '',
+              value[i].pid,
+              value[i].tid,
+              0,
+              value[i].cpu,
+              '',
+              0,
+              '',
+              0,
+              'cpu',
+              -1,
+              []
             )
           );
           result[countNum - 1].children?.push(cpuArr[flag - 1]);
@@ -828,7 +1259,9 @@ export class TabPaneFreqDataCut extends BaseElement {
           }
         }
       }
-      result[countNum - 1].children?.sort((a: TabPaneFreqUsageConfig, b: TabPaneFreqUsageConfig) => Number(a.cpu) - Number(b.cpu));
+      result[countNum - 1].children?.sort(
+        (a: TabPaneFreqUsageConfig, b: TabPaneFreqUsageConfig) => Number(a.cpu) - Number(b.cpu)
+      );
       for (let i = 0; i < cpuArr.length; i++) {
         for (let j = 0; j < value.length; j++) {
           if (cpuArr[i].cpu === value[j].cpu) {
@@ -901,7 +1334,7 @@ export class TabPaneFreqDataCut extends BaseElement {
                 this.threadStatesTbl!.setStatus(item.children, false);
               }
             }
-            this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement( data, RedrawTreeForm.Retract);
+            this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
           } else if (label.includes('Cycle') && i === 2) {
             for (let item of data) {
               // @ts-ignore
@@ -963,11 +1396,12 @@ export class TabPaneFreqDataCut extends BaseElement {
     // @ts-ignore
     this.shadowRoot?.querySelector('#cycleQuery')!.style.display = 'block';
     // @ts-ignore
-    let freq: Map<number, number> = SpSegmentationChart.freqInfoMapData.size > 0 &&
+    let freq: Map<number, number> =
+      SpSegmentationChart.freqInfoMapData.size > 0 &&
       SpSegmentationChart.freqInfoMapData.get(SpSegmentationChart.freqInfoMapData.size - 1);
     // @ts-ignore
-    let yAxis: number = freq && freq.get(Number(maxFreqValue) * 1000)
-      ? freq.get(Number(maxFreqValue) * 1000) : Number(maxFreqValue);
+    let yAxis: number =
+      freq && freq.get(Number(maxFreqValue) * 1000) ? freq.get(Number(maxFreqValue) * 1000) : Number(maxFreqValue);
     let xAxis: number = (yAxis * 1000) / Number(maxHzValue);
     // 需要做筛选时，会利用下面的cycleA、cycleB数组
     let scatterArr: Array<Array<number>> = [];
@@ -1007,8 +1441,14 @@ export class TabPaneFreqDataCut extends BaseElement {
   /**
    * 配置散点图
    */
-  setConfig(maxHz: number, str: string, scatterArr: Array<Array<number>>,
-            yAxis: number, xAxis: number, cycleA: Array<Array<number>>, cycleB: Array<Array<number>>
+  setConfig(
+    maxHz: number,
+    str: string,
+    scatterArr: Array<Array<number>>,
+    yAxis: number,
+    xAxis: number,
+    cycleA: Array<Array<number>>,
+    cycleB: Array<Array<number>>
   ): void {
     const DELTA: number = 5;
     this.statisticsScatter!.config = {
@@ -1051,7 +1491,7 @@ export class TabPaneFreqDataCut extends BaseElement {
       // 散点图title
       title: str,
       colorPoolText: (): Array<string> => ['Total', 'CycleA', 'CycleB'],
-      tip: (data: {c: Array<number>}): string => {
+      tip: (data: { c: Array<number> }): string => {
         return `
                 <div>
                     <span>Cycle: ${data.c[2]};</span></br>
@@ -1080,10 +1520,17 @@ export class TabPaneFreqDataCut extends BaseElement {
         str = evt.detail.thread;
         this.render(scatterData, str, []);
       }
-      // @ts-ignore
-      if (evt.detail.flag === 'cycle' && evt.detail.pid === scatterData[evt.detail.id - 1].pid
+
+      if (
+        // @ts-ignore
+        evt.detail.flag === 'cycle' &&
+        // @ts-ignore
+        evt.detail.pid === scatterData[evt.detail.id - 1].pid &&
+        // @ts-ignore
+        evt.detail.tid === scatterData[evt.detail.id - 1].tid &&
         // @ts-ignore
-        && evt.detail.tid === scatterData[evt.detail.id - 1].tid && evt.detail.id > 0) {
+        evt.detail.id > 0
+      ) {
         // @ts-ignore
         SpSegmentationChart.tabHover('CPU-FREQ', true, evt.detail.id - 1);
       }
@@ -1098,7 +1545,12 @@ export class TabPaneFreqDataCut extends BaseElement {
       let cycleBStartValue = this.shadowRoot?.querySelector('#cycle-b-start-range')!.value;
       // @ts-ignore
       let cycleBEndValue = this.shadowRoot?.querySelector('#cycle-b-end-range')!.value;
-      let queryCycleScatter = [Number(cycleAStartValue), Number(cycleAEndValue), Number(cycleBStartValue), Number(cycleBEndValue)];
+      let queryCycleScatter = [
+        Number(cycleAStartValue),
+        Number(cycleAEndValue),
+        Number(cycleBStartValue),
+        Number(cycleBEndValue),
+      ];
       this.render(scatterData, str, queryCycleScatter);
     });
   }
@@ -1109,27 +1561,23 @@ export class TabPaneFreqDataCut extends BaseElement {
     // 绑定single、loop按钮点击事件
     this.threadStatesDIV = this.shadowRoot?.querySelector('#dataCut');
     this.threadStatesDIV?.children[2].children[0].addEventListener('click', (e) => {
-        this.threadStatesTbl!.loading = true;
-        // @ts-ignore
-        this.dataSingleCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData);
-      }
-    );
+      this.threadStatesTbl!.loading = true;
+      // @ts-ignore
+      this.dataSingleCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData);
+    });
     this.threadStatesDIV?.children[2].children[1].addEventListener('click', (e) => {
-        this.threadStatesTbl!.loading = true;
-        // @ts-ignore
-        this.dataLoopCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData);
-      }
-    );
+      this.threadStatesTbl!.loading = true;
+      // @ts-ignore
+      this.dataLoopCut(this.threadStatesDIV?.children[0]!, this.threadStatesDIV?.children[1]!, this.initData);
+    });
     this.threadStatesDIV?.children[0].addEventListener('focus', (e) => {
-        // @ts-ignore
-        this.threadStatesDIV?.children[0]!.style.border = '1px solid rgb(151,151,151)';
-      }
-    );
+      // @ts-ignore
+      this.threadStatesDIV?.children[0]!.style.border = '1px solid rgb(151,151,151)';
+    });
     this.threadStatesDIV?.children[1].addEventListener('focus', (e) => {
-        // @ts-ignore
-        this.threadStatesDIV?.children[1]!.style.border = '1px solid rgb(151,151,151)';
-      }
-    );
+      // @ts-ignore
+      this.threadStatesDIV?.children[1]!.style.border = '1px solid rgb(151,151,151)';
+    });
     this.shadowRoot?.querySelector('#maxFreq')?.addEventListener('focus', (e) => {
       // @ts-ignore
       this.shadowRoot?.querySelector('#maxFreq')!.style.border = '1px solid rgb(151,151,151)';
@@ -1144,7 +1592,8 @@ export class TabPaneFreqDataCut extends BaseElement {
     resizeObserver(this.parentElement!, this.threadStatesTbl!);
   }
   initHtml(): string {
-    return `
+    return (
+      `
     <style>
     :host{
         padding: 10px 10px;
@@ -1190,7 +1639,10 @@ export class TabPaneFreqDataCut extends BaseElement {
         width:90px;
     }
     </style>
-    ` + this.htmlUp() + this.htmlDown();
+    ` +
+      this.htmlUp() +
+      this.htmlDown()
+    );
   }
   htmlUp(): string {
     return `
diff --git a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts
index d60816178649c880acedba692aca769ce499a331..3d57edee2140f10e08da34b236badf12cfbd1576 100644
--- a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts
+++ b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsage.ts
@@ -22,12 +22,7 @@ import { queryCpuFreqUsageData, queryCpuFreqFilterId } from '../../../../databas
 import { Utils } from '../../base/Utils';
 import { resizeObserver } from '../SheetUtils';
 import { SpSegmentationChart } from '../../../chart/SpSegmentationChart';
-import { 
-  type CpuFreqData, 
-  type RunningFreqData, 
-  type RunningData, 
-  type CpuFreqTd, 
-} from './TabPaneFreqUsageConfig';
+import { type CpuFreqData, type RunningFreqData, type RunningData, type CpuFreqTd } from './TabPaneFreqUsageConfig';
 
 @element('tabpane-frequsage')
 export class TabPaneFreqUsage extends BaseElement {
@@ -85,79 +80,77 @@ export class TabPaneFreqUsage extends BaseElement {
     this.threadStatesTbl!.recycleDataSource = resultArr;
     this.threadStatesTbl!.loading = false;
   }
-  
+
   /**
    * 递归整理数据小数位
    */
   fixedDeal(arr: Array<RunningFreqData>): void {
-      if (arr == undefined) {
-          return;
+    if (arr == undefined) {
+      return;
+    }
+    const TIME_MUTIPLE: number = 1000000;
+    // KHz->MHz  *  ns->ms
+    const CONS_MUTIPLE: number = 1000000000;
+    const FREQ_MUTIPLE: number = 1000;
+    const MIN_PERCENT: number = 2;
+    const MIN_FREQ: number = 3;
+    for (let i = 0; i < arr.length; i++) {
+      let trackId: number;
+      // 若存在空位元素则进行删除处理
+      if (arr[i] === undefined) {
+        arr.splice(i, 1);
+        i--;
+        continue;
       }
-      const TIME_MUTIPLE: number = 1000000;
-      // KHz->MHz  *  ns->ms
-      const CONS_MUTIPLE: number = 1000000000;
-      const FREQ_MUTIPLE: number = 1000;
-      const MIN_PERCENT: number = 2;
-      const MIN_FREQ: number = 3;
-      for (let i = 0; i < arr.length; i++) {
-        let trackId: number;
-        // 若存在空位元素则进行删除处理
-        if (arr[i] === undefined) {
-          arr.splice(i, 1);
-          i--;
-          continue;
-        }
-        if (arr[i].thread?.indexOf('P') !== -1) {
-          trackId = Number(arr[i].thread?.slice(1)!);
-          arr[i].thread = Utils.PROCESS_MAP.get(trackId) === null ? 'Process ' + trackId : Utils.PROCESS_MAP.get(trackId)! + ' ' + trackId;
-        } else if (arr[i].thread === 'summary data') {
-        } else {
-          trackId = Number(arr[i].thread!.split('_')[1]);
-          arr[i].thread = Utils.THREAD_MAP.get(trackId) === null ? 'Thread ' + trackId : Utils.THREAD_MAP.get(trackId)! + ' ' + trackId;
-        }
-        if (arr[i].cpu < 0 ) {
-          // @ts-ignore
-          arr[i].cpu = '';
-        }
-        // @ts-ignore
-        if (arr[i].frequency < 0 ) {
-          arr[i].frequency = '';
-        }
-        // @ts-ignore
-        arr[i].percent = arr[i].percent.toFixed(MIN_PERCENT);
-        // @ts-ignore
-        arr[i].dur = (arr[i].dur / TIME_MUTIPLE).toFixed(MIN_FREQ);
+      if (arr[i].thread?.indexOf('P') !== -1) {
+        trackId = Number(arr[i].thread?.slice(1)!);
+        arr[i].thread =
+          Utils.PROCESS_MAP.get(trackId) === null
+            ? 'Process ' + trackId
+            : Utils.PROCESS_MAP.get(trackId)! + ' ' + trackId;
+      } else if (arr[i].thread === 'summary data') {
+      } else {
+        trackId = Number(arr[i].thread!.split('_')[1]);
+        arr[i].thread =
+          Utils.THREAD_MAP.get(trackId) === null ? 'Thread ' + trackId : Utils.THREAD_MAP.get(trackId)! + ' ' + trackId;
+      }
+      if (arr[i].cpu < 0) {
         // @ts-ignore
-        arr[i].consumption = (arr[i].consumption / CONS_MUTIPLE).toFixed(MIN_FREQ);
-        if (arr[i].frequency !== '') {
-            if (arr[i].frequency === 'unknown') {
-                arr[i].frequency = 'unknown';
-            } else {
-                arr[i].frequency = Number(arr[i].frequency) / FREQ_MUTIPLE;
-            }
+        arr[i].cpu = '';
+      }
+      // @ts-ignore
+      if (arr[i].frequency < 0) {
+        arr[i].frequency = '';
+      }
+      // @ts-ignore
+      arr[i].percent = arr[i].percent.toFixed(MIN_PERCENT);
+      // @ts-ignore
+      arr[i].dur = (arr[i].dur / TIME_MUTIPLE).toFixed(MIN_FREQ);
+      // @ts-ignore
+      arr[i].consumption = (arr[i].consumption / CONS_MUTIPLE).toFixed(MIN_FREQ);
+      if (arr[i].frequency !== '') {
+        if (arr[i].frequency === 'unknown') {
+          arr[i].frequency = 'unknown';
+        } else {
+          arr[i].frequency = Number(arr[i].frequency) / FREQ_MUTIPLE;
         }
-        this.fixedDeal(arr[i].children!);
       }
+      this.fixedDeal(arr[i].children!);
+    }
   }
 
   /**
    * 表头点击事件
    */
   private threadClick(data: Array<RunningFreqData>): void {
-    let labels = this.threadStatesTbl?.shadowRoot
-      ?.querySelector('.th > .td')!
-      .querySelectorAll('label');
+    let labels = this.threadStatesTbl?.shadowRoot?.querySelector('.th > .td')!.querySelectorAll('label');
     if (labels) {
       for (let i = 0; i < labels.length; i++) {
         let label = labels[i].innerHTML;
         labels[i].addEventListener('click', (e) => {
           if (label.includes('Process') && i === 0) {
             this.threadStatesTbl!.setStatus(data, false);
-            this.threadStatesTbl!.recycleDs =
-              this.threadStatesTbl!.meauseTreeRowElement(
-                data,
-                RedrawTreeForm.Retract
-              );
+            this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
           } else if (label.includes('Thread') && i === 1) {
             for (let item of data) {
               // @ts-ignore
@@ -166,18 +159,10 @@ export class TabPaneFreqUsage extends BaseElement {
                 this.threadStatesTbl!.setStatus(item.children, false);
               }
             }
-            this.threadStatesTbl!.recycleDs =
-              this.threadStatesTbl!.meauseTreeRowElement(
-                data,
-                RedrawTreeForm.Retract
-              );
+            this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
           } else if (label.includes('CPU') && i === 2) {
             this.threadStatesTbl!.setStatus(data, true);
-            this.threadStatesTbl!.recycleDs =
-              this.threadStatesTbl!.meauseTreeRowElement(
-                data,
-                RedrawTreeForm.Expand
-              );
+            this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand);
           }
         });
       }
@@ -185,7 +170,7 @@ export class TabPaneFreqUsage extends BaseElement {
   }
 
   /**
-   * 
+   *
    * @param arr 待整理的数组，会经过递归取到最底层的数据
    */
   recursion(arr: Array<RunningFreqData>): void {
@@ -194,17 +179,15 @@ export class TabPaneFreqUsage extends BaseElement {
         this.result.push(arr[idx]);
       }
       if (arr[idx].children) {
-          this.recursion(arr[idx].children!);
+        this.recursion(arr[idx].children!);
       } else {
-          this.result.push(arr[idx]);
+        this.result.push(arr[idx]);
       }
     }
   }
 
   initElements(): void {
-    this.threadStatesTbl = this.shadowRoot?.querySelector<LitTable>(
-      "#tb-running-percent"
-    );
+    this.threadStatesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-running-percent');
   }
   connectedCallback(): void {
     super.connectedCallback();
@@ -238,60 +221,60 @@ export class TabPaneFreqUsage extends BaseElement {
 }
 
 /**
- * 
+ *
  * @param runData 数据库查询上来的running数据，此函数会将数据整理成map结构，分组规则：'pid_tid'为键，running数据数字为值
  * @returns 返回map对象及所有running数据的dur和，后续会依此计算百分比
  */
 function orgnazitionMap(
   runData: Array<RunningData>,
-  cpuFreqData: Array<CpuFreqData>, 
-  leftNs: number, 
+  cpuFreqData: Array<CpuFreqData>,
+  leftNs: number,
   rightNs: number
 ): Array<RunningFreqData> {
-    let result: Map<string, Array<RunningData>> = new Map();
-    let sum: number = 0;
-    // 循环分组
-    for (let i = 0; i < runData.length; i++) {
-      let mapKey: string = runData[i].pid + '_' + runData[i].tid;
-      // 该running数据若在map对象中不包含其'pid_tid'构成的键，则新加key-value值
-      if (!result.has(mapKey)) {
-        result.set(mapKey, new Array());
-      } 
-      // 整理左右边界数据问题, 因为涉及多线程，所以必须放在循环里
-      if (runData[i].ts < leftNs && runData[i].ts + runData[i].dur > leftNs) {
-        runData[i].dur = runData[i].ts + runData[i].dur - leftNs;
-        runData[i].ts = leftNs;
-      }
-      if (runData[i].ts + runData[i].dur > rightNs) {
-        runData[i].dur = rightNs - runData[i].ts;
-      }
-      // 特殊处理数据表中dur为负值的情况
-      if (runData[i].dur < 0) {
-        runData[i].dur = 0;
-      }
-      // 分组整理数据
-      result.get(mapKey)?.push({
-        pid: runData[i].pid,
-        tid: runData[i].tid,
-        cpu: runData[i].cpu,
-        dur: runData[i].dur,
-        ts: runData[i].ts
-      });
-      sum += runData[i].dur;
+  let result: Map<string, Array<RunningData>> = new Map();
+  let sum: number = 0;
+  // 循环分组
+  for (let i = 0; i < runData.length; i++) {
+    let mapKey: string = runData[i].pid + '_' + runData[i].tid;
+    // 该running数据若在map对象中不包含其'pid_tid'构成的键，则新加key-value值
+    if (!result.has(mapKey)) {
+      result.set(mapKey, new Array());
+    }
+    // 整理左右边界数据问题, 因为涉及多线程，所以必须放在循环里
+    if (runData[i].ts < leftNs && runData[i].ts + runData[i].dur > leftNs) {
+      runData[i].dur = runData[i].ts + runData[i].dur - leftNs;
+      runData[i].ts = leftNs;
     }
-    return dealCpuFreqData(cpuFreqData, result, sum);
+    if (runData[i].ts + runData[i].dur > rightNs) {
+      runData[i].dur = rightNs - runData[i].ts;
+    }
+    // 特殊处理数据表中dur为负值的情况
+    if (runData[i].dur < 0) {
+      runData[i].dur = 0;
+    }
+    // 分组整理数据
+    result.get(mapKey)?.push({
+      pid: runData[i].pid,
+      tid: runData[i].tid,
+      cpu: runData[i].cpu,
+      dur: runData[i].dur,
+      ts: runData[i].ts,
+    });
+    sum += runData[i].dur;
+  }
+  return dealCpuFreqData(cpuFreqData, result, sum);
 }
 
 /**
- * 
+ *
  * @param cpuFreqData cpu频点数据的数组
  * @param result running数据的map对象
  * @param sum running数据的时间和
  * @returns 返回cpu频点数据map，'pid_tid'为键，频点算力值数据的数组为值
  */
 function dealCpuFreqData(
-  cpuFreqData: Array<CpuFreqData>, 
-  result: Map<string, Array<RunningData>>, 
+  cpuFreqData: Array<CpuFreqData>,
+  result: Map<string, Array<RunningData>>,
   sum: number
 ): Array<RunningFreqData> {
   let runningFreqData: Map<string, Array<RunningFreqData>> = new Map();
@@ -300,148 +283,168 @@ function dealCpuFreqData(
     for (let i = 0; i < item.length; i++) {
       for (let j = 0; j < cpuFreqData.length; j++) {
         if (item[i].cpu == cpuFreqData[j].cpu) {
-            let flag: number;
-            // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间小于频点结束时间减去running数据开始时间的差值的情况
-            if (item[i].ts > cpuFreqData[j].ts && item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur &&
-              item[i].dur < cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts) {
-                resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 1)!);
-                item.splice(i, 1);
-                i--;
-                break;
-            }
-            if (item[i].ts > cpuFreqData[j].ts && item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur && 
-              item[i].dur >= cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts) {
-                // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间大于等于频点结束时间减去running数据开始时间的差值的情况
-                resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 2)!);
-            }
-            // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值小于频点数据持续时间的情况
-            if (item[i].ts <= cpuFreqData[j].ts && (item[i].ts + item[i].dur) > cpuFreqData[j].ts &&
-              item[i].dur + item[i].ts - cpuFreqData[j].ts < cpuFreqData[j].dur) {
-                resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 3)!);
-                item.splice(i, 1);
-                i--;
-                break;
-            } 
-            if (item[i].ts <= cpuFreqData[j].ts && (item[i].ts + item[i].dur) > cpuFreqData[j].ts &&
-              item[i].dur + item[i].ts - cpuFreqData[j].ts >= cpuFreqData[j].dur) {
-                // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值大于等于频点数据持续时间的情况
-                resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 4)!);
-            }
-            if (item[i].ts <= cpuFreqData[j].ts && (item[i].ts + item[i].dur) <= cpuFreqData[j].ts) {
-              // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间小于等于频点开始时间的情况
-              resultList.push(returnObj(item[i], cpuFreqData[j], sum, flag = 5)!);
-              item.splice(i, 1);
-              i--;
-              break;
+          let flag: number;
+          // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间小于频点结束时间减去running数据开始时间的差值的情况
+          if (
+            item[i].ts > cpuFreqData[j].ts &&
+            item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur &&
+            item[i].dur < cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts
+          ) {
+            resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 1))!);
+            item.splice(i, 1);
+            i--;
+            break;
           }
-        } 
+          if (
+            item[i].ts > cpuFreqData[j].ts &&
+            item[i].ts < cpuFreqData[j].ts + cpuFreqData[j].dur &&
+            item[i].dur >= cpuFreqData[j].ts + cpuFreqData[j].dur - item[i].ts
+          ) {
+            // 当running状态数据的开始时间大于频点数据开始时间,小于频点结束时间。且running数据的持续时间大于等于频点结束时间减去running数据开始时间的差值的情况
+            resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 2))!);
+          }
+          // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值小于频点数据持续时间的情况
+          if (
+            item[i].ts <= cpuFreqData[j].ts &&
+            item[i].ts + item[i].dur > cpuFreqData[j].ts &&
+            item[i].dur + item[i].ts - cpuFreqData[j].ts < cpuFreqData[j].dur
+          ) {
+            resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 3))!);
+            item.splice(i, 1);
+            i--;
+            break;
+          }
+          if (
+            item[i].ts <= cpuFreqData[j].ts &&
+            item[i].ts + item[i].dur > cpuFreqData[j].ts &&
+            item[i].dur + item[i].ts - cpuFreqData[j].ts >= cpuFreqData[j].dur
+          ) {
+            // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间大于频点开始时间。且running数据的持续时间减去频点数据开始时间的差值大于等于频点数据持续时间的情况
+            resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 4))!);
+          }
+          if (item[i].ts <= cpuFreqData[j].ts && item[i].ts + item[i].dur <= cpuFreqData[j].ts) {
+            // 当running状态数据的开始时间小于等于频点数据开始时间,结束时间小于等于频点开始时间的情况
+            resultList.push(returnObj(item[i], cpuFreqData[j], sum, (flag = 5))!);
+            item.splice(i, 1);
+            i--;
+            break;
+          }
+        }
       }
     }
     runningFreqData.set(key, mergeSameData(resultList));
   });
-  return dealTree(runningFreqData);;
+  return dealTree(runningFreqData);
 }
 
 /**
- * 
+ *
  * @param item running数据
  * @param cpuFreqData 频点数据
  * @param sum running总和
  * @param flag 标志位，根据不同值返回不同结果
  * @returns 返回新的对象
  */
-function returnObj(item: RunningData, cpuFreqData: CpuFreqData, sum: number, flag: number): RunningFreqData | undefined {
+function returnObj(
+  item: RunningData,
+  cpuFreqData: CpuFreqData,
+  sum: number,
+  flag: number
+): RunningFreqData | undefined {
   const PERCENT: number = 100;
-  const consumption: number = (SpSegmentationChart.freqInfoMapData.size > 0
-    ? SpSegmentationChart.freqInfoMapData.get(item.cpu)?.get(cpuFreqData.value) : cpuFreqData.value)!;
+  const consumption: number = (
+    SpSegmentationChart.freqInfoMapData.size > 0
+      ? SpSegmentationChart.freqInfoMapData.get(item.cpu)?.get(cpuFreqData.value)
+      : cpuFreqData.value
+  )!;
   switch (flag) {
     case 1:
       return {
-        'thread': item.pid + '_' + item.tid,
-        'consumption': (consumption * item.dur), 
-        'cpu': item.cpu, 
-        'frequency': cpuFreqData.value, 
-        'dur': item.dur, 
-        'percent': item.dur / sum * PERCENT
+        thread: item.pid + '_' + item.tid,
+        consumption: consumption * item.dur,
+        cpu: item.cpu,
+        frequency: cpuFreqData.value,
+        dur: item.dur,
+        percent: (item.dur / sum) * PERCENT,
       };
     case 2:
       return {
-        'thread': item.pid + '_' + item.tid,
-        'consumption': consumption * (cpuFreqData.ts + cpuFreqData.dur - item.ts), 
-        'cpu': item.cpu, 
-        'frequency': cpuFreqData.value, 
-        'dur': (cpuFreqData.ts + cpuFreqData.dur - item.ts), 
-        'percent': (cpuFreqData.ts + cpuFreqData.dur - item.ts) / sum *PERCENT
+        thread: item.pid + '_' + item.tid,
+        consumption: consumption * (cpuFreqData.ts + cpuFreqData.dur - item.ts),
+        cpu: item.cpu,
+        frequency: cpuFreqData.value,
+        dur: cpuFreqData.ts + cpuFreqData.dur - item.ts,
+        percent: ((cpuFreqData.ts + cpuFreqData.dur - item.ts) / sum) * PERCENT,
       };
     case 3:
       return {
-        'thread': item.pid + '_' + item.tid,
-        'consumption': consumption * (item.dur + item.ts - cpuFreqData.ts), 
-        'cpu': item.cpu, 
-        'frequency': cpuFreqData.value, 
-        'dur': (item.dur + item.ts - cpuFreqData.ts), 
-        'percent': (item.dur + item.ts - cpuFreqData.ts) / sum * PERCENT
+        thread: item.pid + '_' + item.tid,
+        consumption: consumption * (item.dur + item.ts - cpuFreqData.ts),
+        cpu: item.cpu,
+        frequency: cpuFreqData.value,
+        dur: item.dur + item.ts - cpuFreqData.ts,
+        percent: ((item.dur + item.ts - cpuFreqData.ts) / sum) * PERCENT,
       };
-    case 4: 
+    case 4:
       return {
-        'thread': item.pid + '_' + item.tid,
-        'consumption': consumption * cpuFreqData.dur, 
-        'cpu': item.cpu, 
-        'frequency': cpuFreqData.value, 
-        'dur': cpuFreqData.dur, 
-        'percent': cpuFreqData.dur / sum * PERCENT
+        thread: item.pid + '_' + item.tid,
+        consumption: consumption * cpuFreqData.dur,
+        cpu: item.cpu,
+        frequency: cpuFreqData.value,
+        dur: cpuFreqData.dur,
+        percent: (cpuFreqData.dur / sum) * PERCENT,
       };
-    case 5: 
+    case 5:
       return {
-        'thread': item.pid + '_' + item.tid,
-        'consumption': 0, 
-        'cpu': item.cpu, 
-        'frequency': 'unknown', 
-        'dur': item.dur, 
-        'percent': item.dur / sum * PERCENT
+        thread: item.pid + '_' + item.tid,
+        consumption: 0,
+        cpu: item.cpu,
+        frequency: 'unknown',
+        dur: item.dur,
+        percent: (item.dur / sum) * PERCENT,
       };
   }
 }
 
 /**
- * 
+ *
  * @param resultList 单线程内running数据与cpu频点数据整合成的数组
  */
 function mergeSameData(resultList: Array<RunningFreqData>): Array<RunningFreqData> {
   let cpuFreqArr: Array<RunningFreqData> = [];
   let cpuArr: Array<number> = [];
   //合并同一线程内，当运行所在cpu和频点相同时，dur及percent进行累加求和
-    for (let i = 0; i < resultList.length; i++) {
-      if (!cpuArr.includes(resultList[i].cpu)) {
-        cpuArr.push(resultList[i].cpu);
-        cpuFreqArr.push(creatNewObj(resultList[i].cpu));
-      }
-      for (let j = i + 1; j < resultList.length; j++) {
-        if (resultList[i].cpu === resultList[j].cpu && resultList[i].frequency === resultList[j].frequency) {
-          resultList[i].dur += resultList[j].dur;
-          resultList[i].percent += resultList[j].percent;
-          resultList[i].consumption += resultList[j].consumption;
-          resultList.splice(j, 1);
-          j--;
-        }
+  for (let i = 0; i < resultList.length; i++) {
+    if (!cpuArr.includes(resultList[i].cpu)) {
+      cpuArr.push(resultList[i].cpu);
+      cpuFreqArr.push(creatNewObj(resultList[i].cpu));
+    }
+    for (let j = i + 1; j < resultList.length; j++) {
+      if (resultList[i].cpu === resultList[j].cpu && resultList[i].frequency === resultList[j].frequency) {
+        resultList[i].dur += resultList[j].dur;
+        resultList[i].percent += resultList[j].percent;
+        resultList[i].consumption += resultList[j].consumption;
+        resultList.splice(j, 1);
+        j--;
       }
-      cpuFreqArr.find(function (item) {
-        if (item.cpu === resultList[i].cpu) {
-          item.children?.push(resultList[i]);
-          item.children?.sort((a, b) => b.consumption - a.consumption);
-          item.dur += resultList[i].dur;
-          item.percent += resultList[i].percent;
-          item.consumption += resultList[i].consumption;
-          item.thread = resultList[i].thread;
-        }
-      });
     }
-    cpuFreqArr.sort((a, b) => a.cpu - b.cpu);
-    return cpuFreqArr;
+    cpuFreqArr.find(function (item) {
+      if (item.cpu === resultList[i].cpu) {
+        item.children?.push(resultList[i]);
+        item.children?.sort((a, b) => b.consumption - a.consumption);
+        item.dur += resultList[i].dur;
+        item.percent += resultList[i].percent;
+        item.consumption += resultList[i].consumption;
+        item.thread = resultList[i].thread;
+      }
+    });
+  }
+  cpuFreqArr.sort((a, b) => a.cpu - b.cpu);
+  return cpuFreqArr;
 }
 
 /**
- * 
+ *
  * @param params cpu层级的数据
  * @returns 整理好的进程级数据
  */
@@ -472,7 +475,7 @@ function dealTree(params: Map<string, Array<RunningFreqData>>): Array<RunningFre
         result[i].percent += result[j].percent;
         result[i].consumption += result[j].consumption;
         result.splice(j, 1);
-        j--
+        j--;
       }
     }
   }
@@ -480,24 +483,24 @@ function dealTree(params: Map<string, Array<RunningFreqData>>): Array<RunningFre
 }
 
 /**
- * 
+ *
  * @param cpu 根据cpu值创建层级结构,cpu < 0为线程、进程层级，其余为cpu层级
- * @returns 
+ * @returns
  */
 function creatNewObj(cpu: number, flag: boolean = true): RunningFreqData {
   return {
-    'thread': flag ? '' : 'P',
-    'consumption': 0, 
-    'cpu': cpu, 
-    'frequency': -1, 
-    'dur': 0, 
-    'percent': 0,
-    children: []
+    thread: flag ? '' : 'P',
+    consumption: 0,
+    cpu: cpu,
+    frequency: -1,
+    dur: 0,
+    percent: 0,
+    children: [],
   };
 }
 
 /**
- * 
+ *
  * @param arr 需要整理汇总的频点级数据
  * @returns 返回一个total->cpu->频点的三级树结构数组
  */
@@ -509,21 +512,31 @@ function fixTotal(arr: Array<RunningFreqData>): Array<RunningFreqData> {
     // 判断如果是进程数据，则将其children的数组清空，并以其作为最顶层数据
     if (arr[i].thread?.indexOf('P') !== -1) {
       arr[i].children = [];
-      arr[i].thread = arr[i].thread + '-summary data'; 
+      arr[i].thread = arr[i].thread + '-summary data';
       result.push(arr[i]);
       // 标志判定当前数组的长度，也可用.length判断
       flag++;
     } else {
       // 非进程数据会进入到else中，去判断当前线程数据的cpu分组是否存在，不存在则进行创建
       if (result[flag].children![arr[i].cpu] === undefined) {
-        result[flag].children![arr[i].cpu] = {'thread': 'summary data', 'consumption': 0, 'cpu': arr[i].cpu, 'frequency': -1, 'dur': 0, 'percent': 0, children: []};
+        result[flag].children![arr[i].cpu] = {
+          thread: 'summary data',
+          consumption: 0,
+          cpu: arr[i].cpu,
+          frequency: -1,
+          dur: 0,
+          percent: 0,
+          children: [],
+        };
       }
       // 每有一条数据要放到cpu分组下时，则将该cpu分组的各项数据累和
       result[flag].children![arr[i].cpu].consumption += arr[i].consumption;
       result[flag].children![arr[i].cpu].dur += arr[i].dur;
       result[flag].children![arr[i].cpu].percent += arr[i].percent;
       // 查找当前cpu分组下是否存在与当前数据的频点相同的数据，返回相同数据的索引值
-      let index: number = result[flag].children![arr[i].cpu].children?.findIndex((item) => item.frequency === arr[i].frequency)!;
+      let index: number = result[flag].children![arr[i].cpu].children?.findIndex(
+        (item) => item.frequency === arr[i].frequency
+      )!;
       // 若存在相同频点的数据，则进行合并，不同直接push
       if (index === -1) {
         arr[i].thread = 'summary data';
@@ -539,15 +552,15 @@ function fixTotal(arr: Array<RunningFreqData>): Array<RunningFreqData> {
 }
 
 /**
- * 
+ *
  * @param arr1 前次整理好的区分线程的数据
  * @param arr2 不区分线程的Total数据
  */
-function mergeTotal (arr1: Array<RunningFreqData>, arr2: Array<RunningFreqData>): void {
+function mergeTotal(arr1: Array<RunningFreqData>, arr2: Array<RunningFreqData>): void {
   for (var i = 0; i < arr1.length; i++) {
     const num: number = arr2.findIndex((item) => item.thread?.includes(arr1[i].thread!));
     arr2[num].thread = 'summary data';
     arr1[i].children?.unshift(arr2[num]);
     arr2.splice(num, 1);
   }
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts
index 047a5286e22673093a568a6822d594033ee1ddd2..c1b929cc34b3ebcc80220be41086b8f1a73479d9 100644
--- a/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts
+++ b/ide/src/trace/component/trace/sheet/frequsage/TabPaneFreqUsageConfig.ts
@@ -14,7 +14,7 @@
  */
 
 export class TabPaneFreqUsageConfig {
-  thread: string = "";
+  thread: string = '';
   ts: number | string;
   pid: number | string;
   tid: number | string;
@@ -22,9 +22,9 @@ export class TabPaneFreqUsageConfig {
   cpu: number | string;
   freq: number | string;
   dur: number = 0;
-  cdur: string = "";
+  cdur: string = '';
   percent: number | string;
-  flag: string = "";
+  flag: string = '';
   id: number = -1;
   children: Array<TabPaneFreqUsageConfig> | undefined;
   constructor(
@@ -59,22 +59,14 @@ export class TabPaneFreqUsageConfig {
 }
 
 export class TabPaneRunningConfig {
-  thread: string = "";
-  process: string = "";
+  thread: string = '';
+  process: string = '';
   ts: number = 0;
   pid: number = 0;
   tid: number = 0;
   cpu: number = -1;
   dur: number = 0;
-  constructor(
-    process: string,
-    thread: string,
-    ts: number,
-    pid: number,
-    tid: number,
-    cpu: number,
-    dur: number
-  ) {
+  constructor(process: string, thread: string, ts: number, pid: number, tid: number, cpu: number, dur: number) {
     this.process = process;
     this.thread = thread;
     this.ts = ts;
@@ -127,4 +119,4 @@ export interface CpuFreqTd {
   filter_id: number;
   value: number;
   dur: number;
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts
index 245b54fa80f18c1307a245d2696b671458877f3b..7b36bdf5250aeb6e8ecc2780dfd826904b9f6622 100644
--- a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts
+++ b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts
@@ -22,7 +22,7 @@ import { resizeObserver } from '../SheetUtils';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { Utils } from '../../base/Utils';
-import {queryGpuDataByRange} from "../../../../database/sql/Gpu.sql";
+import { queryGpuDataByRange } from '../../../../database/sql/Gpu.sql';
 
 interface GpuTotal {
   startTs: number;
diff --git a/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts b/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts
index 824a820febac15eac9f05b7a31580ac9233a7d5a..f186da13c5ee61d762b0e1a7df5f474d92665de3 100644
--- a/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts
+++ b/ide/src/trace/component/trace/sheet/gpu/TabPaneGraph.ts
@@ -21,7 +21,7 @@ import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogi
 import { resizeObserver } from '../SheetUtils';
 import { Utils } from '../../base/Utils';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
-import {queryGpuDataTab} from "../../../../database/sql/Gpu.sql";
+import { queryGpuDataTab } from '../../../../database/sql/Gpu.sql';
 
 interface Graph {
   startTs: number;
diff --git a/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts b/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts
index 821ab5ec4577c858a60f31b3819b3bae0f75d599..82bd6f633bb130f61d120f2084fa8b2eb73a2256 100644
--- a/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts
+++ b/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.ts
@@ -18,7 +18,13 @@ import { SelectionParam } from '../../../../bean/BoxSelection';
 import { getGpufreqData, getGpufreqDataCut } from '../../../../database/sql/Perf.sql';
 import { resizeObserver } from '../SheetUtils';
 import { SpSegmentationChart } from '../../../chart/SpSegmentationChart';
-import { GpuCountBean, TreeDataBean, type SearchGpuFuncBean, CycleDataBean, TreeDataStringBean } from '../../../../bean/GpufreqBean';
+import {
+  GpuCountBean,
+  TreeDataBean,
+  type SearchGpuFuncBean,
+  CycleDataBean,
+  TreeDataStringBean,
+} from '../../../../bean/GpufreqBean';
 
 @element('tabpane-gpufreqdatacut')
 export class TabPaneGpufreqDataCut extends BaseElement {
@@ -41,27 +47,35 @@ export class TabPaneGpufreqDataCut extends BaseElement {
       return;
     } else {
       SpSegmentationChart.setChartData('GPU-FREQ', []);
-    };
+    }
     this.currentSelectionParam = threadStatesParam;
     this.threadStatesTbl!.recycleDataSource = [];
     this.threadStatesTbl!.loading = true;
     this.getGpufreqData(threadStatesParam.leftNs, threadStatesParam.rightNs, false).then((result) => {
       if (result !== null && result.length > 0) {
         let resultList: Array<GpuCountBean> = JSON.parse(JSON.stringify(result));
-        resultList[0].dur = resultList[1] ? resultList[1].startNS - threadStatesParam.leftNs : threadStatesParam.rightNs - threadStatesParam.leftNs;
+        resultList[0].dur = resultList[1]
+          ? resultList[1].startNS - threadStatesParam.leftNs
+          : threadStatesParam.rightNs - threadStatesParam.leftNs;
         resultList[0].value = resultList[0].dur * resultList[0].val;
-        resultList[resultList.length - 1].dur = resultList.length - 1 !== 0 ? threadStatesParam.rightNs - resultList[resultList.length - 1].startNS : resultList[0].dur;
-        resultList[resultList.length - 1].value = resultList.length - 1 !== 0 ? resultList[resultList.length - 1].dur * resultList[resultList.length - 1].val : resultList[0].value;
+        resultList[resultList.length - 1].dur =
+          resultList.length - 1 !== 0
+            ? threadStatesParam.rightNs - resultList[resultList.length - 1].startNS
+            : resultList[0].dur;
+        resultList[resultList.length - 1].value =
+          resultList.length - 1 !== 0
+            ? resultList[resultList.length - 1].dur * resultList[resultList.length - 1].val
+            : resultList[0].value;
         this.initData = resultList;
         this.threadStatesTbl!.loading = false;
       } else {
         this.threadStatesTbl!.recycleDataSource = [];
         this.threadStatesTbl!.loading = false;
-      };
+      }
     });
     this._threadId!.style.border = '1px solid rgb(151, 151, 151)';
     this._threadFunc!.style.border = '1px solid rgb(151, 151, 151)';
-  };
+  }
 
   initElements(): void {
     this.threadStatesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-gpufreq-percent');
@@ -86,26 +100,33 @@ export class TabPaneGpufreqDataCut extends BaseElement {
       if (event.detail.level === EVENT_LEVEL && event.detail.thread.includes('cycle')) {
         // @ts-ignore
         SpSegmentationChart.tabHover('GPU-FREQ', true, event.detail.data.cycle);
-      };
+      }
     });
     this.addInputBorderEvent(this._threadId!);
     this.addInputBorderEvent(this._threadFunc!);
-  };
+  }
   async getGpufreqData(leftNs: number, rightNs: number, isTrue: boolean): Promise<Array<GpuCountBean>> {
     let result: Array<GpuCountBean> = await getGpufreqData(leftNs, rightNs, isTrue);
     return result;
-  };
-  async getGpufreqDataCut(tIds: string, funcName: string, leftNS: number, rightNS: number, single: boolean, loop: boolean): Promise<Array<SearchGpuFuncBean>> {
+  }
+  async getGpufreqDataCut(
+    tIds: string,
+    funcName: string,
+    leftNS: number,
+    rightNS: number,
+    single: boolean,
+    loop: boolean
+  ): Promise<Array<SearchGpuFuncBean>> {
     let result: Array<SearchGpuFuncBean> = await getGpufreqDataCut(tIds, funcName, leftNS, rightNS, single, loop);
     return result;
-  };
+  }
   private clickFun(fun: string): void {
     this.threadIdValue = this._threadId!.value.trim();
     this.threadFuncName = this._threadFunc!.value.trim();
     this.threadStatesTbl!.loading = true;
     SpSegmentationChart.tabHover('GPU-FREQ', false, -1);
     this.validationFun(this.threadIdValue, this.threadFuncName, fun);
-  };
+  }
   private addInputBorderEvent(inputElement: HTMLInputElement): void {
     if (inputElement) {
       inputElement.addEventListener('change', function () {
@@ -114,7 +135,7 @@ export class TabPaneGpufreqDataCut extends BaseElement {
         }
       });
     }
-  };
+  }
   private validationFun(threadIdValue: string, threadFuncName: string, fun: string): void {
     if (threadIdValue === '') {
       this.handleEmptyInput(this._threadId!);
@@ -125,27 +146,30 @@ export class TabPaneGpufreqDataCut extends BaseElement {
       this._threadFunc!.style.border = '1px solid rgb(151, 151, 151)';
       if (fun === 'Single') {
         this.isTrue(threadIdValue, threadFuncName, true, false);
-      };
+      }
       if (fun === 'Loop') {
         this.isTrue(threadIdValue, threadFuncName, false, true);
-      };
-    };
-  };
+      }
+    }
+  }
   private handleEmptyInput(input: HTMLInputElement): void {
     this.threadStatesTbl!.loading = false;
     input!.style.border = '1px solid rgb(255,0,0)';
     this.threadStatesTbl!.recycleDataSource = [];
-  };
+  }
   private isTrue(threadIdValue: string, threadFuncName: string, single: boolean, loop: boolean): void {
-    this.getGpufreqDataCut(threadIdValue, threadFuncName,
+    this.getGpufreqDataCut(
+      threadIdValue,
+      threadFuncName,
       this.currentSelectionParam!.leftNs,
       this.currentSelectionParam!.rightNs,
-      single, loop
+      single,
+      loop
     ).then((result: Array<SearchGpuFuncBean>) => {
       let _initData = JSON.parse(JSON.stringify(this.initData));
       this.handleDataCut(_initData, result);
     });
-  };
+  }
   private handleDataCut(initData: Array<GpuCountBean>, dataCut: Array<SearchGpuFuncBean>): void {
     if (initData.length > 0 && dataCut.length > 0) {
       let finalGpufreqData: Array<TreeDataStringBean> = new Array();
@@ -160,25 +184,24 @@ export class TabPaneGpufreqDataCut extends BaseElement {
         let initItem: GpuCountBean = initData[j];
         _lastList.push(...this.segmentationData(initItem, dataItem, i));
         j++;
-        currentIndex++; 
+        currentIndex++;
         if (currentIndex === initData.length) {
           i++;
           j = 0;
-          currentIndex = 0; 
-        };
-      };
+          currentIndex = 0;
+        }
+      }
       let tree: TreeDataStringBean = this.createTree(_lastList);
       finalGpufreqData.push(tree);
       this.threadStatesTbl!.recycleDataSource = finalGpufreqData;
       this.threadStatesTbl!.loading = false;
       this.clickTableHeader(finalGpufreqData);
-
     } else {
       this.threadStatesTbl!.recycleDataSource = [];
       this.threadStatesTbl!.loading = false;
       SpSegmentationChart.setChartData('GPU-FREQ', []);
-    };
-  };
+    }
+  }
   private segmentationData(j: GpuCountBean, e: SearchGpuFuncBean, i: number): Array<GpuCountBean> {
     let lastList: Array<GpuCountBean> = [];
     if (j.startNS <= e.startTime && j.endTime >= e.startTime) {
@@ -208,7 +231,7 @@ export class TabPaneGpufreqDataCut extends BaseElement {
             i
           )
         );
-      };
+      }
     } else if (j.startNS >= e.startTime && j.endTime <= e.endTime) {
       lastList.push(
         new GpuCountBean(
@@ -235,10 +258,10 @@ export class TabPaneGpufreqDataCut extends BaseElement {
           i
         )
       );
-    };
+    }
     return lastList;
-  };
-  // 创建树形结构 
+  }
+  // 创建树形结构
   private createTree(data: Array<GpuCountBean>): TreeDataStringBean {
     if (data.length > 0) {
       const root: {
@@ -247,9 +270,9 @@ export class TabPaneGpufreqDataCut extends BaseElement {
         dur: number;
         percent: number;
         level: number;
-        children: TreeDataBean[];  
+        children: TreeDataBean[];
       } = {
-        thread: 'gpufreq Frequency', 
+        thread: 'gpufreq Frequency',
         value: 0,
         dur: 0,
         percent: 100,
@@ -264,43 +287,48 @@ export class TabPaneGpufreqDataCut extends BaseElement {
         item.level = 4;
         this.updateValueMap(item, parentIndex, freq, valueMap);
       });
-      Object.values(valueMap).forEach((node: TreeDataBean) => { 
-        const parentNode: TreeDataBean = valueMap[node.freq! - 1]; 
+      Object.values(valueMap).forEach((node: TreeDataBean) => {
+        const parentNode: TreeDataBean = valueMap[node.freq! - 1];
         if (parentNode) {
           parentNode.children.push(node);
           parentNode.dur += node.dur;
           parentNode.value += node.value;
         } else {
-          root.children.push(node);  
-          root.dur += node.dur; 
+          root.children.push(node);
+          root.dur += node.dur;
           root.value += node.value;
         }
       });
       this.flattenAndCalculate(root, root);
       const firstLevelChildren = this.getFirstLevelChildren(root);
       SpSegmentationChart.setChartData('GPU-FREQ', firstLevelChildren);
-      let _root = this.RetainDecimals(root)
+      let _root = this.RetainDecimals(root);
       return _root;
     } else {
       return new TreeDataStringBean('', '', '', '', '', '');
-    };
-  };
-  private updateValueMap(item: GpuCountBean, parentIndex: number, freq: number, valueMap: { [parentIndex: string]: TreeDataBean }): void {
+    }
+  }
+  private updateValueMap(
+    item: GpuCountBean,
+    parentIndex: number,
+    freq: number,
+    valueMap: { [parentIndex: string]: TreeDataBean }
+  ): void {
     if (!valueMap[parentIndex]) {
       valueMap[parentIndex] = {
         thread: `cycle ${parentIndex + 1} ${item.thread}`,
         value: item.value,
         dur: item.dur,
         startNS: item.startNS,
-        percent: 100, 
+        percent: 100,
         level: 2,
         cycle: parentIndex + 1,
         children: [],
       };
-    } else { 
+    } else {
       valueMap[parentIndex].dur += item.dur;
       valueMap[parentIndex].value += item.value;
-    };
+    }
     if (!valueMap[parentIndex].children[freq]) {
       valueMap[parentIndex].children[freq] = {
         thread: item.thread,
@@ -313,41 +341,67 @@ export class TabPaneGpufreqDataCut extends BaseElement {
     } else {
       valueMap[parentIndex].children[freq].dur += item.dur;
       valueMap[parentIndex].children[freq].value += item.value;
-    };
+    }
     valueMap[parentIndex].children[freq].children.push(item as unknown as TreeDataBean);
-  };
+  }
   private getFirstLevelChildren(obj: TreeDataBean): Array<CycleDataBean> {
     const result: Array<CycleDataBean> = [];
     if (Array.isArray(obj.children)) {
-      obj.children.forEach((child) => { 
-        if (child.cycle !== undefined && child.dur !== undefined && child.value !== undefined && child.startNS !== undefined) {
-          result.push(new CycleDataBean(7,child.dur, Number((child.value / this.KUNIT).toFixed(3)), child.startNS, child.cycle,'',1));
-        };
+      obj.children.forEach((child) => {
+        if (
+          child.cycle !== undefined &&
+          child.dur !== undefined &&
+          child.value !== undefined &&
+          child.startNS !== undefined
+        ) {
+          result.push(
+            new CycleDataBean(
+              7,
+              child.dur,
+              Number((child.value / this.KUNIT).toFixed(3)),
+              child.startNS,
+              child.cycle,
+              '',
+              1
+            )
+          );
+        }
       });
-    };
+    }
     return result;
-  };
+  }
   private flattenAndCalculate(node: TreeDataBean, root: TreeDataBean): void {
-    node.percent = node.value / root.value * 100;
+    node.percent = (node.value / root.value) * 100;
     if (node.children) {
       node.children = node.children.flat();
       node.children.forEach((childNode) => this.flattenAndCalculate(childNode, root));
-    };
-  };
+    }
+  }
   private RetainDecimals(root: TreeDataBean): TreeDataStringBean {
-    const treeDataString: TreeDataStringBean = new TreeDataStringBean(root.thread!, (root.value / this.KUNIT).toFixed(this.SUB_LENGTH), (root.dur / this.UNIT).toFixed(this.SUB_LENGTH), root.percent!.toFixed(this.PERCENT_SUB_LENGTH), String(root.level), '', 0, [], '', false);
+    const treeDataString: TreeDataStringBean = new TreeDataStringBean(
+      root.thread!,
+      (root.value / this.KUNIT).toFixed(this.SUB_LENGTH),
+      (root.dur / this.UNIT).toFixed(this.SUB_LENGTH),
+      root.percent!.toFixed(this.PERCENT_SUB_LENGTH),
+      String(root.level),
+      '',
+      0,
+      [],
+      '',
+      false
+    );
     if (root.children) {
       for (const child of root.children) {
         treeDataString.children!.push(this.convertChildToString(child) as TreeDataStringBean);
-      };
-    }; 
+      }
+    }
     return treeDataString;
-  };
+  }
   private convertChildToString(child: TreeDataBean | TreeDataBean[]): TreeDataStringBean | TreeDataStringBean[] {
-    if (Array.isArray(child)) { 
-      if (child.length > 0) { 
-        return child.map(c => this.convertChildToString(c) as TreeDataStringBean);
-      } else {  
+    if (Array.isArray(child)) {
+      if (child.length > 0) {
+        return child.map((c) => this.convertChildToString(c) as TreeDataStringBean);
+      } else {
         return [];
       }
     } else if (child && child.children) {
@@ -359,7 +413,7 @@ export class TabPaneGpufreqDataCut extends BaseElement {
         dur: (child.dur / this.UNIT).toFixed(this.SUB_LENGTH),
         percent: child.percent ? child.percent.toFixed(this.PERCENT_SUB_LENGTH) : '',
         level: String(child.level),
-        startNS: child.startNS ? child.startNS.toFixed(this.SUB_LENGTH) : '',
+        startNS: child.startNS ? (child.startNS / this.UNIT).toFixed(this.SUB_LENGTH) : '',
         children: this.convertChildToString(child.children) as unknown as TreeDataStringBean[],
       };
     } else {
@@ -369,12 +423,11 @@ export class TabPaneGpufreqDataCut extends BaseElement {
         freq: child.freq ? child.freq!.toFixed(this.SUB_LENGTH) : '',
         dur: (child.dur / this.UNIT).toFixed(this.SUB_LENGTH),
         percent: child.percent ? child.percent.toFixed(this.PERCENT_SUB_LENGTH) : '',
-        level: String(child.level)
+        level: String(child.level),
       };
     }
-
-  };
-  // 表头点击事件 
+  }
+  // 表头点击事件
   private clickTableHeader(data: Array<TreeDataStringBean>): void {
     let labels = this.threadStatesTbl?.shadowRoot?.querySelector('.th > .td')!.querySelectorAll('label');
     const THREAD_INDEX: number = 0;
@@ -392,8 +445,8 @@ export class TabPaneGpufreqDataCut extends BaseElement {
               item.status = true;
               if (item.children !== undefined && item.children.length > 0) {
                 this.threadStatesTbl!.setStatus(item.children, false);
-              };
-            };
+              }
+            }
             this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
           } else if (label.includes('Freq') && i === FREQ_INDEX) {
             for (let item of data) {
@@ -402,20 +455,20 @@ export class TabPaneGpufreqDataCut extends BaseElement {
                 e.status = true;
                 if (e.children !== undefined && e.children.length > 0) {
                   this.threadStatesTbl!.setStatus(e.children, true);
-                };
-              };
-            };
+                }
+              }
+            }
 
             this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand);
-          };
+          }
         });
-      };
-    };
-  };
+      }
+    }
+  }
   connectedCallback(): void {
     super.connectedCallback();
     resizeObserver(this.parentElement!, this.threadStatesTbl!);
-  };
+  }
 
   initHtml(): string {
     return `<style>
@@ -466,5 +519,5 @@ export class TabPaneGpufreqDataCut extends BaseElement {
             <lit-table-column class="running-percent-column" width="1fr" title="Percent(%)" data-index="percent" key="percent" align="flex-start">
             </lit-table-column>
         </lit-table>`;
-  };
+  }
 }
diff --git a/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqUsage.ts b/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqUsage.ts
index 793b1c20139288704be86e2900ce99458d6a76bb..b067f60fc3c2bc37db6dd19f08d045a2e8836c7d 100644
--- a/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqUsage.ts
+++ b/ide/src/trace/component/trace/sheet/gpufreq/TabPaneGpufreqUsage.ts
@@ -18,7 +18,7 @@ import { type LitTable, RedrawTreeForm } from '../../../../../base-ui/table/lit-
 import { type SelectionParam } from '../../../../bean/BoxSelection';
 import { getGpufreqData } from '../../../../database/sql/Perf.sql';
 import { resizeObserver } from '../SheetUtils';
-import { type GpuCountBean, TreeDataBean, TreeDataStringBean } from '../../../../bean/GpufreqBean'
+import { type GpuCountBean, TreeDataBean, TreeDataStringBean } from '../../../../bean/GpufreqBean';
 
 @element('tabpane-gpufreq')
 export class TabPaneGpufreq extends BaseElement {
@@ -33,36 +33,45 @@ export class TabPaneGpufreq extends BaseElement {
     let finalGpufreqData: Array<TreeDataStringBean> = new Array();
     if (this.currentSelectionParam === clockCounterValue) {
       return;
-    };
+    }
     this.currentSelectionParam = clockCounterValue;
     this.threadStatesTbl!.recycleDataSource = [];
     this.threadStatesTbl!.loading = true;
-    getGpufreqData(clockCounterValue.leftNs, clockCounterValue.rightNs, false).then((result: Array<GpuCountBean>): void => {
-      if (result !== null && result.length > 0) {
-        let resultList: Array<GpuCountBean> = JSON.parse(JSON.stringify(result));
-        resultList[0].dur = resultList[1] ? resultList[1].startNS - clockCounterValue.leftNs : clockCounterValue.rightNs - clockCounterValue.leftNs;
-        resultList[0].value = resultList[0].dur * resultList[0].val;
-        resultList[resultList.length - 1].dur = resultList.length - 1 !== 0 ? clockCounterValue.rightNs - resultList[resultList.length - 1].startNS : resultList[0].dur;
-        resultList[resultList.length - 1].value = resultList.length - 1 !== 0 ? resultList[resultList.length - 1].dur * resultList[resultList.length - 1].val : resultList[0].value;
-        // 将切割完成后的数据整理成树形
-        let tree: TreeDataStringBean = this.createTree(resultList);
-        finalGpufreqData.push(tree);
-        this.threadStatesTbl!.recycleDataSource = finalGpufreqData;
-        this.threadStatesTbl!.loading = false;
-        this.clickTableHeader(finalGpufreqData);
-      } else {
-        this.threadStatesTbl!.recycleDataSource = [];
-        this.threadStatesTbl!.loading = false;
-      };
-
-    });
-  };
+    getGpufreqData(clockCounterValue.leftNs, clockCounterValue.rightNs, false).then(
+      (result: Array<GpuCountBean>): void => {
+        if (result !== null && result.length > 0) {
+          let resultList: Array<GpuCountBean> = JSON.parse(JSON.stringify(result));
+          resultList[0].dur = resultList[1]
+            ? resultList[1].startNS - clockCounterValue.leftNs
+            : clockCounterValue.rightNs - clockCounterValue.leftNs;
+          resultList[0].value = resultList[0].dur * resultList[0].val;
+          resultList[resultList.length - 1].dur =
+            resultList.length - 1 !== 0
+              ? clockCounterValue.rightNs - resultList[resultList.length - 1].startNS
+              : resultList[0].dur;
+          resultList[resultList.length - 1].value =
+            resultList.length - 1 !== 0
+              ? resultList[resultList.length - 1].dur * resultList[resultList.length - 1].val
+              : resultList[0].value;
+          // 将切割完成后的数据整理成树形
+          let tree: TreeDataStringBean = this.createTree(resultList);
+          finalGpufreqData.push(tree);
+          this.threadStatesTbl!.recycleDataSource = finalGpufreqData;
+          this.threadStatesTbl!.loading = false;
+          this.clickTableHeader(finalGpufreqData);
+        } else {
+          this.threadStatesTbl!.recycleDataSource = [];
+          this.threadStatesTbl!.loading = false;
+        }
+      }
+    );
+  }
 
   initElements(): void {
     this.threadStatesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-gpufreq-percent');
-  };
+  }
 
-  // 创建树形结构 
+  // 创建树形结构
   private createTree(data: Array<GpuCountBean>): TreeDataStringBean {
     if (data.length > 0) {
       const root: {
@@ -89,20 +98,19 @@ export class TabPaneGpufreq extends BaseElement {
         if (parentNode) {
           parentNode.children.push(node);
           parentNode.dur += node.dur;
-          parentNode.value += node.value;  
+          parentNode.value += node.value;
         } else {
           root.children.push(node);
           root.dur += node.dur;
           root.value += node.value;
-        };
+        }
       });
       this.flattenAndCalculate(root, root);
-      let _root = this.RetainDecimals(root)
+      let _root = this.RetainDecimals(root);
       return _root;
-
-    };
+    }
     return new TreeDataStringBean('', '', '', '', '', '');
-  };
+  }
   // 更新valueMap，用于整理相同频点的数据
   private updateValueMap(item: GpuCountBean, freq: number, valueMap: { [freq: string]: TreeDataBean }): void {
     if (!valueMap[freq]) {
@@ -117,34 +125,45 @@ export class TabPaneGpufreq extends BaseElement {
     } else {
       valueMap[freq].dur += item.dur;
       valueMap[freq].value += item.value;
-    };
+    }
     valueMap[freq].children.push(item as unknown as TreeDataBean);
-  };
+  }
   // 对树进行扁平化处理和计算
   private flattenAndCalculate(node: TreeDataBean, root: TreeDataBean): void {
     //处理百分比计算问题并保留两位小数
-    node.percent = node.value / root.value * 100;
+    node.percent = (node.value / root.value) * 100;
     if (node.children) {
       node.children = node.children.flat();
       node.children.forEach((childNode) => this.flattenAndCalculate(childNode, root));
-    };
-  };
+    }
+  }
   // 将树形数据进行保留小数操作
   private RetainDecimals(root: TreeDataBean): TreeDataStringBean {
-    const treeDataString: TreeDataStringBean = new TreeDataStringBean(root.thread!,  (root.value / this.KUNIT).toFixed(this.SUB_LENGTH), (root.dur / this.UNIT).toFixed(this.SUB_LENGTH), root.percent!.toFixed(this.PERCENT_SUB_LENGTH),String(root.level), '',0, [], '', false);
+    const treeDataString: TreeDataStringBean = new TreeDataStringBean(
+      root.thread!,
+      (root.value / this.KUNIT).toFixed(this.SUB_LENGTH),
+      (root.dur / this.UNIT).toFixed(this.SUB_LENGTH),
+      root.percent!.toFixed(this.PERCENT_SUB_LENGTH),
+      String(root.level),
+      '',
+      0,
+      [],
+      '',
+      false
+    );
     if (root.children) {
       for (const child of root.children) {
         treeDataString.children!.push(this.convertChildToString(child) as TreeDataStringBean);
-      };
-    };
+      }
+    }
     return treeDataString;
-  };
-  // 将树形数据进行保留小数的具体操作 
+  }
+  // 将树形数据进行保留小数的具体操作
   private convertChildToString(child: TreeDataBean | TreeDataBean[]): TreeDataStringBean | TreeDataStringBean[] {
     if (Array.isArray(child)) {
-      if (child.length > 0) { 
-        return child.map(c => this.convertChildToString(c) as TreeDataStringBean);
-      } else {  
+      if (child.length > 0) {
+        return child.map((c) => this.convertChildToString(c) as TreeDataStringBean);
+      } else {
         return [];
       }
     } else if (child && child.children) {
@@ -156,19 +175,18 @@ export class TabPaneGpufreq extends BaseElement {
         percent: child.percent ? child.percent.toFixed(this.PERCENT_SUB_LENGTH) : '',
         children: this.convertChildToString(child.children) as unknown as TreeDataStringBean[],
       };
-    } else { 
+    } else {
       return {
         thread: child.thread as string,
         value: (child.value / this.KUNIT).toFixed(this.SUB_LENGTH),
         freq: child.freq ? child.freq!.toFixed(this.SUB_LENGTH) : '',
         dur: (child.dur / this.UNIT).toFixed(this.SUB_LENGTH),
         percent: child.percent ? child.percent.toFixed(this.PERCENT_SUB_LENGTH) : '',
-        level: String(child.level)
+        level: String(child.level),
       };
     }
-
-  };
-  // 表头点击事件 
+  }
+  // 表头点击事件
   private clickTableHeader(data: Array<TreeDataStringBean>): void {
     let labels = this.threadStatesTbl?.shadowRoot?.querySelector('.th > .td')!.querySelectorAll('label');
     const THREAD_INDEX: number = 0;
@@ -178,30 +196,26 @@ export class TabPaneGpufreq extends BaseElement {
       for (let i = 0; i < labels.length; i++) {
         let label = labels[i].innerHTML;
         labels[i].addEventListener('click', (e) => {
-
           if (label.includes('Thread') && i === THREAD_INDEX) {
             this.threadStatesTbl!.setStatus(data, false);
             this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
-
           } else if (label.includes('Freq') && i === FREQ_INDEX) {
-
             for (let item of data) {
               item.status = true;
               if (item.children !== undefined && item.children.length > 0) {
                 this.threadStatesTbl!.setStatus(item.children, true);
-              };
-            };
+              }
+            }
             this.threadStatesTbl!.recycleDs = this.threadStatesTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand);
-
-          };
+          }
         });
-      };
-    };
-  };
+      }
+    }
+  }
   connectedCallback(): void {
     super.connectedCallback();
     resizeObserver(this.parentElement!, this.threadStatesTbl!);
-  };
+  }
 
   initHtml(): string {
     return `
@@ -225,5 +239,5 @@ export class TabPaneGpufreq extends BaseElement {
             </lit-table-column>
         </lit-table>
         `;
-  };
-}
\ No newline at end of file
+  }
+}
diff --git a/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogSummary.ts b/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogSummary.ts
index 714e2565bcf84e989f4f513fdc6f40a1e8c213e1..708ed1ddffe8805401128f5e2eff7ff892d7c60d 100644
--- a/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogSummary.ts
+++ b/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogSummary.ts
@@ -222,7 +222,7 @@ export class TabPaneHiLogSummary extends BaseElement {
 
   private buildTreeTblNodes(logTreeNodes: LogStruct[]): LogTreeNode[] {
     let id = 0;
-    let root: LogTreeNode = {id: id, depth: 0, children: [], logName: 'All', count: 0};
+    let root: LogTreeNode = { id: id, depth: 0, children: [], logName: 'All', count: 0 };
     logTreeNodes.forEach((item) => {
       id++;
       let levelNode = root.children.find((node) => node.logName === item.level);
@@ -230,7 +230,7 @@ export class TabPaneHiLogSummary extends BaseElement {
         levelNode.count++;
       } else {
         id++;
-        levelNode = {id: id, depth: 0, children: [], logName: item.level, count: 1};
+        levelNode = { id: id, depth: 0, children: [], logName: item.level, count: 1 };
         root.children.push(levelNode);
       }
       let processNode = levelNode.children.find((node) => node.logName === item.processName);
@@ -238,7 +238,7 @@ export class TabPaneHiLogSummary extends BaseElement {
         processNode.count++;
       } else {
         id++;
-        processNode = {id: id, depth: 1, children: [], logName: item.processName, count: 1};
+        processNode = { id: id, depth: 1, children: [], logName: item.processName, count: 1 };
         levelNode.children.push(processNode);
       }
       let tagNode = processNode.children.find((node) => node.logName === item.tag);
@@ -246,7 +246,7 @@ export class TabPaneHiLogSummary extends BaseElement {
         tagNode.count++;
       } else {
         id++;
-        tagNode = {id: id, depth: 2, children: [], logName: item.tag, count: 1};
+        tagNode = { id: id, depth: 2, children: [], logName: item.tag, count: 1 };
         processNode.children.push(tagNode);
       }
       let messageNode = tagNode.children.find((node) => node.logName === item.context);
@@ -254,7 +254,7 @@ export class TabPaneHiLogSummary extends BaseElement {
         messageNode.count++;
       } else {
         id++;
-        tagNode.children.push({id: id, depth: 3, children: [], logName: item.context, count: 1});
+        tagNode.children.push({ id: id, depth: 3, children: [], logName: item.context, count: 1 });
       }
       root.count++;
     });
diff --git a/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogs.ts b/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogs.ts
index 9e10a7afeca15ba9c44be3f19b27a34d664ef0ec..c62cb357c200121d9925ee257b087434276b63bb 100644
--- a/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogs.ts
+++ b/ide/src/trace/component/trace/sheet/hilog/TabPaneHiLogs.ts
@@ -75,8 +75,8 @@ export class TabPaneHiLogs extends BaseElement {
     this.searchFilterInput = this.shadowRoot?.querySelector<HTMLInputElement>('#search-filter');
     this.processFilter = this.shadowRoot?.querySelector<HTMLInputElement>('#process-filter');
     this.spSystemTrace = document
-    .querySelector('body > sp-application')
-    ?.shadowRoot?.querySelector<SpSystemTrace>('#sp-system-trace');
+      .querySelector('body > sp-application')
+      ?.shadowRoot?.querySelector<SpSystemTrace>('#sp-system-trace');
     this.tableTimeHandle = this.delayedRefresh(this.refreshTable);
     this.tableTitleTimeHandle = this.delayedRefresh(this.refreshLogsTitle);
     this.tagFilterDiv = this.shadowRoot!.querySelector<HTMLDivElement>('#tagFilter');
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.html.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.html.ts
index 2f18a9209c3e8de4c38c5d6f2d2640f6c7e2d1c7..21c6f8a95f0102640d25427b1a2cb283bb1e3c6e 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.html.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.html.ts
@@ -84,7 +84,7 @@ selector{
                 <img src="img/function.png" size="20" v-if=" type == 0 ">
             </template>
         </lit-table-column>
-        <lit-table-column width="1fr" title="" data-index="symbolName" key="symbolName"  
+        <lit-table-column width="1fr" title="" data-index="symbol" key="symbol"  
         align="flex-start"></lit-table-column>
     </lit-table>
     </div>
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
index 8866102706ccc0f78d87322e90db806172bbf6b1..f5d30ea2fd2f3bed6a144ecd46b144b6e5b2504f 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
@@ -273,8 +273,7 @@ export class TabpanePerfProfile extends BaseElement {
     this.getChildTree(chainMerageData.children as Array<PerfCallChainMerageData>, maxId, childrenMerageData);
     let perfProfileParentsList = parentsMerageData.reverse().concat(childrenMerageData.reverse());
     for (let data of perfProfileParentsList) {
-      data.type =
-        data.libName.endsWith('.so.1') || data.libName.endsWith('.dll') || data.libName.endsWith('.so') ? 0 : 1;
+      data.type = data.lib.endsWith('.so.1') || data.lib.endsWith('.dll') || data.lib.endsWith('.so') ? 0 : 1;
     }
     let len = perfProfileParentsList.length;
     this.perfProfilerRightSource = perfProfileParentsList;
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
index 0ea0b68a8820fe3011c5b8560159691b50b767e6..1322a82266b447345d49a24be884cb7a9ff6cf9c 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
@@ -25,7 +25,7 @@ import { SpSystemTrace } from '../../../SpSystemTrace';
 import {
   queryPerfProcess,
   queryPerfSampleCallChain,
-  queryPerfSampleListByTimeRange
+  queryPerfSampleListByTimeRange,
 } from '../../../../database/sql/Perf.sql';
 
 @element('tabpane-perf-sample')
@@ -40,11 +40,12 @@ export class TabPanePerfSample extends BaseElement {
   set data(perfSampleSelection: SelectionParam | null | undefined) {
     this.perfSampleTbl!.style.visibility = 'visible';
     // @ts-ignore
-    this.perfSampleTbl?.shadowRoot?.querySelector('.table')?.style?.height =
-      `${this.parentElement!.clientHeight - 40  }px`;
+    this.perfSampleTbl?.shadowRoot?.querySelector('.table')?.style?.height = `${
+      this.parentElement!.clientHeight - 40
+    }px`;
     this.perfSampleTbl!.recycleDataSource = [];
     // @ts-ignore
-    this.tblData?.shadowRoot?.querySelector('.table')?.style?.height = `${this.parentElement!.clientHeight - 25  }px`;
+    this.tblData?.shadowRoot?.querySelector('.table')?.style?.height = `${this.parentElement!.clientHeight - 25}px`;
     this.tblData!.recycleDataSource = [];
     if (perfSampleSelection) {
       Promise.all([
@@ -59,9 +60,9 @@ export class TabPanePerfSample extends BaseElement {
         ),
       ]).then((results) => {
         let processes = results[0] as Array<PerfThread>;
-        log(`queryPerfProcess size : ${  processes.length}`);
+        log(`queryPerfProcess size : ${processes.length}`);
         let samples = results[1] as Array<PerfSample>;
-        log(`queryPerfSampleListByTimeRange size : ${  samples.length}`);
+        log(`queryPerfSampleListByTimeRange size : ${samples.length}`);
         this.processMap.clear();
         for (let process of processes) {
           this.processMap.set(process.pid, process);
@@ -71,17 +72,17 @@ export class TabPanePerfSample extends BaseElement {
     }
   }
 
-  private initPerfSampleData(samples: PerfSample[]): void{
+  private initPerfSampleData(samples: PerfSample[]): void {
     for (let sample of samples) {
       let process = this.processMap.get(sample.pid);
       sample.processName =
-        process === null || process === undefined ?
-          `Process(${sample.pid})` :
-          `${process!.processName || 'Process'}(${sample.pid})`;
+        process === null || process === undefined
+          ? `Process(${sample.pid})`
+          : `${process!.processName || 'Process'}(${sample.pid})`;
       sample.threadName =
-        sample.threadName === null || sample.threadName === undefined ?
-          `Thread(${sample.tid})` :
-          `${sample.threadName}(${sample.tid})`;
+        sample.threadName === null || sample.threadName === undefined
+          ? `Thread(${sample.tid})`
+          : `${sample.threadName}(${sample.tid})`;
       sample.coreName = `CPU ${sample.core}`;
       sample.timeString = Utils.getTimeString(sample.time);
       sample.backtrace = [];
@@ -139,10 +140,11 @@ export class TabPanePerfSample extends BaseElement {
     new ResizeObserver(() => {
       if (this.parentElement?.clientHeight !== 0) {
         // @ts-ignore
-        this.perfSampleTbl?.shadowRoot.querySelector('.table').style.height =
-          `${this.parentElement!.clientHeight - 40  }px`;
+        this.perfSampleTbl?.shadowRoot.querySelector('.table').style.height = `${
+          this.parentElement!.clientHeight - 40
+        }px`;
         // @ts-ignore
-        this.tblData?.shadowRoot.querySelector('.table').style.height = `${this.parentElement.clientHeight - 25  }px`;
+        this.tblData?.shadowRoot.querySelector('.table').style.height = `${this.parentElement.clientHeight - 25}px`;
         this.perfSampleTbl?.reMeauseHeight();
         this.tblData?.reMeauseHeight();
       }
diff --git a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.html.ts b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.html.ts
index 363b0de5ba52b50a20bdf44c786632c2bc15d492..e8905d1b0a265b593ef5b6fbb8e66a66ece4154f 100644
--- a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.html.ts
+++ b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.html.ts
@@ -1,17 +1,17 @@
 /*
-* 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.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 export const TabPaneHiSysEventSummaryHtml = `<style>
         :host{
@@ -90,4 +90,4 @@ export const TabPaneHiSysEventSummaryHtml = `<style>
           </lit-table-column>
           <lit-table-column title="Count" data-index="count" key="count"></lit-table-column>
         </lit-table>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.ts b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.ts
index f5d496d12992f3a154234dcd1f7c1fdfda71f138..9d2b4b792d6108788af8cb62cd62205d959aece5 100644
--- a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.ts
+++ b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHiSysEventSummary.ts
@@ -1,17 +1,17 @@
 /*
-* 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.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement';
 import { SelectionParam } from '../../../../bean/BoxSelection';
@@ -219,7 +219,7 @@ export class TabPaneHiSysEventSummary extends BaseElement {
 
   private buildTreeTblNodes(eventTreeNodes: HiSysEventStruct[]): HiSysEventTreeNode[] {
     let id = 0;
-    let root: HiSysEventTreeNode = {id: id, depth: 0, children: [], summaryName: '', count: 0};
+    let root: HiSysEventTreeNode = { id: id, depth: 0, children: [], summaryName: '', count: 0 };
     eventTreeNodes.forEach((item) => {
       id++;
       let levelNode = root.children.find((node) => node.summaryName === item.level);
@@ -227,7 +227,7 @@ export class TabPaneHiSysEventSummary extends BaseElement {
         levelNode.count++;
       } else {
         id++;
-        levelNode = {id: id, depth: 0, children: [], summaryName: item.level, count: 1};
+        levelNode = { id: id, depth: 0, children: [], summaryName: item.level, count: 1 };
         root.children.push(levelNode);
       }
       let domainNode = levelNode.children.find((node) => node.summaryName === item.domain);
@@ -235,7 +235,7 @@ export class TabPaneHiSysEventSummary extends BaseElement {
         domainNode.count++;
       } else {
         id++;
-        domainNode = {id: id, depth: 1, children: [], summaryName: item.domain, count: 1};
+        domainNode = { id: id, depth: 1, children: [], summaryName: item.domain, count: 1 };
         levelNode.children.push(domainNode);
       }
       let eventNameNode = domainNode.children.find((node) => node.summaryName === item.eventName);
@@ -243,7 +243,7 @@ export class TabPaneHiSysEventSummary extends BaseElement {
         eventNameNode.count++;
       } else {
         id++;
-        eventNameNode = {id: id, depth: 2, children: [], summaryName: item.eventName, count: 1};
+        eventNameNode = { id: id, depth: 2, children: [], summaryName: item.eventName, count: 1 };
         domainNode.children.push(eventNameNode);
       }
       root.count++;
diff --git a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.html.ts b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.html.ts
index c2f2acd64e247a38a444cc06382ea8d99d0ec750..afd67f7b4f0c1a3ad9c62c5518ff8a9e28293176 100644
--- a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.html.ts
+++ b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.html.ts
@@ -1,17 +1,17 @@
 /*
-* 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.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 export const TabPaneHiSysEventsHtml = `
         <style>
diff --git a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.ts b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.ts
index 38484fb23e65da339fc07ade63860c0906606b8c..99a36a67fb38e84d7c0ed00a2f897c7036a21d22 100644
--- a/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.ts
+++ b/ide/src/trace/component/trace/sheet/hisysevent/TabPaneHisysEvents.ts
@@ -25,8 +25,8 @@ import { Flag } from '../../timer-shaft/Flag';
 import { TraceSheet } from '../../base/TraceSheet';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import { ColorUtils } from '../../base/ColorUtils';
-import {queryHiSysEventTabData} from "../../../../database/sql/Perf.sql";
-import {queryRealTime} from "../../../../database/sql/Clock.sql";
+import { queryHiSysEventTabData } from '../../../../database/sql/Perf.sql';
+import { queryRealTime } from '../../../../database/sql/Clock.sql';
 import { TabPaneHiSysEventsHtml } from './TabPaneHisysEvents.html';
 
 @element('tab-hisysevents')
@@ -72,7 +72,7 @@ export class TabPaneHisysEvents extends BaseElement {
     this.initTabSheetEl();
     queryRealTime().then((result) => {
       if (result && result.length > 0) {
-        result.forEach(item => {
+        result.forEach((item) => {
           if (item.name === 'realtime') {
             this.realTime = item.ts;
           } else {
@@ -101,7 +101,8 @@ export class TabPaneHisysEvents extends BaseElement {
     this.domainFilterInput = this.shadowRoot?.querySelector<HTMLInputElement>('#domain-filter');
     this.eventNameFilterInput = this.shadowRoot?.querySelector<HTMLInputElement>('#event-name-filter');
     this.levelFilter = this.shadowRoot?.querySelector<HTMLSelectElement>('#level-filter');
-    this.spSystemTrace = document.querySelector('body > sp-application')
+    this.spSystemTrace = document
+      .querySelector('body > sp-application')
       ?.shadowRoot?.querySelector<SpSystemTrace>('#sp-system-trace');
     this.traceSheetEl = this.spSystemTrace?.shadowRoot?.querySelector('.trace-sheet');
     this.contentFilterInput = this.shadowRoot?.querySelector<HTMLInputElement>('#contents-filter');
@@ -340,7 +341,11 @@ export class TabPaneHisysEvents extends BaseElement {
   eventNameKeyEvent = (e: KeyboardEvent): void => {
     let eventNameValue = this.eventNameFilterInput!.value.trim();
     if (e.key === 'Enter') {
-      if (eventNameValue !== '' && !this.eventNameTag.has(eventNameValue.toLowerCase()) && this.eventNameTag.size < 10) {
+      if (
+        eventNameValue !== '' &&
+        !this.eventNameTag.has(eventNameValue.toLowerCase()) &&
+        this.eventNameTag.size < 10
+      ) {
         let tagElement = this.buildTag(eventNameValue);
         this.eventNameTag!.add(eventNameValue.toLowerCase());
         this.eventNameTagDiv!.append(tagElement);
@@ -422,7 +427,7 @@ export class TabPaneHisysEvents extends BaseElement {
         let contentValue = value;
         if (key.endsWith('_TIME')) {
           if (!isNaN(Number(value))) {
-            contentValue = ((this.timestampToNS(value) - this.realTime) + this.bootTime).toString();
+            contentValue = (this.timestampToNS(value) - this.realTime + this.bootTime).toString();
             if (this.realTime < 0) {
               contentValue = value;
             }
diff --git a/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts b/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts
index f69cb4884e94da3c4ea925b1caddbcc7b4d0b88d..d3eb7a02e6c318453661d874a608ccb2371dd768 100644
--- a/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts
+++ b/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts
@@ -30,8 +30,7 @@ export class TabPaneIrqCounter extends BaseElement {
   set data(irqParam: SelectionParam | any) {
     if (this.irqCounterTbl) {
       //@ts-ignore
-      this.irqCounterTbl.shadowRoot.querySelector('.table').style.height = `${this.parentElement!.clientHeight - 45
-      }px`;
+      this.irqCounterTbl.shadowRoot.querySelector('.table').style.height = `${this.parentElement!.clientHeight - 45}px`;
     }
     this.irqRange!.textContent = `Selected range: ${parseFloat(
       ((irqParam.rightNs - irqParam.leftNs) / 1000000.0).toFixed(5)
@@ -111,8 +110,7 @@ export class TabPaneIrqCounter extends BaseElement {
       if (key === 'wallDurationFormat' || type === 0) {
         return (type === 1 ? 1 : -1) * (irqCounterLeftData.wallDuration - irqCounterRightData.wallDuration);
       } else if (key === 'count') {
-        return (type === 1 ? 1 : -1) *
-          (parseInt(irqCounterLeftData.count) - parseInt(irqCounterRightData.count));
+        return (type === 1 ? 1 : -1) * (parseInt(irqCounterLeftData.count) - parseInt(irqCounterRightData.count));
       } else if (key === 'maxDurationFormat') {
         return (type === 1 ? 1 : -1) * (irqCounterLeftData.maxDuration - irqCounterRightData.maxDuration);
       } else if (key === 'avgDuration') {
diff --git a/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts b/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts
index bc7cdb6d16c8fcf46caf832451c3e07f522439e7..c757378733d96df1d8d0b5a2f0eb6b4f6ad70e17 100644
--- a/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts
+++ b/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts
@@ -19,7 +19,7 @@ import { LitTable } from '../../../../../base-ui/table/lit-table';
 import { JankFramesStruct } from '../../../../bean/JankFramesStruct';
 import { JanksStruct } from '../../../../bean/JanksStruct';
 import { resizeObserver } from '../SheetUtils';
-import {querySelectRangeData} from "../../../../database/sql/Janks.sql";
+import { querySelectRangeData } from '../../../../database/sql/Janks.sql';
 
 @element('tabpane-frames')
 export class TabPaneFrames extends BaseElement {
@@ -50,9 +50,9 @@ export class TabPaneFrames extends BaseElement {
           allData.push(data);
         }
       });
-      querySelectRangeData(allPid, framesParam.leftNs, framesParam.rightNs).then((result: any)=> {
+      querySelectRangeData(allPid, framesParam.leftNs, framesParam.rightNs).then((result: any) => {
         sumRes.occurrences = allData.length + result.length;
-        allData.forEach(item => {
+        allData.forEach((item) => {
           // frameTime
           this.frameTimelineJankDataHandle(item, appJank, noJank);
         });
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.html.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.html.ts
index b8182296575427543096a0822b5dbe41730d6da8..ab199a7d69d165d29dc4b237ea27c6c5b14d8dfa 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.html.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.html.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-export const TabPaneNMCallTreeHtml =  `
+export const TabPaneNMCallTreeHtml = `
         <style>
         :host{
             padding: 10px 10px 0 10px;
@@ -59,7 +59,7 @@ export const TabPaneNMCallTreeHtml =  `
             <tab-native-data-modal id="modal"></tab-native-data-modal>
             <lit-table id="tb-filesystem-calltree" style="height: auto" tree>
                 <lit-table-column class="nm-call-tree-column" width="60%" title="Symbol Name" 
-                data-index="symbolName" key="symbolName"  align="flex-start" retract>
+                data-index="symbol" key="symbol"  align="flex-start" retract>
                 </lit-table-column>
                 <lit-table-column class="nm-call-tree-column" width="1fr" title="Size" 
                 data-index="heapSizeStr" key="heapSizeStr"  align="flex-start" order>
@@ -96,7 +96,7 @@ export const TabPaneNMCallTreeHtml =  `
                 </template>
             </lit-table-column>
             <lit-table-column class="nm-call-tree-column" width="1fr" title="" 
-            data-index="symbolName" key="symbolName"  align="flex-start"></lit-table-column>
+            data-index="symbol" key="symbol"  align="flex-start"></lit-table-column>
         </lit-table>
         </div>
         </lit-slicer>
@@ -107,4 +107,4 @@ export const TabPaneNMCallTreeHtml =  `
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>  
     <div class="loading nm-call-tree-loading"></div>
-    </div>`;
\ No newline at end of file
+    </div>`;
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
index 3aa67c12f97f8d6aa0b4121dafa8af5b6eb52106..c04a48c57fd05c07c3a75657bbefcacf4e8ce272 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
@@ -306,8 +306,7 @@ export class TabpaneNMCalltree extends BaseElement {
     this.getChildTree(fileMerageBean.children as Array<FileMerageBean>, maxId, children);
     let resultValue = parents.reverse().concat(children.reverse());
     for (let data of resultValue) {
-      data.type =
-        data.libName.endsWith('.so.1') || data.libName.endsWith('.dll') || data.libName.endsWith('.so') ? 0 : 1;
+      data.type = data.lib.endsWith('.so.1') || data.lib.endsWith('.dll') || data.lib.endsWith('.so') ? 0 : 1;
     }
     let resultLength = resultValue.length;
     this.filesystemTbr!.dataSource = resultLength == 0 ? [] : resultValue;
@@ -527,10 +526,10 @@ export class TabpaneNMCalltree extends BaseElement {
         return nmCallTreeFuncArgs;
       }
       if (this.currentSelectedData !== undefined) {
-        this.nmCallTreeFilter!.addDataMining({ name: this.currentSelectedData.symbolName }, nmCallTreeFuncData.item);
+        this.nmCallTreeFilter!.addDataMining({ name: this.currentSelectedData.symbol }, nmCallTreeFuncData.item);
         nmCallTreeFuncArgs.push({
           funcName: 'splitTree',
-          funcArgs: [this.currentSelectedData.symbolName, false, true],
+          funcArgs: [this.currentSelectedData.symbol, false, true],
         });
       } else {
         return nmCallTreeFuncArgs;
@@ -555,8 +554,8 @@ export class TabpaneNMCalltree extends BaseElement {
         });
         nmCallTreeFuncArgs.push({ funcName: 'resotreAllNode', funcArgs: [list] });
         nmCallTreeFuncArgs.push({ funcName: 'resetAllNode', funcArgs: [] });
-        list.forEach((symbolName: string): void => {
-          nmCallTreeFuncArgs.push({ funcName: 'clearSplitMapData', funcArgs: [symbolName] });
+        list.forEach((symbol: string): void => {
+          nmCallTreeFuncArgs.push({ funcName: 'clearSplitMapData', funcArgs: [symbol] });
         });
       }
     }
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.ts
index 59f073739783f4244ae3be979dcadd0875d9fbde..4053b0d28cdf81efe3751024c7226a44acc87dd5 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.ts
@@ -28,15 +28,9 @@ import '../TabPaneFilter';
 import { FilterData, TabPaneFilter } from '../TabPaneFilter';
 import '../../../../../base-ui/slicer/lit-slicer';
 import { procedurePool } from '../../../../database/Procedure';
-import {
-  formatRealDateMs,
-  getTimeString
-} from '../../../../database/logic-worker/ProcedureLogicWorkerCommon';
+import { formatRealDateMs, getTimeString } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon';
 import { SpNativeMemoryChart } from '../../../chart/SpNativeMemoryChart';
-import {
-  queryAllHookData,
-  queryNativeHookSnapshotTypes
-} from '../../../../database/sql/NativeHook.sql';
+import { queryAllHookData, queryNativeHookSnapshotTypes } from '../../../../database/sql/NativeHook.sql';
 
 @element('tabpane-native-sample')
 export class TabPaneNMSampleList extends BaseElement {
@@ -69,14 +63,14 @@ export class TabPaneNMSampleList extends BaseElement {
       this.initTypes(sampleParam.nativeMemoryCurrentIPid);
     }
     if (sampleParam.nativeMemory.indexOf(this.nativeType[0]) !== -1) {
-      this.types.push('\'AllocEvent\'');
-      this.types.push('\'MmapEvent\'');
+      this.types.push("'AllocEvent'");
+      this.types.push("'MmapEvent'");
     } else {
       if (sampleParam.nativeMemory.indexOf(this.nativeType[1]) !== -1) {
-        this.types.push('\'AllocEvent\'');
+        this.types.push("'AllocEvent'");
       }
       if (sampleParam.nativeMemory.indexOf(this.nativeType[2]) !== -1) {
-        this.types.push('\'MmapEvent\'');
+        this.types.push("'MmapEvent'");
       }
     }
   }
@@ -98,8 +92,9 @@ export class TabPaneNMSampleList extends BaseElement {
     rootSample.snapshot = `Snapshot${this.numberToWord(this.samplerInfoSource.length + 1)}`;
     rootSample.startTs = data.startTs;
     rootSample.timestamp =
-      SpNativeMemoryChart.REAL_TIME_DIF === 0 ? getTimeString(data.startTs) :
-        formatRealDateMs(data.startTs + SpNativeMemoryChart.REAL_TIME_DIF);
+      SpNativeMemoryChart.REAL_TIME_DIF === 0
+        ? getTimeString(data.startTs)
+        : formatRealDateMs(data.startTs + SpNativeMemoryChart.REAL_TIME_DIF);
     rootSample.eventId = data.eventId;
     rootSample.threadId = data.threadId;
     rootSample.threadName = data.threadName;
@@ -151,8 +146,9 @@ export class TabPaneNMSampleList extends BaseElement {
           nameGroup[item.eventType].push(item);
         });
         let leftTime =
-          TabPaneNMSampleList.tableMarkData.length === 1 ? 0 :
-            TabPaneNMSampleList.tableMarkData[TabPaneNMSampleList.tableMarkData.length - 2].startTs;
+          TabPaneNMSampleList.tableMarkData.length === 1
+            ? 0
+            : TabPaneNMSampleList.tableMarkData[TabPaneNMSampleList.tableMarkData.length - 2].startTs;
         nmSamplerHookResult.forEach((item) => {
           item.threadId = rootSample.threadId;
           item.threadName = rootSample.threadName;
@@ -284,7 +280,7 @@ export class TabPaneNMSampleList extends BaseElement {
         let hookCallInfo = new NativeHookCallInfo();
         hookCallInfo.threadId = hookSamplerInfo.threadId;
         hookCallInfo.threadName = hookSamplerInfo.threadName;
-        hookCallInfo.title = `${hookSamplerInfo.threadName ?? ''}【${hookSamplerInfo.threadId}】`;
+        hookCallInfo.symbol = `${hookSamplerInfo.threadName ?? ''}【${hookSamplerInfo.threadId}】`;
         hookCallInfo.type = -1;
         source.push(hookCallInfo);
         source.push(...results);
@@ -416,7 +412,7 @@ export class TabPaneNMSampleList extends BaseElement {
                     <img src="img/function.png" size="20" v-if=" type === 0 ">
                 </template>
             </lit-table-column>
-            <lit-table-column class="nm-sample-column" width="1fr" title="" data-index="title" key="title"  align="flex-start">
+            <lit-table-column class="nm-sample-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
             </lit-table-column>
         </lit-table>
         </lit-slicer>
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.html.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.html.ts
index 85e086cd0f6249af205aa17b33311bff88354a79..c1547e3e8ff0c894b6e8a5aa4dd3972a2f08db31 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.html.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.html.ts
@@ -207,4 +207,4 @@ export const TabPaneNMStatisticAnalysisHtml = `
             </div>
         </div>
         <tab-pane-filter id="filter" options></tab-pane-filter>
-`;
\ No newline at end of file
+`;
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.ts
index 9ed64256c8d36f2a32f4e100f89ed121bcdb5d0b..a983380b843aec27a45c315eca03c5a6e0a332e5 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.ts
@@ -27,7 +27,7 @@ import { env } from 'process';
 import {
   queryNativeHookStatistics,
   queryNativeHookStatisticsMalloc,
-  queryNativeHookStatisticsSubType
+  queryNativeHookStatisticsSubType,
 } from '../../../../database/sql/NativeHook.sql';
 
 @element('tabpane-native-statistics')
@@ -58,7 +58,9 @@ export class TabPaneNMStatstics extends BaseElement {
     }
     if (this.nativeStatisticsTbl) {
       // @ts-ignore
-      this.nativeStatisticsTbl.shadowRoot.querySelector('.table').style.height = `${this.parentElement!.clientHeight - 25}px`;
+      this.nativeStatisticsTbl.shadowRoot.querySelector('.table').style.height = `${
+        this.parentElement!.clientHeight - 25
+      }px`;
       // @ts-ignore
       this.nativeStatisticsTbl.recycleDataSource = [];
     }
@@ -250,7 +252,12 @@ export class TabPaneNMStatstics extends BaseElement {
       this.nativeStatisticsTbl!.recycleDataSource = this.nativeStatisticsSource;
     } else {
       let arr = [...this.nativeStatisticsSource];
-      let compareFunction = (nativeStatisticsLeftData: any, nativeStatisticsRightData: any, column: string, sortType: number) => {
+      let compareFunction = (
+        nativeStatisticsLeftData: any,
+        nativeStatisticsRightData: any,
+        column: string,
+        sortType: number
+      ) => {
         if (sortType === 1) {
           return nativeStatisticsLeftData[column] - nativeStatisticsRightData[column];
         } else {
@@ -265,7 +272,7 @@ export class TabPaneNMStatstics extends BaseElement {
         freeCount: 'freeCount',
         totalBytesString: 'totalBytes',
         maxStr: 'max',
-        totalCount: 'totalCount'
+        totalCount: 'totalCount',
       };
       let sortColumnKey = columnMap[nmStatColumn];
       this.nativeStatisticsTbl!.recycleDataSource = arr.sort((leftData, rightData) =>
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.html.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.html.ts
index 4c32343b8c4a1f33fd650f2e61aabf7db7b9360e..4548be74f0b2098b822623c6c336d0df9de0a9f2 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.html.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.html.ts
@@ -87,7 +87,7 @@ export const TabPaneNMemoryHtml = `
                             </template>
                         </lit-table-column>
                         <lit-table-column class="nm-memory-column" width="1fr" title="" 
-                        data-index="title" key="title"  align="flex-start">
+                        data-index="symbol" key="symbol"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
@@ -95,4 +95,4 @@ export const TabPaneNMemoryHtml = `
             <lit-progress-bar class="progress nm-memory-progress"></lit-progress-bar>
             <tab-pane-filter id="filter" class="nm-memory-filter" mark first second></tab-pane-filter>
             <div class="loading nm-memory-loading"></div>
-        </div>`;
\ No newline at end of file
+        </div>`;
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
index 2086e06cd7d43192a4d62caf2772e3cf057c7915..a1487b139bd5b3ab9844147b47595d7f3215f1fa 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
@@ -95,7 +95,7 @@ export class TabPaneNMemory extends BaseElement {
       this.initFilterTypes(() => {
         this.filterSetSelectList(this.filter!, 0);
         this.getDataByNativeMemoryWorker(memoryParam, resetFilter);
-      })
+      });
     } else {
       this.getDataByNativeMemoryWorker(memoryParam, resetFilter);
     }
@@ -128,7 +128,7 @@ export class TabPaneNMemory extends BaseElement {
     }
     this.startNmMemoryWorker('native-memory-queryNativeHookEvent', args, (results: any[]) => {
       this.tblData!.recycleDataSource = [];
-      this.setNmMemoryLoading(false)
+      this.setNmMemoryLoading(false);
       if (results.length > 0) {
         this.memorySource = results;
         this.memoryTbl!.recycleDataSource = this.memorySource;
@@ -313,9 +313,9 @@ export class TabPaneNMemory extends BaseElement {
     });
     this.memoryTbl!.itemTextHandleMap.set('endTs', (endTs) => {
       return endTs > this.currentSelection!.leftNs &&
-      endTs <= this.currentSelection!.rightNs &&
-      endTs !== 0 &&
-      endTs !== null
+        endTs <= this.currentSelection!.rightNs &&
+        endTs !== 0 &&
+        endTs !== null
         ? 'Freed'
         : 'Existing';
     });
@@ -324,7 +324,7 @@ export class TabPaneNMemory extends BaseElement {
     });
   }
 
-  private getFilterDataByMark(): void{
+  private getFilterDataByMark(): void {
     document.dispatchEvent(
       new CustomEvent('triangle-flag', {
         detail: {
@@ -336,10 +336,7 @@ export class TabPaneNMemory extends BaseElement {
               let minTs = 0;
               let minItem: any = undefined;
               let filterTemp = this.memorySource.filter((tempItem) => {
-                if (
-                  minTs === 0 ||
-                  (tempItem.startTs - checkTs != 0 && Math.abs(tempItem.startTs - checkTs) < minTs)
-                ) {
+                if (minTs === 0 || (tempItem.startTs - checkTs != 0 && Math.abs(tempItem.startTs - checkTs) < minTs)) {
                   minTs = Math.abs(tempItem.startTs - checkTs);
                   minItem = tempItem;
                 }
@@ -359,10 +356,7 @@ export class TabPaneNMemory extends BaseElement {
                 args.set('startTs', this.rowSelectData.startTs);
                 args.set('actionType', 'native-memory-state-change');
                 this.startNmMemoryWorker('native-memory-action', args, (results: any[]) => {});
-                TabPaneNMSampleList.addSampleData(
-                  this.rowSelectData,
-                  this.currentSelection!.nativeMemoryCurrentIPid
-                );
+                TabPaneNMSampleList.addSampleData(this.rowSelectData, this.currentSelection!.nativeMemoryCurrentIPid);
                 this.memoryTbl!.scrollToData(this.rowSelectData);
               }
             }
@@ -403,7 +397,7 @@ export class TabPaneNMemory extends BaseElement {
       let thread = new NativeHookCallInfo();
       thread.threadId = nativeMemoryHook.threadId;
       thread.threadName = Utils.THREAD_MAP.get(thread.threadId) || 'Thread';
-      thread.title = `${nativeMemoryHook.threadName ?? ''}【${nativeMemoryHook.threadId}】`;
+      thread.symbol = `${nativeMemoryHook.threadName ?? ''}【${nativeMemoryHook.threadId}】`;
       thread.type = -1;
       let currentSource = [];
       currentSource.push(thread);
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts b/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts
index f151ef2b52cf7d842da3ac5e9baeb2f65aaaf92e..1163d8a08fe80f9c82f37e9b4d498bb01e2a6e2c 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts
@@ -32,10 +32,10 @@ export class TabPaneCounter extends BaseElement {
     }
     this.currentSelectionParam = counterParam;
     //@ts-ignore
-    this.counterTbl?.shadowRoot?.querySelector('.table')?.style?.height =
-      `${this.parentElement!.clientHeight - 45  }px`;
-    this.counterRange!.textContent =
-      `Selected range: ${  parseFloat(((counterParam.rightNs - counterParam.leftNs) / 1000000.0).toFixed(5))  } ms`;
+    this.counterTbl?.shadowRoot?.querySelector('.table')?.style?.height = `${this.parentElement!.clientHeight - 45}px`;
+    this.counterRange!.textContent = `Selected range: ${parseFloat(
+      ((counterParam.rightNs - counterParam.leftNs) / 1000000.0).toFixed(5)
+    )} ms`;
     this.counterTbl!.loading = true;
     getTabCounters(counterParam.processTrackIds, counterParam.virtualTrackIds, counterParam.rightNs).then((result) => {
       this.counterTbl!.loading = false;
@@ -143,12 +143,12 @@ export class TabPaneCounter extends BaseElement {
       let first = list[0];
       counterData.trackId = first.trackId;
       counterData.name = first.name;
-      counterData.first = `${first.value  }`;
-      counterData.count = `${list.length  }`;
-      counterData.last = `${list[list.length - 1].value  }`;
-      counterData.delta = `${parseInt(counterData.last) - parseInt(counterData.first)  }`;
+      counterData.first = `${first.value}`;
+      counterData.count = `${list.length}`;
+      counterData.last = `${list[list.length - 1].value}`;
+      counterData.delta = `${parseInt(counterData.last) - parseInt(counterData.first)}`;
       counterData.rate = (parseInt(counterData.delta) / ((range * 1.0) / 1000000000)).toFixed(4);
-      counterData.min = `${first.value  }`;
+      counterData.min = `${first.value}`;
       counterData.max = '0';
       let weightAvg = 0.0;
       for (let i = 0; i < list.length; i++) {
@@ -176,9 +176,9 @@ export class TabPaneCounter extends BaseElement {
           return 0;
         }
         if (type === 'number') {
-          return sort === 2            ? // @ts-ignore
-            parseFloat(counterRightData[property]) - parseFloat(counterLeftData[property])            : // @ts-ignore
-            parseFloat(counterLeftData[property]) - parseFloat(counterRightData[property]);
+          return sort === 2 // @ts-ignore
+            ? parseFloat(counterRightData[property]) - parseFloat(counterLeftData[property]) // @ts-ignore
+            : parseFloat(counterLeftData[property]) - parseFloat(counterRightData[property]);
         } else {
           // @ts-ignore
           if (counterRightData[property] > counterLeftData[property]) {
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts b/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts
index bed8dd35415516ac235598d89a395d0a74246a48..cd3e2c466e79724efe5411fd9054c0107553f193 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts
@@ -37,8 +37,9 @@ export class TabPaneSlices extends BaseElement {
       return;
     }
     this.currentSelectionParam = slicesParam;
-    this.slicesRange!.textContent =
-      `Selected range: ${  parseFloat(((slicesParam.rightNs - slicesParam.leftNs) / 1000000.0).toFixed(5))  } ms`;
+    this.slicesRange!.textContent = `Selected range: ${parseFloat(
+      ((slicesParam.rightNs - slicesParam.leftNs) / 1000000.0).toFixed(5)
+    )} ms`;
     let asyncNames: Array<string> = [];
     let asyncPid: Array<number> = [];
     slicesParam.funAsync.forEach((it: any) => {
@@ -46,6 +47,8 @@ export class TabPaneSlices extends BaseElement {
       asyncPid.push(it.pid);
     });
     this.slicesTbl!.loading = true;
+    let filterNameEL: HTMLInputElement | undefined | null =
+      this.shadowRoot?.querySelector<HTMLInputElement>('#filterName');
     getTabSlicesAsyncFunc(asyncNames, asyncPid, slicesParam.leftNs, slicesParam.rightNs).then((res) => {
       getTabSlices(slicesParam.funTids, slicesParam.processIds, slicesParam.leftNs, slicesParam.rightNs).then(
         (res2) => {
@@ -66,8 +69,12 @@ export class TabPaneSlices extends BaseElement {
             count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(5));
             count.occurrences = sumOcc;
             processSlicesResult.splice(0, 0, count);
-            this.slicesSource = processSlicesResult;
-            this.slicesTbl!.recycleDataSource = processSlicesResult;
+            if (filterNameEL && filterNameEL.value.trim() !== '') {
+              this.findName(filterNameEL.value);
+            } else {
+              this.slicesSource = processSlicesResult;
+              this.slicesTbl!.recycleDataSource = processSlicesResult;
+            }
           } else {
             this.slicesSource = [];
             this.slicesTbl!.recycleDataSource = this.slicesSource;
@@ -88,7 +95,7 @@ export class TabPaneSlices extends BaseElement {
     let data;
     this.slicesTbl!.addEventListener('row-click', (evt) => {
       // @ts-ignore
-      data = evt.detail.data;  
+      data = evt.detail.data;
     });
     this.slicesTbl!.addEventListener('click', () => {
       FuncStruct.funcSelect = false;
@@ -156,9 +163,11 @@ export class TabPaneSlices extends BaseElement {
     // search 到的内容与框选泳道的内容取并集
     for (const searchItem of search.list) {
       for (const traceRow of sliceRowList) {
-        if (Math.max(TraceRow.rangeSelectObject?.startNS!, searchItem.startTime) <=
-          Math.min(TraceRow.rangeSelectObject?.endNS!, searchItem.startTime + searchItem.dur) &&
-          !rangeSelectList.includes(searchItem)) {
+        if (
+          Math.max(TraceRow.rangeSelectObject?.startNS!, searchItem.startTime) <=
+            Math.min(TraceRow.rangeSelectObject?.endNS!, searchItem.startTime + searchItem.dur) &&
+          !rangeSelectList.includes(searchItem)
+        ) {
           // 异步调用栈
           if (traceRow.asyncFuncName) {
             if (`${searchItem.pid}` === `${traceRow.asyncFuncNamePID}`) {
@@ -177,7 +186,7 @@ export class TabPaneSlices extends BaseElement {
     if (rangeSelectList.length === 0) {
       return;
     }
-    input.value = data.name
+    input.value = data.name;
     search.list = rangeSelectList;
     search.total = search.list.length;
     search.index = spSystemTrace!.showStruct(true, 1, search.list);
@@ -237,9 +246,9 @@ export class TabPaneSlices extends BaseElement {
           // @ts-ignore
           return slicesSort === 2
             ? // @ts-ignore
-            parseFloat(slicesRightData[property]) - parseFloat(slicesLeftData[property])
+              parseFloat(slicesRightData[property]) - parseFloat(slicesLeftData[property])
             : // @ts-ignore
-            parseFloat(slicesLeftData[property]) - parseFloat(slicesRightData[property]);
+              parseFloat(slicesLeftData[property]) - parseFloat(slicesRightData[property]);
         } else {
           // @ts-ignore
           if (slicesRightData[property] > slicesLeftData[property]) {
@@ -269,10 +278,10 @@ export class TabPaneSlices extends BaseElement {
     let searchData: Array<SelectionData> = [];
     let sumWallDuration: number = 0;
     let sumOccurrences: number = 0;
-    if(str === ''){
+    if (str === '') {
       this.slicesTbl!.recycleDataSource = this.slicesSource;
     } else {
-      this.slicesSource.forEach(item => {
+      this.slicesSource.forEach((item) => {
         if (item.name.toLowerCase().indexOf(str.toLowerCase()) !== -1) {
           searchData.push(item);
           sumWallDuration += item.wallDuration;
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts b/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
index 01c6e9004a7a47d4d078092ec5743d60d72786bb..3ba34c04670ec78755112bc7faa16e6192fb45ae 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
@@ -37,11 +37,14 @@ export class TabPaneThreadStates extends BaseElement {
     }
     this.currentSelectionParam = threadStatesParam;
     //@ts-ignore
-    this.threadStatesTbl?.shadowRoot?.querySelector('.table')?.style?.height =
-      `${this.parentElement!.clientHeight - 45  }px`;
+    this.threadStatesTbl?.shadowRoot?.querySelector('.table')?.style?.height = `${
+      this.parentElement!.clientHeight - 45
+    }px`;
     // // @ts-ignore
-    this.range!.textContent =
-      `Selected range: ${  ((threadStatesParam.rightNs - threadStatesParam.leftNs) / 1000000.0).toFixed(5)  } ms`;
+    this.range!.textContent = `Selected range: ${(
+      (threadStatesParam.rightNs - threadStatesParam.leftNs) /
+      1000000.0
+    ).toFixed(5)} ms`;
     this.threadStatesTbl!.loading = true;
     this.initThreadStates(threadStatesParam);
   }
@@ -116,7 +119,7 @@ export class TabPaneThreadStates extends BaseElement {
             state: current.state,
             wallDuration: current.dur || 0,
             avgDuration: 0,
-            occurrences: 1
+            occurrences: 1,
           });
         }
         return map;
@@ -138,7 +141,7 @@ export class TabPaneThreadStates extends BaseElement {
     for (let item of arr) {
       let key = `${item.state}-${item.pid}-${item.tid}`;
       if (target.has(key)) {
-        target.get(key).wallDuration += (rightNs - Math.max(item.ts, leftNs));
+        target.get(key).wallDuration += rightNs - Math.max(item.ts, leftNs);
       } else {
         target.set(key, {
           pid: item.pid,
@@ -146,7 +149,7 @@ export class TabPaneThreadStates extends BaseElement {
           state: item.state,
           wallDuration: rightNs - Math.max(item.ts, leftNs),
           avgDuration: 0,
-          occurrences: 1
+          occurrences: 1,
         });
       }
     }
@@ -173,7 +176,7 @@ export class TabPaneThreadStates extends BaseElement {
 
           e.stateJX = e.state;
           e.state = Utils.getEndState(e.stateJX);
-          e.avgDuration = parseFloat(((e.wallDuration / e.occurrences) / 1000000.0).toFixed(5));
+          e.avgDuration = parseFloat((e.wallDuration / e.occurrences / 1000000.0).toFixed(5));
           e.wallDuration = parseFloat((e.wallDuration / 1000000.0).toFixed(5));
           sumWall += e.wallDuration;
           sumOcc += e.occurrences;
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts b/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts
index 4f5fedc380897cc9f393836c9671efcbf4464b8a..0e6714c3f6bc682a47913063193adc8a7f78cc81 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts
@@ -22,10 +22,7 @@ import { getThreadUsageProbablyTime } from '../../../../database/logic-worker/Pr
 import { Utils } from '../../base/Utils';
 import { CpuStruct } from '../../../../database/ui-worker/cpu/ProcedureWorkerCPU';
 import { resizeObserver } from '../SheetUtils';
-import {
-  getTabRunningPersent,
-  getTabThreadStatesCpu
-} from '../../../../database/sql/ProcessThread.sql';
+import { getTabRunningPersent, getTabThreadStatesCpu } from '../../../../database/sql/ProcessThread.sql';
 
 @element('tabpane-thread-usage')
 export class TabPaneThreadUsage extends BaseElement {
@@ -62,8 +59,9 @@ export class TabPaneThreadUsage extends BaseElement {
       this.threadUsageTbl!.innerHTML = this.getTableColumns();
     }
     //@ts-ignore
-    this.threadUsageTbl?.shadowRoot?.querySelector('.table')?.style?.height =
-      `${this.parentElement!.clientHeight - 45}px`;
+    this.threadUsageTbl?.shadowRoot?.querySelector('.table')?.style?.height = `${
+      this.parentElement!.clientHeight - 45
+    }px`;
     // 框选区域内running的时间
     getTabRunningPersent(threadUsageParam.threadIds, threadUsageParam.leftNs, threadUsageParam.rightNs).then(
       (result) => {
@@ -99,8 +97,7 @@ export class TabPaneThreadUsage extends BaseElement {
           if (map.has(resultEl.tid)) {
             map.get(resultEl.tid)[`cpu${resultEl.cpu}`] = resultEl.wallDuration || 0;
             map.get(resultEl.tid)[`cpu${resultEl.cpu}TimeStr`] = getThreadUsageProbablyTime(resultEl.wallDuration || 0);
-            map.get(resultEl.tid).wallDuration =
-              map.get(resultEl.tid).wallDuration + (resultEl.wallDuration || 0);
+            map.get(resultEl.tid).wallDuration = map.get(resultEl.tid).wallDuration + (resultEl.wallDuration || 0);
             map.get(resultEl.tid).wallDurationTimeStr = getThreadUsageProbablyTime(map.get(resultEl.tid).wallDuration);
           } else {
             let process = Utils.PROCESS_MAP.get(resultEl.pid);
@@ -125,10 +122,10 @@ export class TabPaneThreadUsage extends BaseElement {
         }
       }
       map.forEach((val) => {
-        for (let i = 0; i < this.cpuCount; i++){
-          val[`cpu${i}Ratio`] = (100.0 *val[`cpu${i}`]/val.wallDuration).toFixed(2);
+        for (let i = 0; i < this.cpuCount; i++) {
+          val[`cpu${i}Ratio`] = ((100.0 * val[`cpu${i}`]) / val.wallDuration).toFixed(2);
         }
-      })
+      });
       this.threadUsageSource = Array.from(map.values());
       this.threadUsageTbl!.recycleDataSource = this.threadUsageSource;
     } else {
@@ -198,9 +195,9 @@ export class TabPaneThreadUsage extends BaseElement {
           return 0;
         }
         if (type === 'number') {
-          return treadUsageSort === 2 ? parseFloat(threadUsageRightData[property]) -
-            parseFloat(threadUsageLeftData[property]) : parseFloat(threadUsageLeftData[property]) -
-            parseFloat(threadUsageRightData[property]);
+          return treadUsageSort === 2
+            ? parseFloat(threadUsageRightData[property]) - parseFloat(threadUsageLeftData[property])
+            : parseFloat(threadUsageLeftData[property]) - parseFloat(threadUsageRightData[property]);
         } else {
           if (threadUsageRightData[property] > threadUsageLeftData[property]) {
             return treadUsageSort === 2 ? 1 : -1;
diff --git a/ide/src/trace/component/trace/sheet/schedswitch/TabPaneSchedSwitch.ts b/ide/src/trace/component/trace/sheet/schedswitch/TabPaneSchedSwitch.ts
index 956ccc6ee38f3c15ebf93bc1a1d78e49edb4bedd..dd2c000567c0e3c11ab4c02e7e9bf4c106ac9434 100644
--- a/ide/src/trace/component/trace/sheet/schedswitch/TabPaneSchedSwitch.ts
+++ b/ide/src/trace/component/trace/sheet/schedswitch/TabPaneSchedSwitch.ts
@@ -17,11 +17,15 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement';
 import { LitButton } from '../../../../../base-ui/button/LitButton';
 import { LitTable, RedrawTreeForm } from '../../../../../base-ui/table/lit-table';
 import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection';
-import { querySchedThreadStates, querySingleCutData, queryLoopCutData } from '../../../../database/sql/ProcessThread.sql';
+import {
+  querySchedThreadStates,
+  querySingleCutData,
+  queryLoopCutData,
+} from '../../../../database/sql/ProcessThread.sql';
 import { Utils } from '../../base/Utils';
 import { resizeObserver } from '../SheetUtils';
 import { LitChartColumn } from '../../../../../base-ui/chart/column/LitChartColumn';
-import { SpSegmentationChart } from '../../../../../trace/component/chart/SpSegmentationChart'
+import { SpSegmentationChart } from '../../../../../trace/component/chart/SpSegmentationChart';
 import {
   type TreeSwitchConfig,
   HistogramSourceConfig,
@@ -60,7 +64,9 @@ export class TabPaneSchedSwitch extends BaseElement {
   private clickThreadName: string = '';
 
   set data(threadStatesParam: SelectionParam) {
-    if (this.selectionParam === threadStatesParam) {return;};
+    if (this.selectionParam === threadStatesParam) {
+      return;
+    }
     let tabpaneSwitch = this.parentElement as HTMLElement;
     tabpaneSwitch.style.overflow = 'hidden';
     this.schedSwitchTbl!.recycleDataSource = [];
@@ -70,7 +76,7 @@ export class TabPaneSchedSwitch extends BaseElement {
     // @ts-ignore
     this.schedSwitchTbl!.value = [];
     this.funcNameInput!.style.border = '1px solid rgb(151,151,151)';
-    this.threadIdInput!.style.border = '1px solid rgb(151,151,151)';      
+    this.threadIdInput!.style.border = '1px solid rgb(151,151,151)';
     SpSegmentationChart.setChartData('SCHED-SWITCH', []);
     SpSegmentationChart.tabHover('SCHED-SWITCH', false, -1);
     this.canvansName!.textContent = 'sched switch平均分布图';
@@ -102,10 +108,18 @@ export class TabPaneSchedSwitch extends BaseElement {
     this.cycleBLeftInput = this.shadowRoot?.getElementById('leftB') as HTMLInputElement;
     this.cycleBRightInput = this.shadowRoot?.getElementById('rightB') as HTMLInputElement;
     this.queryButton = this.shadowRoot?.querySelector<LitButton>('.query-btn');
-    this.singleBtn?.addEventListener('click', (e) => { this.queryCutInfoFn(this.singleBtn!.innerHTML); });
-    this.loopBtn?.addEventListener('click', (e) => { this.queryCutInfoFn(this.loopBtn!.innerHTML); });
-    this.queryButton!.addEventListener('click', (e) => { this.queryCycleRangeData(); });
-    this.schedSwitchTbl!.addEventListener('row-click', (evt) => { this.clickTreeRowEvent(evt); });
+    this.singleBtn?.addEventListener('click', (e) => {
+      this.queryCutInfoFn(this.singleBtn!.innerHTML);
+    });
+    this.loopBtn?.addEventListener('click', (e) => {
+      this.queryCutInfoFn(this.loopBtn!.innerHTML);
+    });
+    this.queryButton!.addEventListener('click', (e) => {
+      this.queryCycleRangeData();
+    });
+    this.schedSwitchTbl!.addEventListener('row-click', (evt) => {
+      this.clickTreeRowEvent(evt);
+    });
     this.listenInputEvent();
   }
   //监听周期A、B对应输入框的值
@@ -173,8 +187,8 @@ export class TabPaneSchedSwitch extends BaseElement {
           secondInput!.style.color = 'black';
           this.queryButton!.style.pointerEvents = 'auto';
           this.canQueryButtonClick(true);
-        };
-      };
+        }
+      }
     } else if (
       (firstInput!.value === '' && secondInput!.value !== '') ||
       (firstInput!.value !== '' && secondInput!.value === '')
@@ -189,14 +203,14 @@ export class TabPaneSchedSwitch extends BaseElement {
     ) {
       this.queryButton!.style.pointerEvents = 'auto';
       this.canQueryButtonClick(true);
-    };
+    }
     if (
       (thirdInput!.value === '' && fourInput!.value !== '') ||
       (thirdInput!.value !== '' && fourInput!.value === '')
     ) {
       this.queryButton!.style.pointerEvents = 'none';
       this.canQueryButtonClick(false);
-    };
+    }
   }
   //点击树节点不同层级触发相应的功能
   clickTreeRowEvent(evt: Event): void {
@@ -216,7 +230,7 @@ export class TabPaneSchedSwitch extends BaseElement {
         this.cycleBLeftInput!.value = '';
         this.cycleBRightInput!.value = '';
         this.histogramSource = [];
-        SpSegmentationChart.tabHover('SCHED-SWITCH', false, -1);//清空上一次的泳道高亮
+        SpSegmentationChart.tabHover('SCHED-SWITCH', false, -1); //清空上一次的泳道高亮
         this.getThreadChildren = data.children;
         this.queryButton!.style.pointerEvents = 'none';
         this.isCanvansHidden(false);
@@ -237,7 +251,7 @@ export class TabPaneSchedSwitch extends BaseElement {
         this.schedSwitchTbl!.clearAllSelection(data);
         this.schedSwitchTbl!.setCurrentSelection(data);
         this.drawHistogramChart();
-      };
+      }
       //点击线程绘制对应泳道图
       SpSegmentationChart.setChartData('SCHED-SWITCH', data.children);
     } else if (data.level === 'cycle') {
@@ -246,8 +260,8 @@ export class TabPaneSchedSwitch extends BaseElement {
         this.schedSwitchTbl!.clearAllSelection(data);
         this.schedSwitchTbl!.setCurrentSelection(data);
         SpSegmentationChart.tabHover('SCHED-SWITCH', true, data!.cycle);
-      };
-    };
+      }
+    }
   }
   //点击single或loop按钮时触发
   async queryCutInfoFn(btnHtml: string): Promise<void> {
@@ -267,17 +281,19 @@ export class TabPaneSchedSwitch extends BaseElement {
       SpSegmentationChart.setChartData('SCHED-SWITCH', []);
       SpSegmentationChart.tabHover('SCHED-SWITCH', false, -1);
       //首次点击single或loop时去查询数据
-      if (!this.hasThreadStatesData) { this.initThreadStateData(this.selectionParam); };
+      if (!this.hasThreadStatesData) {
+        this.initThreadStateData(this.selectionParam);
+      }
       if (btnHtml === SINGLE_BUTTON_TEXT) {
         this.isSingleBtnColor(true);
         this.isLoopBtnColor(false);
         funcData = await querySingleCutData(threadFunName, threadId, leftStartNs, rightEndNs);
-      };
+      }
       if (btnHtml === LOOP_BUTTON_TEXT) {
         this.isSingleBtnColor(false);
         this.isLoopBtnColor(true);
         funcData = await queryLoopCutData(threadFunName, threadId, leftStartNs, rightEndNs);
-      };
+      }
       //获取到线程数据和方法数据，处理周期
       this.handleCycleLogic(funcData, btnHtml);
     } else {
@@ -286,14 +302,14 @@ export class TabPaneSchedSwitch extends BaseElement {
         this.threadIdInput!.setAttribute('placeholder', 'Please input thread id');
       } else {
         this.threadIdInput!.style.border = '1px solid rgb(151,151,151)';
-      };
+      }
       if (threadFunName === '') {
         this.funcNameInput!.style.border = '2px solid rgb(255,0,0)';
         this.funcNameInput!.setAttribute('placeholder', 'Please input function name');
       } else {
         this.funcNameInput!.style.border = '1px solid rgb(151,151,151)';
-      };
-    };
+      }
+    }
   }
 
   //获取每次被框选线程对应的state数据
@@ -302,7 +318,12 @@ export class TabPaneSchedSwitch extends BaseElement {
     let leftStartNs: number = threadParam!.leftNs + threadParam!.recordStartNs;
     let rightEndNs: number = threadParam!.rightNs + threadParam!.recordStartNs;
     let processIds: Array<number> = [...new Set(threadParam!.processIds)];
-    let res: Array<ThreadInitConfig> = await querySchedThreadStates(processIds, threadParam!.threadIds, leftStartNs, rightEndNs);
+    let res: Array<ThreadInitConfig> = await querySchedThreadStates(
+      processIds,
+      threadParam!.threadIds,
+      leftStartNs,
+      rightEndNs
+    );
     threadSourceData = JSON.parse(JSON.stringify(res));
     //每次新款选线程时清空Map对象
     this.threadMap.clear();
@@ -311,11 +332,11 @@ export class TabPaneSchedSwitch extends BaseElement {
       let stateItem = threadSourceData[i];
       if (this.threadMap.has(`${stateItem.pid} - ${stateItem.tid}`)) {
         let obj = this.threadMap.get(`${stateItem.pid} - ${stateItem.tid}`);
-        obj!.push(stateItem)
+        obj!.push(stateItem);
       } else {
         this.threadMap.set(`${stateItem.pid} - ${stateItem.tid}`, [stateItem]);
-      };
-    };
+      }
+    }
     this.hasThreadStatesData = true;
   }
 
@@ -345,11 +366,13 @@ export class TabPaneSchedSwitch extends BaseElement {
         processTitle: `${process}[${value[0].pid}]`,
         threadTitle: `${thread}[${[value[0].tid]}]`,
         threadCountTotal: 0,
-        threadDurTotal: 0
+        threadDurTotal: 0,
       };
       //此处根据切割方法不同处理一下方法循环长度
       for (let idx = 0; idx < (btnHtml === LOOP_BUTTON_TEXT ? res.length - 1 : res.length); idx++) {
-        if (btnHtml === LOOP_BUTTON_TEXT) { res[idx].cycleEndTime = res[idx + 1].cycleStartTime; };//当切割方法为loop时，处理出周期结束时间
+        if (btnHtml === LOOP_BUTTON_TEXT) {
+          res[idx].cycleEndTime = res[idx + 1].cycleStartTime;
+        } //当切割方法为loop时，处理出周期结束时间
         let duration = ((res[idx].cycleEndTime - res[idx].cycleStartTime) / UNIT).toFixed(NUM_DIGITS);
         let dur = Number(duration) * UNIT;
         value.map((item: ThreadInitConfig) => {
@@ -358,21 +381,37 @@ export class TabPaneSchedSwitch extends BaseElement {
             let nodeFlag = `${process} - ${item.pid} - ${thread} - ${item.tid}`;
             let startNS = res[idx].cycleStartTime - this.selectionParam!.recordStartNs;
             let cycleStartTime = (startNS / UNIT).toFixed(NUM_DIGITS);
-            let title = `cycle ${idx + 1}-` + thread;//周期名称
-            cyclesArr.push(new SchedSwitchCountBean(nodeFlag, startNS, cycleStartTime, dur, duration, idx + 1, title, 0, 'cycle', 9,[]));
-            cutDataObj!.threadDurTotal = (Number(duration) + Number(cutDataObj.threadDurTotal)).toFixed(NUM_DIGITS);//本次线程下所有周期的dur和
-          };
+            let title = `cycle ${idx + 1}-` + thread; //周期名称
+            cyclesArr.push(
+              new SchedSwitchCountBean(
+                nodeFlag,
+                startNS,
+                cycleStartTime,
+                dur,
+                duration,
+                idx + 1,
+                title,
+                0,
+                'cycle',
+                9,
+                []
+              )
+            );
+            cutDataObj!.threadDurTotal = (Number(duration) + Number(cutDataObj.threadDurTotal)).toFixed(NUM_DIGITS); //本次线程下所有周期的dur和
+          }
           //判断数据是否符合这个周期，符合的进入判断累加count
           if (res[idx].cycleEndTime > item.endTs && item.endTs > res[idx].cycleStartTime) {
             let index = cyclesArr.length - 1;
-            if (index === idx) { cyclesArr[index].value += 1; };
+            if (index === idx) {
+              cyclesArr[index].value += 1;
+            }
             cutDataObj.threadCountTotal += 1;
-          };
+          }
         });
       }
       //本轮线程处理过的数据传入并处理成树结构，放入group对象中
       this.translateIntoTree(cutDataObj, group);
-    };
+    }
     this.schedSwitchTbl!.recycleDataSource = Object.values(group);
     this.schedSwitchTbl!.loading = false;
     this.clickTableLabel(this.schedSwitchTbl!.recycleDataSource);
@@ -388,11 +427,7 @@ export class TabPaneSchedSwitch extends BaseElement {
       process.value += data.threadCountTotal;
       process.duration = (Number(data.threadDurTotal) + Number(process.duration)).toFixed(NUM_DIGITS);
       process.children.push(
-        new SchedSwitchCountBean(nodeFlag, -1, '',  dur, data.threadDurTotal, -1, data.threadTitle, data.threadCountTotal, 'thread', 9, data.cyclesArr)
-      );
-    } else {
-      group[data.pid] = new SchedSwitchCountBean(
-        '', -1, '', dur, data.threadDurTotal, -1, data.processTitle, data.threadCountTotal, 'process', 9, [new SchedSwitchCountBean(
+        new SchedSwitchCountBean(
           nodeFlag,
           -1,
           '',
@@ -404,7 +439,35 @@ export class TabPaneSchedSwitch extends BaseElement {
           'thread',
           9,
           data.cyclesArr
-        )]
+        )
+      );
+    } else {
+      group[data.pid] = new SchedSwitchCountBean(
+        '',
+        -1,
+        '',
+        dur,
+        data.threadDurTotal,
+        -1,
+        data.processTitle,
+        data.threadCountTotal,
+        'process',
+        9,
+        [
+          new SchedSwitchCountBean(
+            nodeFlag,
+            -1,
+            '',
+            dur,
+            data.threadDurTotal,
+            -1,
+            data.threadTitle,
+            data.threadCountTotal,
+            'thread',
+            9,
+            data.cyclesArr
+          ),
+        ]
       );
     }
   }
@@ -423,16 +486,16 @@ export class TabPaneSchedSwitch extends BaseElement {
               item.status = true;
               if (item.children !== undefined && item.children.length > 0) {
                 this.schedSwitchTbl!.setStatus(item.children, false);
-              };
+              }
             }
             this.schedSwitchTbl!.recycleDs = this.schedSwitchTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
           } else if (lable.includes('Cycle')) {
             this.schedSwitchTbl!.setStatus(data, true);
             this.schedSwitchTbl!.recycleDs = this.schedSwitchTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand);
-          };
+          }
         });
-      };
-    };
+      }
+    }
   }
   //根据A、B周期输入的dur的范围值，计算对应周期的数据
   queryCycleRangeData(): void {
@@ -479,7 +542,7 @@ export class TabPaneSchedSwitch extends BaseElement {
         color: '#a285d2',
       };
       this.histogramSource.push(this.rangeB);
-    };
+    }
     this.drawHistogramChart();
   }
   //绘制柱状图
@@ -495,12 +558,12 @@ export class TabPaneSchedSwitch extends BaseElement {
       return data;
     });
     this.chartTotal!.config = {
-      data: source,//画柱状图的数据源
+      data: source, //画柱状图的数据源
       appendPadding: 10,
-      xField: 'cycle',//x轴代表属于那个周期
-      yField: 'average',//y轴代表count/周期个数的值
-      notSort: true,//绘制的柱状图不排序
-      removeUnit: true,//移除单位换算
+      xField: 'cycle', //x轴代表属于那个周期
+      yField: 'average', //y轴代表count/周期个数的值
+      notSort: true, //绘制的柱状图不排序
+      removeUnit: true, //移除单位换算
       seriesField: '',
       //设置柱状图的颜色
       color(a): string {
@@ -512,7 +575,7 @@ export class TabPaneSchedSwitch extends BaseElement {
           return '#a285d2';
         } else {
           return '#0a59f7';
-        };
+        }
       },
       //鼠标悬浮柱状图上方时显示对应的提示信息
       tip(a): string {
@@ -540,7 +603,7 @@ export class TabPaneSchedSwitch extends BaseElement {
       this.setAttribute('canvans-hidden', '');
     } else {
       this.removeAttribute('canvans-hidden');
-    };
+    }
   }
   //切换single按钮时颜色是否变化
   isSingleBtnColor(flag: boolean): void {
@@ -548,7 +611,7 @@ export class TabPaneSchedSwitch extends BaseElement {
       this.setAttribute('single', '');
     } else {
       this.removeAttribute('single');
-    };
+    }
   }
   //切换single按钮时颜色是否变化
   isLoopBtnColor(flag: boolean): void {
@@ -556,7 +619,7 @@ export class TabPaneSchedSwitch extends BaseElement {
       this.setAttribute('loop', '');
     } else {
       this.removeAttribute('loop');
-    };
+    }
   }
   //Query按钮能不能被点击，即在此处设置符合条件时鼠标箭头为手的样式表示可点击，反之表示禁止触发点击事件
   canQueryButtonClick(flag: boolean): void {
@@ -564,7 +627,7 @@ export class TabPaneSchedSwitch extends BaseElement {
       this.setAttribute('query-button', '');
     } else {
       this.removeAttribute('query-button');
-    };
+    }
   }
   //回调函数，this.schedSwitchTbl首次插入DOM时执行的初始化回调
   connectedCallback(): void {
@@ -572,7 +635,8 @@ export class TabPaneSchedSwitch extends BaseElement {
     resizeObserver(this.parentElement!, this.schedSwitchTbl!);
   }
   initHtml(): string {
-    return `
+    return (
+      `
       <style>
       :host{
           padding: 10px 10px;
@@ -617,7 +681,11 @@ export class TabPaneSchedSwitch extends BaseElement {
           font-size: 9pt;
           padding-right: 15px;
       }
-    `+ this.initStyleContent() + this.initTopContent() + this.initMainContent();
+    ` +
+      this.initStyleContent() +
+      this.initTopContent() +
+      this.initMainContent()
+    );
   }
   initStyleContent(): string {
     return `
@@ -664,7 +732,7 @@ export class TabPaneSchedSwitch extends BaseElement {
           display:flex;
           align-items: center;
       }
-    `
+    `;
   }
   initTopContent(): string {
     return `
@@ -702,7 +770,7 @@ export class TabPaneSchedSwitch extends BaseElement {
             <button class="loop-btn cut-button">Loop</button>
         </div>
       </div>
-    `
+    `;
   }
   initMainContent(): string {
     return `
@@ -747,6 +815,6 @@ export class TabPaneSchedSwitch extends BaseElement {
           </div>
         </div>
       </div>
-    `
+    `;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts
index a082d93ac0b7c2aa7aaeaf222e30a33dfa971f81..e2c928ba7fef6764d950cc25cab017790950821e 100644
--- a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts
+++ b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts
@@ -21,8 +21,8 @@ import { Utils } from '../../base/Utils';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import { TabUtil } from './TabUtil';
 import { resizeObserver } from '../SheetUtils';
-import { getTabSdkCounterData, getTabSdkCounterLeftData } from "../../../../database/sql/Sdk.sql";
-import { queryStartTime } from "../../../../database/sql/SqlLite.sql";
+import { getTabSdkCounterData, getTabSdkCounterLeftData } from '../../../../database/sql/Sdk.sql';
+import { queryStartTime } from '../../../../database/sql/SqlLite.sql';
 
 @element('tabpane-sdk-counter')
 export class TabPaneSdkCounter extends BaseElement {
@@ -225,9 +225,9 @@ export class TabPaneSdkCounter extends BaseElement {
         if (type === 'number') {
           return countreSort === 2
             ? // @ts-ignore
-            parseFloat(bSdkCounter[property]) - parseFloat(aSdkCounter[property])
+              parseFloat(bSdkCounter[property]) - parseFloat(aSdkCounter[property])
             : // @ts-ignore
-            parseFloat(aSdkCounter[property]) - parseFloat(bSdkCounter[property]);
+              parseFloat(aSdkCounter[property]) - parseFloat(bSdkCounter[property]);
         }
         // @ts-ignore
         if (bSdkCounter[property] > aSdkCounter[property]) {
diff --git a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts
index 494658aaa81605dd96625984deb186f483fa52ad..3aab92e55e55388ba1e1cf0a5b657f57b602069e 100644
--- a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts
+++ b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts
@@ -136,12 +136,17 @@ export class TabPaneSdkSlice extends BaseElement {
         }
       }
       let sliceParseData = JSON.parse(sliceJsonText);
-      if (sliceParseData.start_ts != null && sliceParseData.end_ts != null &&
-        sliceParseData.start_ts > sliceParseData.end_ts && sliceParseData.end_ts == 0) {
+      if (
+        sliceParseData.start_ts != null &&
+        sliceParseData.end_ts != null &&
+        sliceParseData.start_ts > sliceParseData.end_ts &&
+        sliceParseData.end_ts == 0
+      ) {
         sliceParseData.end_ts = totalTime;
       }
-      if (this.isDateIntersection(sdkSliceVal.leftNs, sdkSliceVal.rightNs,
-        sliceParseData.start_ts, sliceParseData.end_ts)) {
+      if (
+        this.isDateIntersection(sdkSliceVal.leftNs, sdkSliceVal.rightNs, sliceParseData.start_ts, sliceParseData.end_ts)
+      ) {
         this.statDataArray.push(sliceParseData);
       }
     }
@@ -165,15 +170,15 @@ export class TabPaneSdkSlice extends BaseElement {
     for (let [key, value] of map) {
       let sliceConfigObj: any = value;
       if (sliceConfigObj !== undefined) {
-        let {jsonConfig} = sliceConfigObj;
-        let {tableConfig} = JSON.parse(jsonConfig);
+        let { jsonConfig } = sliceConfigObj;
+        let { tableConfig } = JSON.parse(jsonConfig);
         if (tableConfig) {
           for (let showType of tableConfig.showType) {
             let innerTableName = this.getInnerTableName(showType);
             let type = TabUtil.getTableType(showType);
             if (type === 'slice') {
               let sliceSelectSql = 'select ';
-              for (let {column, displayName, showType: columnShowType} of showType.columns) {
+              for (let { column, displayName, showType: columnShowType } of showType.columns) {
                 this.columnMap[column] = displayName;
                 if (columnShowType.includes(3)) {
                   switch (column) {
@@ -256,9 +261,9 @@ export class TabPaneSdkSlice extends BaseElement {
         if (type === 'number') {
           return sliceSort === 2
             ? // @ts-ignore
-            parseFloat(bSdkSlice[property]) - parseFloat(aSdkSlice[property])
+              parseFloat(bSdkSlice[property]) - parseFloat(aSdkSlice[property])
             : // @ts-ignore
-            parseFloat(aSdkSlice[property]) - parseFloat(bSdkSlice[property]);
+              parseFloat(aSdkSlice[property]) - parseFloat(bSdkSlice[property]);
         }
         // @ts-ignore
         if (bSdkSlice[property] > aSdkSlice[property]) {
@@ -313,11 +318,22 @@ export class TabPaneSdkSlice extends BaseElement {
           }
         });
         let sliceParseData = JSON.parse(sliceJsonText);
-        if (sliceParseData.start_ts !== null && sliceParseData.end_ts !== null &&
-          sliceParseData.start_ts > sliceParseData.end_ts && sliceParseData.end_ts === 0) {
+        if (
+          sliceParseData.start_ts !== null &&
+          sliceParseData.end_ts !== null &&
+          sliceParseData.start_ts > sliceParseData.end_ts &&
+          sliceParseData.end_ts === 0
+        ) {
           sliceParseData.end_ts = totalTime;
         }
-        if (this.isDateIntersection(sdkSliceVal.leftNs, sdkSliceVal.rightNs, sliceParseData.start_ts, sliceParseData.end_ts)) {
+        if (
+          this.isDateIntersection(
+            sdkSliceVal.leftNs,
+            sdkSliceVal.rightNs,
+            sliceParseData.start_ts,
+            sliceParseData.end_ts
+          )
+        ) {
           this.statDataArray.push(sliceParseData);
         }
       });
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts
index 46171d4869c43083ee3e5e57349ef41388bbeb8d..eafd195a24f21d33cfff7b384c98220aaf31179e 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts
@@ -21,7 +21,7 @@ import { resizeObserverFromMemory } from '../SheetUtils';
 import { type TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter';
 import { TabPaneSmapsStatistics } from './TabPaneSmapsStatistics';
 import { type SmapsType } from '../../../../bean/SmapsStruct';
-import {getTabSmapsStatisticData} from "../../../../database/sql/Smaps.sql";
+import { getTabSmapsStatisticData } from '../../../../database/sql/Smaps.sql';
 
 @element('tabpane-smaps-comparison')
 export class TabPaneSmapsComparison extends TabPaneSmapsStatistics {
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
index 71c4a5ffe09d75fc624467b3c4288c38120ce4ee..053dff9bcea72b5aa709b3986046a933ee1275fa 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
@@ -23,7 +23,7 @@ import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
 import { SnapshotStruct } from '../../../../database/ui-worker/ProcedureWorkerSnapshot';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import { resizeObserver } from '../SheetUtils';
-import {querySmapsRecordTabData} from "../../../../database/sql/Smaps.sql";
+import { querySmapsRecordTabData } from '../../../../database/sql/Smaps.sql';
 @element('tabpane-smaps-record')
 export class TabPaneSmapsRecord extends BaseElement {
   private smapsRecordTable: LitTable | undefined | null;
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsSample.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsSample.ts
index 0b6772e5b3be75de9bb660083d1a9d4ce35be27f..b66c26bd4930e7e2c1f6198b6276b1b4a7f6ac90 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsSample.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsSample.ts
@@ -20,7 +20,7 @@ import { log } from '../../../../../log/Log';
 import { Smaps, SmapsType, TYPE_STRING } from '../../../../bean/SmapsStruct';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { SpSystemTrace } from '../../../SpSystemTrace';
-import {getTabSmapsData, getTabSmapsSampleData} from "../../../../database/sql/Smaps.sql";
+import { getTabSmapsData, getTabSmapsSampleData } from '../../../../database/sql/Smaps.sql';
 @element('tabpane-smaps-sample')
 export class TabPaneSmapsSample extends BaseElement {
   private tblSmapsSample: LitTable | null | undefined;
@@ -171,10 +171,10 @@ export class TabPaneSmapsSample extends BaseElement {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            // @ts-ignore
-            ? parseFloat(bSmapsSample[property]) - parseFloat(aSmapsSample[property])
-            // @ts-ignore
-            : parseFloat(aSmapsSample[property]) - parseFloat(bSmapsSample[property]);
+            ? // @ts-ignore
+              parseFloat(bSmapsSample[property]) - parseFloat(aSmapsSample[property])
+            : // @ts-ignore
+              parseFloat(aSmapsSample[property]) - parseFloat(bSmapsSample[property]);
         } else {
           // @ts-ignore
           if (bSmapsSample[property] > aSmapsSample[property]) {
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
index 71e084f0b9a5f95cbff0aae8e3ee9f6936083e92..20c3bbbd79d5f7ba4704a55280a66a675eff850d 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
@@ -20,10 +20,11 @@ import { Utils } from '../../base/Utils';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import {
-  getTabSmapsMaxSize, getTabSmapsStatisticData,
+  getTabSmapsMaxSize,
+  getTabSmapsStatisticData,
   getTabSmapsStatisticMaxSize,
-  getTabSmapsStatisticSelectData
-} from "../../../../database/sql/Smaps.sql";
+  getTabSmapsStatisticSelectData,
+} from '../../../../database/sql/Smaps.sql';
 @element('tabpane-smaps-statistics')
 export class TabPaneSmapsStatistics extends BaseElement {
   private tblSmapsStatistics: LitTable | null | undefined;
@@ -221,10 +222,10 @@ export class TabPaneSmapsStatistics extends BaseElement {
       this.filteredData(result, this.tblSmapsStatistics!, this.sumSize);
     });
   }
-  
+
   private initTreeObj(): Map<SmapsType, SmapsTreeObj> {
     let allTreeObjs: Map<SmapsType, SmapsTreeObj> = new Map<SmapsType, SmapsTreeObj>();
-    allTreeObjs.set(SmapsType.TYPE_CODE_SYS, new SmapsTreeObj('CODE_SYS', '', 'CODE_SYS'))
+    allTreeObjs.set(SmapsType.TYPE_CODE_SYS, new SmapsTreeObj('CODE_SYS', '', 'CODE_SYS'));
     allTreeObjs.set(SmapsType.TYPE_CODE_APP, new SmapsTreeObj('CODE_APP', '', 'CODE_APP'));
     allTreeObjs.set(SmapsType.TYPE_DATA_SYS, new SmapsTreeObj('DATA_SYS', '', 'DATA_SYS'));
     allTreeObjs.set(SmapsType.TYPE_DATA_APP, new SmapsTreeObj('DATA_APP', '', 'DATA_APP'));
@@ -331,7 +332,7 @@ export class TabPaneSmapsStatistics extends BaseElement {
     this.sortArray.shift();
   }
 
-  private sortByKey(column: string, sort: number, table: LitTable): void{
+  private sortByKey(column: string, sort: number, table: LitTable): void {
     switch (sort) {
       case 0:
         this.sortArray.sort((previous, next) => {
diff --git a/ide/src/trace/component/trace/sheet/states/TabPaneFreqStatesDataCut.ts b/ide/src/trace/component/trace/sheet/states/TabPaneFreqStatesDataCut.ts
index 60fa4090e54a0507ed12ecd2746c5aea799a99e5..8414e514b20d77483e4a3bb9c07fe23def31f323 100644
--- a/ide/src/trace/component/trace/sheet/states/TabPaneFreqStatesDataCut.ts
+++ b/ide/src/trace/component/trace/sheet/states/TabPaneFreqStatesDataCut.ts
@@ -18,7 +18,11 @@ import { LitTable, RedrawTreeForm } from '../../../../../base-ui/table/lit-table
 import { Utils } from '../../base/Utils';
 import { SelectionParam } from '../../../../bean/BoxSelection';
 import { BinderGroup, DataSource } from '../../../../bean/BinderProcessThread';
-import { querySingleFuncNameCycleStates, queryStatesCut, queryLoopFuncNameCycle } from '../../../../database/sql/Func.sql';
+import {
+  querySingleFuncNameCycleStates,
+  queryStatesCut,
+  queryLoopFuncNameCycle,
+} from '../../../../database/sql/Func.sql';
 import { FuncNameCycle } from '../../../../bean/BinderProcessThread';
 import { resizeObserver } from '../SheetUtils';
 import { LitChartColumn } from '../../../../../base-ui/chart/column/LitChartColumn';
@@ -54,8 +58,7 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
   private spSystemTrace: SpSystemTrace | undefined | null;
   private lineCycleNum: number = -1;
   private cycleIsClick: Boolean = false;
-  static isStateTabHover:boolean = false;
-
+  static isStateTabHover: boolean = false;
 
   // tab页入口函数
   set data(threadStatesParam: SelectionParam | any) {
@@ -129,7 +132,10 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
       this.threadBindersTbl!.loading = true;
       this.funcNameCycleArr = await queryLoopFuncNameCycle(threadFuncName, threadIdValue, leftNS, rightNS);
       this.cycleStartTime = this.funcNameCycleArr!.length > 0 ? this.funcNameCycleArr![0].cycleStartTime : undefined;
-      this.cycleEndTime = this.funcNameCycleArr!.length > 1 ? this.funcNameCycleArr![this.funcNameCycleArr!.length - 1].cycleStartTime : undefined;
+      this.cycleEndTime =
+        this.funcNameCycleArr!.length > 1
+          ? this.funcNameCycleArr![this.funcNameCycleArr!.length - 1].cycleStartTime
+          : undefined;
       // 遍历设置周期的起始时间
       for (let i = 0; i < this.funcNameCycleArr!.length - 1; i++) {
         this.funcNameCycleArr![i].endTime = this.funcNameCycleArr![i + 1].cycleStartTime;
@@ -143,15 +149,22 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
         // pid数组去重
         processIds = Array.from(new Set(processIds));
         // 去除切割范围以外的数据
-        this.filterState = new Array<StateGroup>;
-        stateItemArr.map(stateItem => {
+        this.filterState = new Array<StateGroup>();
+        stateItemArr.map((stateItem) => {
           for (let i = 0; i < this.funcNameCycleArr!.length; i++) {
-            // @ts-ignore
-            if (stateItem.ts + stateItem.dur > this.funcNameCycleArr[i].cycleStartTime && stateItem.ts + stateItem.dur < this.funcNameCycleArr[i].endTime
-              && (stateItem.state === 'S' || stateItem.state === 'R' || stateItem.state === 'D' || stateItem.state === 'Running')) {
+            if (
+              // @ts-ignore
+              stateItem.ts > this.funcNameCycleArr[i].cycleStartTime &&
+              // @ts-ignore
+              stateItem.ts + stateItem.dur < this.funcNameCycleArr[i].endTime &&
+              (stateItem.state === 'S' ||
+                stateItem.state === 'R' ||
+                stateItem.state === 'D' ||
+                stateItem.state === 'Running')
+            ) {
               this.filterState!.push(stateItem);
-            };
-          };
+            }
+          }
         });
         // 周期内有数据
         if (this.filterState.length !== 0) {
@@ -190,22 +203,32 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
       this.threadBindersTbl!.loading = true;
       this.funcNameCycleArr = await querySingleFuncNameCycleStates(threadFuncName, threadIdValue, leftNS, rightNS);
       this.cycleStartTime = this.funcNameCycleArr!.length > 0 ? this.funcNameCycleArr![0].cycleStartTime : undefined;
-      this.cycleEndTime = this.funcNameCycleArr!.length > 0 ? this.funcNameCycleArr![this.funcNameCycleArr!.length - 1].endTime : undefined;
+      this.cycleEndTime =
+        this.funcNameCycleArr!.length > 0
+          ? this.funcNameCycleArr![this.funcNameCycleArr!.length - 1].endTime
+          : undefined;
       let stateItemArr = await queryStatesCut(threadIds, leftNS, rightNS);
       if (this.funcNameCycleArr!.length !== 0) {
         let stateCutArr: StateGroup[] = [];
         // pid数组去重
         processIds = Array.from(new Set(processIds));
         // 去除切割范围以外的数据
-        this.filterState = new Array<StateGroup>;
-        stateItemArr.map(stateItem => {
+        this.filterState = new Array<StateGroup>();
+        stateItemArr.map((stateItem) => {
           for (let i = 0; i < this.funcNameCycleArr!.length; i++) {
-            // @ts-ignore
-            if (stateItem.ts + stateItem.dur > this.funcNameCycleArr[i].cycleStartTime && stateItem.ts + stateItem.dur < this.funcNameCycleArr[i].endTime
-              && (stateItem.state === 'S' || stateItem.state === 'R' || stateItem.state === 'D' || stateItem.state === 'Running')) {
+            if (
+              // @ts-ignore
+              stateItem.ts > this.funcNameCycleArr[i].cycleStartTime &&
+              // @ts-ignore
+              stateItem.ts + stateItem.dur < this.funcNameCycleArr[i].endTime &&
+              (stateItem.state === 'S' ||
+                stateItem.state === 'R' ||
+                stateItem.state === 'D' ||
+                stateItem.state === 'Running')
+            ) {
               this.filterState!.push(stateItem);
-            };
-          };
+            }
+          }
         });
         if (this.filterState.length > 0) {
           for (let i = 0; i < processIds.length; i++) {
@@ -230,104 +253,114 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
     // 当前进程级别的数据
     let filterObj = new StateGroup();
     // 筛选出当前进程下的所有数据
-    let processArr = new Array<StateGroup>;
-    filterState.map(filterItem => {
+    let processArr = new Array<StateGroup>();
+    filterState.map((filterItem) => {
       if (filterItem.pid === processId) {
         processArr.push(filterItem);
         filterObj.totalCount! += 1;
-        filterItem.state === 'R' ? filterObj.RunnableCount += 1 : filterItem.state === 'Running'
-          ? filterObj.RunningCount += 1 : filterItem.state === 'D'
-            ? filterObj.DCount += 1 : filterObj.SleepingCount += 1;
+        filterItem.state === 'R'
+          ? (filterObj.RunnableCount += 1)
+          : filterItem.state === 'Running'
+          ? (filterObj.RunningCount += 1)
+          : filterItem.state === 'D'
+          ? (filterObj.DCount += 1)
+          : (filterObj.SleepingCount += 1);
         filterObj.title = (Utils.PROCESS_MAP.get(processId) || 'Process') + processId;
         filterObj.pid = processId;
         filterObj.type = 'process';
       }
-    })
+    });
     if (processArr.length > 0) {
       filterObj.children = this.setThreadData(processArr);
     }
     stateCutArr.push(filterObj);
-  };
+  }
 
   // 处理线程数据
   setThreadData(threadData: Array<StateGroup>) {
     // 进程下面的线程,相当于process的children
-    let threadArr = new Array<StateGroup>;
+    let threadArr = new Array<StateGroup>();
     let threads = this.currentSelectionParam.threadIds;
     for (let i = 0; i < threads.length; i++) {
       // 单个线程
       let threadObj = new StateGroup();
       threadObj.tid = threads[i];
       threadObj.pid = threadData[0].pid;
-      threadObj.children = new Array<StateGroup>;
+      threadObj.children = new Array<StateGroup>();
       threadObj.type = 'thread';
-      threadObj.title = (Utils.THREAD_MAP.get(threads[i]) || 'Process') + threads[i],
-        threadArr.push(threadObj);
+      (threadObj.title = (Utils.THREAD_MAP.get(threads[i]) || 'Process') + threads[i]), threadArr.push(threadObj);
     }
     for (let i = 0; i < threadArr.length; i++) {
-      let threadList = new Array<StateGroup>;
-      threadData.map(threadItem => {
+      let threadList = new Array<StateGroup>();
+      threadData.map((threadItem) => {
         if (threadItem.tid === threadArr[i].tid) {
           threadList.push(threadItem);
           threadArr[i].totalCount! += 1;
           threadItem.state === 'R'
-            ? (threadArr[i].RunnableCount += 1, threadArr[i].RunnableDur += threadItem.dur!)
+            ? ((threadArr[i].RunnableCount += 1), (threadArr[i].RunnableDur += threadItem.dur!))
             : threadItem.state === 'Running'
-              ? (threadArr[i].RunningCount += 1, threadArr[i].RunningDur += threadItem.dur!)
-              : threadItem.state === 'S'
-                ? (threadArr[i].SleepingCount += 1, threadArr[i].SleepingDur += threadItem.dur!)
-                : (threadArr[i].DCount += 1, threadArr[i].DDur += threadItem.dur!);
+            ? ((threadArr[i].RunningCount += 1), (threadArr[i].RunningDur += threadItem.dur!))
+            : threadItem.state === 'S'
+            ? ((threadArr[i].SleepingCount += 1), (threadArr[i].SleepingDur += threadItem.dur!))
+            : ((threadArr[i].DCount += 1), (threadArr[i].DDur += threadItem.dur!));
         }
-      })
+      });
       threadArr[i].SleepingDur = Number((threadArr[i].SleepingDur / 1000000).toFixed(3));
       threadArr[i].RunnableDur = Number((threadArr[i].RunnableDur / 1000000).toFixed(3));
       threadArr[i].RunningDur = Number((threadArr[i].RunningDur / 1000000).toFixed(3));
       threadArr[i].DDur = Number((threadArr[i].DDur / 1000000).toFixed(3));
       if (threadList.length > 0) {
-        threadArr[i].children = this.setCycleData(threadList)
+        threadArr[i].children = this.setCycleData(threadList);
       }
     }
-    threadArr = threadArr.filter(V => {
+    threadArr = threadArr.filter((V) => {
       return V.totalCount! > 0;
-    })
+    });
     return threadArr;
   }
 
   // 处理周期数据
   setCycleData(threadData: Array<StateGroup>): Array<StateGroup> {
-    let cycleArr = new Array<StateGroup>;
+    let cycleArr = new Array<StateGroup>();
     if (this.funcNameCycleArr !== undefined && this.funcNameCycleArr.length > 0) {
       for (let i = 0; i < this.funcNameCycleArr!.length; i++) {
         let cycleItem = new StateGroup();
         cycleItem.title = `cycle-${i + 1}`;
         cycleItem.cycle = i;
-        threadData.map(v => {
+        threadData.map((v) => {
           // @ts-ignore
-          if (v.ts + v.dur > this.funcNameCycleArr[i].cycleStartTime && v.dur + v.ts < this.funcNameCycleArr[i].endTime) {
+          if (v.ts > this.funcNameCycleArr[i].cycleStartTime && v.dur + v.ts < this.funcNameCycleArr[i].endTime) {
             cycleItem.totalCount! += 1;
             v.state === 'R'
-              ? (cycleItem.RunnableCount += 1, cycleItem.RunnableDur += v.dur!)
+              ? ((cycleItem.RunnableCount += 1), (cycleItem.RunnableDur += v.dur!))
               : v.state === 'Running'
-                ? (cycleItem.RunningCount += 1, cycleItem.RunningDur += v.dur!)
-                : v.state === 'S'
-                  ? (cycleItem.SleepingCount += 1, cycleItem.SleepingDur += v.dur!)
-                  : (cycleItem.DCount += 1, cycleItem.DDur += v.dur!);
+              ? ((cycleItem.RunningCount += 1), (cycleItem.RunningDur += v.dur!))
+              : v.state === 'S'
+              ? ((cycleItem.SleepingCount += 1), (cycleItem.SleepingDur += v.dur!))
+              : ((cycleItem.DCount += 1), (cycleItem.DDur += v.dur!));
           }
-        })
+        });
         cycleItem.SleepingDur = Number((cycleItem.SleepingDur / 1000000).toFixed(3));
         cycleItem.RunningDur = Number((cycleItem.RunningDur / 1000000).toFixed(3));
         cycleItem.RunnableDur = Number((cycleItem.RunnableDur / 1000000).toFixed(3));
         cycleItem.DDur = Number((cycleItem.DDur / 1000000).toFixed(3));
-        cycleItem.cycleDur! = Number(((this.funcNameCycleArr[i].endTime - this.funcNameCycleArr[i].cycleStartTime) / 1000000).toFixed(3));
+        cycleItem.cycleDur! = Number(
+          ((this.funcNameCycleArr[i].endTime - this.funcNameCycleArr[i].cycleStartTime) / 1000000).toFixed(3)
+        );
         cycleItem.type = 'cycle';
         cycleArr.push(cycleItem);
       }
     }
-    return cycleArr
-  };
+    return cycleArr;
+  }
 
   // 输入框为空点击按钮之后的样式
-  verifyInputIsEmpty(threadIdValue: string, threadFuncName: string, threadId: HTMLInputElement, threadFunc: HTMLInputElement): void {
+  verifyInputIsEmpty(
+    threadIdValue: string,
+    threadFuncName: string,
+    threadId: HTMLInputElement,
+    threadFunc: HTMLInputElement
+  ): void {
     if (threadIdValue === '') {
       threadId.style.border = '1px solid rgb(255,0,0)';
       threadId.setAttribute('placeholder', 'Please input thread id');
@@ -343,7 +376,6 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
     }
   }
 
-
   // 线程点击
   private theadClick(data: Array<BinderGroup>): void {
     let labels = this.threadBindersTbl?.shadowRoot?.querySelector('.th > .td')?.querySelectorAll('label');
@@ -354,7 +386,10 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
           if (label.includes('Process') && i === 0) {
             // 数据递归设置status
             this.threadBindersTbl!.setStatus(data, false);
-            this.threadBindersTbl!.recycleDs = this.threadBindersTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
+            this.threadBindersTbl!.recycleDs = this.threadBindersTbl!.meauseTreeRowElement(
+              data,
+              RedrawTreeForm.Retract
+            );
           } else if (label.includes('Thread') && i === 1) {
             for (let item of data) {
               item.status = true;
@@ -362,7 +397,10 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
                 this.threadBindersTbl!.setStatus(item.children, false);
               }
             }
-            this.threadBindersTbl!.recycleDs = this.threadBindersTbl!.meauseTreeRowElement(data, RedrawTreeForm.Retract);
+            this.threadBindersTbl!.recycleDs = this.threadBindersTbl!.meauseTreeRowElement(
+              data,
+              RedrawTreeForm.Retract
+            );
           } else if (label.includes('Cycle') && i === 2) {
             this.threadBindersTbl!.setStatus(data, true);
             this.threadBindersTbl!.recycleDs = this.threadBindersTbl!.meauseTreeRowElement(data, RedrawTreeForm.Expand);
@@ -386,13 +424,13 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
       this.dataSource = [];
       // @ts-ignore
       this.dataSingleCut(this.threadStatesDIV!.children[0], this.threadStatesDIV?.children[1]);
-    })
+    });
     this.threadStatesDIV?.children[2].children[1].addEventListener('click', (e) => {
       this.dispalyQueryArea(true);
       this.dataSource = [];
       // @ts-ignore
       this.dataLoopCut(this.threadStatesDIV?.children[0], this.threadStatesDIV?.children[1]);
-    })
+    });
 
     this.threadBindersTbl!.addEventListener('mouseout', (): void => {
       this.cycleIsClick = false;
@@ -400,7 +438,7 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
       this.traceSheetEl!.systemLogFlag = undefined;
       TabPaneFreqStatesDataCut.isStateTabHover = false;
       this.spSystemTrace?.refreshCanvas(false);
-    })
+    });
 
     this.threadBindersTbl!.addEventListener('row-click', (evt: any) => {
       let currentData: StateGroup = evt.detail.data;
@@ -412,12 +450,13 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
         this.threadBindersTbl!.setCurrentSelection(currentData);
         this.rowCycleData = currentData.children;
         this.dispalyQueryArea(false);
-        let totalCount = currentData.SleepingCount + currentData.RunnableCount + currentData.DCount + currentData.RunningCount;
+        let totalCount =
+          currentData.SleepingCount + currentData.RunnableCount + currentData.DCount + currentData.RunningCount;
         this.dataSource = [];
         this.dataSource.push({
           xName: 'Total',
-          yAverage: totalCount !== 0 ? Math.ceil(totalCount! / this.rowCycleData!.length) : 0
-        })
+          yAverage: totalCount !== 0 ? Math.ceil(totalCount! / this.rowCycleData!.length) : 0,
+        });
         if (this.dataSource!.length !== 0) {
           this.drawColumn();
         }
@@ -459,46 +498,49 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
       }
     });
 
-
     // 筛选柱状图数据
     this.shadowRoot?.querySelector('#query-btn')?.addEventListener('click', () => {
       this.cycleARangeArr = this.rowCycleData?.filter((it: StateGroup) => {
-        return it.cycleDur! >= Number(this.cycleAStartRangeDIV!.value)
-          && it.cycleDur! < Number(this.cycleAEndRangeDIV!.value);
-      })
+        return (
+          it.cycleDur! >= Number(this.cycleAStartRangeDIV!.value) &&
+          it.cycleDur! < Number(this.cycleAEndRangeDIV!.value)
+        );
+      });
       this.cycleBRangeArr = this.rowCycleData?.filter((it: StateGroup) => {
-        return it.cycleDur! >= Number(this.cycleBStartRangeDIV!.value)
-          && it.cycleDur! < Number(this.cycleBEndRangeDIV!.value);
-      })
+        return (
+          it.cycleDur! >= Number(this.cycleBStartRangeDIV!.value) &&
+          it.cycleDur! < Number(this.cycleBEndRangeDIV!.value)
+        );
+      });
       let cycleACount: number = 0;
       this.cycleARangeArr?.forEach((it: StateGroup) => {
         cycleACount += it.totalCount!;
-      })
+      });
       let cycleBCount: number = 0;
       this.cycleBRangeArr?.forEach((it: StateGroup) => {
         cycleBCount += it.totalCount!;
-      })
+      });
       this.dataSource!.length > 1 && this.dataSource?.splice(1);
       this.dataSource!.push({
         xName: 'cycleA',
-        yAverage: cycleACount !== 0 ? Math.ceil(cycleACount / this.cycleARangeArr!.length) : 0
-      })
+        yAverage: cycleACount !== 0 ? Math.ceil(cycleACount / this.cycleARangeArr!.length) : 0,
+      });
       this.dataSource!.push({
         xName: 'cycleB',
-        yAverage: cycleBCount !== 0 ? Math.ceil(cycleBCount / this.cycleBRangeArr!.length) : 0
-      })
+        yAverage: cycleBCount !== 0 ? Math.ceil(cycleBCount / this.cycleBRangeArr!.length) : 0,
+      });
       if (this.dataSource!.length !== 0) {
         this.drawColumn();
       }
-    })
+    });
   }
 
   // 筛选出点击的线程数据
   filCycleData(pid: number, tid: number): Array<StateGroup> {
     return this.filterState?.filter((v: StateGroup) => {
       return v.pid === pid && v.tid === tid && v.ts > this.cycleStartTime! && v.ts + v.dur! < this.cycleEndTime!;
-    })
-  };
+    });
+  }
 
   // 清空dur筛选输入框内容
   clearCycleRange(): void {
@@ -741,6 +783,6 @@ export class TabPaneFreqStatesDataCut extends BaseElement {
                 </div>
             </lit-slicer>
         </div>
-        `
+        `;
   }
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts
index f0bb60e547c4551413bae895e976e77f102411ac..d63af5319ba007a3795d91de1041af98c6b36ff9 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts
@@ -20,7 +20,7 @@ import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import { Utils } from '../../base/Utils';
 import { ns2s } from '../../TimerShaftElement';
-import {getTabDmaVMTrackerClickData} from "../../../../database/sql/Dma.sql";
+import { getTabDmaVMTrackerClickData } from '../../../../database/sql/Dma.sql';
 
 @element('tabpane-dma-selection-vmtracker')
 export class TabPaneDmaSelectVmTracker extends BaseElement {
@@ -141,15 +141,15 @@ export class TabPaneDmaSelectVmTracker extends BaseElement {
 
   sortDmaByColumn(column: string, sort: number): void {
     const comparisonFunctions: { [key: string]: (a: any, b: any) => number } = {
-      'startNs': (a, b) => this.compareValues(a.startNs, b.startNs, sort),
-      'expTaskComm': (a, b) => this.compareValues(`${a.expTaskComm}`, `${b.expTaskComm}`, sort),
-      'fd': (a, b) => this.compareValues(a.fd, b.fd, sort),
-      'size': (a, b) => this.compareValues(a.size, b.size, sort),
-      'ino': (a, b) => this.compareValues(a.ino, b.ino, sort),
-      'expPid': (a, b) => this.compareValues(a.expPid, b.expPid, sort),
-      'flag': (a, b) => this.compareValues(a.flag, b.flag, sort),
-      'bufName': (a, b) => this.compareValues(`${a.bufName}`, `${b.bufName}`, sort),
-      'expName': (a, b) => this.compareValues(`${a.expName}`, `${b.expName}`, sort)
+      startNs: (a, b) => this.compareValues(a.startNs, b.startNs, sort),
+      expTaskComm: (a, b) => this.compareValues(`${a.expTaskComm}`, `${b.expTaskComm}`, sort),
+      fd: (a, b) => this.compareValues(a.fd, b.fd, sort),
+      size: (a, b) => this.compareValues(a.size, b.size, sort),
+      ino: (a, b) => this.compareValues(a.ino, b.ino, sort),
+      expPid: (a, b) => this.compareValues(a.expPid, b.expPid, sort),
+      flag: (a, b) => this.compareValues(a.flag, b.flag, sort),
+      bufName: (a, b) => this.compareValues(`${a.bufName}`, `${b.bufName}`, sort),
+      expName: (a, b) => this.compareValues(`${a.expName}`, `${b.expName}`, sort),
     };
 
     if (sort === 0) {
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts
index f4ffba4eb249ea3b7bc04b73660560b56b7700d6..6644a5331f525068fa3174c254435d65eec1a928 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts
@@ -20,7 +20,7 @@ import { resizeObserver } from '../SheetUtils';
 import { type Dma } from '../../../../bean/AbilityMonitor';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { Utils } from '../../base/Utils';
-import {getTabDmaVmTrackerData} from "../../../../database/sql/Dma.sql";
+import { getTabDmaVmTrackerData } from '../../../../database/sql/Dma.sql';
 
 @element('tabpane-dma-vmtracker')
 export class TabPaneDmaVmTracker extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts
index a0104d63cdad4f9413017aab961c9a6fc58855c8..216a8260bbeb632f7cb97e1e4530842ed80fd42c 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts
@@ -24,7 +24,7 @@ import { Utils } from '../../base/Utils';
 import { resizeObserverFromMemory } from '../SheetUtils';
 import '../TabPaneJsMemoryFilter';
 import { type TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter';
-import {getTabDmaVmTrackerComparisonData} from "../../../../database/sql/Dma.sql";
+import { getTabDmaVmTrackerComparisonData } from '../../../../database/sql/Dma.sql';
 
 @element('tabpane-dma-vmtracker-comparison')
 export class TabPaneDmaVmTrackerComparison extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts
index 15c9134d8b28cb5f32ccf7e6ebdfaf34ef85b9d5..1b11621feedb76be76ce8972134c56cae4ae4316 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts
@@ -19,7 +19,7 @@ import { type GpuMemory } from '../../../../bean/AbilityMonitor';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
 import { Utils } from '../../base/Utils';
-import {getTabGpuMemoryVMTrackerClickData} from "../../../../database/sql/Memory.sql";
+import { getTabGpuMemoryVMTrackerClickData } from '../../../../database/sql/Memory.sql';
 
 @element('tabpane-gpu-memory-selection-vmtracker')
 export class TabPaneGpuMemorySelectVmTracker extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.ts
index 5b740f0f848fc49e8f1990f90d201613e6e6070f..8e5e96796e472955d7ff3908a9c925c05b7b424b 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.ts
@@ -21,7 +21,7 @@ import { GpuMemory } from '../../../../bean/AbilityMonitor';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { Utils } from '../../base/Utils';
 import { SpSystemTrace } from '../../../SpSystemTrace';
-import {getTabGpuMemoryData} from "../../../../database/sql/Memory.sql";
+import { getTabGpuMemoryData } from '../../../../database/sql/Memory.sql';
 
 @element('tabpane-gpu-memory-vmtracker')
 export class TabPaneGpuMemoryVmTracker extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts
index dde58aefdb21fcab96ce21a8cae51d5743b267d6..e527b8dbda618fe51383a76f400cf104c3dbb9ce 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts
@@ -25,7 +25,7 @@ import { Utils } from '../../base/Utils';
 import { compare, resizeObserverFromMemory } from '../SheetUtils';
 import '../TabPaneJsMemoryFilter';
 import { type TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter';
-import {getTabGpuMemoryVmTrackerComparisonData} from "../../../../database/sql/Memory.sql";
+import { getTabGpuMemoryVmTrackerComparisonData } from '../../../../database/sql/Memory.sql';
 
 @element('tabpane-gpu-memory-vmtracker-comparison')
 export class TabPaneGpuMemoryVmTrackerComparison extends BaseElement {
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuResourceVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuResourceVmTracker.ts
index a7e3dc96631a27c230f32810ca39bf8251f95a42..4673f77077198ad2119101895d4dc752b2144352 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuResourceVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuResourceVmTracker.ts
@@ -19,7 +19,7 @@ import { getByteWithUnit } from '../../../../database/logic-worker/ProcedureLogi
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
 import { SpSystemTrace } from '../../../SpSystemTrace';
 import { resizeObserver } from '../SheetUtils';
-import {queryGpuResourceTabData} from "../../../../database/sql/Gpu.sql";
+import { queryGpuResourceTabData } from '../../../../database/sql/Gpu.sql';
 @element('tabpane-gpu-resource')
 export class TabPaneGpuResourceVmTracker extends BaseElement {
   private gpuResourceTable: LitTable | undefined | null;
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts
index 58fa1abeb80bfea3e8349fe3bf7ab767ebdc65aa..27704e5e4c0c0e1400a363f36f84081362aec4cd 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts
@@ -21,7 +21,7 @@ import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { Utils } from '../../base/Utils';
 import { CompareStruct, compare, resizeObserverFromMemory } from '../SheetUtils';
 import { type TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter';
-import {queryProcessPurgeableSelectionTab} from "../../../../database/sql/ProcessThread.sql";
+import { queryProcessPurgeableSelectionTab } from '../../../../database/sql/ProcessThread.sql';
 @element('tabpane-purgeable-pin-comparison-vm')
 export class TabPanePurgPinComparisonVM extends BaseElement {
   private purgeablePinTables: LitTable | null | undefined;
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts
index 4148e58e076d973c2eabcfc7a0483452971760fb..64a8af42a79b6317e9ba491381f225d4fbab6b4d 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts
@@ -18,7 +18,7 @@ import { type SelectionParam } from '../../../../bean/BoxSelection';
 import { Utils } from '../../base/Utils';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
-import {queryVmTrackerShmSizeData} from "../../../../database/sql/Memory.sql";
+import { queryVmTrackerShmSizeData } from '../../../../database/sql/Memory.sql';
 import { TabPaneVmTrackerShmHtml } from './TabPaneVmTrackerShm.html';
 
 @element('tabpane-vmtracker-shm')
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.html.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.html.ts
index 13b37d22b979aa1a8aaddd8ad788ceae9160f8f3..e3aeaa769c69df6d92cac24d3a0fdd49f096e1af 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.html.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.html.ts
@@ -73,4 +73,4 @@ export const TabPaneVmTrackerShmSelectionHtml = `
                             <lit-table-column width="1fr" title="Flag" data-index="flag" key="flag" align="flex-start"  order>
                             </lit-table-column>
                         </lit-table>
-        `;
\ No newline at end of file
+        `;
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.ts
index 01ccff69d227a9e6dec3167b4bc3a515ebf46ae2..084359bf5644060e4b9b38b49865d75b43455dc5 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.ts
@@ -19,7 +19,7 @@ import { Utils } from '../../base/Utils';
 import { SnapshotStruct } from '../../../../database/ui-worker/ProcedureWorkerSnapshot';
 import { MemoryConfig } from '../../../../bean/MemoryConfig';
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon';
-import {queryVmTrackerShmSelectionData} from '../../../../database/sql/Memory.sql';
+import { queryVmTrackerShmSelectionData } from '../../../../database/sql/Memory.sql';
 import { TabPaneVmTrackerShmSelectionHtml } from './TabPaneVmTrackerShmSelection.html';
 
 @element('tabpane-vmtracker-shm-selection')
@@ -94,16 +94,16 @@ export class TabPaneVmTrackerShmSelection extends BaseElement {
 
   sortByColumn(column: string, sort: number): void {
     const comparisonFunctions: { [key: string]: (a: any, b: any) => number } = {
-      'ts': (a, b) => this.compareValues(a.startNS, b.startNS, sort),
-      'fd': (a, b) => this.compareValues(a.fd, b.fd, sort),
-      'sizeStr': (a, b) => this.compareValues(a.size, b.size, sort),
-      'adj': (a, b) => this.compareValues(a.adj, b.adj, sort),
-      'name': (a, b) => this.compareValues(a.name, b.name, sort),
-      'id': (a, b) => this.compareValues(a.id, b.id, sort),
-      'time': (a, b) => this.compareValues(a.time, b.time, sort),
-      'count': (a, b) => this.compareValues(a.count, b.count, sort),
-      'purged': (a, b) => this.compareValues(a.purged, b.purged, sort),
-      'flag': (a, b) => this.compareValues(a.flag, b.flag, sort)
+      ts: (a, b) => this.compareValues(a.startNS, b.startNS, sort),
+      fd: (a, b) => this.compareValues(a.fd, b.fd, sort),
+      sizeStr: (a, b) => this.compareValues(a.size, b.size, sort),
+      adj: (a, b) => this.compareValues(a.adj, b.adj, sort),
+      name: (a, b) => this.compareValues(a.name, b.name, sort),
+      id: (a, b) => this.compareValues(a.id, b.id, sort),
+      time: (a, b) => this.compareValues(a.time, b.time, sort),
+      count: (a, b) => this.compareValues(a.count, b.count, sort),
+      purged: (a, b) => this.compareValues(a.purged, b.purged, sort),
+      flag: (a, b) => this.compareValues(a.flag, b.flag, sort),
     };
 
     if (sort === 0) {
diff --git a/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts b/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
index 0e81c05d96a36f2d938200dd75443057b335c0c3..f571a2059eb90ea537a7e41cd220637530a43f53 100644
--- a/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
@@ -98,12 +98,12 @@ export class RangeRuler extends Graph {
   isNewRange: boolean = false;
   markAX: number = 0;
   markBX: number = 0;
-  isPress: boolean = false;
   pressFrameIdF: number = -1;
   pressFrameIdW: number = -1;
   pressFrameIdS: number = -1;
   pressFrameIdA: number = -1;
   pressFrameIdD: number = -1;
+  pressFrameIdFlagIntoView: number = -1;
   upFrameIdW: number = -1;
   upFrameIdS: number = -1;
   upFrameIdA: number = -1;
@@ -170,7 +170,8 @@ export class RangeRuler extends Graph {
     let miniHeight = Math.round(this.frame.height / CpuStruct.cpuCount); //每格高度
     let miniWidth = Math.ceil(this.frame.width / 100); //每格宽度
     this._cpuCountData = CpuStruct.cpuCount;
-    if (sessionStorage.getItem('expand') === 'true') {//展开
+    if (sessionStorage.getItem('expand') === 'true') {
+      //展开
       miniHeight = Math.round(this.frame.height / CpuStruct.cpuCount);
     } else if (sessionStorage.getItem('expand') === 'false') {
       miniHeight = Math.round(this.frame.height / 2);
@@ -522,6 +523,7 @@ export class RangeRuler extends Graph {
     if (this.pressFrameIdW !== -1) cancelAnimationFrame(this.pressFrameIdW);
     if (this.pressFrameIdS !== -1) cancelAnimationFrame(this.pressFrameIdS);
     if (this.pressFrameIdF !== -1) cancelAnimationFrame(this.pressFrameIdF);
+    if (this.pressFrameIdFlagIntoView !== -1) cancelAnimationFrame(this.pressFrameIdFlagIntoView);
   }
 
   cancelUpFrame(): void {
@@ -540,9 +542,9 @@ export class RangeRuler extends Graph {
       this.pressedKeys.length == 0 ||
       this.pressedKeys[this.pressedKeys.length - 1] !== keyboardEvent.key.toLocaleLowerCase()
     ) {
-      this.pressedKeys = this.pressedKeys.filter(v => {
+      this.pressedKeys = this.pressedKeys.filter((v) => {
         return v !== keyboardEvent.key.toLocaleLowerCase();
-      })
+      });
       this.setCacheInterval();
       this.range.refresh = this.cacheInterval.flag;
       if (currentSlicesTime) {
@@ -558,7 +560,28 @@ export class RangeRuler extends Graph {
       this.animaStartTime = new Date().getTime(); //记录按下的时间
       this.keyboardKeyPressMap[this.pressedKeys[this.pressedKeys.length - 1]]?.bind(this)();
     }
-    this.isPress = true;
+  }
+
+  scrollFlagIntoView(): void {
+    let animFlagIntoView = () => {
+      let clientWidth: number = this.canvas?.clientWidth || 0;
+      let flagTime: number = this.currentSlicesTime.startTime!;
+      let unitValue: number = Number(((this.range.endNS - this.range.startNS) / clientWidth).toFixed(2));
+      if (flagTime > this.range.endNS) {
+        let offsetNs = 20 * unitValue + flagTime - this.range.endNS;
+        this.range.startNS += offsetNs;
+        this.range.endNS += offsetNs;
+      } else if (flagTime < this.range.startNS) {
+        let offsetNs = this.range.startNS - flagTime + 20 * unitValue;
+        this.range.startNS -= offsetNs;
+        this.range.endNS -= offsetNs;
+      }
+      this.fillX();
+      this.draw();
+      this.range.refresh = false;
+      this.pressFrameIdFlagIntoView = requestAnimationFrame(animFlagIntoView);
+    };
+    this.pressFrameIdFlagIntoView = requestAnimationFrame(animFlagIntoView);
   }
 
   keyPressF(): void {
@@ -578,14 +601,29 @@ export class RangeRuler extends Graph {
       } else {
         return;
       }
-      let startX = midX - 150;
-      let endX = midX + 150;
-      this.range.startNS = (endX * startTime - startX * endTime) / (endX - startX);
-      this.range.endNS = (this.rulerW * (endTime - this.range.startNS) + this.range.startNS * endX) / endX;
+      if (startTime === endTime) {
+        let midNs = (this.range.endNS - this.range.startNS) / 2;
+        if (startTime > midNs && startTime - midNs < this.range.totalNS - this.range.endNS) {
+          this.range.startNS += startTime - midNs;
+          this.range.endNS += startTime - midNs;
+        } else if (startTime < midNs && midNs - startTime < this.range.startNS) {
+          this.range.startNS -= midNs - startTime;
+          this.range.endNS -= midNs - startTime;
+        } else if (startTime > midNs && startTime - midNs > this.range.totalNS - this.range.endNS) {
+          this.range.startNS = 2 * startTime - this.range.totalNS;
+          this.range.endNS = this.range.totalNS;
+        } else if (startTime < midNs && midNs - startTime > this.range.startNS) {
+          this.range.startNS = 0;
+          this.range.endNS = 2 * startTime;
+        }
+      } else {
+        let startX = midX - 150;
+        let endX = midX + 150;
+        this.range.startNS = (endX * startTime - startX * endTime) / (endX - startX);
+        this.range.endNS = (this.rulerW * (endTime - this.range.startNS) + this.range.startNS * endX) / endX;
+      }
       this.fillX();
       this.draw();
-      this.range.refresh = true;
-      this.notifyHandler(this.range);
       this.range.refresh = false;
       this.pressFrameIdF = requestAnimationFrame(animF);
     };
@@ -701,6 +739,10 @@ export class RangeRuler extends Graph {
     a: this.keyPressA,
     d: this.keyPressD,
     f: this.keyPressF,
+    ']': this.keyPressF,
+    '[': this.keyPressF,
+    '.': this.scrollFlagIntoView,
+    ',': this.scrollFlagIntoView,
   };
 
   keyboardKeyUpMap: any = {
@@ -723,7 +765,6 @@ export class RangeRuler extends Graph {
         this.pressedKeys.splice(number, 1);
       }
     }
-    this.isPress = false;
   }
 
   keyUpW(): void {
diff --git a/ide/src/trace/component/trace/timer-shaft/Rect.ts b/ide/src/trace/component/trace/timer-shaft/Rect.ts
index 525a330a0c81ab10801d21c4b9db46a70ea8f9be..9d4fcf0368083185acfda86036d6fb1df33a8aa1 100644
--- a/ide/src/trace/component/trace/timer-shaft/Rect.ts
+++ b/ide/src/trace/component/trace/timer-shaft/Rect.ts
@@ -76,10 +76,12 @@ export class Rect {
 
   containsWithPadding(x: number, y: number, paddingLeftOrRight: number, paddingTopOrBottom: number): boolean {
     // ------------------------修改rangeruler部分鼠标形态根据高度调整-------------------------
-    if (sessionStorage.getItem('expand') === 'true') {//展开
+    if (sessionStorage.getItem('expand') === 'true') {
+      //展开
       this.height = 75;
-    } else if (sessionStorage.getItem('expand') === 'false') {//折叠
-      this.height = 75 - Number(sessionStorage.getItem('foldHeight'))
+    } else if (sessionStorage.getItem('expand') === 'false') {
+      //折叠
+      this.height = 75 - Number(sessionStorage.getItem('foldHeight'));
     }
     return (
       this.x + paddingLeftOrRight <= x &&
diff --git a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
index ac7c0d8add8ebd5162c589b79ac2b2e6c9165d01..b7ea1cdf3915599a49bbea851982b84a6567a87a 100644
--- a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
@@ -89,10 +89,10 @@ export class SportRuler extends Graph {
     endTime: number | null | undefined;
     color: string | null;
   } | null = {
-      startTime: null,
-      endTime: null,
-      color: null,
-    };
+    startTime: null,
+    endTime: null,
+    color: null,
+  };
   private timerShaftEL: TimerShaftElement | undefined | null;
   private timeArray: Array<number> = [];
   private countArray: Array<number> = [];
@@ -438,7 +438,8 @@ export class SportRuler extends Graph {
       this.context2D.fillStyle = color;
       this.context2D.strokeStyle = color;
       // ----------------修改小倒三角位置的绘制---------------------
-      if (sessionStorage.getItem('expand') === 'true') {//展开
+      if (sessionStorage.getItem('expand') === 'true') {
+        //展开
         this.context2D.moveTo(x - 3, 141);
         this.context2D.lineTo(x + 3, 141);
         this.context2D.lineTo(x, 145);
@@ -535,7 +536,8 @@ export class SportRuler extends Graph {
     this.context2D.fillStyle = slicesTime.color;
     this.range.slicesTime.color = slicesTime.color; //紫色
     // ---------------------------------------修改标记绘制位置-------------------------
-    if (sessionStorage.getItem('expand') === 'true') {//展开
+    if (sessionStorage.getItem('expand') === 'true') {
+      //展开
       this.context2D.moveTo(startX + TRIWIDTH, 132);
       this.context2D.lineTo(startX, 142);
       this.context2D.lineTo(startX, 132);
@@ -710,7 +712,8 @@ export class SportRuler extends Graph {
   findSlicesTime(x: number, y: number): SlicesTime | null {
     // --------------------------修改旗子和标记的小三角重叠时的情况-------------------
     let slicestime;
-    if (sessionStorage.getItem('expand') === 'false') {//折叠
+    if (sessionStorage.getItem('expand') === 'false') {
+      //折叠
       slicestime = this.slicesTimeList.find((slicesTime) => {
         return (
           ((x >= slicesTime.startX - 1 && x <= slicesTime.startX + TRIWIDTH + 1) || // 选中了帽子的左边三角形区域
diff --git a/ide/src/trace/config/custom_temp_config.json b/ide/src/trace/config/custom_temp_config.json
index 6d7143a1b99d74c83640a5e8b8f82b5ebbb49a30..af97ab92cb5034497d25f91272d8174466c64d58 100644
--- a/ide/src/trace/config/custom_temp_config.json
+++ b/ide/src/trace/config/custom_temp_config.json
@@ -81,7 +81,7 @@
             }
           ]
         },
-		   {
+        {
           "component": "napi",
           "charts": [
             {
@@ -102,7 +102,7 @@
               "chartName": "accountmgr",
               "chartId": ""
             },
-			     {
+            {
               "chartName": "huawei_id_svc",
               "chartId": ""
             }
@@ -231,7 +231,7 @@
           ]
         },
         {
-          "component": "storage_service", 
+          "component": "storage_service",
           "charts": [
             {
               "chartName": "",
@@ -285,7 +285,7 @@
           ]
         },
         {
-          "component": "certificate_manager", 
+          "component": "certificate_manager",
           "charts": [
             {
               "chartName": "cert_manager_service",
@@ -368,7 +368,7 @@
             }
           ]
         },
-		    {
+        {
           "component": "appspawn",
           "charts": [
             {
@@ -572,7 +572,7 @@
           ]
         },
         {
-          "component": "distributed_bundle_framework", 
+          "component": "distributed_bundle_framework",
           "charts": [
             {
               "chartName": "dbms",
@@ -612,7 +612,7 @@
           ]
         },
         {
-          "component": "idl_tool", 
+          "component": "idl_tool",
           "charts": [
             {
               "chartName": "",
@@ -621,7 +621,7 @@
           ]
         },
         {
-          "component": "form_fwk", 
+          "component": "form_fwk",
           "charts": [
             {
               "chartName": "",
@@ -630,7 +630,7 @@
           ]
         },
         {
-          "component": "ability_base", 
+          "component": "ability_base",
           "charts": [
             {
               "chartName": "",
@@ -639,7 +639,7 @@
           ]
         },
         {
-          "component": "dmsfwk", 
+          "component": "dmsfwk",
           "charts": [
             {
               "chartName": "",
@@ -715,7 +715,7 @@
           ]
         },
         {
-          "component": "ipc_js", 
+          "component": "ipc_js",
           "charts": [
             {
               "chartName": "",
@@ -724,7 +724,7 @@
           ]
         },
         {
-          "component": "net_manager", 
+          "component": "net_manager",
           "charts": [
             {
               "chartName": "",
@@ -733,7 +733,7 @@
           ]
         },
         {
-          "component": "netmanager_base", 
+          "component": "netmanager_base",
           "charts": [
             {
               "chartName": "",
@@ -742,7 +742,7 @@
           ]
         },
         {
-          "component": "netmanager_ext", 
+          "component": "netmanager_ext",
           "charts": [
             {
               "chartName": "",
@@ -751,7 +751,7 @@
           ]
         },
         {
-          "component": "netstack", 
+          "component": "netstack",
           "charts": [
             {
               "chartName": "",
@@ -760,7 +760,7 @@
           ]
         },
         {
-          "component": "dsoftbus", 
+          "component": "dsoftbus",
           "charts": [
             {
               "chartName": "",
@@ -769,7 +769,7 @@
           ]
         },
         {
-          "component": "wifi", 
+          "component": "wifi",
           "charts": [
             {
               "chartName": "wifi_manager_service",
@@ -786,7 +786,7 @@
           ]
         },
         {
-          "component": "dhcp", 
+          "component": "dhcp",
           "charts": [
             {
               "chartName": "",
@@ -795,7 +795,7 @@
           ]
         },
         {
-          "component": "bluetooth_native_js", 
+          "component": "bluetooth_native_js",
           "charts": [
             {
               "chartName": "",
@@ -827,7 +827,7 @@
           ]
         },
         {
-          "component": "location_locator", 
+          "component": "location_locator",
           "charts": [
             {
               "chartName": "",
@@ -836,7 +836,7 @@
           ]
         },
         {
-          "component": "location_network", 
+          "component": "location_network",
           "charts": [
             {
               "chartName": "",
@@ -845,7 +845,7 @@
           ]
         },
         {
-          "component": "location_gnss", 
+          "component": "location_gnss",
           "charts": [
             {
               "chartName": "",
@@ -854,7 +854,7 @@
           ]
         },
         {
-          "component": "location_passive", 
+          "component": "location_passive",
           "charts": [
             {
               "chartName": "",
@@ -863,7 +863,7 @@
           ]
         },
         {
-          "component": "location_geocode", 
+          "component": "location_geocode",
           "charts": [
             {
               "chartName": "",
@@ -886,7 +886,7 @@
             {
               "chartName": "migrate_server",
               "chartId": ""
-            }, 
+            },
             {
               "chartName": "com.huawei.hmos.ouc",
               "chartId": ""
@@ -903,7 +903,7 @@
           ]
         },
         {
-          "component": "sys_installer", 
+          "component": "sys_installer",
           "charts": [
             {
               "chartName": "",
@@ -939,7 +939,7 @@
           ]
         },
         {
-          "component": "start", 
+          "component": "start",
           "charts": [
             {
               "chartName": "",
@@ -1012,7 +1012,7 @@
               "chartName": "face_auth_host",
               "chartId": ""
             },
-             {
+            {
               "chartName": "fingerprint_auth_host",
               "chartId": ""
             }
@@ -1582,7 +1582,7 @@
           ]
         },
         {
-          "component": "drivers_interface_camera", 
+          "component": "drivers_interface_camera",
           "charts": [
             {
               "chartName": "camera_host",
@@ -1591,7 +1591,7 @@
           ]
         },
         {
-          "component": "drivers_interface_codec", 
+          "component": "drivers_interface_codec",
           "charts": [
             {
               "chartName": "codec_host",
@@ -1600,7 +1600,7 @@
           ]
         },
         {
-          "component": "drivers_interface_motion", 
+          "component": "drivers_interface_motion",
           "charts": [
             {
               "chartName": "motion_host",
@@ -1609,7 +1609,7 @@
           ]
         },
         {
-          "component": "drivers_interface_light", 
+          "component": "drivers_interface_light",
           "charts": [
             {
               "chartName": "light_host",
@@ -1618,7 +1618,7 @@
           ]
         },
         {
-          "component": "drivers_interface_vibrator", 
+          "component": "drivers_interface_vibrator",
           "charts": [
             {
               "chartName": "vibrator_host",
@@ -1627,7 +1627,7 @@
           ]
         },
         {
-          "component": "drivers_interface_power", 
+          "component": "drivers_interface_power",
           "charts": [
             {
               "chartName": "power_host",
@@ -1636,7 +1636,7 @@
           ]
         },
         {
-          "component": "drivers_interface_battery", 
+          "component": "drivers_interface_battery",
           "charts": [
             {
               "chartName": "",
@@ -1645,7 +1645,7 @@
           ]
         },
         {
-          "component": "drivers_interface_thermal", 
+          "component": "drivers_interface_thermal",
           "charts": [
             {
               "chartName": "",
@@ -1654,7 +1654,7 @@
           ]
         },
         {
-          "component": "drivers_interface_pin_auth", 
+          "component": "drivers_interface_pin_auth",
           "charts": [
             {
               "chartName": "",
@@ -1663,7 +1663,7 @@
           ]
         },
         {
-          "component": "drivers_interface_face_auth", 
+          "component": "drivers_interface_face_auth",
           "charts": [
             {
               "chartName": "",
@@ -1672,7 +1672,7 @@
           ]
         },
         {
-          "component": "drivers_interface_user_auth", 
+          "component": "drivers_interface_user_auth",
           "charts": [
             {
               "chartName": "",
@@ -1681,7 +1681,7 @@
           ]
         },
         {
-          "component": "drivers_interface_fingerprint_auth", 
+          "component": "drivers_interface_fingerprint_auth",
           "charts": [
             {
               "chartName": "",
@@ -1690,7 +1690,7 @@
           ]
         },
         {
-          "component": "drivers_interface_input", 
+          "component": "drivers_interface_input",
           "charts": [
             {
               "chartName": "input_user_host",
@@ -1699,7 +1699,7 @@
           ]
         },
         {
-          "component": "drivers_interface_memorytracker", 
+          "component": "drivers_interface_memorytracker",
           "charts": [
             {
               "chartName": "",
@@ -1708,7 +1708,7 @@
           ]
         },
         {
-          "component": "drivers_interface_wlan", 
+          "component": "drivers_interface_wlan",
           "charts": [
             {
               "chartName": "wifi_host",
@@ -1717,7 +1717,7 @@
           ]
         },
         {
-          "component": "drivers_interface_location_agnss", 
+          "component": "drivers_interface_location_agnss",
           "charts": [
             {
               "chartName": "",
@@ -1726,7 +1726,7 @@
           ]
         },
         {
-          "component": "drivers_interface_location_geofence", 
+          "component": "drivers_interface_location_geofence",
           "charts": [
             {
               "chartName": "",
@@ -1735,7 +1735,7 @@
           ]
         },
         {
-          "component": "drivers_interface_location_gnss", 
+          "component": "drivers_interface_location_gnss",
           "charts": [
             {
               "chartName": "",
@@ -1744,7 +1744,7 @@
           ]
         },
         {
-          "component": "drivers_interface_usb", 
+          "component": "drivers_interface_usb",
           "charts": [
             {
               "chartName": "usb_host",
@@ -1753,7 +1753,7 @@
           ]
         },
         {
-          "component": "ril_device_driver_interface", 
+          "component": "ril_device_driver_interface",
           "charts": [
             {
               "chartName": "",
@@ -1762,7 +1762,7 @@
           ]
         },
         {
-          "component": "drivers_interface_display", 
+          "component": "drivers_interface_display",
           "charts": [
             {
               "chartName": "",
@@ -1771,7 +1771,7 @@
           ]
         },
         {
-          "component": "drivers_interface_distributed_camera", 
+          "component": "drivers_interface_distributed_camera",
           "charts": [
             {
               "chartName": "",
@@ -1780,7 +1780,7 @@
           ]
         },
         {
-          "component": "drivers_interface_ril", 
+          "component": "drivers_interface_ril",
           "charts": [
             {
               "chartName": "",
@@ -1789,7 +1789,7 @@
           ]
         },
         {
-          "component": "drivers_interface_partitionslot", 
+          "component": "drivers_interface_partitionslot",
           "charts": [
             {
               "chartName": "partitionslot_host",
@@ -1798,7 +1798,7 @@
           ]
         },
         {
-          "component": "drivers_interface_nnrt", 
+          "component": "drivers_interface_nnrt",
           "charts": [
             {
               "chartName": "",
diff --git a/ide/src/trace/database/ConvertTraceWorker.ts b/ide/src/trace/database/ConvertTraceWorker.ts
index 87d71f8edf8e49ebaf8d89aa7b2ce9025258edb5..07d93102826d1d39639dafea174de20a2291c535 100644
--- a/ide/src/trace/database/ConvertTraceWorker.ts
+++ b/ide/src/trace/database/ConvertTraceWorker.ts
@@ -63,7 +63,15 @@ self.onmessage = async (e: MessageEvent) => {
     let traceAllData = new Uint8Array(e.data.buffer);
     let isRawTraceConvert = isRawTrace(e.data);
     if (isRawTraceConvert) {
-      [totalSize, currentPosition, traceAllData] = handleRowTrace(e, fileData, dataHeader, traceInsPtr, currentPosition, traceAllData, totalSize);
+      [totalSize, currentPosition, traceAllData] = handleRowTrace(
+        e,
+        fileData,
+        dataHeader,
+        traceInsPtr,
+        currentPosition,
+        traceAllData,
+        totalSize
+      );
     } else {
       handleHTrace(fileData, dataHeader, traceInsPtr);
     }
@@ -79,7 +87,16 @@ self.onmessage = async (e: MessageEvent) => {
     };
     let bodyFn = convertModule.addFunction(callback, 'vii');
     convertModule._SetCallback(bodyFn, traceInsPtr);
-    convertData(currentPosition, traceAllData, arrayBufferPtr, dataPtr, traceInsPtr, isRawTraceConvert, stepSize, totalSize);
+    convertData(
+      currentPosition,
+      traceAllData,
+      arrayBufferPtr,
+      dataPtr,
+      traceInsPtr,
+      isRawTraceConvert,
+      stepSize,
+      totalSize
+    );
     convertModule._GetRemainingData(traceInsPtr);
     let headerData: string[] = [];
     let headerCallback = (heapPtr: number, size: number) => {
@@ -120,8 +137,8 @@ function handleRowTrace(
   currentPosition = 12;
   let allRowTraceData = new Uint8Array(e.data.buffer);
   let commonDataOffsetList: Array<{
-    startOffset: number
-    endOffset: number
+    startOffset: number;
+    endOffset: number;
   }> = [];
   let commonTotalLength = setCommonDataOffsetList(e, allRowTraceData, commonDataOffsetList);
   let commonTotalOffset = 0;
@@ -139,9 +156,13 @@ function handleRowTrace(
 }
 
 function isCommonData(dataType: number): boolean {
-  return dataType === CONTENT_TYPE_CMDLINES || dataType === CONTENT_TYPE_TGIDS ||
-    dataType === CONTENT_TYPE_HEADER_PAGE || dataType === CONTENT_TYPE_PRINTK_FORMATS ||
+  return (
+    dataType === CONTENT_TYPE_CMDLINES ||
+    dataType === CONTENT_TYPE_TGIDS ||
+    dataType === CONTENT_TYPE_HEADER_PAGE ||
+    dataType === CONTENT_TYPE_PRINTK_FORMATS ||
     dataType === CONTENT_TYPE_KALLSYMS
+  );
 }
 
 function setCommonDataOffsetList(
@@ -219,7 +240,7 @@ function postMessage(e: MessageEvent, allDataStr: Array<string>): void {
       id: e.data.id,
       action: 'convert',
       status: true,
-      results: new Blob(allDataStr, {type: 'text/plain'}),
+      results: new Blob(allDataStr, { type: 'text/plain' }),
       buffer: e.data.buffer,
     },
     // @ts-ignore
diff --git a/ide/src/trace/database/LongTraceDBUtils.ts b/ide/src/trace/database/LongTraceDBUtils.ts
index 3ecc7049c5295df9d826361f5f2e741e06ec3ea9..0975c9c4a7ea5e54c807c86753687e542f7b046f 100644
--- a/ide/src/trace/database/LongTraceDBUtils.ts
+++ b/ide/src/trace/database/LongTraceDBUtils.ts
@@ -47,7 +47,15 @@ export class LongTraceDBUtils {
     return this.indexedDBHelp.get(this.tableName, range, 'QueryFileByPage');
   }
 
-  addLongTableData(data: ArrayBuffer, fileType: string, timStamp: number, pageNumber: number, index: number, offset: number, sliceLen: number): Promise<any> {
+  addLongTableData(
+    data: ArrayBuffer,
+    fileType: string,
+    timStamp: number,
+    pageNumber: number,
+    index: number,
+    offset: number,
+    sliceLen: number
+  ): Promise<any> {
     return this.indexedDBHelp.add(this.tableName, {
       buf: data,
       id: `${fileType}_${timStamp}_${pageNumber}_${index}`,
@@ -57,6 +65,6 @@ export class LongTraceDBUtils {
       endOffset: offset + sliceLen,
       index: index,
       timStamp: timStamp,
-    })
+    });
   }
 }
diff --git a/ide/src/trace/database/StateBusyTimeWorker.ts b/ide/src/trace/database/StateBusyTimeWorker.ts
index e79e42f2fe32b630a119e91752abeb32ad4ff414..5190caf3005934203215a736a854b6aa0be04873 100644
--- a/ide/src/trace/database/StateBusyTimeWorker.ts
+++ b/ide/src/trace/database/StateBusyTimeWorker.ts
@@ -20,8 +20,12 @@ function getBusyTime(
   leftStartNs: number,
   rightEndNs: number
 ) {
-  if (initFreqResult.length == 0) { return };
-  if (initStateResult.length == 0) { return };
+  if (initFreqResult.length == 0) {
+    return;
+  }
+  if (initStateResult.length == 0) {
+    return;
+  }
   //处理被框选的freq的第一个数据
   let includeData = initFreqResult.findIndex((a) => a.ts >= leftStartNs);
   if (includeData !== 0) {
@@ -59,7 +63,12 @@ function getBusyTime(
   handleBusyTimeLogic(initFreqResult, initStateResult, sampleMap, startNS);
 }
 
-function handleBusyTimeLogic(initFreqResult: Array<any>, initStateResult: Array<any>, sampleMap: Map<any, any>, startNS: number) {
+function handleBusyTimeLogic(
+  initFreqResult: Array<any>,
+  initStateResult: Array<any>,
+  sampleMap: Map<any, any>,
+  startNS: number
+) {
   let freqIndex = 1;
   let stateIndex = 1;
   let beginNs = startNS;
diff --git a/ide/src/trace/database/TraceWorker.ts b/ide/src/trace/database/TraceWorker.ts
index a140f583cab04382b121641d1b42bdca9b7caa92..1e32c51b6dc030443ca094b93cd4b8170a97aba5 100644
--- a/ide/src/trace/database/TraceWorker.ts
+++ b/ide/src/trace/database/TraceWorker.ts
@@ -20,7 +20,7 @@ import { temp_init_sql_list } from './TempSql';
 // @ts-ignore
 import { BatchSphData } from '../proto/SphBaseData';
 
-let Module: any = null;
+let wasmModule: any = null;
 let enc = new TextEncoder();
 let dec = new TextDecoder();
 let arr: Uint8Array | undefined;
@@ -40,7 +40,6 @@ const CONTENT_TYPE_HEADER_PAGE = 30;
 const CONTENT_TYPE_PRINTK_FORMATS = 31;
 const CONTENT_TYPE_KALLSYMS = 32;
 
-
 let arkTsData: Array<Uint8Array> = [];
 let arkTsDataSize: number = 0;
 
@@ -52,9 +51,9 @@ const maxSize = 48 * 1024 * 1024;
 
 let protoDataMap: Map<QueryEnum, any> = new Map<QueryEnum, any>();
 function clear() {
-  if (Module != null) {
-    Module._TraceStreamerReset();
-    Module = null;
+  if (wasmModule != null) {
+    wasmModule._TraceStreamerReset();
+    wasmModule = null;
   }
   if (arr) {
     arr = undefined;
@@ -83,12 +82,16 @@ function initWASM() {
   return new Promise((resolve, reject) => {
     //@ts-ignore
     let wasm = trace_streamer_builtin_wasm;
-    Module = wasm({
+    wasmModule = wasm({
       locateFile: (s: any) => {
         return s;
       },
-      print: (line: any) => {},
-      printErr: (line: any) => {},
+      print: (line: any) => {
+        console.log(line);
+      },
+      printErr: (line: any) => {
+        console.error(line);
+      },
       onRuntimeInitialized: () => {
         resolve('ok');
       },
@@ -106,8 +109,12 @@ function initThirdWASM(wasmFunctionName: string) {
       locateFile: (s: any) => {
         return s;
       },
-      print: (line: any) => {},
-      printErr: (line: any) => {},
+      print: (line: any) => {
+        console.log(line);
+      },
+      printErr: (line: any) => {
+        console.error(line);
+      },
       onRuntimeInitialized: () => {},
       onAbort: () => {},
     });
@@ -251,7 +258,7 @@ async function onmessageByOpenAction(e: MessageEvent): Promise<void> {
   } else {
     r2 = parseNormalTraceByOpenAction(wrSize, r2, uint8Array);
   }
-  Module._TraceStreamerParseDataOver();
+  wasmModule._TraceStreamerParseDataOver();
   for (let value of thirdWasmMap.values()) {
     value.model._TraceStreamer_In_ParseDataOver();
   }
@@ -260,18 +267,18 @@ async function onmessageByOpenAction(e: MessageEvent): Promise<void> {
 
 function initModuleCallBackAndFun(): void {
   let callback = (heapPtr: number, size: number, isEnd: number) => {
-    let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+    let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
     bufferSlice.push(out);
     if (isEnd == 1) {
       arr = merged();
       bufferSlice.length = 0;
     }
   };
-  let fn = Module.addFunction(callback, 'viii');
-  reqBufferAddr = Module._Initialize(fn, REQ_BUF_SIZE);
+  let fn = wasmModule.addFunction(callback, 'viii');
+  reqBufferAddr = wasmModule._Initialize(fn, REQ_BUF_SIZE);
   let ffrtConvertCallback = (heapPtr: number, size: number, isEnd: number) => {
     if (isEnd !== 1) {
-      let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+      let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
       bufferSlice.push(out);
     } else {
       arr = merged();
@@ -281,23 +288,23 @@ function initModuleCallBackAndFun(): void {
     }
   };
   let tlvResultCallback = (heapPtr: number, size: number, type: number, isEnd: number) => {
-    let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+    let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
     protoDataMap.set(type, BatchSphData.decode(out).values);
   };
-  let fn1 = Module.addFunction(callback, 'viii');
-  let fn2 = Module.addFunction(ffrtConvertCallback, 'viii');
-  let tlvResultFun = Module.addFunction(tlvResultCallback, 'viiii');
-  Module._TraceStreamer_Set_Log_Level(5);
-  reqBufferAddr = Module._Initialize(REQ_BUF_SIZE, fn1, tlvResultFun, fn2);
+  let fn1 = wasmModule.addFunction(callback, 'viii');
+  let fn2 = wasmModule.addFunction(ffrtConvertCallback, 'viii');
+  let tlvResultFun = wasmModule.addFunction(tlvResultCallback, 'viiii');
+  wasmModule._TraceStreamer_Set_Log_Level(5);
+  reqBufferAddr = wasmModule._Initialize(REQ_BUF_SIZE, fn1, tlvResultFun, fn2);
 }
 
 function parseThirdWasmByOpenAction(e: MessageEvent): void {
   let parseConfig = e.data.parseConfig;
   if (parseConfig !== '') {
     let parseConfigArray = enc.encode(parseConfig);
-    let parseConfigAddr = Module._InitializeParseConfig(1024);
-    Module.HEAPU8.set(parseConfigArray, parseConfigAddr);
-    Module._TraceStreamerParserConfigEx(parseConfigArray.length);
+    let parseConfigAddr = wasmModule._InitializeParseConfig(1024);
+    wasmModule.HEAPU8.set(parseConfigArray, parseConfigAddr);
+    wasmModule._TraceStreamerParserConfigEx(parseConfigArray.length);
   }
   let wasmConfigStr = e.data.wasmConfig;
   if (wasmConfigStr != '' && wasmConfigStr.indexOf('WasmFiles') != -1) {
@@ -308,14 +315,14 @@ function parseThirdWasmByOpenAction(e: MessageEvent): void {
     });
     let thirdWasmStr: string = itemArray.join(';');
     let configUintArray = enc.encode(thirdWasmStr + ';');
-    Module.HEAPU8.set(configUintArray, reqBufferAddr);
-    Module._TraceStreamer_Init_ThirdParty_Config(configUintArray.length);
+    wasmModule.HEAPU8.set(configUintArray, reqBufferAddr);
+    wasmModule._TraceStreamer_Init_ThirdParty_Config(configUintArray.length);
     let first = true;
     let sendDataCallback = (heapPtr: number, size: number, componentID: number) => {
       if (componentID === 100) {
         if (first) {
           first = false;
-          headUnitArray = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+          headUnitArray = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
         }
         return;
       }
@@ -330,31 +337,35 @@ function parseThirdWasmByOpenAction(e: MessageEvent): void {
           setThirdWasmMap(config, heapPtr, size, componentID);
         } else {
           let mm = model.model;
-          let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+          let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
           mm.HEAPU8.set(out, model.bufferAddr);
           mm._ParserData(out.length, componentID);
         }
       }
     };
-    let fn1 = Module.addFunction(sendDataCallback, 'viii');
-    let reqBufferAddr1 = Module._TraceStreamer_Set_ThirdParty_DataDealer(fn1, REQ_BUF_SIZE);
+    let fn1 = wasmModule.addFunction(sendDataCallback, 'viii');
+    let reqBufferAddr1 = wasmModule._TraceStreamer_Set_ThirdParty_DataDealer(fn1, REQ_BUF_SIZE);
   }
 }
 
 function isCommonData(dataType: number): boolean {
-  return dataType === CONTENT_TYPE_CMDLINES || dataType === CONTENT_TYPE_TGIDS ||
-    dataType === CONTENT_TYPE_HEADER_PAGE || dataType === CONTENT_TYPE_PRINTK_FORMATS ||
+  return (
+    dataType === CONTENT_TYPE_CMDLINES ||
+    dataType === CONTENT_TYPE_TGIDS ||
+    dataType === CONTENT_TYPE_HEADER_PAGE ||
+    dataType === CONTENT_TYPE_PRINTK_FORMATS ||
     dataType === CONTENT_TYPE_KALLSYMS
+  );
 }
 
 function parseRawTraceByOpenAction(e: MessageEvent, wrSize: number, r2: number, uint8Array: Uint8Array): number {
-  let commonDataOffsetList: Array<{ startOffset: number; endOffset: number}> = []; // common Data
+  let commonDataOffsetList: Array<{ startOffset: number; endOffset: number }> = []; // common Data
   let offset = 12;
   let tlvTypeLength = 4;
   let headArray = uint8Array.slice(0, offset);
   let commonTotalLength = 0;
   while (offset < uint8Array.length) {
-    let commonDataOffset = {startOffset: offset, endOffset: offset};
+    let commonDataOffset = { startOffset: offset, endOffset: offset };
     let dataTypeData = e.data.buffer.slice(offset, offset + tlvTypeLength);
     offset += tlvTypeLength;
     let dataType = Array.from(new Uint32Array(dataTypeData));
@@ -384,9 +395,9 @@ function parseRawTraceByOpenAction(e: MessageEvent, wrSize: number, r2: number,
   while (wrSize < final.length) {
     const sliceLen = Math.min(final.length - wrSize, REQ_BUF_SIZE);
     const dataSlice = final.subarray(wrSize, wrSize + sliceLen);
-    Module.HEAPU8.set(dataSlice, reqBufferAddr);
+    wasmModule.HEAPU8.set(dataSlice, reqBufferAddr);
     wrSize += sliceLen;
-    r2 = Module._TraceStreamerParseDataEx(sliceLen, wrSize === final.length ? 1 : 0);
+    r2 = wasmModule._TraceStreamerParseDataEx(sliceLen, wrSize === final.length ? 1 : 0);
     if (r2 === -1) {
       break;
     }
@@ -398,9 +409,9 @@ function parseNormalTraceByOpenAction(wrSize: number, r2: number, uint8Array: Ui
   while (wrSize < uint8Array.length) {
     const sliceLen = Math.min(uint8Array.length - wrSize, REQ_BUF_SIZE);
     const dataSlice = uint8Array.subarray(wrSize, wrSize + sliceLen);
-    Module.HEAPU8.set(dataSlice, reqBufferAddr);
+    wasmModule.HEAPU8.set(dataSlice, reqBufferAddr);
     wrSize += sliceLen;
-    r2 = Module._TraceStreamerParseDataEx(sliceLen, wrSize === uint8Array.length ? 1 : 0);
+    r2 = wasmModule._TraceStreamerParseDataEx(sliceLen, wrSize === uint8Array.length ? 1 : 0);
     if (r2 == -1) {
       break;
     }
@@ -438,7 +449,7 @@ function setThirdWasmMap(config: any, heapPtr: number, size: number, componentID
   thirdMode._TraceStreamer_In_JsonConfig();
   thirdMode.HEAPU8.set(headUnitArray, thirdreqBufferAddr);
   thirdMode._ParserData(headUnitArray!.length, 100);
-  let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+  let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
   thirdMode.HEAPU8.set(out, thirdreqBufferAddr);
   thirdMode._ParserData(out.length, componentID);
   thirdWasmMap.set(componentID, {
@@ -481,8 +492,8 @@ function postMessageByOpenAction(r2: number, e: MessageEvent): void {
 function initTraceRange(thirdMode: any): any {
   let updateTraceTimeCallBack = (heapPtr: number, size: number) => {
     let out: Uint8Array = thirdMode.HEAPU8.slice(heapPtr, heapPtr + size);
-    Module.HEAPU8.set(out, reqBufferAddr);
-    Module._UpdateTraceTime(out.length);
+    wasmModule.HEAPU8.set(out, reqBufferAddr);
+    wasmModule._UpdateTraceTime(out.length);
   };
   let traceRangeFn = thirdMode.addFunction(updateTraceTimeCallBack, 'vii');
   let mm = thirdMode._InitTraceRange(traceRangeFn, 1024);
@@ -505,16 +516,16 @@ function onmessageByExecProtoAction(e: MessageEvent): void {
   execProtoForWorker(e.data, (sql: string) => {
     let sqlUintArray = enc.encode(sql);
     if (e.data.params.trafic !== TraficEnum.ProtoBuffer) {
-      Module.HEAPU8.set(sqlUintArray, reqBufferAddr);
-      Module._TraceStreamerSqlQueryEx(sqlUintArray.length);
+      wasmModule.HEAPU8.set(sqlUintArray, reqBufferAddr);
+      wasmModule._TraceStreamerSqlQueryEx(sqlUintArray.length);
       let jsonArray = convertJSON();
       return jsonArray;
     } else {
       let allArray = new Uint8Array(typeLength + sqlUintArray.length);
       allArray[0] = e.data.name;
       allArray.set(sqlUintArray, typeLength);
-      Module.HEAPU8.set(allArray, reqBufferAddr);
-      Module._TraceStreamerSqlQueryToProtoCallback(allArray.length);
+      wasmModule.HEAPU8.set(allArray, reqBufferAddr);
+      wasmModule._TraceStreamerSqlQueryToProtoCallback(allArray.length);
       let finalArrayBuffer = [];
       if (protoDataMap.has(e.data.name)) {
         finalArrayBuffer = protoDataMap.get(e.data.name);
@@ -585,7 +596,7 @@ function onmessageByDownloadDBAction(e: MessageEvent): void {
     return mergedArray;
   };
   let getDownloadDb = (heapPtr: number, size: number, isEnd: number) => {
-    let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+    let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
     bufferSliceUint.push(out);
     if (isEnd == 1) {
       let arr: Uint8Array = mergedUint();
@@ -596,18 +607,20 @@ function onmessageByDownloadDBAction(e: MessageEvent): void {
       });
     }
   };
-  let fn1 = Module.addFunction(getDownloadDb, 'viii');
-  Module._WasmExportDatabase(fn1);
+  let fn1 = wasmModule.addFunction(getDownloadDb, 'viii');
+  wasmModule._WasmExportDatabase(fn1);
 }
 
 function onmessageByUploadSoAction(e: MessageEvent): void {
   uploadSoActionId = e.data.id;
-  let fileList = e.data.params as Array<File>;
+  const fileList = e.data.params as Array<File>;
+  failedArray.length = 0;
   if (fileList) {
+    fileList.sort((a, b) => b.size - a.size);
     soFileList = fileList;
     uploadFileIndex = 0;
     if (!uploadSoCallbackFn) {
-      uploadSoCallbackFn = Module.addFunction(uploadSoCallBack, 'viii');
+      uploadSoCallbackFn = wasmModule.addFunction(uploadSoCallBack, 'viii');
     }
     uploadSoFile(soFileList[uploadFileIndex]).then();
   }
@@ -620,7 +633,7 @@ async function saveDataToIndexDB(
   timStamp: number,
   pageNum: number,
   saveIndex: number,
-  saveStartOffset: number,
+  saveStartOffset: number
 ): Promise<void> {
   let freeArray = currentChunk.slice(0, currentChunkOffset);
   await addDataToIndexeddb(indexDB, {
@@ -641,10 +654,16 @@ function cutLongTraceCallBackHandle(
   heapPtr: number,
   size: number,
   dataType: number,
-  newCutFilePageInfo: Map<string, { traceFileType: string; dataArray: [{ data: Uint8Array | Array<{ offset: number; size: number }>; dataTypes: string }] }>
+  newCutFilePageInfo: Map<
+    string,
+    {
+      traceFileType: string;
+      dataArray: [{ data: Uint8Array | Array<{ offset: number; size: number }>; dataTypes: string }];
+    }
+  >
 ) {
   let key = `${traceFileType}_${currentPageNum}`;
-  let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+  let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
   if (DataTypeEnum.data === dataType) {
     if (traceFileType === 'arkts') {
       arkTsData.push(out);
@@ -652,11 +671,11 @@ function cutLongTraceCallBackHandle(
     } else {
       if (newCutFilePageInfo.has(key)) {
         let newVar = newCutFilePageInfo.get(key);
-        newVar?.dataArray.push({data: out, dataTypes: 'data'});
+        newVar?.dataArray.push({ data: out, dataTypes: 'data' });
       } else {
         newCutFilePageInfo.set(key, {
           traceFileType: traceFileType,
-          dataArray: [{data: out, dataTypes: 'data'}],
+          dataArray: [{ data: out, dataTypes: 'data' }],
         });
       }
     }
@@ -666,15 +685,18 @@ function cutLongTraceCallBackHandle(
       let jsonStr: string = dec.decode(out);
       let jsonObj = JSON.parse(jsonStr);
       let valueArray: Array<{ offset: number; size: number }> = jsonObj.value;
-      cutFilePageInfo.dataArray.push({data: valueArray, dataTypes: 'json'});
+      cutFilePageInfo.dataArray.push({ data: valueArray, dataTypes: 'json' });
     }
   }
 }
 
-function initSplitLongTraceModuleAndFun(headArray: Uint8Array, cutFileCallBack: (heapPtr: number, size: number, dataType: number, isEnd: number) => void): number {
-  splitReqBufferAddr = Module._InitializeSplitFile(Module.addFunction(cutFileCallBack, 'viiii'), REQ_BUF_SIZE);
-  Module.HEAPU8.set(headArray, splitReqBufferAddr);
-  Module._TraceStreamerGetLongTraceTimeSnapEx(headArray.length);
+function initSplitLongTraceModuleAndFun(
+  headArray: Uint8Array,
+  cutFileCallBack: (heapPtr: number, size: number, dataType: number, isEnd: number) => void
+): number {
+  splitReqBufferAddr = wasmModule._InitializeSplitFile(wasmModule.addFunction(cutFileCallBack, 'viiii'), REQ_BUF_SIZE);
+  wasmModule.HEAPU8.set(headArray, splitReqBufferAddr);
+  wasmModule._TraceStreamerGetLongTraceTimeSnapEx(headArray.length);
   return splitReqBufferAddr;
 }
 
@@ -717,10 +739,24 @@ async function handleDataTypeBySplitLongTrace(
   return [currentChunkOffset, saveIndex, saveStartOffset, currentChunk];
 }
 
-async function saveAllDataByLongTrace(range: IDBKeyRange, nowCutInfoList: Array<any>,
-  searchDataInfo: { fileType: string; index: number; pageNum: number; startOffsetSize: number; endOffsetSize: number }[],
-  currentChunkOffset: number, currentChunk: Uint8Array, fileType: string, timStamp: number, pageNum: number,
-   saveIndex: number, saveStartOffset: number): Promise<[number, number, number, Uint8Array]> {
+async function saveAllDataByLongTrace(
+  range: IDBKeyRange,
+  nowCutInfoList: Array<any>,
+  searchDataInfo: {
+    fileType: string;
+    index: number;
+    pageNum: number;
+    startOffsetSize: number;
+    endOffsetSize: number;
+  }[],
+  currentChunkOffset: number,
+  currentChunk: Uint8Array,
+  fileType: string,
+  timStamp: number,
+  pageNum: number,
+  saveIndex: number,
+  saveStartOffset: number
+): Promise<[number, number, number, Uint8Array]> {
   let transaction = indexDB.transaction(STORE_NAME, 'readonly');
   let store = transaction.objectStore(STORE_NAME);
   let index = store.index('QueryCompleteFile');
@@ -751,9 +787,16 @@ async function saveAllDataByLongTrace(range: IDBKeyRange, nowCutInfoList: Array<
           currentChunk.set(saveArray, currentChunkOffset);
           currentChunkOffset += saveArray.length;
         } else {
-          await addDataToIndexeddb(indexDB, { buf: saveArray, id: `${fileType}_new_${timStamp}_${pageNum}_${saveIndex}`,
-            fileType: `${fileType}_new`, pageNum: pageNum, startOffset: saveStartOffset,
-            endOffset: saveStartOffset + maxSize, index: saveIndex, timStamp: timStamp});
+          await addDataToIndexeddb(indexDB, {
+            buf: saveArray,
+            id: `${fileType}_new_${timStamp}_${pageNum}_${saveIndex}`,
+            fileType: `${fileType}_new`,
+            pageNum: pageNum,
+            startOffset: saveStartOffset,
+            endOffset: saveStartOffset + maxSize,
+            index: saveIndex,
+            timStamp: timStamp,
+          });
           saveStartOffset += maxSize;
           saveIndex++;
         }
@@ -768,7 +811,13 @@ async function saveAllDataByLongTrace(range: IDBKeyRange, nowCutInfoList: Array<
 
 async function handleJsonTypeBySplitLongTrace(
   receiveData: { data: Uint8Array | Array<{ offset: number; size: number }>; dataTypes: string },
-  allIndexDataList: Array<{ fileType: string; index: number; pageNum: number; startOffsetSize: number; endOffsetSize: number }>,
+  allIndexDataList: Array<{
+    fileType: string;
+    index: number;
+    pageNum: number;
+    startOffsetSize: number;
+    endOffsetSize: number;
+  }>,
   fileType: string,
   timStamp: number,
   currentChunkOffset: number,
@@ -793,16 +842,40 @@ async function handleJsonTypeBySplitLongTrace(
       let nowStartCutOffset = nowCutInfoList[0].offset;
       let nowEndCutOffset = cutInfo.offset + cutInfo.size;
       let searchDataInfo = allIndexDataList.filter(
-        (value: { fileType: string; index: number; pageNum: number; startOffsetSize: number; endOffsetSize: number;}) => {
-          return ( value.fileType === fileType && value.startOffsetSize <= nowEndCutOffset &&
-            value.endOffsetSize >= nowStartCutOffset);});
+        (value: {
+          fileType: string;
+          index: number;
+          pageNum: number;
+          startOffsetSize: number;
+          endOffsetSize: number;
+        }) => {
+          return (
+            value.fileType === fileType &&
+            value.startOffsetSize <= nowEndCutOffset &&
+            value.endOffsetSize >= nowStartCutOffset
+          );
+        }
+      );
       let startIndex = searchDataInfo[0].index;
       let endIndex = searchDataInfo[searchDataInfo.length - 1].index;
-      let range = IDBKeyRange.bound([timStamp, fileType, 0, startIndex],
-        [timStamp, fileType, 0, endIndex],false,false);
-      [currentChunkOffset, saveIndex, saveStartOffset, currentChunk] =
-        await saveAllDataByLongTrace(range, nowCutInfoList, searchDataInfo, currentChunkOffset, currentChunk, fileType,
-          timStamp, pageNum, saveIndex, saveStartOffset);
+      let range = IDBKeyRange.bound(
+        [timStamp, fileType, 0, startIndex],
+        [timStamp, fileType, 0, endIndex],
+        false,
+        false
+      );
+      [currentChunkOffset, saveIndex, saveStartOffset, currentChunk] = await saveAllDataByLongTrace(
+        range,
+        nowCutInfoList,
+        searchDataInfo,
+        currentChunkOffset,
+        currentChunk,
+        fileType,
+        timStamp,
+        pageNum,
+        saveIndex,
+        saveStartOffset
+      );
       isBeforeCutFinish = true;
     } else {
       nowCutInfoList.push(cutInfo);
@@ -812,18 +885,26 @@ async function handleJsonTypeBySplitLongTrace(
 }
 
 async function handleAllTypeDataByLongTrace(
-  newCutFilePageInfo: Map<string, {
-    traceFileType: string;
-    dataArray: [{
-      data: Uint8Array | Array<{ offset: number; size: number }>;
-      dataTypes: string }] }>,
+  newCutFilePageInfo: Map<
+    string,
+    {
+      traceFileType: string;
+      dataArray: [
+        {
+          data: Uint8Array | Array<{ offset: number; size: number }>;
+          dataTypes: string;
+        }
+      ];
+    }
+  >,
   timStamp: number,
   allIndexDataList: Array<{
     fileType: string;
     index: number;
     pageNum: number;
     startOffsetSize: number;
-    endOffsetSize: number}>
+    endOffsetSize: number;
+  }>
 ): Promise<void> {
   for (const [fileTypePageNum, fileMessage] of newCutFilePageInfo) {
     let fileTypePageNumArr = fileTypePageNum.split('_');
@@ -837,19 +918,42 @@ async function handleAllTypeDataByLongTrace(
     for (let fileDataIndex = 0; fileDataIndex < dataArray.length; fileDataIndex++) {
       let receiveData = dataArray[fileDataIndex];
       if (receiveData.dataTypes === 'data') {
-        [currentChunkOffset, saveIndex, saveStartOffset, currentChunk] =
-          await handleDataTypeBySplitLongTrace(receiveData, currentChunkOffset, currentChunk, fileType,
-            timStamp, pageNum, saveIndex, saveStartOffset);
+        [currentChunkOffset, saveIndex, saveStartOffset, currentChunk] = await handleDataTypeBySplitLongTrace(
+          receiveData,
+          currentChunkOffset,
+          currentChunk,
+          fileType,
+          timStamp,
+          pageNum,
+          saveIndex,
+          saveStartOffset
+        );
       } else {
         if (receiveData.data.length > 0) {
-          [currentChunkOffset, saveIndex, saveStartOffset, currentChunk] =
-            await handleJsonTypeBySplitLongTrace(receiveData, allIndexDataList, fileType, timStamp,
-              currentChunkOffset, currentChunk, pageNum, saveIndex, saveStartOffset);
+          [currentChunkOffset, saveIndex, saveStartOffset, currentChunk] = await handleJsonTypeBySplitLongTrace(
+            receiveData,
+            allIndexDataList,
+            fileType,
+            timStamp,
+            currentChunkOffset,
+            currentChunk,
+            pageNum,
+            saveIndex,
+            saveStartOffset
+          );
         }
       }
     }
     if (currentChunkOffset !== 0) {
-      await saveDataToIndexDB(currentChunk, currentChunkOffset, fileType, timStamp, pageNum, saveIndex, saveStartOffset);
+      await saveDataToIndexDB(
+        currentChunk,
+        currentChunkOffset,
+        fileType,
+        timStamp,
+        pageNum,
+        saveIndex,
+        saveStartOffset
+      );
       saveStartOffset += maxSize;
       saveIndex++;
     }
@@ -863,7 +967,11 @@ async function onmessageByLongTraceAction(e: MessageEvent): Promise<void> {
   let timStamp = e.data.params.timeStamp;
   let allIndexDataList = e.data.params.splitDataList;
   let splitFileInfos = e.data.params.splitFileInfo as Array<{
-    fileType: string; startIndex: number; endIndex: number; size: number}>;
+    fileType: string;
+    startIndex: number;
+    endIndex: number;
+    size: number;
+  }>;
   let maxPageNum = headArray.length / 1024;
   let currentPageNum = 0;
   let splitReqBufferAddr: number;
@@ -872,8 +980,13 @@ async function onmessageByLongTraceAction(e: MessageEvent): Promise<void> {
     if (splitFileInfo && splitFileInfo.length > 0) {
       let traceFileType: string = '';
       indexDB = await openDB();
-      let newCutFilePageInfo: Map<string, { traceFileType: string;
-        dataArray: [{ data: Uint8Array | Array<{ offset: number; size: number }>; dataTypes: string }]}> = new Map();
+      let newCutFilePageInfo: Map<
+        string,
+        {
+          traceFileType: string;
+          dataArray: [{ data: Uint8Array | Array<{ offset: number; size: number }>; dataTypes: string }];
+        }
+      > = new Map();
       let cutFileCallBack = (heapPtr: number, size: number, dataType: number, isEnd: number) => {
         cutLongTraceCallBackHandle(traceFileType, currentPageNum, heapPtr, size, dataType, newCutFilePageInfo);
       };
@@ -989,7 +1102,12 @@ async function splitFileAndSaveArkTs(
   }
 }
 
-const splitFileAndSave = async (timStamp: number, fileInfo: any, pageNum: number, splitReqBufferAddr?: any): Promise<void> => {
+const splitFileAndSave = async (
+  timStamp: number,
+  fileInfo: any,
+  pageNum: number,
+  splitReqBufferAddr?: any
+): Promise<void> => {
   let fileType = fileInfo.fileType;
   let fileSize = fileInfo.size;
   let startIndex = fileInfo.startIndex;
@@ -1014,9 +1132,24 @@ const splitFileAndSave = async (timStamp: number, fileInfo: any, pageNum: number
       let uint8Array = new Uint8Array(arrayBuffer.buf);
       let cutFileSize = 0;
       while (cutFileSize < uint8Array.length) {
-        [cutFileSize, resultFileSize] = execLongTraceSplitFileByModule(pageNum, fileSize, resultFileSize, cutFileSize, uint8Array, splitReqBufferAddr);
+        [cutFileSize, resultFileSize] = execLongTraceSplitFileByModule(
+          pageNum,
+          fileSize,
+          resultFileSize,
+          cutFileSize,
+          uint8Array,
+          splitReqBufferAddr
+        );
         if (arkTsDataSize > 0 && fileType === 'arkts') {
-          splitFileAndSaveArkTs(currentChunkOffset, currentChunk, fileType, pageNum, saveStartOffset, saveIndex, timStamp);
+          splitFileAndSaveArkTs(
+            currentChunkOffset,
+            currentChunk,
+            fileType,
+            pageNum,
+            saveStartOffset,
+            saveIndex,
+            timStamp
+          );
         }
       }
     }
@@ -1037,7 +1170,7 @@ async function getIndexedDBQueryData(db: IDBDatabase, range: IDBKeyRange): Promi
   const store = transaction.objectStore(STORE_NAME);
   const index = store.index('QueryCompleteFile');
   const getRequest = index.openCursor(range);
-  return await queryDataFromIndexeddb(getRequest)
+  return await queryDataFromIndexeddb(getRequest);
 }
 
 function execLongTraceSplitFileByModule(
@@ -1050,13 +1183,13 @@ function execLongTraceSplitFileByModule(
 ): [number, number] {
   const sliceLen = Math.min(uint8Array.length - cutFileSize, REQ_BUF_SIZE);
   const dataSlice = uint8Array.subarray(cutFileSize, cutFileSize + sliceLen);
-  Module.HEAPU8.set(dataSlice, splitReqBufferAddr);
+  wasmModule.HEAPU8.set(dataSlice, splitReqBufferAddr);
   cutFileSize += sliceLen;
   resultFileSize += sliceLen;
   if (resultFileSize >= fileSize) {
-    Module._TraceStreamerLongTraceSplitFileEx(sliceLen, 1, pageNum);
+    wasmModule._TraceStreamerLongTraceSplitFileEx(sliceLen, 1, pageNum);
   } else {
-    Module._TraceStreamerLongTraceSplitFileEx(sliceLen, 0, pageNum);
+    wasmModule._TraceStreamerLongTraceSplitFileEx(sliceLen, 0, pageNum);
   }
   return [cutFileSize, resultFileSize];
 }
@@ -1098,12 +1231,13 @@ let uploadSoActionId: string = '';
 let uploadFileIndex: number = 0;
 let uploadSoCallbackFn: any;
 let soFileList: Array<File | null> = [];
+const failedArray: Array<string> = [];
 const uploadSoFile = async (file: File | null): Promise<void> => {
   if (file) {
     let fileNameBuffer: Uint8Array | null = enc.encode(file.webkitRelativePath);
     let fileNameLength = fileNameBuffer.length;
-    let addr = Module._InitFileName(uploadSoCallbackFn, fileNameBuffer.length);
-    Module.HEAPU8.set(fileNameBuffer, addr);
+    let addr = wasmModule._InitFileName(uploadSoCallbackFn, fileNameBuffer.length);
+    wasmModule.HEAPU8.set(fileNameBuffer, addr);
     let writeSize = 0;
     let upRes = -1;
     while (writeSize < file.size) {
@@ -1112,10 +1246,9 @@ const uploadSoFile = async (file: File | null): Promise<void> => {
       let buffer: ArrayBuffer | null = await blob.arrayBuffer();
       let data: Uint8Array | null = new Uint8Array(buffer);
       let size = file.size;
-      let lastFile = uploadFileIndex === soFileList.length - 1 ? 1 : 0;
-      Module.HEAPU8.set(data, reqBufferAddr);
+      wasmModule.HEAPU8.set(data, reqBufferAddr);
       writeSize += sliceLen;
-      upRes = Module._TraceStreamerDownloadELFEx(size, fileNameLength, sliceLen, lastFile);
+      upRes = wasmModule._TraceStreamerDownloadELFEx(size, fileNameLength, sliceLen, 1);
       data = null;
       buffer = null;
       blob = null;
@@ -1127,21 +1260,26 @@ const uploadSoFile = async (file: File | null): Promise<void> => {
 };
 
 const uploadSoCallBack = (heapPtr: number, size: number, isFinish: number): void => {
-  let out: Uint8Array | null = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+  let out: Uint8Array | null = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
   if (out) {
     let res = dec.decode(out);
     out = null;
-    if (res.includes('file send over')) {
+    if (res.includes('ok') || res.includes('failed')) {
+      if (res.includes('failed')) {
+        failedArray.push(soFileList[uploadFileIndex]!.name);
+      }
       if (uploadFileIndex < soFileList.length - 1) {
-        uploadFileIndex = uploadFileIndex + 1;
-        uploadSoFile(soFileList[uploadFileIndex]).then();
+        uploadSoFile(soFileList[uploadFileIndex + 1]).then();
       }
-    } else {
+      uploadFileIndex++;
+    }
+    if (uploadFileIndex === soFileList.length) {
       soFileList.length = 0;
+      const result = failedArray.length === 0 ? 'ok' : 'failed';
       self.postMessage({
         id: uploadSoActionId,
         action: 'upload-so',
-        results: res.includes('ok') ? 'ok' : 'failed',
+        results: { result: result, failedArray: failedArray },
       });
     }
   }
@@ -1167,7 +1305,7 @@ function cutFileBufferByOffSet(out: Uint8Array, uint8Array: Uint8Array): Uint8Ar
   if (isRawTrace(uint8Array)) {
     let commDataSize = 0;
     let otherDataSize = 0;
-    valueArray.forEach(item => {
+    valueArray.forEach((item) => {
       const type = item.type;
       if (type === 0) {
         commDataSize += item.size;
@@ -1217,23 +1355,23 @@ function cutFileByRange(e: MessageEvent): void {
   let uint8Array = new Uint8Array(e.data.buffer);
   let resultBuffer: Array<any> = [];
   let cutFileCallBack = cutFileCallBackFunc(resultBuffer, uint8Array, e);
-  splitReqBufferAddr = Module._InitializeSplitFile(Module.addFunction(cutFileCallBack, 'viiii'), REQ_BUF_SIZE);
+  splitReqBufferAddr = wasmModule._InitializeSplitFile(wasmModule.addFunction(cutFileCallBack, 'viiii'), REQ_BUF_SIZE);
   let cutTimeRange = `${cutLeftTs};${cutRightTs};`;
   let cutTimeRangeBuffer = enc.encode(cutTimeRange);
-  Module.HEAPU8.set(cutTimeRangeBuffer, splitReqBufferAddr);
-  Module._TraceStreamerSplitFileEx(cutTimeRangeBuffer.length);
+  wasmModule.HEAPU8.set(cutTimeRangeBuffer, splitReqBufferAddr);
+  wasmModule._TraceStreamerSplitFileEx(cutTimeRangeBuffer.length);
   let cutFileSize = 0;
   let receiveFileResult = -1;
   while (cutFileSize < uint8Array.length) {
     const sliceLen = Math.min(uint8Array.length - cutFileSize, REQ_BUF_SIZE);
     const dataSlice = uint8Array.subarray(cutFileSize, cutFileSize + sliceLen);
-    Module.HEAPU8.set(dataSlice, splitReqBufferAddr);
+    wasmModule.HEAPU8.set(dataSlice, splitReqBufferAddr);
     cutFileSize += sliceLen;
     try {
       if (cutFileSize >= uint8Array.length) {
-        receiveFileResult = Module._TraceStreamerReciveFileEx(sliceLen, 1);
+        receiveFileResult = wasmModule._TraceStreamerReciveFileEx(sliceLen, 1);
       } else {
-        receiveFileResult = Module._TraceStreamerReciveFileEx(sliceLen, 0);
+        receiveFileResult = wasmModule._TraceStreamerReciveFileEx(sliceLen, 0);
       }
     } catch (error) {
       self.postMessage(
@@ -1252,7 +1390,7 @@ function cutFileByRange(e: MessageEvent): void {
 }
 function cutFileCallBackFunc(resultBuffer: Array<any>, uint8Array: Uint8Array, e: MessageEvent): Function {
   return (heapPtr: number, size: number, fileType: number, isEnd: number) => {
-    let out: Uint8Array = Module.HEAPU8.slice(heapPtr, heapPtr + size);
+    let out: Uint8Array = wasmModule.HEAPU8.slice(heapPtr, heapPtr + size);
     if (FileTypeEnum.data === fileType) {
       resultBuffer.push(out);
     } else if (FileTypeEnum.json === fileType) {
@@ -1286,8 +1424,8 @@ function cutFileCallBackFunc(resultBuffer: Array<any>, uint8Array: Uint8Array, e
 
 function createView(sql: string) {
   let array = enc.encode(sql);
-  Module.HEAPU8.set(array, reqBufferAddr);
-  let res = Module._TraceStreamerSqlOperateEx(array.length);
+  wasmModule.HEAPU8.set(array, reqBufferAddr);
+  let res = wasmModule._TraceStreamerSqlOperateEx(array.length);
   return res;
 }
 
@@ -1308,8 +1446,8 @@ function query(name: string, sql: string, params: any): void {
   }
   start = new Date().getTime();
   let sqlUintArray = enc.encode(sql);
-  Module.HEAPU8.set(sqlUintArray, reqBufferAddr);
-  Module._TraceStreamerSqlQueryEx(sqlUintArray.length);
+  wasmModule.HEAPU8.set(sqlUintArray, reqBufferAddr);
+  wasmModule._TraceStreamerSqlQueryEx(sqlUintArray.length);
 }
 
 function querySdk(name: string, sql: string, sdkParams: any, action: string): void {
@@ -1336,8 +1474,8 @@ function querySdk(name: string, sql: string, sdkParams: any, action: string): vo
 function queryMetric(name: string): void {
   start = new Date().getTime();
   let metricArray = enc.encode(name);
-  Module.HEAPU8.set(metricArray, reqBufferAddr);
-  Module._TraceStreamerSqlMetricsQuery(metricArray.length);
+  wasmModule.HEAPU8.set(metricArray, reqBufferAddr);
+  wasmModule._TraceStreamerSqlMetricsQuery(metricArray.length);
 }
 
 const DB_NAME = 'sp';
diff --git a/ide/src/trace/database/data-trafic/ArkTsReceiver.ts b/ide/src/trace/database/data-trafic/ArkTsReceiver.ts
index e388c83318feadbf5a212ff902740674acd7d1d9..321d85e0dd0bb48536cd3ca208d6d4f7c427da09 100644
--- a/ide/src/trace/database/data-trafic/ArkTsReceiver.ts
+++ b/ide/src/trace/database/data-trafic/ArkTsReceiver.ts
@@ -464,7 +464,7 @@ function filterDataByStartTime(startNS: number, endNS: number, totalNS: number,
   }, groups);
 }
 function setDataSource(dataSource: any, groups: any): void {
-  Reflect.ownKeys(groups).map(kv => {
+  Reflect.ownKeys(groups).map((kv) => {
     let index = groups[kv as string];
     dataSource.column.push(jsDataCache.column[index]);
     dataSource.depth.push(jsDataCache.depth[index]);
diff --git a/ide/src/trace/database/data-trafic/ClockDataReceiver.ts b/ide/src/trace/database/data-trafic/ClockDataReceiver.ts
index 286a62d93d9e2189dc507d1eb6079bca0f369aa2..071c94575766baf943cbf683f9f3b21f5ef51701 100644
--- a/ide/src/trace/database/data-trafic/ClockDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/ClockDataReceiver.ts
@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import { TraficEnum } from './utils/QueryEnum';
-import { filterDataByGroup } from "./utils/DataFilter";
-import {clockList} from "./utils/AllMemoryCache";
+import { filterDataByGroup } from './utils/DataFilter';
+import { clockList } from './utils/AllMemoryCache';
 
 export const chartClockDataSql = (args: any): string => {
   if (args.sqlType === 'clockFrequency') {
@@ -101,15 +101,25 @@ export function clockDataReceiver(data: any, proc: Function): void {
     }
     if (data.params.queryAll) {
       //框选时候取数据，只需要根据时间过滤数据
-      res = (list || []).filter(it => it.startNs + it.dur >= data.params.selectStartNS && it.startNs <= data.params.selectEndNS);
+      res = (list || []).filter(
+        (it) => it.startNs + it.dur >= data.params.selectStartNS && it.startNs <= data.params.selectEndNS
+      );
     } else {
-      res = filterDataByGroup(list || [], 'startNs', 'dur', data.params.startNS, data.params.endNS, data.params.width, "value");
+      res = filterDataByGroup(
+        list || [],
+        'startNs',
+        'dur',
+        data.params.startNS,
+        data.params.endNS,
+        data.params.width,
+        'value'
+      );
     }
-    arrayBufferHandler(data, res,true);
+    arrayBufferHandler(data, res, true);
   } else {
     let sql = chartClockDataSql(data.params);
     let res = proc(sql);
-    arrayBufferHandler(data, res,data.params.trafic !== TraficEnum.SharedArrayBuffer);
+    arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer);
   }
 }
 
diff --git a/ide/src/trace/database/data-trafic/ClockDataSender.ts b/ide/src/trace/database/data-trafic/ClockDataSender.ts
index 81eb0763ef25cb66f42a2c7e0be2d25be87fa171..dd1313cb3dc1ba764949d630ff4b04c51ab31294 100644
--- a/ide/src/trace/database/data-trafic/ClockDataSender.ts
+++ b/ide/src/trace/database/data-trafic/ClockDataSender.ts
@@ -24,7 +24,7 @@ export function clockDataSender(
 ): Promise<ClockStruct[]> {
   let trafic: number = TraficEnum.Memory;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
-  if ((trafic === TraficEnum.SharedArrayBuffer) && !row.sharedArrayBuffers) {
+  if (trafic === TraficEnum.SharedArrayBuffer && !row.sharedArrayBuffers) {
     row.sharedArrayBuffers = {
       filterId: new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * MAX_COUNT),
       value: new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * MAX_COUNT),
@@ -38,15 +38,15 @@ export function clockDataSender(
       {
         clockName: clockName,
         sqlType: sqlType,
-        startNS: (TraceRow.range?.startNS || 0),
-        endNS: (TraceRow.range?.endNS || 0),
-        totalNS: (TraceRow.range?.totalNS || 0),
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        totalNS: TraceRow.range?.totalNS || 0,
         recordStartNS: window.recordStartNS,
         recordEndNS: window.recordEndNS,
         queryAll: args && args.queryAll,
         selectStartNS: args ? args.startNS : 0,
         selectEndNS: args ? args.endNS : 0,
-        selectTotalNS: args ? (args.endNS - args.startNS) : 0,
+        selectTotalNS: args ? args.endNS - args.startNS : 0,
         t: Date.now(),
         width: width,
         trafic: trafic,
diff --git a/ide/src/trace/database/data-trafic/CpuDataReceiver.ts b/ide/src/trace/database/data-trafic/CpuDataReceiver.ts
index 9830fb70d6aae8a8be49e759a31c3969bfa3ac78..dc1496b1439bae908382964064149ee21f54a852 100644
--- a/ide/src/trace/database/data-trafic/CpuDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/CpuDataReceiver.ts
@@ -84,7 +84,9 @@ export function searchDataHandler(data: any): void {
   let pidArr = data.params.pidArr as number[];
   let tidArr = data.params.tidArr as number[];
   for (let value of Array.from(cpuList.values())) {
-    res.push(...value.filter((cpuData) => pidArr.includes(cpuData.pid || cpuData.processId) || tidArr.includes(cpuData.tid)));
+    res.push(
+      ...value.filter((cpuData) => pidArr.includes(cpuData.pid || cpuData.processId) || tidArr.includes(cpuData.tid))
+    );
   }
   res.sort((dataA, dataB) => dataA.startTime - dataB.startTime);
   arrayBufferHandler(data, res, true);
@@ -129,6 +131,17 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
       len: res.length,
       transfer: transfer,
     },
-    transfer ? [startTime.buffer, dur.buffer, tid.buffer, id.buffer, processId.buffer, cpu.buffer, argSetId.buffer, nofinish.buffer] : []
+    transfer
+      ? [
+          startTime.buffer,
+          dur.buffer,
+          tid.buffer,
+          id.buffer,
+          processId.buffer,
+          cpu.buffer,
+          argSetId.buffer,
+          nofinish.buffer,
+        ]
+      : []
   );
 }
diff --git a/ide/src/trace/database/data-trafic/CpuDataSender.ts b/ide/src/trace/database/data-trafic/CpuDataSender.ts
index ff21c22aeed29641ee10682738232f9b33ed5844..2e6afebcfba43f0914ceb156fef507c0964586d2 100644
--- a/ide/src/trace/database/data-trafic/CpuDataSender.ts
+++ b/ide/src/trace/database/data-trafic/CpuDataSender.ts
@@ -19,7 +19,7 @@ import { TraceRow } from '../../component/trace/base/TraceRow';
 export function cpuDataSender(cpu: number, row: TraceRow<CpuStruct>): Promise<CpuStruct[]> {
   let trafic: number = TraficEnum.Memory;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
-  if ((trafic === TraficEnum.SharedArrayBuffer) && !row.sharedArrayBuffers) {
+  if (trafic === TraficEnum.SharedArrayBuffer && !row.sharedArrayBuffers) {
     row.sharedArrayBuffers = {
       processId: new SharedArrayBuffer(Uint16Array.BYTES_PER_ELEMENT * MAX_COUNT),
       id: new SharedArrayBuffer(Uint16Array.BYTES_PER_ELEMENT * MAX_COUNT),
@@ -32,31 +32,39 @@ export function cpuDataSender(cpu: number, row: TraceRow<CpuStruct>): Promise<Cp
     };
   }
   return new Promise((resolve): void => {
-    threadPool.submitProto(QueryEnum.CpuData, {
-      cpu: cpu,
-      startNS: TraceRow.range?.startNS || 0,
-      endNS: TraceRow.range?.endNS || 0,
-      recordStartNS: window.recordStartNS,
-      recordEndNS: window.recordEndNS,
-      width: width,
-      t: new Date().getTime(),
-      trafic: trafic,
-      sharedArrayBuffers: row.sharedArrayBuffers,
-    }, (res: any, len: number, transfer: boolean): void => {
-      resolve(arrayBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
-    });
+    threadPool.submitProto(
+      QueryEnum.CpuData,
+      {
+        cpu: cpu,
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        recordStartNS: window.recordStartNS,
+        recordEndNS: window.recordEndNS,
+        width: width,
+        t: new Date().getTime(),
+        trafic: trafic,
+        sharedArrayBuffers: row.sharedArrayBuffers,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(arrayBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
+      }
+    );
   });
 }
 
 export function searchCpuDataSender(pidArr: Array<number>, tidArr: Array<number>): Promise<any[]> {
   return new Promise((resolve): void => {
-    threadPool.submitProto(QueryEnum.SearchCpuData, {
-      tidArr: tidArr,
-      pidArr: pidArr,
-      trafic: TraficEnum.SharedArrayBuffer,
-    }, (res: any, len: number, transfer: boolean): void => {
-      resolve(searchArrayBufferHandler(res, len));
-    });
+    threadPool.submitProto(
+      QueryEnum.SearchCpuData,
+      {
+        tidArr: tidArr,
+        pidArr: pidArr,
+        trafic: TraficEnum.SharedArrayBuffer,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(searchArrayBufferHandler(res, len));
+      }
+    );
   });
 }
 
@@ -79,7 +87,7 @@ function arrayBufferHandler(res: any, len: number): CpuStruct[] {
       dur: dur[i],
       startTime: startTime[i],
       argSetID: argSetID[i],
-      nofinish: nofinish[i] === 1 ? true : false
+      nofinish: nofinish[i] === 1 ? true : false,
     } as CpuStruct);
   }
   return outArr;
@@ -105,7 +113,7 @@ function searchArrayBufferHandler(res: any, len: number): CpuStruct[] {
       startTime: startTime[i],
       type: 'cpu',
       argSetID: -1,
-      nofinish: nofinish[i] === 1 ? true : false
+      nofinish: nofinish[i] === 1 ? true : false,
     } as CpuStruct);
   }
   return outArr;
diff --git a/ide/src/trace/database/data-trafic/EBPFReceiver.ts b/ide/src/trace/database/data-trafic/EBPFReceiver.ts
index 1f74edfdbcb60cbf2a5b1eb923716521351650d2..814d01e2ca325aa18e96c16863e4b2495575c51c 100644
--- a/ide/src/trace/database/data-trafic/EBPFReceiver.ts
+++ b/ide/src/trace/database/data-trafic/EBPFReceiver.ts
@@ -162,7 +162,7 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
     endNS[i] = it.endNs;
     size[i] = it.size;
     dur[i] = it.dur;
-    height[i] = Math.ceil(it.size / maxSize * 36);
+    height[i] = Math.ceil((it.size / maxSize) * 36);
   });
   (self as unknown as Worker).postMessage(
     {
diff --git a/ide/src/trace/database/data-trafic/EnergySysEventReceiver.ts b/ide/src/trace/database/data-trafic/EnergySysEventReceiver.ts
index bfcee83ba93a984c7cd83d2246c28336810f865a..1ce8af50382a18cbf98c4c02adf15891f9e18e6e 100644
--- a/ide/src/trace/database/data-trafic/EnergySysEventReceiver.ts
+++ b/ide/src/trace/database/data-trafic/EnergySysEventReceiver.ts
@@ -18,7 +18,9 @@ import { energyList } from './utils/AllMemoryCache';
 
 export const systemDataSql = (args: any): string => {
   return `SELECT S.id,
-                 S.ts - ${args.recordStartNS}                                                                   AS startNs,
+                 S.ts - ${
+                   args.recordStartNS
+                 }                                                                   AS startNs,
                  D.data                                                                                         AS eventName,
                  (case when D.data == 'POWER_RUNNINGLOCK' then 1 when D.data == 'GNSS_STATE' then 2 else 0 end) AS appKey,
                  contents                                                                                       AS eventValue,
@@ -197,8 +199,7 @@ function systemBufferHandler(data: any, res: any[], transfer: boolean) {
     if (typeof it.eventValue === 'string') {
       try {
         parsedData = JSON.parse(it.eventValue);
-      } catch (error) {
-      }
+      } catch (error) {}
     }
     it.eventValue = parsedData;
     let beanData: any = {};
@@ -342,26 +343,26 @@ function postMessage(data: any, transfer: boolean, hiSysEnergy: HiSysEnergy, len
       action: data.action,
       results: transfer
         ? {
-          id: hiSysEnergy.id.buffer,
-          startNs: hiSysEnergy.startNs.buffer,
-          count: hiSysEnergy.count.buffer,
-          type: hiSysEnergy.type.buffer,
-          token: hiSysEnergy.token.buffer,
-          dataType: hiSysEnergy.dataType.buffer,
-        }
+            id: hiSysEnergy.id.buffer,
+            startNs: hiSysEnergy.startNs.buffer,
+            count: hiSysEnergy.count.buffer,
+            type: hiSysEnergy.type.buffer,
+            token: hiSysEnergy.token.buffer,
+            dataType: hiSysEnergy.dataType.buffer,
+          }
         : {},
       len: len,
       transfer: transfer,
     },
     transfer
       ? [
-        hiSysEnergy.id.buffer,
-        hiSysEnergy.startNs.buffer,
-        hiSysEnergy.count.buffer,
-        hiSysEnergy.type.buffer,
-        hiSysEnergy.token.buffer,
-        hiSysEnergy.dataType.buffer,
-      ]
+          hiSysEnergy.id.buffer,
+          hiSysEnergy.startNs.buffer,
+          hiSysEnergy.count.buffer,
+          hiSysEnergy.type.buffer,
+          hiSysEnergy.token.buffer,
+          hiSysEnergy.dataType.buffer,
+        ]
       : []
   );
 }
@@ -398,9 +399,9 @@ function anomalyBufferHandler(data: any, res: any[], transfer: boolean) {
       action: data.action,
       results: transfer
         ? {
-          id: id.buffer,
-          startNs: startNs.buffer,
-        }
+            id: id.buffer,
+            startNs: startNs.buffer,
+          }
         : {},
       len: res.length,
       transfer: transfer,
@@ -423,9 +424,9 @@ function powerBufferHandler(data: any, res: any[], transfer: boolean) {
       action: data.action,
       results: transfer
         ? {
-          id: id.buffer,
-          startNs: startNs.buffer,
-        }
+            id: id.buffer,
+            startNs: startNs.buffer,
+          }
         : {},
       len: res.length,
       transfer: transfer,
@@ -459,10 +460,10 @@ function stateBufferHandler(data: any, res: any[], transfer: boolean) {
       action: data.action,
       results: transfer
         ? {
-          id: id.buffer,
-          startNs: startNs.buffer,
-          eventValue: eventValue.buffer,
-        }
+            id: id.buffer,
+            startNs: startNs.buffer,
+            eventValue: eventValue.buffer,
+          }
         : {},
       len: res.length,
       transfer: transfer,
diff --git a/ide/src/trace/database/data-trafic/FrameDynamicEffectSender.ts b/ide/src/trace/database/data-trafic/FrameDynamicEffectSender.ts
index 54b653f92d2411a2e1714a26377508a276a332d0..6da0b24514f5632853bf12fc5b0e0c995d6f844d 100644
--- a/ide/src/trace/database/data-trafic/FrameDynamicEffectSender.ts
+++ b/ide/src/trace/database/data-trafic/FrameDynamicEffectSender.ts
@@ -33,20 +33,20 @@ export function frameAnimationSender(row: TraceRow<FrameAnimationStruct>): Promi
   }
   return new Promise((resolve): void => {
     threadPool.submitProto(
-        QueryEnum.FrameAnimationData,
-        {
-          startNS: TraceRow.range?.startNS || 0,
-          endNS: TraceRow.range?.endNS || 0,
-          recordStartNS: window.recordStartNS,
-          recordEndNS: window.recordEndNS,
-          width: width,
-          t: new Date().getTime(),
-          trafic: transferAnimationDataType,
-          sharedArrayBuffers: row.sharedArrayBuffers,
-        },
-        (res: any, len: number, transfer: boolean): void => {
-          resolve(animationBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
-        }
+      QueryEnum.FrameAnimationData,
+      {
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        recordStartNS: window.recordStartNS,
+        recordEndNS: window.recordEndNS,
+        width: width,
+        t: new Date().getTime(),
+        trafic: transferAnimationDataType,
+        sharedArrayBuffers: row.sharedArrayBuffers,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(animationBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
+      }
     );
   });
 }
@@ -91,20 +91,20 @@ export function frameDynamicSender(row: TraceRow<FrameDynamicStruct>): Promise<F
   }
   return new Promise((resolve): void => {
     threadPool.submitProto(
-        QueryEnum.FrameDynamicData,
-        {
-          startNS: TraceRow.range?.startNS || 0,
-          endNS: TraceRow.range?.endNS || 0,
-          recordStartNS: window.recordStartNS,
-          recordEndNS: window.recordEndNS,
-          width: width,
-          t: new Date().getTime(),
-          trafic: transferDynamicDataType,
-          sharedArrayBuffers: row.sharedArrayBuffers,
-        },
-        (res: any, len: number, transfer: boolean): void => {
-          resolve(dynamicBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
-        }
+      QueryEnum.FrameDynamicData,
+      {
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        recordStartNS: window.recordStartNS,
+        recordEndNS: window.recordEndNS,
+        width: width,
+        t: new Date().getTime(),
+        trafic: transferDynamicDataType,
+        sharedArrayBuffers: row.sharedArrayBuffers,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(dynamicBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
+      }
     );
   });
 }
@@ -133,9 +133,9 @@ function dynamicBufferHandler(res: any, len: number): any[] {
 }
 
 export function frameSpacingSender(
-    physicalWidth: number,
-    physicalHeight: number,
-    row: TraceRow<FrameSpacingStruct>
+  physicalWidth: number,
+  physicalHeight: number,
+  row: TraceRow<FrameSpacingStruct>
 ): Promise<FrameSpacingStruct[]> {
   let transferSpacingDataType: number = TraficEnum.Memory;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
@@ -157,22 +157,22 @@ export function frameSpacingSender(
   }
   return new Promise((resolve): void => {
     threadPool.submitProto(
-        QueryEnum.FrameSpacingData,
-        {
-          physicalWidth: physicalWidth,
-          physicalHeight: physicalHeight,
-          startNS: TraceRow.range?.startNS || 0,
-          endNS: TraceRow.range?.endNS || 0,
-          recordStartNS: window.recordStartNS,
-          recordEndNS: window.recordEndNS,
-          width: width,
-          t: new Date().getTime(),
-          trafic: transferSpacingDataType,
-          sharedArrayBuffers: row.sharedArrayBuffers,
-        },
-        (res: any, len: number, transfer: boolean): void => {
-          resolve(spacingBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
-        }
+      QueryEnum.FrameSpacingData,
+      {
+        physicalWidth: physicalWidth,
+        physicalHeight: physicalHeight,
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        recordStartNS: window.recordStartNS,
+        recordEndNS: window.recordEndNS,
+        width: width,
+        t: new Date().getTime(),
+        trafic: transferSpacingDataType,
+        sharedArrayBuffers: row.sharedArrayBuffers,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(spacingBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
+      }
     );
   });
 }
diff --git a/ide/src/trace/database/data-trafic/FrameJanksSender.ts b/ide/src/trace/database/data-trafic/FrameJanksSender.ts
index 93fbf84e1acc3ff86a378faf3d81bed88a9eefd0..4fc2e7e374153b36b396815d99a3f1f3e4846469 100644
--- a/ide/src/trace/database/data-trafic/FrameJanksSender.ts
+++ b/ide/src/trace/database/data-trafic/FrameJanksSender.ts
@@ -19,7 +19,7 @@ import { JanksStruct } from '../../bean/JanksStruct';
 export function frameJanksSender(queryEnum: number, row: TraceRow<JanksStruct>): Promise<JanksStruct[]> {
   let transferJankDataType: number = TraficEnum.Memory;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
-  if ((transferJankDataType === TraficEnum.SharedArrayBuffer) && !row.sharedArrayBuffers) {
+  if (transferJankDataType === TraficEnum.SharedArrayBuffer && !row.sharedArrayBuffers) {
     row.sharedArrayBuffers = {
       id: new SharedArrayBuffer(Uint16Array.BYTES_PER_ELEMENT * MAX_COUNT),
       ipid: new SharedArrayBuffer(Uint16Array.BYTES_PER_ELEMENT * MAX_COUNT),
diff --git a/ide/src/trace/database/data-trafic/HiSysEventDataReceiver.ts b/ide/src/trace/database/data-trafic/HiSysEventDataReceiver.ts
index de8175b972e9fe0fa7476d48917b17490d37cf41..3931f1a8b3e6b730c06ad798c24d3fd52b335505 100644
--- a/ide/src/trace/database/data-trafic/HiSysEventDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/HiSysEventDataReceiver.ts
@@ -19,7 +19,9 @@ import { filterDataByGroupLayer } from './utils/DataFilter';
 export const chartHiSysEventDataSql = (args: any): string => {
   return `
       SELECT S.id,
-             (S.ts - ${args.recordStartNS})                                                                                 AS startNs,
+             (S.ts - ${
+               args.recordStartNS
+             })                                                                                 AS startNs,
              pid,
              tid,
              uid,
@@ -36,7 +38,9 @@ export const chartHiSysEventDataSql = (args: any): string => {
                                                                                                                  WHEN S.level = 'CRITICAL'
                                                                                                                      THEN 1
                                                                                                                  END *
-                                                                                                             ${args.width}) AS px
+                                                                                                             ${
+                                                                                                               args.width
+                                                                                                             }) AS px
       FROM hisys_all_event AS S
       where S.id is not null
         and startNs + dur >= ${Math.floor(args.startNS)}
@@ -70,7 +74,15 @@ export function hiSysEventDataReceiver(data: any, proc: Function) {
       hiSysEventList.set(data.params.id, proc(sql));
     }
     let list = hiSysEventList.get(data.params.id) || [];
-    let res = filterDataByGroupLayer(list || [], 'depth','startNs', 'dur', data.params.startNS, data.params.endNS, data.params.width);
+    let res = filterDataByGroupLayer(
+      list || [],
+      'depth',
+      'startNs',
+      'dur',
+      data.params.startNS,
+      data.params.endNS,
+      data.params.width
+    );
     arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer);
   } else {
     let sql = chartHiSysEventDataSql(data.params);
@@ -105,15 +117,15 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean) {
       action: data.action,
       results: transfer
         ? {
-          uid: uid.buffer,
-          id: id.buffer,
-          ts: ts.buffer,
-          pid: pid.buffer,
-          tid: tid.buffer,
-          seq: seq.buffer,
-          dur: dur.buffer,
-          depth: depth.buffer,
-        }
+            uid: uid.buffer,
+            id: id.buffer,
+            ts: ts.buffer,
+            pid: pid.buffer,
+            tid: tid.buffer,
+            seq: seq.buffer,
+            dur: dur.buffer,
+            depth: depth.buffer,
+          }
         : {},
       len: res.length,
       transfer: transfer,
diff --git a/ide/src/trace/database/data-trafic/IrqDataReceiver.ts b/ide/src/trace/database/data-trafic/IrqDataReceiver.ts
index d3946890295fa87593943d9028ef9ac3f8457546..ff696c749742c5b24ecfd5081ffb757a21eefa78 100644
--- a/ide/src/trace/database/data-trafic/IrqDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/IrqDataReceiver.ts
@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import { TraficEnum } from './utils/QueryEnum';
-import {filterDataByGroup} from "./utils/DataFilter";
-import {lrqList} from "./utils/AllMemoryCache";
+import { filterDataByGroup } from './utils/DataFilter';
+import { lrqList } from './utils/AllMemoryCache';
 
 export const chartIrqDataSql = (args: any): string => {
   if (args.name === 'irq') {
@@ -82,11 +82,11 @@ export function irqDataReceiver(data: any, proc: Function): void {
       list = lrqList.get(data.params.cpu + data.params.name) || [];
     }
     res = filterDataByGroup(list || [], 'startNs', 'dur', data.params.startNS, data.params.endNS, data.params.width);
-    arrayBufferHandler(data, res,true);
+    arrayBufferHandler(data, res, true);
   } else {
     let sql = chartIrqDataSql(data.params);
     let res = proc(sql);
-    arrayBufferHandler(data, res,data.params.trafic !== TraficEnum.SharedArrayBuffer);
+    arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer);
   }
 }
 
diff --git a/ide/src/trace/database/data-trafic/IrqDataSender.ts b/ide/src/trace/database/data-trafic/IrqDataSender.ts
index 4bc20fd545d3a220af8b0f98a5ac09f608238099..f7d8a20862d84e428a56057dcab5a119e03502a8 100644
--- a/ide/src/trace/database/data-trafic/IrqDataSender.ts
+++ b/ide/src/trace/database/data-trafic/IrqDataSender.ts
@@ -19,7 +19,7 @@ import { IrqStruct } from '../ui-worker/ProcedureWorkerIrq';
 export function irqDataSender(cpu: number, name: string, row: TraceRow<IrqStruct>): Promise<IrqStruct[]> {
   let trafic: number = TraficEnum.ProtoBuffer;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
-  if ((trafic === TraficEnum.SharedArrayBuffer) && !row.sharedArrayBuffers) {
+  if (trafic === TraficEnum.SharedArrayBuffer && !row.sharedArrayBuffers) {
     row.sharedArrayBuffers = {
       argSetId: new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * MAX_COUNT),
       depth: new SharedArrayBuffer(Uint32Array.BYTES_PER_ELEMENT * MAX_COUNT),
diff --git a/ide/src/trace/database/data-trafic/LogDataReceiver.ts b/ide/src/trace/database/data-trafic/LogDataReceiver.ts
index 1edee3527b008d3d042bf97950b62cde7d06f8b3..1f8a891367ec4999693525ae5428a463b2794a87 100644
--- a/ide/src/trace/database/data-trafic/LogDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/LogDataReceiver.ts
@@ -81,7 +81,15 @@ export function logDataReceiver(data: any, proc: Function) {
       hiLogList.set(data.params.id, proc(sql));
     }
     let list = hiLogList.get(data.params.id) || [];
-    let res = filterDataByGroupLayer(list || [], 'depth','startTs', 'dur', data.params.startNS, data.params.endNS, data.params.width);
+    let res = filterDataByGroupLayer(
+      list || [],
+      'depth',
+      'startTs',
+      'dur',
+      data.params.startNS,
+      data.params.endNS,
+      data.params.width
+    );
     arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer);
   } else {
     let sql = chartLogDataSql(data.params);
@@ -113,13 +121,13 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean) {
       action: data.action,
       results: transfer
         ? {
-          id: id.buffer,
-          startTs: startTs.buffer,
-          pid: pid.buffer,
-          tid: tid.buffer,
-          dur: dur.buffer,
-          depth: depth.buffer,
-        }
+            id: id.buffer,
+            startTs: startTs.buffer,
+            pid: pid.buffer,
+            tid: tid.buffer,
+            dur: dur.buffer,
+            depth: depth.buffer,
+          }
         : {},
       len: res.length,
       transfer: transfer,
diff --git a/ide/src/trace/database/data-trafic/LostFrameReceiver.ts b/ide/src/trace/database/data-trafic/LostFrameReceiver.ts
index d2a9d4ac956c58c3195c2610dadc80dde6ab1916..a09beacc55d165443c2619ecf804bdc696e9f766 100644
--- a/ide/src/trace/database/data-trafic/LostFrameReceiver.ts
+++ b/ide/src/trace/database/data-trafic/LostFrameReceiver.ts
@@ -11,17 +11,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {TraficEnum} from './utils/QueryEnum';
+import { TraficEnum } from './utils/QueryEnum';
+import { lostFrameList } from './utils/AllMemoryCache';
 
 export const queryPresentInfo = (args: any): string => {
   return `SELECT ts,dur,name FROM callstack WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('${args.threadName}'))
-    AND name LIKE('${args.funcName}')`
-}
+    AND name LIKE('${args.funcName}')`;
+};
 
-export function lostFrameReceiver  (data: any, proc: Function) :void {
-  let sql = queryPresentInfo(data.params);
-  let res = proc(sql);
-  arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer);
+export function lostFrameReceiver(data: any, proc: Function): void {
+  if (data.params.trafic === TraficEnum.Memory) {
+    if (!lostFrameList.has(data.params.pid)) {
+      lostFrameList.set(data.params.pid, proc(queryPresentInfo(data.params)));
+    }
+    let res = lostFrameList.get(data.params.pid)!;
+    arrayBufferHandler(data, res, true);
+  } else {
+    let res = proc(queryPresentInfo(data.params));
+    arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer);
+  }
 }
 
 function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
@@ -37,7 +45,7 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
     dur[i] = it.dur;
     nofinish[i] = it.nofinish;
     argSetId[i] = it.argSetId;
-    presentId[i] = Number(nameCutArr[nameCutArr.length-1]);
+    presentId[i] = Number(nameCutArr[nameCutArr.length - 1]);
   });
   (self as unknown as Worker).postMessage(
     {
@@ -45,11 +53,11 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
       action: data.action,
       results: transfer
         ? {
-          startTime: startTime.buffer,
-          dur: dur.buffer,
-          argSetID: argSetId.buffer,
-          presentId: presentId.buffer,
-        }
+            startTime: startTime.buffer,
+            dur: dur.buffer,
+            argSetID: argSetId.buffer,
+            presentId: presentId.buffer,
+          }
         : {},
       len: res.length,
       transfer: transfer,
diff --git a/ide/src/trace/database/data-trafic/LostFrameSender.ts b/ide/src/trace/database/data-trafic/LostFrameSender.ts
index fabdab2d675a9f9baa80609d888534c05b921a47..8d80e14cb99ecab9f133392150cddd111d4f4701 100644
--- a/ide/src/trace/database/data-trafic/LostFrameSender.ts
+++ b/ide/src/trace/database/data-trafic/LostFrameSender.ts
@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { type LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO'
+import { type LtpoStruct } from '../../database/ui-worker/ProcedureWorkerLTPO';
 import { CHART_OFFSET_LEFT, MAX_COUNT, QueryEnum, TraficEnum } from './utils/QueryEnum';
 import { threadPool } from '../SqlLite';
 import { TraceRow } from '../../component/trace/base/TraceRow';
@@ -27,19 +27,23 @@ export function lostFrameSender(tName: String, fName: String, row: TraceRow<Ltpo
     };
   }
   return new Promise((resolve): void => {
-    threadPool.submitProto(QueryEnum.LostFrameData, {
-      threadName: tName,
-      funcName: fName,
-      startNS: TraceRow.range?.startNS || 0,
-      endNS: TraceRow.range?.endNS || 0,
-      recordStartNS: window.recordStartNS,
-      recordEndNS: window.recordEndNS,
-      width: width,
-      trafic: trafic,
-      sharedArrayBuffers: row.sharedArrayBuffers,
-    }, (res: any, len: number, transfer: boolean): void => {
-      resolve(arrayBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
-    });
+    threadPool.submitProto(
+      QueryEnum.LostFrameData,
+      {
+        threadName: tName,
+        funcName: fName,
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        recordStartNS: window.recordStartNS,
+        recordEndNS: window.recordEndNS,
+        width: width,
+        trafic: trafic,
+        sharedArrayBuffers: row.sharedArrayBuffers,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(arrayBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
+      }
+    );
   });
 }
 
diff --git a/ide/src/trace/database/data-trafic/NativeMemoryDataReceiver.ts b/ide/src/trace/database/data-trafic/NativeMemoryDataReceiver.ts
index 4b2cfd88ce86a0952185dae57a1c554701f3d708..c8df668c7a635a12a3217fca359f220b12cbe9cc 100644
--- a/ide/src/trace/database/data-trafic/NativeMemoryDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/NativeMemoryDataReceiver.ts
@@ -221,18 +221,18 @@ function setStatisticsCacheMapValue(obj: any, totalNS: number): any {
 }
 
 function cacheNativeMemoryChartData(model: string, totalNS: number, processes: number[], data: Array<any>): void {
-  processes.forEach(ipid => {
-    let processData = data.filter(ne => ne.ipid === ipid);
+  processes.forEach((ipid) => {
+    let processData = data.filter((ne) => ne.ipid === ipid);
     if (model === 'native_hook') {
       //正常模式
       normalChartDataHandler(processData, `${ipid}-0`, totalNS);
       normalChartDataHandler(
-        processData.filter(ne => ne.eventType === 0 || ne.eventType === 2),
+        processData.filter((ne) => ne.eventType === 0 || ne.eventType === 2),
         `${ipid}-1`,
         totalNS
       );
       normalChartDataHandler(
-        processData.filter(ne => ne.eventType === 1 || ne.eventType === 3),
+        processData.filter((ne) => ne.eventType === 1 || ne.eventType === 3),
         `${ipid}-2`,
         totalNS
       );
@@ -240,12 +240,12 @@ function cacheNativeMemoryChartData(model: string, totalNS: number, processes: n
       //统计模式
       statisticChartHandler(processData, `${ipid}-0`, totalNS);
       statisticChartHandler(
-        processData.filter(ne => ne.type === 0),
+        processData.filter((ne) => ne.type === 0),
         `${ipid}-1`,
         totalNS
       );
       statisticChartHandler(
-        processData.filter(ne => ne.type > 0),
+        processData.filter((ne) => ne.type > 0),
         `${ipid}-2`,
         totalNS
       );
diff --git a/ide/src/trace/database/data-trafic/SliceReceiver.ts b/ide/src/trace/database/data-trafic/SliceReceiver.ts
index 7fe612917e9c16c3fca50bfb9d4d75816746d476..dadc332852459a2dd4ebfb092b311d2b734633c7 100644
--- a/ide/src/trace/database/data-trafic/SliceReceiver.ts
+++ b/ide/src/trace/database/data-trafic/SliceReceiver.ts
@@ -11,12 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {
-  cpuList,
-  processList,
-  sliceList,
-  threadStateList
-} from './utils/AllMemoryCache';
+import { cpuList, processList, sliceList, threadStateList } from './utils/AllMemoryCache';
 
 export const sliceSqlMem = (args: any): string => {
   return `
@@ -53,7 +48,7 @@ export function sliceReceiver(data: any, proc: Function): void {
         }
         cpuList.get(slice.cpu)!.push(slice);
       } else {
-        cpuList.set(slice.cpu,[slice]);
+        cpuList.set(slice.cpu, [slice]);
       }
     }
     if (slice.pid >= 0 && slice.cpu !== null && slice.cpu !== undefined) {
@@ -108,7 +103,8 @@ function postMsg(data: any, res: any): void {
       results: res,
       len: res.length,
       transfer: false,
-    }, []
+    },
+    []
   );
 }
 
@@ -307,4 +303,3 @@ function setSPTData(group: any, slice: any, item: any): void {
     });
   }
 }
-
diff --git a/ide/src/trace/database/data-trafic/SliceSender.ts b/ide/src/trace/database/data-trafic/SliceSender.ts
index 89c8d2d02cbf1a1f36564199853815d5268d6d58..270573a8212099343729a6b131be6d085757a9bb 100644
--- a/ide/src/trace/database/data-trafic/SliceSender.ts
+++ b/ide/src/trace/database/data-trafic/SliceSender.ts
@@ -18,30 +18,36 @@ import { TraceRow } from '../../component/trace/base/TraceRow';
 export function sliceSender(): Promise<any> {
   let trafic: number = TraficEnum.Memory;
   return new Promise((resolve): void => {
-    threadPool.submitProto(QueryEnum.SliceData, {
-      trafic: trafic,
-      startNS: TraceRow.range?.startNS || 0,
-      endNS: TraceRow.range?.endNS || 0,
-      recordStartNS: window.recordStartNS,
-      recordEndNS: window.recordEndNS,
-    }, (res: any): void => {
-      resolve(res);
-    });
+    threadPool.submitProto(
+      QueryEnum.SliceData,
+      {
+        trafic: trafic,
+        startNS: TraceRow.range?.startNS || 0,
+        endNS: TraceRow.range?.endNS || 0,
+        recordStartNS: window.recordStartNS,
+        recordEndNS: window.recordEndNS,
+      },
+      (res: any): void => {
+        resolve(res);
+      }
+    );
   });
 }
 
 export function sliceSPTSender(leftNs: number, rightNs: number, cpus: Array<number>, func: string): Promise<any[]> {
   return new Promise((resolve): void => {
-    threadPool.submitProto(QueryEnum.SliceSPTData, {
-      leftNs: leftNs,
-      rightNs: rightNs,
-      cpus: cpus,
-      func: func,
-      trafic: TraficEnum.Memory,
-    }, (res: any, len: number, transfer: boolean): void => {
-      resolve(res);
-    });
+    threadPool.submitProto(
+      QueryEnum.SliceSPTData,
+      {
+        leftNs: leftNs,
+        rightNs: rightNs,
+        cpus: cpus,
+        func: func,
+        trafic: TraficEnum.Memory,
+      },
+      (res: any, len: number, transfer: boolean): void => {
+        resolve(res);
+      }
+    );
   });
 }
-
-
diff --git a/ide/src/trace/database/data-trafic/cpu/CpuFreqLimitDataReceiver.ts b/ide/src/trace/database/data-trafic/cpu/CpuFreqLimitDataReceiver.ts
index acaa583d096a2f7a6cf15ad8246f8680fd1a249b..4b5c67804253a188b930585ee7c38fa6e339fdbe 100644
--- a/ide/src/trace/database/data-trafic/cpu/CpuFreqLimitDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/cpu/CpuFreqLimitDataReceiver.ts
@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import { TraficEnum } from '../utils/QueryEnum';
-import {filterDataByGroup} from "../utils/DataFilter";
-import {cpuFreqLimitList} from "../utils/AllMemoryCache";
+import { filterDataByGroup } from '../utils/DataFilter';
+import { cpuFreqLimitList } from '../utils/AllMemoryCache';
 
 export const chartCpuFreqLimitDataSql = (args: any): string => {
   return `
@@ -53,8 +53,6 @@ export const chartCpuFreqLimitDataSqlMem = (args: any): string => {
   `;
 };
 
-
-
 export function cpuFreqLimitReceiver(data: any, proc: Function): void {
   if (data.params.trafic === TraficEnum.Memory) {
     let res: any[], list: any[];
@@ -62,9 +60,9 @@ export function cpuFreqLimitReceiver(data: any, proc: Function): void {
       let sql = chartCpuFreqLimitDataSqlMem(data.params);
       list = proc(sql);
       for (let i = 0; i < list.length; i++) {
-        if(i<list.length-1){
-          list[i].dur = list[i+1].startNs - list[i].startNs;
-        }else{
+        if (i < list.length - 1) {
+          list[i].dur = list[i + 1].startNs - list[i].startNs;
+        } else {
           list[i].dur = data.params.recordEndNS - data.params.recordStartNS - list[i].startNs;
         }
       }
@@ -72,8 +70,16 @@ export function cpuFreqLimitReceiver(data: any, proc: Function): void {
     } else {
       list = cpuFreqLimitList.get(data.params.cpu) || [];
     }
-    res = filterDataByGroup(list || [], 'startNs', 'dur', data.params.startNS, data.params.endNS, data.params.width,"value");
-    arrayBufferHandler(data, res,true);
+    res = filterDataByGroup(
+      list || [],
+      'startNs',
+      'dur',
+      data.params.startNS,
+      data.params.endNS,
+      data.params.width,
+      'value'
+    );
+    arrayBufferHandler(data, res, true);
   } else {
     let sql = chartCpuFreqLimitDataSql(data.params);
     let res = proc(sql);
diff --git a/ide/src/trace/database/data-trafic/hiperf/HiperfCpuDataReceiver.ts b/ide/src/trace/database/data-trafic/hiperf/HiperfCpuDataReceiver.ts
index 27af7bc41997adc8e47b216794aadd4ced28215d..73625592ac0e7f30caac8cc9238ed6edbf73d960 100644
--- a/ide/src/trace/database/data-trafic/hiperf/HiperfCpuDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/hiperf/HiperfCpuDataReceiver.ts
@@ -72,7 +72,7 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
   let usage = data.params.drawType === -2;
   let perfCpu = new PerfCpu(data, transfer, res.length);
   let maxEventCount = Math.max(
-    ...res.map(it => {
+    ...res.map((it) => {
       data.params.trafic === TraficEnum.ProtoBuffer && (it = it.hiperfData);
       return it.eventCount;
     })
diff --git a/ide/src/trace/database/data-trafic/hiperf/HiperfProcessDataReceiver.ts b/ide/src/trace/database/data-trafic/hiperf/HiperfProcessDataReceiver.ts
index 23d1a8372a67d0be68af75d69a85161fe51031dc..e9d58f75e3fdfe07dfdb5a7456f0527940d1ec9a 100644
--- a/ide/src/trace/database/data-trafic/hiperf/HiperfProcessDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/hiperf/HiperfProcessDataReceiver.ts
@@ -74,7 +74,7 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
   let usage = data.params.drawType === -2;
   let perfProcess = new PerfProcess(data, transfer, res.length);
   let maxEventCount = Math.max(
-    ...res.map(it => {
+    ...res.map((it) => {
       data.params.trafic === TraficEnum.ProtoBuffer && (it = it.hiperfData);
       return it.eventCount;
     })
diff --git a/ide/src/trace/database/data-trafic/hiperf/HiperfThreadDataReceiver.ts b/ide/src/trace/database/data-trafic/hiperf/HiperfThreadDataReceiver.ts
index 376a5baae6a6a20fe88cf7290aad9465bee3e74d..d3cd46bd81c73f19269c2f9706c9f1f8a949bb20 100644
--- a/ide/src/trace/database/data-trafic/hiperf/HiperfThreadDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/hiperf/HiperfThreadDataReceiver.ts
@@ -80,9 +80,10 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean): void {
     perfThread.eventTypeId[i] = it.eventTypeId;
     perfThread.callChainId[i] = it.callchainId;
     if (usage) {
-      perfThread.height[i] = maxCpuCount === -1
-        ? Math.floor((it.sampleCount / (10 / intervalPerf)) * 40)
-        : Math.floor((it.sampleCount / (10 / intervalPerf) / maxCpuCount) * 40);
+      perfThread.height[i] =
+        maxCpuCount === -1
+          ? Math.floor((it.sampleCount / (10 / intervalPerf)) * 40)
+          : Math.floor((it.sampleCount / (10 / intervalPerf) / maxCpuCount) * 40);
     } else {
       perfThread.height[i] = Math.floor((it.eventCount / maxEventCount) * 40);
     }
diff --git a/ide/src/trace/database/data-trafic/process/FuncDataReceiver.ts b/ide/src/trace/database/data-trafic/process/FuncDataReceiver.ts
index efdd0fe960ecbbb7157d656f57d70f60ee3a9b72..55d5890c2ae850ccfbe511f49365ea9d3c2429fb 100644
--- a/ide/src/trace/database/data-trafic/process/FuncDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/process/FuncDataReceiver.ts
@@ -11,12 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { threadCallStackList } from "../utils/AllMemoryCache";
-import { filterDataByGroupLayer } from "../utils/DataFilter";
-import { TraficEnum } from "../utils/QueryEnum";
+import { threadCallStackList } from '../utils/AllMemoryCache';
+import { filterDataByGroupLayer } from '../utils/DataFilter';
+import { TraficEnum } from '../utils/QueryEnum';
 
-
-export const chartFuncDataSql = (args: any):string => {
+export const chartFuncDataSql = (args: any): string => {
   return `
     select
         startTs,
@@ -25,7 +24,9 @@ export const chartFuncDataSql = (args: any):string => {
         depth,
         id,
         max(dur2) as dur2,
-        (startTs) / (${Math.floor((args.endNS - args.startNS) / args.width)}) + (depth * ${ args.width })                           AS px
+        (startTs) / (${Math.floor((args.endNS - args.startNS) / args.width)}) + (depth * ${
+    args.width
+  })                           AS px
     from (
       select c.ts - ${args.recordStartNS} as startTs,
              c.dur as dur,
@@ -46,7 +47,7 @@ export const chartFuncDataSql = (args: any):string => {
 `;
 };
 
-export const chartFuncDataSqlMem = (args:any):string =>{
+export const chartFuncDataSqlMem = (args: any): string => {
   return `select c.ts - ${args.recordStartNS} as startTs,
              c.dur                  as dur,
              ifnull(c.argsetid, -1) as argsetid,
@@ -58,10 +59,10 @@ export const chartFuncDataSqlMem = (args:any):string =>{
         and c.cookie is null
         and c.callid in (select id from thread where tid=${args.tid}
         and ipid=${args.ipid})`;
-}
-export function funcDataReceiver(data: any, proc: Function):void {
+};
+export function funcDataReceiver(data: any, proc: Function): void {
   if (data.params.trafic === TraficEnum.Memory) {
-    let key = `${data.params.tid}${data.params.ipid}`
+    let key = `${data.params.tid}${data.params.ipid}`;
     if (!threadCallStackList.has(key)) {
       let list = proc(chartFuncDataSqlMem(data.params));
       for (let i = 0; i < list.length; i++) {
@@ -80,16 +81,20 @@ export function funcDataReceiver(data: any, proc: Function):void {
       array,
       'depth',
       'startTs',
-      'dur', data.params.startNS, data.params.endNS, data.params.width);
-      arrayBufferHandler(data, res, true,array.length === 0);
+      'dur',
+      data.params.startNS,
+      data.params.endNS,
+      data.params.width
+    );
+    arrayBufferHandler(data, res, true, array.length === 0);
   } else {
     let sql = chartFuncDataSql(data.params);
     let res = proc(sql);
-    arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer,false);
+    arrayBufferHandler(data, res, data.params.trafic !== TraficEnum.SharedArrayBuffer, false);
   }
 }
 
-function arrayBufferHandler(data: any, res: any[], transfer: boolean,isEmpty:boolean): void {
+function arrayBufferHandler(data: any, res: any[], transfer: boolean, isEmpty: boolean): void {
   let startTs = new Float64Array(transfer ? res.length : data.params.sharedArrayBuffers.startTs);
   let dur = new Float64Array(transfer ? res.length : data.params.sharedArrayBuffers.dur);
   let argsetid = new Int32Array(transfer ? res.length : data.params.sharedArrayBuffers.argsetid);
@@ -116,12 +121,12 @@ function arrayBufferHandler(data: any, res: any[], transfer: boolean,isEmpty:boo
             argsetid: argsetid.buffer,
             depth: depth.buffer,
             id: id.buffer,
-            nofinish: nofinish.buffer
+            nofinish: nofinish.buffer,
           }
         : {},
       len: res.length,
       transfer: transfer,
-      isEmpty:isEmpty,
+      isEmpty: isEmpty,
     },
     transfer ? [startTs.buffer, dur.buffer, argsetid.buffer, depth.buffer, id.buffer, nofinish.buffer] : []
   );
diff --git a/ide/src/trace/database/data-trafic/process/FuncDataSender.ts b/ide/src/trace/database/data-trafic/process/FuncDataSender.ts
index 606dbd5039ed9fdb4570e13f5732cc7925d5e216..0868ebfa18f7187b50650b404e8f3d82318a8490 100644
--- a/ide/src/trace/database/data-trafic/process/FuncDataSender.ts
+++ b/ide/src/trace/database/data-trafic/process/FuncDataSender.ts
@@ -16,7 +16,7 @@ import { threadPool } from '../../SqlLite';
 import { TraceRow } from '../../../component/trace/base/TraceRow';
 import { FuncStruct } from '../../ui-worker/ProcedureWorkerFunc';
 
-export function funcDataSender(tid: number, ipid: number, row: TraceRow<FuncStruct>): Promise<FuncStruct[]|boolean> {
+export function funcDataSender(tid: number, ipid: number, row: TraceRow<FuncStruct>): Promise<FuncStruct[] | boolean> {
   let trafic: number = TraficEnum.Memory;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
   if (trafic === TraficEnum.SharedArrayBuffer && !row.sharedArrayBuffers) {
@@ -43,12 +43,12 @@ export function funcDataSender(tid: number, ipid: number, row: TraceRow<FuncStru
         trafic: trafic,
         sharedArrayBuffers: row.sharedArrayBuffers,
       },
-      (res: any, len: number, transfer: boolean,isEmpty:boolean) => {
-      if (isEmpty) {
+      (res: any, len: number, transfer: boolean, isEmpty: boolean) => {
+        if (isEmpty) {
           resolve(true);
-      }else {
+        } else {
           resolve(arrayBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
-      }
+        }
       }
     );
   });
diff --git a/ide/src/trace/database/data-trafic/process/ProcessDataReceiver.ts b/ide/src/trace/database/data-trafic/process/ProcessDataReceiver.ts
index 4c33b5c95e7edf8000d88e3817ebbb4fac9c61f0..e39048a54d1e507374c4dbaca0aac70e0adaa72a 100644
--- a/ide/src/trace/database/data-trafic/process/ProcessDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/process/ProcessDataReceiver.ts
@@ -13,7 +13,7 @@
 
 import { TraficEnum } from '../utils/QueryEnum';
 import { filterDataByGroupLayer, filterDataByLayer } from '../utils/DataFilter';
-import {processList} from "../utils/AllMemoryCache";
+import { processList } from '../utils/AllMemoryCache';
 
 const sqlNormal = (args: any): string => {
   return `select ta.cpu,                                                            
diff --git a/ide/src/trace/database/data-trafic/process/ProcessExpectedDataReceiver.ts b/ide/src/trace/database/data-trafic/process/ProcessExpectedDataReceiver.ts
index 8295cd86bed40a53da72c67f3198027bce1a3a09..1cd5154bf7ecf546aef02af8bf6b53de684f95e5 100644
--- a/ide/src/trace/database/data-trafic/process/ProcessExpectedDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/process/ProcessExpectedDataReceiver.ts
@@ -42,7 +42,9 @@ export const chartProcessExpectedProtoDataSql = (args: any): string => {
          a.vsync              as name,
          a.type,
          a.depth,
-         (a.ts - ${args.recordStartNS}) / (${Math.floor((args.endNS - args.startNS) / args.width)}) + (a.depth * ${ args.width })  AS px
+         (a.ts - ${args.recordStartNS}) / (${Math.floor((args.endNS - args.startNS) / args.width)}) + (a.depth * ${
+    args.width
+  })  AS px
   FROM frame_slice AS a
   WHERE a.type = 1
     and (a.flag <> 2 or a.flag is null)
diff --git a/ide/src/trace/database/data-trafic/process/ProcessMemDataReceiver.ts b/ide/src/trace/database/data-trafic/process/ProcessMemDataReceiver.ts
index 600cc23a18a728afbeb2262aa40e5cbfe516ee14..f6c29d70f1e5774220c7e08b48533617d90ba9b1 100644
--- a/ide/src/trace/database/data-trafic/process/ProcessMemDataReceiver.ts
+++ b/ide/src/trace/database/data-trafic/process/ProcessMemDataReceiver.ts
@@ -13,7 +13,7 @@
 
 import { TraficEnum } from '../utils/QueryEnum';
 import { filterData } from '../utils/DataFilter';
-import {memList} from "../utils/AllMemoryCache";
+import { memList } from '../utils/AllMemoryCache';
 
 export const chartProcessMemDataSql = (args: any): string => {
   return `
diff --git a/ide/src/trace/database/data-trafic/process/ThreadDataSender.ts b/ide/src/trace/database/data-trafic/process/ThreadDataSender.ts
index 92a4cf0fd428484927965cab39e1c4a69b813233..faec460c4cadd3e15950d8c394029622839bf862 100644
--- a/ide/src/trace/database/data-trafic/process/ThreadDataSender.ts
+++ b/ide/src/trace/database/data-trafic/process/ThreadDataSender.ts
@@ -16,10 +16,14 @@ import { threadPool } from '../../SqlLite';
 import { TraceRow } from '../../../component/trace/base/TraceRow';
 import { ThreadStruct } from '../../ui-worker/ProcedureWorkerThread';
 
-export function threadDataSender(tid: number, pid: number, row: TraceRow<ThreadStruct>): Promise<ThreadStruct[]|boolean> {
+export function threadDataSender(
+  tid: number,
+  pid: number,
+  row: TraceRow<ThreadStruct>
+): Promise<ThreadStruct[] | boolean> {
   let trafic: number = TraficEnum.Memory;
   let width = row.clientWidth - CHART_OFFSET_LEFT;
-  if ((trafic === TraficEnum.SharedArrayBuffer) && !row.sharedArrayBuffers) {
+  if (trafic === TraficEnum.SharedArrayBuffer && !row.sharedArrayBuffers) {
     row.sharedArrayBuffers = {
       startTime: new SharedArrayBuffer(Float64Array.BYTES_PER_ELEMENT * MAX_COUNT),
       dur: new SharedArrayBuffer(Float64Array.BYTES_PER_ELEMENT * MAX_COUNT),
@@ -45,10 +49,10 @@ export function threadDataSender(tid: number, pid: number, row: TraceRow<ThreadS
         trafic: trafic,
         sharedArrayBuffers: row.sharedArrayBuffers,
       },
-      (res: any, len: number, transfer: boolean,isEmpty:boolean): void => {
+      (res: any, len: number, transfer: boolean, isEmpty: boolean): void => {
         if (isEmpty) {
           resolve(true);
-        }else{
+        } else {
           resolve(arrayBufferHandler(transfer ? res : row.sharedArrayBuffers, len));
         }
       }
diff --git a/ide/src/trace/database/data-trafic/utils/DataFilter.ts b/ide/src/trace/database/data-trafic/utils/DataFilter.ts
index 8eceab24811ff2ff951e98223b5c0b3fcb46ca8d..23ae955cac60ea711a971649dd9838e2472f14a0 100644
--- a/ide/src/trace/database/data-trafic/utils/DataFilter.ts
+++ b/ide/src/trace/database/data-trafic/utils/DataFilter.ts
@@ -21,7 +21,7 @@ export function filterData(
   width: number
 ): any[] {
   let pns = (endNS - startNS) / width; //每个像素多少ns
-  let slice = findRange(list, {startKey, durKey, startNS, endNS});
+  let slice = findRange(list, { startKey, durKey, startNS, endNS });
   let sum = 0;
   for (let i = 0; i < slice.length; i++) {
     if (i === slice.length - 1) {
@@ -61,7 +61,7 @@ export function filterDataByLayer(
   width: number
 ): any[] {
   let pns = (endNS - startNS) / width; //每个像素多少ns
-  let sliceArray = findRange(list, {startKey, durKey, startNS, endNS});
+  let sliceArray = findRange(list, { startKey, durKey, startNS, endNS });
   let groups = groupBy(sliceArray, layerKey);
   let res: any[] = [];
   Reflect.ownKeys(groups).map((key: any) => {
@@ -107,8 +107,9 @@ export function filterDataByGroup(
   endNS: number,
   width: number,
   valueKey?: string,
-  filter?: (a: any) => boolean): any[] {
-  let arr = findRange(list, {startKey, durKey, startNS, endNS})
+  filter?: (a: any) => boolean
+): any[] {
+  let arr = findRange(list, { startKey, durKey, startNS, endNS });
   arr = arr.map((it) => {
     it.px = Math.floor(it[startKey] / ((endNS - startNS) / width));
     return it;
@@ -118,14 +119,14 @@ export function filterDataByGroup(
   Reflect.ownKeys(group).map((key: any): void => {
     let arr = group[key] as any[];
     if (arr.length > 0) {
-      res.add(arr.reduce((p, c) => (p[durKey] > c[durKey]) ? p : c));
+      res.add(arr.reduce((p, c) => (p[durKey] > c[durKey] ? p : c)));
       if (valueKey) {
-        res.add(arr.reduce((p, c) => (p[valueKey] > c[valueKey]) ? p : c));
+        res.add(arr.reduce((p, c) => (p[valueKey] > c[valueKey] ? p : c)));
       }
       if (filter) {
-        let filterArr = arr.filter(a => filter(a));
+        let filterArr = arr.filter((a) => filter(a));
         if (filterArr && filterArr.length > 0) {
-          res.add(filterArr.reduce((p, c) => (p[durKey] > c[durKey]) ? p : c));
+          res.add(filterArr.reduce((p, c) => (p[durKey] > c[durKey] ? p : c)));
         }
       }
     }
@@ -133,6 +134,35 @@ export function filterDataByGroup(
   return [...res];
 }
 
+function filterDataByGroupWithoutValue(
+  list: any[],
+  startKey: string,
+  durKey: string,
+  startNS: number,
+  endNS: number,
+  width: number
+) {
+  let arr: any[] = [];
+  // 标志位，判定何时进行新一轮数据统计处理
+  let flag: number = -1;
+  for (let i = 0; i < list.length; i++) {
+    // 筛选符合判断条件的数据，作进一步处理
+    if (list[i][startKey] + list[i][durKey] >= startNS && list[i][startKey] <= endNS) {
+      // 获取当前数据的像素值
+      const px: number = Math.floor(list[i][startKey] / ((endNS - startNS) / width));
+      list[i].px = px;
+      if (flag === px && arr[arr.length - 1] && list[i][durKey] > arr[arr.length - 1][durKey]) {
+        arr[arr.length - 1] = list[i];
+      }
+      if (flag !== px) {
+        flag = px;
+        arr.push(list[i]);
+      }
+    }
+  }
+  return arr;
+}
+
 export function filterDataByGroupLayer(
   list: any[],
   layerKey: string,
@@ -142,17 +172,18 @@ export function filterDataByGroupLayer(
   endNS: number,
   width: number
 ): any[] {
-  let arr = findRange(list, {startKey, durKey, startNS, endNS});
+  let arr = findRange(list, { startKey, durKey, startNS, endNS });
   arr = arr.map((it) => {
     it.px = Math.floor(it[startKey] / ((endNS - startNS) / width) + it[layerKey] * width);
     //设置临时变量durTmp 用于参与计算，分组后有dur为-1的数据按最长宽度显示
-    it.durTmp = (it[durKey] === -1 || it[durKey] === null || it[durKey] === undefined) ? (endNS - it[startKey]) : it[durKey];
+    it.durTmp =
+      it[durKey] === -1 || it[durKey] === null || it[durKey] === undefined ? endNS - it[startKey] : it[durKey];
     return it;
   });
   let group = groupBy(arr, 'px');
   let res: any[] = [];
   Reflect.ownKeys(group).map((key: any) => {
-    let childArray = (group[key] as any[]).reduce((p, c) => (p.durTmp > c.durTmp) ? p : c);
+    let childArray = (group[key] as any[]).reduce((p, c) => (p.durTmp > c.durTmp ? p : c));
     res.push(childArray);
   });
   return res;
@@ -174,5 +205,8 @@ function findRange(
     endNS: number;
   }
 ): Array<any> {
-  return fullData.filter(it => it[condition.startKey] + it[condition.durKey] >= condition.startNS && it[condition.startKey] <= condition.endNS);
+  return fullData.filter(
+    (it) =>
+      it[condition.startKey] + it[condition.durKey] >= condition.startNS && it[condition.startKey] <= condition.endNS
+  );
 }
diff --git a/ide/src/trace/database/data-trafic/utils/ExecProtoForWorker.ts b/ide/src/trace/database/data-trafic/utils/ExecProtoForWorker.ts
index 6f03cdb963a0137d1a33a8537c19f82e67e30210..63b333ea8fa2eaaeab8bb6e47834019287dcec4e 100644
--- a/ide/src/trace/database/data-trafic/utils/ExecProtoForWorker.ts
+++ b/ide/src/trace/database/data-trafic/utils/ExecProtoForWorker.ts
@@ -71,12 +71,13 @@ import { nativeMemoryDataHandler } from '../NativeMemoryDataReceiver';
 import { frameAnimationReceiver, frameDynamicReceiver, frameSpacingReceiver } from '../FrameDynamicEffectReceiver';
 import {
   energySysEventReceiver,
-  hiSysEnergyAnomalyDataReceiver, hiSysEnergyPowerReceiver,
-  hiSysEnergyStateReceiver
+  hiSysEnergyAnomalyDataReceiver,
+  hiSysEnergyPowerReceiver,
+  hiSysEnergyStateReceiver,
 } from '../EnergySysEventReceiver';
-import { clearMemoryCache } from "./AllMemoryCache";
+import { clearMemoryCache } from './AllMemoryCache';
 import { cpuFreqDataReceiver } from '../cpu/CpuFreqDataReceiver';
-import { lostFrameReceiver } from './../LostFrameReceiver'
+import { lostFrameReceiver } from './../LostFrameReceiver';
 import { sliceReceiver, sliceSPTReceiver } from '../SliceReceiver';
 
 const traficHandlers: Map<number, any> = new Map<number, any>([]);
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
index 1592c9c628184bedb9813639354427e9e28455d4..4bf1fbe010cd5fc845953d89979262f801e9f735 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
@@ -69,13 +69,9 @@ export class MerageBean extends ChartStruct {
   parent: MerageBean | undefined = undefined;
   id: string = '';
   parentId: string = '';
-  symbolName: string = '';
-  symbol: string = '';
-  libName: string = '';
-  path: string = '';
-  self: string = '0s';
-  weight: string = '';
-  weightPercent: string = '';
+  self?: string = '0s';
+  weight?: string;
+  weightPercent?: string;
   selfDur: number = 0;
   dur: number = 0;
   pid: number = 0;
@@ -132,7 +128,7 @@ class MerageBeanDataSplit {
   }
 
   recursionChargeInitTree(splitMapData: any, node: MerageBean, symbolName: string, isSymbol: boolean): void {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
+    if ((isSymbol && node.symbol == symbolName) || (!isSymbol && node.lib == symbolName)) {
       (splitMapData[symbolName] = splitMapData[symbolName] || []).push(node);
       node.isStore++;
     }
@@ -144,7 +140,7 @@ class MerageBeanDataSplit {
   }
 
   recursionPruneInitTree(splitMapData: any, node: MerageBean, symbolName: string, isSymbol: boolean): void {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
+    if ((isSymbol && node.symbol == symbolName) || (!isSymbol && node.lib == symbolName)) {
       (splitMapData[symbolName] = splitMapData[symbolName] || []).push(node);
       node.isStore++;
       this.pruneChildren(splitMapData, node, symbolName);
@@ -157,7 +153,7 @@ class MerageBeanDataSplit {
 
   //symbol lib prune
   recursionPruneTree(node: MerageBean, symbolName: string, isSymbol: boolean): void {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
+    if ((isSymbol && node.symbol == symbolName) || (!isSymbol && node.lib == symbolName)) {
       node.parent && node.parent.children.splice(node.parent.children.indexOf(node), 1);
     } else {
       node.children.forEach((child) => {
@@ -197,7 +193,7 @@ class MerageBeanDataSplit {
     allProcess.forEach((item) => {
       item.children = [];
       this.recursionChargeByRule(splitMapData, item, this.systmeRuleName, (node) => {
-        return node.path.startsWith(this.systmeRuleName);
+        return node.lib.startsWith(this.systmeRuleName);
       });
     });
   }
@@ -263,9 +259,9 @@ class MerageBeanDataSplit {
   findSearchNode(data: MerageBean[], search: string, parentSearch: boolean): void {
     search = search.toLocaleLowerCase();
     data.forEach((item) => {
-      if ((item.symbolName && item.symbolName.toLocaleLowerCase().includes(search)) || parentSearch) {
+      if ((item.symbol && item.symbol.toLocaleLowerCase().includes(search)) || parentSearch) {
         item.searchShow = true;
-        item.isSearch = item.symbolName != undefined && item.symbolName.toLocaleLowerCase().includes(search);
+        item.isSearch = item.symbol != undefined && item.symbol.toLocaleLowerCase().includes(search);
         let parentNode = item.parent;
         while (parentNode && !parentNode.searchShow) {
           parentNode.searchShow = true;
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
index 249f268b813ca9b6cd5e8ec8044471d5be8b4f3a..553fc06d1305404c183e6755d8d6d6b0eda91603 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
@@ -777,10 +777,10 @@ and s.start_ts <= ${selectionParam.rightNs} + t.start_ts ${sqlFilter} and callch
       totalCount += sample.dur;
       let callChains = this.createThreadAndType(sample);
       let minDepth = 2;
-      if (this.isHideEvent){
+      if (this.isHideEvent) {
         minDepth--;
       }
-      if (this.isHideThread){
+      if (this.isHideThread) {
         minDepth--;
       }
       if (callChains.length === minDepth) {
@@ -797,7 +797,7 @@ and s.start_ts <= ${selectionParam.rightNs} + t.start_ts ${sqlFilter} and callch
           this.currentTreeList.push(root);
         }
         FileMerageBean.merageCallChainSample(root, callChains[topIndex], sample, false);
-        if (callChains.length > 1){
+        if (callChains.length > 1) {
           this.merageChildrenByIndex(root, callChains, topIndex, sample, isTopDown);
         }
       }
@@ -813,8 +813,7 @@ and s.start_ts <= ${selectionParam.rightNs} + t.start_ts ${sqlFilter} and callch
         let fileMerageBean = new FileMerageBean(); //新增进程的节点数据
         fileMerageBean.canCharge = false;
         fileMerageBean.isProcess = true;
-        fileMerageBean.symbolName = mergeData.processName;
-        fileMerageBean.symbol = fileMerageBean.symbolName;
+        fileMerageBean.symbol = mergeData.processName;
         fileMerageBean.children.push(mergeData);
         fileMerageBean.initChildren.push(mergeData);
         fileMerageBean.dur = mergeData.dur;
@@ -930,17 +929,17 @@ and s.start_ts <= ${selectionParam.rightNs} + t.start_ts ${sqlFilter} and callch
     if (currentNode.pathId === -1) {
       currentNode.canCharge = false;
       currentNode.symbol = currentNode.ip;
-      currentNode.symbolName = currentNode.symbol;
-      currentNode.libName = '';
-      currentNode.path = '';
+      currentNode.symbol = currentNode.symbol;
+      currentNode.lib = '';
+      currentNode.lib = '';
     } else {
       const dataCache = DataCache.getInstance();
       currentNode.symbol = dataCache.dataDict?.get(currentNode.symbolsId) || currentNode.ip || 'unknown';
-      currentNode.path = dataCache.dataDict?.get(currentNode.pathId) || 'unknown';
-      currentNode.libName = setFileName(currentNode.path);
-      currentNode.lib = currentNode.libName;
+      currentNode.lib = dataCache.dataDict?.get(currentNode.pathId) || 'unknown';
+      currentNode.lib = setFileName(currentNode.lib);
+      currentNode.lib = currentNode.lib;
       currentNode.addr = currentNode.ip;
-      currentNode.symbolName = `${currentNode.symbol} (${currentNode.libName})`;
+      currentNode.symbol = `${currentNode.symbol} (${currentNode.lib})`;
     }
   }
   public resolvingAction(params: any[]): FileMerageBean[] {
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
index 976fec78d053c71bacecba2b50a04e13499016da..09ce2aee9c0bfcca0e8b110a2732accb39add5e4 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
@@ -394,10 +394,8 @@ export class ProcedureLogicWorkerNativeMemory extends LogicHandler {
       target.depth = frame.depth;
       target.addr = frame.addr;
       target.symbol = this.groupCutFilePath(frame.symbolId, this.dataCache.dataDict.get(frame.symbolId) || '') ?? '';
-      target.library = this.groupCutFilePath(frame.fileId, this.dataCache.dataDict.get(frame.fileId) || '') ?? '';
-      target.title = `[ ${target.symbol} ]  ${target.library}`;
-      target.type =
-        target.library.endsWith('.so.1') || target.library.endsWith('.dll') || target.library.endsWith('.so') ? 0 : 1;
+      target.lib = this.groupCutFilePath(frame.fileId, this.dataCache.dataDict.get(frame.fileId) || '') ?? '';
+      target.type = target.lib.endsWith('.so.1') || target.lib.endsWith('.dll') || target.lib.endsWith('.so') ? 0 : 1;
       arr.push(target);
     });
     return arr;
@@ -775,8 +773,7 @@ export class ProcedureLogicWorkerNativeMemory extends LogicHandler {
         threadMerageData.canCharge = false;
         threadMerageData.type = -1;
         threadMerageData.isThread = true;
-        threadMerageData.symbolName = `${merageData.threadName || 'Thread'} [${merageData.tid}]`;
-        threadMerageData.symbol = threadMerageData.symbolName;
+        threadMerageData.symbol = `${merageData.threadName || 'Thread'} [${merageData.tid}]`;
         threadMerageData.children.push(merageData);
         threadMerageData.initChildren.push(merageData);
         threadMerageData.count = merageData.count || 1;
@@ -1045,7 +1042,7 @@ export class ProcedureLogicWorkerNativeMemory extends LogicHandler {
       return;
     }
     node.symbol = match[1].trim();
-    node.path = match[2].replace(/^url:/, '');
+    node.lib = match[2].replace(/^url:/, '');
   }
 
   private isHap(path: string): boolean {
@@ -1058,8 +1055,8 @@ export class ProcedureLogicWorkerNativeMemory extends LogicHandler {
   }
 
   setMerageName(currentNode: NativeHookCallInfo): void {
-    currentNode.path = this.dataCache.dataDict.get(currentNode.fileId) || 'unknown';
-    if (this.isHap(currentNode.path)) {
+    currentNode.lib = this.dataCache.dataDict.get(currentNode.fileId) || 'unknown';
+    if (this.isHap(currentNode.lib)) {
       const fullName = this.dataCache.dataDict.get(currentNode.symbolId);
       this.extractSymbolAndPath(currentNode, fullName);
     } else {
@@ -1067,15 +1064,11 @@ export class ProcedureLogicWorkerNativeMemory extends LogicHandler {
         this.groupCutFilePath(currentNode.symbolId, this.dataCache.dataDict.get(currentNode.symbolId) || '') ??
         'unknown';
     }
-    currentNode.libName = setFileName(currentNode.path);
-    currentNode.lib = currentNode.path;
-    currentNode.symbolName = `[${currentNode.symbol}] ${currentNode.libName}`;
+    currentNode.lib = setFileName(currentNode.lib);
+    currentNode.lib = currentNode.lib;
+    currentNode.symbol = `${currentNode.symbol} (${currentNode.lib})`;
     currentNode.type =
-      currentNode.libName.endsWith('.so.1') ||
-      currentNode.libName.endsWith('.dll') ||
-      currentNode.libName.endsWith('.so')
-        ? 0
-        : 1;
+      currentNode.lib.endsWith('.so.1') || currentNode.lib.endsWith('.dll') || currentNode.lib.endsWith('.so') ? 0 : 1;
   }
   clearSplitMapData(symbolName: string): void {
     delete this.splitMapData[symbolName];
@@ -1167,10 +1160,8 @@ export class NativeHookStatistics {
 export class NativeHookCallInfo extends MerageBean {
   #totalCount: number = 0;
   #totalSize: number = 0;
-  library: string = '';
   symbolId: number = 0;
   fileId: number = 0;
-  title: string = '';
   count: number = 0;
   countValue: string = '';
   countPercent: string = '';
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
index d5a2a492a77218209edaf11df0494639a02efd75..1395db9025f385810a5682d1c23fd6a0ce990cfd 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
@@ -374,20 +374,11 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
   setPerfCallChainFrameName(callChain: PerfCallChain): void {
     //设置调用栈的名称
     callChain.canCharge = true;
-    if (callChain.symbolId === -1) {
-      if (this.filesData[callChain.fileId] && this.filesData[callChain.fileId].length > 0) {
-        callChain.fileName = this.filesData[callChain.fileId][0].fileName;
-        callChain.path = this.filesData[callChain.fileId][0].path;
-      } else {
-        callChain.fileName = 'unknown';
-      }
+    if (this.filesData[callChain.fileId] && this.filesData[callChain.fileId].length > 0) {
+      callChain.fileName = this.filesData[callChain.fileId][0].fileName;
+      callChain.path = this.filesData[callChain.fileId][0].path;
     } else {
-      if (this.filesData[callChain.fileId] && this.filesData[callChain.fileId].length > callChain.symbolId) {
-        callChain.fileName = this.filesData[callChain.fileId][callChain.symbolId].fileName;
-        callChain.path = this.filesData[callChain.fileId][callChain.symbolId].path;
-      } else {
-        callChain.fileName = 'unknown';
-      }
+      callChain.fileName = 'unknown';
     }
   }
 
diff --git a/ide/src/trace/database/sql/Ability.sql.ts b/ide/src/trace/database/sql/Ability.sql.ts
index 9dd6c81f0735b7b2d937b6a1d72fa11353c98694..3205768fa7e8c79d969c5a52f8fe7bef92066259 100644
--- a/ide/src/trace/database/sql/Ability.sql.ts
+++ b/ide/src/trace/database/sql/Ability.sql.ts
@@ -17,14 +17,14 @@ import {
   GpuMemoryComparison,
   SystemCpuSummary,
   SystemDiskIOSummary,
-  SystemNetworkSummary
-} from "../../bean/AbilityMonitor";
-import {query} from "../SqlLite";
-import {CpuAbilityMonitorStruct} from "../ui-worker/ProcedureWorkerCpuAbility";
-import {MemoryAbilityMonitorStruct} from "../ui-worker/ProcedureWorkerMemoryAbility";
-import {DiskAbilityMonitorStruct} from "../ui-worker/ProcedureWorkerDiskIoAbility";
-import {NetworkAbilityMonitorStruct} from "../ui-worker/ProcedureWorkerNetworkAbility";
-import type {SnapshotStruct} from "../ui-worker/ProcedureWorkerSnapshot";
+  SystemNetworkSummary,
+} from '../../bean/AbilityMonitor';
+import { query } from '../SqlLite';
+import { CpuAbilityMonitorStruct } from '../ui-worker/ProcedureWorkerCpuAbility';
+import { MemoryAbilityMonitorStruct } from '../ui-worker/ProcedureWorkerMemoryAbility';
+import { DiskAbilityMonitorStruct } from '../ui-worker/ProcedureWorkerDiskIoAbility';
+import { NetworkAbilityMonitorStruct } from '../ui-worker/ProcedureWorkerNetworkAbility';
+import type { SnapshotStruct } from '../ui-worker/ProcedureWorkerSnapshot';
 
 export const getTabCpuAbilityData = (leftNs: number, rightNs: number): Promise<Array<SystemCpuSummary>> =>
   query<SystemCpuSummary>(
@@ -254,7 +254,6 @@ export const queryCachedFilesAbilityData = (id: string): Promise<Array<MemoryAbi
     { $id: id }
   );
 
-
 export const queryCompressedAbilityData = (id: string): Promise<Array<MemoryAbilityMonitorStruct>> =>
   query(
     'queryCompressedAbilityData',
@@ -569,5 +568,3 @@ export const getTabGpuMemoryComparisonData = (startNs: number): Promise<Array<Gp
                 `,
     { $startNs: startNs }
   );
-
-
diff --git a/ide/src/trace/database/sql/Clock.sql.ts b/ide/src/trace/database/sql/Clock.sql.ts
index e9f4b77c2178a62170ba223d6d6895b692457028..9d9558c860789aabdf84791ac7e3a9dc1af417dd 100644
--- a/ide/src/trace/database/sql/Clock.sql.ts
+++ b/ide/src/trace/database/sql/Clock.sql.ts
@@ -12,14 +12,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {query} from "../SqlLite";
-import {ClockStruct} from "../ui-worker/ProcedureWorkerClock";
+import { query } from '../SqlLite';
+import { ClockStruct } from '../ui-worker/ProcedureWorkerClock';
 
 export const queryClockData = (): Promise<
   Array<{
     name: string;
     num: number;
     srcname: string;
+    maxValue?: number;
   }>
 > =>
   query(
@@ -78,9 +79,12 @@ export const queryScreenState = (): Promise<Array<ClockStruct>> =>
 export const queryRealTime = (): Promise<
   Array<{
     ts: number;
-    name: string
+    name: string;
   }>
-> => query('queryRealTime', `SELECT
+> =>
+  query(
+    'queryRealTime',
+    `SELECT
   ( CASE WHEN CS.clock_name = 'realtime' THEN CS.ts ELSE CS.ts - TR.start_ts END ) AS ts,
   CS.clock_name AS name 
   FROM
@@ -88,4 +92,5 @@ export const queryRealTime = (): Promise<
   trace_range AS TR 
   WHERE
   CS.clock_name = 'realtime' 
-  OR CS.clock_name = 'boottime';`);
+  OR CS.clock_name = 'boottime';`
+  );
diff --git a/ide/src/trace/database/sql/Cpu.sql.ts b/ide/src/trace/database/sql/Cpu.sql.ts
index eb3e5c73ec6b16d63050ce3fb48524db7e83d9fd..8790b0da5e41b8a357ed0edaee398677c3ed0df0 100644
--- a/ide/src/trace/database/sql/Cpu.sql.ts
+++ b/ide/src/trace/database/sql/Cpu.sql.ts
@@ -12,14 +12,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { KeyPathStruct } from "../../bean/KeyPathStruct";
-import { CpuStruct } from "../ui-worker/cpu/ProcedureWorkerCPU";
-import { query } from "../SqlLite";
-import { CpuUsage, Freq } from "../../bean/CpuUsage";
-import { Counter } from "../../bean/BoxSelection";
-import { CpuFreqStruct } from "../ui-worker/ProcedureWorkerFreq";
-import { CpuFreqLimitsStruct } from "../ui-worker/cpu/ProcedureWorkerCpuFreqLimits";
-import { CpuFreqRowLimit } from "../../component/chart/SpFreqChart";
+import { KeyPathStruct } from '../../bean/KeyPathStruct';
+import { CpuStruct } from '../ui-worker/cpu/ProcedureWorkerCPU';
+import { query } from '../SqlLite';
+import { CpuUsage, Freq } from '../../bean/CpuUsage';
+import { Counter } from '../../bean/BoxSelection';
+import { CpuFreqStruct } from '../ui-worker/ProcedureWorkerFreq';
+import { CpuFreqLimitsStruct } from '../ui-worker/cpu/ProcedureWorkerCpuFreqLimits';
+import { CpuFreqRowLimit } from '../../component/chart/SpFreqChart';
 
 export const queryCpuKeyPathData = (threads: Array<KeyPathStruct>): Promise<Array<CpuStruct>> => {
   const sqlArray: Array<string> = [];
@@ -151,7 +151,6 @@ export const getTabCpuFreq = (cpus: Array<number>, leftNs: number, rightNs: numb
     { $leftNS: leftNs, $rightNS: rightNs }
   );
 
-
 export const getTabCounters = (processFilterIds: Array<number>, virtualFilterIds: Array<number>, startTime: number) => {
   let processSql = `select
         t1.filter_id as trackId,
@@ -475,7 +474,7 @@ export const queryCpuFreqUsageData = (
     startNS: number;
     filter_id: number;
     value: number;
-    dur: number
+    dur: number;
   }>
 > =>
   query(
@@ -496,7 +495,7 @@ export const queryCpuFreqUsageData = (
 export const queryCpuFreqFilterId = (): Promise<
   Array<{
     id: number;
-    cpu: number
+    cpu: number;
   }>
 > =>
   query(
@@ -694,4 +693,4 @@ export const getCpuLimitFreqMax = (filterIds: string): Promise<Array<any>> => {
 `,
     {}
   );
-};
\ No newline at end of file
+};
diff --git a/ide/src/trace/database/sql/Dma.sql.ts b/ide/src/trace/database/sql/Dma.sql.ts
index be120467a7b23e6f5a03ee55529409376b1b0816..49c505485cd1155983b897fbedb9386b7e2c66cc 100644
--- a/ide/src/trace/database/sql/Dma.sql.ts
+++ b/ide/src/trace/database/sql/Dma.sql.ts
@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 //   VM Tracker Dma泳道图
-import {Dma, DmaComparison} from "../../bean/AbilityMonitor";
-import {query} from "../SqlLite";
-import {SnapshotStruct} from "../ui-worker/ProcedureWorkerSnapshot";
+import { Dma, DmaComparison } from '../../bean/AbilityMonitor';
+import { query } from '../SqlLite';
+import { SnapshotStruct } from '../ui-worker/ProcedureWorkerSnapshot';
 
 export const queryDmaSampsData = (process: number): Promise<Array<SnapshotStruct>> =>
   query(
@@ -175,4 +175,4 @@ export const getTabDmaVmTrackerComparisonData = (startNs: number, processId: num
     $pid = S.ipid
                 `,
     { $startNs: startNs, $pid: processId }
-  );
\ No newline at end of file
+  );
diff --git a/ide/src/trace/database/sql/Func.sql.ts b/ide/src/trace/database/sql/Func.sql.ts
index 4218cd9d3b0b064ea85272b9791b12d506899e87..d004dd119967d844f2eb709aa03e8acb876ce98e 100644
--- a/ide/src/trace/database/sql/Func.sql.ts
+++ b/ide/src/trace/database/sql/Func.sql.ts
@@ -115,62 +115,46 @@ export const queryAllFuncNames = (): Promise<Array<any>> => {
   );
 };
 
-export const queryProcessAsyncFunc = (_funName?: string): Promise<Array<any>> =>
+export const queryProcessAsyncFunc = (traceRange: { startTs: number; endTs: number }): Promise<Array<any>> =>
   query(
     'queryProcessAsyncFunc',
-    `
-select tid,
-    P.pid,
-    A.name as threadName,
-    is_main_thread,
-    c.callid as track_id,
-    c.ts-D.start_ts as startTs,
-    c.dur,
-    c.name as funName,
-    c.parent_id,
-    c.id,
-    c.cookie,
-    c.depth,
-    c.argsetid
-from thread A,trace_range D
-left join callstack C on A.id = C.callid
-left join process P on P.id = A.ipid
-where startTs not null and cookie not null ${_funName ? 'funName=$funName' : ''};`,
-    {
-      funName: _funName,
-    }
-  );
-
-export const getFunDataByTid = (tid: number, ipid: number): Promise<Array<FuncStruct>> =>
-  query(
-    'getFunDataByTid',
-    `
-    select 
-    c.ts-D.start_ts as startTs,
-    c.dur,
-    c.name as funName,
-    c.argsetid,
-    c.depth,
-    c.id as id,
-    A.itid as itid,
-    A.ipid as ipid
-from thread A,trace_range D
-left join callstack C on A.id = C.callid
-where startTs not null and c.cookie is null and tid = $tid and A.ipid = $ipid`,
-    { $tid: tid, $ipid: ipid }
+    `select tid,
+        P.pid,
+        c.ts-${traceRange.startTs} as startTs,
+        c.dur,
+        c.id,
+        c.depth
+    from thread A
+    left join callstack C on A.id = C.callid
+    left join process P on P.id = A.ipid
+    where startTs not null and cookie not null;`,
+    {}
   );
 
 export const getMaxDepthByTid = (): Promise<Array<any>> =>
   query(
     'getMaxDepthByTid',
-    `
-    select
-tid,
-ipid,
-    MAX(c.depth + 1) as maxDepth
-from thread A
-left join callstack C on A.id = C.callid
-where c.ts not null and c.cookie is null group by tid,ipid`,
+    `SELECT 
+      tid,
+      ipid,
+      maxDepth 
+    FROM
+      thread T
+      LEFT JOIN (
+      SELECT
+        callid,
+        MAX( c.depth + 1 ) AS maxDepth 
+      FROM
+        callstack C 
+      WHERE
+        c.ts IS NOT NULL 
+        AND c.cookie IS NULL 
+      GROUP BY
+        callid 
+      ) C ON T.id = C.callid 
+    WHERE
+      maxDepth NOT NULL
+`,
     {}
   );
 
@@ -233,13 +217,10 @@ export const queryFuncRowData = (funcName: string, tIds: number): Promise<Array<
     { $search: funcName }
   );
 
-  export const fuzzyQueryFuncRowData = (
-    funcName: string,
-    tIds: number
-  ): Promise<Array<SearchFuncBean>> =>
-    query(
-      'fuzzyQueryFuncRowData',
-      `select 
+export const fuzzyQueryFuncRowData = (funcName: string, tIds: number): Promise<Array<SearchFuncBean>> =>
+  query(
+    'fuzzyQueryFuncRowData',
+    `select 
         c.name as funName,
         c.ts - r.start_ts as startTime,
         c.ts - r.start_ts + c.dur as endTime,
@@ -261,8 +242,8 @@ export const queryFuncRowData = (funcName: string, tIds: number): Promise<Array<
       and 
         t.tid = ${tIds} 
               `,
-      { $search: funcName }
-    );
+    { $search: funcName }
+  );
 
 export const getTabSlicesAsyncFunc = (
   asyncNames: Array<string>,
diff --git a/ide/src/trace/database/sql/Gpu.sql.ts b/ide/src/trace/database/sql/Gpu.sql.ts
index ced201410e01828e3cba7e0f4ba26fcfd85747d2..d701e80f0e5ef3b03fd644dec56f05157ebf8984 100644
--- a/ide/src/trace/database/sql/Gpu.sql.ts
+++ b/ide/src/trace/database/sql/Gpu.sql.ts
@@ -13,8 +13,8 @@
  * limitations under the License.
  */
 //  VM Tracker Gpu Resourcet泳道图
-import type {SnapshotStruct} from "../ui-worker/ProcedureWorkerSnapshot";
-import {query} from "../SqlLite";
+import type { SnapshotStruct } from '../ui-worker/ProcedureWorkerSnapshot';
+import { query } from '../SqlLite';
 
 export const queryGpuResourceData = (categoryNameId: number): Promise<Array<SnapshotStruct>> =>
   query(
@@ -70,7 +70,6 @@ export const queryGpuResourceTabData = (
     GROUP by ts, channelId`
   );
 
-
 export const queryGpuTotalType = (): Promise<Array<{ id: number; data: string }>> =>
   query(
     'queryGpuTotalType',
@@ -247,4 +246,4 @@ export const queryGpuDur = (id: number): Promise<any> =>
         FROM gpu_slice
         WHERE frame_row = $id;`,
     { $id: id }
-  );
\ No newline at end of file
+  );
diff --git a/ide/src/trace/database/sql/Irq.sql.ts b/ide/src/trace/database/sql/Irq.sql.ts
index 96cf6e1c08778c106b2b81c8f6090f0f4d944b6b..2f21bff568f881ca72b5d99e14f950c45f47e893 100644
--- a/ide/src/trace/database/sql/Irq.sql.ts
+++ b/ide/src/trace/database/sql/Irq.sql.ts
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {query} from "../SqlLite";
-import {IrqStruct} from "../ui-worker/ProcedureWorkerIrq";
+import { query } from '../SqlLite';
+import { IrqStruct } from '../ui-worker/ProcedureWorkerIrq';
 
 export const queryIrqList = (): Promise<Array<{ name: string; cpu: number }>> =>
   query('queryIrqList', `select cat as name,callid as cpu from irq where cat!= 'ipi' group by cat,callid`);
@@ -77,4 +77,4 @@ where callid in (${callIds.join(',')})
 group by irqName;
     `;
   return query('querySoftIrqDataBoxSelect', callIds.length > 0 ? sqlIrq : '', {});
-};
\ No newline at end of file
+};
diff --git a/ide/src/trace/database/sql/Janks.sql.ts b/ide/src/trace/database/sql/Janks.sql.ts
index e62de9559dc3677e1a5bd552d2c1d2d9cd2866c9..04163613e754b94785d40251c37e3cdce8306098 100644
--- a/ide/src/trace/database/sql/Janks.sql.ts
+++ b/ide/src/trace/database/sql/Janks.sql.ts
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {JanksStruct} from "../../bean/JanksStruct";
-import {query} from "../SqlLite";
+import { JanksStruct } from '../../bean/JanksStruct';
+import { query } from '../SqlLite';
 
 export const queryExpectedFrameDate = (): Promise<Array<JanksStruct>> =>
   query(
@@ -90,7 +90,8 @@ export const queryJumpJanksData = (processId: number, vsync: number): Promise<Ar
             p.name AS cmdline
         FROM frame_slice AS fs, trace_range as TR
         LEFT JOIN process AS p ON fs.ipid = p.ipid
-        WHERE fs.type = 0 and p.pid = $processId and fs.vsync = $vsync;`,{ $processId: processId, $vsync: vsync }
+        WHERE fs.type = 0 and p.pid = $processId and fs.vsync = $vsync;`,
+    { $processId: processId, $vsync: vsync }
   );
 export const queryAllJankProcess = (): Promise<
   Array<{
@@ -184,10 +185,7 @@ export const queryActualFrameDate = (): Promise<Array<any>> =>
        AND fs.flag <> 2
      ORDER BY ts;`
   );
-export const querySelectRangeData = (
-  allPid: Array<number>,
-  leftNs: number,
-  rightNs: number): Promise<Array<any>> =>
+export const querySelectRangeData = (allPid: Array<number>, leftNs: number, rightNs: number): Promise<Array<any>> =>
   query(
     'querySelectRangeData',
     `
@@ -210,4 +208,4 @@ export const querySelectRangeData = (
           AND startTs + dur >= ${leftNs}
           AND startTs <= ${rightNs}
           AND p.pid IN (${allPid.join(',')});`
-  );
\ No newline at end of file
+  );
diff --git a/ide/src/trace/database/sql/Ltpo.sql.ts b/ide/src/trace/database/sql/Ltpo.sql.ts
index 594afa0ee5473bf4f659db23ff7d80299cb36d4e..9691ffe18310cc6dfa40a93c2fa66ca91cc2567a 100644
--- a/ide/src/trace/database/sql/Ltpo.sql.ts
+++ b/ide/src/trace/database/sql/Ltpo.sql.ts
@@ -12,50 +12,50 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LtpoStruct } from './../ui-worker/ProcedureWorkerLTPO'
-import {query} from "../SqlLite";
+import { LtpoStruct } from './../ui-worker/ProcedureWorkerLTPO';
+import { query } from '../SqlLite';
 
-export const queryPresentInfo =(): Promise <Array<LtpoStruct>> =>
+export const queryPresentInfo = (): Promise<Array<LtpoStruct>> =>
   query(
     'queryPresentInfo',
     `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('Present%'))
   AND name LIKE('H:Waiting for Present Fence%')`
-  )
+  );
 
-export const queryFanceNameList = ():Promise<Array<LtpoStruct>> =>
+export const queryFanceNameList = (): Promise<Array<LtpoStruct>> =>
   query(
     'queryFanceNameList',
     `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('RSHardwareThrea%'))
   AND name LIKE('H:Present Fence%')`
-  )
+  );
 
-export const queryFpsNameList = ():Promise<Array<LtpoStruct>> =>
+export const queryFpsNameList = (): Promise<Array<LtpoStruct>> =>
   query(
     'queryFpsNameList',
     `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('RSHardwareThrea%'))
   AND name LIKE('%Layers rate%')`
-  )
-export const queryRealFpsList = ():Promise<Array<LtpoStruct>> =>
+  );
+export const queryRealFpsList = (): Promise<Array<LtpoStruct>> =>
   query(
     'queryRealFpsList',
     `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('RSHardwareThrea%'))
   AND name LIKE('H:RSHardwareThread::PerformSetActiveMode%')`
-  )
-  export const querySignaledList = ():Promise<Array<LtpoStruct>> =>
+  );
+export const querySignaledList = (): Promise<Array<LtpoStruct>> =>
   query(
     'querySignaledList',
     `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('RSHardwareThrea%'))
     AND name LIKE('%has signaled')`
-  )
-  export const queryRSNowTimeList = ():Promise<Array<LtpoStruct>> =>
+  );
+export const queryRSNowTimeList = (): Promise<Array<LtpoStruct>> =>
   query(
     'queryRSNowTimeList',
     `SELECT ts,dur,name FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('render_service%'))
     AND name LIKE('H:ReceiveVsync dataCount:24bytes%')`
-  )
-  export const querySkipDataList = ():Promise<Array<LtpoStruct>> =>
+  );
+export const querySkipDataList = (): Promise<Array<LtpoStruct>> =>
   query(
     'querySkipDataList',
     `SELECT ts FROM "callstack" WHERE callid in (SELECT id FROM "thread" WHERE name LIKE('render_service%'))
     AND name LIKE('H:DisplayNodeSkip skip commit')`
-  )
+  );
diff --git a/ide/src/trace/database/sql/Memory.sql.ts b/ide/src/trace/database/sql/Memory.sql.ts
index 57af6d4c1b2d1ca399ae1f9fffa6d8cf0cce8afd..4a1c318f423e02aa53dda67e4981eff3e7e9bac7 100644
--- a/ide/src/trace/database/sql/Memory.sql.ts
+++ b/ide/src/trace/database/sql/Memory.sql.ts
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 //  VM Tracker Gpu Memory泳道图
-import type {SnapshotStruct} from "../ui-worker/ProcedureWorkerSnapshot";
-import {query} from "../SqlLite";
-import {GpuMemory, GpuMemoryComparison} from "../../bean/AbilityMonitor";
-import type {MemoryConfig} from "../../bean/MemoryConfig";
+import type { SnapshotStruct } from '../ui-worker/ProcedureWorkerSnapshot';
+import { query } from '../SqlLite';
+import { GpuMemory, GpuMemoryComparison } from '../../bean/AbilityMonitor';
+import type { MemoryConfig } from '../../bean/MemoryConfig';
 
 export const queryGpuMemoryData = (processId: number): Promise<Array<SnapshotStruct>> =>
   query(
@@ -468,4 +468,4 @@ export const queryisExistsPurgeableData = (ipid: number, isPin?: boolean): Promi
               ${pinSql})
         ) AS data_exists`
   );
-};
\ No newline at end of file
+};
diff --git a/ide/src/trace/database/sql/NativeHook.sql.ts b/ide/src/trace/database/sql/NativeHook.sql.ts
index b173065179f27f9b38793782789043c681dd214b..89d36d7a5efab8ab32a0357696d85d06b283cb50 100644
--- a/ide/src/trace/database/sql/NativeHook.sql.ts
+++ b/ide/src/trace/database/sql/NativeHook.sql.ts
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {query} from "../SqlLite";
-import {NativeHookMalloc, NativeHookProcess, NativeHookSampleQueryInfo} from "../../bean/NativeHook";
+import { query } from '../SqlLite';
+import { NativeHookMalloc, NativeHookProcess, NativeHookSampleQueryInfo } from '../../bean/NativeHook';
 
 export const queryNativeHookResponseTypes = (
   leftNs: number,
@@ -231,4 +231,4 @@ export const queryAllHookData = (rightNs: number, ipid: number): Promise<Array<N
     and
       n.start_ts between t.start_ts and ${rightNs} + t.start_ts`,
     { $rightNs: rightNs }
-  );
\ No newline at end of file
+  );
diff --git a/ide/src/trace/database/sql/ProcessThread.sql.ts b/ide/src/trace/database/sql/ProcessThread.sql.ts
index 21a93e502e643d572735ba1be3edcdbf213ed789..0920a966f8373e48786e3ee46d63d16afc78aaef 100644
--- a/ide/src/trace/database/sql/ProcessThread.sql.ts
+++ b/ide/src/trace/database/sql/ProcessThread.sql.ts
@@ -115,22 +115,22 @@ export const getTabBindersCount = (
     }
   );
 
-  export const querySchedThreadStates = (
-    pIds: Array<number>,
-    tIds: Array<number>,
-    leftStartNs: number,
-    rightEndNs: number
-  ): Promise<Array<any>> =>
-    query(
-      'getTabThreadStates',
-      `
+export const querySchedThreadStates = (
+  pIds: Array<number>,
+  tIds: Array<number>,
+  leftStartNs: number,
+  rightEndNs: number
+): Promise<Array<any>> =>
+  query(
+    'getTabThreadStates',
+    `
     select
       B.pid,
       B.tid,
       B.state,
-      B.dur,
+      ifnull(B.dur,0) as dur,
       B.ts,
-      B.dur + B.ts as endTs
+      ifnull(B.dur,0) + B.ts as endTs
     from
       thread_state AS B
     where
@@ -144,24 +144,23 @@ export const getTabBindersCount = (
     order by
       B.pid;
     `,
-      { $leftStartNs: leftStartNs, $rightEndNs: rightEndNs }
-    );
-  
-  export const querySingleCutData = (
-    funcName: string,
-    tIds: string,
-    leftStartNs: number,
-    rightEndNs: number
-  ): Promise<Array<any>> =>
-    query(
-      'querySingleCutData',
-      `
+    { $leftStartNs: leftStartNs, $rightEndNs: rightEndNs }
+  );
+
+export const querySingleCutData = (
+  funcName: string,
+  tIds: string,
+  leftStartNs: number,
+  rightEndNs: number
+): Promise<Array<any>> =>
+  query(
+    'querySingleCutData',
+    `
     select 
       c.ts as cycleStartTime,
-      c.ts + c.dur as cycleEndTime,
+      c.ts + ifnull(c.dur, 0) as cycleEndTime,
       t.tid,
-      p.pid,
-      c.dur
+      p.pid
       from
       callstack c 
     left join
@@ -179,18 +178,18 @@ export const getTabBindersCount = (
     order by
       c.ts
     `,
-      { $leftStartNs: leftStartNs, $rightEndNs: rightEndNs }
-    );
-  
-  export const queryLoopCutData = (
-    funcName: string,
-    tIds: string,
-    leftStartNs: number,
-    rightEndNs: number
-  ): Promise<Array<any>> =>
-    query(
-      'queryLoopCutData',
-      `
+    { $leftStartNs: leftStartNs, $rightEndNs: rightEndNs }
+  );
+
+export const queryLoopCutData = (
+  funcName: string,
+  tIds: string,
+  leftStartNs: number,
+  rightEndNs: number
+): Promise<Array<any>> =>
+  query(
+    'queryLoopCutData',
+    `
     select 
       c.ts as cycleStartTime,
       t.tid,
@@ -209,8 +208,8 @@ export const getTabBindersCount = (
     order by
       c.ts
     `,
-      { $leftStartNs: leftStartNs, $rightEndNs: rightEndNs }
-    );
+    { $leftStartNs: leftStartNs, $rightEndNs: rightEndNs }
+  );
 // 框选区域内sleeping的时间
 export const getTabSleepingTime = (tIds: Array<number>, leftNS: number, rightNS: number): Promise<Array<any>> =>
   query<SelectionData>(
diff --git a/ide/src/trace/database/sql/Sdk.sql.ts b/ide/src/trace/database/sql/Sdk.sql.ts
index 220d253a74247dca5735d5c497c7a6fb8d5df5ed..ef1f0bd5dd9c075f0c37a71c82157e3101623d3d 100644
--- a/ide/src/trace/database/sql/Sdk.sql.ts
+++ b/ide/src/trace/database/sql/Sdk.sql.ts
@@ -12,10 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {query} from "../SqlLite";
-import {CounterStruct} from "../ui-worker/ProduceWorkerSdkCounter";
-import {CounterSummary, SdkSliceSummary} from "../../bean/SdkSummary";
-import {SdkSliceStruct} from "../ui-worker/ProduceWorkerSdkSlice";
+import { query } from '../SqlLite';
+import { CounterStruct } from '../ui-worker/ProduceWorkerSdkCounter';
+import { CounterSummary, SdkSliceSummary } from '../../bean/SdkSummary';
+import { SdkSliceStruct } from '../ui-worker/ProduceWorkerSdkSlice';
 
 export const querySdkCount = (sql: string, componentId: number, args?: any): Promise<Array<any>> =>
   query('querySdkCount', sql, args, 'exec-sdk-' + componentId);
diff --git a/ide/src/trace/database/sql/Smaps.sql.ts b/ide/src/trace/database/sql/Smaps.sql.ts
index b07780ccdd528fb62156669c946cb14c1a74e23d..52abb036cf15b4c3a12a8cccda622c66166432ea 100644
--- a/ide/src/trace/database/sql/Smaps.sql.ts
+++ b/ide/src/trace/database/sql/Smaps.sql.ts
@@ -12,8 +12,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {query} from "../SqlLite";
-import {Smaps} from "../../bean/SmapsStruct";
+import { query } from '../SqlLite';
+import { Smaps } from '../../bean/SmapsStruct';
 
 export const querySmapsExits = (): Promise<Array<any>> =>
   query(
@@ -158,4 +158,4 @@ export const getTabSmapsStatisticSelectData = (leftNs: number, rightNs: number,
      group by type,path`,
     { $rightNs: rightNs, $leftNs: leftNs, $dur: dur },
     'exec'
-  );
\ No newline at end of file
+  );
diff --git a/ide/src/trace/database/sql/SqlLite.sql.ts b/ide/src/trace/database/sql/SqlLite.sql.ts
index 9429ab81fdcb0467893155b7360663091c8591ab..b500c83ffdf117408ccb7f13cad469e4d1476e9a 100644
--- a/ide/src/trace/database/sql/SqlLite.sql.ts
+++ b/ide/src/trace/database/sql/SqlLite.sql.ts
@@ -12,25 +12,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {FpsStruct} from "../ui-worker/ProcedureWorkerFPS";
-import {Counter, Fps} from "../../bean/BoxSelection";
-import {
-  NativeEvent,
-  NativeEventHeap,
-} from "../../bean/NativeHook";
-import {HeapTreeDataBean} from "../logic-worker/ProcedureLogicWorkerCommon";
-import {EnergyAnomalyStruct} from "../ui-worker/ProcedureWorkerEnergyAnomaly";
-import {SystemDetailsEnergy} from "../../bean/EnergyStruct";
-import {EnergyStateStruct} from "../ui-worker/ProcedureWorkerEnergyState";
-import {FileInfo} from "../../../js-heap/model/UiStruct";
-import {HeapEdge, HeapLocation, HeapNode, HeapSample} from "../../../js-heap/model/DatabaseStruct";
-import {TaskTabStruct} from "../../component/trace/sheet/task/TabPaneTaskFrames";
-import type {FrameAnimationStruct} from "../ui-worker/ProcedureWorkerFrameAnimation";
-import type {FrameDynamicStruct} from "../ui-worker/ProcedureWorkerFrameDynamic";
-import type {FrameSpacingStruct} from "../ui-worker/ProcedureWorkerFrameSpacing";
-import type {DeviceStruct} from "../../bean/FrameComponentBean";
-import {LogStruct} from "../ui-worker/ProcedureWorkerLog";
-import {query} from "../SqlLite";
+import { FpsStruct } from '../ui-worker/ProcedureWorkerFPS';
+import { Counter, Fps } from '../../bean/BoxSelection';
+import { NativeEvent, NativeEventHeap } from '../../bean/NativeHook';
+import { HeapTreeDataBean } from '../logic-worker/ProcedureLogicWorkerCommon';
+import { EnergyAnomalyStruct } from '../ui-worker/ProcedureWorkerEnergyAnomaly';
+import { SystemDetailsEnergy } from '../../bean/EnergyStruct';
+import { EnergyStateStruct } from '../ui-worker/ProcedureWorkerEnergyState';
+import { FileInfo } from '../../../js-heap/model/UiStruct';
+import { HeapEdge, HeapLocation, HeapNode, HeapSample } from '../../../js-heap/model/DatabaseStruct';
+import { TaskTabStruct } from '../../component/trace/sheet/task/TabPaneTaskFrames';
+import type { FrameAnimationStruct } from '../ui-worker/ProcedureWorkerFrameAnimation';
+import type { FrameDynamicStruct } from '../ui-worker/ProcedureWorkerFrameDynamic';
+import type { FrameSpacingStruct } from '../ui-worker/ProcedureWorkerFrameSpacing';
+import type { DeviceStruct } from '../../bean/FrameComponentBean';
+import { LogStruct } from '../ui-worker/ProcedureWorkerLog';
+import { query } from '../SqlLite';
 
 export const queryEventCountMap = (): Promise<
   Array<{
@@ -82,7 +79,6 @@ export const getTabFps = (leftNs: number, rightNs: number): Promise<Array<Fps>>
     { $leftNS: leftNs, $rightNS: rightNs }
   );
 
-
 export const getTabVirtualCounters = (virtualFilterIds: Array<number>, startTime: number) =>
   query<Counter>(
     'getTabVirtualCounters',
@@ -193,10 +189,6 @@ export const queryHeapAllData = (
     { ipids: ipids, $startTs: startTs, $endTs: endTs }
   );
 
-
-
-
-
 export const querySelectTraceStats = (): Promise<
   Array<{
     event_name: string;
@@ -1293,7 +1285,7 @@ export const getSystemLogsData = (): Promise<
 export const queryLogData = (): Promise<Array<LogStruct>> =>
   query(
     'queryLogData',
-    `SELECT l.ts - tr.start_ts as startNs FROM log AS l, trace_range tr WHERE startNs > 0 LIMIT 1;`,
+    `SELECT l.ts - tr.start_ts as startNs FROM log AS l, trace_range tr WHERE startNs > 0 LIMIT 1;`
   );
 
 export const queryMetric = (metricName: string): Promise<Array<string>> =>
@@ -1321,7 +1313,6 @@ export const queryTraceType = (): Promise<
                 m.name = 'source_type';`
   );
 
-
 export const queryLogAllData = (oneDayTime: number, leftNs: number, rightNs: number): Promise<Array<LogStruct>> =>
   query(
     'queryLogAllData',
@@ -1354,14 +1345,20 @@ export const queryLogAllData = (oneDayTime: number, leftNs: number, rightNs: num
     { $oneDayTime: oneDayTime }
   );
 
-  export const queryFpsSourceList = (inputTime:number,endTime:number,name:string):Promise<Array<{
-    name:string;
-    ts:number;
-    dur:number;
-    pid:number;
-    tid:number;
-    depth:number
-  }>> =>
+export const queryFpsSourceList = (
+  inputTime: number,
+  endTime: number,
+  name: string
+): Promise<
+  Array<{
+    name: string;
+    ts: number;
+    dur: number;
+    pid: number;
+    tid: number;
+    depth: number;
+  }>
+> =>
   query(
     'queryFpsSourceList',
     `
@@ -1377,8 +1374,49 @@ export const queryLogAllData = (oneDayTime: number, leftNs: number, rightNs: num
     WHERE
 	    c.name LIKE '%${name}%' 
 	    AND 
-	    c.ts BETWEEN ${ inputTime } and ${ endTime } 
+	    c.ts BETWEEN ${inputTime} and ${endTime} 
 	    AND 
 	    t.name = 'render_service';
     `
-  )
\ No newline at end of file
+  );
+
+export const queryStateFreqList = (startTime: number, endTime: number, cpu: number): Promise<Array<any>> => {
+  let sql = `
+    select
+    c.value,
+    c.ts,
+    c.dur,
+    c.ts - r.start_ts AS startTime, 
+    c.ts - r.start_ts + c.dur AS endTime
+   from
+     measure c, trace_range r 
+   inner join
+     cpu_measure_filter t
+   on
+     c.filter_id = t.id
+   where
+     (name = 'cpufreq' or name='cpu_frequency')
+     and
+     t.cpu	= $cpu
+     and  
+     (((startTime < $startTime) and  (endtime > $endTime))
+      or ((startTime < $startTime) and ($startTime < endtime and endtime < $endTime)) 
+      or ((startTime > $startTime) and ( $startTime < endtime and endtime < $endTime)) 
+      or ((startTime > $startTime and startTime < $endTime) and (endtime > $endTime)))`;
+  return query('queryBinderByArgsId', sql, {
+    $endTime: endTime,
+    $startTime: startTime,
+    $cpu: cpu,
+  });
+};
+export const queryPerfOutputData = (): Promise<Array<any>> =>
+  query(
+    'queryPerfOutputData',
+    `SELECT name, ts FROM callstack where name like '%PERFORMANCE_DATA%'`,
+  );
+
+  export const queryPerfToolsDur = (): Promise<Array<any>> =>
+  query(
+    'queryPerfToolsDur',
+    `SELECT name, ts, dur FROM callstack where name = 'H:GRAB'`,
+  );
\ No newline at end of file
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorker.ts b/ide/src/trace/database/ui-worker/ProcedureWorker.ts
index 6e0f836de5cdabf848c89206c5d7a016a791da34..78c24759ebe8c9f4a17c6611071e328f803243b5 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorker.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorker.ts
@@ -64,6 +64,7 @@ import { hitchTimeRender } from './ProcedureWorkerHitchTime';
 import { LtpoRender } from './ProcedureWorkerLTPO';
 import { BinderRender } from './procedureWorkerBinder';
 import { SampleRender } from './ProcedureWorkerBpftrace';
+import {PerfToolRender } from './ProcedureWorkerPerfTool'
 
 let dataList: any = {};
 let dataList2: any = {};
@@ -85,7 +86,7 @@ export let renders: any = {
   'app-start-up': new AppStartupRender(),
   'all-app-start-up': new AllAppStartupRender(),
   'ltpo-present': new LtpoRender(),
-  'hitch': new hitchTimeRender(),
+  hitch: new hitchTimeRender(),
   'app-so-init': new SoRender(),
   heap: new HeapRender(),
   'heap-timeline': new HeapTimelineRender(),
@@ -125,6 +126,7 @@ export let renders: any = {
   'freq-extend': new FreqExtendRender(),
   binder: new BinderRender(),
   sample: new SampleRender(),
+  perfTool: new PerfToolRender(),
 };
 
 function match(type: string, req: RequestMessage): void {
@@ -243,5 +245,4 @@ function setReq(req: RequestMessage, e: any) {
   }
 }
 
-self.onmessageerror = function (e: any): void {
-};
+self.onmessageerror = function (e: any): void {};
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts
index 77da235a111539a34f2eb80e471c18052159f85d..dcafaa5acdc613fc4456e49d195a64307b2f9ef1 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerAllAppStartup.ts
@@ -13,10 +13,10 @@
  * limitations under the License.
  */
 
-import { BaseStruct, dataFilterHandler, drawString } from './ProcedureWorkerCommon';
+import { BaseStruct, dataFilterHandler, drawString, drawLoadingFrame } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { ColorUtils } from '../../component/trace/base/ColorUtils';
-import {querySingleAppStartupsName} from "../sql/ProcessThread.sql";
+import { querySingleAppStartupsName } from '../sql/ProcessThread.sql';
 import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class AllAppStartupRender {
@@ -43,6 +43,7 @@ export class AllAppStartupRender {
     req.appStartupContext.globalAlpha = 0.6;
     let find = false;
     let offset = 3;
+    drawLoadingFrame(req.appStartupContext, filter, appStartUpRow);
     for (let re of filter) {
       AllAppStartupStruct.draw(req.appStartupContext, re);
       if (appStartUpRow.isHover) {
@@ -61,14 +62,14 @@ export class AllAppStartupRender {
     }
   }
 }
-export function AllAppStartupStructOnClick(clickRowType: string, sp: SpSystemTrace,scrollToFuncHandler:any) {
-  return new Promise((resolve,reject) => {
+export function AllAppStartupStructOnClick(clickRowType: string, sp: SpSystemTrace, scrollToFuncHandler: any) {
+  return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_ALL_APPSTARTUPS && AllAppStartupStruct.hoverStartupStruct) {
       AllAppStartupStruct.selectStartupStruct = AllAppStartupStruct.hoverStartupStruct;
       sp.traceSheetEL?.displayAllStartupData(AllAppStartupStruct.selectStartupStruct, scrollToFuncHandler);
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
@@ -112,5 +113,4 @@ export class AllAppStartupStruct extends BaseStruct {
       }
     }
   }
-
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts
index 949c8a8bad907dc8514b516d915b4b3f9a3894ba..7aa18540c14ebe96b4e5191a406df6b82b696f14 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts
@@ -16,7 +16,7 @@
 import { BaseStruct, dataFilterHandler, drawLoadingFrame, drawString } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { ColorUtils } from '../../component/trace/base/ColorUtils';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class AppStartupRender {
   renderMainThread(
@@ -63,14 +63,18 @@ export class AppStartupRender {
 }
 
 const padding = 3;
-export function AppStartupStructOnClick(clickRowType: string, sp: SpSystemTrace,scrollToFuncHandler:any) {
-  return new Promise((resolve,reject) => {
+export function AppStartupStructOnClick(clickRowType: string, sp: SpSystemTrace, scrollToFuncHandler: any) {
+  return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_APP_STARTUP && AppStartupStruct.hoverStartupStruct) {
       AppStartupStruct.selectStartupStruct = AppStartupStruct.hoverStartupStruct;
-      sp.traceSheetEL?.displayStartupData(AppStartupStruct.selectStartupStruct, scrollToFuncHandler, sp.currentRow!.dataListCache);
+      sp.traceSheetEL?.displayStartupData(
+        AppStartupStruct.selectStartupStruct,
+        scrollToFuncHandler,
+        sp.currentRow!.dataListCache
+      );
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerBpftrace.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerBpftrace.ts
index 06c5395d9c0a9cc445334d84018e4bc2e634657b..584890ecaafc23d9ba24bfeb2e37ca0a6db5de4d 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerBpftrace.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerBpftrace.ts
@@ -21,10 +21,10 @@ import {
   Rect,
   drawString,
   isFrameContainPoint,
-  drawLoadingFrame
+  drawLoadingFrame,
 } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
-import { SpSystemTrace } from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 const SAMPLE_STRUCT_HEIGHT = 20;
 const Y_PADDING = 2;
@@ -32,12 +32,12 @@ const Y_PADDING = 2;
 export class SampleRender extends Render {
   renderMainThread(
     req: {
-      context: CanvasRenderingContext2D,
-      useCache: boolean,
-      type: string,
-      start_ts: number,
-      uniqueProperty: Array<any>,
-      flattenTreeArray: Array<any>
+      context: CanvasRenderingContext2D;
+      useCache: boolean;
+      type: string;
+      start_ts: number;
+      uniqueProperty: Array<any>;
+      flattenTreeArray: Array<any>;
     },
     row: TraceRow<SampleStruct>
   ) {
@@ -70,19 +70,19 @@ export class SampleRender extends Render {
   }
 }
 
-export function func (
-   sampleList: Array<any>,
-   sampleFilter: Array<any>,
-   startNS: number,
-   endNS: number,
-   totalNS: number,
-   startTS: number,
-   frame: any,
-   use: boolean
+export function func(
+  sampleList: Array<any>,
+  sampleFilter: Array<any>,
+  startNS: number,
+  endNS: number,
+  totalNS: number,
+  startTS: number,
+  frame: any,
+  use: boolean
 ) {
   if (use && sampleFilter.length > 0) {
     for (let i = 0, len = sampleFilter.length; i < len; i++) {
-      if (((sampleFilter[i].end - startTS) || 0) >= startNS && ((sampleFilter[i].begin - startTS) || 0) <= endNS) {
+      if ((sampleFilter[i].end - startTS || 0) >= startNS && (sampleFilter[i].begin - startTS || 0) <= endNS) {
         SampleStruct.setSampleFrame(sampleFilter[i], 0, startNS, endNS, totalNS, startTS, frame);
       } else {
         sampleFilter[i].frame = undefined;
@@ -104,37 +104,37 @@ function setSampleFilter(
   frame: any
 ) {
   if (sampleList) {
-    sampleList.forEach(func => {
+    sampleList.forEach((func) => {
       let funcProperty: Array<any> = func.property!;
       let groups = funcProperty
-      .filter(it => (( it.end - startTS) ?? 0) >= startNS && (( it.begin - startTS) ?? 0 ) <= endNS)
-      .map(it => {
-        SampleStruct.setSampleFrame(it, 0, startNS, endNS, totalNS, startTS, frame);
-        return it;
-      })
-      .reduce((pre, current) => {
-        ( pre[`${current.frame.x}-${current.depth}`] = pre[`${current.frame.x}-${current.depth}`] || []).push(current);
-        return pre;
-      }, {});
+        .filter((it) => (it.end - startTS ?? 0) >= startNS && (it.begin - startTS ?? 0) <= endNS)
+        .map((it) => {
+          SampleStruct.setSampleFrame(it, 0, startNS, endNS, totalNS, startTS, frame);
+          return it;
+        })
+        .reduce((pre, current) => {
+          (pre[`${current.frame.x}-${current.depth}`] = pre[`${current.frame.x}-${current.depth}`] || []).push(current);
+          return pre;
+        }, {});
       Reflect.ownKeys(groups).map((kv) => {
-        let arr = groups[kv].sort(( a: any, b: any) => (b.end - b.start) - (a.end - a.start));
+        let arr = groups[kv].sort((a: any, b: any) => b.end - b.start - (a.end - a.start));
         sampleFilter.push(arr[0]);
-      })
-    })
+      });
+    });
   }
 }
 
 export function sampleStructOnClick(clickRowType: string, sp: SpSystemTrace) {
-    return new Promise((resolve, reject) => {
-      if (clickRowType === TraceRow.ROW_TYPE_SAMPLE && SampleStruct.hoverSampleStruct) { 
-        SampleStruct.selectSampleStruct = SampleStruct.hoverSampleStruct;
-        sp.traceSheetEL?.displaySampleData(SampleStruct.selectSampleStruct, SampleStruct.reqProperty);
-        sp.timerShaftEL?.modifyFlagList(undefined);
-        reject(new Error());
-      }else{
-        resolve(null);
-      }
-    });
+  return new Promise((resolve, reject) => {
+    if (clickRowType === TraceRow.ROW_TYPE_SAMPLE && SampleStruct.hoverSampleStruct) {
+      SampleStruct.selectSampleStruct = SampleStruct.hoverSampleStruct;
+      sp.traceSheetEL?.displaySampleData(SampleStruct.selectSampleStruct, SampleStruct.reqProperty);
+      sp.timerShaftEL?.modifyFlagList(undefined);
+      reject(new Error());
+    } else {
+      resolve(null);
+    }
+  });
 }
 
 export class SampleStruct extends BaseStruct {
@@ -160,13 +160,13 @@ export class SampleStruct extends BaseStruct {
     frame: any
   ): void {
     let x1: number, x2: number;
-    if (((sampleNode.begin! - startTS) || 0) > startNS && ((sampleNode.begin! - startTS) || 0) < endNS) {
-      x1 = ns2x((sampleNode.begin! - startTS) || 0, startNS, endNS, totalNS, frame);
+    if ((sampleNode.begin! - startTS || 0) > startNS && (sampleNode.begin! - startTS || 0) < endNS) {
+      x1 = ns2x(sampleNode.begin! - startTS || 0, startNS, endNS, totalNS, frame);
     } else {
       x1 = 0;
     }
-    if (((sampleNode.end! - startTS) || 0) > startNS && ((sampleNode.end! - startTS) || 0) < endNS) {
-      x2 = ns2x((sampleNode.end! - startTS) || 0, startNS, endNS, totalNS, frame)
+    if ((sampleNode.end! - startTS || 0) > startNS && (sampleNode.end! - startTS || 0) < endNS) {
+      x2 = ns2x(sampleNode.end! - startTS || 0, startNS, endNS, totalNS, frame);
     } else {
       x2 = frame.width;
     }
@@ -186,8 +186,10 @@ export class SampleStruct extends BaseStruct {
     }
     if (data.frame) {
       ctx.globalAlpha = 1;
-      ctx.fillStyle = ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth, ColorUtils.FUNC_COLOR.length)];
-      const textColor = ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth, ColorUtils.FUNC_COLOR.length)];
+      ctx.fillStyle =
+        ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth, ColorUtils.FUNC_COLOR.length)];
+      const textColor =
+        ColorUtils.FUNC_COLOR[ColorUtils.hashFunc(data.name || '', data.depth, ColorUtils.FUNC_COLOR.length)];
       if (SampleStruct.hoverSampleStruct && data.name === SampleStruct.hoverSampleStruct.name) {
         ctx.globalAlpha = 0.7;
       }
@@ -204,11 +206,6 @@ export class SampleStruct extends BaseStruct {
     }
   }
   static equals(d1: SampleStruct, d2: SampleStruct): boolean {
-    return (
-      d1 &&
-      d2 &&
-      d1.name == d2.name &&
-      d1.begin == d2.begin
-    );
+    return d1 && d2 && d1.name == d2.name && d1.begin == d2.begin;
   }
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts
index d0ac70d3ac90d3dec7a28cc675a1185b79ee2743..270bbd27d759954a424107b8d8de75f24a6fba38 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts
@@ -16,7 +16,7 @@
 import { BaseStruct, dataFilterHandler, drawLoadingFrame, isFrameContainPoint, Render } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { ColorUtils } from '../../component/trace/base/ColorUtils';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class ClockRender extends Render {
   renderMainThread(
@@ -73,11 +73,10 @@ export function ClockStructOnClick(clickRowType: string, sp: SpSystemTrace) {
       sp.traceSheetEL?.displayClockData(ClockStruct.selectClockStruct);
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
-
 }
 export class ClockStruct extends BaseStruct {
   static maxValue: number = 0;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
index 3f4166258f0865f4303a585afb4f201aa5b23de0..c6e5288e166d7e43cced76601c6fde906680bf8e 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
@@ -18,7 +18,6 @@ import { TraceRow } from '../../component/trace/base/TraceRow';
 import { TimerShaftElement } from '../../component/trace/TimerShaftElement';
 import { Flag } from '../../component/trace/timer-shaft/Flag';
 import { drawVSync } from '../../component/chart/VSync';
-import { draw } from '../../bean/FrameChartStruct';
 
 export abstract class Render {
   abstract renderMainThread(req: any, row: TraceRow<any>): void;
@@ -50,10 +49,10 @@ export class RequestMessage {
   totalNS: any;
   slicesTime:
     | {
-      startTime: number | null;
-      endTime: number | null;
-      color: string | null;
-    }
+        startTime: number | null;
+        endTime: number | null;
+        color: string | null;
+      }
     | undefined;
   range: any;
   scale: any;
@@ -66,9 +65,9 @@ export class RequestMessage {
   id: any;
   postMessage:
     | {
-      (message: any, targetOrigin: string, transfer?: Transferable[]): void;
-      (message: any, options?: WindowPostMessageOptions): void;
-    }
+        (message: any, targetOrigin: string, transfer?: Transferable[]): void;
+        (message: any, options?: WindowPostMessageOptions): void;
+      }
     | undefined;
 }
 
@@ -101,8 +100,8 @@ export function ns2Timestamp(ns: number): string {
   return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second
     .toString()
     .padStart(2, '0')}:${millisecond.toString().padStart(3, '0')}:${microsecond
-      .toString()
-      .padStart(3, '0')}:${nanosecond.toString().padStart(3, '0')}`;
+    .toString()
+    .padStart(3, '0')}:${nanosecond.toString().padStart(3, '0')}`;
 }
 
 const offsetX = 5;
@@ -560,10 +559,10 @@ export function drawFlagLine(
   frame: any,
   slicesTime:
     | {
-      startTime: number | null | undefined;
-      endTime: number | null | undefined;
-      color: string | null | undefined;
-    }
+        startTime: number | null | undefined;
+        endTime: number | null | undefined;
+        color: string | null | undefined;
+      }
     | undefined
 ) {
   if (commonCtx) {
@@ -868,7 +867,7 @@ function changeFrameRatePoint(arrList: Array<number>, selectParams: TraceRow<any
       TraceRow.range?.totalNS ?? 0,
       selectParams.frame
     )
-  );// 起始坐标
+  ); // 起始坐标
   let avgRateEndX = Math.floor(
     ns2x(
       arrList[arrList.length - 1]!,
@@ -877,20 +876,22 @@ function changeFrameRatePoint(arrList: Array<number>, selectParams: TraceRow<any
       TraceRow.range?.totalNS ?? 0,
       selectParams.frame
     )
-  );// 结束坐标
+  ); // 结束坐标
   return [avgRateStartX, avgRateEndX];
 }
 
 // 处理文字坐标
 function handleTextCoordinate(arrList: Array<number>, selectParams: TraceRow<any>, textWidth: number) {
   const TEXT_WIDTH_HALF = 2;
-  let textX = Math.floor(ns2x(
-    (arrList[0]! + arrList[arrList.length - 1]!) / 2,
-    TraceRow.range?.startNS ?? 0,
-    TraceRow.range?.endNS ?? 0,
-    TraceRow.range?.totalNS ?? 0,
-    selectParams.frame
-  )); //根据帧率范围的中间值转换文本的起始x坐标
+  let textX = Math.floor(
+    ns2x(
+      (arrList[0]! + arrList[arrList.length - 1]!) / 2,
+      TraceRow.range?.startNS ?? 0,
+      TraceRow.range?.endNS ?? 0,
+      TraceRow.range?.totalNS ?? 0,
+      selectParams.frame
+    )
+  ); //根据帧率范围的中间值转换文本的起始x坐标
   textX = textX <= textWidth / TEXT_WIDTH_HALF ? textX : textX - textWidth / TEXT_WIDTH_HALF;
   let textY = selectParams.frame.y + 11;
   if (selectParams.avgRateTxt?.includes('HitchTime')) {
@@ -951,7 +952,12 @@ export function drawAvgFrameRate(arrList: Array<number>, ctx: any, selectParams:
 
   const TEXT_RECT_PADDING = 2;
   ctx.fillStyle = 'red';
-  ctx.fillRect(textX - padding, textY - textHeight / TEXT_RECT_PADDING + padding, textWidth + padding * TEXT_RECT_PADDING, textHeight - padding * TEXT_RECT_PADDING);
+  ctx.fillRect(
+    textX - padding,
+    textY - textHeight / TEXT_RECT_PADDING + padding,
+    textWidth + padding * TEXT_RECT_PADDING,
+    textHeight - padding * TEXT_RECT_PADDING
+  );
 
   ctx.fillStyle = 'white';
   ctx.fillText(selectParams.avgRateTxt, textX, textY + 4);
@@ -1370,8 +1376,7 @@ export function drawLoading(
   frame: any,
   left: number,
   right: number
-) {
-}
+) {}
 
 let loadingText = 'Loading...';
 let loadingTextWidth = 0;
@@ -1413,19 +1418,26 @@ export function drawString(ctx: CanvasRenderingContext2D, str: string, textPaddi
   if (data.textMetricsWidth === undefined) {
     data.textMetricsWidth = ctx.measureText(str).width;
   }
+  const yPos = 1.5;
   let charWidth = Math.round(data.textMetricsWidth / str.length);
   let fillTextWidth = frame.width - textPadding * 2;
   if (data.textMetricsWidth < fillTextWidth) {
     let x2 = Math.floor(frame.width / 2 - data.textMetricsWidth / 2 + frame.x + textPadding);
-    ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2), fillTextWidth);
+    ctx.fillText(str, x2, Math.floor(frame.y + frame.height / yPos), fillTextWidth);
   } else {
     if (fillTextWidth >= charWidth) {
       let chatNum = fillTextWidth / charWidth;
       let x1 = frame.x + textPadding;
+
       if (chatNum < 2) {
-        ctx.fillText(str.substring(0, 1), x1, Math.floor(frame.y + frame.height / 2), fillTextWidth);
+        ctx.fillText(str.substring(0, 1), x1, Math.floor(frame.y + frame.height / yPos), fillTextWidth);
       } else {
-        ctx.fillText(str.substring(0, chatNum - 1) + '...', x1, Math.floor(frame.y + frame.height / 2), fillTextWidth);
+        ctx.fillText(
+          str.substring(0, chatNum - 1) + '...',
+          x1,
+          Math.floor(frame.y + frame.height / yPos),
+          fillTextWidth
+        );
       }
     }
   }
@@ -1447,7 +1459,12 @@ export function drawFunString(ctx: CanvasRenderingContext2D, str: string, textPa
       if (chatNum < 2) {
         ctx.fillText(str.substring(0, 1), x1, Math.floor(data.frame.height * (data.depth! + 0.5) + 3), fillTextWidth);
       } else {
-        ctx.fillText(str.substring(0, chatNum - 1) + '...', x1, Math.floor(data.frame.height * (data.depth! + 0.5) + 3), fillTextWidth);
+        ctx.fillText(
+          str.substring(0, chatNum - 1) + '...',
+          x1,
+          Math.floor(data.frame.height * (data.depth! + 0.5) + 3),
+          fillTextWidth
+        );
       }
     }
   }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts
index f1ec46bdd3e85044ca32c0d841439980c967530e..399f04562747f0a7b4f7c8a1ec6e115d0afec76c 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts
@@ -112,8 +112,9 @@ export function JsCpuProfilerStructOnClick(clickRowType: string, sp: SpSystemTra
     if (clickRowType === TraceRow.ROW_TYPE_JS_CPU_PROFILER) {
       if (row.findHoverStruct) {
         row.findHoverStruct();
-      }else {
-        JsCpuProfilerStruct.hoverJsCpuProfilerStruct = JsCpuProfilerStruct.hoverJsCpuProfilerStruct || row.getHoverStruct();
+      } else {
+        JsCpuProfilerStruct.hoverJsCpuProfilerStruct =
+          JsCpuProfilerStruct.hoverJsCpuProfilerStruct || row.getHoverStruct();
       }
     }
     if (clickRowType === TraceRow.ROW_TYPE_JS_CPU_PROFILER && JsCpuProfilerStruct.hoverJsCpuProfilerStruct) {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFrameAnimation.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFrameAnimation.ts
index d96ce20215d46d39aae99e41b53827b761dc37af..32120505d38b972b523fe7372c0f04d2f6c6bae5 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFrameAnimation.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFrameAnimation.ts
@@ -24,7 +24,7 @@ import {
   Rect,
   Render,
 } from './ProcedureWorkerCommon';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class FrameAnimationRender extends Render {
   renderMainThread(
@@ -106,16 +106,25 @@ export class FrameAnimationRender extends Render {
     }
   }
 }
-export function FrameAnimationStructOnClick(clickRowType: string, sp: SpSystemTrace,scrollToFuncHandler:any, row: TraceRow<any>) {
-  return new Promise((resolve,reject) => {
+export function FrameAnimationStructOnClick(
+  clickRowType: string,
+  sp: SpSystemTrace,
+  scrollToFuncHandler: any,
+  row: TraceRow<any>
+) {
+  return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_FRAME_ANIMATION) {
-      FrameAnimationStruct.selectFrameAnimationStruct = FrameAnimationStruct.hoverFrameAnimationStruct || row.getHoverStruct();
+      FrameAnimationStruct.selectFrameAnimationStruct =
+        FrameAnimationStruct.hoverFrameAnimationStruct || row.getHoverStruct();
       if (FrameAnimationStruct.selectFrameAnimationStruct) {
-        sp.traceSheetEL?.displayFrameAnimationData(FrameAnimationStruct.selectFrameAnimationStruct,scrollToFuncHandler);
+        sp.traceSheetEL?.displayFrameAnimationData(
+          FrameAnimationStruct.selectFrameAnimationStruct,
+          scrollToFuncHandler
+        );
         sp.timerShaftEL?.modifyFlagList(undefined);
       }
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
@@ -132,8 +141,8 @@ export class FrameAnimationStruct extends BaseStruct {
   endTs: number = 0;
   frameInfo: string | undefined;
   name: string | undefined;
-  inputTime:number = 0;
-  endTime:number = 0;
+  inputTime: number = 0;
+  endTime: number = 0;
 
   static setFrameAnimation(
     animationNode: FrameAnimationStruct,
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFrameDynamic.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFrameDynamic.ts
index 658c31b06a71ddf32c5f1a84b1b908826510d0f2..bdc1779faf0d594578d855c229e050f43f532ac5 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFrameDynamic.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFrameDynamic.ts
@@ -25,7 +25,7 @@ import {
 } from './ProcedureWorkerCommon';
 import { type AnimationRanges } from '../../bean/FrameComponentBean';
 import { ColorUtils } from '../../component/trace/base/ColorUtils';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class FrameDynamicRender extends Render {
   renderMainThread(
@@ -286,15 +286,16 @@ export class FrameDynamicRender extends Render {
   }
 }
 export function FrameDynamicStructOnClick(clickRowType: string, sp: SpSystemTrace, row: undefined | TraceRow<any>) {
-  return new Promise((resolve,reject) => {
+  return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_FRAME_DYNAMIC) {
-      FrameDynamicStruct.selectFrameDynamicStruct = FrameDynamicStruct.hoverFrameDynamicStruct || row?.getHoverStruct(false, true);
+      FrameDynamicStruct.selectFrameDynamicStruct =
+        FrameDynamicStruct.hoverFrameDynamicStruct || row?.getHoverStruct(false, true);
       if (FrameDynamicStruct.selectFrameDynamicStruct) {
         sp.traceSheetEL?.displayFrameDynamicData(row!, FrameDynamicStruct.selectFrameDynamicStruct);
         sp.timerShaftEL?.modifyFlagList(undefined);
       }
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFrameSpacing.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFrameSpacing.ts
index bead201d09c9754e2eec406236e548c4f760baf7..a7d6c6c737b532ac9b7b43543e950f782f921a57 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFrameSpacing.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFrameSpacing.ts
@@ -25,7 +25,7 @@ import {
 } from './ProcedureWorkerCommon';
 import { type AnimationRanges } from '../../bean/FrameComponentBean';
 import { ColorUtils } from '../../component/trace/base/ColorUtils';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class FrameSpacingRender extends Render {
   renderMainThread(
@@ -299,15 +299,16 @@ export class FrameSpacingRender extends Render {
   }
 }
 export function FrameSpacingStructOnClick(clickRowType: string, sp: SpSystemTrace, row: TraceRow<any>) {
-  return new Promise((resolve,reject) => {
+  return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_FRAME_SPACING) {
-      FrameSpacingStruct.selectFrameSpacingStruct = FrameSpacingStruct.hoverFrameSpacingStruct || row.getHoverStruct(false, true);
+      FrameSpacingStruct.selectFrameSpacingStruct =
+        FrameSpacingStruct.hoverFrameSpacingStruct || row.getHoverStruct(false, true);
       if (FrameSpacingStruct.selectFrameSpacingStruct) {
         sp.traceSheetEL?.displayFrameSpacingData(FrameSpacingStruct.selectFrameSpacingStruct);
         sp.timerShaftEL?.modifyFlagList(undefined);
       }
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts
index 79323c52354b025aecc16e53aa0c881c1f7ec93f..cc0d465dba60fa0fada74cc5d1a02254b46b498f 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts
@@ -23,7 +23,7 @@ import {
   RequestMessage,
 } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class FreqRender extends Render {
   renderMainThread(
@@ -76,7 +76,7 @@ export function CpuFreqStructOnClick(clickRowType: string, sp: SpSystemTrace) {
       sp.traceSheetEL?.displayFreqData();
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts
index 76c71c82a3aa2eab300a3c16f4c71fd95e88c469..f6b61041d3d83e105ecfcc4db5fa0902b6d5122c 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreqExtend.ts
@@ -49,7 +49,7 @@ export class FreqExtendRender extends Render {
       } else if (freqReq.type === 'gpu-freq') {
         CpuFreqExtendStruct.gpuCycle = -1;
       } else {
-        CpuFreqExtendStruct.schedCycle = -1
+        CpuFreqExtendStruct.schedCycle = -1;
       }
       CpuFreqExtendStruct.isTabHover = false;
     }
@@ -61,18 +61,20 @@ export class FreqExtendRender extends Render {
       CpuFreqExtendStruct.draw(freqReq.context, re, freqReq.type, row);
     }
     // tab页不高亮也没有悬浮泳道，取消竖线
-    if(!CpuFreqExtendStruct.isTabHover && 
-      CpuFreqExtendStruct.hoverCpuFreqStruct === undefined && 
-      CpuFreqExtendStruct.selectCpuFreqStruct === undefined && 
+    if (
+      !CpuFreqExtendStruct.isTabHover &&
+      CpuFreqExtendStruct.hoverCpuFreqStruct === undefined &&
+      CpuFreqExtendStruct.selectCpuFreqStruct === undefined &&
       !BinderStruct.isTabHover &&
       !BinderStruct.selectCpuFreqStruct &&
       !BinderStruct.hoverCpuFreqStruct &&
-      !ThreadStruct.hoverThreadStruct && 
-      !TabPaneFreqStatesDataCut.isStateTabHover){
+      !ThreadStruct.hoverThreadStruct &&
+      !TabPaneFreqStatesDataCut.isStateTabHover
+    ) {
       SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = undefined;
     }
     // 鼠标不在tab页内，取消所有tab页联动的参数
-    if(!SpSegmentationChart.trace.isMousePointInSheet) {
+    if (!SpSegmentationChart.trace.isMousePointInSheet) {
       CpuFreqExtendStruct.isTabHover = false;
       CpuFreqExtendStruct.cpuCycle = -1;
       CpuFreqExtendStruct.schedCycle = -1;
@@ -99,7 +101,12 @@ export class CpuFreqExtendStruct extends BaseStruct {
   cycle: number | undefined;
   colorIndex: number = 0;
 
-  static draw(freqContext: CanvasRenderingContext2D, data: CpuFreqExtendStruct, type: string, row: TraceRow<CpuFreqExtendStruct>) {
+  static draw(
+    freqContext: CanvasRenderingContext2D,
+    data: CpuFreqExtendStruct,
+    type: string,
+    row: TraceRow<CpuFreqExtendStruct>
+  ) {
     if (data.frame) {
       let width = data.frame.width || 0;
       let index = data.colorIndex || 0;
@@ -114,32 +121,35 @@ export class CpuFreqExtendStruct extends BaseStruct {
             (data.cycle === CpuFreqExtendStruct.gpuCycle && CpuFreqExtendStruct.gpuCycle !== -1) ||
             (data.cycle === CpuFreqExtendStruct.schedCycle && CpuFreqExtendStruct.schedCycle !== -1)))
       ) {
-          if(data === CpuFreqExtendStruct.hoverCpuFreqStruct || CpuFreqExtendStruct.isTabHover){
-            let pointX: number = ns2x(
-              data.startNS || 0,
-              TraceRow.range!.startNS,
-              TraceRow.range!.endNS,
-              TraceRow.range!.totalNS,
-              new Rect(0, 0, TraceRow.FRAME_WIDTH, 0)
-            );
-            SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = new Flag(
-              Math.floor(pointX),
-              0,
-              0,
-              0,
-              data.startNS,
-              '#666666',
-              '',
-              true,
-              ''
-            ); 
-          } else {
-            SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = undefined;
-          }
+        if (data === CpuFreqExtendStruct.hoverCpuFreqStruct || CpuFreqExtendStruct.isTabHover) {
+          let pointX: number = ns2x(
+            data.startNS || 0,
+            TraceRow.range!.startNS,
+            TraceRow.range!.endNS,
+            TraceRow.range!.totalNS,
+            new Rect(0, 0, TraceRow.FRAME_WIDTH, 0)
+          );
+          SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = new Flag(
+            Math.floor(pointX),
+            0,
+            0,
+            0,
+            data.startNS,
+            '#666666',
+            '',
+            true,
+            ''
+          );
+        } else {
+          SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = undefined;
+        }
         let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0) * 1.0) / (type === 'CPU-FREQ'
-            ? CpuFreqExtendStruct.cpuMaxValue : type === 'GPU-FREQ'
-              ? CpuFreqExtendStruct.gpuMaxValue : CpuFreqExtendStruct.schedMaxValue)
+          ((data.value || 0) * (data.frame.height || 0) * 1.0) /
+            (type === 'CPU-FREQ'
+              ? CpuFreqExtendStruct.cpuMaxValue
+              : type === 'GPU-FREQ'
+              ? CpuFreqExtendStruct.gpuMaxValue
+              : CpuFreqExtendStruct.schedMaxValue)
         );
         if (drawHeight < 1) {
           drawHeight = 1;
@@ -149,9 +159,12 @@ export class CpuFreqExtendStruct extends BaseStruct {
         freqContext.globalAlpha = 0.6;
         freqContext.lineWidth = 1;
         let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0)) / (type === 'CPU-FREQ'
-            ? CpuFreqExtendStruct.cpuMaxValue : type === 'GPU-FREQ'
-              ? CpuFreqExtendStruct.gpuMaxValue : CpuFreqExtendStruct.schedMaxValue)
+          ((data.value || 0) * (data.frame.height || 0)) /
+            (type === 'CPU-FREQ'
+              ? CpuFreqExtendStruct.cpuMaxValue
+              : type === 'GPU-FREQ'
+              ? CpuFreqExtendStruct.gpuMaxValue
+              : CpuFreqExtendStruct.schedMaxValue)
         );
         if (drawHeight < 1) {
           drawHeight = 1;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts
index d84934a2a6a94fc17353b6e647bf2186a8177693..c14d371c2d1872895510d43c27a8e0d38c9f6149 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts
@@ -28,7 +28,7 @@ import {
 } from './ProcedureWorkerCommon';
 import { FuncStruct as BaseFuncStruct } from '../../bean/FuncStruct';
 import { FlagsConfig } from '../../component/SpFlags';
-import {TabPaneTaskFrames} from "../../component/trace/sheet/task/TabPaneTaskFrames";
+import { TabPaneTaskFrames } from '../../component/trace/sheet/task/TabPaneTaskFrames';
 export class FuncRender extends Render {
   renderMainThread(
     req: {
@@ -126,7 +126,13 @@ export function func(
     });
   }
 }
-export function FuncStructOnClick(clickRowType: string, sp:any, row:TraceRow<any>|undefined, scrollToFuncHandler: any, entry?: any) {
+export function FuncStructOnClick(
+  clickRowType: string,
+  sp: any,
+  row: TraceRow<any> | undefined,
+  scrollToFuncHandler: any,
+  entry?: any
+) {
   return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_FUNC && (FuncStruct.hoverFuncStruct || entry)) {
       if (FuncStruct.funcSelect) {
@@ -202,9 +208,11 @@ export class FuncStruct extends BaseFuncStruct {
           ctx.textBaseline = 'middle';
           drawFunString(ctx, `${data.funName || ''}`, 5, data.frame, data);
         }
-        if (data.callid == FuncStruct.selectFuncStruct?.callid&&
-          data.startTs == FuncStruct.selectFuncStruct?.startTs&&
-          data.depth == FuncStruct.selectFuncStruct?.depth) {
+        if (
+          data.callid == FuncStruct.selectFuncStruct?.callid &&
+          data.startTs == FuncStruct.selectFuncStruct?.startTs &&
+          data.depth == FuncStruct.selectFuncStruct?.depth
+        ) {
           ctx.strokeStyle = '#000';
           ctx.lineWidth = 2;
           ctx.strokeRect(data.frame.x, data.frame.y + 1, data.frame.width, data.frame.height - 2);
@@ -226,7 +234,7 @@ export class FuncStruct extends BaseFuncStruct {
         }
         // 如果该函数没有结束时间，则绘制锯齿。
         if (data.nofinish && data.frame!.width > 4) {
-          FuncStruct.drawRupture(ctx, data.frame.x, data.frame.y , data.frame.width, data.frame.height );
+          FuncStruct.drawRupture(ctx, data.frame.x, data.frame.y, data.frame.width, data.frame.height);
         }
       }
     }
@@ -247,10 +255,7 @@ export class FuncStruct extends BaseFuncStruct {
     let len = height / ruptureNode;
     ctx.moveTo(x + width - 1, y);
     for (let i = 1; i <= ruptureNode; i++) {
-      ctx.lineTo(
-        x + width - 1 - (i % 2 == 0 ? 0 : ruptureWidth),
-        y + len * i - 2
-      );
+      ctx.lineTo(x + width - 1 - (i % 2 == 0 ? 0 : ruptureWidth), y + len * i - 2);
     }
     ctx.closePath();
     ctx.fill();
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts
index 8dfdb2eeee078d1ea4d9c214dbb50d3c55acb864..3d4e0106002e8c8d0a070b053bb5a18191b8aa22 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts
@@ -16,7 +16,7 @@
 import { Rect, Render, isFrameContainPoint, ns2x, drawLoadingFrame } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { HeapStruct as BaseHeapStruct } from '../../bean/HeapStruct';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 export class NativeMemoryRender extends Render {
   renderMainThread(req: any, row: TraceRow<any>) {}
 }
@@ -127,7 +127,7 @@ function setHeapFrameIfUse(res: Array<any>, startNS: number, endNS: number, tota
 }
 
 export function HeapStructOnClick(clickRowType: string, sp: SpSystemTrace, row: undefined | TraceRow<any>) {
-  return new Promise((resolve,reject) => {
+  return new Promise((resolve, reject) => {
     if (
       clickRowType === TraceRow.ROW_TYPE_HEAP &&
       row &&
@@ -143,7 +143,7 @@ export function HeapStructOnClick(clickRowType: string, sp: SpSystemTrace, row:
       sp.traceSheetEL?.displayNativeHookData(HeapStruct.selectHeapStruct, row.rowId!, ipid);
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts
index bc6f7848eb565c4b94f689738da9582adf48972f..247c8452d980aa6d52d7f5727b4d50f2fc95203a 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts
@@ -17,7 +17,7 @@ import { BaseStruct, Rect, Render, drawLoadingFrame, isFrameContainPoint } from
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { Utils } from '../../component/trace/base/Utils';
 
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 export class HeapSnapshotRender extends Render {
   renderMainThread(
     req: {
@@ -64,12 +64,17 @@ export function HeapSnapshot(
   }
 }
 const padding = 3;
-export function HeapSnapshotStructOnClick(clickRowType: string, sp: SpSystemTrace, row: TraceRow<any>,snapshotClickHandler: any) {
+export function HeapSnapshotStructOnClick(
+  clickRowType: string,
+  sp: SpSystemTrace,
+  row: TraceRow<any>,
+  snapshotClickHandler: any
+) {
   return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_HEAP_SNAPSHOT) {
       if (row.findHoverStruct) {
         row.findHoverStruct();
-      }else {
+      } else {
         HeapSnapshotStruct.hoverSnapshotStruct = HeapSnapshotStruct.hoverSnapshotStruct || row.getHoverStruct();
       }
       if (HeapSnapshotStruct.hoverSnapshotStruct) {
@@ -85,7 +90,6 @@ export function HeapSnapshotStructOnClick(clickRowType: string, sp: SpSystemTrac
       resolve(null);
     }
   });
-
 }
 export class HeapSnapshotStruct extends BaseStruct {
   startTs: number = 0;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts
index 52abe285d1170e4dd2fd69ebd0265dc5752dffcb..ca0af2ff948e3a382410a7ac05bb76f8c8f17207 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHitchTime.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BaseStruct, dataFilterHandler,drawLoadingFrame } from './ProcedureWorkerCommon';
+import { BaseStruct, dataFilterHandler, drawLoadingFrame } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 
 export class hitchTimeRender {
@@ -29,8 +29,8 @@ export class hitchTimeRender {
     HitchTimeStruct.maxVal = 0;
     for (let i = 0; i < list.length; i++) {
       if (Number(list[i].value) > HitchTimeStruct.maxVal) {
-        HitchTimeStruct.maxVal = Number(list[i].value)
-      };
+        HitchTimeStruct.maxVal = Number(list[i].value);
+      }
     }
     let filter = hitchTimeRow.dataListCache;
     dataFilterHandler(list, filter, {
@@ -46,7 +46,7 @@ export class hitchTimeRender {
     req.hitchTimeContext.globalAlpha = 0.6;
     let find = false;
     let offset = 3;
-    drawLoadingFrame(req.hitchTimeContext,filter,hitchTimeRow)
+    drawLoadingFrame(req.hitchTimeContext, filter, hitchTimeRow);
     for (let re of filter) {
       if (hitchTimeRow.isHover) {
         if (
@@ -58,18 +58,17 @@ export class hitchTimeRender {
           find = true;
         }
       }
-      if (!hitchTimeRow.isHover) HitchTimeStruct.hoverHitchTimeStruct = undefined
+      if (!hitchTimeRow.isHover) HitchTimeStruct.hoverHitchTimeStruct = undefined;
       if (!find && hitchTimeRow.isHover) {
         HitchTimeStruct.hoverHitchTimeStruct = undefined;
       }
-      req.hitchTimeContext.beginPath()
+      req.hitchTimeContext.beginPath();
       HitchTimeStruct.draw(req.hitchTimeContext, re);
-      req.hitchTimeContext.closePath()
+      req.hitchTimeContext.closePath();
     }
   }
 }
 
-
 export class HitchTimeStruct extends BaseStruct {
   static hoverHitchTimeStruct: HitchTimeStruct | undefined;
   static selectHitchTimeStruct: HitchTimeStruct | undefined;
@@ -96,28 +95,27 @@ export class HitchTimeStruct extends BaseStruct {
     if (data.frame) {
       ctx.fillStyle = '#9933FA';
       if (data === HitchTimeStruct.hoverHitchTimeStruct || data === HitchTimeStruct.selectHitchTimeStruct) {
-        let drawHeight: number = HitchTimeStruct.maxVal !== 0 ? Math.round(
-          ((Number(data.value) || 0) * (data.frame.height || 0) * 1.0) / HitchTimeStruct.maxVal!
-        ):0;
-        drawHeight = data.name ==='0'? 0 : drawHeight;
+        let drawHeight: number =
+          HitchTimeStruct.maxVal !== 0
+            ? Math.round(((Number(data.value) || 0) * (data.frame.height || 0) * 1.0) / HitchTimeStruct.maxVal!)
+            : 0;
+        drawHeight = data.name === '0' ? 0 : drawHeight;
         drawHeight = drawHeight < 1 ? 1 : drawHeight;
         ctx.globalAlpha = 1.0;
         ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight);
         ctx.lineWidth = 1;
         ctx.strokeStyle = '#0000FF';
-        ctx.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight)
+        ctx.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight);
       } else {
         ctx.globalAlpha = 0.6;
         let drawHeight: number = 0;
-        if(HitchTimeStruct.maxVal! !== 0){
+        if (HitchTimeStruct.maxVal! !== 0) {
           drawHeight = Math.round(((Number(data.value) || 0) * (data.frame.height || 0)) / HitchTimeStruct.maxVal!);
         }
-        drawHeight = data.name ==='0' ? 0 : drawHeight;
+        drawHeight = data.name === '0' ? 0 : drawHeight;
         drawHeight = drawHeight < 1 ? 1 : drawHeight;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight)
+        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight);
       }
-
     }
   }
-
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts
index 6c8a3b8a5fe6aab57eaa3d26a0a762228b3b0a88..c50cf73a30474267641e64c3416a3292805ffc4b 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts
@@ -24,7 +24,7 @@ import {
 } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { ColorUtils } from '../../component/trace/base/ColorUtils';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class IrqRender extends Render {
   renderMainThread(
@@ -70,14 +70,14 @@ export class IrqRender extends Render {
 }
 
 const padding = 3;
-export function IrqStructOnClick(clickRowType: string,sp:SpSystemTrace) {
+export function IrqStructOnClick(clickRowType: string, sp: SpSystemTrace) {
   return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_IRQ && IrqStruct.hoverIrqStruct) {
       IrqStruct.selectIrqStruct = IrqStruct.hoverIrqStruct;
       sp.traceSheetEL?.displayIrqData(IrqStruct.selectIrqStruct);
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts
index b3b67d5cded6b652a631243fa924cd8e30faa3e5..60526517e99c205b154a1829b3d1f909c959c49d 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts
@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 
-import {JanksStruct} from '../../bean/JanksStruct';
-import {ColorUtils} from '../../component/trace/base/ColorUtils';
-import {TraceRow} from '../../component/trace/base/TraceRow';
+import { JanksStruct } from '../../bean/JanksStruct';
+import { ColorUtils } from '../../component/trace/base/ColorUtils';
+import { TraceRow } from '../../component/trace/base/TraceRow';
 import {
   drawLoadingFrame,
   drawString,
@@ -24,7 +24,7 @@ import {
   Render,
   RequestMessage,
 } from './ProcedureWorkerCommon';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class JankRender extends Render {
   renderMainThread(
@@ -76,8 +76,7 @@ export class JankRender extends Render {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>): void {
-  }
+  render(req: RequestMessage, list: Array<any>, filter: Array<any>): void {}
 }
 
 export function jank(
@@ -118,7 +117,7 @@ export function jank(
   }
 }
 
-export function JankStructOnClick(clickRowType: string, sp: SpSystemTrace, row: TraceRow<any>,jankClickHandler: any) {
+export function JankStructOnClick(clickRowType: string, sp: SpSystemTrace, row: TraceRow<any>, jankClickHandler: any) {
   return new Promise((resolve, reject) => {
     JankStruct.hoverJankStruct = JankStruct.hoverJankStruct || row.getHoverStruct();
     if (clickRowType === TraceRow.ROW_TYPE_JANK && JankStruct.hoverJankStruct) {
@@ -136,7 +135,9 @@ export function JankStructOnClick(clickRowType: string, sp: SpSystemTrace, row:
                 `trace-row[row-id='frameTime'][row-type='janks']`
               );
             } else {
-              endParentRow = sp.shadowRoot?.querySelector<TraceRow<any>>(`trace-row[row-type='process'][row-id='${data.pid}'][folder]`);
+              endParentRow = sp.shadowRoot?.querySelector<TraceRow<any>>(
+                `trace-row[row-type='process'][row-id='${data.pid}'][folder]`
+              );
             }
             sp.drawJankLine(endParentRow, JankStruct.selectJankStruct!, data);
           });
@@ -148,7 +149,6 @@ export function JankStructOnClick(clickRowType: string, sp: SpSystemTrace, row:
       resolve(null);
     }
   });
-
 }
 
 export class JankStruct extends JanksStruct {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts
index b5c5cc49cbfe315ef6d29de1e84a397d4b123bdd..136e7ff26054c7bf5f4ab92b94c16b063122c2f1 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerLTPO.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BaseStruct, dataFilterHandler,drawLoadingFrame } from './ProcedureWorkerCommon';
+import { BaseStruct, dataFilterHandler, drawLoadingFrame } from './ProcedureWorkerCommon';
 import { TraceRow } from '../../component/trace/base/TraceRow';
 
 export class LtpoRender {
@@ -44,7 +44,7 @@ export class LtpoRender {
     req.ltpoContext.globalAlpha = 0.6;
     let find = false;
     let offset = 3;
-    drawLoadingFrame(req.ltpoContext,filter,ltpoRow);
+    drawLoadingFrame(req.ltpoContext, filter, ltpoRow);
     for (let re of filter) {
       if (ltpoRow.isHover) {
         if (
@@ -56,18 +56,17 @@ export class LtpoRender {
           find = true;
         }
       }
-      if(!ltpoRow.isHover) LtpoStruct.hoverLtpoStruct = undefined
+      if (!ltpoRow.isHover) LtpoStruct.hoverLtpoStruct = undefined;
       if (!find && ltpoRow.isHover) {
         LtpoStruct.hoverLtpoStruct = undefined;
       }
-      req.ltpoContext.beginPath()
+      req.ltpoContext.beginPath();
       LtpoStruct.draw(req.ltpoContext, re);
-      req.ltpoContext.closePath()
+      req.ltpoContext.closePath();
     }
   }
 }
 
-
 export class LtpoStruct extends BaseStruct {
   static hoverLtpoStruct: LtpoStruct | undefined;
   static selectLtpoStruct: LtpoStruct | undefined;
@@ -81,7 +80,7 @@ export class LtpoStruct extends BaseStruct {
   startTs: number | undefined;
   nextStartTs: string | number | undefined;
   nextDur: number | undefined;
-  value: number | undefined ;
+  value: number | undefined;
   pid: number | undefined;
   itid: number | undefined;
   startTime: number | undefined;
@@ -94,26 +93,25 @@ export class LtpoStruct extends BaseStruct {
     if (data.frame) {
       ctx.fillStyle = '#9933FA';
       if (data === LtpoStruct.hoverLtpoStruct || data === LtpoStruct.selectLtpoStruct) {
-        let drawHeight: number = LtpoStruct.maxVal !== 0 ? Math.floor(
-          ((Number(data.value) || 0) * (data.frame.height || 0) * 1.0) / LtpoStruct.maxVal!
-        ): 0;
-        drawHeight = drawHeight < 1 ? 1 : drawHeight
+        let drawHeight: number =
+          LtpoStruct.maxVal !== 0
+            ? Math.floor(((Number(data.value) || 0) * (data.frame.height || 0) * 1.0) / LtpoStruct.maxVal!)
+            : 0;
+        drawHeight = drawHeight < 1 ? 1 : drawHeight;
         ctx.globalAlpha = 1.0;
         ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight);
         ctx.lineWidth = 1;
         ctx.strokeStyle = '	#0000FF';
-        ctx.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight)
+        ctx.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight);
       } else {
         ctx.globalAlpha = 0.6;
         let drawHeight: number = 0;
-        if(LtpoStruct.maxVal !== 0){
+        if (LtpoStruct.maxVal !== 0) {
           drawHeight = Math.floor(((Number(data.value) || 0) * (data.frame.height || 0)) / LtpoStruct.maxVal!);
         }
-        drawHeight = drawHeight < 1 ? 1 : drawHeight
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight)
+        drawHeight = drawHeight < 1 ? 1 : drawHeight;
+        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, data.frame.width, drawHeight);
       }
-
     }
   }
-
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerPerfTool.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerPerfTool.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8980c090cd8210a0558ff1dd5ce72660b56b4e6
--- /dev/null
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerPerfTool.ts
@@ -0,0 +1,108 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseStruct, dataFilterHandler, drawLoadingFrame, drawString, isFrameContainPoint, Render } from './ProcedureWorkerCommon';
+import { TraceRow } from '../../component/trace/base/TraceRow';
+import { ColorUtils } from '../../component/trace/base/ColorUtils';
+import { SpSystemTrace } from "../../component/SpSystemTrace";
+
+export class PerfToolRender extends Render {
+  renderMainThread(
+    perfReq: {
+      context: CanvasRenderingContext2D;
+      useCache: boolean;
+      type: string;
+      index: number;
+    },
+    row: TraceRow<PerfToolStruct>
+  ) {
+    PerfToolStruct.index = perfReq.index;
+    let perfToolList = row.dataList;
+    let perfToolFilter = row.dataListCache;
+    dataFilterHandler(perfToolList, perfToolFilter, {
+      startKey: 'startNS',
+      durKey: 'dur',
+      startNS: TraceRow.range?.startNS ?? 0,
+      endNS: TraceRow.range?.endNS ?? 0,
+      totalNS: TraceRow.range?.totalNS ?? 0,
+      frame: row.frame,
+      paddingTop: 5,
+      useCache: perfReq.useCache || !(TraceRow.range?.refresh ?? false),
+    });
+    drawLoadingFrame(perfReq.context, perfToolFilter, row);
+    perfReq.context.beginPath();
+    let find = false;
+    for (let re of perfToolFilter) {
+      PerfToolStruct.draw(perfReq.context, re);
+      if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
+        PerfToolStruct.hoverPerfToolStruct = re;
+        find = true;
+      }
+    }
+    if (!find && row.isHover) PerfToolStruct.hoverPerfToolStruct = undefined;
+    perfReq.context.closePath();
+  }
+}
+export function PerfToolsStructOnClick(clickRowType: string, sp: SpSystemTrace) {
+  return new Promise((resolve, reject) => {
+    if (clickRowType === TraceRow.ROW_TYPE_PERF_TOOL && PerfToolStruct.hoverPerfToolStruct) {
+      PerfToolStruct.selectPerfToolStruct = PerfToolStruct.hoverPerfToolStruct;
+      sp.traceSheetEL?.displayPerfToolsData(PerfToolStruct.selectPerfToolStruct);
+      sp.timerShaftEL?.modifyFlagList(undefined);
+      reject(new Error());
+    } else {
+      resolve(null);
+    }
+  });
+}
+export class PerfToolStruct extends BaseStruct {
+  static hoverPerfToolStruct: PerfToolStruct | undefined;
+  static selectPerfToolStruct: PerfToolStruct | undefined;
+  static index = 0;
+  count: string | undefined;
+  startNS: number | undefined;
+  dur: number | undefined;
+  id: number | undefined;
+  name: string | undefined;
+
+  static draw(PerfContext: CanvasRenderingContext2D, data: PerfToolStruct) {
+    if (data.frame) {
+      let width = data.frame.width || 0;
+      PerfContext.globalAlpha = 1;
+      PerfContext.fillStyle = ColorUtils.colorForTid(PerfToolStruct.index);
+      PerfContext.fillRect(data.frame.x, data.frame.y, width, data.frame.height);
+      if (data.frame.width > 7) {
+        PerfContext.textBaseline = 'middle';
+        PerfContext.lineWidth = 1;
+        let countText: string | undefined = '';
+        if (data.count) {
+          countText = `${data.count}`;
+        }
+        PerfContext.fillStyle = ColorUtils.funcTextColor('#000');
+        drawString(PerfContext, countText, 2, data.frame, data);
+      }
+      if (data.id == PerfToolStruct.selectPerfToolStruct?.id &&
+        data.name == PerfToolStruct.selectPerfToolStruct?.name) {
+        PerfContext.strokeStyle = '#000';
+        PerfContext.lineWidth = 2;
+        PerfContext.strokeRect(data.frame.x, data.frame.y + 1, data.frame.width, data.frame.height - 2);
+      }
+    }
+  }
+
+  static isHover(clock: PerfToolStruct) {
+    return clock === PerfToolStruct.hoverPerfToolStruct || clock === PerfToolStruct.selectPerfToolStruct;
+  }
+}
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerSnapshot.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerSnapshot.ts
index 7e9124688a2528f73104a3d3c6783cfb2035f3c8..8f326224883f77e5d756a677f46c4d9ebdb94e9a 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerSnapshot.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerSnapshot.ts
@@ -70,25 +70,64 @@ export function snapshot(
 const padding = 2;
 
 const snapshotTypeHandlerMap = new Map<string, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => void>([
-  [TraceRow.ROW_TYPE_SYS_MEMORY_GPU_TOTAL, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuDumpTotalSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_SYS_MEMORY_GPU_WINDOW, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuDumpWindowSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_VM_TRACKER_SMAPS, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displaySmapsSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_VMTRACKER_SHM, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayShmSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_PURGEABLE_TOTAL_ABILITY, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayTotalAbilitySheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_PURGEABLE_PIN_ABILITY, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayPinAbilitySheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_PURGEABLE_TOTAL_VM, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayTotalVMSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_PURGEABLE_PIN_VM, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayPinVMSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_DMA_ABILITY, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayDmaAbilitySheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_DMA_VMTRACKER, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayDmaVmTrackerSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_GPU_MEMORY_ABILITY, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuMemoryAbilitySheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_GPU_MEMORY_VMTRACKER, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuMemoryVmTrackerSheet(sp, row, reject)],
-  [TraceRow.ROW_TYPE_GPU_RESOURCE_VMTRACKER, (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuResourceSheet(sp)],
-])
+  [
+    TraceRow.ROW_TYPE_SYS_MEMORY_GPU_TOTAL,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuDumpTotalSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_SYS_MEMORY_GPU_WINDOW,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuDumpWindowSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_VM_TRACKER_SMAPS,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displaySmapsSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_VMTRACKER_SHM,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayShmSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_PURGEABLE_TOTAL_ABILITY,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayTotalAbilitySheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_PURGEABLE_PIN_ABILITY,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayPinAbilitySheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_PURGEABLE_TOTAL_VM,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayTotalVMSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_PURGEABLE_PIN_VM,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayPinVMSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_DMA_ABILITY,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayDmaAbilitySheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_DMA_VMTRACKER,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayDmaVmTrackerSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_GPU_MEMORY_ABILITY,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuMemoryAbilitySheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_GPU_MEMORY_VMTRACKER,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuMemoryVmTrackerSheet(sp, row, reject),
+  ],
+  [
+    TraceRow.ROW_TYPE_GPU_RESOURCE_VMTRACKER,
+    (sp: SpSystemTrace, row: TraceRow<any>, reject: any) => displayGpuResourceSheet(sp),
+  ],
+]);
 export function SnapshotStructOnClick(clickRowType: string, sp: SpSystemTrace, row: TraceRow<any>) {
   return new Promise((resolve, reject) => {
     if (snapshotTypeHandlerMap.has(clickRowType)) {
       SnapshotStruct.selectSnapshotStruct = SnapshotStruct.hoverSnapshotStruct || row.getHoverStruct();
-      snapshotTypeHandlerMap.get(clickRowType)?.(sp, row ,reject);
+      snapshotTypeHandlerMap.get(clickRowType)?.(sp, row, reject);
       reject(new Error());
     } else {
       resolve(null);
@@ -98,22 +137,14 @@ export function SnapshotStructOnClick(clickRowType: string, sp: SpSystemTrace, r
 
 function displayGpuDumpTotalSheet(sp: SpSystemTrace, row: TraceRow<any>, reject: (reason?: any) => void) {
   SnapshotStruct.selectSnapshotStruct = SnapshotStruct.hoverSnapshotStruct;
-  sp.traceSheetEL?.displayGpuSelectedData(
-    'total',
-    SnapshotStruct.selectSnapshotStruct!.startNs,
-    row!.dataListCache
-  );
+  sp.traceSheetEL?.displayGpuSelectedData('total', SnapshotStruct.selectSnapshotStruct!.startNs, row!.dataListCache);
   sp.timerShaftEL?.modifyFlagList(undefined);
   reject();
 }
 
 function displayGpuDumpWindowSheet(sp: SpSystemTrace, row: TraceRow<any>, reject: (reason?: any) => void) {
   SnapshotStruct.selectSnapshotStruct = SnapshotStruct.hoverSnapshotStruct;
-  sp.traceSheetEL?.displayGpuSelectedData(
-    'window',
-    SnapshotStruct.selectSnapshotStruct!.startNs,
-    row!.dataListCache
-  );
+  sp.traceSheetEL?.displayGpuSelectedData('window', SnapshotStruct.selectSnapshotStruct!.startNs, row!.dataListCache);
   sp.timerShaftEL?.modifyFlagList(undefined);
   reject();
 }
@@ -168,19 +199,13 @@ function displayDmaVmTrackerSheet(sp: SpSystemTrace, row: TraceRow<any>, reject:
 
 function displayGpuMemoryAbilitySheet(sp: SpSystemTrace, row: TraceRow<any>, reject: (reason?: any) => void) {
   SnapshotStruct.selectSnapshotStruct = SnapshotStruct.hoverSnapshotStruct;
-  sp.traceSheetEL?.displayGpuMemoryAbility(
-    SnapshotStruct.selectSnapshotStruct!.startNs,
-    row!.dataListCache
-  );
+  sp.traceSheetEL?.displayGpuMemoryAbility(SnapshotStruct.selectSnapshotStruct!.startNs, row!.dataListCache);
   reject();
 }
 
 function displayGpuMemoryVmTrackerSheet(sp: SpSystemTrace, row: TraceRow<any>, reject: (reason?: any) => void) {
   SnapshotStruct.selectSnapshotStruct = SnapshotStruct.hoverSnapshotStruct;
-  sp.traceSheetEL?.displayGpuMemoryVmTracker(
-    SnapshotStruct.selectSnapshotStruct!.startNs,
-    row!.dataListCache
-  );
+  sp.traceSheetEL?.displayGpuMemoryVmTracker(SnapshotStruct.selectSnapshotStruct!.startNs, row!.dataListCache);
   reject();
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerSoInit.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerSoInit.ts
index 2f715ac0b95a60587bf20bcd4075ec3738fe8499..fa54f2a2b1f47b73f0bcb106b4f65ccd01cffd9c 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerSoInit.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerSoInit.ts
@@ -22,9 +22,9 @@ import {
   Render,
   RequestMessage,
   drawString,
-  drawLoadingFrame
+  drawLoadingFrame,
 } from './ProcedureWorkerCommon';
-import {SpSystemTrace} from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 
 export class SoRender extends Render {
   renderMainThread(
@@ -118,16 +118,16 @@ export function soDataFilter(
   }
 }
 export function SoStructOnClick(clickRowType: string, sp: SpSystemTrace, scrollToFuncHandler: any) {
-  return new Promise((resolve, reject)=>{
+  return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_STATIC_INIT && SoStruct.hoverSoStruct) {
       SoStruct.selectSoStruct = SoStruct.hoverSoStruct;
       sp.traceSheetEL?.displayStaticInitData(SoStruct.selectSoStruct, scrollToFuncHandler);
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
-  })
+  });
 }
 export class SoStruct extends BaseStruct {
   static hoverSoStruct: SoStruct | undefined;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
index e384ab68bb1508051ec4eb39f257441614af00fb..a1833bf8c4d3ce9ccbe72cb4a0b811c529c0f15a 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
@@ -26,7 +26,7 @@ import {
 import { TraceRow } from '../../component/trace/base/TraceRow';
 import { Utils } from '../../component/trace/base/Utils';
 import { ThreadStruct as BaseThreadStruct } from '../../bean/ThreadStruct';
-import { SpSystemTrace } from "../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../component/SpSystemTrace';
 import { SpSegmentationChart } from '../../component/chart/SpSegmentationChart';
 import { ns2x } from './ProcedureWorkerCommon';
 import { Flag } from '../../component/trace/timer-shaft/Flag';
@@ -63,18 +63,20 @@ export class ThreadRender extends Render {
       ThreadStruct.drawThread(threadReq.context, re);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame!, row.hoverX, row.hoverY)) {
         ThreadStruct.hoverThreadStruct = re;
-        find = true
+        find = true;
       }
     }
-    if (row.rowId === 'statesrow' &&
+    if (
+      row.rowId === 'statesrow' &&
       (!row.isHover || !find) &&
       !CpuFreqExtendStruct.isTabHover &&
       CpuFreqExtendStruct.hoverCpuFreqStruct === undefined &&
       CpuFreqExtendStruct.selectCpuFreqStruct === undefined &&
       !BinderStruct.isTabHover &&
       !BinderStruct.selectCpuFreqStruct &&
-      !BinderStruct.hoverCpuFreqStruct && 
-      !TabPaneFreqStatesDataCut.isStateTabHover) {
+      !BinderStruct.hoverCpuFreqStruct &&
+      !TabPaneFreqStatesDataCut.isStateTabHover
+    ) {
       ThreadStruct.hoverThreadStruct = undefined;
       SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = undefined;
       find = false;
@@ -82,10 +84,15 @@ export class ThreadRender extends Render {
     threadReq.context.closePath();
   }
 
-  render(threadReq: RequestMessage, threadList: Array<any>, threadFilter: Array<any>) { }
+  render(threadReq: RequestMessage, threadList: Array<any>, threadFilter: Array<any>) {}
 }
 
-export function ThreadStructOnClick(clickRowType: string, sp: SpSystemTrace, threadClickHandler: any, cpuClickHandler: any) {
+export function ThreadStructOnClick(
+  clickRowType: string,
+  sp: SpSystemTrace,
+  threadClickHandler: any,
+  cpuClickHandler: any
+) {
   return new Promise((resolve, reject) => {
     if (clickRowType === TraceRow.ROW_TYPE_THREAD && ThreadStruct.hoverThreadStruct) {
       sp.removeLinkLinesByBusinessType('thread');
@@ -121,25 +128,33 @@ export class ThreadStruct extends BaseThreadStruct {
         threadContext.globalAlpha = 0.8;
       } else {
         threadContext.globalAlpha = 1;
-      };
-      if (!ThreadStruct.selectThreadStruct && data.start_ts! + data.dur! > ThreadStruct.startCycleTime && data.start_ts! + data.dur! < ThreadStruct.endTime) {
+      }
+      if (
+        !ThreadStruct.selectThreadStruct &&
+        data.start_ts! + data.dur! > ThreadStruct.startCycleTime &&
+        data.start_ts! + data.dur! < ThreadStruct.endTime
+      ) {
         threadContext.globalAlpha = 1;
-      };
-      let stateText = ThreadStruct.getEndState(data.state === 'S' && data.name === 'Sleeping' ? data.name : data.state || '');
+      }
+      let stateText = ThreadStruct.getEndState(
+        data.state === 'S' && data.name === 'Sleeping' ? data.name : data.state || ''
+      );
       if (data.name === 'all-state' && data.state === 'S') {
         stateText = 'Sleeping';
-      };
-      threadContext.fillStyle = Utils.getStateColor(data.state === 'S' && data.name === 'all-state' ? 'Sleeping' : data.state || '');
+      }
+      threadContext.fillStyle = Utils.getStateColor(
+        data.state === 'S' && data.name === 'all-state' ? 'Sleeping' : data.state || ''
+      );
       if ('S' === data.state && data.name !== 'all-state') {
         threadContext.globalAlpha = 0.2;
-      };
+      }
       threadContext.fillRect(data.frame.x, data.frame.y, data.frame.width, data.frame.height);
       threadContext.fillStyle = '#fff';
       threadContext.textBaseline = 'middle';
       threadContext.font = '8px sans-serif';
       if ('S' !== data.state || (data.name === 'all-state' && data.state === 'S')) {
         data.frame.width > 7 && drawString(threadContext, stateText, 2, data.frame, data);
-      };
+      }
       if (
         ThreadStruct.selectThreadStruct &&
         ThreadStruct.equals(ThreadStruct.selectThreadStruct, data) &&
@@ -147,12 +162,7 @@ export class ThreadStruct extends BaseThreadStruct {
       ) {
         threadContext.strokeStyle = '#232c5d';
         threadContext.lineWidth = 2;
-        threadContext.strokeRect(
-          data.frame.x,
-          data.frame.y,
-          data.frame.width - 2,
-          data.frame.height
-        );
+        threadContext.strokeRect(data.frame.x, data.frame.y, data.frame.width - 2, data.frame.height);
       }
       if (ThreadStruct.hoverThreadStruct === data && data.name === 'all-state') {
         let pointX: number = ns2x(
diff --git a/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCPU.ts b/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCPU.ts
index 8ace6a8fe91ded7d8abb86022597c8470e61f4e8..9e853e0289c38096b09724e32f5a4f809043e680 100644
--- a/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCPU.ts
+++ b/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCPU.ts
@@ -194,7 +194,7 @@ export class CpuRender {
   }
 }
 export function CpuStructOnClick(rowType: string, sp: SpSystemTrace, cpuClickHandler: any) {
-  return new Promise((resolve,reject) => {
+  return new Promise((resolve, reject) => {
     if (rowType === TraceRow.ROW_TYPE_CPU && CpuStruct.hoverCpuStruct) {
       CpuStruct.selectCpuStruct = CpuStruct.hoverCpuStruct;
       sp.timerShaftEL?.drawTriangle(CpuStruct.selectCpuStruct!.startTime || 0, 'inverted');
@@ -208,11 +208,10 @@ export function CpuStructOnClick(rowType: string, sp: SpSystemTrace, cpuClickHan
       );
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
-
 }
 export class CpuStruct extends BaseStruct {
   static cpuCount: number = 1; //最大cpu数量
diff --git a/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits.ts b/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits.ts
index 980f8c7f50623223ed4fdb1776e34da661526682..b4c0d6589eefc40945766374db644e953f769310 100644
--- a/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits.ts
+++ b/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuFreqLimits.ts
@@ -23,12 +23,13 @@ import {
   Render,
   drawFlagLine,
   RequestMessage,
-  drawSelection, drawLoadingFrame,
+  drawSelection,
+  drawLoadingFrame,
 } from '../ProcedureWorkerCommon';
 import { ColorUtils } from '../../../component/trace/base/ColorUtils';
 import { TraceRow } from '../../../component/trace/base/TraceRow';
 import { convertJSON } from '../../logic-worker/ProcedureLogicWorkerCommon';
-import {SpSystemTrace} from "../../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../../component/SpSystemTrace';
 
 export class CpuFreqLimitRender extends Render {
   renderMainThread(
@@ -82,16 +83,16 @@ export class CpuFreqLimitRender extends Render {
   }
 }
 export function CpuFreqLimitsStructOnClick(clickRowType: string, sp: SpSystemTrace) {
-    return new Promise((resolve, reject) => {
-      if (clickRowType === TraceRow.ROW_TYPE_CPU_FREQ_LIMIT && CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct) {
-        CpuFreqLimitsStruct.selectCpuFreqLimitsStruct = CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct;
-        sp.traceSheetEL?.displayFreqLimitData();
-        sp.timerShaftEL?.modifyFlagList(undefined);
-        reject(new Error());
-      }else{
-        resolve(null);
-      }
-    });
+  return new Promise((resolve, reject) => {
+    if (clickRowType === TraceRow.ROW_TYPE_CPU_FREQ_LIMIT && CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct) {
+      CpuFreqLimitsStruct.selectCpuFreqLimitsStruct = CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct;
+      sp.traceSheetEL?.displayFreqLimitData();
+      sp.timerShaftEL?.modifyFlagList(undefined);
+      reject(new Error());
+    } else {
+      resolve(null);
+    }
+  });
 }
 export class CpuFreqLimitsStruct extends BaseStruct {
   static hoverCpuFreqLimitsStruct: CpuFreqLimitsStruct | undefined;
diff --git a/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuState.ts b/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuState.ts
index 28d5035546ca416bf1037102fb82f1c2d2fa6909..241f5903ac8c571a304e3773c27561caf41a9fad 100644
--- a/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuState.ts
+++ b/ide/src/trace/database/ui-worker/cpu/ProcedureWorkerCpuState.ts
@@ -30,7 +30,7 @@ import {
 import { TraceRow } from '../../../component/trace/base/TraceRow';
 import { ColorUtils } from '../../../component/trace/base/ColorUtils';
 import { convertJSON } from '../../logic-worker/ProcedureLogicWorkerCommon';
-import {SpSystemTrace} from "../../../component/SpSystemTrace";
+import { SpSystemTrace } from '../../../component/SpSystemTrace';
 
 export class CpuStateRender extends PerfRender {
   renderMainThread(
@@ -172,7 +172,7 @@ export function CpuStateStructOnClick(clickRowType: string, sp: SpSystemTrace) {
       sp.traceSheetEL?.displayCpuStateData();
       sp.timerShaftEL?.modifyFlagList(undefined);
       reject(new Error());
-    }else{
+    } else {
       resolve(null);
     }
   });
diff --git a/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts b/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts
index b138fe0ae9a4aea23b305ec2aaad456dbbe0b8a7..8aaa4aeff48ba4acaf2de54c625829906de8e285 100644
--- a/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts
+++ b/ide/src/trace/database/ui-worker/procedureWorkerBinder.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright (C) 2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -48,20 +47,22 @@ export class BinderRender extends Render {
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         BinderStruct.hoverCpuFreqStruct = re;
       }
-if (!row.isHover) {
+      if (!row.isHover) {
         BinderStruct.hoverCpuFreqStruct = undefined;
       }
       BinderStruct.draw(freqReq.context, re);
     }
     freqReq.context.closePath();
-    if (!BinderStruct.isTabHover && 
-      !BinderStruct.hoverCpuFreqStruct && 
-      !BinderStruct.selectCpuFreqStruct && 
-      !CpuFreqExtendStruct.isTabHover && 
-      !CpuFreqExtendStruct.hoverCpuFreqStruct && 
+    if (
+      !BinderStruct.isTabHover &&
+      !BinderStruct.hoverCpuFreqStruct &&
+      !BinderStruct.selectCpuFreqStruct &&
+      !CpuFreqExtendStruct.isTabHover &&
+      !CpuFreqExtendStruct.hoverCpuFreqStruct &&
       !CpuFreqExtendStruct.selectCpuFreqStruct &&
       !ThreadStruct.hoverThreadStruct &&
-      !TabPaneFreqStatesDataCut.isStateTabHover) {
+      !TabPaneFreqStatesDataCut.isStateTabHover
+    ) {
       SpSegmentationChart.trace.traceSheetEL!.systemLogFlag = undefined;
     }
     if (!SpSegmentationChart.trace.isMousePointInSheet) {
diff --git a/ide/src/trace/enums/helpDocEnums.ts b/ide/src/trace/enums/helpDocEnums.ts
index 86f0914dab6597182403fb13665e863dc163344e..6ac174547b6500a8627728f49fe4075435db6b39 100644
--- a/ide/src/trace/enums/helpDocEnums.ts
+++ b/ide/src/trace/enums/helpDocEnums.ts
@@ -13,169 +13,169 @@
  * limitations under the License.
  */
 const events = {
-    RECORD_EVENT: 'record',
-    ONLINE_RECORD_EVENT: 'online_record',
-    LOAD_EVENT: 'load',
-    JS_MEMORY_EVENT: 'js_memory',
-    NATIVE_EVENT: 'native',
-    VIRTUAL_MEMORY_EVENT: 'virtual_memory',
-    MEMORY_TEMPLATE_EVENT: 'memory_template',
-    PERF_EVENT: 'perf',
-    ARKTS_EVENT: 'arkts',
-    FRAME_RECORD_EVENT: 'frame_record',
-    ANIMATION_EVENT: 'animation',
-    TASKPOOL_EVENT: 'taskpool',
-    APP_STARTUP_EVENT: 'app_startup',
-    SCHEDULING_RECORD_EVENT: 'scheduling_record',
-    FILE_SYSTEM_EVENT: 'file_system',
-    BIO_EVENT: 'bio',
-    SQL_EVENT: 'sql',
-    HISYS_EVENT: 'hisys',
-    SDK_RECORD_EVENT: 'sdk_record',
-    IMPORT_SO_EVENT: 'import_so',
-    HILOG_EVENT: 'hilog',
-    ABILITY_EVENT: 'ability',
-    TRACE_PARSING_EVENT: 'trace_parsing',
-    OPERATION_SKILLS_EVENT: 'operation_skills',
-    KEYWORDS_SHORTCUTS_EVENT: 'keywords_shortcuts',
-    TRACE_STREAMER_EXPLAIN_EVENT: 'trace_streamer_explain'
+  RECORD_EVENT: 'record',
+  ONLINE_RECORD_EVENT: 'online_record',
+  LOAD_EVENT: 'load',
+  JS_MEMORY_EVENT: 'js_memory',
+  NATIVE_EVENT: 'native',
+  VIRTUAL_MEMORY_EVENT: 'virtual_memory',
+  MEMORY_TEMPLATE_EVENT: 'memory_template',
+  PERF_EVENT: 'perf',
+  ARKTS_EVENT: 'arkts',
+  FRAME_RECORD_EVENT: 'frame_record',
+  ANIMATION_EVENT: 'animation',
+  TASKPOOL_EVENT: 'taskpool',
+  APP_STARTUP_EVENT: 'app_startup',
+  SCHEDULING_RECORD_EVENT: 'scheduling_record',
+  FILE_SYSTEM_EVENT: 'file_system',
+  BIO_EVENT: 'bio',
+  SQL_EVENT: 'sql',
+  HISYS_EVENT: 'hisys',
+  SDK_RECORD_EVENT: 'sdk_record',
+  IMPORT_SO_EVENT: 'import_so',
+  HILOG_EVENT: 'hilog',
+  ABILITY_EVENT: 'ability',
+  TRACE_PARSING_EVENT: 'trace_parsing',
+  OPERATION_SKILLS_EVENT: 'operation_skills',
+  KEYWORDS_SHORTCUTS_EVENT: 'keywords_shortcuts',
+  TRACE_STREAMER_EXPLAIN_EVENT: 'trace_streamer_explain',
 };
 
-interface EventDefinition {  
-    event: string;  
-    name: string;  
-    index: number;  
-  };
+interface EventDefinition {
+  event: string;
+  name: string;
+  index: number;
+}
 
-export const eventDefinitions:{ [key: string]: EventDefinition } = {
-    quickstart_device_record: {
-        event: events.RECORD_EVENT,
-        name: 'quickstart_device_record',
-        index: 1
-    },
-    quickstart_web_record: {
-        event: events.ONLINE_RECORD_EVENT,
-        name: 'quickstart_web_record',
-        index: 2
-    },
-    quickstart_systemtrace: {
-        event: events.LOAD_EVENT,
-        name: 'quickstart_systemtrace',
-        index: 3
-    },
-    quickstart_Js_memory: {
-        event: events.JS_MEMORY_EVENT,
-        name: 'quickstart_Js_memory',
-        index: 4
-    },
-    quickstart_native_memory: {
-        event: events.NATIVE_EVENT,
-        name: 'quickstart_native_memory',
-        index: 5
-    },
-    quickstart_page_fault: {
-        event: events.VIRTUAL_MEMORY_EVENT,
-        name: 'quickstart_page_fault',
-        index: 6
-    },
-    quickstart_memory_template: {
-        event: events.MEMORY_TEMPLATE_EVENT,
-        name: 'quickstart_memory_template',
-        index: 7
-    },
-    quickstart_hiperf: {
-        event: events.PERF_EVENT,
-        name: 'quickstart_hiperf',
-        index: 8
-    },
-    quickstart_arkts: {
-        event: events.ARKTS_EVENT,
-        name: 'quickstart_arkts',
-        index: 9
-    },
-    quickstart_Frametimeline: {
-        event: events.FRAME_RECORD_EVENT,
-        name: 'quickstart_Frametimeline',
-        index: 10
-    },
-    quickstart_animation: {
-        event: events.ANIMATION_EVENT,
-        name: 'quickstart_animation',
-        index: 11
-    },
-    quickstart_taskpool: {
-        event: events.TASKPOOL_EVENT,
-        name: 'quickstart_taskpool',
-        index: 12
-    },
-    quickstart_app_startup: {
-        event: events.APP_STARTUP_EVENT,
-        name: 'quickstart_app_startup',
-        index: 13
-    },
-    quickstart_schedulinganalysis: {
-        event: events.SCHEDULING_RECORD_EVENT,
-        name: 'quickstart_schedulinganalysis',
-        index: 14
-    },
-    quickstart_filesystem: {
-        event: events.FILE_SYSTEM_EVENT,
-        name: 'quickstart_filesystem',
-        index: 15
-    },
-    quickstart_bio: {
-        event: events.BIO_EVENT,
-        name: 'quickstart_bio',
-        index: 16
-    },
-    quickstart_sql_metrics: {
-        event: events.SQL_EVENT,
-        name: 'quickstart_sql_metrics',
-        index: 17
-    },
-    quickstart_hisystemevent: {
-        event: events.HISYS_EVENT,
-        name: 'quickstart_hisystemevent',
-        index: 18
-    },
-    quickstart_sdk: {
-        event: events.SDK_RECORD_EVENT,
-        name: 'quickstart_sdk',
-        index: 19
-    },
-    quickstart_Import_so: {
-        event: events.IMPORT_SO_EVENT,
-        name: 'quickstart_Import_so',
-        index: 20
-    },
-    quickstart_hilog: {
-        event: events.HILOG_EVENT,
-        name: 'quickstart_hilog',
-        index: 21
-    },
-    quickstart_ability_monitor: {
-        event: events.ABILITY_EVENT,
-        name: 'quickstart_ability_monitor',
-        index: 22
-    },
-    quickstart_parsing_ability: {
-        event: events.TRACE_PARSING_EVENT,
-        name: 'quickstart_parsing_ability',
-        index: 23
-    },
-    quickstart_Application_operation_skills: {
-        event: events.OPERATION_SKILLS_EVENT,
-        name: 'quickstart_Application_operation_skills',
-        index: 24
-    },
-    quickstart_keywords_shortcuts: {
-        event: events.KEYWORDS_SHORTCUTS_EVENT,
-        name: 'quickstart_keywords_shortcuts',
-        index: 25
-    },
-    des_tables: {
-        event: events.TRACE_STREAMER_EXPLAIN_EVENT,
-        name: 'des_tables',
-        index: 26
-    },
-}; 
\ No newline at end of file
+export const eventDefinitions: { [key: string]: EventDefinition } = {
+  quickstart_device_record: {
+    event: events.RECORD_EVENT,
+    name: 'quickstart_device_record',
+    index: 1,
+  },
+  quickstart_web_record: {
+    event: events.ONLINE_RECORD_EVENT,
+    name: 'quickstart_web_record',
+    index: 2,
+  },
+  quickstart_systemtrace: {
+    event: events.LOAD_EVENT,
+    name: 'quickstart_systemtrace',
+    index: 3,
+  },
+  quickstart_Js_memory: {
+    event: events.JS_MEMORY_EVENT,
+    name: 'quickstart_Js_memory',
+    index: 4,
+  },
+  quickstart_native_memory: {
+    event: events.NATIVE_EVENT,
+    name: 'quickstart_native_memory',
+    index: 5,
+  },
+  quickstart_page_fault: {
+    event: events.VIRTUAL_MEMORY_EVENT,
+    name: 'quickstart_page_fault',
+    index: 6,
+  },
+  quickstart_memory_template: {
+    event: events.MEMORY_TEMPLATE_EVENT,
+    name: 'quickstart_memory_template',
+    index: 7,
+  },
+  quickstart_hiperf: {
+    event: events.PERF_EVENT,
+    name: 'quickstart_hiperf',
+    index: 8,
+  },
+  quickstart_arkts: {
+    event: events.ARKTS_EVENT,
+    name: 'quickstart_arkts',
+    index: 9,
+  },
+  quickstart_Frametimeline: {
+    event: events.FRAME_RECORD_EVENT,
+    name: 'quickstart_Frametimeline',
+    index: 10,
+  },
+  quickstart_animation: {
+    event: events.ANIMATION_EVENT,
+    name: 'quickstart_animation',
+    index: 11,
+  },
+  quickstart_taskpool: {
+    event: events.TASKPOOL_EVENT,
+    name: 'quickstart_taskpool',
+    index: 12,
+  },
+  quickstart_app_startup: {
+    event: events.APP_STARTUP_EVENT,
+    name: 'quickstart_app_startup',
+    index: 13,
+  },
+  quickstart_schedulinganalysis: {
+    event: events.SCHEDULING_RECORD_EVENT,
+    name: 'quickstart_schedulinganalysis',
+    index: 14,
+  },
+  quickstart_filesystem: {
+    event: events.FILE_SYSTEM_EVENT,
+    name: 'quickstart_filesystem',
+    index: 15,
+  },
+  quickstart_bio: {
+    event: events.BIO_EVENT,
+    name: 'quickstart_bio',
+    index: 16,
+  },
+  quickstart_sql_metrics: {
+    event: events.SQL_EVENT,
+    name: 'quickstart_sql_metrics',
+    index: 17,
+  },
+  quickstart_hisystemevent: {
+    event: events.HISYS_EVENT,
+    name: 'quickstart_hisystemevent',
+    index: 18,
+  },
+  quickstart_sdk: {
+    event: events.SDK_RECORD_EVENT,
+    name: 'quickstart_sdk',
+    index: 19,
+  },
+  quickstart_Import_so: {
+    event: events.IMPORT_SO_EVENT,
+    name: 'quickstart_Import_so',
+    index: 20,
+  },
+  quickstart_hilog: {
+    event: events.HILOG_EVENT,
+    name: 'quickstart_hilog',
+    index: 21,
+  },
+  quickstart_ability_monitor: {
+    event: events.ABILITY_EVENT,
+    name: 'quickstart_ability_monitor',
+    index: 22,
+  },
+  quickstart_parsing_ability: {
+    event: events.TRACE_PARSING_EVENT,
+    name: 'quickstart_parsing_ability',
+    index: 23,
+  },
+  quickstart_Application_operation_skills: {
+    event: events.OPERATION_SKILLS_EVENT,
+    name: 'quickstart_Application_operation_skills',
+    index: 24,
+  },
+  quickstart_keywords_shortcuts: {
+    event: events.KEYWORDS_SHORTCUTS_EVENT,
+    name: 'quickstart_keywords_shortcuts',
+    index: 25,
+  },
+  des_tables: {
+    event: events.TRACE_STREAMER_EXPLAIN_EVENT,
+    name: 'des_tables',
+    index: 26,
+  },
+};
diff --git a/ide/test/trace/component/trace/sheet/gpufreq/tabPaneGpufreqDataCut.test.ts b/ide/test/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.test.ts
similarity index 100%
rename from ide/test/trace/component/trace/sheet/gpufreq/tabPaneGpufreqDataCut.test.ts
rename to ide/test/trace/component/trace/sheet/gpufreq/TabPaneGpufreqDataCut.test.ts
diff --git a/ide/test/trace/component/trace/sheet/gpufreq/tabPaneGpufreqUsage.test.ts b/ide/test/trace/component/trace/sheet/gpufreq/TabPaneGpufreqUsage.test.ts
similarity index 100%
rename from ide/test/trace/component/trace/sheet/gpufreq/tabPaneGpufreqUsage.test.ts
rename to ide/test/trace/component/trace/sheet/gpufreq/TabPaneGpufreqUsage.test.ts
diff --git a/trace_streamer/.gn b/trace_streamer/.gn
old mode 100644
new mode 100755
diff --git a/trace_streamer/build/sync_base.sh b/trace_streamer/build/sync_base.sh
new file mode 100644
index 0000000000000000000000000000000000000000..371dcef8225b06d4c334c04bdc9bc7204799f25d
--- /dev/null
+++ b/trace_streamer/build/sync_base.sh
@@ -0,0 +1,47 @@
+#!/bin/bash
+# Copyright (c) Huawei Technologies Co., Ltd. 2023. All rights reserved.
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+set -e
+TARGET_PATH=""
+PROJ_PATH=""
+echo $SCRIPT_PATH
+function help {
+    echo "Usage: $1 [-p <target_path>]"
+    echo "      -p <target_path>, set the sync target path."
+    echo "      -h Show the help info."
+    exit
+}
+function parser_param {
+    while [[ $# -gt 0 ]]; do
+        case "$1" in
+            -p)
+                TARGET_PATH="$2"
+                shift 2;;
+            -h)
+                help $0
+                shift;;
+            *)
+                shift;;
+        esac
+    done
+}
+function check_target_path {
+    if [ -z "$TARGET_PATH" ]; then
+        echo "target path is empty!"
+        help $0
+        exit
+    fi
+}
+function set_cur_proj_path {
+    PROJ_PATH=$(dirname "$(readlink -f "$0")")
+}
\ No newline at end of file
diff --git a/trace_streamer/gn/BUILD.gn b/trace_streamer/gn/BUILD.gn
index fc3911312aa905c60327018ff57068e05e27e612..0066d1848b8705f29c6791db16ff19b969ca1d58 100644
--- a/trace_streamer/gn/BUILD.gn
+++ b/trace_streamer/gn/BUILD.gn
@@ -190,6 +190,9 @@ config("default") {
   if (is_linux) {
     cflags += [ "-D is_linux" ]
   }
+  if (is_mac) {
+    cflags += [ "-D is_mac" ]
+  }
 }
 
 config("symbols") {
diff --git a/trace_streamer/mac_depend.sh b/trace_streamer/mac_depend.sh
old mode 100644
new mode 100755
diff --git a/trace_streamer/pare_third_party.sh b/trace_streamer/pare_third_party.sh
index 9fcc027b7b4b177c6b73a672b1ed7754d9cd9f72..4fa45c3c1d206121be282588176664f60712930d 100755
--- a/trace_streamer/pare_third_party.sh
+++ b/trace_streamer/pare_third_party.sh
@@ -84,20 +84,12 @@ if [ ! -f "perf_include/libbpf/linux/perf_event.h" ];then
    $patch -p0 perf_include/libbpf/linux/perf_event.h ../prebuilts/patch_perf_event/perf_event.h.patch
 fi
 
-if [ ! -d "perf_include/hiviewdfx/hilog" ];then
-   rm -rf hiviewdfx_hilog perf_include/hiviewdfx/hilog
-   mkdir -p perf_include/hiviewdfx/hilog
-   git clone --depth=1 https://gitee.com/openharmony/hiviewdfx_hilog.git
-   mv hiviewdfx_hilog/interfaces/native/innerkits/include/ perf_include/hiviewdfx/hilog
-   rm -rf hiviewdfx_hilog
-fi
-
 if [ ! -d "perf_include/hiviewdfx/faultloggerd" ];then
    rm -rf hiviewdfx_faultloggerd perf_include/hiviewdfx/faultloggerd
    mkdir -p perf_include/hiviewdfx/faultloggerd/interfaces/innerkits
    git clone git@gitee.com:openharmony/hiviewdfx_faultloggerd.git
    cd hiviewdfx_faultloggerd
-   git reset --hard b7e7ae4340a39db64d2cdf5f8fdb96cdb368f6a7
+   git reset --hard 7bd128c8fa91b79606c1bb21f20123879b351a4f
    cd ..
    mv hiviewdfx_faultloggerd/common/ perf_include/hiviewdfx/faultloggerd
    mv hiviewdfx_faultloggerd/interfaces/common/ perf_include/hiviewdfx/faultloggerd/interfaces
@@ -109,14 +101,11 @@ if [ ! -d "perf_include/hiviewdfx/faultloggerd" ];then
    rm -rf perf_include/hiviewdfx/common/build
    rm -rf perf_include/hiviewdfx/common/cutil
    rm perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_regs_x86_64.cpp
-    $sed -i '/HiLogPrint/s/^/\/\/ /' perf_include/hiviewdfx/faultloggerd/common/dfxlog/dfx_log.cpp
     $sed -i '/TRAP_BRANCH/s/^/\/\/ /' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_signal.cpp
     $sed -i '/TRAP_HWBKPT/s/^/\/\/ /' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_signal.cpp
     $sed -i '/is_ohos/s/is_ohos/true/g' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_mmap.cpp
     $sed -i '/is_ohos/s/is_ohos/true/g' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/include/dfx_regs.h
     $sed -i '/#include <vector>/a #include "debug_logger.h"' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/include/unwinder.h
-    $sed -i '/VerifyFilePath/s/const std::vector<const std::string>/std::vector\<std::string\>/g' perf_include/hiviewdfx/faultloggerd/common/dfxutil/dfx_util.h
-    $sed -i '/VerifyFilePath/s/const std::vector<const std::string>/std::vector\<std::string\>/g' perf_include/hiviewdfx/faultloggerd/common/dfxutil/dfx_util.cpp
     $sed -i '/getpid() == gettid()/s/getpid() == gettid()/false/g' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/unwinder.cpp
     $sed -i '/!realpath(path, realPath)/s/!realpath(path, realPath)/false/g' perf_include/hiviewdfx/faultloggerd/common/dfxutil/dfx_util.cpp
     $sed -i '/#include "dfx_util.h"/a #include "utilities.h"' perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_mmap.cpp
@@ -132,12 +121,13 @@ if [ ! -d "perf_include/hiviewdfx/faultloggerd" ];then
     $sed -i '/#define DFX_NONLINUX_DEFINE_H/a #ifndef is_linux' perf_include/hiviewdfx/faultloggerd/interfaces/nonlinux/dfx_nonlinux_define.h
     $sed -i '/#if is_mingw/s/#if is_mingw/#ifndef is_linux/g' perf_include/hiviewdfx/faultloggerd/interfaces/common/byte_order.h
     $sed -i '$a #endif' perf_include/hiviewdfx/faultloggerd/interfaces/nonlinux/dfx_nonlinux_define.h
+    $cp ../prebuilts/patch_hiperf/string_view_util.h ../third_party/perf_include/hiviewdfx/faultloggerd/common/dfxutil/string_view_util.h
 fi
 if [ ! -f "hiperf/BUILD.gn" ];then
     rm -rf hiperf developtools_hiperf
     git clone git@gitee.com:openharmony/developtools_hiperf.git
     cd developtools_hiperf
-    git reset --hard 9d9322fcd0a83ab409f26b3c6dfaea2bb8d42628
+    git reset --hard 59eecf523796401740d02894f64b4d23f7d370a9
     cd ..
     if [ -d "developtools_hiperf" ];then
         mv developtools_hiperf hiperf
diff --git a/trace_streamer/prebuilts/patch_hiperf/BUILD.gn b/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
index e319db0a174c2f49b5d2700516e5370d6e9f106e..4fbceafead74ad974204455ee8d52b61dae9f718 100644
--- a/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
+++ b/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
@@ -53,6 +53,7 @@ ohos_source_set("hiperf_src") {
     "./src/report.cpp",
     "./src/subcommand.cpp",
     "./src/symbols_file.cpp",
+    "./src/unique_stack_table.cpp",
     "./src/virtual_runtime.cpp",
     "./src/virtual_thread.cpp",
     "include/symbols_file.h",
diff --git a/trace_streamer/prebuilts/patch_hiperf/hiviewdfx_BUILD.gn b/trace_streamer/prebuilts/patch_hiperf/hiviewdfx_BUILD.gn
index 52103e903c03cbb58679070b28bdf11247960e20..ca28797f0e308a236864ae274f41d43ea33f33c6 100644
--- a/trace_streamer/prebuilts/patch_hiperf/hiviewdfx_BUILD.gn
+++ b/trace_streamer/prebuilts/patch_hiperf/hiviewdfx_BUILD.gn
@@ -18,6 +18,8 @@ ohos_source_set("hiviewdfx_source") {
   subsystem_name = "developtools"
   part_name = "smartperf_host"
   cflags = [ "-D ALWAYSTRUE" ]
+  cflags += [ "-D DFX_NO_PRINT_LOG" ]
+  cflags += [ "-D is_host" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
@@ -28,10 +30,7 @@ ohos_source_set("hiviewdfx_source") {
     "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/dfxutil",
     "${THIRD_PARTY}/perf_include/hiviewdfx/hilog/include",
   ]
-  sources = [
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/dfxlog/dfx_log.cpp",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/dfxutil/dfx_util.cpp",
-  ]
+  sources = [ "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/dfxutil/dfx_util.cpp" ]
   include_dirs += [
     "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/common",
     "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/nonlinux",
@@ -55,6 +54,7 @@ ohos_source_set("hiviewdfx_source") {
     "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_memory.cpp",
     "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_mmap.cpp",
     "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/dfx_symbols.cpp",
+    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/unwinder_config.cpp",
   ]
 }
 
diff --git a/trace_streamer/prebuilts/patch_hiperf/string_view_util.h b/trace_streamer/prebuilts/patch_hiperf/string_view_util.h
new file mode 100644
index 0000000000000000000000000000000000000000..a8d538a817c185f03e3fcc866e0d9eccefb8e160
--- /dev/null
+++ b/trace_streamer/prebuilts/patch_hiperf/string_view_util.h
@@ -0,0 +1,126 @@
+/*
+ * Copyright (c) 2023 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+#ifndef STRING_VIEW_UTIL_H
+#define STRING_VIEW_UTIL_H
+
+#include <cstdio>
+#include <string>
+#include <securec.h>
+#include <vector>
+#include <pthread.h>
+#include "cpp_define.h"
+
+namespace OHOS {
+namespace HiviewDFX {
+#ifdef is_mac
+class SpinLock {
+public:
+    void lock()
+    {
+        while (locked_.test_and_set(std::memory_order_acquire));
+    }
+    void unlock()
+    {
+        locked_.clear(std::memory_order_release);
+    }
+
+private:
+    std::atomic_flag locked_ = ATOMIC_FLAG_INIT;
+};
+#endif
+class StringViewHold {
+public:
+    static StringViewHold &Get()
+    {
+        static StringViewHold instance;
+        return instance;
+    }
+
+    const char* Hold(STRING_VIEW view)
+    {
+#ifndef is_mac
+        pthread_spin_lock(&spin_lock_);
+#else
+    std::lock_guard<SpinLock> lockGurand(spinlock_);
+#endif
+        if (view.size() == 0) {
+#ifndef is_mac
+            pthread_spin_unlock(&spin_lock_);
+#endif
+            return "";
+        }
+
+        char *p = new (std::nothrow) char[view.size() + 1];
+        if (p == nullptr) {
+#ifndef is_mac
+            pthread_spin_unlock(&spin_lock_);
+#endif
+            return "";
+        }
+        if (memset_s(p, view.size() + 1, '\0', view.size() + 1) != 0) {
+#ifndef is_mac
+            pthread_spin_unlock(&spin_lock_);
+#endif
+            return "";
+        }
+        std::copy(view.data(), view.data() + view.size(), p);
+        views_.emplace_back(p);
+#ifndef is_mac
+        pthread_spin_unlock(&spin_lock_);
+#endif
+        return p;
+    }
+
+    // only use in UT
+    void Clean()
+    {
+#ifndef is_mac
+        pthread_spin_lock(&spin_lock_);
+#else
+    std::lock_guard<SpinLock> lockGurand(spinlock_);
+#endif
+        for (auto &p : views_) {
+            delete[] p;
+        }
+        views_.clear();
+#ifndef is_mac
+        pthread_spin_unlock(&spin_lock_);
+#endif
+    }
+private:
+#ifndef is_mac
+    StringViewHold()
+    {
+        pthread_spin_init(&spin_lock_, PTHREAD_PROCESS_PRIVATE);
+    }
+#endif
+    ~StringViewHold()
+    {
+        Clean();
+#ifndef is_mac
+        pthread_spin_destroy(&spin_lock_);
+#endif
+    }
+
+    std::vector<char *> views_;
+#ifndef is_mac
+    pthread_spinlock_t spin_lock_;
+#else
+    SpinLock spinlock_;
+#endif
+};
+} // namespace HiviewDFX
+} // namespace OHOS
+#endif
\ No newline at end of file
diff --git a/trace_streamer/sdk/demo_sdk/sdk/sdk_data_parser.cpp b/trace_streamer/sdk/demo_sdk/sdk/sdk_data_parser.cpp
index c37b62b26c2258504e70f23625f573fcbfa8b5e8..b1e8a6acc398427a3e4588afe9c5a8914ce927d7 100644
--- a/trace_streamer/sdk/demo_sdk/sdk/sdk_data_parser.cpp
+++ b/trace_streamer/sdk/demo_sdk/sdk/sdk_data_parser.cpp
@@ -22,7 +22,6 @@
 #include "gpu_counter_object_table.h"
 #include "gpu_counter_table.h"
 #include "json.hpp"
-#include "log.h"
 #include "demo_meta_table.h"
 #include "sdk_plugin_data_parser.h"
 #include "slice_object_table.h"
diff --git a/trace_streamer/sdk/demo_sdk/trace_data/trace_stdtype.h b/trace_streamer/sdk/demo_sdk/trace_data/trace_stdtype.h
index af7c994d184b2f9d437e9f3dad7faa85ae999fd2..02a84b2932fbf99f76e74d095466535dcfadf866 100644
--- a/trace_streamer/sdk/demo_sdk/trace_data/trace_stdtype.h
+++ b/trace_streamer/sdk/demo_sdk/trace_data/trace_stdtype.h
@@ -27,7 +27,6 @@
 #include <string>
 #include <unordered_map>
 #include <vector>
-#include "log.h"
 #include "ts_common.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/BUILD.gn b/trace_streamer/src/BUILD.gn
index 76eb68b1469d1a4ddff245ad5913abb148538c22..455d78792ab9ccd7591e2a415cbc85ef99caf666 100644
--- a/trace_streamer/src/BUILD.gn
+++ b/trace_streamer/src/BUILD.gn
@@ -55,89 +55,8 @@ ohos_source_set("ts_sqlite") {
   }
 }
 
-trace_streamer_include = [
-  "base",
-  "..",
-  "trace_streamer",
-  "filter",
-  "table",
-  "trace_data",
-  "metrics",
-  "include",
-  "rpc",
-  "./",
-  "parser",
-  "cfg",
-  "proto_reader/include",
-  "parser/ptreader_parser",
-  "parser/ebpf_parser",
-  "parser/pbreader_parser",
-  "parser/pbreader_parser/htrace_parser",
-  "parser/pbreader_parser/htrace_parser",
-  "parser/rawtrace_parser",
-  "parser/hiperf_parser",
-  "${THIRD_PARTY}/bounds_checking_function/include",
-  "${THIRD_PARTY}/sqlite/include",
-  "${THIRD_PARTY}/json/single_include/nlohmann",
-  "${THIRD_PARTY}/protobuf/src",
-  "${PERF_DIR}/hiperf/include",
-  "${PERF_DIR}/hiperf/include/nonlinux",
-  "${PERF_DIR}/hiperf/include/nonlinux/linux",
-  "${THIRD_PARTY}/libunwind/include",
-  "${THIRD_PARTY}/libunwind/src",
-  "${THIRD_PARTY}/perf_include/libbpf",
-  "${THIRD_PARTY}/googletest/googletest/include",
-  "${COMMON_LIBRARY}/c_utils/base/include",
-  "${THIRD_PARTY}/sqlite",
-  "${THIRD_PARTY}/protogen/types/plugins/js_memory",
-  "${PERF_DIR}/profiler/device/plugins/ftrace_plugin/include",
-]
-
-ohos_source_set("trace_streamer_source") {
-  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
-  part_name = "${OHOS_PROFILER_PART_NAME}"
-  sources = [
-    "cfg/trace_streamer_config.cpp",
-    "rpc/ffrt_converter.cpp",
-    "rpc/rpc_server.cpp",
-    "trace_streamer/trace_streamer_filters.cpp",
-    "trace_streamer/trace_streamer_selector.cpp",
-    "version.cpp",
-  ]
-  if (!is_test && !is_fuzz) {
-    sources += [ "main.cpp" ]
-  }
-  if (use_wasm) {
-    sources += [
-      "rpc/wasm_func.cpp",
-      "rpc/wasm_func.h",
-    ]
-  }
-
-  include_dirs = trace_streamer_include
-  include_dirs += [
-    "${THIRD_PARTY}/perf_include/hiviewdfx/hilog/include",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/cutil",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/dfxlog",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/common/dfxutil",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/common",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/nonlinux",
-    "${THIRD_PARTY}/perf_include/hiviewdfx/faultloggerd/interfaces/innerkits/unwinder/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
-
-  if (!is_independent_compile) {
-    configs = [ "${TS_DIR}/gn:ts_config" ]
-  }
+config("trace_streamer_cfg") {
+  include_dirs = [ "." ]
   if (enable_ts_utest && !use_wasm) {
     cflags = [
       "-fprofile-arcs",
@@ -152,6 +71,9 @@ ohos_source_set("trace_streamer_source") {
       cflags += [ "-D IS_UT" ]
     }
   }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
+  }
   if (is_mingw || is_mac) {
     include_dirs += [
       "${THIRD_PARTY}/libbpf/include/uapi",
@@ -161,24 +83,25 @@ ohos_source_set("trace_streamer_source") {
   if (is_mingw) {
     cflags = [ "-includeMingW64Fix.h" ]
   }
+}
 
-  public_deps = [
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp_standard",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/cpu_data:cpu_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/ftrace_data/${device_kernel_version}:ftrace_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hilog_data:hilog_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hisysevent_data:hisysevent_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/js_memory:ts_js_memory_data_cpp",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/memory_data:memory_data_reader",
+ohos_source_set("trace_streamer_source") {
+  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
+  part_name = "${OHOS_PROFILER_PART_NAME}"
+  sources = [
+    "cfg/trace_streamer_config.cpp",
+    "rpc/ffrt_converter.cpp",
+    "rpc/rpc_server.cpp",
+    "trace_streamer/trace_streamer_filters.cpp",
+    "trace_streamer/trace_streamer_selector.cpp",
+    "version.cpp",
   ]
-  if (!use_wasm && !is_test && !is_fuzz) {
-    public_deps += [
-      "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protoc(${host_toolchain})",
-      "proto_reader/protoc_plugin:protoreader_plugin(${host_toolchain})",
-    ]
+  if (!is_test && !is_fuzz) {
+    sources += [ "main.cpp" ]
+  }
+  if (use_wasm) {
+    sources += [ "rpc/wasm_func.cpp" ]
   }
-
   deps = [
     ":ts_sqlite",
     "base:base",
@@ -191,14 +114,13 @@ ohos_source_set("trace_streamer_source") {
     "//third_party/bounds_checking_function:libsec_static",
     "//third_party/perf_include/hiviewdfx:hiviewdfx",
   ]
-
-  public_configs = []
-  if (enable_hiperf) {
-    public_configs += [ "parser/hiperf_parser:hiperf_parser_cfg" ]
-  }
-  if (enable_stream_extend) {
-    public_configs +=
-        [ "${EXTEND_SRC}/parser/pbreader_stream_parser:pbreader_stream_cfg" ]
+  public_configs = [ ":trace_streamer_cfg" ]
+  public_deps = []
+  if (!use_wasm && !is_test && !is_fuzz) {
+    public_deps += [
+      "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protoc(${host_toolchain})",
+      "proto_reader/protoc_plugin:protoreader_plugin(${host_toolchain})",
+    ]
   }
 }
 
@@ -221,7 +143,6 @@ if (use_wasm) {
       subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
       part_name = "${OHOS_PROFILER_PART_NAME}"
       sources = []
-      include_dirs = trace_streamer_include
       deps = [ ":trace_streamer_source" ]
     }
   }
diff --git a/trace_streamer/src/base/clock_filter.cpp b/trace_streamer/src/base/clock_filter.cpp
index ccf97abb32f46eeef64abbbc5a909fa36c557db5..cab9541681a65adb1d3b9bc13325c12c3583d2ed 100644
--- a/trace_streamer/src/base/clock_filter.cpp
+++ b/trace_streamer/src/base/clock_filter.cpp
@@ -17,7 +17,6 @@
 #include <algorithm>
 #include <map>
 #include <cinttypes>
-#include "log.h"
 #include "string_help.h"
 #include "ts_common.h"
 
diff --git a/trace_streamer/src/base/sqlite_ext/BUILD.gn b/trace_streamer/src/base/sqlite_ext/BUILD.gn
index 206301b1b2d38306cf34aca9d470441d022e95fb..28fc04b0b315ac1a30f1781728a2c9d07da8ce31 100644
--- a/trace_streamer/src/base/sqlite_ext/BUILD.gn
+++ b/trace_streamer/src/base/sqlite_ext/BUILD.gn
@@ -13,13 +13,17 @@
 
 import("//build/ohos.gni")
 import("../../../build/ts.gni")
-ohos_source_set("sqliteext") {
-  sources = [ "sqlite_ext_funcs.cpp" ]
+config("sqlite_ext_cfg") {
   include_dirs = [
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/bounds_checking_function/include",
     "..",
+    ".",
   ]
+}
+ohos_source_set("sqliteext") {
+  sources = [ "sqlite_ext_funcs.cpp" ]
+  public_configs = [ ":sqlite_ext_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/base/sqlite_ext/sqlite_ext_funcs.cpp b/trace_streamer/src/base/sqlite_ext/sqlite_ext_funcs.cpp
index 28c01897d5dad8caf915fc4e31ac36a1dabc3500..fcf6672ff38c15601caa5b7649b93ab6b995ba36 100644
--- a/trace_streamer/src/base/sqlite_ext/sqlite_ext_funcs.cpp
+++ b/trace_streamer/src/base/sqlite_ext/sqlite_ext_funcs.cpp
@@ -18,7 +18,7 @@
 #include <memory>
 #include "log.h"
 #include "sqlite3.h"
-#include "../base/string_help.h"
+#include "string_help.h"
 namespace SysTuning {
 namespace base {
 /*
diff --git a/trace_streamer/src/base/ts_common.h b/trace_streamer/src/base/ts_common.h
index a3e02f0f59b4179a114e8aff16c3f371c22fea0a..0ed29f71acf7f554d7fde10602ced7400e454775 100644
--- a/trace_streamer/src/base/ts_common.h
+++ b/trace_streamer/src/base/ts_common.h
@@ -21,6 +21,7 @@
 #include <limits>
 #include <map>
 #include <string>
+#include "log.h"
 using ClockId = uint32_t;
 constexpr size_t G_CHUNK_SIZE = 1024 * 1024;
 constexpr size_t FLUSH_CHUNK_THRESHOLD = G_CHUNK_SIZE - 10000;
diff --git a/trace_streamer/src/cfg/trace_streamer_config.cpp b/trace_streamer/src/cfg/trace_streamer_config.cpp
index bcd49944416ec79a023325383b10630d09f1f5c3..4ae38a463ab5c2a4fd48ca337817de6476d080af 100644
--- a/trace_streamer/src/cfg/trace_streamer_config.cpp
+++ b/trace_streamer/src/cfg/trace_streamer_config.cpp
@@ -14,12 +14,14 @@
  */
 
 #include "trace_streamer_config.h"
+#ifdef ENABLE_MEMORY
 #include "memory_plugin_common.pbreader.h"
-#include "memory_plugin_result.pbreader.h"
-#include "log.h"
+#endif
 namespace SysTuning {
 namespace TraceCfg {
+#ifdef ENABLE_MEMORY
 using namespace ProtoReader;
+#endif
 TraceStreamerConfig::TraceStreamerConfig()
 {
     InitEventNameMap();
@@ -46,8 +48,10 @@ TraceStreamerConfig::TraceStreamerConfig()
         {MEM_GL_PSS, MEM_INFO_GL_PSS_DESC},     {MEM_GRAPH_PSS, MEM_INFO_GRAPH_PSS_DESC},
     };
 
+#ifdef ENABLE_MEMORY
     InitSysMemMap();
     InitSysVmemMap();
+#endif
     InitSecurityMap();
     if (eventNameMap_.size() != TRACE_EVENT_MAX) {
         TS_LOGF("eventNameMap_.size() max be %d, logic error", TRACE_EVENT_MAX);
@@ -233,6 +237,7 @@ void TraceStreamerConfig::InitEventNameMap()
     InitEbpfEventNameMap();
     InitHookEventNameMap();
 }
+#ifdef ENABLE_MEMORY
 void TraceStreamerConfig::InitSysMemMap()
 {
     sysMemNameMap_ = {{SysMeminfoType::PMEM_UNSPECIFIED, SYS_MEMINFO_UNSPECIFIED_DESC},
@@ -484,6 +489,7 @@ void TraceStreamerConfig::InitSysVmemMap()
     InitPgEventSysVmemMap();
     InitOtherEventSysVmemMap();
 }
+#endif
 inline void TraceStreamerConfig::InitBinderEventSecurityMap()
 {
     eventParserStatSeverityDescMap_.emplace(TRACE_EVENT_BINDER_TRANSACTION, statSeverityDescMap_);
diff --git a/trace_streamer/src/cfg/trace_streamer_config.h b/trace_streamer/src/cfg/trace_streamer_config.h
index 056732c45711acb8740d00f69999e4cf5852f693..4865fe8cd694152856f6c207ade222eff694f6a7 100644
--- a/trace_streamer/src/cfg/trace_streamer_config.h
+++ b/trace_streamer/src/cfg/trace_streamer_config.h
@@ -207,9 +207,8 @@ private:
     void InitOtherEventNameMap();
     void InitEbpfEventNameMap();
     void InitHookEventNameMap();
-
+#ifdef ENABLE_MEMORY
     void InitSysMemMap();
-
     void InitSysVmemMap();
     void InitNrZoneEventSysVmemMap();
     void InitNrDirtierEventSysVmemMap();
@@ -222,6 +221,7 @@ private:
     void InitWorkingSetEventSysVmemMap();
     void InitPgEventSysVmemMap();
     void InitOtherEventSysVmemMap();
+#endif
 
     void InitSecurityMap();
     void InitBinderEventSecurityMap();
diff --git a/trace_streamer/src/filter/BUILD.gn b/trace_streamer/src/filter/BUILD.gn
index f12bad783e847ad61e30ae75555da2dc51550fa6..6d0cb3ba1653ac3a2f58c6714972364905fc8834 100644
--- a/trace_streamer/src/filter/BUILD.gn
+++ b/trace_streamer/src/filter/BUILD.gn
@@ -77,52 +77,37 @@ ohos_source_set("filter") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [
     "animation_filter.cpp",
-    "animation_filter.h",
     "app_start_filter.cpp",
-    "app_start_filter.h",
     "args_filter.cpp",
-    "args_filter.h",
     "binder_filter.cpp",
-    "binder_filter.h",
     "clock_filter_ex.cpp",
     "cpu_filter.cpp",
     "filter_base.cpp",
-    "filter_base.h",
     "filter_filter.cpp",
-    "filter_filter.h",
     "frame_filter.cpp",
-    "frame_filter.h",
     "irq_filter.cpp",
-    "irq_filter.h",
     "measure_filter.cpp",
-    "measure_filter.h",
     "process_filter.cpp",
-    "process_filter.h",
     "slice_filter.cpp",
-    "slice_filter.h",
     "stat_filter.cpp",
-    "stat_filter.h",
     "system_event_measure_filter.cpp",
-    "system_event_measure_filter.h",
     "task_pool_filter.cpp",
-    "task_pool_filter.h",
   ]
 
   public_deps =
       [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp" ]
-  deps = []
   if (enable_hiperf) {
-    deps += [ "perf_filter:hiperf_filter" ]
+    public_deps += [ "perf_filter:hiperf_filter" ]
   }
   if (enable_native_hook) {
-    deps += [ "hook_filter:native_hook_filter" ]
+    public_deps += [ "hook_filter:native_hook_filter" ]
     public_deps += [
       "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/native_hook:native_hook_data_reader",
       "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/native_hook:ts_native_hook_cpp",
     ]
   }
   if (enable_hisysevent) {
-    deps += [ "hi_sysevent_filter:hi_sysevent_filter" ]
+    public_deps += [ "hi_sysevent_filter:hi_sysevent_filter" ]
   }
   public_configs = [ ":filter_cfg" ]
 }
diff --git a/trace_streamer/src/filter/args_filter.cpp b/trace_streamer/src/filter/args_filter.cpp
index 1c1e456d7b99ece81cd46a0ca0992f96a2ecd954..2c919775a4210200b3b631ddb380b44dd7f2e6b8 100644
--- a/trace_streamer/src/filter/args_filter.cpp
+++ b/trace_streamer/src/filter/args_filter.cpp
@@ -15,7 +15,6 @@
 
 #include "args_filter.h"
 #include "filter_filter.h"
-#include "log.h"
 #include "ts_common.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/filter/frame_filter.cpp b/trace_streamer/src/filter/frame_filter.cpp
index 2a153875ad2525fc9316aae4347aa9ccd92b1deb..f67fb0bf32147b58480813195edae92b1c0733ad 100644
--- a/trace_streamer/src/filter/frame_filter.cpp
+++ b/trace_streamer/src/filter/frame_filter.cpp
@@ -15,7 +15,6 @@
 #include "frame_filter.h"
 #include <memory>
 #include <cinttypes>
-#include "log.h"
 
 namespace SysTuning {
 namespace TraceStreamer {
diff --git a/trace_streamer/src/filter/hi_sysevent_filter/hi_sysevent_measure_filter.cpp b/trace_streamer/src/filter/hi_sysevent_filter/hi_sysevent_measure_filter.cpp
index b581b82858d9208fc0d4be730b129eee918e7e1c..8dd56f90d6da3627cd7368e13d1adff35d91d5a1 100644
--- a/trace_streamer/src/filter/hi_sysevent_filter/hi_sysevent_measure_filter.cpp
+++ b/trace_streamer/src/filter/hi_sysevent_filter/hi_sysevent_measure_filter.cpp
@@ -16,7 +16,6 @@
 #include "hi_sysevent_measure_filter.h"
 #include "clock_filter_ex.h"
 #include "filter_filter.h"
-#include "log.h"
 #include "stat_filter.h"
 #include "system_event_measure_filter.h"
 #include "ts_common.h"
diff --git a/trace_streamer/src/filter/measure_filter.cpp b/trace_streamer/src/filter/measure_filter.cpp
index 1136f0f6fabc99fe7480775377176d3afdf2df12..d52cd2bed6df75e9685b7c18115ffdc398154cb7 100644
--- a/trace_streamer/src/filter/measure_filter.cpp
+++ b/trace_streamer/src/filter/measure_filter.cpp
@@ -15,7 +15,6 @@
 
 #include "measure_filter.h"
 #include "filter_filter.h"
-#include "log.h"
 #include "ts_common.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/filter/slice_filter.cpp b/trace_streamer/src/filter/slice_filter.cpp
index c3798e88b896cf1ae3d9ec4e1569f879355edcd5..ea05ce4d6a8803ff43a3857f5876b39f8b839556 100644
--- a/trace_streamer/src/filter/slice_filter.cpp
+++ b/trace_streamer/src/filter/slice_filter.cpp
@@ -19,7 +19,6 @@
 #include <optional>
 
 #include "args_filter.h"
-#include "log.h"
 #include "measure_filter.h"
 #include "process_filter.h"
 #include "stat_filter.h"
diff --git a/trace_streamer/src/filter/stat_filter.cpp b/trace_streamer/src/filter/stat_filter.cpp
index 5e72ed0da42718e926cafe014b690d26bbe7c896..fb59d83bb18cae4b0bc047f1a33ee9dfa46e4bdb 100644
--- a/trace_streamer/src/filter/stat_filter.cpp
+++ b/trace_streamer/src/filter/stat_filter.cpp
@@ -15,7 +15,6 @@
 
 #include "stat_filter.h"
 #include "filter_filter.h"
-#include "log.h"
 #include "ts_common.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/filter/system_event_measure_filter.cpp b/trace_streamer/src/filter/system_event_measure_filter.cpp
index 3721d223e133218d1f66f78f7cc7a5b893b8e2be..adc0c60304d721e5f0bd5727baceb205a0bc46db 100644
--- a/trace_streamer/src/filter/system_event_measure_filter.cpp
+++ b/trace_streamer/src/filter/system_event_measure_filter.cpp
@@ -15,7 +15,6 @@
 
 #include "system_event_measure_filter.h"
 #include "filter_filter.h"
-#include "log.h"
 #include "ts_common.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/main.cpp b/trace_streamer/src/main.cpp
index 30a8ee24e31808b6730e6451ef25bbd4c40a3688..6449ed7e924922e96dc2265ab42d97f6f2baa7f1 100644
--- a/trace_streamer/src/main.cpp
+++ b/trace_streamer/src/main.cpp
@@ -12,35 +12,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#include <chrono>
-#include <cinttypes>
 #include <dirent.h>
 #include <fcntl.h>
 #include <fstream>
 #include <iostream>
 #include <memory>
 #include <regex>
-#include <cstdio>
 #include <sys/stat.h>
-#include <sys/types.h>
 #include <unistd.h>
 
 #include "codec_cov.h"
 #include "file.h"
-#include "filter/cpu_filter.h"
-#include "filter/frame_filter.h"
-#include "filter/slice_filter.h"
-#include "log.h"
-#include "metrics.h"
-#include "parser/ptreader_parser/bytrace_parser/bytrace_event_parser.h"
-#include "parser/ptreader_parser/ptreader_parser.h"
-#include "parting_string.h"
-#include "rpc_server.h"
+#include "cpu_filter.h"
+#include "frame_filter.h"
+#include "slice_filter.h"
 #include "string_help.h"
 
-#include "thread_state_flag.h"
-#include "trace_streamer/trace_streamer_selector.h"
-#include "trace_streamer_filters.h"
+#include "trace_streamer_selector.h"
 #include "version.h"
 using namespace SysTuning::TraceStreamer;
 using namespace SysTuning;
@@ -119,65 +107,107 @@ void PrintVersion()
 {
     (void)fprintf(stderr, "version %s\n", g_traceStreamerVersion.c_str());
 }
-void PrintDefaultAbilityInfo(std::string& disableInfo)
+void SetFtracePluginsAbilityInfo(std::string& disableInfo, std::string& enableInfo)
 {
 #ifndef ENABLE_BYTRACE
     disableInfo.append("\n\tbytrace");
+#else
+    enableInfo.append("\n\tbytrace");
 #endif
 #ifndef ENABLE_RAWTRACE
     disableInfo.append("\n\trawtrace");
+#else
+    enableInfo.append("\n\trawtrace");
 #endif
 #ifndef ENABLE_HTRACE
     disableInfo.append("\n\thtrace");
+#else
+    enableInfo.append("\n\thtrace");
 #endif
+}
+void PrintDefaultAbilityInfo(std::string& disableInfo, std::string& enableInfo)
+{
+    SetFtracePluginsAbilityInfo(disableInfo, enableInfo);
 #ifndef ENABLE_MEMORY
     disableInfo.append("\n\tmemory");
+#else
+    enableInfo.append("\n\tmemory");
 #endif
 #ifndef ENABLE_HTDUMP
     disableInfo.append("\n\thidump");
+#else
+    enableInfo.append("\n\thidump");
 #endif
 #ifndef ENABLE_CPUDATA
     disableInfo.append("\n\tcpudata");
+#else
+    enableInfo.append("\n\tcpudata");
 #endif
 #ifndef ENABLE_NETWORK
     disableInfo.append("\n\tnetwork");
+#else
+    enableInfo.append("\n\tnetwork");
 #endif
 #ifndef ENABLE_DISKIO
     disableInfo.append("\n\tdiskio");
+#else
+    enableInfo.append("\n\tdiskio");
 #endif
 #ifndef ENABLE_PROCESS
     disableInfo.append("\n\tprocess");
+#else
+    enableInfo.append("\n\tprocess");
 #endif
     printf(
         "the default support ability list:\n\thiperf,ebpf,native_hook,hilog,hisysevent,arkts\n\t"
         "bytrace,rawtrace,htrace,memory,hidump,cpudata,network,diskio,process\n");
 }
+void PrintExtendAbilityInfo(std::string& disableInfo, std::string& enableInfo)
+{
+#ifndef ENABLE_STREAM_EXTEND
+    disableInfo.append("\n\tstream_extend");
+#else
+    enableInfo.append("\n\tstream_extend");
+#endif
+    printf("the extend support ability list:\n\tstream_extend\n");
+}
 void PrintAbilityInfo()
 {
     std::string disableInfo;
+    std::string enableInfo;
 #ifndef ENABLE_HIPERF
     disableInfo.append("\n\thiperf");
+#else
+    enableInfo.append("\n\thiperf");
 #endif
 #ifndef ENABLE_EBPF
     disableInfo.append("\n\tebpf");
+#else
+    enableInfo.append("\n\tebpf");
 #endif
 #ifndef ENABLE_NATIVE_HOOK
     disableInfo.append("\n\tnative_hook");
+#else
+    enableInfo.append("\n\tnative_hook");
 #endif
 #ifndef ENABLE_HILOG
     disableInfo.append("\n\thilog");
+#else
+    enableInfo.append("\n\thilog");
 #endif
 #ifndef ENABLE_HISYSEVENT
     disableInfo.append("\n\thisysevent");
+#else
+    enableInfo.append("\n\thisysevent");
 #endif
 #ifndef ENABLE_ARKTS
     disableInfo.append("\n\tarkts");
+#else
+    enableInfo.append("\n\tarkts");
 #endif
-    PrintDefaultAbilityInfo(disableInfo);
-#ifndef ENABLE_STREAM_EXTEND
-    disableInfo.append("\n\tstream_extend");
-#endif
-    printf("the extend support ability list:\n\tstream_extend\n");
+    PrintDefaultAbilityInfo(disableInfo, enableInfo);
+    PrintExtendAbilityInfo(disableInfo, enableInfo);
+    printf("the enable ability list:%s\n", enableInfo.empty() ? "\n\tnull" : enableInfo.c_str());
     printf("the disable ability list:%s\n", disableInfo.empty() ? "\n\tnull" : disableInfo.c_str());
 }
 bool ReadAndParser(SysTuning::TraceStreamer::TraceStreamerSelector& ta, int fd)
diff --git a/trace_streamer/src/metrics/BUILD.gn b/trace_streamer/src/metrics/BUILD.gn
index 98bbd78d2137ebdc517437369e3adbb4f1194b8c..0baf4bfac97533195cb69cb10f9d683e9966da6a 100644
--- a/trace_streamer/src/metrics/BUILD.gn
+++ b/trace_streamer/src/metrics/BUILD.gn
@@ -14,25 +14,21 @@
 import("//build/ohos.gni")
 import("../../build/ts.gni")
 
-ohos_source_set("metrics_parser") {
-  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
-  part_name = "${OHOS_PROFILER_PART_NAME}"
-  sources = [
-    "memAggStrategy.h",
-    "memDataStrategy.h",
-    "memStrategy.h",
-    "metrics.cpp",
-    "metrics.h",
-    "sysCallStrategy.h",
-    "traceStateStrategy.h",
-    "traceTaskStrategy.h",
-  ]
-  deps = []
+config("metrics_cfg") {
   include_dirs = [
+    ".",
     "${SRC}/base",
     "${THIRD_PARTY}/bounds_checking_function/include",
     "${THIRD_PARTY}/json/single_include/nlohmann",
   ]
+}
+
+ohos_source_set("metrics_parser") {
+  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
+  part_name = "${OHOS_PROFILER_PART_NAME}"
+  sources = [ "metrics.cpp" ]
+  deps = []
+  public_configs = [ ":metrics_cfg" ]
   if (enable_ts_utest && !use_wasm) {
     cflags = [
       "-fprofile-arcs",
diff --git a/trace_streamer/src/metrics/metrics.h b/trace_streamer/src/metrics/metrics.h
index e295b593070683be570ca6aa58cc522bf5ad55db..adec7c17edb786860a4f787e616339b74a8b3d91 100644
--- a/trace_streamer/src/metrics/metrics.h
+++ b/trace_streamer/src/metrics/metrics.h
@@ -20,7 +20,6 @@
 #include <string>
 #include <vector>
 #include "json.hpp"
-#include "log.h"
 #include "memAggStrategy.h"
 #include "memStrategy.h"
 #include "metaDataStrategy.h"
diff --git a/trace_streamer/src/parser/BUILD.gn b/trace_streamer/src/parser/BUILD.gn
index 8baf280a21b23647f05638a512879b5eb37b34ce..421a22a3d5cdaf5bd0ef327616de0b9d0f72011f 100644
--- a/trace_streamer/src/parser/BUILD.gn
+++ b/trace_streamer/src/parser/BUILD.gn
@@ -24,14 +24,20 @@ config("parser_base_cfg") {
     "${SRC}/trace_data",
     "${SRC}/include",
     "${SRC}/filter",
+    "${SRC}/filter/hi_sysevent_filter",
+    "${SRC}/filter/hook_filter",
+    "${SRC}/filter/perf_filter",
     "${SRC}",
     ".",
+    "ptreader_parser",
     "pbreader_parser",
     "pbreader_parser/htrace_parser",
     "rawtrace_parser",
+    "ebpf_parser",
     "../proto_reader/include",
     "${THIRD_PARTY}/bounds_checking_function/include",
     "${THIRD_PARTY}/json/single_include/nlohmann",
+    "${THIRD_PARTY}/profiler/device/plugins/ftrace_plugin/include",
   ]
   include_dirs += [
     "${PERF_DIR}/hiperf/include/nonlinux/linux",
@@ -89,6 +95,7 @@ config("hisysevent_parser_cfg") {
     "pbreader_parser",
     "pbreader_parser/hisysevent_parser",
     "ptreader_parser/hisysevent_parser",
+    "${SRC}/filter/hi_sysevent_filter",
   ]
 }
 
@@ -101,25 +108,14 @@ ohos_source_set("parser") {
     "thread_state_flag.cpp",
   ]
 
-  deps = [
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/cpu_data:cpu_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/diskio_data:diskio_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hidump_data:hidump_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/js_memory:js_memory_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/memory_data:memory_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/network_data:network_data_reader",
-    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/process_data:process_data_reader",
-  ]
-  deps += [ "pbreader_parser:pbreader_parser" ]
-  deps += [ "ptreader_parser:ptreader_parser_src" ]
+  public_deps = []
+  public_deps += [ "pbreader_parser:pbreader_parser_src" ]
+  public_deps += [ "ptreader_parser:ptreader_parser_src" ]
   if (enable_rawtrace) {
-    deps += [ "rawtrace_parser:rawtrace_parser" ]
+    public_deps += [ "rawtrace_parser:rawtrace_parser" ]
   }
-
-  # for hook,perf,ebpf
-  deps += [ "${PERF_DIR}/hiperf:hiperf_platform_common" ]
   if (enable_ebpf) {
-    deps += [ "ebpf_parser:ebpf_parser" ]
+    public_deps += [ "ebpf_parser:ebpf_parser" ]
   }
   public_configs = [ ":parser_base_cfg" ]
 }
diff --git a/trace_streamer/src/parser/ebpf_parser/BUILD.gn b/trace_streamer/src/parser/ebpf_parser/BUILD.gn
index ab1c92cae8c0374c3fbf23ef72117e55e2f5ac20..9a1512a2a7a2bc05662bfcc5ae88217ffa0abb59 100644
--- a/trace_streamer/src/parser/ebpf_parser/BUILD.gn
+++ b/trace_streamer/src/parser/ebpf_parser/BUILD.gn
@@ -85,7 +85,10 @@ ohos_static_library("ebpf_parser") {
     "paged_memory_data_parser.cpp",
   ]
   public_configs = [ ":ebpf_parser_cfg" ]
-  public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/memory_data:memory_data_reader" ]
+  public_deps = [
+    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/memory_data:memory_data_reader",
+    "${PERF_DIR}/hiperf:hiperf_platform_common",
+  ]
   deps = [
     "${THIRD_PARTY}/protobuf:protobuf_lite_static",
     "${THIRD_PARTY}/protobuf:protobuf_static",
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.h b/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.h
index f1d9572fd9a2c31354db8c74687dcb7ccf61a7bb..ec3ed16e8110a5631ce2e0a0271b7afba7e7a926 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.h
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.h
@@ -20,7 +20,7 @@
 #include "ebpf_data_structure.h"
 #include "file_system_data_parser.h"
 #include "paged_memory_data_parser.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.h b/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.h
index 2580496291327cfb0ad90f0fa3022ac9c3dbcbc6..f207e8120f065b37dedb952388d5826f74d92452 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.h
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.h
@@ -26,7 +26,7 @@
 #include "process_filter.h"
 #include "quatra_map.h"
 #include "string_help.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 #include "unordered_map"
 
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_splitter.h b/trace_streamer/src/parser/ebpf_parser/ebpf_splitter.h
index 7944ce7bbaead63f99966c4d194b9ac312dcc280..f52b25777aaac08abb4e7d57643b114a8376c81e 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_splitter.h
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_splitter.h
@@ -26,7 +26,7 @@
 #include "process_filter.h"
 #include "quatra_map.h"
 #include "string_help.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 #include "unordered_map"
 #include "pbreader_file_header.h"
diff --git a/trace_streamer/src/parser/hiperf_parser/BUILD.gn b/trace_streamer/src/parser/hiperf_parser/BUILD.gn
index 06047b5c63acdf65d25091030f830d835b70a891..48697bff5305a2f02a988c9c5e38fe8da9493b02 100644
--- a/trace_streamer/src/parser/hiperf_parser/BUILD.gn
+++ b/trace_streamer/src/parser/hiperf_parser/BUILD.gn
@@ -97,8 +97,11 @@ ohos_static_library("hiperf_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "perf_data_parser.cpp" ]
-  public_configs = [ ":hiperf_parser_cfg" ]
-  deps = [
+  public_configs = [
+    ":hiperf_parser_cfg",
+    "../../filter/perf_filter:hiperf_filter_cfg",
+  ]
+  public_deps = [
     "${PERF_DIR}/hiperf:hiperf_platform_common",
     "${THIRD_PARTY}/protobuf:protobuf_lite_static",
     "${THIRD_PARTY}/protobuf:protobuf_static",
diff --git a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
index ec50366d292db2acce61095bac0194cd6ebd4451..2c4068c59a2abedf4b895a05f023217c5b910935 100644
--- a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
+++ b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
@@ -15,7 +15,7 @@
 #include "perf_data_parser.h"
 #include "clock_filter_ex.h"
 #include "file.h"
-#include "perf_filter/perf_data_filter.h"
+#include "perf_data_filter.h"
 #include "stat_filter.h"
 
 namespace SysTuning {
@@ -612,7 +612,7 @@ uint32_t PerfDataParser::UpdateCallChainUnCompressed(const std::unique_ptr<PerfR
 {
     std::string stackStr = "";
     for (auto& callFrame : sample->callFrames_) {
-        stackStr += "+" + base::number(callFrame.ip_, base::INTEGER_RADIX_TYPE_HEX);
+        stackStr += "+" + base::number(callFrame.pc, base::INTEGER_RADIX_TYPE_HEX);
     }
     auto stackHash = hashFun_(stackStr);
     auto pid = sample->data_.pid;
@@ -625,12 +625,12 @@ uint32_t PerfDataParser::UpdateCallChainUnCompressed(const std::unique_ptr<PerfR
     uint64_t depth = 0;
     for (auto frame = sample->callFrames_.rbegin(); frame != sample->callFrames_.rend(); ++frame) {
         uint64_t fileId = INVALID_UINT64;
-        auto fileDataIndex = traceDataCache_->dataDict_.GetStringIndex(frame->filePath_);
+        auto fileDataIndex = traceDataCache_->dataDict_.GetStringIndex(frame->mapName);
         if (fileDataDictIdToFileId_.count(fileDataIndex) != 0) {
             fileId = fileDataDictIdToFileId_.at(fileDataIndex);
         }
-        streamFilters_->perfDataFilter_->AppendPerfCallChain(callChainId, depth++, frame->ip_, frame->vaddrInFile_,
-                                                             fileId, frame->symbolIndex_);
+        streamFilters_->perfDataFilter_->AppendPerfCallChain(callChainId, depth++, frame->pc, frame->funcOffset, fileId,
+                                                             frame->index);
     }
     return callChainId;
 }
diff --git a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
index 2709ac8b0b58418e9eb4f5acd4a7618bd45f6162..6ea2d23417a6a4f8cf47ecf4c1e6f467cc97ce78 100644
--- a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
+++ b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
@@ -23,7 +23,6 @@
 #include "event_parser_base.h"
 #include "pbreader_file_header.h"
 #include "htrace_plugin_time_parser.h"
-#include "log.h"
 #if is_mingw
 #define unw_word_t uint64_t
 #endif
@@ -33,7 +32,7 @@
 #include "perf_file_reader.h"
 #include "quatra_map.h"
 #include "report.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/pbreader_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/BUILD.gn
index 660b5b30989098a9d3590f10d27a9023e55cd6d7..5bac80a031897497d8211e52c44aa1baea087abe 100644
--- a/trace_streamer/src/parser/pbreader_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/BUILD.gn
@@ -17,6 +17,7 @@ ohos_source_set("pbreader_parser_src") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [
     "../parser_base.cpp",
+    "pbreader_clock_detail_parser.cpp",
     "pbreader_parser.cpp",
   ]
   include_dirs = [
@@ -36,6 +37,7 @@ ohos_source_set("pbreader_parser_src") {
     "${THIRD_PARTY}/json/single_include/nlohmann",
     "../../filter",
     "../../base",
+    "../../rpc",
     "../ebpf_parser",
   ]
   include_dirs += [
@@ -76,7 +78,7 @@ ohos_source_set("pbreader_parser_src") {
     cflags = [ "-includeMingW64Fix.h" ]
   }
   public_configs = [ "../ebpf_parser:ebpf_parser_cfg" ]
-  public_deps = []
+  public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/ftrace_data/${device_kernel_version}:ftrace_data_reader" ]
   if (enable_hiperf) {
     public_deps += [ "../hiperf_parser:hiperf_parser" ]
   }
@@ -117,25 +119,21 @@ ohos_source_set("pbreader_parser_src") {
     public_deps +=
         [ "${EXTEND_SRC}/parser/pbreader_stream_parser:stream_extend_parser" ]
   }
-  deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp_standard" ]
-}
-group("pbreader_parser") {
-  deps = [
-    ":pbreader_parser_src",
+  public_deps += [
+    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp_standard",
     "${THIRD_PARTY}/protobuf:protobuf_lite_static",
     "${THIRD_PARTY}/protobuf:protobuf_static",
     "//third_party/perf_include/hiviewdfx:hiviewdfx",
   ]
-
   if (!use_wasm && !is_win && !is_mingw && !is_mac && !is_test) {
     if (!is_independent_compile) {
       if (target_cpu == "arm64") {
-        deps += [ "//third_party/libunwind:unwind_source_arm64_opt" ]
+        public_deps += [ "//third_party/libunwind:unwind_source_arm64_opt" ]
       } else {
-        deps += [ "//third_party/libunwind:unwind_source_${target_cpu}" ]
+        public_deps += [ "//third_party/libunwind:unwind_source_${target_cpu}" ]
       }
     } else {
-      deps += [ "${THIRD_PARTY}/libunwind:libunwind" ]
+      public_deps += [ "${THIRD_PARTY}/libunwind:libunwind" ]
     }
   }
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/arkts/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/arkts/BUILD.gn
index 3b4ab4e7a975f9605faebaeaed1e712d92808b2a..fc7f12436953e579ac583cb934091698db00f272 100644
--- a/trace_streamer/src/parser/pbreader_parser/arkts/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/arkts/BUILD.gn
@@ -13,6 +13,10 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("arkts_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("pbreader_arkts_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
@@ -20,10 +24,13 @@ ohos_static_library("pbreader_arkts_parser") {
     "pbreader_js_cpu_profiler_parser.cpp",
     "pbreader_js_memory_parser.cpp",
   ]
-  include_dirs = [ "." ]
   public_deps = [
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp",
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/js_memory:js_memory_data_reader",
+    "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/js_memory:ts_js_memory_data_cpp",
+  ]
+  public_configs = [
+    ":arkts_parser_cfg",
+    "../../:parser_base_cfg",
   ]
-  public_configs = [ "../../:parser_base_cfg" ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/BUILD.gn
index d838f439b135d09afd9edbde72556944a681229d..baf735b7fbe6c12311ddf7a042adc944ba48a0ea 100644
--- a/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/BUILD.gn
@@ -13,11 +13,18 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("cpu_data_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("cpu_data_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "pbreader_cpu_data_parser.cpp" ]
   include_dirs = [ "." ]
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/cpu_data:cpu_data_reader" ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":cpu_data_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/pbreader_cpu_data_parser.h b/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/pbreader_cpu_data_parser.h
index 3abac2716e3793fde13e6e8613028b2d4e586c26..e981ed0a9847b7a53ec76c66ea4df6946e80be1e 100644
--- a/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/pbreader_cpu_data_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/cpu_data_parser/pbreader_cpu_data_parser.h
@@ -20,7 +20,7 @@
 #include "cpu_plugin_result.pbreader.h"
 #include "event_parser_base.h"
 #include "htrace_plugin_time_parser.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_config.h"
 #include "trace_streamer_filters.h"
 
diff --git a/trace_streamer/src/parser/pbreader_parser/disk_io_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/disk_io_parser/BUILD.gn
index 60fbc0ae3bd0247765a66bda20d056f553c5af82..b09644889d9c6a4cc8619f6585e0da764d7bf3a0 100644
--- a/trace_streamer/src/parser/pbreader_parser/disk_io_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/disk_io_parser/BUILD.gn
@@ -13,11 +13,18 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("disk_io_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("disk_io_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "pbreader_disk_io_parser.cpp" ]
   include_dirs = [ "." ]
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/diskio_data:diskio_data_reader" ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":disk_io_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/hidump_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/hidump_parser/BUILD.gn
index 2dfd3f05f926fb1ac7480c6deae4e79dbb5f7bee..3d2ce67180e1e00fc38ce817164e989077cabac2 100644
--- a/trace_streamer/src/parser/pbreader_parser/hidump_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/hidump_parser/BUILD.gn
@@ -13,11 +13,18 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("hidump_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("pbreader_hidump_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "pbreader_hidump_parser.cpp" ]
   include_dirs = [ "." ]
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hidump_data:hidump_data_reader" ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":hidump_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/hidump_parser/pbreader_hidump_parser.h b/trace_streamer/src/parser/pbreader_parser/hidump_parser/pbreader_hidump_parser.h
index c4ee0d92e974572b809002255d6fe81f00eb284c..fd9a6bfc2f3736d34db76b6c688d71903e94f6fe 100644
--- a/trace_streamer/src/parser/pbreader_parser/hidump_parser/pbreader_hidump_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/hidump_parser/pbreader_hidump_parser.h
@@ -20,7 +20,7 @@
 #include "common_types.h"
 #include "event_parser_base.h"
 #include "htrace_plugin_time_parser.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_config.h"
 #include "trace_streamer_filters.h"
 
diff --git a/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.cpp b/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.cpp
index a844dfaa5add249046ee929f5f0d51ce54874db4..b165a6750aef91996f3f25b8ba5e5b27e35cf0f3 100644
--- a/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.cpp
+++ b/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.cpp
@@ -16,7 +16,6 @@
 #include "clock_filter_ex.h"
 #include "event_parser_base.h"
 #include "hilog_plugin_result.pbreader.h"
-#include "htrace_event_parser.h"
 #include "process_filter.h"
 #include "stat_filter.h"
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.h b/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.h
index 3ad5a80907ab07523619617e712a75e7b1d21b52..e7c521e6113615e3468ae4435eb9a675be619f42 100644
--- a/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/hilog_parser/pbreader_hilog_parser.h
@@ -19,7 +19,7 @@
 #include <string>
 #include "common_types.h"
 #include "event_parser_base.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "hilog_plugin_result.pb.h"
 #include "htrace_plugin_time_parser.h"
 #include "trace_streamer_config.h"
diff --git a/trace_streamer/src/parser/pbreader_parser/hisysevent_parser/pbreader_hisysevent_parser.h b/trace_streamer/src/parser/pbreader_parser/hisysevent_parser/pbreader_hisysevent_parser.h
index 35d52c9cd8d81ac024af759ced5a8acdbb4f3de4..7a21d114f92646cfe77f93525ec1f450a0a4131f 100644
--- a/trace_streamer/src/parser/pbreader_parser/hisysevent_parser/pbreader_hisysevent_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/hisysevent_parser/pbreader_hisysevent_parser.h
@@ -19,11 +19,11 @@
 
 #include "clock_filter_ex.h"
 #include "event_parser_base.h"
-#include "hi_sysevent_filter/hi_sysevent_measure_filter.h"
+#include "hi_sysevent_measure_filter.h"
 #include "hisysevent_plugin_config.pbreader.h"
 #include "hisysevent_plugin_result.pbreader.h"
 #include "htrace_plugin_time_parser.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 #include "ts_common.h"
 
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/htrace_parser/BUILD.gn
index 368e79f27be7616b0c5d9f1ae9f23c40611507c2..fe206f4be30e9f275352a9eb5c1fed0885015fbe 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/BUILD.gn
@@ -21,7 +21,6 @@ ohos_static_library("pbreader_htrace_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [
-    "htrace_clock_detail_parser.cpp",
     "htrace_cpu_detail_parser.cpp",
     "htrace_event_parser.cpp",
     "htrace_symbols_detail_parser.cpp",
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.cpp b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.cpp
index 51856ead8969368cbe150d19c25a20cbc71ce72e..62da51021356af62755c09ba08ee850dd954878b 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.cpp
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.cpp
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 #include "htrace_cpu_detail_parser.h"
-#include "htrace_event_parser.h"
 #include "stat_filter.h"
 #include "trace_plugin_result.pbreader.h"
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.h b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.h
index 6adddb2c300f730fada085725628f3deb828596b..1de2ae8a5faafb9a154673681d4ef65d2bd1eb3a 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_cpu_detail_parser.h
@@ -21,10 +21,9 @@
 #include <string>
 #include "event_parser_base.h"
 #include "htrace_event_parser.h"
-#include "log.h"
 #include "parser_base.h"
 #include "proto_reader_help.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_plugin_result.pbreader.h"
 #include "trace_streamer_filters.h"
 
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.cpp b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.cpp
index 2f766e1602cf4ef1897119661266e5b99e1a0560..a36c3c075f4cfb8c8913256dcf611fae8e8dd0d5 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.cpp
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.cpp
@@ -27,7 +27,6 @@
 #include "ipi.pbreader.h"
 #include "irq_filter.h"
 #include "irq.pbreader.h"
-#include "log.h"
 #include "measure_filter.h"
 #include "oom.pbreader.h"
 #include "power.pbreader.h"
@@ -447,7 +446,7 @@ bool HtraceEventParser::BinderTractionAllocBufEvent(const EventInfo& event) cons
     uint64_t dataSize = msg.data_size();
     uint64_t offsetsSize = msg.offsets_size();
     streamFilters_->binderFilter_->TransactionAllocBuf(event.timeStamp_, event.pid_, dataSize, offsetsSize);
-    TS_LOGD("dataSize:%lu, offsetSize:%lu", dataSize, offsetsSize);
+    TS_LOGD("dataSize:%" PRIu64 ", offsetSize:%" PRIu64 "", dataSize, offsetsSize);
     return true;
 }
 bool HtraceEventParser::BinderTractionEvent(const EventInfo& event) const
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.h b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.h
index b7186fa215e071ea928aabc8840e0e1802b7b6f5..3f9d93f20d37ded3f6dd0cf9b2db20cc83099b64 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_event_parser.h
@@ -25,10 +25,8 @@
 
 #include "event_parser_base.h"
 #include "ftrace_event.pbreader.h"
-#include "google/protobuf/message_lite.h"
-#include "log.h"
 #include "print_event_parser.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_plugin_result.pbreader.h"
 #include "trace_streamer_config.h"
 #include "trace_streamer_filters.h"
@@ -36,7 +34,6 @@
 
 namespace SysTuning {
 namespace TraceStreamer {
-using namespace google::protobuf;
 class HtraceEventParser : private EventParserBase {
 public:
     HtraceEventParser(TraceDataCache* dataCache, const TraceStreamerFilters* filter);
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.cpp b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.cpp
index 7b9fe21c96b49e94e08bfeeaa1e09c3987d011cf..bcca74c229fedc3578a933b10eb490380b80b1da 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.cpp
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.cpp
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 #include "htrace_symbols_detail_parser.h"
-#include "htrace_event_parser.h"
 namespace SysTuning {
 namespace TraceStreamer {
 HtraceSymbolsDetailParser::HtraceSymbolsDetailParser(TraceDataCache* dataCache, const TraceStreamerFilters* ctx)
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.h b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.h
index 39a79e0efefe053e77eecc6f89d1573e738283a7..f4a67862f58863a91dc0d0f10ebe9abddf717f74 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_symbols_detail_parser.h
@@ -20,8 +20,8 @@
 #include <map>
 #include <stdexcept>
 #include <string>
-#include "proto_reader/include/data_area.h"
-#include "trace_data/trace_data_cache.h"
+#include "data_area.h"
+#include "trace_data_cache.h"
 #include "trace_plugin_result.pbreader.h"
 #include "trace_streamer_filters.h"
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/pbreader_parser/mem_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/mem_parser/BUILD.gn
index 04583776d5c650a43738bf4271b9f1aed3900613..b1e09e06dd85e60970924bd61aac619343a6a9e7 100644
--- a/trace_streamer/src/parser/pbreader_parser/mem_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/mem_parser/BUILD.gn
@@ -13,11 +13,18 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("mem_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("pbreader_mem_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "pbreader_mem_parser.cpp" ]
   include_dirs = [ "." ]
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/memory_data:memory_data_reader" ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":mem_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/mem_parser/pbreader_mem_parser.h b/trace_streamer/src/parser/pbreader_parser/mem_parser/pbreader_mem_parser.h
index 27785f9ab3ea960d75756d3814a80491ea1bc655..015511e58d6d2ff2a922d7c4cc8d745c6bb26544 100644
--- a/trace_streamer/src/parser/pbreader_parser/mem_parser/pbreader_mem_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/mem_parser/pbreader_mem_parser.h
@@ -25,7 +25,7 @@
 #include "htrace_plugin_time_parser.h"
 #include "memory_plugin_result.pbreader.h"
 #include "string_help.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_config.h"
 #include "trace_streamer_filters.h"
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/pbreader_parser/native_hook_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/native_hook_parser/BUILD.gn
index 2c059ea25effb0541319b91255a7c78da415c425..a9f2279d04e848ec55db4166e4eb9e4e6cc81707 100644
--- a/trace_streamer/src/parser/pbreader_parser/native_hook_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/native_hook_parser/BUILD.gn
@@ -13,10 +13,11 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
-config("native_hook_cfg") {
+config("native_hook_parser_cfg") {
   include_dirs = [
     ".",
     "//third_party/hiperf/include",
+    "${SRC}/filter/hook_filter",
   ]
 }
 
@@ -28,9 +29,10 @@ ohos_static_library("native_hook_parser") {
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp",
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/ftrace_data/${device_kernel_version}:ftrace_data_reader",
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/native_hook:native_hook_data_reader",
+    "${PERF_DIR}/hiperf:hiperf_platform_common",
   ]
   public_configs = [
-    ":native_hook_cfg",
+    ":native_hook_parser_cfg",
     "../../:parser_base_cfg",
   ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/native_hook_parser/pbreader_native_hook_parser.h b/trace_streamer/src/parser/pbreader_parser/native_hook_parser/pbreader_native_hook_parser.h
index 62dae9f5f8fb4ee2f146f38d2cb07b9f6e55a091..1f09f773f4c03633be20b58ffdb7490fb32a5558 100644
--- a/trace_streamer/src/parser/pbreader_parser/native_hook_parser/pbreader_native_hook_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/native_hook_parser/pbreader_native_hook_parser.h
@@ -20,10 +20,9 @@
 #include <string>
 #include "common_types.h"
 #include "event_parser_base.h"
-#include "htrace_event_parser.h"
 #include "htrace_plugin_time_parser.h"
-#include "hook_filter/native_hook_filter.h"
-#include "hook_filter/offline_symbolization_filter.h"
+#include "native_hook_filter.h"
+#include "offline_symbolization_filter.h"
 #include "trace_streamer_config.h"
 #include "trace_streamer_filters.h"
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/pbreader_parser/network_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/network_parser/BUILD.gn
index a7e6cfaca1f7bcd43d1932890a05cfac95f9e441..52c8f726cc2c3aca763077545c89173bcb22edec 100644
--- a/trace_streamer/src/parser/pbreader_parser/network_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/network_parser/BUILD.gn
@@ -13,11 +13,18 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("network_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("network_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "pbreader_network_parser.cpp" ]
   include_dirs = [ "." ]
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/network_data:network_data_reader" ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":network_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_clock_detail_parser.cpp b/trace_streamer/src/parser/pbreader_parser/pbreader_clock_detail_parser.cpp
similarity index 90%
rename from trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_clock_detail_parser.cpp
rename to trace_streamer/src/parser/pbreader_parser/pbreader_clock_detail_parser.cpp
index 30cfa09b19cc4f118179d885fddf4d28b7087db5..fe264f7d4c4a9f7d7a9c6fee432b2a3d89db0275 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_clock_detail_parser.cpp
+++ b/trace_streamer/src/parser/pbreader_parser/pbreader_clock_detail_parser.cpp
@@ -12,9 +12,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-#include "htrace_clock_detail_parser.h"
+#include "pbreader_clock_detail_parser.h"
 #include "clock_filter_ex.h"
-#include "htrace_event_parser.h"
+#include "trace_plugin_result.pbreader.h"
 #include "measure_filter.h"
 #include "process_filter.h"
 #include "stat_filter.h"
@@ -22,7 +22,7 @@
 
 namespace SysTuning {
 namespace TraceStreamer {
-HtraceClockDetailParser::HtraceClockDetailParser(TraceDataCache* dataCache, const TraceStreamerFilters* filters)
+PbreaderClockDetailParser::PbreaderClockDetailParser(TraceDataCache* dataCache, const TraceStreamerFilters* filters)
     : EventParserBase(dataCache, filters)
 {
     for (auto i = 0; i < MEM_MAX; i++) {
@@ -32,8 +32,8 @@ HtraceClockDetailParser::HtraceClockDetailParser(TraceDataCache* dataCache, cons
     }
 }
 
-HtraceClockDetailParser::~HtraceClockDetailParser() = default;
-void HtraceClockDetailParser::Parse(const ProtoReader::BytesView& tracePacket) const
+PbreaderClockDetailParser::~PbreaderClockDetailParser() = default;
+void PbreaderClockDetailParser::Parse(const ProtoReader::BytesView& tracePacket) const
 {
     if (traceDataCache_->isSplitFile_) {
         return;
@@ -62,7 +62,7 @@ void HtraceClockDetailParser::Parse(const ProtoReader::BytesView& tracePacket) c
     streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_CLOCK_SYNC, STAT_EVENT_RECEIVED);
 }
 
-void HtraceClockDetailParser::Parse(const ProfilerTraceFileHeader* profilerTraceFileHeader) const
+void PbreaderClockDetailParser::Parse(const ProfilerTraceFileHeader* profilerTraceFileHeader) const
 {
     if (streamFilters_->clockFilter_->HasInitSnapShot()) {
         TS_LOGW("already has clock snapshot!!!");
diff --git a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_clock_detail_parser.h b/trace_streamer/src/parser/pbreader_parser/pbreader_clock_detail_parser.h
similarity index 86%
rename from trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_clock_detail_parser.h
rename to trace_streamer/src/parser/pbreader_parser/pbreader_clock_detail_parser.h
index 9ea4c0dbbee3e88e78caf889c9f5c4c39c5aebdf..e5415868bd62dc07cc7fad8cb5dabf7da180e706 100644
--- a/trace_streamer/src/parser/pbreader_parser/htrace_parser/htrace_clock_detail_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/pbreader_clock_detail_parser.h
@@ -23,16 +23,16 @@
 #include "file.h"
 #include "proto_reader_help.h"
 #include "pbreader_file_header.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_config.h"
 #include "trace_streamer_filters.h"
 
 namespace SysTuning {
 namespace TraceStreamer {
-class HtraceClockDetailParser : public EventParserBase {
+class PbreaderClockDetailParser : public EventParserBase {
 public:
-    HtraceClockDetailParser(TraceDataCache* dataCache, const TraceStreamerFilters* filters);
-    ~HtraceClockDetailParser();
+    PbreaderClockDetailParser(TraceDataCache* dataCache, const TraceStreamerFilters* filters);
+    ~PbreaderClockDetailParser();
     void Parse(const ProtoReader::BytesView& tracePacket) const;
     void Parse(const ProfilerTraceFileHeader* profilerTraceFileHeader) const;
 
diff --git a/trace_streamer/src/parser/pbreader_parser/pbreader_parser.cpp b/trace_streamer/src/parser/pbreader_parser/pbreader_parser.cpp
index f3c797b4c13678ac971448b1cc84de036f3f65d8..68cefa87fb23d3ee62cb9f73c127b0dd3abb59cf 100644
--- a/trace_streamer/src/parser/pbreader_parser/pbreader_parser.cpp
+++ b/trace_streamer/src/parser/pbreader_parser/pbreader_parser.cpp
@@ -24,22 +24,21 @@
 #include "ftrace_event.pbreader.h"
 #include "trace_plugin_result.pbreader.h"
 #endif
-#include "log.h"
 #ifdef ENABLE_MEMORY
 #include "memory_plugin_result.pbreader.h"
 #endif
 #include "stat_filter.h"
 #if IS_WASM
-#include "../rpc/wasm_func.h"
+#include "wasm_func.h"
 #endif
 namespace SysTuning {
 namespace TraceStreamer {
 PbreaderParser::PbreaderParser(TraceDataCache* dataCache, const TraceStreamerFilters* filters)
     : ParserBase(filters),
+      pbreaderClockDetailParser_(std::make_unique<PbreaderClockDetailParser>(dataCache, filters)),
 #ifdef ENABLE_HTRACE
       htraceCpuDetailParser_(std::make_unique<HtraceCpuDetailParser>(dataCache, filters)),
       htraceSymbolsDetailParser_(std::make_unique<HtraceSymbolsDetailParser>(dataCache, filters)),
-      htraceClockDetailParser_(std::make_unique<HtraceClockDetailParser>(dataCache, filters)),
 #endif
 #ifdef ENABLE_MEMORY
       pbreaderMemParser_(std::make_unique<PbreaderMemParser>(dataCache, filters)),
@@ -165,6 +164,7 @@ void PbreaderParser::InitPluginNameIndex()
 #endif
 }
 
+#if defined(ENABLE_HIPERF) || defined(ENABLE_NATIVE_HOOK) || defined(ENABLE_EBPF)
 void PbreaderParser::ParserFileSO(std::string& directory, const std::vector<std::string>& relativeFilePaths)
 {
     for (const auto& filePath : relativeFilePaths) {
@@ -172,10 +172,11 @@ void PbreaderParser::ParserFileSO(std::string& directory, const std::vector<std:
         auto symbolsFile =
             OHOS::Developtools::HiPerf::SymbolsFile::CreateSymbolsFile(SYMBOL_ELF_FILE, absoluteFilePath);
         symbolsFile->setSymbolsFilePath(directory);
-        symbolsFile->LoadSymbols(absoluteFilePath);
+        symbolsFile->LoadSymbols(nullptr, absoluteFilePath);
         symbolsFiles_.emplace_back(std::move(symbolsFile));
     }
 }
+#endif
 
 PbreaderParser::~PbreaderParser()
 {
@@ -194,7 +195,9 @@ bool PbreaderParser::ReparseSymbolFilesAndResymbolization(std::string& symbolsPa
 #ifdef ENABLE_HIPERF
     parseStatus = perfDataParser_->PerfReloadSymbolFiles(dirs);
 #endif
+#if defined(ENABLE_HIPERF) || defined(ENABLE_NATIVE_HOOK) || defined(ENABLE_EBPF)
     ParserFileSO(symbolsPath, symbolsPaths);
+#endif
 #ifdef ENABLE_NATIVE_HOOK
     if (traceDataCache_->GetNativeHookFrameData()->Size() > 0) {
         pbreaderNativeHookParser_->NativeHookReloadElfSymbolTable(symbolsFiles_);
@@ -630,10 +633,6 @@ void PbreaderParser::ParseMemory(const ProtoReader::ProfilerPluginData_Reader& p
                                  PbreaderDataSegment& dataSeg)
 {
     BuiltinClocks clockId = TS_CLOCK_REALTIME;
-    auto clockIdTemp = pluginDataZero.clock_id();
-    if (clockIdTemp == ProtoReader::ProfilerPluginData_ClockId_CLOCKID_REALTIME) {
-        clockId = TS_CLOCK_REALTIME;
-    }
     dataSourceTypeMemClockid_ = clockId;
     dataSeg.dataType = DATA_SOURCE_TYPE_MEM;
     dataSeg.clockId = clockId;
@@ -686,8 +685,8 @@ void PbreaderParser::ParseFtrace(PbreaderDataSegment& dataSeg)
         ProtoReader::FtraceCpuStatsMsg_Reader ftraceCpuStatsMsg(cpuStats.data_, cpuStats.size_);
         auto s = *ftraceCpuStatsMsg.per_cpu_stats();
         ProtoReader::PerCpuStatsMsg_Reader perCpuStatsMsg(s.data_, s.size_);
-        TS_LOGD("s.overrun():%lu", perCpuStatsMsg.overrun());
-        TS_LOGD("s.dropped_events():%lu", perCpuStatsMsg.dropped_events());
+        TS_LOGD("s.overrun():%" PRIu64 "", perCpuStatsMsg.overrun());
+        TS_LOGD("s.dropped_events():%" PRIu64 "", perCpuStatsMsg.dropped_events());
         auto clock = ftraceCpuStatsMsg.trace_clock().ToStdString();
         if (clock == "boot") {
             clock_ = TS_CLOCK_BOOTTIME;
@@ -713,7 +712,7 @@ void PbreaderParser::ParseFtrace(PbreaderDataSegment& dataSeg)
         haveSplitSeg = true;
     }
     if (tracePluginResult.has_clocks_detail()) {
-        htraceClockDetailParser_->Parse(dataSeg.protoData); // has Event
+        pbreaderClockDetailParser_->Parse(dataSeg.protoData); // has Event
         haveSplitSeg = true;
     }
     if (traceDataCache_->isSplitFile_ && haveSplitSeg) {
@@ -1091,9 +1090,7 @@ bool PbreaderParser::InitProfilerTraceFileHeader()
     const int32_t DATA_TYPE_CLOCK = 100;
     TraceStreamer_Plugin_Out_SendData(reinterpret_cast<char*>(buffer), packetHeaderLength_, DATA_TYPE_CLOCK);
 #endif
-#ifdef ENABLE_HTRACE
-    htraceClockDetailParser_->Parse(pHeader);
-#endif
+    pbreaderClockDetailParser_->Parse(pHeader);
     return true;
 }
 } // namespace TraceStreamer
diff --git a/trace_streamer/src/parser/pbreader_parser/pbreader_parser.h b/trace_streamer/src/parser/pbreader_parser/pbreader_parser.h
index f0be66e21fd598d7edd8728888b9e98cb045dabb..6708523471efd685b11dfa015072b2c79960f97f 100644
--- a/trace_streamer/src/parser/pbreader_parser/pbreader_parser.h
+++ b/trace_streamer/src/parser/pbreader_parser/pbreader_parser.h
@@ -28,43 +28,42 @@
 #include "ebpf_data_parser.h"
 #endif
 #include "file.h"
+#include "pbreader_clock_detail_parser.h"
 #ifdef ENABLE_HTRACE
-#include "htrace_clock_detail_parser.h"
 #include "htrace_cpu_detail_parser.h"
 #include "htrace_symbols_detail_parser.h"
 #endif
 #include "htrace_plugin_time_parser.h"
 #ifdef ENABLE_CPUDATA
-#include "cpu_data_parser/pbreader_cpu_data_parser.h"
+#include "pbreader_cpu_data_parser.h"
 #endif
 #ifdef ENABLE_DISKIO
-#include "disk_io_parser/pbreader_disk_io_parser.h"
+#include "pbreader_disk_io_parser.h"
 #endif
 #ifdef ENABLE_HTDUMP
-#include "hidump_parser/pbreader_hidump_parser.h"
+#include "pbreader_hidump_parser.h"
 #endif
 #ifdef ENABLE_HILOG
-#include "hilog_parser/pbreader_hilog_parser.h"
+#include "pbreader_hilog_parser.h"
 #endif
 #ifdef ENABLE_HISYSEVENT
-#include "hisysevent_parser/pbreader_hisysevent_parser.h"
+#include "pbreader_hisysevent_parser.h"
 #endif
 #ifdef ENABLE_ARKTS
-#include "arkts/pbreader_js_memory_parser.h"
+#include "pbreader_js_memory_parser.h"
 #endif
 #ifdef ENABLE_MEMORY
-#include "mem_parser/pbreader_mem_parser.h"
+#include "pbreader_mem_parser.h"
 #endif
 #ifdef ENABLE_NATIVE_HOOK
-#include "native_hook_parser/pbreader_native_hook_parser.h"
+#include "pbreader_native_hook_parser.h"
 #endif
 #ifdef ENABLE_NETWORK
-#include "network_parser/pbreader_network_parser.h"
+#include "pbreader_network_parser.h"
 #endif
 #ifdef ENABLE_PROCESS
-#include "process_parser/pbreader_process_parser.h"
+#include "pbreader_process_parser.h"
 #endif
-#include "log.h"
 #include "parser_base.h"
 #include "pbreader_file_header.h"
 #ifdef ENABLE_HIPERF
@@ -73,7 +72,7 @@
 #include "proto_reader_help.h"
 #include "string_help.h"
 #include "symbols_file.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 #include "ts_common.h"
 #ifdef ENABLE_STREAM_EXTEND
@@ -94,7 +93,9 @@ public:
 #ifdef ENABLE_ARKTS
     void EnableFileSeparate(bool enabled);
 #endif
+#if defined(ENABLE_HIPERF) || defined(ENABLE_NATIVE_HOOK) || defined(ENABLE_EBPF)
     void ParserFileSO(std::string& directory, const std::vector<std::string>& relativeFilePaths);
+#endif
 #ifdef ENABLE_HIPERF
     void TraceDataSegmentEnd(bool isSplitFile);
     void StoreTraceDataSegment(std::unique_ptr<uint8_t[]> bufferStr, size_t size, int32_t isFinish);
@@ -250,10 +251,10 @@ private:
     const size_t packetSegLength_ = 4;
     const size_t packetHeaderLength_ = 1024;
     TraceDataCache* traceDataCache_;
+    std::unique_ptr<PbreaderClockDetailParser> pbreaderClockDetailParser_;
 #ifdef ENABLE_HTRACE
     std::unique_ptr<HtraceCpuDetailParser> htraceCpuDetailParser_;
     std::unique_ptr<HtraceSymbolsDetailParser> htraceSymbolsDetailParser_;
-    std::unique_ptr<HtraceClockDetailParser> htraceClockDetailParser_;
     ClockId dataSourceTypeTraceClockid_ = TS_CLOCK_UNKNOW;
     bool onlyParseFtrace_ = false;
 #endif
diff --git a/trace_streamer/src/parser/pbreader_parser/process_parser/BUILD.gn b/trace_streamer/src/parser/pbreader_parser/process_parser/BUILD.gn
index 0b93f72c128eca94e91bbf23ebe0d4090fb5fa41..31d571e38b1ee7d6dcea5435846870122ebcaeb6 100644
--- a/trace_streamer/src/parser/pbreader_parser/process_parser/BUILD.gn
+++ b/trace_streamer/src/parser/pbreader_parser/process_parser/BUILD.gn
@@ -13,6 +13,10 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("process_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("process_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
@@ -22,5 +26,8 @@ ohos_static_library("process_parser") {
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp_standard",
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/process_data:process_data_reader",
   ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":process_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/print_event_parser.h b/trace_streamer/src/parser/print_event_parser.h
index 9326c39acb5975b85fcda5f5277ffe08b28b7a02..bee64b767224e43b7f96277e2e33f84ed2c942ba 100644
--- a/trace_streamer/src/parser/print_event_parser.h
+++ b/trace_streamer/src/parser/print_event_parser.h
@@ -19,10 +19,10 @@
 #include <string_view>
 #include "common_types.h"
 #include "event_parser_base.h"
-#include "filter/measure_filter.h"
-#include "filter/process_filter.h"
-#include "filter/slice_filter.h"
-#include "filter/task_pool_filter.h"
+#include "measure_filter.h"
+#include "process_filter.h"
+#include "slice_filter.h"
+#include "task_pool_filter.h"
 #include "string_to_numerical.h"
 #include "trace_streamer_config.h"
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/ptreader_parser/bytrace_parser/BUILD.gn b/trace_streamer/src/parser/ptreader_parser/bytrace_parser/BUILD.gn
index bd432943d6c2f5ae5c11ca7c6cbd9199652074ac..c73f750a7afd40e6f7b4e7e1fc55472a49679fe2 100644
--- a/trace_streamer/src/parser/ptreader_parser/bytrace_parser/BUILD.gn
+++ b/trace_streamer/src/parser/ptreader_parser/bytrace_parser/BUILD.gn
@@ -13,11 +13,16 @@
 import("//build/ohos.gni")
 import("../../../../build/ts.gni")
 
+config("bytrace_parser_cfg") {
+  include_dirs = [ "." ]
+}
+
 ohos_static_library("ptreader_bytrace_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "bytrace_event_parser.cpp" ]
-  include_dirs = [ "." ]
-  public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hilog_data:hilog_data_reader" ]
-  public_configs = [ "../../:parser_base_cfg" ]
+  public_configs = [
+    ":bytrace_parser_cfg",
+    "../../:parser_base_cfg",
+  ]
 }
diff --git a/trace_streamer/src/parser/ptreader_parser/bytrace_parser/bytrace_event_parser.cpp b/trace_streamer/src/parser/ptreader_parser/bytrace_parser/bytrace_event_parser.cpp
index eb81c8c89e4a5fd442c3acad5bd92bedbb324234..b4f07b3b24e0ba9b7fd67573d765f92127c28717 100644
--- a/trace_streamer/src/parser/ptreader_parser/bytrace_parser/bytrace_event_parser.cpp
+++ b/trace_streamer/src/parser/ptreader_parser/bytrace_parser/bytrace_event_parser.cpp
@@ -660,7 +660,8 @@ bool BytraceEventParser::BinderTransaction(const ArgsMap& args, const BytraceLin
     auto isReply = base::StrToInt<uint32_t>(args.at("reply"));
     auto flags = base::StrToInt<uint32_t>(args.at("flags"), base::INTEGER_RADIX_TYPE_HEX);
     auto codeStr = base::StrToInt<uint32_t>(args.at("code"), base::INTEGER_RADIX_TYPE_HEX);
-    TS_LOGD("ts:%lu, pid:%u, destNode:%u, destTgid:%u, destTid:%u, transactionId:%lu, isReply:%u flags:%u, code:%u",
+    TS_LOGD("ts:%" PRIu64 ", pid:%u, destNode:%u, destTgid:%u, destTid:%u, transactionId:%" PRIu64
+            ", isReply:%u flags:%u, code:%u",
             line.ts, line.pid, destNode.value(), destProc.value(), destThread.value(), transactionId.value(),
             isReply.value(), flags.value(), codeStr.value());
     streamFilters_->binderFilter_->SendTraction(line.ts, line.pid, transactionId.value(), destNode.value(),
@@ -687,7 +688,7 @@ bool BytraceEventParser::BinderTransactionReceived(const ArgsMap& args, const By
         streamFilters_->cpuFilter_->InsertRunnableBinderRecvEvent(
             transactionId.value(), streamFilters_->processFilter_->GetInternalTid(line.pid));
     }
-    TS_LOGD("ts:%lu, pid:%u, transactionId:%lu", line.ts, line.pid, transactionId.value());
+    TS_LOGD("ts:%" PRIu64 ", pid:%u, transactionId:%" PRIu64 "", line.ts, line.pid, transactionId.value());
     return true;
 }
 bool BytraceEventParser::BinderTransactionAllocBufEvent(const ArgsMap& args, const BytraceLine& line) const
@@ -701,7 +702,7 @@ bool BytraceEventParser::BinderTransactionAllocBufEvent(const ArgsMap& args, con
     auto dataSize = base::StrToInt<uint64_t>(args.at("data_size"));
     auto offsetsSize = base::StrToInt<uint64_t>(args.at("offsets_size"));
     streamFilters_->binderFilter_->TransactionAllocBuf(line.ts, line.pid, dataSize.value(), offsetsSize.value());
-    TS_LOGD("dataSize:%lu, offsetSize:%lu", dataSize.value(), offsetsSize.value());
+    TS_LOGD("dataSize:%" PRIu64 ", offsetSize:%" PRIu64 "", dataSize.value(), offsetsSize.value());
     return true;
 }
 void BytraceEventParser::ParseDataItem(const BytraceLine& line)
diff --git a/trace_streamer/src/parser/ptreader_parser/hilog_parser/ptreader_hilog_parser.cpp b/trace_streamer/src/parser/ptreader_parser/hilog_parser/ptreader_hilog_parser.cpp
index 39b61ca6c7ed13b4bc1501b4ba964bb0b1f489c4..3c4d93a96f57002a75a94c11d13e4a38155db07a 100644
--- a/trace_streamer/src/parser/ptreader_parser/hilog_parser/ptreader_hilog_parser.cpp
+++ b/trace_streamer/src/parser/ptreader_parser/hilog_parser/ptreader_hilog_parser.cpp
@@ -35,7 +35,7 @@ bool PtreaderHilogParser::HilogTimeStrToTimestamp(std::string& timeStr, uint64_t
     if (std::regex_search(timeStr, matcheLine, std::regex(R"(^\d+\.(\d+)$)"))) {
         size_t index = 0;
         usecStr = matcheLine[++index].str();
-        sscanf_s(timeStr.c_str(), "%lu.%lu", &sec, &nsec);
+        sscanf_s(timeStr.c_str(), "%" PRIu64 ".%" PRIu64 "", &sec, &nsec);
     } else if (std::regex_search(timeStr, matcheLine,
                                  std::regex(R"(^(\d{4})?\-?(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})\.(\d+)$)"))) {
         size_t index = 0;
diff --git a/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/BUILD.gn b/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/BUILD.gn
index 9ad0f3f4aa6e130b676f2d67027645d98e1750a2..0d833f2f6dd7e09ddfc941b613f86bfc738e5802 100644
--- a/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/BUILD.gn
+++ b/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/BUILD.gn
@@ -17,7 +17,7 @@ ohos_static_library("ptreader_hisysevent_parser") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "ptreader_hisysevent_parser.cpp" ]
-  public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hilog_data:hilog_data_reader" ]
+  public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/hisysevent_data:hisysevent_data_reader" ]
   public_configs = [
     "../../:hisysevent_parser_cfg",
     "../../:parser_base_cfg",
diff --git a/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/ptreader_hisysevent_parser.h b/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/ptreader_hisysevent_parser.h
index 5cdda88ab5c0b7d99c06a4303d828b48f9546765..f27dcfd16ff1423f4c0a312bb95b9a709b3ed386 100644
--- a/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/ptreader_hisysevent_parser.h
+++ b/trace_streamer/src/parser/ptreader_parser/hisysevent_parser/ptreader_hisysevent_parser.h
@@ -17,7 +17,6 @@
 
 #include "common_types.h"
 #include "string_help.h"
-#include "log.h"
 #include "string_to_numerical.h"
 #include "parser_base.h"
 #include "event_parser_base.h"
diff --git a/trace_streamer/src/parser/ptreader_parser/ptreader_parser.cpp b/trace_streamer/src/parser/ptreader_parser/ptreader_parser.cpp
index b1adc4d0c7f1bba0d88b6e733c37430463e1f640..7f1a765ee897f625e63cb309c2d7791e4f65ea4c 100644
--- a/trace_streamer/src/parser/ptreader_parser/ptreader_parser.cpp
+++ b/trace_streamer/src/parser/ptreader_parser/ptreader_parser.cpp
@@ -21,7 +21,7 @@
 #include "binder_filter.h"
 #include "cpu_filter.h"
 #ifdef ENABLE_HISYSEVENT
-#include "hi_sysevent_filter/hi_sysevent_measure_filter.h"
+#include "hi_sysevent_measure_filter.h"
 #endif
 #include "parting_string.h"
 #include "stat_filter.h"
diff --git a/trace_streamer/src/parser/ptreader_parser/ptreader_parser.h b/trace_streamer/src/parser/ptreader_parser/ptreader_parser.h
index 502bd8a21b6614eb1d5517adae322375071fc85a..e1480e98a4ccd8bef7f040079830a445170f0465 100644
--- a/trace_streamer/src/parser/ptreader_parser/ptreader_parser.h
+++ b/trace_streamer/src/parser/ptreader_parser/ptreader_parser.h
@@ -22,19 +22,18 @@
 #include <thread>
 
 #ifdef ENABLE_BYTRACE
-#include "bytrace_parser/bytrace_event_parser.h"
+#include "bytrace_event_parser.h"
 #endif
 #include "common_types.h"
 #ifdef ENABLE_HILOG
-#include "hilog_parser/ptreader_hilog_parser.h"
+#include "ptreader_hilog_parser.h"
 #endif
 #ifdef ENABLE_HISYSEVENT
-#include "hisysevent_parser/ptreader_hisysevent_parser.h"
+#include "ptreader_hisysevent_parser.h"
 #endif
-#include "log.h"
 #include "parser_base.h"
 #include "string_to_numerical.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/parser/rawtrace_parser/BUILD.gn b/trace_streamer/src/parser/rawtrace_parser/BUILD.gn
index 65d4389b100566703f1c91c5c9c796f6235df384..35e990dd62096c4f48c79a0d6e76000797fb6f0b 100755
--- a/trace_streamer/src/parser/rawtrace_parser/BUILD.gn
+++ b/trace_streamer/src/parser/rawtrace_parser/BUILD.gn
@@ -19,6 +19,7 @@ config("rawtrace_parser_comm") {
     "${SRC}/base",
     "${SRC}/cfg",
     "${SRC}/parser",
+    "${SRC}/rpc",
     "${SRC}/trace_streamer",
     "${SRC}/proto_reader/include",
     "${SRC}/trace_data",
@@ -81,8 +82,7 @@ ohos_static_library("rawtrace_parser") {
     cflags = [ "-includeMingW64Fix.h" ]
   }
 
-  public_deps = []
-  deps = [
+  public_deps = [
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp_standard",
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/ftrace_data/${device_kernel_version}:ts_ftrace_data_cpp",
     "${THIRD_PARTY}/protobuf:protobuf_lite_static",
diff --git a/trace_streamer/src/parser/rawtrace_parser/ftrace_event_processor.cpp b/trace_streamer/src/parser/rawtrace_parser/ftrace_event_processor.cpp
index 7c660f75093ec202e4975b769a2c1d3a7d78e3e1..26a82827c344ee568bf0898f75ab17dd796e7835 100644
--- a/trace_streamer/src/parser/rawtrace_parser/ftrace_event_processor.cpp
+++ b/trace_streamer/src/parser/rawtrace_parser/ftrace_event_processor.cpp
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 #include "ftrace_event_processor.h"
-#include "log.h"
 
 namespace SysTuning {
 namespace TraceStreamer {
diff --git a/trace_streamer/src/parser/rawtrace_parser/kernel_symbols_processor.cpp b/trace_streamer/src/parser/rawtrace_parser/kernel_symbols_processor.cpp
index f945f228eb72dc95d9e67e21d6f036c233aec5bb..7e0e24933e0654bfc4c187e90bf69e1a2ab0089a 100644
--- a/trace_streamer/src/parser/rawtrace_parser/kernel_symbols_processor.cpp
+++ b/trace_streamer/src/parser/rawtrace_parser/kernel_symbols_processor.cpp
@@ -14,7 +14,6 @@
  */
 #include "kernel_symbols_processor.h"
 
-#include "log.h"
 #include "string_help.h"
 #include "string_to_numerical.h"
 
diff --git a/trace_streamer/src/parser/rawtrace_parser/printk_formats_processor.cpp b/trace_streamer/src/parser/rawtrace_parser/printk_formats_processor.cpp
index c59be8a261d8cae39c496c32480d0b6cc5a670cc..abca16a6db85ca36459409c20521eb4f39775dfb 100644
--- a/trace_streamer/src/parser/rawtrace_parser/printk_formats_processor.cpp
+++ b/trace_streamer/src/parser/rawtrace_parser/printk_formats_processor.cpp
@@ -15,7 +15,6 @@
 #include "printk_formats_processor.h"
 
 #include <sstream>
-#include "log.h"
 #include "string_help.h"
 #include "string_to_numerical.h"
 
diff --git a/trace_streamer/src/parser/rawtrace_parser/rawtrace_parser.cpp b/trace_streamer/src/parser/rawtrace_parser/rawtrace_parser.cpp
index 248b888ff8e8069d0daeeb35640d0293763cf07f..764659a3108971091adb65b28d1f150ed71af92b 100644
--- a/trace_streamer/src/parser/rawtrace_parser/rawtrace_parser.cpp
+++ b/trace_streamer/src/parser/rawtrace_parser/rawtrace_parser.cpp
@@ -16,9 +16,8 @@
 #include "rawtrace_parser.h"
 #include <cinttypes>
 #if IS_WASM
-#include "../rpc/wasm_func.h"
+#include "wasm_func.h"
 #endif
-#include "log.h"
 #include "string_help.h"
 namespace SysTuning {
 namespace TraceStreamer {
diff --git a/trace_streamer/src/protos/services/common_types.proto b/trace_streamer/src/protos/services/common_types.proto
index d92416e11c68422675e8fd894974c86c4fa905de..77a9cc167f032d969cdcf3fd4229ded844f611ed 100755
--- a/trace_streamer/src/protos/services/common_types.proto
+++ b/trace_streamer/src/protos/services/common_types.proto
@@ -20,8 +20,9 @@ message ProfilerPluginConfig {
     string name = 1;
     string plugin_sha256 = 2;
     uint32 sample_interval = 3; // Polling plugin collection interval(ms)
-    bytes config_data = 4;
-    bool protobuf_serialize = 5; // data encoding method, true is protobuf, false is protoencoder
+    bytes  config_data = 4;
+    string clock = 5;
+    bool is_protobuf_serialize = 6; // data encoding method, true is protobuf, false is protoencoder
 }
 
 message ProfilerPluginState {
@@ -42,16 +43,17 @@ message ProfilerPluginData {
     bytes data = 3;
     enum ClockId {
         CLOCKID_REALTIME = 0;
-        CLOCKID_REALTIME_ALARM = 1;     // since Linux 3.0; Linux-specific
-        CLOCKID_REALTIME_COARSE = 2;    // since Linux 2.6.32; Linux-specific
-        CLOCKID_TAI = 3;                // since Linux 3.10; Linux-specific
-        CLOCKID_MONOTONIC = 4;
-        CLOCKID_MONOTONIC_COARSE = 5;   // since Linux 2.6.32; Linux-specific
-        CLOCKID_MONOTONIC_RAW = 6;      // since Linux 2.6.28; Linux-specific
+        CLOCKID_MONOTONIC = 1;
+        CLOCKID_PROCESS_CPUTIME_ID = 2; // since Linux 2.6.12
+        CLOCKID_THREAD_CPUTIME_ID = 3;  // since Linux 2.6.12
+        CLOCKID_MONOTONIC_RAW = 4;      // since Linux 2.6.28; Linux-specific
+        CLOCKID_REALTIME_COARSE = 5;    // since Linux 2.6.32; Linux-specific
+        CLOCKID_MONOTONIC_COARSE = 6;   // since Linux 2.6.32; Linux-specific
         CLOCKID_BOOTTIME = 7;           // since Linux 2.6.39; Linux-specific
-        CLOCKID_BOOTTIME_ALARM = 8;     // since Linux 3.0; Linux-specific
-        CLOCKID_PROCESS_CPUTIME_ID = 9; // since Linux 2.6.12
-        CLOCKID_THREAD_CPUTIME_ID = 10; // since Linux 2.6.12
+        CLOCKID_REALTIME_ALARM = 8;     // since Linux 3.0; Linux-specific
+        CLOCKID_BOOTTIME_ALARM = 9;     // since Linux 3.0; Linux-specific
+        CLOCKID_SGI_CYCLE = 10;
+        CLOCKID_TAI = 11;               // since Linux 3.10; Linux-specific
     };
     ClockId clock_id = 4;
     uint64 tv_sec = 5;
diff --git a/trace_streamer/src/protos/types/plugins/native_hook/native_hook_result.proto b/trace_streamer/src/protos/types/plugins/native_hook/native_hook_result.proto
old mode 100755
new mode 100644
diff --git a/trace_streamer/src/rpc/ffrt_converter.h b/trace_streamer/src/rpc/ffrt_converter.h
index 7519f40edec696aa433366558ba15400246b5d6d..8b7bf4e665d215b28b8b053c33e7541ceb71d519 100644
--- a/trace_streamer/src/rpc/ffrt_converter.h
+++ b/trace_streamer/src/rpc/ffrt_converter.h
@@ -24,9 +24,7 @@
 #include <sstream>
 #include <string>
 #include <unordered_map>
-#include <variant>
 #include <vector>
-#include "log.h"
 #include "ts_common.h"
 namespace SysTuning {
 namespace TraceStreamer {
diff --git a/trace_streamer/src/rpc/rpc_server.cpp b/trace_streamer/src/rpc/rpc_server.cpp
index f302af013f69e8f71dde2be9aec23a450117c381..83bc0be785338c8296a5553adbe35f12f17c6d68 100644
--- a/trace_streamer/src/rpc/rpc_server.cpp
+++ b/trace_streamer/src/rpc/rpc_server.cpp
@@ -26,8 +26,9 @@
 #include "ptreader_parser.h"
 #include "pbreader_parser.h"
 #include "json.hpp"
-#include "log.h"
+#ifdef ENABLE_RAWTRACE
 #include "rawtrace_parser.h"
+#endif
 #include "string_help.h"
 #include "trace_streamer_selector.h"
 #include "ts_common.h"
@@ -319,7 +320,7 @@ bool RpcServer::SendRawtraceSplitFileData(SplitFileCallBack splitFileCallBack, i
         result += "]}\r\n";
         splitFileCallBack(result, (int32_t)SplitDataDataType::SPLIT_FILE_JSON, isFinish);
     }
-    TS_LOGI("mTraceRawCpuData.size()= %lu, mTraceRawCommData.size()=%lu\n result=%s\n", mTraceRawCpuData.size(),
+    TS_LOGI("mTraceRawCpuData.size()= %zu, mTraceRawCommData.size()=%zu\n result=%s\n", mTraceRawCpuData.size(),
             mTraceRawCommData.size(), result.data());
     return true;
 }
diff --git a/trace_streamer/src/table/base/BUILD.gn b/trace_streamer/src/table/base/BUILD.gn
index 61ab9200160b0ab569df056bf4e1424d6e32584a..ac46aacc8344bc86d22a40f6f4cb4264c7a2c554 100644
--- a/trace_streamer/src/table/base/BUILD.gn
+++ b/trace_streamer/src/table/base/BUILD.gn
@@ -12,25 +12,8 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-
 import("../../../build/ts.gni")
-ohos_source_set("base_tables") {
-  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
-  part_name = "${OHOS_PROFILER_PART_NAME}"
-  sources = [
-    "args_table.cpp",
-    "data_dict_table.cpp",
-    "data_type_table.cpp",
-    "datasource_clockid_table.cpp",
-    "device_info_table.cpp",
-    "meta_table.cpp",
-    "range_table.cpp",
-    "span_join.cpp",
-    "stat_table.cpp",
-    "symbols_table.cpp",
-    "table_base.cpp",
-    "trace_config_table.cpp",
-  ]
+config("base_tables_cfg") {
   include_dirs = [
     "include",
     "${THIRD_PARTY}/sqlite/include",
@@ -39,6 +22,7 @@ ohos_source_set("base_tables") {
     "${SRC}/trace_data",
     "${SRC}/include",
     "${SRC}",
+    "${SRC}/cfg",
     "${THIRD_PARTY}/protobuf/src",
     "${THIRD_PARTY}/bounds_checking_function/include",
   ]
@@ -52,6 +36,25 @@ ohos_source_set("base_tables") {
     "${SRC}/trace_data/trace_stdtype/htrace",
     "${SRC}/trace_data/trace_stdtype/measure",
   ]
+}
+ohos_source_set("base_tables") {
+  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
+  part_name = "${OHOS_PROFILER_PART_NAME}"
+  sources = [
+    "args_table.cpp",
+    "data_dict_table.cpp",
+    "data_type_table.cpp",
+    "datasource_clockid_table.cpp",
+    "device_info_table.cpp",
+    "meta_table.cpp",
+    "range_table.cpp",
+    "span_join.cpp",
+    "stat_table.cpp",
+    "symbols_table.cpp",
+    "table_base.cpp",
+    "trace_config_table.cpp",
+  ]
+  public_configs = [ ":base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/table/base/table_base.cpp b/trace_streamer/src/table/base/table_base.cpp
index 8cb6f3dbcb67836c2c77295064512b30e7ffff7c..5c18ce65e929a2fe680ce42961dc92d568870412 100644
--- a/trace_streamer/src/table/base/table_base.cpp
+++ b/trace_streamer/src/table/base/table_base.cpp
@@ -19,8 +19,6 @@
 #include <cmath>
 #include <cstring>
 
-#include "log.h"
-
 namespace SysTuning {
 namespace TraceStreamer {
 namespace {
diff --git a/trace_streamer/src/table/ebpf/BUILD.gn b/trace_streamer/src/table/ebpf/BUILD.gn
index bdc78b11f19999699f1282922a825568968d5b76..b33714fbe4debed540d75cc959528d390ca25428 100644
--- a/trace_streamer/src/table/ebpf/BUILD.gn
+++ b/trace_streamer/src/table/ebpf/BUILD.gn
@@ -22,29 +22,8 @@ ohos_source_set("ebpf_tables") {
     "ebpf_callstack_table.cpp",
     "file_system_sample_table.cpp",
   ]
-  include_dirs = [
-    "include",
-    "../base/include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-    "${THIRD_PARTY}/json/single_include/nlohmann",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/table/ftrace/BUILD.gn b/trace_streamer/src/table/ftrace/BUILD.gn
index 83a40dff5fc762e3f974d2ca6e64a351861855d4..d43e070386fb3305c85533dae58476ff67424a77 100644
--- a/trace_streamer/src/table/ftrace/BUILD.gn
+++ b/trace_streamer/src/table/ftrace/BUILD.gn
@@ -45,28 +45,8 @@ ohos_source_set("ftrace_tables") {
     "thread_table.cpp",
   ]
 
-  include_dirs = [
-    "../base/include",
-    "include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
 
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
diff --git a/trace_streamer/src/table/ftrace/cpu_measure_filter_table.cpp b/trace_streamer/src/table/ftrace/cpu_measure_filter_table.cpp
index fbc39fd7488f3e5b5fb821d5c4c289c5546b1019..10b2b8d457d5af6cdc075745c5a0c803192779fd 100644
--- a/trace_streamer/src/table/ftrace/cpu_measure_filter_table.cpp
+++ b/trace_streamer/src/table/ftrace/cpu_measure_filter_table.cpp
@@ -17,8 +17,6 @@
 
 #include <cmath>
 
-#include "log.h"
-
 namespace SysTuning {
 namespace TraceStreamer {
 enum class Index : int32_t { ID = 0, NAME, CPU };
diff --git a/trace_streamer/src/table/hi_sysevent/BUILD.gn b/trace_streamer/src/table/hi_sysevent/BUILD.gn
index b140ec36cae5ab0536239956250f4c1e79e88a02..ad284c4b1c4e2199f4d72306aeb45ad01481387b 100644
--- a/trace_streamer/src/table/hi_sysevent/BUILD.gn
+++ b/trace_streamer/src/table/hi_sysevent/BUILD.gn
@@ -23,28 +23,8 @@ ohos_source_set("hi_sysevent_tables") {
     "sysevent_measure_table.cpp",
     "sysevent_subkey_table.cpp",
   ]
-  include_dirs = [
-    "include",
-    "../base/include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/table/hiperf/BUILD.gn b/trace_streamer/src/table/hiperf/BUILD.gn
index 4ec34ec7b8a410bf2067194f5a1f734b2863bf3c..56791a2b06d2393c83e3bb0308f85df33ede4478 100644
--- a/trace_streamer/src/table/hiperf/BUILD.gn
+++ b/trace_streamer/src/table/hiperf/BUILD.gn
@@ -24,29 +24,8 @@ ohos_source_set("hiperf_tables") {
     "perf_sample_table.cpp",
     "perf_thread_table.cpp",
   ]
-
-  include_dirs = [
-    "include",
-    "../base/include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/table/js_memory/BUILD.gn b/trace_streamer/src/table/js_memory/BUILD.gn
index 639440500205c7df1a762c9d71a8b8efda62c0d1..c383b1abd638fe60c9f6b34f6b2bb59f7a1fa785 100644
--- a/trace_streamer/src/table/js_memory/BUILD.gn
+++ b/trace_streamer/src/table/js_memory/BUILD.gn
@@ -31,28 +31,8 @@ ohos_source_set("js_memory_tables") {
     "js_heap_trace_function_info_table.cpp",
     "js_heap_trace_node_table.cpp",
   ]
-  include_dirs = [
-    "include",
-    "../base/include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/table/monitor/BUILD.gn b/trace_streamer/src/table/monitor/BUILD.gn
index 1c5f0bbba1260217b0867535f055143de24aa2ee..7a7c2afcd69a3c9b6fabe0500c7c855721ad55ff 100644
--- a/trace_streamer/src/table/monitor/BUILD.gn
+++ b/trace_streamer/src/table/monitor/BUILD.gn
@@ -34,28 +34,8 @@ ohos_source_set("monitor_tables") {
     "paged_memory_sample_table.cpp",
     "smaps_table.cpp",
   ]
-  include_dirs = [
-    "include",
-    "../base/include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/table/native_hook/BUILD.gn b/trace_streamer/src/table/native_hook/BUILD.gn
index 7818dc2295a79965c1b588330b60cffdc63ab68c..2cd0416a23f06a9592e7c7a869d083ced0607649 100644
--- a/trace_streamer/src/table/native_hook/BUILD.gn
+++ b/trace_streamer/src/table/native_hook/BUILD.gn
@@ -22,29 +22,8 @@ ohos_source_set("native_hook_tables") {
     "native_hook_statistic_table.cpp",
     "native_hook_table.cpp",
   ]
-
-  include_dirs = [
-    "include",
-    "../base/include",
-    "${THIRD_PARTY}/sqlite/include",
-    "${SRC}/base",
-    "../../parser",
-    "${SRC}/trace_data",
-    "${SRC}/include",
-    "${SRC}",
-    "${THIRD_PARTY}/protobuf/src",
-    "${THIRD_PARTY}/bounds_checking_function/include",
-  ]
-  include_dirs += [
-    "${SRC}/trace_data/trace_stdtype",
-    "${SRC}/trace_data/trace_stdtype/ftrace",
-    "${SRC}/trace_data/trace_stdtype/ftrace/template",
-    "${SRC}/trace_data/trace_stdtype/hilog",
-    "${SRC}/trace_data/trace_stdtype/hiperf",
-    "${SRC}/trace_data/trace_stdtype/hisysevent",
-    "${SRC}/trace_data/trace_stdtype/htrace",
-    "${SRC}/trace_data/trace_stdtype/measure",
-  ]
+  include_dirs = [ "include" ]
+  public_configs = [ "${SRC}/table/base:base_tables_cfg" ]
   if (!is_independent_compile) {
     configs = [ "${TS_DIR}/gn:ts_config" ]
   }
diff --git a/trace_streamer/src/trace_data/BUILD.gn b/trace_streamer/src/trace_data/BUILD.gn
index a5b029f9335ffdae4eeb79deb1b0f0ab584b6f89..5489b73efc0a091b6235520c7547063ed1e71b34 100644
--- a/trace_streamer/src/trace_data/BUILD.gn
+++ b/trace_streamer/src/trace_data/BUILD.gn
@@ -19,17 +19,11 @@ ohos_source_set("trace_data") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [
     "sqllite_prepar_cache_data.cpp",
-    "sqllite_prepar_cache_data.h",
     "trace_data_cache.cpp",
-    "trace_data_cache.h",
     "trace_data_cache_base.cpp",
-    "trace_data_cache_base.h",
     "trace_data_cache_reader.cpp",
-    "trace_data_cache_reader.h",
     "trace_data_cache_writer.cpp",
-    "trace_data_cache_writer.h",
     "trace_data_db.cpp",
-    "trace_data_db.h",
     "trace_stdtype/base_stdtype.cpp",
     "trace_stdtype/common_stdtype.cpp",
     "trace_stdtype/ftrace/callstack_stdtype.cpp",
@@ -98,4 +92,9 @@ ohos_source_set("trace_data") {
   deps = [
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/smartperf_host:ts_all_sph_cpp",
   ]
+
+  public_configs = [
+    "${SRC}/parser/ebpf_parser:ebpf_parser_cfg",
+    "${SRC}/base/sqlite_ext:sqlite_ext_cfg",
+  ]
 }
diff --git a/trace_streamer/src/trace_data/trace_data_cache.cpp b/trace_streamer/src/trace_data/trace_data_cache.cpp
index df387b4368aab864c7c78599275dd33a409892a0..5ff17c8782ab8b2a00e8c35a58f2bd7a1378785d 100644
--- a/trace_streamer/src/trace_data/trace_data_cache.cpp
+++ b/trace_streamer/src/trace_data/trace_data_cache.cpp
@@ -77,7 +77,7 @@
 #include "native_hook_statistic_table.h"
 #include "network_table.h"
 #include "paged_memory_sample_table.h"
-#include "parser/ebpf_parser/ebpf_data_structure.h"
+#include "ebpf_data_structure.h"
 #include "perf_call_chain_table.h"
 #include "perf_files_table.h"
 #include "perf_report_table.h"
diff --git a/trace_streamer/src/trace_data/trace_data_cache_reader.cpp b/trace_streamer/src/trace_data/trace_data_cache_reader.cpp
index d81a43e3e4bfd97e05b8f21ce617c68d48bb2b91..7ffc1cc2fe1b5bc1a2c3107fcf0ab5b791b6a75f 100644
--- a/trace_streamer/src/trace_data/trace_data_cache_reader.cpp
+++ b/trace_streamer/src/trace_data/trace_data_cache_reader.cpp
@@ -14,7 +14,6 @@
  */
 
 #include "trace_data_cache_reader.h"
-#include "log.h"
 namespace SysTuning {
 namespace TraceStreamer {
 using namespace TraceStdtype;
diff --git a/trace_streamer/src/trace_data/trace_data_cache_writer.cpp b/trace_streamer/src/trace_data/trace_data_cache_writer.cpp
index f93d8eaae961f991fc27c81ee72d47d01f1f96df..b6fd64d5b5ebd5bbb58c5352cbc49e3d253c33b1 100644
--- a/trace_streamer/src/trace_data/trace_data_cache_writer.cpp
+++ b/trace_streamer/src/trace_data/trace_data_cache_writer.cpp
@@ -14,7 +14,6 @@
  */
 
 #include "trace_data_cache_writer.h"
-#include "log.h"
 namespace SysTuning {
 namespace TraceStreamer {
 using namespace TraceStdtype;
diff --git a/trace_streamer/src/trace_data/trace_data_db.cpp b/trace_streamer/src/trace_data/trace_data_db.cpp
index 085158bd0cec31768748bf54d8e8c071e51034eb..024031a93cb7ef54a1d460845495f9b5df864d4e 100644
--- a/trace_streamer/src/trace_data/trace_data_db.cpp
+++ b/trace_streamer/src/trace_data/trace_data_db.cpp
@@ -26,10 +26,9 @@
 
 #include "codec_cov.h"
 #include "file.h"
-#include "log.h"
 #include "sph_data.pb.h"
 #include "sqlite3.h"
-#include "sqlite_ext/sqlite_ext_funcs.h"
+#include "sqlite_ext_funcs.h"
 #include "string_help.h"
 #include "ts_common.h"
 
diff --git a/trace_streamer/src/trace_data/trace_stdtype/base_stdtype.h b/trace_streamer/src/trace_data/trace_stdtype/base_stdtype.h
index 2fa126ea7109488338f2b4f78a2d37ca3caa0b09..15b11d8d3861d3f5d9be2a41f69b52e6d3770221 100644
--- a/trace_streamer/src/trace_data/trace_stdtype/base_stdtype.h
+++ b/trace_streamer/src/trace_data/trace_stdtype/base_stdtype.h
@@ -17,7 +17,6 @@
 #define BASE_STDTYPE_H
 
 #include <deque>
-#include "log.h"
 #include "ts_common.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/src/trace_data/trace_stdtype/common_stdtype.h b/trace_streamer/src/trace_data/trace_stdtype/common_stdtype.h
index 9c0a8d482a1ddeedff88cd2ed125fa21d46a743b..4e560712964add07b4286512d960c42a7e485767 100644
--- a/trace_streamer/src/trace_data/trace_stdtype/common_stdtype.h
+++ b/trace_streamer/src/trace_data/trace_stdtype/common_stdtype.h
@@ -20,7 +20,7 @@
 #include <unordered_map>
 #include <sstream>
 #include "base_stdtype.h"
-#include "cfg/trace_streamer_config.h"
+#include "trace_streamer_config.h"
 
 namespace SysTuning {
 namespace TraceStdtype {
diff --git a/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp b/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp
index 61aa8b3fcbfdf1a5f416017ef4e5d7ceef86d1e7..31707d3238af296a27dee11b4c89d806412fce68 100644
--- a/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp
+++ b/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp
@@ -23,11 +23,11 @@
 #include "filter_filter.h"
 #include "frame_filter.h"
 #ifdef ENABLE_HISYSEVENT
-#include "hi_sysevent_filter/hi_sysevent_measure_filter.h"
+#include "hi_sysevent_measure_filter.h"
 #endif
 #include "irq_filter.h"
 #include "measure_filter.h"
-#include "perf_filter/perf_data_filter.h"
+#include "perf_data_filter.h"
 #include "process_filter.h"
 #include "slice_filter.h"
 #include "stat_filter.h"
diff --git a/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp b/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp
index cacb61b8edf26954aa1a924636c8cf50736d767c..0d3b3727b7b56f5f100ba4c0546111af8faea269 100644
--- a/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp
+++ b/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp
@@ -29,18 +29,18 @@
 #include "filter_filter.h"
 #include "frame_filter.h"
 #ifdef ENABLE_HISYSEVENT
-#include "hi_sysevent_filter/hi_sysevent_measure_filter.h"
+#include "hi_sysevent_measure_filter.h"
 #endif
 #include "irq_filter.h"
 #include "measure_filter.h"
 #include "task_pool_filter.h"
-#include "parser/ptreader_parser/ptreader_parser.h"
-#include "parser/pbreader_parser/pbreader_parser.h"
+#include "ptreader_parser.h"
+#include "pbreader_parser.h"
 #ifdef ENABLE_RAWTRACE
-#include "parser/rawtrace_parser/rawtrace_parser.h"
+#include "rawtrace_parser.h"
 #endif
 #ifdef ENABLE_HIPERF
-#include "perf_filter/perf_data_filter.h"
+#include "perf_data_filter.h"
 #endif
 #include "process_filter.h"
 #include "slice_filter.h"
diff --git a/trace_streamer/src/trace_streamer/trace_streamer_selector.h b/trace_streamer/src/trace_streamer/trace_streamer_selector.h
index 00cbd00a6a2402cdf50a75dda2469b88cde5cdb3..20788bf3671709ea635b0d145bf57c8d39c8e955 100644
--- a/trace_streamer/src/trace_streamer/trace_streamer_selector.h
+++ b/trace_streamer/src/trace_streamer/trace_streamer_selector.h
@@ -18,7 +18,7 @@
 #include <functional>
 #include <memory>
 #include "metrics.h"
-#include "trace_data/trace_data_cache.h"
+#include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 
 namespace SysTuning {
diff --git a/trace_streamer/test/BUILD.gn b/trace_streamer/test/BUILD.gn
index f80591b7560821108207fd0bf3fe84967b77b850..917347abe2ffd200da41fa9cd4f92c130c447255 100644
--- a/trace_streamer/test/BUILD.gn
+++ b/trace_streamer/test/BUILD.gn
@@ -92,7 +92,7 @@ if (is_test) {
       "${THIRD_PARTY}/protobuf:protobuf_lite_static",
       "${THIRD_PARTY}/protobuf:protobuf_static",
       "../src:trace_streamer_source",
-      "../src/parser/pbreader_parser:pbreader_parser",
+      "../src/parser/pbreader_parser:pbreader_parser_src",
       "../src/proto_reader:proto_reader",
     ]
     public_configs = []
@@ -117,6 +117,7 @@ if (is_test) {
       "../src/include",
       "../src/trace_streamer",
       "../src/parser/ptreader_parser",
+      "../src/parser/ptreader_parser/bytrace_parser",
       "../src/parser",
       "../src/cfg",
       "../src/metrics",
diff --git a/trace_streamer/test/resource/Mmap.htrace b/trace_streamer/test/resource/Mmap.htrace
old mode 100644
new mode 100755
diff --git a/trace_streamer/test/resource/ebpf_bio.htrace b/trace_streamer/test/resource/ebpf_bio.htrace
old mode 100644
new mode 100755
diff --git a/trace_streamer/test/resource/hiprofiler_data_ability.htrace b/trace_streamer/test/resource/hiprofiler_data_ability.htrace
old mode 100644
new mode 100755
diff --git a/trace_streamer/test/resource/hiprofiler_data_perf.htrace b/trace_streamer/test/resource/hiprofiler_data_perf.htrace
old mode 100644
new mode 100755
diff --git a/trace_streamer/test/resource/htrace_perf_no_profiler_header.bin b/trace_streamer/test/resource/htrace_perf_no_profiler_header.bin
old mode 100644
new mode 100755
diff --git a/trace_streamer/test/resource/perfCompressed.data b/trace_streamer/test/resource/perfCompressed.data
old mode 100644
new mode 100755
diff --git a/trace_streamer/test/unittest/ebpf/paged_memory_parser_test.cpp b/trace_streamer/test/unittest/ebpf/paged_memory_parser_test.cpp
index 103a9612af766a518d2f787304ac1ccc1877e81b..4f04a708f691624889afb86a35af16f69959ec9b 100644
--- a/trace_streamer/test/unittest/ebpf/paged_memory_parser_test.cpp
+++ b/trace_streamer/test/unittest/ebpf/paged_memory_parser_test.cpp
@@ -121,7 +121,7 @@ HWTEST_F(EbpfPagedMemoryParserTest, EbpfPagedMemoryParserwrongWithoutCallback, T
     ebpfDataParser->Finish();
     EXPECT_TRUE(ebpfDataParser->reader_->ebpfDataHeader_->header.clock == EBPF_CLOCK_BOOTTIME);
     auto sampleData = stream_.traceDataCache_->GetConstPagedMemorySampleData();
-    EXPECT_FALSE(sampleData.CallChainIds()[0] == INVALID_UINT64);
+    EXPECT_FALSE(sampleData.CallChainIds()[0] == INVALID_UINT32);
     EXPECT_FALSE(sampleData.Types()[0] == 2);
     auto startTs = sampleData.StartTs()[0];
     auto endTs = sampleData.EndTs()[0];
diff --git a/trace_streamer/test/unittest/filter/app_start_filter_test.cpp b/trace_streamer/test/unittest/filter/app_start_filter_test.cpp
index a5f3e2d940d92a5cb368288757601deb2e20daa1..af317a9e6a16b49cd3e5850f16b8a510ac271510 100644
--- a/trace_streamer/test/unittest/filter/app_start_filter_test.cpp
+++ b/trace_streamer/test/unittest/filter/app_start_filter_test.cpp
@@ -17,7 +17,7 @@
 #include <hwext/gtest-tag.h>
 
 #include "app_start_filter.h"
-#include "parser/ptreader_parser/ptreader_parser.h"
+#include "ptreader_parser.h"
 #include "slice_filter.h"
 #include "trace_streamer_selector.h"
 
diff --git a/trace_streamer/test/unittest/filter/cpu_filter_test.cpp b/trace_streamer/test/unittest/filter/cpu_filter_test.cpp
index 69a97b62e21ed71adfe29715ea74296e6c732a99..427fc7301fd6db4b61692dda48dc9a26d2194aac 100644
--- a/trace_streamer/test/unittest/filter/cpu_filter_test.cpp
+++ b/trace_streamer/test/unittest/filter/cpu_filter_test.cpp
@@ -74,7 +74,7 @@ HWTEST_F(CpuFilterTest, CpufilterInsertSwitchTest, TestSize.Level1)
 
     streamFilters_.cpuFilter_->InsertSwitchEvent(ts1, cpu, itidPre, prePior, TASK_INTERRUPTIBLE, itidNext, nextPior,
                                                  INVALID_DATAINDEX); // 1st switch
-    printf("state of pre itid: %llu\n", streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre));
+    printf("state of pre itid: %" PRIu64 "\n", streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre));
 
     EXPECT_TRUE(streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre) == TASK_INTERRUPTIBLE);
     EXPECT_TRUE(streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidNext) == TASK_RUNNING);
@@ -99,7 +99,7 @@ HWTEST_F(CpuFilterTest, CpufilterInsertSwitchFromZeroThread, TestSize.Level1)
 
     streamFilters_.cpuFilter_->InsertSwitchEvent(ts1, cpu, itidPre, prePior, TASK_INTERRUPTIBLE, itidNext, nextPior,
                                                  INVALID_DATAINDEX); // 1st switch
-    printf("state of pre itid: %llu\n", streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre));
+    printf("state of pre itid: %" PRIu64 "\n", streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre));
 
     EXPECT_TRUE(streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre) == TASK_INVALID);
     EXPECT_TRUE(streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidNext) == TASK_RUNNING);
@@ -124,7 +124,7 @@ HWTEST_F(CpuFilterTest, CpufilterInsertSwitchToZeroThread, TestSize.Level1)
 
     streamFilters_.cpuFilter_->InsertSwitchEvent(ts1, cpu, itidPre, prePior, TASK_INTERRUPTIBLE, itidNext, nextPior,
                                                  INVALID_DATAINDEX); // 1st switch
-    printf("state of pre itid: %llu\n", streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre));
+    printf("state of pre itid: %" PRIu64 "\n", streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre));
 
     EXPECT_TRUE(streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidPre) == TASK_INTERRUPTIBLE);
     EXPECT_TRUE(streamFilters_.cpuFilter_->StateOfInternalTidInStateTable(itidNext) == TASK_INVALID);
diff --git a/trace_streamer/test/unittest/pbreader_parser/htrace_binder_event_test.cpp b/trace_streamer/test/unittest/pbreader_parser/htrace_binder_event_test.cpp
index 32d13b1abb543b98fa529968fd820bbfd8b872e4..9f96751538dcb4d1990e726b93bd429f7e380add 100644
--- a/trace_streamer/test/unittest/pbreader_parser/htrace_binder_event_test.cpp
+++ b/trace_streamer/test/unittest/pbreader_parser/htrace_binder_event_test.cpp
@@ -18,7 +18,6 @@
 
 #include "binder_filter.h"
 #include "htrace_cpu_detail_parser.h"
-#include "htrace_event_parser.h"
 #include "trace_plugin_result.pb.h"
 #include "trace_plugin_result.pbreader.h"
 #include "trace_streamer_selector.h"
diff --git a/trace_streamer/test/unittest/pbreader_parser/htrace_cpu_detail_parser_test.cpp b/trace_streamer/test/unittest/pbreader_parser/htrace_cpu_detail_parser_test.cpp
index accc118a931bceac866cb270111e96821a340be9..2115fd6634e7b9a4c2934f4d77872bb1eb8440ea 100644
--- a/trace_streamer/test/unittest/pbreader_parser/htrace_cpu_detail_parser_test.cpp
+++ b/trace_streamer/test/unittest/pbreader_parser/htrace_cpu_detail_parser_test.cpp
@@ -17,7 +17,6 @@
 #include <hwext/gtest-tag.h>
 
 #include "htrace_cpu_detail_parser.h"
-#include "htrace_event_parser.h"
 #include "power.pb.h"
 #include "stat_filter.h"
 #include "trace_streamer_selector.h"
diff --git a/trace_streamer/test/unittest/pbreader_parser/htrace_irq_event_test.cpp b/trace_streamer/test/unittest/pbreader_parser/htrace_irq_event_test.cpp
index a99758ffb405fcab9443ee11c42f4edc473bfa3c..14fec633f5c5f6b03a2735f4af72c27fd90cdf5a 100644
--- a/trace_streamer/test/unittest/pbreader_parser/htrace_irq_event_test.cpp
+++ b/trace_streamer/test/unittest/pbreader_parser/htrace_irq_event_test.cpp
@@ -17,7 +17,6 @@
 #include <hwext/gtest-tag.h>
 
 #include "htrace_cpu_detail_parser.h"
-#include "htrace_event_parser.h"
 #include "irq_filter.h"
 #include "trace_plugin_result.pb.h"
 #include "trace_plugin_result.pbreader.h"