diff --git a/ide/build.js b/ide/build.js
index 6d2f658759a210dec8d2b227ba7bafc75848e6eb..4ead05d71f42e8573b2ebd108268626ca284d5df 100644
--- a/ide/build.js
+++ b/ide/build.js
@@ -15,7 +15,7 @@
 
 const path = require('path');
 const fs = require('fs');
-const child_process = require('child_process');
+const childProcess = require('child_process');
 const os = require('os');
 const log4js = require('log4js');
 
@@ -66,15 +66,15 @@ function cpFile(from, to) {
 }
 
 function checkEnvironment() {
-  let goVersion = child_process.execSync('go version', {
+  let goVersion = childProcess.execSync('go version', {
     encoding: 'utf-8',
   });
   log.info('go is', goVersion);
-  let nodeVersion = child_process.execSync('node -v', {
+  let nodeVersion = childProcess.execSync('node -v', {
     encoding: 'utf-8',
   });
   log.info('node version is', nodeVersion);
-  let tscVersion = child_process.execSync('tsc -v', {
+  let tscVersion = childProcess.execSync('tsc -v', {
     encoding: 'utf-8',
   });
   log.info('tsc version is', tscVersion);
@@ -120,7 +120,7 @@ function main() {
   // run tsc compile
   log.info('start compiling typeScript code');
   let rootPath = path.join(__dirname, '/');
-  child_process.execSync('tsc -p ' + rootPath, {
+  childProcess.execSync('tsc -p ' + rootPath, {
     encoding: 'utf-8',
   });
   log.info('compiling typeScript code success');
@@ -178,15 +178,11 @@ function main() {
     let serverSrc = path.normalize(path.join(__dirname, '/server/main.go'));
     let rs;
     if (os.type() === 'Windows_NT') {
-      rs = child_process.spawnSync('go', ['build', '-o', outPath, serverSrc], {
-        encoding: 'utf-8',
-      });
-    } else if (os.type() == 'Darwin') {
-      rs = child_process.spawnSync('go', ['build', '-o', outPath + '/main', serverSrc], {
+      rs = childProcess.spawnSync('go', ['build', '-o', outPath, serverSrc], {
         encoding: 'utf-8',
       });
     } else {
-      rs = child_process.spawnSync('go', ['build', '-o', outPath + '/main', serverSrc], {
+      rs = childProcess.spawnSync('go', ['build', '-o', outPath + '/main', serverSrc], {
         encoding: 'utf-8',
       });
     }
diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts
index 9b7464b54066482035430bfda1f02f36da70200a..3f8dc9a41cd2484a0f835dfb8faaf235c630f8fe 100644
--- a/ide/src/base-ui/chart/column/LitChartColumn.ts
+++ b/ide/src/base-ui/chart/column/LitChartColumn.ts
@@ -16,6 +16,7 @@
 import { BaseElement, element } from '../../BaseElement.js';
 import { LitChartColumnConfig } from './LitChartColumnConfig.js';
 import { resizeCanvas } from '../helper.js';
+import { getProbablyTime } from '../../../trace/database/logic-worker/ProcedureLogicWorkerCommon.js';
 
 class Pillar {
   obj?: any;
@@ -51,62 +52,54 @@ interface RLine {
 
 @element('lit-chart-column')
 export class LitChartColumn extends BaseElement {
-  private tipEL: HTMLDivElement | null | undefined;
-  canvas: HTMLCanvasElement | undefined | null;
-  ctx: CanvasRenderingContext2D | undefined | null;
-  cfg: LitChartColumnConfig | null | undefined;
+  private litChartColumnTipEL: HTMLDivElement | null | undefined;
+  litChartColumnCanvas: HTMLCanvasElement | undefined | null;
+  litChartColumnCtx: CanvasRenderingContext2D | undefined | null;
+  litChartColumnCfg: LitChartColumnConfig | null | undefined;
   offset?: { x: number | undefined; y: number | undefined };
   data: Pillar[] = [];
   rowLines: RLine[] = [];
 
   connectedCallback() {
     super.connectedCallback();
-    this.tipEL = this.shadowRoot!.querySelector<HTMLDivElement>('#tip');
-    this.canvas = this.shadowRoot!.querySelector<HTMLCanvasElement>('#canvas');
-    this.ctx = this.canvas!.getContext('2d', { alpha: true });
-    resizeCanvas(this.canvas!);
-    this.offset = { x: 40, y: 20 };
-    this.canvas!.onmouseout = (e) => {
+    this.litChartColumnTipEL = this.shadowRoot!.querySelector<HTMLDivElement>('#tip');
+    this.litChartColumnCanvas = this.shadowRoot!.querySelector<HTMLCanvasElement>('#canvas');
+    this.litChartColumnCtx = this.litChartColumnCanvas!.getContext('2d', { alpha: true });
+    resizeCanvas(this.litChartColumnCanvas!);
+    this.offset = { x: 60, y: 20 };
+    this.litChartColumnCanvas!.onmouseout = (e) => {
       this.hideTip();
       this.data.forEach((it) => (it.hover = false));
       this.render();
     };
-    this.canvas!.onmousemove = (ev) => {
+    this.litChartColumnCanvas!.onmousemove = (ev) => {
       let rect = this.getBoundingClientRect();
       let x = ev.pageX - rect.left;
       let y = ev.pageY - rect.top;
       this.data.forEach((it) => {
         if (contains(it.bgFrame!, x, y)) {
           it.hover = true;
-          this.cfg?.hoverHandler?.(it.obj.no);
+          this.litChartColumnCfg?.hoverHandler?.(it.obj.no);
         } else {
           it.hover = false;
         }
       });
       let pillars = this.data.filter((it) => it.hover);
-      if (this.cfg?.seriesField) {
+      if (this.litChartColumnCfg?.seriesField) {
         if (pillars.length > 0) {
-          let title = `<label>${this.cfg.xField}: ${pillars[0].xLabel}</label>`;
-          let msg = pillars.map((it) => `<label>${it.type}: ${it.yLabel}</label>`).join('');
-          let sum = `<label>Total: ${pillars
-            .map((it) => it.obj[this.cfg?.yField!])
+          let titleEl = `<label>${this.litChartColumnCfg.xField}: ${pillars[0].xLabel}</label>`;
+          let messageEl = pillars.map((it) => `<label>${it.type}: ${it.yLabel}</label>`).join('');
+          let sumEl = `<label>Total: ${pillars
+            .map((item) => item.obj[this.litChartColumnCfg?.yField!])
             .reduce((pre, current) => pre + current, 0)}</label>`;
-          let innerHtml = `<div class="tip-content">${title}${msg}${sum}</div>`;
-          if (x >= this.clientWidth - this.tipEL!.clientWidth) {
-            this.showTip(x - this.tipEL!.clientWidth - 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
-          } else {
-            this.showTip(x + 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
-          }
+          let innerHtml = `<div class="tip-content">${titleEl}${messageEl}${sumEl}</div>`;
+          this.tipTypeShow(x, y, pillars, innerHtml);
         }
       } else {
         if (pillars.length > 0) {
           let title = `<label>${pillars[0].xLabel}:${pillars[0].yLabel}</label>`;
           let innerHtml = `<div class="tip-content">${title}</div>`;
-          if (x >= this.clientWidth - this.tipEL!.clientWidth) {
-            this.showTip(x - this.tipEL!.clientWidth - 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
-          } else {
-            this.showTip(x + 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
-          }
+          this.tipTypeShow(x, y, pillars, innerHtml);
         }
       }
 
@@ -117,6 +110,14 @@ export class LitChartColumn extends BaseElement {
     this.render();
   }
 
+  private tipTypeShow(x: number, y: number, pillars: Pillar[], innerHtml: string) {
+    if (x >= this.clientWidth - this.litChartColumnTipEL!.clientWidth) {
+      this.showTip(x - this.litChartColumnTipEL!.clientWidth - 10, y - 20, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml);
+    } else {
+      this.showTip(x + 10, y - 20, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml);
+    }
+  }
+
   showHoverColumn(index: number) {
     this.data.forEach((it) => {
       if (it.obj.no === index) {
@@ -126,23 +127,23 @@ export class LitChartColumn extends BaseElement {
       }
     });
     let pillars = this.data.filter((it) => it.hover);
-    if (this.cfg?.seriesField) {
+    if (this.litChartColumnCfg?.seriesField) {
       if (pillars.length > 0) {
         let hoverData = pillars[0];
-        let title = `<label>${this.cfg.xField}: ${pillars[0].xLabel}</label>`;
+        let title = `<label>${this.litChartColumnCfg.xField}: ${pillars[0].xLabel}</label>`;
         let msg = pillars.map((it) => `<label>${it.type}: ${it.yLabel}</label>`).join('');
         let sum = `<label>Total: ${pillars
-          .map((it) => it.obj[this.cfg?.yField!])
+          .map((it) => it.obj[this.litChartColumnCfg?.yField!])
           .reduce((pre, current) => pre + current, 0)}</label>`;
         let innerHtml = `<div class="tip-content">${title}${msg}${sum}</div>`;
-        this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+        this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml);
       }
     } else {
       if (pillars.length > 0) {
         let hoverData = pillars[0];
         let title = `<label>${pillars[0].xLabel}:${pillars[0].yLabel}</label>`;
         let innerHtml = `<div class="tip-content">${title}</div>`;
-        this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+        this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.litChartColumnCfg!.tip ? this.litChartColumnCfg!.tip(pillars) : innerHtml);
       }
     }
 
@@ -154,153 +155,153 @@ export class LitChartColumn extends BaseElement {
   initElements(): void {
     new ResizeObserver((entries, observer) => {
       entries.forEach((it) => {
-        resizeCanvas(this.canvas!);
+        resizeCanvas(this.litChartColumnCanvas!);
         this.measure();
         this.render(false);
       });
     }).observe(this);
   }
 
-  set config(cfg: LitChartColumnConfig | null | undefined) {
-    if (!cfg) return;
-    this.cfg = cfg;
+  set config(litChartColumnConfig: LitChartColumnConfig | null | undefined) {
+    if (!litChartColumnConfig) return;
+    this.litChartColumnCfg = litChartColumnConfig;
     this.measure();
     this.render();
   }
 
-  set dataSource(arr: any[]) {
-    if (this.cfg) {
-      this.cfg.data = arr;
+  set dataSource(litChartColumnArr: any[]) {
+    if (this.litChartColumnCfg) {
+      this.litChartColumnCfg.data = litChartColumnArr;
       this.measure();
       this.render();
     }
   }
 
   get dataSource() {
-    return this.cfg?.data || [];
+    return this.litChartColumnCfg?.data || [];
   }
 
   measure() {
-    if (!this.cfg) return;
+    if (!this.litChartColumnCfg) return;
     this.data = [];
     this.rowLines = [];
-    if (!this.cfg.seriesField) {
-      let maxValue = Math.max(...this.cfg.data.map((it) => it[this.cfg!.yField]));
+    if (!this.litChartColumnCfg.seriesField) {
+      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.cfg.data.length;
+      let partWidth = (this.clientWidth - this.offset!.x!) / this.litChartColumnCfg.data.length;
       let partHeight = this.clientHeight - this.offset!.y!;
       let gap = partHeight / 5;
       let valGap = maxValue / 5;
       for (let i = 0; i <= 5; i++) {
         this.rowLines.push({
           y: gap * i,
-          label: `${maxValue - valGap * i} `,
+          label: `${getProbablyTime(maxValue - valGap * i)}`,
         });
       }
-      this.cfg?.data
-        .sort((a, b) => b[this.cfg!.yField] - a[this.cfg!.yField])
-        .forEach((it, i, array) => {
+      this.litChartColumnCfg?.data
+        .sort((a, b) => b[this.litChartColumnCfg!.yField] - a[this.litChartColumnCfg!.yField])
+        .forEach((litChartColumnItem, litChartColumnIndex, array) => {
           this.data.push({
-            color: this.cfg!.color(it),
-            obj: it,
+            color: this.litChartColumnCfg!.color(litChartColumnItem),
+            obj: litChartColumnItem,
             root: true,
-            xLabel: it[this.cfg!.xField],
-            yLabel: it[this.cfg!.yField],
+            xLabel: litChartColumnItem[this.litChartColumnCfg!.xField],
+            yLabel: litChartColumnItem[this.litChartColumnCfg!.yField],
             bgFrame: {
-              x: this.offset!.x! + partWidth * i,
+              x: this.offset!.x! + partWidth * litChartColumnIndex,
               y: 0,
               w: partWidth,
               h: partHeight,
             },
-            centerX: this.offset!.x! + partWidth * i + partWidth / 2,
+            centerX: this.offset!.x! + partWidth * litChartColumnIndex + partWidth / 2,
             centerY:
               partHeight -
-              (it[this.cfg!.yField] * partHeight) / maxValue +
-              (it[this.cfg!.yField] * partHeight) / maxValue / 2,
+              (litChartColumnItem[this.litChartColumnCfg!.yField] * partHeight) / maxValue +
+              (litChartColumnItem[this.litChartColumnCfg!.yField] * partHeight) / maxValue / 2,
             frame: {
-              x: this.offset!.x! + partWidth * i + partWidth / 6,
-              y: partHeight - (it[this.cfg!.yField] * partHeight) / maxValue,
+              x: this.offset!.x! + partWidth * litChartColumnIndex + partWidth / 6,
+              y: partHeight - (litChartColumnItem[this.litChartColumnCfg!.yField] * partHeight) / maxValue,
               w: partWidth - partWidth / 3,
-              h: (it[this.cfg!.yField] * partHeight) / maxValue,
+              h: (litChartColumnItem[this.litChartColumnCfg!.yField] * partHeight) / maxValue,
             },
             height: 0,
-            heightStep: Math.ceil((it[this.cfg!.yField] * partHeight) / maxValue / 60),
+            heightStep: Math.ceil((litChartColumnItem[this.litChartColumnCfg!.yField] * partHeight) / maxValue / 60),
             process: true,
           });
         });
     } else {
-      let reduceGroup = this.cfg.data.reduce((pre, current, index, arr) => {
-        (pre[current[this.cfg!.xField]] = pre[current[this.cfg!.xField]] || []).push(current);
+      let reduceGroup = this.litChartColumnCfg.data.reduce((pre, current, index, arr) => {
+        (pre[current[this.litChartColumnCfg!.xField]] = pre[current[this.litChartColumnCfg!.xField]] || []).push(current);
         return pre;
       }, {});
       let sums = Reflect.ownKeys(reduceGroup).map((k) =>
-        (reduceGroup[k] as any[]).reduce((pre, current) => pre + current[this.cfg!.yField], 0)
+        (reduceGroup[k] as any[]).reduce((pre, current) => pre + current[this.litChartColumnCfg!.yField], 0)
       );
       let maxValue = Math.ceil(Math.max(...sums) * 0.1) * 10;
       let partWidth = (this.clientWidth - this.offset!.x!) / Reflect.ownKeys(reduceGroup).length;
       let partHeight = this.clientHeight - this.offset!.y!;
       let gap = partHeight / 5;
       let valGap = maxValue / 5;
-      for (let i = 0; i <= 5; i++) {
+      for (let index = 0; index <= 5; index++) {
         this.rowLines.push({
-          y: gap * i,
-          label: `${maxValue - valGap * i} `,
+          y: gap * index,
+          label: `${getProbablyTime(maxValue - valGap * index)} `,
         });
       }
       Reflect.ownKeys(reduceGroup)
         .sort(
           (b, a) =>
-            (reduceGroup[a] as any[]).reduce((pre, cur) => pre + (cur[this.cfg!.yField] as number), 0) -
-            (reduceGroup[b] as any[]).reduce((pre, cur) => pre + (cur[this.cfg!.yField] as number), 0)
+            (reduceGroup[a] as any[]).reduce((pre, cur) => pre + (cur[this.litChartColumnCfg!.yField] as number), 0) -
+            (reduceGroup[b] as any[]).reduce((pre, cur) => pre + (cur[this.litChartColumnCfg!.yField] as number), 0)
         )
-        .forEach((key, i) => {
-          let elements = reduceGroup[key];
+        .forEach((reduceGroupKey, reduceGroupIndex) => {
+          let elements = reduceGroup[reduceGroupKey];
           let initH = 0;
-          elements.forEach((it: any, y: number) => {
+          elements.forEach((itemEl: any, y: number) => {
             this.data.push({
-              color: this.cfg!.color(it),
-              obj: it,
+              color: this.litChartColumnCfg!.color(itemEl),
+              obj: itemEl,
               root: y == 0,
-              type: it[this.cfg!.seriesField],
-              xLabel: it[this.cfg!.xField],
-              yLabel: it[this.cfg!.yField],
+              type: itemEl[this.litChartColumnCfg!.seriesField],
+              xLabel: itemEl[this.litChartColumnCfg!.xField],
+              yLabel: itemEl[this.litChartColumnCfg!.yField],
               bgFrame: {
-                x: this.offset!.x! + partWidth * i,
+                x: this.offset!.x! + partWidth * reduceGroupIndex,
                 y: 0,
                 w: partWidth,
                 h: partHeight,
               },
-              centerX: this.offset!.x! + partWidth * i + partWidth / 2,
+              centerX: this.offset!.x! + partWidth * reduceGroupIndex + partWidth / 2,
               centerY:
                 partHeight -
                 initH -
-                (it[this.cfg!.yField] * partHeight) / maxValue +
-                (it[this.cfg!.yField] * partHeight) / maxValue / 2,
+                (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue +
+                (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue / 2,
               frame: {
-                x: this.offset!.x! + partWidth * i + partWidth / 6,
-                y: partHeight - (it[this.cfg!.yField] * partHeight) / maxValue - initH,
+                x: this.offset!.x! + partWidth * reduceGroupIndex + partWidth / 6,
+                y: partHeight - (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue - initH,
                 w: partWidth - partWidth / 3,
-                h: (it[this.cfg!.yField] * partHeight) / maxValue,
+                h: (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue,
               },
               height: 0,
-              heightStep: Math.ceil((it[this.cfg!.yField] * partHeight) / maxValue / 60),
+              heightStep: Math.ceil((itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue / 60),
               process: true,
             });
-            initH += (it[this.cfg!.yField] * partHeight) / maxValue;
+            initH += (itemEl[this.litChartColumnCfg!.yField] * partHeight) / maxValue;
           });
         });
     }
   }
 
   get config(): LitChartColumnConfig | null | undefined {
-    return this.cfg;
+    return this.litChartColumnCfg;
   }
 
   render(ease: boolean = true) {
-    if (!this.canvas || !this.cfg) return;
-    this.ctx!.clearRect(0, 0, this.clientWidth, this.clientHeight);
-    this.drawLine(this.ctx!);
-    this.data?.forEach((it) => this.drawColumn(this.ctx!, it, ease));
+    if (!this.litChartColumnCanvas || !this.litChartColumnCfg) return;
+    this.litChartColumnCtx!.clearRect(0, 0, this.clientWidth, this.clientHeight);
+    this.drawLine(this.litChartColumnCtx!);
+    this.data?.forEach((it) => this.drawColumn(this.litChartColumnCtx!, it, ease));
     if (ease) {
       if (this.data.filter((it) => it.process).length > 0) {
         requestAnimationFrame(() => this.render(ease));
@@ -363,11 +364,11 @@ export class LitChartColumn extends BaseElement {
       c.fillText(it.xLabel!, it.centerX! - xMetrics.width / 2, it.frame!.y + it.frame!.h + 15);
     }
     c.fillStyle = '#fff';
-    if (this.cfg?.label) {
+    if (this.litChartColumnCfg?.label) {
       if (yMetricsH < it.frame!.h) {        
         c.fillText(
 		  // @ts-ignore
-          this.cfg!.label!.content ? this.cfg!.label!.content(it.obj) : it.yLabel!,
+          this.litChartColumnCfg!.label!.content ? this.litChartColumnCfg!.label!.content(it.obj) : it.yLabel!,
           it.centerX! - yMetrics.width / 2,
           it.centerY! + (it.frame!.h - it.height!) / 2
         );
@@ -379,27 +380,27 @@ export class LitChartColumn extends BaseElement {
 
   beginPath(stroke: boolean, fill: boolean) {
     return (fn: (c: CanvasRenderingContext2D) => void) => {
-      this.ctx!.beginPath();
-      fn?.(this.ctx!);
+      this.litChartColumnCtx!.beginPath();
+      fn?.(this.litChartColumnCtx!);
       if (stroke) {
-        this.ctx!.stroke();
+        this.litChartColumnCtx!.stroke();
       }
       if (fill) {
-        this.ctx!.fill();
+        this.litChartColumnCtx!.fill();
       }
-      this.ctx!.closePath();
+      this.litChartColumnCtx!.closePath();
     };
   }
 
   showTip(x: number, y: number, msg: string) {
-    this.tipEL!.style.display = 'flex';
-    this.tipEL!.style.top = `${y}px`;
-    this.tipEL!.style.left = `${x}px`;
-    this.tipEL!.innerHTML = msg;
+    this.litChartColumnTipEL!.style.display = 'flex';
+    this.litChartColumnTipEL!.style.top = `${y}px`;
+    this.litChartColumnTipEL!.style.left = `${x}px`;
+    this.litChartColumnTipEL!.innerHTML = msg;
   }
 
   hideTip() {
-    this.tipEL!.style.display = 'none';
+    this.litChartColumnTipEL!.style.display = 'none';
   }
 
   initHtml(): string {
diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts
index 6529ca14ed3b879fcc6dc0d38b2bffecc60b42c0..b441e8aafca9a71b0ec3def815e4dd7ae4f48c22 100644
--- a/ide/src/base-ui/chart/pagenation/PageNation.ts
+++ b/ide/src/base-ui/chart/pagenation/PageNation.ts
@@ -243,17 +243,17 @@ export class PageNation {
       return;
     }
     // 当前页面 大于5页 小于倒数第5页
-    for (let i = 0; i < 2; i++) {
-      const li = origin.cloneNode(true);
+    for (let index = 0; index < 2; index++) {
+      const cloneLi = origin.cloneNode(true);
       // @ts-ignore
-      li.innerText = i + 1;
-      if (i + 1 === current) {
-        this.setElementStyles(li, {
+      cloneLi.innerText = index + 1;
+      if (index + 1 === current) {
+        this.setElementStyles(cloneLi, {
           backgroundColor: PageNation.BtnBackColor,
           color: PageNation.BtnColor,
         });
       }
-      this.list.appendChild(li);
+      this.list.appendChild(cloneLi);
     }
     var span = document.createElement('span');
     span.innerText = '...';
@@ -290,11 +290,11 @@ export class PageNation {
   bindLeftList(current: number, totalpage: number, origin: HTMLElement): boolean {
     if (current < 5) {
       // 左边5个 中间 ... 右边2个
-      for (let i = 0; i < 5; i++) {
+      for (let index = 0; index < 5; index++) {
         const li = origin.cloneNode(true);
         // @ts-ignore
-        li.innerText = i + 1;
-        if (i + 1 === current) {
+        li.innerText = index + 1;
+        if (index + 1 === current) {
           this.setElementStyles(li, {
             backgroundColor: PageNation.BtnBackColor,
             color: PageNation.BtnColor,
@@ -305,11 +305,11 @@ export class PageNation {
       var span = document.createElement('span');
       span.innerText = '...';
       this.list.appendChild(span);
-      for (let i = totalpage - 2; i < totalpage; i++) {
+      for (let index = totalpage - 2; index < totalpage; index++) {
         const li = origin.cloneNode(true);
         // @ts-ignore
-        li.innerText = i + 1;
-        if (i + 1 === current) {
+        li.innerText = index + 1;
+        if (index + 1 === current) {
           this.setElementStyles(li, {
             backgroundColor: PageNation.BtnBackColor,
             color: PageNation.BtnColor,
@@ -337,28 +337,28 @@ export class PageNation {
       span.innerText = '...';
       this.list.appendChild(span);
 
-      for (let i = totalpage - 2; i < totalpage; i++) {
-        const li = origin.cloneNode(true);
+      for (let index = totalpage - 2; index < totalpage; index++) {
+        const liElement = origin.cloneNode(true);
         // @ts-ignore
-        li.innerText = i + 1;
-        if (i + 1 === current) {
-          this.setElementStyles(li, {
+        liElement.innerText = index + 1;
+        if (index + 1 === current) {
+          this.setElementStyles(liElement, {
             backgroundColor: PageNation.BtnBackColor,
             color: PageNation.BtnColor,
           });
         }
-        this.list.appendChild(li);
+        this.list.appendChild(liElement);
       }
       return true;
     }
     // 当前页面 大于倒数第5页
     if (current > totalpage - 4) {
       // 左边5个 中间 ... 右边2个
-      for (let i = 0; i < 2; i++) {
+      for (let index = 0; index < 2; index++) {
         const li = origin.cloneNode(true);
         // @ts-ignore
-        li.innerText = i + 1;
-        if (i + 1 === current) {
+        li.innerText = index + 1;
+        if (index + 1 === current) {
           this.setElementStyles(li, {
             backgroundColor: PageNation.BtnBackColor,
             color: PageNation.BtnColor,
@@ -414,37 +414,6 @@ export class PageNation {
       }
       return true;
     }
-    if (current == totalpage - 4) {
-      // 左边5个 中间 ... 右边2个
-      for (let i = 0; i < 2; i++) {
-        const li = origin.cloneNode(true);
-        // @ts-ignore
-        li.innerText = i + 1;
-        if (i + 1 === current) {
-          this.setElementStyles(li, {
-            backgroundColor: PageNation.BtnBackColor,
-            color: PageNation.BtnColor,
-          });
-        }
-        this.list.appendChild(li);
-      }
-      var span = document.createElement('span');
-      span.innerText = '...';
-      this.list.appendChild(span);
-      for (let i = totalpage - 7; i < totalpage; i++) {
-        const li = origin.cloneNode(true);
-        // @ts-ignore
-        li.innerText = i + 1;
-        if (i + 1 === current) {
-          this.setElementStyles(li, {
-            backgroundColor: PageNation.BtnBackColor,
-            color: PageNation.BtnColor,
-          });
-        }
-        this.list.appendChild(li);
-      }
-      return true;
-    }
     return false;
   }
 
diff --git a/ide/src/base-ui/chart/pagenation/pagination-box.ts b/ide/src/base-ui/chart/pagenation/pagination-box.ts
index bf57bd6b9e0c2bedaafebbdb2811550c193bec8a..eca0285ea2102a2165adb6557dae983dde7a79be 100644
--- a/ide/src/base-ui/chart/pagenation/pagination-box.ts
+++ b/ide/src/base-ui/chart/pagenation/pagination-box.ts
@@ -17,7 +17,7 @@ import { BaseElement, element } from '../../BaseElement.js';
 
 @element('pagination-box')
 export class PaginationBox extends BaseElement {
-  private page: any;
+  private paginationBoxPage: any;
 
   static get observedAttributes() {
     return ['text', 'height', 'width'];
@@ -43,9 +43,9 @@ export class PaginationBox extends BaseElement {
     return `
         <style>
         :host{ 
-            display: block;
             width: 100%;
             height: 100%;
+            display: block;
             position: relative;
             background: background: var(--dark-background3,#FFFFFF);
         }
@@ -55,7 +55,7 @@ export class PaginationBox extends BaseElement {
   }
 
   initElements(): void {
-    this.page = this.shadowRoot?.querySelector('#box');
+    this.paginationBoxPage = this.shadowRoot?.querySelector('#box');
   }
 
   attributeChangedCallback(name: string, oldValue: string, value: string) {
diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts
index 360106d1a9d96c99c04f8670fc48ff7bdd155984..0a20cc68e0138b7802b94f53ef257b6b061d704d 100644
--- a/ide/src/base-ui/chart/pie/LitChartPie.ts
+++ b/ide/src/base-ui/chart/pie/LitChartPie.ts
@@ -48,29 +48,29 @@ class Sector {
 @element('lit-chart-pie')
 export class LitChartPie extends BaseElement {
   private eleShape: Element | null | undefined;
-  private tipEL: HTMLDivElement | null | undefined;
+  private pieTipEL: HTMLDivElement | null | undefined;
   private labelsEL: HTMLDivElement | null | undefined;
   canvas: HTMLCanvasElement | undefined | null;
   ctx: CanvasRenderingContext2D | undefined | null;
-  cfg: LitChartPieConfig | null | undefined;
+  litChartPieConfig: LitChartPieConfig | null | undefined;
   centerX: number | null | undefined;
   centerY: number | null | undefined;
   data: Sector[] = [];
   radius: number | undefined;
   private textRects: Rectangle[] = [];
 
-  set config(cfg: LitChartPieConfig | null | undefined) {
-    if (!cfg) return;
-    this.cfg = cfg;
+  set config(litChartPieCfg: LitChartPieConfig | null | undefined) {
+    if (!litChartPieCfg) return;
+    this.litChartPieConfig = litChartPieCfg;
     (this.shadowRoot!.querySelector('#root') as HTMLDivElement).className =
-      cfg && cfg.data.length > 0 ? 'bg_hasdata' : 'bg_nodata';
+      litChartPieCfg && litChartPieCfg.data.length > 0 ? 'bg_hasdata' : 'bg_nodata';
     this.measure();
     this.render();
   }
 
-  set dataSource(arr: any[]) {
-    if (this.cfg) {
-      this.cfg.data = arr;
+  set dataSource(litChartPieArr: any[]) {
+    if (this.litChartPieConfig) {
+      this.litChartPieConfig.data = litChartPieArr;
       this.measure();
       this.render();
     }
@@ -88,7 +88,7 @@ export class LitChartPie extends BaseElement {
         this.showTip(
           this.centerX || 0,
           this.centerY || 0,
-          this.cfg!.tip ? this.cfg!.tip(it) : `${it.key}: ${it.value}`
+          this.litChartPieConfig!.tip ? this.litChartPieConfig!.tip(it) : `${it.key}: ${it.value}`
         );
       }
     });
@@ -99,42 +99,42 @@ export class LitChartPie extends BaseElement {
   }
 
   measure() {
-    if (!this.cfg) return;
+    if (!this.litChartPieConfig) return;
     this.data = [];
     this.radius = (Math.min(this.clientHeight, this.clientWidth) * 0.65) / 2 - 10;
-    let cfg = this.cfg!;
+    let pieCfg = this.litChartPieConfig!;
     let startAngle = 0;
     let startDegree = 0;
     let full = Math.PI / 180; //每度
     let fullDegree = 0; //每度
-    let sum = this.cfg.data.reduce((previousValue, currentValue) => currentValue[cfg.angleField] + previousValue, 0);
+    let sum = this.litChartPieConfig.data.reduce((previousValue, currentValue) => currentValue[pieCfg.angleField] + previousValue, 0);
     this.labelsEL!.textContent = '';
     let labelArray: string[] = [];
-    this.cfg.data.forEach((it, index) => {
+    this.litChartPieConfig.data.forEach((pieItem, index) => {
       let item: Sector = {
         id: `id-${Utils.uuid()}`,
-        color: this.cfg!.label.color ? this.cfg!.label.color(it) : pieChartColors[index % pieChartColors.length],
-        obj: it,
-        key: it[cfg.colorField],
-        value: it[cfg.angleField],
+        color: this.litChartPieConfig!.label.color ? this.litChartPieConfig!.label.color(pieItem) : pieChartColors[index % pieChartColors.length],
+        obj: pieItem,
+        key: pieItem[pieCfg.colorField],
+        value: pieItem[pieCfg.angleField],
         startAngle: startAngle,
-        endAngle: startAngle + full * ((it[cfg.angleField] / sum) * 360),
+        endAngle: startAngle + full * ((pieItem[pieCfg.angleField] / sum) * 360),
         startDegree: startDegree,
-        endDegree: startDegree + fullDegree + (it[cfg.angleField] / sum) * 360,
+        endDegree: startDegree + fullDegree + (pieItem[pieCfg.angleField] / sum) * 360,
         ease: {
           initVal: 0,
-          step: (startAngle + full * ((it[cfg.angleField] / sum) * 360)) / startDegree,
+          step: (startAngle + full * ((pieItem[pieCfg.angleField] / sum) * 360)) / startDegree,
           process: true,
         },
       };
       this.data.push(item);
-      startAngle += full * ((it[cfg.angleField] / sum) * 360);
-      startDegree += fullDegree + (it[cfg.angleField] / sum) * 360;
+      startAngle += full * ((pieItem[pieCfg.angleField] / sum) * 360);
+      startDegree += fullDegree + (pieItem[pieCfg.angleField] / sum) * 360;
       labelArray.push(`<label class="label">
                     <div style="display: flex;flex-direction: row;margin-left: 5px;align-items: center;overflow: hidden;text-overflow: ellipsis" 
                         id="${item.id}">
                         <div class="tag" style="background-color: ${item.color}"></div>
-                        <span class="name">${item.obj[cfg.colorField]}</span>
+                        <span class="name">${item.obj[pieCfg.colorField]}</span>
                     </div>
                 </label>`);
     });
@@ -142,13 +142,13 @@ export class LitChartPie extends BaseElement {
   }
 
   get config(): LitChartPieConfig | null | undefined {
-    return this.cfg;
+    return this.litChartPieConfig;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.eleShape = this.shadowRoot!.querySelector<Element>('#shape');
-    this.tipEL = this.shadowRoot!.querySelector<HTMLDivElement>('#tip');
+    this.pieTipEL = this.shadowRoot!.querySelector<HTMLDivElement>('#tip');
     this.labelsEL = this.shadowRoot!.querySelector<HTMLDivElement>('#labels');
     this.canvas = this.shadowRoot!.querySelector<HTMLCanvasElement>('#canvas');
     this.ctx = this.canvas!.getContext('2d', { alpha: true });
@@ -189,12 +189,12 @@ export class LitChartPie extends BaseElement {
           it.hover = degree >= it.startDegree! && degree <= it.endDegree!;
           this.updateHoverItemStatus(it);
           it.obj.isHover = it.hover;
-          if (it.hover && this.cfg) {
-            this.cfg.hoverHandler?.(it.obj);
+          if (it.hover && this.litChartPieConfig) {
+            this.litChartPieConfig.hoverHandler?.(it.obj);
             this.showTip(
               ev.pageX - rect.left + 10,
               ev.pageY - this.offsetTop - 10,
-              this.cfg.tip ? this.cfg!.tip(it) : `${it.key}: ${it.value}`
+              this.litChartPieConfig.tip ? this.litChartPieConfig!.tip(it) : `${it.key}: ${it.value}`
             );
           }
         });
@@ -205,7 +205,7 @@ export class LitChartPie extends BaseElement {
           it.obj.isHover = false;
           this.updateHoverItemStatus(it);
         });
-        this.cfg?.hoverHandler?.(undefined);
+        this.litChartPieConfig?.hoverHandler?.(undefined);
       }
       this.render();
     };
@@ -247,7 +247,7 @@ export class LitChartPie extends BaseElement {
   }
 
   render(ease: boolean = true) {
-    if (!this.canvas || !this.cfg) return;
+    if (!this.canvas || !this.litChartPieConfig) return;
     if (this.radius! <= 0) return;
     this.ctx?.clearRect(0 - this.centerX!, 0 - this.centerY!, this.clientWidth, this.clientHeight);
     this.data.forEach((it) => {
@@ -294,16 +294,16 @@ export class LitChartPie extends BaseElement {
       });
 
     this.textRects = [];
-    if (this.cfg.showChartLine) {
-      this.data.forEach((it) => {
-        let text = `${it.value}`;
+    if (this.litChartPieConfig.showChartLine) {
+      this.data.forEach((dataItem) => {
+        let text = `${dataItem.value}`;
         let metrics = this.ctx!.measureText(text);
         let textWidth = metrics.width;
         let textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
         this.ctx!.beginPath();
-        this.ctx!.strokeStyle = it.color!;
+        this.ctx!.strokeStyle = dataItem.color!;
         this.ctx!.fillStyle = '#595959';
-        let deg = it.startDegree! + (it.endDegree! - it.startDegree!) / 2;
+        let deg = dataItem.startDegree! + (dataItem.endDegree! - dataItem.startDegree!) / 2;
         let dep = 25;
         let x1 = 0 + this.radius! * Math.cos((deg * Math.PI) / 180);
         let y1 = 0 + this.radius! * Math.sin((deg * Math.PI) / 180);
@@ -329,37 +329,37 @@ export class LitChartPie extends BaseElement {
     }
   }
 
-  correctRect(rect: Rectangle): Rectangle {
+  correctRect(pieRect: Rectangle): Rectangle {
     if (this.textRects.length == 0) {
-      this.textRects.push(rect);
-      return rect;
+      this.textRects.push(pieRect);
+      return pieRect;
     } else {
-      let rectangles = this.textRects.filter((it) => this.intersect(it, rect).cross);
+      let rectangles = this.textRects.filter((it) => this.intersect(it, pieRect).cross);
       if (rectangles.length == 0) {
-        this.textRects.push(rect);
-        return rect;
+        this.textRects.push(pieRect);
+        return pieRect;
       } else {
         let it = rectangles[0];
-        let inter = this.intersect(it, rect);
+        let inter = this.intersect(it, pieRect);
         if (inter.direction == 'Right') {
-          rect.x += inter.crossW;
+          pieRect.x += inter.crossW;
         } else if (inter.direction == 'Bottom') {
-          rect.y += inter.crossH;
+          pieRect.y += inter.crossH;
         } else if (inter.direction == 'Left') {
-          rect.x -= inter.crossW;
+          pieRect.x -= inter.crossW;
         } else if (inter.direction == 'Top') {
-          rect.y -= inter.crossH;
+          pieRect.y -= inter.crossH;
         } else if (inter.direction == 'Right-Top') {
-          rect.y -= inter.crossH;
+          pieRect.y -= inter.crossH;
         } else if (inter.direction == 'Right-Bottom') {
-          rect.y += inter.crossH;
+          pieRect.y += inter.crossH;
         } else if (inter.direction == 'Left-Top') {
-          rect.y -= inter.crossH;
+          pieRect.y -= inter.crossH;
         } else if (inter.direction == 'Left-Bottom') {
-          rect.y += inter.crossH;
+          pieRect.y += inter.crossH;
         }
-        this.textRects.push(rect);
-        return rect;
+        this.textRects.push(pieRect);
+        return pieRect;
       }
     }
   }
@@ -433,14 +433,14 @@ export class LitChartPie extends BaseElement {
   }
 
   showTip(x: number, y: number, msg: string) {
-    this.tipEL!.style.display = 'flex';
-    this.tipEL!.style.top = `${y}px`;
-    this.tipEL!.style.left = `${x}px`;
-    this.tipEL!.innerHTML = msg;
+    this.pieTipEL!.style.display = 'flex';
+    this.pieTipEL!.style.top = `${y}px`;
+    this.pieTipEL!.style.left = `${x}px`;
+    this.pieTipEL!.innerHTML = msg;
   }
 
   hideTip() {
-    this.tipEL!.style.display = 'none';
+    this.pieTipEL!.style.display = 'none';
   }
 
   initHtml(): string {
diff --git a/ide/src/base-ui/checkbox/LitCheckBox.ts b/ide/src/base-ui/checkbox/LitCheckBox.ts
index 2b51cbac91ad00af3aa42b2f85ac532b7fd0b00a..dcb5693a84b509be714d83ee8a82442b81b4106c 100644
--- a/ide/src/base-ui/checkbox/LitCheckBox.ts
+++ b/ide/src/base-ui/checkbox/LitCheckBox.ts
@@ -39,8 +39,8 @@ export class LitCheckBox extends BaseElement {
     return this.getAttribute('checked') !== null;
   }
 
-  set checked(value: boolean) {
-    if (value === null || !value) {
+  set checked(boxCheck: boolean) {
+    if (boxCheck === null || !boxCheck) {
       this.removeAttribute('checked');
     } else {
       this.setAttribute('checked', '');
diff --git a/ide/src/base-ui/checkbox/LitCheckGroup.ts b/ide/src/base-ui/checkbox/LitCheckGroup.ts
index 1cb09f244607567a5ce4ac18aa0078db5f9bd6c8..7587ee6e4fc13b40a36604b1086aff4c76acbeba 100644
--- a/ide/src/base-ui/checkbox/LitCheckGroup.ts
+++ b/ide/src/base-ui/checkbox/LitCheckGroup.ts
@@ -23,37 +23,36 @@ export class LitCheckGroup extends BaseElement {
   }
 
   get value(): Array<string> {
-    let values = [];
+    let checkGroupValues = [];
     for (const litCheckBoxElement of this.querySelectorAll<LitCheckBox>('lit-check-box[checked]')) {
-      values.push(litCheckBoxElement.value);
+      checkGroupValues.push(litCheckBoxElement.value);
     }
-    return values;
+    return checkGroupValues;
   }
 
   initElements(): void {}
 
+  connectedCallback() {}
+
   initHtml(): string {
-    return `
-        <style>   
+    return `<style>   
         :host {
             display: -webkit-flex; 
             display: flex;
             flex-direction: column;
         }
-        :host([direction]) {
-            flex-direction: ${this.direction};
-        }
         :host(:not([direction])) {
             flex-direction: column;
         }
-        
-        :host([layout="compact"]) {
-            gap:5px;
+        :host([direction]) {
+            flex-direction: ${this.direction};
         }
         :host([layout="dispersion"]) {
            gap:10px;
         }
-        
+        :host([layout="compact"]) {
+            gap:5px;
+        }
         </style>
         <slot class="check-group"></slot>`;
   }
diff --git a/ide/src/base-ui/icon/LitIcon.ts b/ide/src/base-ui/icon/LitIcon.ts
index c93b26f8ac6b85474282f571ba11681686ea2a8b..af2d22fb006537c6c27275399bc8c7e36e2ba41e 100644
--- a/ide/src/base-ui/icon/LitIcon.ts
+++ b/ide/src/base-ui/icon/LitIcon.ts
@@ -62,25 +62,24 @@ export class LitIcon extends BaseElement {
     return `
             <style>
                 :host{
-                    font-size: inherit;
                     display: inline-block;
-                    /*transition: .3s;*/
+                    font-size: inherit;
                  }
-                 :host([spin]){
-                    animation: rotate 1.75s linear infinite;
+                 .icon{
+                    width: 1em;
+                    height: 1em;
+                    display: block;
+                    fill: currentColor;
+                    overflow: hidden;
+                    margin: auto;
                  }
                  @keyframes rotate {
                     to{
                         transform: rotate(360deg);
                     }         
                  }
-                 .icon{
-                    display: block;
-                    width: 1em;
-                    height: 1em;
-                    margin: auto;
-                    fill: currentColor;
-                    overflow: hidden;
+                 :host([spin]){
+                    animation: rotate 1.75s linear infinite;
                  }
             </style>
             <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 ${this.view || 1024} ${this.view || 1024}">
diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts
index e92b74a9bc060a2be1ba2f852abb53aee3328742..2cf5de8d4d42b7ebc21c1b01752f4b1a37459c30 100644
--- a/ide/src/base-ui/menu/LitMainMenu.ts
+++ b/ide/src/base-ui/menu/LitMainMenu.ts
@@ -90,73 +90,72 @@ export class LitMainMenu extends BaseElement {
     return `
         <style>
         :host{
+            width: 248px;
+            height: 100vh;
             display: flex;
             flex-direction: column;
-            width: 248px;
             background-color: ${backgroundColor};
-            height: 100vh;
         }
-        .menu-body ::-webkit-scrollbar-track
+        .menu-body ::-webkit-scrollbar-thumb
         {
+            background-color: var(--dark-background,#FFFFFF);
             border-radius:10px;
-            background-color:#F5F5F5;
+
         }
-        .menu-body ::-webkit-scrollbar-thumb
+        .menu-body ::-webkit-scrollbar-track
         {
             border-radius:10px;
-            background-color: var(--dark-background,#FFFFFF);
-
+            background-color:#F5F5F5;
+            
         }
         .header{
             display: grid;
-            background-color: var(--dark-background1);
-            border-bottom: 1px solid var(--dark-background1,#EFEFEF);
-            color: #47A7E0;
+            width: 100%;
+            height: 56px;
             font-size: 1.4rem;
             padding-left: 20px;
-            /*padding-right: 10px;*/
             gap: 0 20px;
             box-sizing: border-box;
-            width: 100%;
-            height: 56px;
             grid-template-columns: min-content 1fr min-content;
             grid-template-rows: auto;
-        }
-        .header *{
-            align-self: center;
-            user-select: none;
+            color: #47A7E0;
+            background-color: var(--dark-background1);
+            border-bottom: 1px solid var(--dark-background1,#EFEFEF);
         }
         .bottom{
             width: 100%;
             display: flex;
             justify-content: space-between;
         }
-        .color{
-            padding: 20px;
-            font-size: 0.6rem;
-            cursor: pointer;
+        .header *{
+            user-select: none;
+            align-self: center;
         }
-        
         .version{
-            color: #94979d;
-            padding: 20px 0;
-            font-size: 0.6rem;
             width: 15rem;
+            padding: 20px 0;
             text-align: center;
+            color: #94979d;
+            font-size: 0.6rem;
+        }
+        .color{
+            cursor: pointer;
+            font-size: 0.6rem;
+            padding: 20px;
         }
         *{
             box-sizing: border-box;
         }
         .menu-button{
-            height: 47px;
-            width: 48px;
             display: flex;
             align-content: center;
             justify-content: right;
             cursor: pointer;
+            height: 47px;
+            width: 48px;
         }
         </style>
-        <div name="header" class="header">
+        <div class="header" name="header">
             <img src="img/logo.png"/>
                 <div class="menu-button">
                     <lit-icon name="menu" size="20" color="var(blue,#4D4D4D)"></lit-icon>
diff --git a/ide/src/base-ui/menu/LitMainMenuGroup.ts b/ide/src/base-ui/menu/LitMainMenuGroup.ts
index 9730ecad6099a48ade211484e49639b95c545434..069c322b94c3fc21be09a113e74c15e80cb4a457 100644
--- a/ide/src/base-ui/menu/LitMainMenuGroup.ts
+++ b/ide/src/base-ui/menu/LitMainMenuGroup.ts
@@ -80,57 +80,57 @@ export class LitMainMenuGroup extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            transition: background-color .3s;
-            user-select: none;
-        }
         :host(:not([collapsed])){ 
-            display: flex;
-            flex-direction: column;
             width: 248px;
+            display: flex;
             background-color: var(--dark-background);
             cursor: pointer;
+            flex-direction: column;
+        }
+        :host{
+            user-select: none;
+            transition: background-color .3s;
         }
         :host(:not([collapsed])) ::slotted(lit-main-menu-item){
             display: flex;
         }
         :host(:not([collapsed])) .group-describe{
-            visibility: hidden;
             height: 0;
+            visibility: hidden;
+        }
+        :host([collapsed]):hover){
+            background-color: #FFFFFF;
         }
         :host([collapsed]){
+            width: 248px;
             display: flex;
             flex-direction: column;
-            width: 248px;
-            background-color: var(--dark-background);
             cursor: pointer;
-        }
-        :host([collapsed]):hover){
-            background-color: #FFFFFF;
-        }
-        :host([collapsed]) ::slotted(lit-main-menu-item){
-            display: none;
+            background-color: var(--dark-background);
         }
         :host([collapsed]) .group-describe{
-            visibility: visible;
             height: auto;
+            visibility: visible;
         }
         :host([radius]) {
             border-radius: 16px 0px 0px 16px ;
         }
+        :host([collapsed]) ::slotted(lit-main-menu-item){
+            display: none;
+        }
         .group-name{
-            font-family: Helvetica;
             font-size: 14px;
+            font-family: Helvetica;
             color: ${textColor};
-            text-align: left;
+            padding: 20px 24px 0px 24px;
             line-height: 16px;
             font-weight: 400;
-            padding: 20px 24px 0px 24px;
+            text-align: left;
         }
         .group-describe{
             color: ${textColor};
+            font-size: 0.6rem;
             padding: 4px 24px 20px 24px;
-            font-size: .6rem;
         }
        
         </style>
diff --git a/ide/src/base-ui/radiobox/LitRadioBox.ts b/ide/src/base-ui/radiobox/LitRadioBox.ts
index 8b2e0a67fd47e2d73d5077eab4e82cf68a881680..102573843f207f72096370e141ad9c162c46b247 100644
--- a/ide/src/base-ui/radiobox/LitRadioBox.ts
+++ b/ide/src/base-ui/radiobox/LitRadioBox.ts
@@ -30,8 +30,8 @@ export class LitRadioBox extends BaseElement {
     return this.getAttribute('checked') !== null;
   }
 
-  set checked(value: boolean) {
-    if (value === null || !value) {
+  set checked(radioValue: boolean) {
+    if (radioValue === null || !radioValue) {
       this.removeAttribute('checked');
     } else {
       this.setAttribute('checked', '');
diff --git a/ide/src/base-ui/radiobox/LitRadioGroup.ts b/ide/src/base-ui/radiobox/LitRadioGroup.ts
index 461d520a3ff5a6ca1fd1e44c904e0a3f8f106516..866477a947277bfecf2c87fb79f2e8d42c06bc0d 100644
--- a/ide/src/base-ui/radiobox/LitRadioGroup.ts
+++ b/ide/src/base-ui/radiobox/LitRadioGroup.ts
@@ -41,24 +41,23 @@ export class LitRadioGroup extends BaseElement {
   initHtml(): string {
     return `
         <style>   
-        :host {
-            display: -webkit-flex; 
-            display: flex;
-            flex-direction: column;
-        }
         :host([direction]) {
             flex-direction: ${this.direction};
         }
-        :host(:not([direction])) {
+        :host {
+            display: -webkit-flex; 
+            display: flex;
             flex-direction: column;
         }
-        
         :host([layout="compact"]) {
             gap:5px;
         }
         :host([layout="dispersion"]) {
            gap:10px;
         }
+        :host(:not([direction])) {
+            flex-direction: column;
+        }
         </style>
         <slot class="radio-group"></slot>`;
   }
diff --git a/ide/src/base-ui/select/LitAllocationSelect.ts b/ide/src/base-ui/select/LitAllocationSelect.ts
index 33ca36700fa96ec3cbb3b111998eae9e86aeb057..71f4b77d53403638037f717c8b2943c6fba378b9 100644
--- a/ide/src/base-ui/select/LitAllocationSelect.ts
+++ b/ide/src/base-ui/select/LitAllocationSelect.ts
@@ -17,9 +17,9 @@ import { BaseElement, element } from '../BaseElement.js';
 
 @element('lit-allocation-select')
 export class LitAllocationSelect extends BaseElement {
-  private inputElement: HTMLInputElement | null | undefined;
-  private inputContent: HTMLDivElement | undefined;
-  private options: any;
+  private selectAllocationInputEl: HTMLInputElement | null | undefined;
+  private selectAllocationInputContent: HTMLDivElement | undefined;
+  private selectAllocationOptions: any;
 
   static get observedAttributes() {
     return ['value', 'disabled', 'placeholder'];
@@ -33,27 +33,27 @@ export class LitAllocationSelect extends BaseElement {
     return this.getAttribute('placeholder') || this.defaultPlaceholder;
   }
 
-  set placeholder(value) {
-    this.setAttribute('placeholder', value);
+  set placeholder(selectAllocationValue) {
+    this.setAttribute('placeholder', selectAllocationValue);
   }
 
   get value() {
     return this.getAttribute('value') || '';
   }
 
-  set value(value: string) {
-    this.setAttribute('value', value);
+  set value(selectAllocationValue: string) {
+    this.setAttribute('value', selectAllocationValue);
   }
 
   set processData(value: Array<string>) {
-    this.options.innerHTML = '';
+    this.selectAllocationOptions.innerHTML = '';
     value.forEach((item) => {
       let option = document.createElement('div');
       option.className = 'option';
       option.innerHTML = item;
       option.style.padding = '8px 10px';
-      this.options.appendChild(option);
-      this.inputElement?.focus();
+      this.selectAllocationOptions.appendChild(option);
+      this.selectAllocationInputEl?.focus();
     });
   }
 
@@ -61,9 +61,9 @@ export class LitAllocationSelect extends BaseElement {
     return this.getAttribute('placement') || '';
   }
 
-  set placement(placement: string) {
-    if (placement) {
-      this.setAttribute('placement', placement);
+  set placement(selectAllocationValuePlacement: string) {
+    if (selectAllocationValuePlacement) {
+      this.setAttribute('placement', selectAllocationValuePlacement);
     } else {
       this.removeAttribute('placement');
     }
@@ -78,20 +78,20 @@ export class LitAllocationSelect extends BaseElement {
   }
 
   initElements(): void {
-    this.inputContent = this.shadowRoot!.querySelector('.multipleSelect') as HTMLDivElement;
+    this.selectAllocationInputContent = this.shadowRoot!.querySelector('.multipleSelect') as HTMLDivElement;
     this.addEventListener('click', () => {
-      if (this.options.style.visibility == 'visible') {
-        this.options.style.visibility = 'hidden';
-        this.options.style.opacity = '0';
+      if (this.selectAllocationOptions.style.visibility == 'visible') {
+        this.selectAllocationOptions.style.visibility = 'hidden';
+        this.selectAllocationOptions.style.opacity = '0';
       } else {
-        this.options.style.visibility = 'visible';
-        this.options.style.opacity = '1';
+        this.selectAllocationOptions.style.visibility = 'visible';
+        this.selectAllocationOptions.style.opacity = '1';
       }
-      this.inputContent!.dispatchEvent(new CustomEvent('inputClick', {}));
+      this.selectAllocationInputContent!.dispatchEvent(new CustomEvent('inputClick', {}));
     });
     this.addEventListener('focusout', (e) => {
-      this.options.style.visibility = 'hidden';
-      this.options.style.opacity = '0';
+      this.selectAllocationOptions.style.visibility = 'hidden';
+      this.selectAllocationOptions.style.opacity = '0';
     });
     this.initData();
   }
@@ -101,72 +101,66 @@ export class LitAllocationSelect extends BaseElement {
         <style>
         :host{
             display: inline-flex;
-            position: relative;
             overflow: visible;
             cursor: pointer;
+            position: relative;
             border-radius: 16px;
             outline: none;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
             user-select:none;
             width: 75%;
+            -webkit-user-select:none ;
+            -moz-user-select:none;
         }
         :host(:not([border])),
         :host([border='true']){
             border: 1px solid var(--bark-prompt,#dcdcdc);
         }
-        input{
-            border: 0;
-            outline: none;
-            background-color: transparent;
-            cursor: pointer;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-            display: inline-flex;
-            color: var(--dark-color2,rgba(0,0,0,0.9));
-            z-index: 8999;
-            width:100%;
-        }
         .multipleSelect{
+            display: flex;
+            width: 100%;
+            z-index: 2999;
             position: relative;
             padding: 3px 6px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+            font-size: 1rem;
             transition: all .3s;
             outline: none;
-            font-size: 1rem;
-            z-index: 2999;
+            user-select:none;
+            align-items: center;
+            justify-content: space-between;
             -webkit-user-select:none ;
             -moz-user-select:none;
+        }
+        input{
+            display: inline-flex;
+            width:100%;
+            z-index: 8999;
+            color: var(--dark-color2,rgba(0,0,0,0.9));
+            background-color: transparent;
+            border: 0;
             user-select:none;
-            width: 100%;
+            outline: none;
+            cursor: pointer;
+            -webkit-user-select:none ;
+            -moz-user-select:none;
         }
          .body{
             max-height: ${this.listHeight};
+            width: 100%;
+            display: block;
+            overflow: auto;
             position: absolute;
             bottom: 100%;
-            z-index: 99;
             padding-top: 5px;
             margin-top: 2px;
-            background-color: var(--dark-background4,#fff);
-            width: 100%;
             transition: all 0.2s;
-            visibility: hidden;
-            
-            opacity: 0;
-            transform-origin: bottom center;
-            display: block;
             flex-direction: column;
+            transform-origin: bottom center;
             box-shadow: 0 5px 15px 0px #00000033;
+            background-color: var(--dark-background4,#fff);
             border-radius: 2px;
-            overflow: auto;
-        }
-          .body-bottom{
-            bottom: auto;
-            top: 100%;
-            transform-origin: top center;
+            opacity: 0;
+            z-index: 99;
+            visibility: hidden;
         }
         :host([placement="bottom"]) .body{
             bottom:unset;
@@ -174,15 +168,18 @@ export class LitAllocationSelect extends BaseElement {
             transition: none;
             transform: none;
         }
- 
+        .body-bottom{
+            top: 100%;
+            transform-origin: top center;
+            bottom: auto;
+        }
+        .multipleRoot input::-webkit-input-placeholder {
+            color: var(--dark-color,#aab2bd);
+        }
         :host([disabled]) {
            pointer-events: none;
+           cursor: not-allowed;
            background-color: var(--dark-background1,#f5f5f5);
-            cursor: not-allowed;
-        }
-        
-        .multipleRoot input::-webkit-input-placeholder {
-                color: var(--dark-color,#aab2bd);
         }
         </style>
         <div class="multipleSelect" tabindex="0">
@@ -201,18 +198,18 @@ export class LitAllocationSelect extends BaseElement {
   connectedCallback() {}
 
   initData() {
-    this.inputElement = this.shadowRoot!.querySelector('input');
-    this.options = this.shadowRoot!.querySelector('.body') as HTMLDivElement;
-    this.inputElement?.addEventListener('keyup', () => {
+    this.selectAllocationInputEl = this.shadowRoot!.querySelector('input');
+    this.selectAllocationOptions = this.shadowRoot!.querySelector('.body') as HTMLDivElement;
+    this.selectAllocationInputEl?.addEventListener('keyup', () => {
       let filter = [...this.shadowRoot!.querySelectorAll<HTMLDivElement>('.option')].filter((a: HTMLDivElement) => {
-        if (a.textContent!.indexOf(this.inputElement!.value) <= -1) {
+        if (a.textContent!.indexOf(this.selectAllocationInputEl!.value) <= -1) {
           a.style.display = 'none';
         } else {
           a.style.display = 'block';
         }
       });
-      this.value = this.inputElement!.value;
-      this.inputContent!.dispatchEvent(new CustomEvent('valuable', {}));
+      this.value = this.selectAllocationInputEl!.value;
+      this.selectAllocationInputContent!.dispatchEvent(new CustomEvent('valuable', {}));
     });
     this.shadowRoot?.querySelectorAll('.option').forEach((a) => {
       a.addEventListener('mousedown', (e) => {
@@ -226,9 +223,9 @@ export class LitAllocationSelect extends BaseElement {
         );
       });
       a.addEventListener('onSelected', (e: any) => {
-        this.inputElement!.value = e.detail.text;
+        this.selectAllocationInputEl!.value = e.detail.text;
         this.value = e.detail.text;
-        this.inputContent!.dispatchEvent(new CustomEvent('valuable', {}));
+        this.selectAllocationInputContent!.dispatchEvent(new CustomEvent('valuable', {}));
       });
     });
   }
diff --git a/ide/src/base-ui/select/LitSelect.ts b/ide/src/base-ui/select/LitSelect.ts
index 8fbe6946bc48002c1d33010efd0eac0e990028ef..4833cffea0c1b5dd136884576d0ce1a6e3f79af3 100644
--- a/ide/src/base-ui/select/LitSelect.ts
+++ b/ide/src/base-ui/select/LitSelect.ts
@@ -14,15 +14,16 @@
  */
 
 import { BaseElement, element } from '../BaseElement.js';
+import { selectHtmlStr } from './LitSelectHtml.js';
 
 @element('lit-select')
 export class LitSelect extends BaseElement {
   private focused: any;
-  private inputElement: any;
-  private clearElement: any;
-  private iconElement: any;
-  private searchElement: any;
-  private multipleRootElement: any;
+  private selectInputEl: any;
+  private selectClearEl: any;
+  private selectIconEl: any;
+  private selectSearchEl: any;
+  private selectMultipleRootEl: any;
 
   static get observedAttributes() {
     return [
@@ -43,16 +44,16 @@ export class LitSelect extends BaseElement {
     return this.getAttribute('value') || this.defaultValue;
   }
 
-  set value(value) {
-    this.setAttribute('value', value);
+  set value(selectValue) {
+    this.setAttribute('value', selectValue);
   }
 
   get rounded() {
     return this.hasAttribute('rounded');
   }
 
-  set rounded(rounded: boolean) {
-    if (rounded) {
+  set rounded(selectRounded: boolean) {
+    if (selectRounded) {
       this.setAttribute('rounded', '');
     } else {
       this.removeAttribute('rounded');
@@ -63,9 +64,9 @@ export class LitSelect extends BaseElement {
     return this.getAttribute('placement') || '';
   }
 
-  set placement(placement: string) {
-    if (placement) {
-      this.setAttribute('placement', placement);
+  set placement(selectPlacement: string) {
+    if (selectPlacement) {
+      this.setAttribute('placement', selectPlacement);
     } else {
       this.removeAttribute('placement');
     }
@@ -75,8 +76,8 @@ export class LitSelect extends BaseElement {
     return this.getAttribute('border') || 'true';
   }
 
-  set border(value) {
-    if (value) {
+  set border(selectBorder) {
+    if (selectBorder) {
       this.setAttribute('border', 'true');
     } else {
       this.setAttribute('border', 'false');
@@ -87,8 +88,8 @@ export class LitSelect extends BaseElement {
     return this.getAttribute('list-height') || '256px';
   }
 
-  set listHeight(value) {
-    this.setAttribute('list-height', value);
+  set listHeight(selectListHeight) {
+    this.setAttribute('list-height', selectListHeight);
   }
 
   get defaultPlaceholder() {
@@ -114,38 +115,38 @@ export class LitSelect extends BaseElement {
     return this.getAttribute('default-value') || '';
   }
 
-  set defaultValue(value) {
-    this.setAttribute('default-value', value);
+  set defaultValue(selectDefaultValue) {
+    this.setAttribute('default-value', selectDefaultValue);
   }
 
   get placeholder() {
     return this.getAttribute('placeholder') || this.defaultPlaceholder;
   }
 
-  set placeholder(value) {
-    this.setAttribute('placeholder', value);
+  set placeholder(selectPlaceHolder) {
+    this.setAttribute('placeholder', selectPlaceHolder);
   }
 
   get loading() {
     return this.hasAttribute('loading');
   }
 
-  set loading(value) {
-    if (value) {
+  set loading(selectLoading) {
+    if (selectLoading) {
       this.setAttribute('loading', '');
     } else {
       this.removeAttribute('loading');
     }
   }
 
-  set dataSource(value: any) {
-    value.forEach((a: any) => {
-      let option = document.createElement('lit-select-option');
-      if (a.file_name) {
-        option.textContent = a.file_name;
-        option.setAttribute('value', a.file_name);
+  set dataSource(selectDataSource: any) {
+    selectDataSource.forEach((dateSourceBean: any) => {
+      let selectOption = document.createElement('lit-select-option');
+      if (dateSourceBean.file_name) {
+        selectOption.textContent = dateSourceBean.file_name;
+        selectOption.setAttribute('value', dateSourceBean.file_name);
       }
-      this.append(option);
+      this.append(selectOption);
     });
     this.initOptions();
   }
@@ -155,197 +156,76 @@ export class LitSelect extends BaseElement {
   initHtml() {
     return `
         <style>
-        :host{
-            display: inline-flex;
-            position: relative;
-            overflow: visible;
-            cursor: pointer;
-            border-radius: 2px;
-            outline: none;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-            /*width: 100%;*/
-        }
-        :host(:not([border])),
-        :host([border='true']){
-            border: 1px solid var(--bark-prompt,#dcdcdc);
-        }
-        input{
-            border: 0;
-            outline: none;
-            background-color: transparent;
-            cursor: pointer;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-            display: inline-flex;
-            color: var(--dark-color2,rgba(0,0,0,0.9));
-        }
-        :host([highlight]) input {
-            color: rgba(255,255,255,0.9);
-        }
+        ${selectHtmlStr()}
         :host(:not([mode]))  input{
             width: 100%;
         }
-        :host([mode])  input{
-            padding: 6px 0px;
-        }
-        :host([mode])  .root{
-            padding: 1px 8px;
-        }
-        .root{
-            position: relative;
-            padding: 3px 6px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-radius: 2px;
-            outline: none;
-            font-size: 1rem;
-            z-index: 2;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-            width: 100%;
-        }
         .body{
             max-height: ${this.listHeight};
-            position: absolute;
-            bottom: 100%;
-            z-index: 99;
-            padding-top: 5px;
-            margin-top: 2px;
-            background-color: var(--dark-background4,#fff);
-            width: 100%;
-            transform: scaleY(.6);
-            visibility: hidden;
-            opacity: 0;
-            transform-origin: bottom center;
-            display: block;
-            flex-direction: column;
-            box-shadow: 0 5px 15px 0px #00000033;
-            border-radius: 2px;
             overflow: auto;
-        }
-        .body-bottom{
-            bottom: auto;
-            top: 100%;
-            transform-origin: top center;
-        }
-        :host([placement="bottom"]) .body{
-            bottom:unset;
-            top: 100%;
-            transition: none;
-            transform: none;
-        }
-
-        :host([rounded]) .body {
-            border-radius: 16px;
-        }
-        :host([rounded]) .root {
-            border-radius: 16px;
-            height: 25px;
-        }
-        .icon{
-            pointer-events: none;
-        }
-        .noSelect{
-          -moz-user-select:none;
-          -ms-user-select:none;
-          user-select:none;
-          -khtml-user-select:none;
-          -webkit-touch-callout:none;
-          -webkit-user-select:none;
-        }
-
-        :host(:not([border]):not([disabled]):focus),
-        :host([border='true']:not([disabled]):focus),
-        :host(:not([border]):not([disabled]):hover),
-        :host([border='true']:not([disabled]):hover){
-            border:1px solid var(--bark-prompt,#ccc)
-        }
-        :host(:not([disabled]):focus) .body,
-        :host(:not([disabled]):focus-within) .body{
-            transform: scaleY(1);
-            opacity: 1;
-            z-index: 99;
-            visibility: visible;
-        }
-        :host(:not([disabled]):focus)  input{
-            color: var(--dark-color,#bebebe);
+            border-radius: 2px;
+            box-shadow: 0 5px 15px 0px #00000033;
         }
         .multipleRoot input::-webkit-input-placeholder {
-                color: var(--dark-color,#aab2bd);
-            }
-        :host(:not([border])[disabled]) *,
-        :host([border='true'][disabled]) *{
-            background-color: var(--dark-background1,#f5f5f5);
-            color: #b7b7b7;
-            cursor: not-allowed;
+            color: var(--dark-color,#aab2bd);
         }
-        :host([border='false'][disabled]) *{
-            color: #b7b7b7;
-            cursor: not-allowed;
+        :host(:not([loading])) .loading{
+            display: none;
         }
         :host([loading]) .loading{
             display: flex;
         }
-        :host([loading]) .icon{
+        :host(:not([allow-clear])) .clear{
             display: none;
         }
-        :host(:not([loading])) .loading{
+        :host([loading]) .icon{
             display: none;
         }
         :host(:not([loading])) .icon{
             display: flex;
         }
-        :host(:not([allow-clear])) .clear{
-            display: none;
-        }
-        .clear{
-            display: none;
-            color: #bfbfbf;
-        }
         .clear:hover{
             color: #8c8c8c;
         }
-        .search{
-            display: none;
+        .clear{
             color: #bfbfbf;
+            display: none;
         }
         .multipleRoot{
             display: flex;
-            flex-direction: column;
-            flex-wrap: wrap;
-            flex-flow: wrap;
             align-items: center;
+            flex-flow: wrap;
+            flex-wrap: wrap;
+            flex-direction: column;
+        }
+        .search{
+            color: #bfbfbf;
+            display: none;
         }
         .tag{
+            overflow: auto;
+            height: auto;
             display: inline-flex;
+            position: relative;
             align-items: center;
-            background-color: #f5f5f5;
-            padding: 1px 4px;
-            height: auto;
             font-size: .75rem;
             font-weight: bold;
-            color: #242424;
-            overflow: auto;
-            position: relative;
+            padding: 1px 4px;
             margin-right: 4px;
             margin-top: 1px;
             margin-bottom: 1px;
+            color: #242424;
+            background-color: #f5f5f5;
+        }
+        .tag-close:hover{
+            color: #333;
         }
         .tag-close{
-            font-size: .8rem;
             padding: 2px;
-            margin-left: 0px;
+            font-size: .8rem;
             color: #999999;
+            margin-left: 0px;
         }
-        .tag-close:hover{
-            color: #333;
-        }
-
         </style>
         <div class="root noSelect" tabindex="0" hidefocus="true">
             <div class="multipleRoot">
@@ -383,8 +263,8 @@ export class LitSelect extends BaseElement {
       tag.parentElement.removeChild(tag);
       this.querySelector(`lit-select-option[value=${value}]`)!.removeAttribute('selected');
       if (this.shadowRoot!.querySelectorAll('.tag').length == 0) {
-        this.inputElement.style.width = 'auto';
-        this.inputElement.placeholder = this.defaultPlaceholder;
+        this.selectInputEl.style.width = 'auto';
+        this.selectInputEl.placeholder = this.defaultPlaceholder;
       }
       ev.stopPropagation();
     };
@@ -398,15 +278,15 @@ export class LitSelect extends BaseElement {
   connectedCallback() {
     this.tabIndex = 0;
     this.focused = false;
-    this.inputElement = this.shadowRoot!.querySelector('input');
-    this.clearElement = this.shadowRoot!.querySelector('.clear');
-    this.iconElement = this.shadowRoot!.querySelector('.icon');
-    this.searchElement = this.shadowRoot!.querySelector('.search');
-    this.multipleRootElement = this.shadowRoot!.querySelector('.multipleRoot');
-    this.clearElement.onclick = (ev: any) => {
+    this.selectInputEl = this.shadowRoot!.querySelector('input');
+    this.selectClearEl = this.shadowRoot!.querySelector('.clear');
+    this.selectIconEl = this.shadowRoot!.querySelector('.icon');
+    this.selectSearchEl = this.shadowRoot!.querySelector('.search');
+    this.selectMultipleRootEl = this.shadowRoot!.querySelector('.multipleRoot');
+    this.selectClearEl.onclick = (ev: any) => {
       if (this.isMultiple()) {
         let delNodes: Array<any> = [];
-        this.multipleRootElement.childNodes.forEach((a: any) => {
+        this.selectMultipleRootEl.childNodes.forEach((a: any) => {
           if (a.tagName === 'DIV') {
             delNodes.push(a);
           }
@@ -415,14 +295,14 @@ export class LitSelect extends BaseElement {
           delNodes[i].remove();
         }
         if (this.shadowRoot!.querySelectorAll('.tag').length == 0) {
-          this.inputElement.style.width = 'auto';
-          this.inputElement.placeholder = this.defaultPlaceholder;
+          this.selectInputEl.style.width = 'auto';
+          this.selectInputEl.placeholder = this.defaultPlaceholder;
         }
       }
       this.querySelectorAll('lit-select-option').forEach((a) => a.removeAttribute('selected'));
-      this.inputElement.value = '';
-      this.clearElement.style.display = 'none';
-      this.iconElement.style.display = 'flex';
+      this.selectInputEl.value = '';
+      this.selectClearEl.style.display = 'none';
+      this.selectIconEl.style.display = 'flex';
       this.blur();
       ev.stopPropagation();
       this.dispatchEvent(new CustomEvent('onClear', { detail: ev }));
@@ -431,7 +311,7 @@ export class LitSelect extends BaseElement {
     this.onclick = (ev: any) => {
       if (ev.target.tagName === 'LIT-SELECT') {
         if (this.focused === false) {
-          this.inputElement.focus();
+          this.selectInputEl.focus();
           this.focused = true;
         } else {
           this.blur();
@@ -449,56 +329,56 @@ export class LitSelect extends BaseElement {
         }
       }
       if (this.hasAttribute('allow-clear')) {
-        if (this.inputElement.value.length > 0 || this.inputElement.placeholder !== this.defaultPlaceholder) {
-          this.clearElement.style.display = 'flex';
-          this.iconElement.style.display = 'none';
+        if (this.selectInputEl.value.length > 0 || this.selectInputEl.placeholder !== this.defaultPlaceholder) {
+          this.selectClearEl.style.display = 'flex';
+          this.selectIconEl.style.display = 'none';
         } else {
-          this.clearElement.style.display = 'none';
-          this.iconElement.style.display = 'flex';
+          this.selectClearEl.style.display = 'none';
+          this.selectIconEl.style.display = 'flex';
         }
       }
     };
     this.onmouseout = this.onblur = (ev) => {
       if (this.hasAttribute('allow-clear')) {
-        this.clearElement.style.display = 'none';
-        this.iconElement.style.display = 'flex';
+        this.selectClearEl.style.display = 'none';
+        this.selectIconEl.style.display = 'flex';
       }
       this.focused = false;
     };
-    this.inputElement.onfocus = (ev: any) => {
+    this.selectInputEl.onfocus = (ev: any) => {
       if (this.hasAttribute('disabled')) return;
-      if (this.inputElement.value.length > 0) {
-        this.inputElement.placeholder = this.inputElement.value;
-        this.inputElement.value = '';
+      if (this.selectInputEl.value.length > 0) {
+        this.selectInputEl.placeholder = this.selectInputEl.value;
+        this.selectInputEl.value = '';
       }
       if (this.hasAttribute('show-search')) {
-        this.searchElement.style.display = 'flex';
-        this.iconElement.style.display = 'none';
+        this.selectSearchEl.style.display = 'flex';
+        this.selectIconEl.style.display = 'none';
       }
       this.querySelectorAll('lit-select-option').forEach((a) => {
         // @ts-ignore
         a.style.display = 'flex';
       });
     };
-    this.inputElement.onblur = (ev: any) => {
+    this.selectInputEl.onblur = (ev: any) => {
       if (this.hasAttribute('disabled')) return;
       if (this.isMultiple()) {
         if (this.hasAttribute('show-search')) {
-          this.searchElement.style.display = 'none';
-          this.iconElement.style.display = 'flex';
+          this.selectSearchEl.style.display = 'none';
+          this.selectIconEl.style.display = 'flex';
         }
       } else {
-        if (this.inputElement.placeholder !== this.defaultPlaceholder) {
-          this.inputElement.value = this.inputElement.placeholder;
-          this.inputElement.placeholder = this.defaultPlaceholder;
+        if (this.selectInputEl.placeholder !== this.defaultPlaceholder) {
+          this.selectInputEl.value = this.selectInputEl.placeholder;
+          this.selectInputEl.placeholder = this.defaultPlaceholder;
         }
         if (this.hasAttribute('show-search')) {
-          this.searchElement.style.display = 'none';
-          this.iconElement.style.display = 'flex';
+          this.selectSearchEl.style.display = 'none';
+          this.selectIconEl.style.display = 'flex';
         }
       }
     };
-    this.inputElement.oninput = (ev: any) => {
+    this.selectInputEl.oninput = (ev: any) => {
       let els = [...this.querySelectorAll('lit-select-option')];
       if (this.hasAttribute('show-search')) {
         if (!ev.target.value) {
@@ -520,16 +400,16 @@ export class LitSelect extends BaseElement {
         this.value = ev.target.value;
       }
     };
-    this.inputElement.onkeydown = (ev: any) => {
+    this.selectInputEl.onkeydown = (ev: any) => {
       if (ev.key === 'Backspace') {
         if (this.isMultiple()) {
-          let tag = this.multipleRootElement.lastElementChild.previousElementSibling;
+          let tag = this.selectMultipleRootEl.lastElementChild.previousElementSibling;
           if (tag) {
             this.querySelector(`lit-select-option[value=${tag.value}]`)?.removeAttribute('selected');
             tag.remove();
             if (this.shadowRoot!.querySelectorAll('.tag').length == 0) {
-              this.inputElement.style.width = 'auto';
-              this.inputElement.placeholder = this.defaultPlaceholder;
+              this.selectInputEl.style.width = 'auto';
+              this.selectInputEl.placeholder = this.defaultPlaceholder;
             }
           }
         } else {
@@ -540,8 +420,8 @@ export class LitSelect extends BaseElement {
         if (!this.canInsert) {
           let filter = [...this.querySelectorAll('lit-select-option')].filter((a: any) => a.style.display !== 'none');
           if (filter.length > 0) {
-            this.inputElement.value = filter[0].textContent;
-            this.inputElement.placeholder = filter[0].textContent;
+            this.selectInputEl.value = filter[0].textContent;
+            this.selectInputEl.placeholder = filter[0].textContent;
             this.blur();
             // @ts-ignore
             this.value = filter[0].getAttribute('value');
@@ -566,15 +446,15 @@ export class LitSelect extends BaseElement {
         a.setAttribute('check', '');
         if (a.getAttribute('value') === this.defaultValue) {
           let tag = this.newTag(a.getAttribute('value'), a.textContent);
-          this.multipleRootElement.insertBefore(tag, this.inputElement);
-          this.inputElement.placeholder = '';
-          this.inputElement.value = '';
-          this.inputElement.style.width = '1px';
+          this.selectMultipleRootEl.insertBefore(tag, this.selectInputEl);
+          this.selectInputEl.placeholder = '';
+          this.selectInputEl.value = '';
+          this.selectInputEl.style.width = '1px';
           a.setAttribute('selected', '');
         }
       } else {
         if (a.getAttribute('value') === this.defaultValue) {
-          this.inputElement.value = a.textContent;
+          this.selectInputEl.value = a.textContent;
           a.setAttribute('selected', '');
         }
       }
@@ -594,21 +474,21 @@ export class LitSelect extends BaseElement {
             e.detail.selected = false;
           } else {
             let tag = this.newTag(e.detail.value, e.detail.text);
-            this.multipleRootElement.insertBefore(tag, this.inputElement);
-            this.inputElement.placeholder = '';
-            this.inputElement.value = '';
-            this.inputElement.style.width = '1px';
+            this.selectMultipleRootEl.insertBefore(tag, this.selectInputEl);
+            this.selectInputEl.placeholder = '';
+            this.selectInputEl.value = '';
+            this.selectInputEl.style.width = '1px';
           }
           if (this.shadowRoot!.querySelectorAll('.tag').length == 0) {
-            this.inputElement.style.width = 'auto';
-            this.inputElement.placeholder = this.defaultPlaceholder;
+            this.selectInputEl.style.width = 'auto';
+            this.selectInputEl.placeholder = this.defaultPlaceholder;
           }
-          this.inputElement.focus();
+          this.selectInputEl.focus();
         } else {
           [...this.querySelectorAll('lit-select-option')].forEach((a) => a.removeAttribute('selected'));
           this.blur();
           // @ts-ignore
-          this.inputElement.value = e.detail.text;
+          this.selectInputEl.value = e.detail.text;
         }
         if (a.hasAttribute('selected')) {
           a.removeAttribute('selected');
@@ -623,15 +503,15 @@ export class LitSelect extends BaseElement {
   }
 
   clear() {
-    this.inputElement.value = '';
-    this.inputElement.placeholder = this.defaultPlaceholder;
+    this.selectInputEl.value = '';
+    this.selectInputEl.placeholder = this.defaultPlaceholder;
   }
 
   reset() {
     this.querySelectorAll('lit-select-option').forEach((a) => {
       [...this.querySelectorAll('lit-select-option')].forEach((a) => a.removeAttribute('selected'));
       if (a.getAttribute('value') === this.defaultValue) {
-        this.inputElement.value = a.textContent;
+        this.selectInputEl.value = a.textContent;
         a.setAttribute('selected', '');
       }
     });
@@ -642,12 +522,12 @@ export class LitSelect extends BaseElement {
   adoptedCallback() {}
 
   attributeChangedCallback(name: any, oldValue: any, newValue: any) {
-    if (name === 'value' && this.inputElement) {
+    if (name === 'value' && this.selectInputEl) {
       if (newValue) {
         [...this.querySelectorAll('lit-select-option')].forEach((a) => {
           if (a.getAttribute('value') === newValue) {
             a.setAttribute('selected', '');
-            this.inputElement.value = a.textContent;
+            this.selectInputEl.value = a.textContent;
           } else {
             a.removeAttribute('selected');
           }
diff --git a/ide/src/base-ui/select/LitSelectHtml.ts b/ide/src/base-ui/select/LitSelectHtml.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45e53cfd5489821aa09a76e5da57971e5c9eeb2c
--- /dev/null
+++ b/ide/src/base-ui/select/LitSelectHtml.ts
@@ -0,0 +1,140 @@
+/*
+ * 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 function selectHtmlStr(): string{
+    return `
+        :host{
+            display: inline-flex;
+            position: relative;
+            overflow: visible;
+            cursor: pointer;
+            border-radius: 2px;
+            outline: none;
+            -webkit-user-select:none ;
+            -moz-user-select:none;
+            user-select:none;
+        }
+        :host(:not([border])),
+        :host([border='true']){
+            border: 1px solid var(--bark-prompt,#dcdcdc);
+        }
+        input{
+            border: 0;
+            outline: none;
+            background-color: transparent;
+            cursor: pointer;
+            -webkit-user-select:none ;
+            -moz-user-select:none;
+            user-select:none;
+            display: inline-flex;
+            color: var(--dark-color2,rgba(0,0,0,0.9));
+        }
+        :host([highlight]) input {
+            color: rgba(255,255,255,0.9);
+        }
+        :host([mode])  input{
+            padding: 6px 0px;
+        }
+        :host([mode])  .root{
+            padding: 1px 8px;
+        }
+        .root{
+            position: relative;
+            padding: 3px 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-radius: 2px;
+            outline: none;
+            font-size: 1rem;
+            z-index: 2;
+            -webkit-user-select:none ;
+            -moz-user-select:none;
+            user-select:none;
+            width: 100%;
+        }
+        .body{
+            position: absolute;
+            bottom: 100%;
+            z-index: 99;
+            padding-top: 5px;
+            margin-top: 2px;
+            background-color: var(--dark-background4,#fff);
+            width: 100%;
+            transform: scaleY(.6);
+            visibility: hidden;
+            opacity: 0;
+            transform-origin: bottom center;
+            display: block;
+            flex-direction: column;
+        }
+        .body-bottom{
+            bottom: auto;
+            top: 100%;
+            transform-origin: top center;
+        }
+        :host([placement="bottom"]) .body{
+            bottom:unset;
+            top: 100%;
+            transition: none;
+            transform: none;
+        }
+
+        :host([rounded]) .body {
+            border-radius: 16px;
+        }
+        :host([rounded]) .root {
+            border-radius: 16px;
+            height: 25px;
+        }
+        .icon{
+            pointer-events: none;
+        }
+        .noSelect{
+          -moz-user-select:none;
+          -ms-user-select:none;
+          user-select:none;
+          -khtml-user-select:none;
+          -webkit-touch-callout:none;
+          -webkit-user-select:none;
+        }
+
+        :host(:not([border]):not([disabled]):focus),
+        :host([border='true']:not([disabled]):focus),
+        :host(:not([border]):not([disabled]):hover),
+        :host([border='true']:not([disabled]):hover){
+            border:1px solid var(--bark-prompt,#ccc)
+        }
+        :host(:not([disabled]):focus) .body,
+        :host(:not([disabled]):focus-within) .body{
+            transform: scaleY(1);
+            opacity: 1;
+            z-index: 99;
+            visibility: visible;
+        }
+        :host(:not([disabled]):focus)  input{
+            color: var(--dark-color,#bebebe);
+        }
+        :host(:not([border])[disabled]) *,
+        :host([border='true'][disabled]) *{
+            background-color: var(--dark-background1,#f5f5f5);
+            color: #b7b7b7;
+            cursor: not-allowed;
+        }
+        :host([border='false'][disabled]) *{
+            color: #b7b7b7;
+            cursor: not-allowed;
+        }`
+}
\ No newline at end of file
diff --git a/ide/src/base-ui/select/LitSelectV.ts b/ide/src/base-ui/select/LitSelectV.ts
index 20de4efac4f68fcfe8b3179c790269ccc8fbd1c7..76a89ce8fcf6206485ee9cb47ef0f3f52370c488 100644
--- a/ide/src/base-ui/select/LitSelectV.ts
+++ b/ide/src/base-ui/select/LitSelectV.ts
@@ -15,6 +15,7 @@
 
 import { BaseElement, element } from '../BaseElement.js';
 import { LitSelectOption } from './LitSelectOption.js';
+import { selectHtmlStr } from './LitSelectHtml.js';
 
 @element('lit-select-v')
 export class LitSelectV extends BaseElement {
@@ -22,11 +23,11 @@ export class LitSelectV extends BaseElement {
   itemValue: Array<string> = [];
   customItem: Array<string> = [];
   private focused: any;
-  private inputElement: any;
-  private searchInputElement: any;
-  private iconElement: any;
-  private options: HTMLDivElement | undefined;
-  private body: HTMLDivElement | undefined;
+  private selectVInputEl: any;
+  private selectVSearchInputEl: any;
+  private selectVIconEl: any;
+  private selectVOptions: HTMLDivElement | undefined;
+  private selectVBody: HTMLDivElement | undefined;
 
   private valueStr: string = '';
 
@@ -35,15 +36,15 @@ export class LitSelectV extends BaseElement {
   }
 
   get value() {
-    return this.inputElement!.value || this.defaultValue;
+    return this.selectVInputEl!.value || this.defaultValue;
   }
 
   get rounded() {
     return this.hasAttribute('rounded');
   }
 
-  set rounded(rounded: boolean) {
-    if (rounded) {
+  set rounded(selectVRounded: boolean) {
+    if (selectVRounded) {
       this.setAttribute('rounded', '');
     } else {
       this.removeAttribute('rounded');
@@ -54,9 +55,9 @@ export class LitSelectV extends BaseElement {
     return this.getAttribute('placement') || '';
   }
 
-  set placement(placement: string) {
-    if (placement) {
-      this.setAttribute('placement', placement);
+  set placement(selectVPlacement: string) {
+    if (selectVPlacement) {
+      this.setAttribute('placement', selectVPlacement);
     } else {
       this.removeAttribute('placement');
     }
@@ -66,8 +67,8 @@ export class LitSelectV extends BaseElement {
     return this.getAttribute('border') || 'true';
   }
 
-  set border(value) {
-    if (value) {
+  set border(selectVBorder) {
+    if (selectVBorder) {
       this.setAttribute('border', 'true');
     } else {
       this.setAttribute('border', 'false');
@@ -82,16 +83,16 @@ export class LitSelectV extends BaseElement {
     return this.getAttribute('default-value') || '';
   }
 
-  set defaultValue(value) {
-    this.setAttribute('default-value', value);
+  set defaultValue(selectVDefaultValue) {
+    this.setAttribute('default-value', selectVDefaultValue);
   }
 
   get placeholder() {
     return this.getAttribute('placeholder') || this.defaultPlaceholder;
   }
 
-  set placeholder(value) {
-    this.setAttribute('placeholder', value);
+  set placeholder(selectVPlaceholder) {
+    this.setAttribute('placeholder', selectVPlaceholder);
   }
 
   set all(isAll: boolean) {
@@ -106,29 +107,29 @@ export class LitSelectV extends BaseElement {
     return this.hasAttribute('is-all');
   }
 
-  dataSource(value: Array<string>, valueStr: string) {
-    this.options!.innerHTML = '';
-    if (value.length > 0) {
-      this.body!.style.display = 'block';
+  dataSource(selectVData: Array<string>, valueStr: string) {
+    this.selectVOptions!.innerHTML = '';
+    if (selectVData.length > 0) {
+      this.selectVBody!.style.display = 'block';
       this.valueStr = valueStr;
-      this.itemValue = value;
+      this.itemValue = selectVData;
       if (valueStr != '') {
         let option = document.createElement('lit-select-option');
         if (this.all) {
           option.setAttribute('selected', '');
-          this.showItems = value;
+          this.showItems = selectVData;
         }
         option.setAttribute('value', valueStr);
         option.textContent = valueStr;
-        this.options!.appendChild(option);
-        this.initDataItem(value);
+        this.selectVOptions!.appendChild(option);
+        this.initDataItem(selectVData);
         this.initCustomOptions();
       } else {
-        this.initDataItem(value);
+        this.initDataItem(selectVData);
         this.initOptions();
       }
     } else {
-      this.body!.style.display = 'none';
+      this.selectVBody!.style.display = 'none';
     }
     if (this.title == 'Event List') {
       let inputElement = this.shadowRoot?.querySelector('input') as HTMLInputElement;
@@ -136,27 +137,27 @@ export class LitSelectV extends BaseElement {
     }
   }
 
-  initDataItem(value: Array<string>) {
-    value.forEach((item) => {
-      let option = document.createElement('lit-select-option');
+  initDataItem(selectVDataItem: Array<string>) {
+    selectVDataItem.forEach((item) => {
+      let selectVOption = document.createElement('lit-select-option');
       if (this.showItems.indexOf(item) > -1 || this.all) {
-        option.setAttribute('selected', '');
+        selectVOption.setAttribute('selected', '');
       }
-      option.className = 'option';
-      option.setAttribute('value', item);
-      option.textContent = item;
-      this.options!.appendChild(option);
+      selectVOption.className = 'option';
+      selectVOption.setAttribute('value', item);
+      selectVOption.textContent = item;
+      this.selectVOptions!.appendChild(selectVOption);
     });
   }
 
   initElements(): void {
     this.tabIndex = 0;
     this.focused = false;
-    this.inputElement = this.shadowRoot!.querySelector('#select-input') as HTMLInputElement;
-    this.searchInputElement = this.shadowRoot!.querySelector('#search-input') as HTMLInputElement;
-    this.body = this.shadowRoot!.querySelector('.body') as HTMLDivElement;
-    this.options = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement;
-    this.iconElement = this.shadowRoot!.querySelector('.icon');
+    this.selectVInputEl = this.shadowRoot!.querySelector('#select-input') as HTMLInputElement;
+    this.selectVSearchInputEl = this.shadowRoot!.querySelector('#search-input') as HTMLInputElement;
+    this.selectVBody = this.shadowRoot!.querySelector('.body') as HTMLDivElement;
+    this.selectVOptions = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement;
+    this.selectVIconEl = this.shadowRoot!.querySelector('.icon');
     this.onclick = (ev: any) => {
       if (this.focused === false) {
         this.focused = true;
@@ -164,10 +165,10 @@ export class LitSelectV extends BaseElement {
         this.focused = false;
       }
     };
-    this.searchInputElement?.addEventListener('keyup', () => {
+    this.selectVSearchInputEl?.addEventListener('keyup', () => {
       let options = [...this.shadowRoot!.querySelectorAll<LitSelectOption>('.option')];
       options.filter((a: LitSelectOption) => {
-        if (a.textContent!.indexOf(this.searchInputElement!.value) <= -1) {
+        if (a.textContent!.indexOf(this.selectVSearchInputEl!.value) <= -1) {
           a.style.display = 'none';
         } else {
           a.style.display = 'flex';
@@ -178,176 +179,57 @@ export class LitSelectV extends BaseElement {
     this.onmouseout = this.onblur = (ev) => {
       this.focused = false;
     };
-    this.inputElement.onfocus = (ev: any) => {
+    this.selectVInputEl.onfocus = (ev: any) => {
       if (this.hasAttribute('disabled')) return;
     };
-    this.inputElement.onblur = (ev: any) => {
+    this.selectVInputEl.onblur = (ev: any) => {
       if (this.hasAttribute('disabled')) return;
     };
   }
 
   initHtml() {
     return `
-        <style>
-        :host{
-            display: inline-flex;
-            position: relative;
-            overflow: visible;
-            cursor: pointer;
-            border-radius: 2px;
-            outline: none;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-        }
-        :host(:not([border])),
-        :host([border='true']){
-            border: 1px solid var(--bark-prompt,#dcdcdc);
-        }
-        input{
-            border: 0;
-            outline: none;
-            background-color: transparent;
-            cursor: pointer;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-            display: inline-flex;
-            color: var(--dark-color2,rgba(0,0,0,0.9));
-        }
-        :host([highlight]) input {
-            color: rgba(255,255,255,0.9);
-        }
-        input{
-            width: 100%;
-        }
-        :host([mode])  input{
-            padding: 6px 0px;
-        }
-        :host([mode])  .root{
-            padding: 1px 8px;
-        }
-        .root{
-            position: relative;
-            padding: 3px 6px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-radius: 2px;
-            outline: none;
-            font-size: 1rem;
-            z-index: 2;
-            -webkit-user-select:none ;
-            -moz-user-select:none;
-            user-select:none;
-            width: 100%;
-        }
+        <style> 
+        ${selectHtmlStr()}
         .body{
             max-height: 286px;
-            position: absolute;
-            bottom: 100%;
-            z-index: 99;
-            padding-top: 5px;
-            margin-top: 2px;
-            background-color: var(--dark-background4,#fff);
-            width: 100%;
-            transform: scaleY(.6);
-            visibility: hidden;
-            opacity: 0;
-            transform-origin: bottom center;
             box-shadow: 0 5px 15px 0px #00000033;
-            display: block;
-            flex-direction: column;
             border-radius: 10px;
         }
+        input{
+            width: 100%;
+        }
+        #search-input {
+          outline: none;
+          border: none;
+        }
         .body-select {
            margin-top: 3px;
            background-color: var(--dark-background4,#fff);
            width: 100%;
            border-bottom: none;
         }
-        #search-input {
-          border: none;
-          outline: none;
-        }
         .body-opt{
-            border-top: none;
-            max-height: 256px;
-            background-color: var(--dark-background4,#fff);
             width: 100%;
+            max-height: 256px;
+            border-top: none;
+            overflow: auto;
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 10px;
-            overflow: auto;
-        }
-        .body-bottom{
-            bottom: auto;
-            top: 100%;
-            transform-origin: top center;
-        }
-        :host([placement="bottom"]) .body{
-            bottom:unset;
-            top: 100%;
-            transition: none;
-            transform: none;
-        }
-
-        :host([rounded]) .body {
-            border-radius: 16px;
-        }
-        :host([rounded]) .root {
-            border-radius: 16px;
-            height: 25px;
-        }
-        .icon{
-            pointer-events: none;
-        }
-        .noSelect{
-          -moz-user-select:none;
-          -ms-user-select:none;
-          user-select:none;
-          -khtml-user-select:none;
-          -webkit-touch-callout:none;
-          -webkit-user-select:none;
-        }
-
-        :host(:not([border]):not([disabled]):focus),
-        :host([border='true']:not([disabled]):focus),
-        :host(:not([border]):not([disabled]):hover),
-        :host([border='true']:not([disabled]):hover){
-            border:1px solid var(--bark-prompt,#ccc)
-        }
-        :host(:not([disabled]):focus) .body,
-        :host(:not([disabled]):focus-within) .body{
-            transform: scaleY(1);
-            opacity: 1;
-            z-index: 99;
-            visibility: visible;
+            background-color: var(--dark-background4,#fff);
         }
-        :host(:not([disabled]):focus)  input{
-            color: var(--dark-color,#bebebe);
+        .loading{
+            display: none;
         }
         input::-webkit-input-placeholder {
                 color: var(--dark-color,#aab2bd);
         }
-        :host(:not([border])[disabled]) *,
-        :host([border='true'][disabled]) *{
-            background-color: var(--dark-background1,#f5f5f5);
-            color: #b7b7b7;
-            cursor: not-allowed;
-        }
-        :host([border='false'][disabled]) *{
-            color: #b7b7b7;
-            cursor: not-allowed;
-        }
-        .loading{
-            display: none;
+        #search-input{
+           margin-left: 15px;
         }
         .icon{
             display: flex;
         }
-        #search-input{
-           margin-left: 15px;
-        }
         /*Define the height, width and background of the scroll bar*/
         ::-webkit-scrollbar
         {
@@ -393,7 +275,7 @@ export class LitSelectV extends BaseElement {
           let number = this.showItems.indexOf(a.textContent!);
           if (number > -1) {
             this.showItems!.splice(number, 1);
-            this.inputElement!.value = this.showItems;
+            this.selectVInputEl!.value = this.showItems;
           }
           this.all = false;
           querySelector.removeAttribute('selected');
@@ -404,7 +286,7 @@ export class LitSelectV extends BaseElement {
           let value = this.showItems.indexOf(a.textContent!);
           if (index > -1 && value == -1) {
             this.showItems.push(a.textContent!);
-            this.inputElement!.value = this.showItems;
+            this.selectVInputEl!.value = this.showItems;
           }
           if (this.showItems.length >= this.itemValue.length) {
             querySelector.setAttribute('selected', '');
@@ -421,8 +303,8 @@ export class LitSelectV extends BaseElement {
   }
 
   initOptions() {
-    this.options!.addEventListener('click', (ev) => {
-      let items = this.inputElement!.value.split(',');
+    this.selectVOptions!.addEventListener('click', (ev) => {
+      let items = this.selectVInputEl!.value.split(',');
       this.customItem = [];
       items.forEach((item: string) => {
         if (item.trim() != '') {
@@ -433,9 +315,9 @@ export class LitSelectV extends BaseElement {
         }
       });
       if (this.customItem.length > 0) {
-        this.inputElement.value = this.customItem.concat(this.showItems);
+        this.selectVInputEl.value = this.customItem.concat(this.showItems);
       } else {
-        this.inputElement.value = this.showItems;
+        this.selectVInputEl.value = this.showItems;
       }
     });
     this.shadowRoot?.querySelectorAll('lit-select-option').forEach((a) => {
@@ -469,14 +351,14 @@ export class LitSelectV extends BaseElement {
         this.itemValue.forEach((i) => {
           this.showItems.push(i);
         });
-        this.inputElement.value = this.itemValue;
+        this.selectVInputEl.value = this.itemValue;
       } else {
         this.shadowRoot?.querySelectorAll('lit-select-option').forEach((i) => {
           i.removeAttribute('selected');
           this.all = false;
         });
         this.showItems = [];
-        this.inputElement.value = '';
+        this.selectVInputEl.value = '';
       }
     });
   }
diff --git a/ide/src/base-ui/slider/LitSlider.ts b/ide/src/base-ui/slider/LitSlider.ts
index 173bd1885b4114174a0fce617039c510304369b0..3914c84606eadf50c34fa321cbfc0159eadb2e84 100644
--- a/ide/src/base-ui/slider/LitSlider.ts
+++ b/ide/src/base-ui/slider/LitSlider.ts
@@ -297,17 +297,6 @@ export class LitSlider extends BaseElement {
     }
   }
 
-  renderDefaultSlider() {
-    let htmlInputElement = this.shadowRoot?.querySelector('#slider') as HTMLInputElement;
-    let attribute = htmlInputElement.getAttribute('type');
-    if (attribute === 'range') {
-      htmlInputElement!.setAttribute('value', this.defaultTimeText!);
-      htmlInputElement!.setAttribute('min', this.litSliderStyle!.minRange.toString());
-      htmlInputElement!.setAttribute('max', this.litSliderStyle!.maxRange.toString());
-      htmlInputElement!.setAttribute('step', this.litSliderStyle!.stepSize.toString());
-    }
-  }
-
   formatSeconds(value: string) {
     let result = parseInt(value);
     let hours = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts
index e46ac49d2224560102edd28adde6b353644f13d3..acc0ebfa54dbbdbdc37fee310f7ab586cc359b04 100644
--- a/ide/src/base-ui/table/lit-table.ts
+++ b/ide/src/base-ui/table/lit-table.ts
@@ -691,69 +691,69 @@ export class LitTable extends HTMLElement {
     this.normalDs = [];
     this.tbodyElement!.innerHTML = ''; // Clear the table contents
     this.ds.forEach((rowData: any) => {
-      let rowElement = document.createElement('div');
-      rowElement.classList.add('tr');
+      let tblRowElement = document.createElement('div');
+      tblRowElement.classList.add('tr');
       // @ts-ignore
-      rowElement.data = rowData;
+      tblRowElement.data = rowData;
       let gridTemplateColumns: Array<any> = [];
       // If the table is configured with selectable (select row mode) add a checkbox at the head of the line alone
       if (this.selectable) {
-        let box = document.createElement('div');
-        box.style.display = 'flex';
-        box.style.justifyContent = 'center';
-        box.style.alignItems = 'center';
-        box.classList.add('td');
+        let tblBox = document.createElement('div');
+        tblBox.style.display = 'flex';
+        tblBox.style.justifyContent = 'center';
+        tblBox.style.alignItems = 'center';
+        tblBox.classList.add('td');
         let checkbox = document.createElement('lit-checkbox');
         checkbox.classList.add('row-checkbox');
         checkbox.onchange = (e: any) => {
           // Checkbox checking affects whether the div corresponding to the row has a checked attribute for marking
           if (e.detail.checked) {
-            rowElement.setAttribute('checked', '');
+            tblRowElement.setAttribute('checked', '');
           } else {
-            rowElement.removeAttribute('checked');
+            tblRowElement.removeAttribute('checked');
           }
         };
-        box.appendChild(checkbox);
-        rowElement.appendChild(box);
+        tblBox.appendChild(checkbox);
+        tblRowElement.appendChild(tblBox);
       }
-      this.tableColumns!.forEach((cl) => {
-        let dataIndex = cl.getAttribute('data-index') || '1';
-        gridTemplateColumns.push(cl.getAttribute('width') || '1fr');
-        if (cl.template) {
+      this.tableColumns!.forEach((tblColumn) => {
+        let dataIndex = tblColumn.getAttribute('data-index') || '1';
+        gridTemplateColumns.push(tblColumn.getAttribute('width') || '1fr');
+        if (tblColumn.template) {
           // If you customize the rendering, you get the nodes from the template
           // @ts-ignore
-          let cloneNode = cl.template.render(rowData).content.cloneNode(true);
-          let d = document.createElement('div');
-          d.classList.add('td');
-          d.style.wordBreak = 'break-all';
-          d.style.whiteSpace = 'pre-wrap';
-          d.style.justifyContent = cl.getAttribute('align') || '';
-          if (cl.hasAttribute('fixed')) {
-            this.fixed(d, cl.getAttribute('fixed') || '', '#ffffff');
+          let cloneNode = tblColumn.template.render(rowData).content.cloneNode(true);
+          let tblCustomDiv = document.createElement('div');
+          tblCustomDiv.classList.add('td');
+          tblCustomDiv.style.wordBreak = 'break-all';
+          tblCustomDiv.style.whiteSpace = 'pre-wrap';
+          tblCustomDiv.style.justifyContent = tblColumn.getAttribute('align') || '';
+          if (tblColumn.hasAttribute('fixed')) {
+            this.fixed(tblCustomDiv, tblColumn.getAttribute('fixed') || '', '#ffffff');
           }
-          d.append(cloneNode);
-          rowElement.append(d);
+          tblCustomDiv.append(cloneNode);
+          tblRowElement.append(tblCustomDiv);
         } else {
-          let td = document.createElement('div');
-          td.classList.add('td');
-          td.style.wordBreak = 'break-all';
-          td.style.whiteSpace = 'pre-wrap';
-          td.title = rowData[dataIndex];
-          td.style.justifyContent = cl.getAttribute('align') || '';
-          if (cl.hasAttribute('fixed')) {
-            this.fixed(td, cl.getAttribute('fixed') || '', '#ffffff');
+          let tblDiv = document.createElement('div');
+          tblDiv.classList.add('td');
+          tblDiv.style.wordBreak = 'break-all';
+          tblDiv.style.whiteSpace = 'pre-wrap';
+          tblDiv.title = rowData[dataIndex];
+          tblDiv.style.justifyContent = tblColumn.getAttribute('align') || '';
+          if (tblColumn.hasAttribute('fixed')) {
+            this.fixed(tblDiv, tblColumn.getAttribute('fixed') || '', '#ffffff');
           }
-          td.innerHTML = this.formatName(rowData[dataIndex]);
-          rowElement.append(td);
+          tblDiv.innerHTML = this.formatName(rowData[dataIndex]);
+          tblRowElement.append(tblDiv);
         }
       });
       if (this.selectable) {
         // If the table with selection is preceded by a 60px column
-        rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');
+        tblRowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');
       } else {
-        rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');
+        tblRowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');
       }
-      rowElement.onclick = (e) => {
+      tblRowElement.onclick = (e) => {
         this.dispatchEvent(
           new CustomEvent('row-click', {
             detail: {
@@ -764,15 +764,15 @@ export class LitTable extends HTMLElement {
                 if (isSelected) {
                   this.clearAllSelection(rowData);
                 }
-                this.setSelectedRow(rowData.isSelected, [rowElement]);
+                this.setSelectedRow(rowData.isSelected, [tblRowElement]);
               },
             },
             composed: true,
           })
         );
       };
-      this.normalDs.push(rowElement);
-      this.tbodyElement!.append(rowElement);
+      this.normalDs.push(tblRowElement);
+      this.tbodyElement!.append(tblRowElement);
     });
   }
 
@@ -795,117 +795,117 @@ export class LitTable extends HTMLElement {
     let offsetVal = offset;
     const drawRow = (arr: any, parentNode: any) => {
       arr.forEach((rowData: any) => {
-        let rowElement = document.createElement('div');
-        rowElement.classList.add('tr');
+        let treeTblRowElement = document.createElement('div');
+        treeTblRowElement.classList.add('tr');
         // @ts-ignore
-        rowElement.data = rowData;
+        treeTblRowElement.data = rowData;
         let gridTemplateColumns: Array<any> = [];
         if (this.selectable) {
-          let box = document.createElement('div');
-          box.style.display = 'flex';
-          box.style.justifyContent = 'center';
-          box.style.alignItems = 'center';
-          box.classList.add('td');
+          let treeTblDiv = document.createElement('div');
+          treeTblDiv.style.display = 'flex';
+          treeTblDiv.style.justifyContent = 'center';
+          treeTblDiv.style.alignItems = 'center';
+          treeTblDiv.classList.add('td');
           let checkbox = document.createElement('lit-checkbox');
           checkbox.classList.add('row-checkbox');
           checkbox.onchange = (e: any) => {
             if (e.detail.checked) {
-              rowElement.setAttribute('checked', '');
+              treeTblRowElement.setAttribute('checked', '');
             } else {
-              rowElement.removeAttribute('checked');
+              treeTblRowElement.removeAttribute('checked');
             }
             const changeChildNode = (rowElement: any, checked: any) => {
               let id = rowElement.getAttribute('id');
               let pid = rowElement.getAttribute('pid');
-              this.shadowRoot!.querySelectorAll(`div[pid=${id}]`).forEach((a) => {
+              this.shadowRoot!.querySelectorAll(`div[pid=${id}]`).forEach((element) => {
                 // @ts-ignore
-                a.querySelector('.row-checkbox')!.checked = checked;
+                element.querySelector('.row-checkbox')!.checked = checked;
                 if (checked) {
-                  a.setAttribute('checked', '');
+                  element.setAttribute('checked', '');
                 } else {
-                  a.removeAttribute('checked');
+                  element.removeAttribute('checked');
                 }
-                changeChildNode(a, checked);
+                changeChildNode(element, checked);
               });
             };
-            changeChildNode(rowElement, e.detail.checked);
+            changeChildNode(treeTblRowElement, e.detail.checked);
           };
-          box.appendChild(checkbox);
-          rowElement.appendChild(box);
+          treeTblDiv.appendChild(checkbox);
+          treeTblRowElement.appendChild(treeTblDiv);
         }
-        this.tableColumns!.forEach((cl, index) => {
-          let dataIndex = cl.getAttribute('data-index');
-          let td;
+        this.tableColumns!.forEach((treeTblColumn, index) => {
+          let dataIndex = treeTblColumn.getAttribute('data-index');
+          let treeTblEl;
           if (index !== 0) {
-            gridTemplateColumns.push(cl.getAttribute('width') || '1fr');
-            if (cl.template) {
+            gridTemplateColumns.push(treeTblColumn.getAttribute('width') || '1fr');
+            if (treeTblColumn.template) {
               // @ts-ignore
-              let cloneNode = cl.template.render(rowData).content.cloneNode(true);
-              td = document.createElement('div');
-              td.classList.add('td');
-              td.style.wordBreak = 'break-all';
-              td.style.justifyContent = cl.getAttribute('align') || '';
-              if (cl.hasAttribute('fixed')) {
-                this.fixed(td, cl.getAttribute('fixed') || '', '#ffffff');
+              let cloneNode = treeTblColumn.template.render(rowData).content.cloneNode(true);
+              treeTblEl = document.createElement('div');
+              treeTblEl.classList.add('td');
+              treeTblEl.style.wordBreak = 'break-all';
+              treeTblEl.style.justifyContent = treeTblColumn.getAttribute('align') || '';
+              if (treeTblColumn.hasAttribute('fixed')) {
+                this.fixed(treeTblEl, treeTblColumn.getAttribute('fixed') || '', '#ffffff');
               }
-              td.append(cloneNode);
+              treeTblEl.append(cloneNode);
             } else {
-              td = document.createElement('div');
-              td.classList.add('td');
-              td.style.wordBreak = 'break-all';
-              td.style.justifyContent = cl.getAttribute('align') || '';
-              if (cl.hasAttribute('fixed')) {
-                this.fixed(td, cl.getAttribute('fixed') || '', '#ffffff');
+              treeTblEl = document.createElement('div');
+              treeTblEl.style.justifyContent = treeTblColumn.getAttribute('align') || '';
+              treeTblEl.style.wordBreak = 'break-all';
+              treeTblEl.classList.add('td');
+              if (treeTblColumn.hasAttribute('fixed')) {
+                this.fixed(treeTblEl, treeTblColumn.getAttribute('fixed') || '', '#ffffff');
               }
               // @ts-ignore
-              td.innerHTML = this.formatName(rowData[dataIndex]);
+              treeTblEl.innerHTML = this.formatName(rowData[dataIndex]);
             }
-            rowElement.append(td);
+            treeTblRowElement.append(treeTblEl);
           } else {
-            this.treeElement!.style.width = cl.getAttribute('width') || '260px';
+            this.treeElement!.style.width = treeTblColumn.getAttribute('width') || '260px';
             let treeElement = document.createElement('div');
             treeElement.classList.add('tree-first-body');
-            if (cl.template) {
+            if (treeTblColumn.template) {
               // @ts-ignore
-              let cloneNode = cl.template.render(rowData).content.cloneNode(true);
-              td = document.createElement('div');
-              td.classList.add('td');
-              td.style.justifyContent = cl.getAttribute('align') || '';
-              if (cl.hasAttribute('fixed')) {
-                this.fixed(td, cl.getAttribute('fixed') || '', '#ffffff');
+              let firstCloneNode = treeTblColumn.template.render(rowData).content.cloneNode(true);
+              treeTblEl = document.createElement('div');
+              treeTblEl.classList.add('td');
+              treeTblEl.style.justifyContent = treeTblColumn.getAttribute('align') || '';
+              if (treeTblColumn.hasAttribute('fixed')) {
+                this.fixed(treeTblEl, treeTblColumn.getAttribute('fixed') || '', '#ffffff');
               }
-              td.append(cloneNode);
+              treeTblEl.append(firstCloneNode);
             } else {
-              td = document.createElement('div');
-              td.classList.add('td');
-              td.style.justifyContent = cl.getAttribute('align') || '';
-              if (cl.hasAttribute('fixed')) {
-                this.fixed(td, cl.getAttribute('fixed') || '', '#ffffff');
+              treeTblEl = document.createElement('div');
+              treeTblEl.style.justifyContent = treeTblColumn.getAttribute('align') || '';
+              treeTblEl.classList.add('td');
+              if (treeTblColumn.hasAttribute('fixed')) {
+                this.fixed(treeTblEl, treeTblColumn.getAttribute('fixed') || '', '#ffffff');
               }
               // @ts-ignore
-              td.innerHTML = this.formatName(rowData[dataIndex]);
+              treeTblEl.innerHTML = this.formatName(rowData[dataIndex]);
             }
             if (rowData.children && rowData.children.length > 0) {
-              let btn = document.createElement('lit-icon');
-              btn.classList.add('tree-icon');
+              let treeTblIcon = document.createElement('lit-icon');
+              treeTblIcon.classList.add('tree-icon');
               // @ts-ignore
-              btn.name = 'minus-square';
-              treeElement.append(btn);
-              treeElement.append(td);
+              treeTblIcon.name = 'minus-square';
+              treeElement.append(treeTblIcon);
+              treeElement.append(treeTblEl);
               treeElement.style.paddingLeft = offsetVal - 30 + 'px';
             } else {
-              treeElement.append(td);
+              treeElement.append(treeTblEl);
               treeElement.style.paddingLeft = offsetVal + 'px';
             }
             this.treeElement!.append(treeElement);
           }
         });
         if (this.selectable) {
-          rowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');
+          treeTblRowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' ');
         } else {
-          rowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');
+          treeTblRowElement.style.gridTemplateColumns = gridTemplateColumns.join(' ');
         }
-        rowElement.onclick = (e) => {
+        treeTblRowElement.onclick = (e) => {
           this.dispatchEvent(
             new CustomEvent('row-click', {
               detail: rowData,
@@ -913,11 +913,11 @@ export class LitTable extends HTMLElement {
             })
           );
         };
-        rowElement.style.cursor = 'pointer';
-        parentNode.append(rowElement);
-        rowElement.setAttribute('id', rowData[ids[0]]);
-        rowElement.setAttribute('pid', rowData[ids[1]]);
-        rowElement.setAttribute('expend', '');
+        treeTblRowElement.style.cursor = 'pointer';
+        parentNode.append(treeTblRowElement);
+        treeTblRowElement.setAttribute('id', rowData[ids[0]]);
+        treeTblRowElement.setAttribute('pid', rowData[ids[1]]);
+        treeTblRowElement.setAttribute('expend', '');
         if (rowData.children && rowData.children.length > 0) {
           offsetVal = offsetVal + offset;
           drawRow(rowData.children, parentNode);
@@ -986,10 +986,13 @@ export class LitTable extends HTMLElement {
     this.tbodyElement && (this.tbodyElement.style.height = totalHeight + (this.isScrollXOutSide ? 0 : 0) + 'px');
     this.tableElement &&
       (this.tableElement.onscroll = (event) => {
-        let top = this.tableElement!.scrollTop;
+        let tblScrollTop = this.tableElement!.scrollTop;
         let skip = 0;
         for (let i = 0; i < visibleObjects.length; i++) {
-          if (visibleObjects[i].top <= top && visibleObjects[i].top + visibleObjects[i].height >= top) {
+          if (
+            visibleObjects[i].top <= tblScrollTop &&
+            visibleObjects[i].top + visibleObjects[i].height >= tblScrollTop
+          ) {
             skip = i;
             break;
           }
@@ -1071,9 +1074,9 @@ export class LitTable extends HTMLElement {
         let top = this.tableElement!.scrollTop;
         this.treeElement!.style.transform = `translateY(${top}px)`;
         let skip = 0;
-        for (let i = 0; i < visibleObjects.length; i++) {
-          if (visibleObjects[i].top <= top && visibleObjects[i].top + visibleObjects[i].height >= top) {
-            skip = i;
+        for (let index = 0; index < visibleObjects.length; index++) {
+          if (visibleObjects[index].top <= top && visibleObjects[index].top + visibleObjects[index].height >= top) {
+            skip = index;
             break;
           }
         }
@@ -1122,20 +1125,17 @@ export class LitTable extends HTMLElement {
           td.innerHTML = this.formatName(rowData.data[dataIndex]);
           td.dataIndex = dataIndex;
         }
-        if (rowData.data.children && rowData.data.children.length > 0) {
+        if (rowData.data.children && rowData.data.children.length > 0 && !rowData.data.hasNext) {
           let btn = this.createExpandBtn(rowData);
           td.title = rowData.data.objectName;
           td.insertBefore(btn, td.firstChild);
           td.style.paddingLeft = rowData.depth * 15 + 'px';
-        } else if (rowData.data.hasNext) {
+        }
+        if (rowData.data.hasNext) {
           td.title = rowData.data.objectName;
           let btn = this.createBtn(rowData);
           td.insertBefore(btn, td.firstChild);
           td.style.paddingLeft = 15 * rowData.depth + 'px';
-          btn.onclick = () => {
-            let indexOf = this.currentTreeDivList.indexOf(td);
-            this.dispatchRowClickEventIcon(rowData, [this.treeElement?.children[indexOf].children[indexOf] as LitIcon]);
-          };
         } else {
           td.style.paddingLeft = rowData.depth * 15 + 20 + 'px';
         }
@@ -1161,7 +1161,7 @@ export class LitTable extends HTMLElement {
         };
         td.onclick = () => {
           let indexOf = this.currentTreeDivList.indexOf(td);
-          this.dispatchRowClickEvent(rowData, [this.treeElement?.children[indexOf] as HTMLElement, newTableElement]);
+          this.dispatchRowClickEvent(rowData, [td, newTableElement]);
         };
         this.setHighLight(rowData.data.isSearch, td);
         this.treeElement!.style.width = column.getAttribute('width');
@@ -1221,51 +1221,38 @@ export class LitTable extends HTMLElement {
   createBtn(rowData: any) {
     let btn: any = document.createElement('lit-icon');
     btn.classList.add('tree-icon');
-    // @ts-ignore
-    if (rowData.expanded) {
+    if (rowData.data.expanded) {
       btn.name = 'plus-square';
     } else {
       btn.name = 'minus-square';
     }
-    if (!rowData.data.status && rowData.data.children.length > 0 && rowData.data.hasNext) {
-      btn.name = 'plus-square';
-    }
-    btn.onclick = (e: Event) => {
+    btn.addEventListener('click', (e: any) => {
       rowData.data.status = false;
       const resetNodeHidden = (hidden: boolean, rowData: any) => {
-        if (rowData.data.hasNext || rowData.data.children.length > 0) {
-          if (hidden) {
-            rowData.children.forEach((child: any) => {
-              child.rowHidden = true;
-              resetNodeHidden(hidden, child);
-            });
-          } else {
-            rowData.data.status = rowData.expanded;
-            rowData.children.forEach((child: any) => {
-              child.rowHidden = !rowData.expanded;
-              if (rowData.expanded) {
-                resetNodeHidden(hidden, child);
-              }
-            });
-          }
+        if (hidden) {
+          rowData.children.forEach((child: any) => {
+            child.rowHidden = false;
+          });
+        } else {
+          rowData.children.forEach((child: any) => {
+            child.rowHidden = true;
+            resetNodeHidden(hidden, child);
+          });
         }
       };
-      const foldNode = () => {
-        rowData.expanded = false;
+
+      if (rowData.data.expanded) {
+        rowData.data.status = true;
+        this.dispatchRowClickEventIcon(rowData, [btn]);
+        rowData.data.expanded = false;
         resetNodeHidden(true, rowData);
-      };
-      const expendNode = () => {
-        rowData.expanded = true;
-        resetNodeHidden(false, rowData);
-      };
-      if (rowData.expanded) {
-        foldNode();
       } else {
-        expendNode();
+        rowData.data.expanded = true;
+        rowData.data.status = false;
+        resetNodeHidden(false, rowData);
       }
       this.reMeauseHeight();
-      e.stopPropagation();
-    };
+    });
     return btn;
   }
 
@@ -1278,11 +1265,7 @@ export class LitTable extends HTMLElement {
     } else {
       btn.name = 'plus-square';
     }
-    if (!rowData.data.status && rowData.data.children.length > 0 && rowData.data.hasNext) {
-      btn.name = 'plus-square';
-    }
     btn.onclick = (e: Event) => {
-      rowData.data.status = false;
       const resetNodeHidden = (hidden: boolean, rowData: any) => {
         if (rowData.children.length > 0) {
           if (hidden) {
@@ -1291,10 +1274,8 @@ export class LitTable extends HTMLElement {
               resetNodeHidden(hidden, child);
             });
           } else {
-            rowData.data.status = rowData.expanded;
             rowData.children.forEach((child: any) => {
               child.rowHidden = !rowData.expanded;
-              rowData.data.status = true;
               if (rowData.expanded) {
                 resetNodeHidden(hidden, child);
               }
@@ -1302,18 +1283,13 @@ export class LitTable extends HTMLElement {
           }
         }
       };
-      const foldNode = () => {
+
+      if (rowData.expanded) {
         rowData.expanded = false;
         resetNodeHidden(true, rowData);
-      };
-      const expendNode = () => {
+      } else {
         rowData.expanded = true;
         resetNodeHidden(false, rowData);
-      };
-      if (rowData.expanded) {
-        foldNode();
-      } else {
-        expendNode();
       }
       this.reMeauseHeight();
       e.stopPropagation();
@@ -1446,22 +1422,16 @@ export class LitTable extends HTMLElement {
           firstElement.innerHTML = this.formatName(rowObject.data[dataIndex]);
           firstElement.title = rowObject.data[dataIndex];
         }
-        if (rowObject.children && rowObject.children.length > 0) {
+        if (rowObject.children && rowObject.children.length > 0 && !rowObject.data.hasNext) {
           let btn = this.createExpandBtn(rowObject);
           firstElement.insertBefore(btn, firstElement.firstChild);
           firstElement.style.paddingLeft = 15 * rowObject.depth + 'px';
-        } else if (rowObject.data.hasNext) {
+        }
+        if (rowObject.data.hasNext) {
           let btn = this.createBtn(rowObject);
           firstElement.title = rowObject.data.objectName;
           firstElement.insertBefore(btn, firstElement.firstChild);
           firstElement.style.paddingLeft = 15 * rowObject.depth + 'px';
-          btn.onclick = () => {
-            // @ts-ignore
-            let indexOf = this.currentTreeDivList.indexOf(firstElement);
-            this.dispatchRowClickEventIcon(rowObject, [
-              this.treeElement?.children[indexOf].children[indexOf] as LitIcon,
-            ]);
-          };
         } else {
           firstElement.style.paddingLeft = 20 + 15 * rowObject.depth + 'px';
         }
@@ -1694,6 +1664,13 @@ export class LitTable extends HTMLElement {
         detail: {
           ...rowObject.data,
           data: rowObject.data,
+          callBack: (isSelected: boolean) => {
+            //是否爲单选
+            if (isSelected) {
+              this.clearAllSelection(rowObject.data);
+            }
+            this.setSelectedRow(rowObject.data.isSelected, elements);
+          },
         },
         composed: true,
       })
diff --git a/ide/src/command/Cmd.ts b/ide/src/command/Cmd.ts
index 3e430c1cb507d7b95914ae701e619797e3408451..7bc953c5d994f0b253bd96788957212a23e9bef8 100644
--- a/ide/src/command/Cmd.ts
+++ b/ide/src/command/Cmd.ts
@@ -14,21 +14,14 @@
  */
 
 export class Cmd {
-  /**
-   * exec objdump to disassembling binary and find addr to show 100 line
-   * @param command obj dump command
-   * @param addr addr of select line
-   * @param callback result callback
-   */
-  static execObjDump(command: string, addr: string, callback: Function) {
-    const data = { cmd: command, addr: addr };
-    let uri = `http://${window.location.host.split(':')[0]}:${window.location.port}/exec`;
+
+  static CmdSendPostUtils(uri: string, callback: Function, requestData: any) {
     fetch(uri, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify(data),
+      body: JSON.stringify(requestData),
     }).then((response) => {
       if (response.ok) {
         let result = response.text();
@@ -39,26 +32,25 @@ export class Cmd {
     });
   }
 
+  /**
+   * exec objdump to disassembling binary and find addr to show 100 line
+   * @param command obj dump command
+   * @param addr addr of select line
+   * @param callback result callback
+   */
+  static execObjDump(command: string, addr: string, callback: Function) {
+    const data = { cmd: command, addr: addr };
+    let uri = `http://${window.location.host.split(':')[0]}:${window.location.port}/exec`;
+    Cmd.CmdSendPostUtils(uri, callback, data);
+  }
+
   static execHdcCmd(command: string, callback: Function) {
     const data = {
       cmd: command,
       tag: 'shell',
     };
     let uri = `http://${window.location.host.split(':')[0]}:${window.location.port}/hdcCmd`;
-    fetch(uri, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    }).then((response) => {
-      if (response.ok) {
-        let result = response.text();
-        result.then((output) => {
-          callback(output);
-        });
-      }
-    });
+    Cmd.CmdSendPostUtils(uri, callback, data);
   }
 
   static async execFileRecv(command: string, filePath: string, callback: Function) {
@@ -86,20 +78,7 @@ export class Cmd {
       serialNumber: serialNumber,
     };
     let uri = `http://${window.location.host.split(':')[0]}:${window.location.port}/hdcCmd`;
-    fetch(uri, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    }).then((response) => {
-      if (response.ok) {
-        let result = response.text();
-        result.then((output) => {
-          callback(output);
-        });
-      }
-    });
+    Cmd.CmdSendPostUtils(uri, callback, data);
   }
 
   static formatString(string: string, params: string[]) {
diff --git a/ide/src/doc/md/quickstart_Import_so.md b/ide/src/doc/md/quickstart_Import_so.md
new file mode 100644
index 0000000000000000000000000000000000000000..0c13dc416b8fe176936ca07aa0954cfd1cf75635
--- /dev/null
+++ b/ide/src/doc/md/quickstart_Import_so.md
@@ -0,0 +1,146 @@
+# 调用栈可视化和不同库函数调用占比说明
+调用栈可视化可以将开发者编译的so符号化结果展示出来，不同库函数的占比通过饼图的方式展示出来。
+## Native Memory文件的不同库函数占比
+Native Memory分为三级统计，分别按照内存分配的类型(Alloc/Mmap)，lib库，函数进行统计分析。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
+点击Analysis的Tab页，先以内存分配的类型去统计。
+![GitHub Logo](../../figures/ImportSo/Native_import_all.jpg)
++     Memory Type：事件类型。
++     Existing：框选区域内申请没有释放的大小。
++     #Existing：框选区域内申请没有释放的次数。
++     Total Bytes：框选区间内申请的大小。
++     #Total：框选区间内申请的次数。
++     Transient：框选区域内释放的大小。
++     #Transient：框选区域内释放的次数。
++     %：各个显示项的占比。
+以lib库去统计，如图显示的是AllocEvent的so占比的饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/Native_import_so_Existing.jpg)
++     Library：So名称。
++     Existing：框选区域内申请没有释放的大小。
++     #Existing：框选区域内申请没有释放的次数。
++     Total Bytes：框选区间内申请的大小。
++     #Total：框选区间内申请的次数。
++     Transient：框选区域内释放的大小。
++     #Transient：框选区域内释放的次数。
++     %：各个显示项的占比。
+以函数去统计，如图显示的是AllocEvent/libmali-bifrost-g52-g2p0-ohos.so的函数占比的饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/Native_import_so_function.jpg)
++     Function：函数名称。
++     Existing：框选区域内申请没有释放的大小。
++     #Existing：框选区域内申请没有释放的次数。
++     Total Bytes：框选区间内申请的大小。
++     #Total：框选区间内申请的次数。
++     Transient：框选区域内释放的大小。
++     #Transient：框选区域内释放的次数。
++     %：各个显示项的占比。
+## Hiperf文件的不同库函数占比
+Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。
+点击Analysis的Tab页，先以进程去统计。
+![GitHub Logo](../../figures/ImportSo/Hiperf_import_all.jpg)
++     ProcessName：进程名。
++     Weight：该进程下的调用方法的执行次数。
++     %：该进程下的调用方法的执行占比。
+以线程统计，如图显示的是hiperf进程下的线程的饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/Hiperf_import_thread.jpg)
++     ThreadName：线程名。
++     Weight：该线程下的调用方法的执行次数。
++     %：该线程下的调用方法的执行占比。
+以lib库统计，如图显示的是hiperf线程下的各so占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/Hiperf_import_lib.jpg)
++     Library：so的名称。
++     Weight：该so的调用方法的执行次数。
++     %：该so的调用方法的执行占比。
+以函数统计，如图显示的是ld-musl-aarch64.so.1下的各函数占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/Hiperf_import_Fuc.jpg)
++     Library：so的名称。
++     Weight：该so的调用方法的执行次数。
++     %：该so的调用方法的执行占比。
+## FileSystem文件的不同库函数占比
+FileSystem分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
+点击Analysis的Tab页，先以进程去统计。
+![GitHub Logo](../../figures/ImportSo/filesystem_import_process.jpg)
++     ProcessName：进程名。
++     Duration：总时长。
++     %：总时长占比。
+以系统调用类型统计，如图显示的是grep进程下的Read和Write系统调用的时长占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/filesystem_import_Type.jpg)
++     Type：系统调用类型(Read和Write)。
++     Duration：系统调用的总时长。
++     %：总时长占比。
+以线程统计，如图显示的是系统调用是Read类型的线程的占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/filesystem_import_thread.jpg)
++     ThreadName：线程名。
++     Duration：该线程的系统调用的总时长。
++     %：总时长占比。
+以lib库统计，如图显示toybox的lib库的占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/filesystem_import_lib.jpg)
++     Library：so的名称。
++     Duration：该so的系统调用的总时长。
++     %：总时长占比。
+以函数统计，如图显示0x558111afbc (toybox)的函数占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/filesystem_import_func.jpg)
++     Function：函数名称。
++     Duration：该函数的系统调用的总时长。
++     %：总时长占比。
+## Bio文件的不同库函数占比
+Bio分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非submit_bio第一条函数及其lib为每次分配归属的函数及lib库。
+点击Analysis的Tab页，先以进程去统计。
+![GitHub Logo](../../figures/ImportSo/bio_import_process.jpg)
++     ProcessName：进程名。
++     Duration：总时长。
++     %：总时长占比。
+以系统调用类型统计，如图显示的是jbd2/mmcblk0p11进程下的DATA_WRITE系统调用的时长占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/bio_import_Type.jpg)
++     Type：系统调用类型。
++     Duration：系统调用的总时长。
++     %：总时长占比。
+以线程统计，如图显示的是系统调用是DATA_WRITE类型的线程的占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/bio_import_thread.jpg)
++     ThreadName：线程名。
++     Duration：该线程的系统调用的总时长。
++     %：总时长占比。
+以lib库统计，如图显示kallsyms的lib库的占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/bio_import_lib.jpg)
++     Library：so的名称。
++     Duration：该so的系统调用的总时长。
++     %：总时长占比。
+以函数统计，如图显示submit_bh的函数占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/bio_import_func.jpg)
++     Function：函数名称。
++     Duration：该函数的系统调用的总时长。
++     %：总时长占比。
+## Page Fault文件的不同库函数占比
+Page Fault分为五级统计，分别按照进程，系统调用类型，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈，从栈顶往下查找，非musl库与c++库的第一条函数及其lib为每次分配归属的函数及lib库。
+点击Analysis的Tab页，先以进程去统计。
+![GitHub Logo](../../figures/ImportSo/pagefault_import_process.jpg)
++     ProcessName：进程名。
++     Duration：总时长。
++     %：总时长占比。
+以系统调用类型统计，如图显示的是1.ui进程下的File Backed In和Copy On Writer系统调用的时长占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/pagefault_import_Type.jpg)
++     Type：系统调用类型。
++     Duration：系统调用的总时长。
++     %：总时长占比。
+以线程统计，如图显示的是系统调用是File Backed In类型的线程的占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/pagefault_import_thread.jpg)
++     ThreadName：线程名。
++     Duration：该线程的系统调用的总时长。
++     %：总时长占比。
+以lib库统计，如图显示各lib库的占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/pagefault_import_lib.jpg)
++     Library：so的名称。
++     Duration：该so的系统调用的总时长。
++     %：总时长占比。
+以函数统计，如图显示各函数占比饼图和Table表。
+![GitHub Logo](../../figures/ImportSo/pagefault_import_func.jpg)
++     Function：函数名称。
++     Duration：该函数的系统调用的总时长。
++     %：总时长占比。
+## 可导入符号表说明
+符号表导入适用于所有支持调用栈的Tab页，选择一个文件夹，获取文件下及其子文件夹的所有so文件，更新数据库中符号数据。文件夹内so的格式需要与在设备上的路径一致，例如下图中，选择的文件夹为import，选择导入的libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是import/system/lib64/libnative_hook.z.so。
+![GitHub Logo](../../figures/ImportSo/so_import_dir.jpg)
+以NativeMemory举例，导入NativeMemory文件，点击Call info的Tab页，在搜索框中输入libnative_hook.z.so，会发现该so下的调用栈没有符号化完全。
+![GitHub Logo](../../figures/ImportSo/so_import_nativehook.jpg)
+将本地编译的so通过导入按钮导入，本地导入路径是import/system/lib64/libnative_hook.z.so，红框处是导入按钮
+![GitHub Logo](../../figures/ImportSo/so_import_local.jpg)
+导入so以后，在搜索框中输入libnative_hook.z.so，会发现符号化数据已经更新
+![GitHub Logo](../../figures/ImportSo/so_import_new.jpg)
\ No newline at end of file
diff --git a/ide/src/doc/md/quickstart_Js_memory.md b/ide/src/doc/md/quickstart_Js_memory.md
index cbdf468c83683df9cf98011854ee668589fa67a2..88b52b044665df76445b2b6fc06a7dd1f649c4ab 100644
--- a/ide/src/doc/md/quickstart_Js_memory.md
+++ b/ide/src/doc/md/quickstart_Js_memory.md
@@ -35,8 +35,30 @@ Summary的Tab页，主要显示了总览视图，通过类的名称来分组显
                     第二层为该类的实例名+id，id唯一。
                     第三层以下为实例中的成员变量。
 +     Distance：使用节点的最短简单路径显示到根的距离。
-+     ShallowSize：类创建的所有对象的本身的内存大小之和。
-+     RetainedSize：对象以及其相关的对象一起被删除后所释放的内存大小，同一组对象之间的最大保留大小。
+    例如下图其中GC Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为1000000。A、B、C、D、E、F、H为调用节点；以E为例，从A->D->F>E,distance为4，从A->D->E，depth为3;从B->E,depth为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。
+    ![GitHub Logo](../../figures/Jsmemory/js_sample.png)
++     ShallowSize：是指实例自身占用的内存, 可以理解为保存该'数据结构'需要多少内存。
+        例如下面的代码。：
+``` javascript
+    class X {
+    a: number = 0;
+    b: boolean = false;
+    c: ChartStruct = new ChartStruct();
+    }
+```
+        假设当前是在64位系统, 对于类X来说, 一个X实例的Shallow Size为:
+
+        类定义的8byte
+        没有继承其他类, 所以没有父类fields
+        a,b变量为基本类型number,boolean型, js中都为8byte; 
+        c变量是引用类型, 和它是否指向具体实例无关, 固定占4byte
+
++     RetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以同时被回收的实例的Shallow Size之和。
+    * 如上图所示；假设所有的节点Size都为1,按照A->B->C的顺序回收。
+        * 当A被回收时，H被D调用，先不回收，D没有被调用，D回收，由于D被回收，H没有被调用，H回收，由于F被C调用，E被B、F也调用了，所以不能被回收,此时A的Retained Size为3,D的Retained Size为2, H的Retained Size为1。
+        * 当B被回收时，由于E被F占用，所以E不会被回收，此时B的Retained Size为1。
+        * 当C被回收时，F没有人被调用，E没有被调用,所以都会被回收，此时C的Retained Size为3，F的Retained Size为2, E的Retained Size为1。
+
 Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。
 ![GitHub Logo](../../figures/Jsmemory/JsComparison.jpg)
 +     #Constructor：类创建的所有对象，类名与id相同视为同一个实例，其中
diff --git a/ide/src/doc/quickstart_Import_so.html b/ide/src/doc/quickstart_Import_so.html
new file mode 100644
index 0000000000000000000000000000000000000000..043098e1bf40bf14a2b917971087bec9ece8653a
--- /dev/null
+++ b/ide/src/doc/quickstart_Import_so.html
@@ -0,0 +1,1232 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>quickstart_Import_so</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        code[class*="smartperf-"],
+        pre[class*="smartperf-"] {
+            color: #333333;
+            background: none;
+            font-family: Helvetica;
+            line-height: 1.6;
+            text-align: left;
+            white-space: pre;
+            -moz-tab-size: 9;
+            -o-tab-size: 9;
+            tab-size: 8;
+            -webkit-hyphens: none;
+            -moz-hyphens: none;
+            -ms-hyphens: none;
+            hyphens: none;
+        }
+
+        /* Code blocks */
+        pre[class*="smartperf-"] {
+            padding: .9em;
+            overflow: auto;
+            border-radius: 2px;
+            background: #f5f5f4;
+        }
+
+        /* Inline code */
+        :not(pre) > code[class*="smartperf-"] {
+            white-space: normal;
+            background: #fcf8f8;
+            padding: 1px .2em;
+            border-radius: 1px .3em;
+        }
+
+        .tk.comment,
+        .tk.blockquote {
+            color: #8c918c;
+        }
+
+        .tk.cdata {
+            color: #183898;
+        }
+
+        .tk.doctype,
+        .tk.punctuation,
+        .tk.variable,
+        .tk.macro.property {
+            color: #424242;
+        }
+
+        .tk.operator,
+        .tk.important,
+        .tk.keyword,
+        .tk.rule,
+        .tk.builtin {
+            color: #b71d65;
+        }
+
+        .tk.string,
+        .tk.url,
+        .tk.regex,
+        .tk.attr-value {
+            color: #16338d;
+        }
+
+        .tk.property,
+        .tk.number,
+        .tk.boolean,
+        .tk.entity,
+        .tk.atrule,
+        .tk.constant,
+        .tk.symbol,
+        .tk.command,
+        .tk.code {
+            color: #037aa2;
+        }
+
+        .tk.tag,
+        .tk.selector,
+        .tk.prolog {
+            color: #69ad62;
+        }
+
+        .tk.function,
+        .tk.namespace,
+        .tk.pseudo-element,
+        .tk.class,
+        .tk.class-name,
+        .tk.pseudo-class,
+        .tk.id,
+        .tk.url-reference .tk.variable,
+        .tk.attr-name {
+            color: #775d9d;
+        }
+
+        .tk.entity {
+            cursor: help;
+        }
+
+        .tk.title,
+        .tk.title .tk.punctuation {
+            font-weight: bold;
+            color: #1a3773;
+        }
+
+        .tk.list {
+            color: #f56940;
+        }
+
+        .tk.inserted {
+            background-color: #eaffea;
+            color: #509b2f;
+        }
+
+        .tk.deleted {
+            background-color: #fae1e1;
+            color: #ad2d06;
+        }
+
+        .tk.bold {
+            font-weight: bolder;
+        }
+
+        .tk.italic {
+            font-style: normal;
+        }
+
+
+        /* JSON */
+        .smartperf-json .tk.property {
+            color: #19358c;
+        }
+
+        .smartperf-markup .tk.tag .tk.punctuation {
+            color: #2c2b2b;
+        }
+
+        /* CSS */
+        code.smartperf-css,
+        .smartperf-css .tk.function {
+            color: #047ca4;
+        }
+
+        /* YAML */
+        .smartperf-yaml .tk.atrule {
+            color: #609b5a;
+        }
+
+        code.smartperf-yaml {
+            color: #153491;
+        }
+
+        /* Ruby */
+        .smartperf-ruby .tk.function {
+            color: #3f3e3e;
+        }
+
+        /* Markdown */
+        .smartperf-markdown .tk.url {
+            color: #6e5298;
+        }
+
+        /* Makefile */
+        .smartperf-makefile .tk.symbol {
+            color: #6c5393;
+        }
+
+        .smartperf-makefile .tk.variable {
+            color: #183488;
+        }
+
+        .smartperf-makefile .tk.builtin {
+            color: #027ba4;
+        }
+
+        /* Bash */
+        .smartperf-bash .tk.keyword {
+            color: #027fa9;
+        }
+
+        /* highlight */
+        pre[dl] {
+            position: relative;
+            padding: 1em 1px 1px .9em;
+        }
+
+        pre[dl] .line-highlight-wrapper {
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            background-color: transparent;
+            display: block;
+            width: 99%;
+        }
+
+        pre[dl] .line-highlight {
+            position: absolute;
+            left: 1px;
+            right: 1px;
+            padding: inherit;
+            margin-top: 0.9em;
+            background: hsla(25, 21%, 50%, .08);
+            background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
+            pointer-events: none;
+            line-height: inherit;
+            white-space: pre;
+        }
+
+        pre[dl] .line-highlight:before,
+        pre[dl] .line-highlight[data-end]:after {
+            content: attr(data-start);
+            position: absolute;
+            text-shadow: none;
+            top: .3em;
+            left: .7em;
+            min-width: .9em;
+            padding: 1px .6em;
+            background-color: hsla(24, 20%, 47%, 0.4);
+            color: hsl(20, 11%, 95%);
+            text-align: center;
+            vertical-align: .2em;
+            border-radius: 10000px;
+            box-shadow: 1px 2px #fdf6f6;
+        }
+
+        pre[dl] .line-highlight[data-end]:after {
+            content: attr(data-end);
+            top: auto;
+            bottom: .5em;
+        }
+
+        html body {
+            line-height: 1.6;
+            font-size: 16px;
+            color: #333333;
+            overflow: initial;
+            background-color: #FFFFFF;
+            word-wrap: break-word;
+            font-family: Helvetica;
+            box-sizing: border-box;
+        }
+
+        html body > :first-child {
+            margin-top: 0px
+        }
+
+        html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
+            margin-top: 1em;
+            margin-bottom: 16px;
+            color: #000000;
+            line-height: 1.2;
+        }
+
+        html body h1 {
+            font-weight: 300;
+            font-size: 2.25em;
+            padding-bottom: .3em
+        }
+
+        html body h2 {
+            font-weight: 410;
+            font-size: 1.74em;
+            padding-bottom: .2em
+        }
+
+        html body h3 {
+            font-size: 1.6em;
+            font-weight: 501
+        }
+
+        html body h4 {
+            font-size: 1.26em;
+            font-weight: 601
+        }
+
+        html body h5 {
+            font-size: 1.2em;
+            font-weight: 601
+        }
+
+        html body h6 {
+            font-size: 0.9em;
+            font-weight: 601
+        }
+
+        html body h1, html body h2, html body h3, html body h4, html body h5 {
+            font-weight: 601
+        }
+
+        html body h5 {
+            font-size: 0.9em
+        }
+
+        html body h6 {
+            color: #5c5c5c
+        }
+
+        html body strong {
+            color: #090909
+        }
+
+        html body del {
+            color: #525252
+        }
+
+        html body a:not([href]) {
+            color: inherit;
+            text-decoration: none
+        }
+
+        html body a {
+            color: #0192da;
+            text-decoration: none
+        }
+
+        html body a:hover {
+            color: #029dea;
+            text-decoration: none
+        }
+
+        html body img {
+            max-width: 99%
+        }
+
+        html body > p {
+            margin-top: 1px;
+            margin-bottom: 15px;
+            word-wrap: break-word
+        }
+
+        html body > ul, html body > ol {
+            margin-bottom: 15px
+        }
+
+        html body ul, html body ol {
+            padding-left: 1.9em
+        }
+
+        html body ul.no-list, html body ol.no-list {
+            padding: 0px;
+            list-style-type: none
+        }
+
+        html body ul ul, html body ul ol, html body ol ol, html body ol ul {
+            margin-top: 1px;
+            margin-bottom: 1px
+        }
+
+        html body li {
+            margin-bottom: 1px
+        }
+
+        html body li.task-list-item {
+            list-style: none
+        }
+
+        html body li > p {
+            margin-top: 1px;
+            margin-bottom: 1px
+        }
+
+        html body .task-list-item-checkbox {
+            margin: 0 .3em .24em -1.7em;
+            vertical-align: middle
+        }
+
+        html body .task-list-item-checkbox:hover {
+            cursor: pointer
+        }
+
+        html body blockquote {
+            padding: 0.1px 15px 0 0.1px;
+            font-size: inherit;
+            color: #5c5c5c;
+            margin: 16px 0.1px 0 0.1px;
+            border-left: 3px solid #cbc9c9;
+            background-color: #e8e6e6;
+        }
+
+        html body blockquote > :first-child {
+            margin-top: 0.2px
+        }
+
+        html body blockquote > :last-child {
+            margin-bottom: 0.1px;
+        }
+
+        html body hr {
+            height: 5px;
+            background-color: #cbcaca;
+            margin: 32px 0 0.1px 0;
+            border: 0 none;
+        }
+
+        html body table {
+            overflow: auto;
+            border-collapse: collapse;
+            margin: 15px 0.1px 20px 0.1px;
+            border-spacing: 0;
+        }
+
+        html body table th {
+            font-weight: bold;
+            color: #000000
+        }
+
+        html body table td, html body table th {
+            border: 1px solid #d6d6d6;
+            padding: 2px 14px
+        }
+
+        html body dl {
+            padding: 0px
+        }
+
+        html body dl dt {
+            padding: 0px;
+            margin-top: 15px;
+            font-size: 0.9em;
+            font-style: italic;
+            font-weight: bold
+        }
+
+        html body dl dd {
+            padding: 0px 17px;
+            margin-bottom: 17px
+        }
+
+        html body code {
+            font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+            font-size: .86em !important;
+            color: #000000;
+            background-color: #f0f0f0;
+            border-radius: 4px;
+            padding: .3em 0px
+        }
+
+        html body code::before, html body code::after {
+            letter-spacing: -0.1em;
+            content: "\00a0"
+        }
+
+        html body pre > code {
+            padding: 1px;
+            margin: 0px;
+            font-size: .86em !important;
+            word-break: normal;
+            white-space: pre;
+            background: transparent;
+            border: 0px
+        }
+
+        html body .highlight {
+            margin-bottom: 17px
+        }
+
+        html body .highlight pre, html body pre {
+            padding: 0.9em;
+            overflow: auto;
+            font-size: .86em !important;
+            line-height: 1.46;
+            border: #d6d6d6;
+            border-radius: 4px
+        }
+
+        html body .highlight pre {
+            margin-bottom: 0px;
+            word-break: normal
+        }
+
+        html body pre code, html body pre tt {
+            display: inline;
+            max-width: initial;
+            padding: 1px;
+            margin: 1px;
+            overflow: initial;
+            line-height: inherit;
+            word-wrap: normal;
+            background-color: transparent;
+            border: 1px
+        }
+
+        html body pre code:before, html body pre tt:before, html body pre code:after, html body pre tt:after {
+            content: normal
+        }
+
+        html body p, html body blockquote, html body ul, html body ol, html body dl, html body pre {
+            margin-top: 1px;
+            margin-bottom: 17px
+        }
+
+        html body kbd {
+            color: #000000;
+            border: 3px solid #d6d6d6;
+            border-bottom: 3px solid #c7c7c7;
+            padding: 3px 5px;
+            background-color: #f0f0f0;
+            border-radius: 2px
+        }
+
+        @media print {
+            html body {
+                background-color: #ffffff
+            }
+
+            html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
+                color: #000000;
+                page-break-after: avoid
+            }
+
+            html body blockquote {
+                color: #5c5c53
+            }
+
+            html body pre {
+                page-break-inside: avoid
+            }
+
+            html body table {
+                display: table
+            }
+
+            html body img {
+                display: block;
+                max-width: 99%;
+                max-height: 99%
+            }
+
+            html body pre, html body code {
+                word-wrap: break-word;
+                white-space: pre
+            }
+        }
+
+        .smartperf-preview {
+            width: 99%;
+            height: 99%;
+            box-sizing: border-box
+        }
+
+        .smartperf-preview .pagebreak, .smartperf-preview .newpage {
+            page-break-before: always
+        }
+
+        .smartperf-preview pre.line-numbers {
+            position: relative;
+            padding-left: 3.7em;
+            counter-reset: linenumber
+        }
+
+        .smartperf-preview pre.line-numbers > code {
+            position: relative
+        }
+
+        .smartperf-preview pre.line-numbers .line-numbers-rows {
+            position: absolute;
+            pointer-events: none;
+            top: 0.9em;
+            font-size: 99%;
+            left: 1px;
+            width: 3em;
+            letter-spacing: -1px;
+            border-right: 1px solid #999;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none
+        }
+
+        .smartperf-preview pre.line-numbers .line-numbers-rows > span {
+            pointer-events: none;
+            display: block;
+            counter-increment: linenumber
+        }
+
+        .smartperf-preview pre.line-numbers .line-numbers-rows > span:before {
+            content: counter(linenumber);
+            color: #999;
+            display: block;
+            padding-right: .79em;
+            text-align: right
+        }
+
+        .smartperf-preview .mathjax-exps .MathJax_Display {
+            text-align: center !important
+        }
+
+        .smartperf-preview:not([for="preview"]) .code-chunk .btn-group {
+            display: none
+        }
+
+        .smartperf-preview:not([for="preview"]) .code-chunk .status {
+            display: none
+        }
+
+        .smartperf-preview:not([for="preview"]) .code-chunk .output-div {
+            margin-bottom: 16px
+        }
+
+        .scrollbar-style::-webkit-scrollbar {
+            width: 8px
+        }
+
+        .scrollbar-style::-webkit-scrollbar-track {
+            border-radius: 9px;
+            background-color: transparent
+        }
+
+        .scrollbar-style::-webkit-scrollbar-thumb {
+            border-radius: 6px;
+            background-color: rgba(150, 150, 150, 1);
+            border: 4px solid rgba(150, 150, 150, 1);
+            background-clip: content-box
+        }
+
+        html body[for="html-export"]:not([dpm]) {
+            position: relative;
+            width: 99%;
+            height: 99%;
+            top: 1px;
+            left: 1px;
+            margin: 1px;
+            padding: 1px;
+            overflow: auto
+        }
+
+        html body[for="html-export"]:not([dpm]) .smartperf-preview {
+            position: relative;
+            top: 1px
+        }
+
+        @media screen and (min-width: 914px) {
+            html body[for="html-export"]:not([dpm]) .smartperf-preview {
+                padding: 2em calc(50% - 458px + 2em)
+            }
+        }
+
+        @media screen and (max-width: 914px) {
+            html body[for="html-export"]:not([dpm]) .smartperf-preview {
+                padding: 1.9em
+            }
+        }
+
+        @media screen and (max-width: 450px) {
+            html body[for="html-export"]:not([dpm]) .smartperf-preview {
+                font-size: 15px !important;
+                padding: 1.1em
+            }
+        }
+
+        @media print {
+            html body[for="html-export"]:not([dpm]) #sidebar-toc-btn {
+                display: none
+            }
+        }
+
+        html body[for="html-export"]:not([dpm]) #sidebar-toc-btn {
+            position: fixed;
+            bottom: 9px;
+            left: 9px;
+            font-size: 28px;
+            cursor: pointer;
+            color: inherit;
+            z-index: 99;
+            width: 31px;
+            text-align: center;
+            opacity: .5
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] #sidebar-toc-btn {
+            opacity: 1
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc {
+            position: fixed;
+            top: 1px;
+            left: 1px;
+            width: 300px;
+            height: 99%;
+            padding: 32px 0 48px 0;
+            font-size: 14px;
+            box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
+            box-sizing: border-box;
+            overflow: auto;
+            background-color: inherit
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
+            width: 9px
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
+            border-radius: 11px;
+            background-color: transparent
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
+            border-radius: 6px;
+            background-color: rgba(150, 150, 150, 0.66);
+            border: 3px solid rgba(150, 150, 150, 0.66);
+            background-clip: content-box
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc a {
+            text-decoration: none
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc ul {
+            padding: 1px 1.7em;
+            margin-top: .9em
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc li {
+            margin-bottom: .8em
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc ul {
+            list-style-type: none
+        }
+
+        html body[for="html-export"]:not([dpm])[hsst] .smartperf-preview {
+            left: 301px;
+            width: calc(100% - 300px);
+            padding: 2em calc(50% - 457px - 150px);
+            margin: 1px;
+            box-sizing: border-box
+        }
+
+        @media screen and (max-width: 1274px) {
+            html body[for="html-export"]:not([dpm])[hsst] .smartperf-preview {
+                padding: 1.9em
+            }
+        }
+
+        @media screen and (max-width: 450px) {
+            html body[for="html-export"]:not([dpm])[hsst] .smartperf-preview {
+                width: 99%
+            }
+        }
+
+        html body[for="html-export"]:not([dpm]):not([hsst]) .smartperf-preview {
+            left: 50%;
+            transform: translateX(-50%)
+        }
+
+        html body[for="html-export"]:not([dpm]):not([hsst]) .md-sidebar-toc {
+            display: none
+        }
+
+
+    </style>
+</head>
+<body for="html-export" id="body">
+<div class="smartperf smartperf-preview  ">
+    <h1 class="mume-header fontColor">调用栈可视化和不同库函数调用占比说明</h1>
+
+    <p class="fontColor">调用栈可视化可以将开发者编译的so符号化结果展示出来，不同库函数的占比通过饼图的方式展示出来。</p>
+    <h2 class="mume-header fontColor">Native Memory文件的不同库函数占比</h2>
+
+    <p class="fontColor">Native
+        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">
+        <li>
+<pre class="smartperf-text fontColor light">Memory Type：事件类型。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Existing：框选区域内申请没有释放的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Existing：框选区域内申请没有释放的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Total Bytes：框选区间内申请的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Total：框选区间内申请的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Transient：框选区域内释放的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Transient：框选区域内释放的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：各个显示项的占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以lib库去统计，如图显示的是AllocEvent的so占比的饼图和Table表。<br>
+        <img src="../figures/ImportSo/Native_import_so_Existing.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Library：So名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Existing：框选区域内申请没有释放的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Existing：框选区域内申请没有释放的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Total Bytes：框选区间内申请的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Total：框选区间内申请的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Transient：框选区域内释放的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Transient：框选区域内释放的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：各个显示项的占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">
+        以函数去统计，如图显示的是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">
+        <li>
+<pre class="smartperf-text fontColor light">Function：函数名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Existing：框选区域内申请没有释放的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Existing：框选区域内申请没有释放的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Total Bytes：框选区间内申请的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Total：框选区间内申请的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Transient：框选区域内释放的大小。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">#Transient：框选区域内释放的次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：各个显示项的占比。
+</pre>
+        </li>
+    </ul>
+    <h2 class="mume-header fontColor">Hiperf文件的不同库函数占比</h2>
+
+    <p class="fontColor">Hiperf分为四级统计，分别按照进程，线程，lib库，函数进行统计。其中lib跟函数为每一条调用栈的栈顶函数及其lib。<br>
+        点击Analysis的Tab页，先以进程去统计。<br>
+        <img src="../figures/ImportSo/Hiperf_import_all.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">ProcessName：进程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Weight：该进程下的调用方法的执行次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：该进程下的调用方法的执行占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以线程统计，如图显示的是hiperf进程下的线程的饼图和Table表。<br>
+        <img src="../figures/ImportSo/Hiperf_import_thread.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">ThreadName：线程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Weight：该线程下的调用方法的执行次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：该线程下的调用方法的执行占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以lib库统计，如图显示的是hiperf线程下的各so占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/Hiperf_import_lib.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Library：so的名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Weight：该so的调用方法的执行次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：该so的调用方法的执行占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以函数统计，如图显示的是ld-musl-aarch64.so.1下的各函数占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/Hiperf_import_Fuc.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Library：so的名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Weight：该so的调用方法的执行次数。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：该so的调用方法的执行占比。
+</pre>
+        </li>
+    </ul>
+    <h2 class="mume-header fontColor">FileSystem文件的不同库函数占比</h2>
+
+    <p class="fontColor">
+        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">
+        <li>
+<pre class="smartperf-text fontColor light">ProcessName：进程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以系统调用类型统计，如图显示的是grep进程下的Read和Write系统调用的时长占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/filesystem_import_Type.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Type：系统调用类型(Read和Write)。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以线程统计，如图显示的是系统调用是Read类型的线程的占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/filesystem_import_thread.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">ThreadName：线程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该线程的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以lib库统计，如图显示toybox的lib库的占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/filesystem_import_lib.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Library：so的名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该so的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以函数统计，如图显示0x558111afbc (toybox)的函数占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/filesystem_import_func.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Function：函数名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该函数的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <h2 class="mume-header fontColor">Bio文件的不同库函数占比</h2>
+
+    <p class="fontColor">
+        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">
+        <li>
+<pre class="smartperf-text fontColor light">ProcessName：进程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以系统调用类型统计，如图显示的是jbd2/mmcblk0p11进程下的DATA_WRITE系统调用的时长占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/bio_import_Type.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Type：系统调用类型。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以线程统计，如图显示的是系统调用是DATA_WRITE类型的线程的占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/bio_import_thread.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">ThreadName：线程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该线程的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以lib库统计，如图显示kallsyms的lib库的占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/bio_import_lib.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Library：so的名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该so的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以函数统计，如图显示submit_bh的函数占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/bio_import_func.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Function：函数名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该函数的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <h2 class="mume-header fontColor">Page Fault文件的不同库函数占比</h2>
+
+    <p class="fontColor">Page
+        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">
+        <li>
+<pre class="smartperf-text fontColor light">ProcessName：进程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以系统调用类型统计，如图显示的是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">
+        <li>
+<pre class="smartperf-text fontColor light">Type：系统调用类型。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以线程统计，如图显示的是系统调用是File Backed In类型的线程的占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/pagefault_import_thread.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">ThreadName：线程名。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该线程的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以lib库统计，如图显示各lib库的占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/pagefault_import_lib.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Library：so的名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该so的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <p class="fontColor">以函数统计，如图显示各函数占比饼图和Table表。<br>
+        <img src="../figures/ImportSo/pagefault_import_func.jpg" alt="GitHub Logo"></p>
+    <ul class="fontColor">
+        <li>
+<pre class="smartperf-text fontColor light">Function：函数名称。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">Duration：该函数的系统调用的总时长。
+</pre>
+        </li>
+        <li>
+<pre class="smartperf-text fontColor light">%：总时长占比。
+</pre>
+        </li>
+    </ul>
+    <h2 class="mume-header fontColor">可导入符号表说明</h2>
+
+    <p class="fontColor">
+        符号表导入适用于所有支持调用栈的Tab页，选择一个文件夹，获取文件下及其子文件夹的所有so文件，更新数据库中符号数据。文件夹内so的格式需要与在设备上的路径一致，例如下图中，选择的文件夹为import，选择导入的libnative_hook.z.so，在设备上的路径是/system/lib64/，那么在本地选择的文件夹内也需要保证路径是import/system/lib64/libnative_hook.z.so。<br>
+        <img src="../figures/ImportSo/so_import_dir.jpg" alt="GitHub Logo"><br>
+        以NativeMemory举例，导入NativeMemory文件，点击Call info的Tab页，在搜索框中输入libnative_hook.z.so，会发现该so下的调用栈没有符号化完全。<br>
+        <img src="../figures/ImportSo/so_import_nativehook.jpg" alt="GitHub Logo"><br>
+        将本地编译的so通过导入按钮导入，本地导入路径是import/system/lib64/libnative_hook.z.so，红框处是导入按钮<br>
+        <img src="../figures/ImportSo/so_import_local.jpg" alt="GitHub Logo"><br>
+        导入so以后，在搜索框中输入libnative_hook.z.so，会发现符号化数据已经更新<br>
+        <img src="../figures/ImportSo/so_import_new.jpg" alt="GitHub Logo"></p>
+
+</div>
+
+
+<script>
+    window.onload = (() => {
+        let isDark = window.location.search;
+        if (isDark.indexOf("?") != -1) {
+            isDark = isDark.substr(1, isDark.length - 1);
+        }
+        if (isDark == 'true') {
+            document.getElementById("body").setAttribute('style', 'background-color:#272C34;')
+            let header = document.getElementsByClassName('fontColor')
+            for (let i = 0; i < header.length; i++) {
+                header[i].style.color = '#fff';
+            }
+            let lightBackGround = document.getElementsByClassName('light')
+            for (let i = 0; i < lightBackGround.length; i++) {
+                lightBackGround[i].style.backgroundColor = '#32373F'
+            }
+        }
+    })
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/ide/src/doc/quickstart_Js_memory.html b/ide/src/doc/quickstart_Js_memory.html
index 4642f1e8514c65884125869bdebf9838ebdb32fc..457044ba18a0a0201c5961cf9763ad3bc7e8b6b0 100644
--- a/ide/src/doc/quickstart_Js_memory.html
+++ b/ide/src/doc/quickstart_Js_memory.html
@@ -819,14 +819,51 @@
         <li>
 <pre class="smartperf-text fontColor light">Distance：使用节点的最短简单路径显示到根的距离。
 </pre>
-        </li>
+            例如下图其中GC Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为1000000。A、B、C、D、E、F、H为调用节点；以E为例，从A-&gt;D-&gt;F&gt;E,distance为4，从A-&gt;D-&gt;E，depth为3;从B-&gt;E,depth为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。<br>
+            <img src="../figures/Jsmemory/js_sample.png" alt="GitHub Logo"></li>
         <li>
-<pre class="smartperf-text fontColor light">ShallowSize：类创建的所有对象的本身的内存大小之和。
+<pre class="smartperf-text fontColor light">ShallowSize：是指实例自身占用的内存, 可以理解为保存该'数据结构'需要多少内存。
+  例如下面的代码。：
 </pre>
         </li>
+    </ul>
+    <pre data-role="codeBlock" data-info="javascript" class="fontColor light smartperf-javascript">    <span
+            class="token keyword keyword-class">class</span> <span class="token class-name">X</span> <span
+            class="token punctuation">{</span>
+    a<span class="token operator">:</span> number <span class="token operator">=</span> <span
+                class="token number">0</span><span class="token punctuation">;</span>
+    b<span class="token operator">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span
+                class="token punctuation">;</span>
+    c<span class="token operator">:</span> <span class="token maybe-class-name">ChartStruct</span> <span
+                class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span
+                class="token class-name">ChartStruct</span><span class="token punctuation">(</span><span
+                class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+</pre>
+    <pre class="smartperf-text fontColor light">    假设当前是在64位系统, 对于类X来说, 一个X实例的Shallow Size为:
+
+    类定义的8byte
+    没有继承其他类, 所以没有父类fields
+    a,b变量为基本类型number,boolean型, js中都为8byte; 
+    c变量是引用类型, 和它是否指向具体实例无关, 固定占4byte
+</pre>
+    <ul class="fontColor">
         <li>
-<pre class="smartperf-text fontColor light">RetainedSize：对象以及其相关的对象一起被删除后所释放的内存大小，同一组对象之间的最大保留大小。
+<pre class="smartperf-text fontColor light">RetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以同时被回收的实例的Shallow Size之和。
 </pre>
+            <ul class="fontColor">
+                <li>如上图所示；假设所有的节点Size都为1,按照A-&gt;B-&gt;C的顺序回收。
+                    <ul class="fontColor">
+                        <li>当A被回收时，H被D调用，先不回收，D没有被调用，D回收，由于D被回收，H没有被调用，H回收，由于F被C调用，E被B、F也调用了，所以不能被回收,此时A的Retained
+                            Size为3,D的Retained Size为2, H的Retained Size为1。
+                        </li>
+                        <li>当B被回收时，由于E被F占用，所以E不会被回收，此时B的Retained Size为1。</li>
+                        <li>当C被回收时，F没有人被调用，E没有被调用,所以都会被回收，此时C的Retained Size为3，F的Retained
+                            Size为2, E的Retained Size为1。
+                        </li>
+                    </ul>
+                </li>
+            </ul>
         </li>
     </ul>
     <p class="fontColor">
diff --git a/ide/src/figures/ImportSo/Hiperf_import_Fuc.jpg b/ide/src/figures/ImportSo/Hiperf_import_Fuc.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7a6d41b2da5569b10db334e8e1070c39494d96cf
Binary files /dev/null and b/ide/src/figures/ImportSo/Hiperf_import_Fuc.jpg differ
diff --git a/ide/src/figures/ImportSo/Hiperf_import_all.jpg b/ide/src/figures/ImportSo/Hiperf_import_all.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7ecdff2968f20cce3cf498a9f2c9a95a34219acc
Binary files /dev/null and b/ide/src/figures/ImportSo/Hiperf_import_all.jpg differ
diff --git a/ide/src/figures/ImportSo/Hiperf_import_lib.jpg b/ide/src/figures/ImportSo/Hiperf_import_lib.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e72b2d7e00879fa60330be85d000b78ad0d30dec
Binary files /dev/null and b/ide/src/figures/ImportSo/Hiperf_import_lib.jpg differ
diff --git a/ide/src/figures/ImportSo/Hiperf_import_thread.jpg b/ide/src/figures/ImportSo/Hiperf_import_thread.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0c1712b5c00bf1a58b337e55ee47e10fb586b49d
Binary files /dev/null and b/ide/src/figures/ImportSo/Hiperf_import_thread.jpg differ
diff --git a/ide/src/figures/ImportSo/Native_import_all.jpg b/ide/src/figures/ImportSo/Native_import_all.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f3e905f0afc98f2bb73275f82c6acfea942289ad
Binary files /dev/null and b/ide/src/figures/ImportSo/Native_import_all.jpg differ
diff --git a/ide/src/figures/ImportSo/Native_import_so_Existing.jpg b/ide/src/figures/ImportSo/Native_import_so_Existing.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9eb2c4c286a0f1f48c43ad80a5ec8a8f300d79eb
Binary files /dev/null and b/ide/src/figures/ImportSo/Native_import_so_Existing.jpg differ
diff --git a/ide/src/figures/ImportSo/Native_import_so_function.jpg b/ide/src/figures/ImportSo/Native_import_so_function.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ed9890851ea04bb6602c43d2fa97949a13602896
Binary files /dev/null and b/ide/src/figures/ImportSo/Native_import_so_function.jpg differ
diff --git a/ide/src/figures/ImportSo/bio_import_Type.jpg b/ide/src/figures/ImportSo/bio_import_Type.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3cafe79889511cdd84887d5a371475370f46bec2
Binary files /dev/null and b/ide/src/figures/ImportSo/bio_import_Type.jpg differ
diff --git a/ide/src/figures/ImportSo/bio_import_func.jpg b/ide/src/figures/ImportSo/bio_import_func.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3c7af804e194dfa6d15faa6bdd8c08828d4e2d5c
Binary files /dev/null and b/ide/src/figures/ImportSo/bio_import_func.jpg differ
diff --git a/ide/src/figures/ImportSo/bio_import_lib.jpg b/ide/src/figures/ImportSo/bio_import_lib.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d35eb8520cb8f64120a0e4a80ec951fedf87748d
Binary files /dev/null and b/ide/src/figures/ImportSo/bio_import_lib.jpg differ
diff --git a/ide/src/figures/ImportSo/bio_import_process.jpg b/ide/src/figures/ImportSo/bio_import_process.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..86f233f70c70dabd22d9d8b84133fa3dd13d7274
Binary files /dev/null and b/ide/src/figures/ImportSo/bio_import_process.jpg differ
diff --git a/ide/src/figures/ImportSo/bio_import_thread.jpg b/ide/src/figures/ImportSo/bio_import_thread.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..203a6724da18f5296f76df659ff22eaf0e9fdcae
Binary files /dev/null and b/ide/src/figures/ImportSo/bio_import_thread.jpg differ
diff --git a/ide/src/figures/ImportSo/filesystem_import_Type.jpg b/ide/src/figures/ImportSo/filesystem_import_Type.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b1a1dd28bc8e520e3d5168f7bcfc879e30078aae
Binary files /dev/null and b/ide/src/figures/ImportSo/filesystem_import_Type.jpg differ
diff --git a/ide/src/figures/ImportSo/filesystem_import_func.jpg b/ide/src/figures/ImportSo/filesystem_import_func.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0e8a15c7c06076b10f596c15d0aa83b43ff17455
Binary files /dev/null and b/ide/src/figures/ImportSo/filesystem_import_func.jpg differ
diff --git a/ide/src/figures/ImportSo/filesystem_import_lib.jpg b/ide/src/figures/ImportSo/filesystem_import_lib.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9f6f027cc1adcb9d1eedf4a128d199d6c609dae3
Binary files /dev/null and b/ide/src/figures/ImportSo/filesystem_import_lib.jpg differ
diff --git a/ide/src/figures/ImportSo/filesystem_import_process.jpg b/ide/src/figures/ImportSo/filesystem_import_process.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..32e7eedb9154d583be61b2c2adf48ce2f4bee62e
Binary files /dev/null and b/ide/src/figures/ImportSo/filesystem_import_process.jpg differ
diff --git a/ide/src/figures/ImportSo/filesystem_import_thread.jpg b/ide/src/figures/ImportSo/filesystem_import_thread.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..67f7cef88a5c08a731bc0be5ed467a2aaff9c9c3
Binary files /dev/null and b/ide/src/figures/ImportSo/filesystem_import_thread.jpg differ
diff --git a/ide/src/figures/ImportSo/pagefault_import_Type.jpg b/ide/src/figures/ImportSo/pagefault_import_Type.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a7ca4313effec416c545cf1d447928720be9f7bb
Binary files /dev/null and b/ide/src/figures/ImportSo/pagefault_import_Type.jpg differ
diff --git a/ide/src/figures/ImportSo/pagefault_import_func.jpg b/ide/src/figures/ImportSo/pagefault_import_func.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5e7a565930e1a87b021c2ecf1c5e64e40d9ca3f0
Binary files /dev/null and b/ide/src/figures/ImportSo/pagefault_import_func.jpg differ
diff --git a/ide/src/figures/ImportSo/pagefault_import_lib.jpg b/ide/src/figures/ImportSo/pagefault_import_lib.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5f5bb66da06ff7fdf9c042fbcfd6a0f0cb19eca4
Binary files /dev/null and b/ide/src/figures/ImportSo/pagefault_import_lib.jpg differ
diff --git a/ide/src/figures/ImportSo/pagefault_import_process.jpg b/ide/src/figures/ImportSo/pagefault_import_process.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..32b7275f37007afc6351ebce3a0d94ce7736d999
Binary files /dev/null and b/ide/src/figures/ImportSo/pagefault_import_process.jpg differ
diff --git a/ide/src/figures/ImportSo/pagefault_import_thread.jpg b/ide/src/figures/ImportSo/pagefault_import_thread.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6890e9a6b3a04eddd31f4e745dd2cbaacac72201
Binary files /dev/null and b/ide/src/figures/ImportSo/pagefault_import_thread.jpg differ
diff --git a/ide/src/figures/ImportSo/so_import_dir.jpg b/ide/src/figures/ImportSo/so_import_dir.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..30ec9c2595a0e328bdf421395a207269fc92ce54
Binary files /dev/null and b/ide/src/figures/ImportSo/so_import_dir.jpg differ
diff --git a/ide/src/figures/ImportSo/so_import_local.jpg b/ide/src/figures/ImportSo/so_import_local.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2dd9c0a33eff39e64bbf5d0fff8b4220c2b7a970
Binary files /dev/null and b/ide/src/figures/ImportSo/so_import_local.jpg differ
diff --git a/ide/src/figures/ImportSo/so_import_nativehook.jpg b/ide/src/figures/ImportSo/so_import_nativehook.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..770bef3be485b82571213e96fc27a0efbe1f60fd
Binary files /dev/null and b/ide/src/figures/ImportSo/so_import_nativehook.jpg differ
diff --git a/ide/src/figures/ImportSo/so_import_new.jpg b/ide/src/figures/ImportSo/so_import_new.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1016bfc60cd4bf5616fa12670c85427100698604
Binary files /dev/null and b/ide/src/figures/ImportSo/so_import_new.jpg differ
diff --git a/ide/src/figures/Jsmemory/js_sample.png b/ide/src/figures/Jsmemory/js_sample.png
new file mode 100644
index 0000000000000000000000000000000000000000..15406341e8f930be460ba15b3c23542862efacf4
Binary files /dev/null and b/ide/src/figures/Jsmemory/js_sample.png differ
diff --git a/ide/src/hdc/common/Serialize.ts b/ide/src/hdc/common/Serialize.ts
index d7b21675a3811362134c30abbdc55e44f9d74783..ddc166948b18f3e2b0a2d6ef64ca2f693d4c1799 100644
--- a/ide/src/hdc/common/Serialize.ts
+++ b/ide/src/hdc/common/Serialize.ts
@@ -174,32 +174,32 @@ export class Serialize {
     return (tag << 3) | wireType;
   }
 
-  static writeVarIntU64(value: number): Uint8Array {
-    let buffer: number[] = [];
+  static writeVarIntU64(u64value: number): Uint8Array {
+    let uint64buffer: number[] = [];
     for (let index = 0; index < 10; index++) {
-      buffer[index] = value & 0b01111111;
-      value = value >> 7;
-      if (value) {
-        buffer[index] = buffer[index] | 0b10000000;
+      uint64buffer[index] = u64value & 0b01111111;
+      u64value = u64value >> 7;
+      if (u64value) {
+        uint64buffer[index] = uint64buffer[index] | 0b10000000;
       } else {
         break;
       }
     }
-    return new Uint8Array(buffer);
+    return new Uint8Array(uint64buffer);
   }
 
-  static writeVarIntU32(value: number): Uint8Array {
-    let buffer: number[] = [];
+  static writeVarIntU32(u32value: number): Uint8Array {
+    let u32buffer: number[] = [];
     for (let index = 0; index < 5; index++) {
-      buffer[index] = value & 0b01111111;
-      value = value >> 7;
-      if (value) {
-        buffer[index] = buffer[index] | 0b10000000;
+      u32buffer[index] = u32value & 0b01111111;
+      u32value = u32value >> 7;
+      if (u32value) {
+        u32buffer[index] = u32buffer[index] | 0b10000000;
       } else {
         break;
       }
     }
-    return new Uint8Array(buffer);
+    return new Uint8Array(u32buffer);
   }
 
   static parseHandshake(data: Uint8Array): SessionHandShake {
@@ -310,32 +310,32 @@ export class Serialize {
   }
 
   static readVarIntU32(dataView: DataView): number {
-    let value: number = 0;
-    for (let index = 0; index < 5; index++) {
-      if (dataView.byteLength < index + 1) {
+    let u32IntValue: number = 0;
+    for (let u32IntIndex = 0; u32IntIndex < 5; u32IntIndex++) {
+      if (dataView.byteLength < u32IntIndex + 1) {
         return -1;
       }
-      let int8 = dataView.getUint8(index);
+      let int8 = dataView.getUint8(u32IntIndex);
       let readValue = int8 & 0b01111111;
-      value |= readValue << (7 * index);
+      u32IntValue |= readValue << (7 * u32IntIndex);
       if (!(int8 & 0b10000000)) {
-        return value;
+        return u32IntValue;
       }
     }
     return -1;
   }
 
   static readVarIntU64(dataView: DataView): number {
-    let value: number = 0;
-    for (let index = 0; index < 10; index++) {
-      if (dataView.byteLength < index + 1) {
+    let u62IntValue: number = 0;
+    for (let u62IntIndex = 0; u62IntIndex < 10; u62IntIndex++) {
+      if (dataView.byteLength < u62IntIndex + 1) {
         return -1;
       }
-      let int8 = dataView.getUint8(index);
+      let int8 = dataView.getUint8(u62IntIndex);
       let readValue = int8 & 0b01111111;
-      value |= readValue << (7 * index);
+      u62IntValue |= readValue << (7 * u62IntIndex);
       if (!(int8 & 0b10000000)) {
-        return value;
+        return u62IntValue;
       }
     }
     return -1;
diff --git a/ide/src/hdc/hdcclient/HdcStream.ts b/ide/src/hdc/hdcclient/HdcStream.ts
index 31a24c073f3d757f2f9d6f51c528117c0c11f2cd..7b1945a2218f431401e2952c62c8e512d1f09654 100644
--- a/ide/src/hdc/hdcclient/HdcStream.ts
+++ b/ide/src/hdc/hdcclient/HdcStream.ts
@@ -103,36 +103,36 @@ export class HdcStream {
       let data = textEncoder.encode(command.parameters);
       let aa = data.slice(5);
       await this.sendToDaemon(command, aa, aa.length);
-      let dataMessage = await this.getMessage();
-      let playHeadArray = dataMessage.body!.buffer.slice(0, PayloadHead.getPayloadHeadLength());
-      let resultPayloadHead: PayloadHead = PayloadHead.parsePlayHead(new DataView(playHeadArray));
-      let headSize = resultPayloadHead.headSize;
-      let dataSize = resultPayloadHead.dataSize;
-      let resPlayProtectBuffer = dataMessage.body!.buffer.slice(11, 11 + headSize);
+      let fileRecvDataMessage = await this.getMessage();
+      let fileRecvPlayHeadArray = fileRecvDataMessage.body!.buffer.slice(0, PayloadHead.getPayloadHeadLength());
+      let fileRecvResultPayloadHead: PayloadHead = PayloadHead.parsePlayHead(new DataView(fileRecvPlayHeadArray));
+      let fileRecvHeadSize = fileRecvResultPayloadHead.headSize;
+      let fileRecvDataSize = fileRecvResultPayloadHead.dataSize;
+      let resPlayProtectBuffer = fileRecvDataMessage.body!.buffer.slice(11, 11 + fileRecvHeadSize);
       let payloadProtect = Serialize.parsePayloadProtect(resPlayProtectBuffer);
       await this.handleCommandFileCheck();
     }
   }
 
   private async handleCommandFileCheck() {
-    let dataMessage = await this.getMessage();
-    let playHeadArray = dataMessage.body!.buffer.slice(0, PayloadHead.getPayloadHeadLength());
-    let resultPayloadHead: PayloadHead = PayloadHead.parsePlayHead(new DataView(playHeadArray));
-    let headSize = resultPayloadHead.headSize;
-    let dataSize = resultPayloadHead.dataSize;
-    let resPlayProtectBuffer = dataMessage.body!.buffer.slice(
+    let fileCheckDataMessage = await this.getMessage();
+    let fileCheckPlayHeadArray = fileCheckDataMessage.body!.buffer.slice(0, PayloadHead.getPayloadHeadLength());
+    let fileCheckResultPayloadHead: PayloadHead = PayloadHead.parsePlayHead(new DataView(fileCheckPlayHeadArray));
+    let fileCheckHeadSize = fileCheckResultPayloadHead.headSize;
+    let fileCheckDataSize = fileCheckResultPayloadHead.dataSize;
+    let fileCheckResPlayProtectBuffer = fileCheckDataMessage.body!.buffer.slice(
       PayloadHead.getPayloadHeadLength(),
-      PayloadHead.getPayloadHeadLength() + headSize
+      PayloadHead.getPayloadHeadLength() + fileCheckHeadSize
     );
-    let payloadProtect = Serialize.parsePayloadProtect(resPlayProtectBuffer);
-    if (payloadProtect.commandFlag == HdcCommand.CMD_FILE_CHECK) {
-      if (dataSize > 0) {
-        let transferConfigBuffer = dataMessage.body!.buffer.slice(
-          PayloadHead.getPayloadHeadLength() + headSize,
-          PayloadHead.getPayloadHeadLength() + headSize + dataSize
+    let fileCheckPayloadProtect = Serialize.parsePayloadProtect(fileCheckResPlayProtectBuffer);
+    if (fileCheckPayloadProtect.commandFlag == HdcCommand.CMD_FILE_CHECK) {
+      if (fileCheckDataSize > 0) {
+        let fileCheckTransferConfigBuffer = fileCheckDataMessage.body!.buffer.slice(
+          PayloadHead.getPayloadHeadLength() + fileCheckHeadSize,
+          PayloadHead.getPayloadHeadLength() + fileCheckHeadSize + fileCheckDataSize
         );
-        let transferConfig = Serialize.parseTransferConfig(transferConfigBuffer);
-        this.fileSize = transferConfig.fileSize;
+        let fileCheckTransferConfig = Serialize.parseTransferConfig(fileCheckTransferConfigBuffer);
+        this.fileSize = fileCheckTransferConfig.fileSize;
       }
       let fileBegin = new FormatCommand(HdcCommand.CMD_FILE_BEGIN, '', false);
       await this.sendToDaemon(fileBegin, new Uint8Array(0), 0);
diff --git a/ide/src/js-heap/HeapDataInterface.ts b/ide/src/js-heap/HeapDataInterface.ts
index d9946bf9e606d6fe228fff1eadc65cdcfc303595..24f08339cbfda2fb32c13bea76e87e3c582b9858 100644
--- a/ide/src/js-heap/HeapDataInterface.ts
+++ b/ide/src/js-heap/HeapDataInterface.ts
@@ -31,7 +31,6 @@ export interface ParseListener {
 
 export class HeapDataInterface {
   private static instance: HeapDataInterface;
-  private isParsing = false;
   private isParseDone = false;
   private parseListener!: ParseListener;
   private fileStructs!: Array<FileStruct>;
@@ -254,7 +253,6 @@ export class HeapDataInterface {
 
   async parseData(fileModule: Array<FileStruct>) {
     this.fileStructs = fileModule;
-    this.isParsing = true;
     this.isParseDone = false;
     let percent: number;
     for (let fileStruct of fileModule) {
@@ -263,7 +261,6 @@ export class HeapDataInterface {
       percent = 50 + Math.floor(50 / fileModule.length) * (fileModule.indexOf(fileStruct) + 1);
       this.parseListener.process('parsing data of ' + fileStruct.name + ' ', percent);
     }
-    this.isParsing = false;
     this.isParseDone = true;
     if (this.parseListener) {
       this.parseListener.parseDone(fileModule);
diff --git a/ide/src/js-heap/logic/Allocation.ts b/ide/src/js-heap/logic/Allocation.ts
index b4fbdec87d02e53a00bc9865ad46e63bdef7f4fb..a910d2473f78a0bb4906c2ea59ef589404e2a577 100644
--- a/ide/src/js-heap/logic/Allocation.ts
+++ b/ide/src/js-heap/logic/Allocation.ts
@@ -25,10 +25,6 @@ export class AllocationLogic {
     this.fileStruct = fileStruct;
     this.bottomUpList = [];
     this.traceNodes = this.fileStruct.snapshotStruct.traceNodes;
-    this.init();
-  }
-
-  private init() {
     this.setBottomUpTree();
   }
 
diff --git a/ide/src/js-heap/logic/HeapLoader.ts b/ide/src/js-heap/logic/HeapLoader.ts
index 4edab66486c0451634986d7df56ed0fb09bd54b6..a89e1191a5a2cce0961281a138235683a2bdf303 100644
--- a/ide/src/js-heap/logic/HeapLoader.ts
+++ b/ide/src/js-heap/logic/HeapLoader.ts
@@ -179,7 +179,7 @@ export class HeapLoader {
   }
 
   private distributeDOMState(): void {
-    // 1.重用反序列化字段来存储传播的状态。虽然已知节点的状态已经设置，
+    // 1.存储传播的状态。虽然已知节点的状态已经设置，
     // 但仍然需要经过处理以调整其名称并将其放入各自的队列中。
     let domState = new DOMState(this.nodeCount);
     for (let node of this.nodes) {
@@ -245,7 +245,7 @@ export class HeapLoader {
           if (!childNode || visited[childNode!.nodeIndex]) {
             continue;
           }
-          //跳过从非页面拥有的节点到页面拥有的节点的边缘
+          //Skip the edges from non-page-object nodes to page-object nodes
           let childNodeFlag = childNode.flag & PAGE_PROJECT;
           if (node.id != this.rootNode!.id && childNodeFlag && !node.flag) {
             continue;
@@ -406,7 +406,7 @@ export class HeapLoader {
     if (!this.rootNode) return;
     let nodesToVisit = new Uint32Array(this.nodeCount);
     let nodesToVisitLen = 0;
-    // root节点下所有的edge distance 为1
+    // root node's edges distance is 1
     for (let edge of this.rootNode.edges) {
       let node = this.nodeMap.get(edge.toNodeId);
       if (!node) {
@@ -441,9 +441,6 @@ export class HeapLoader {
     //赋值两个数组:
     //-dominatedNodes是一个连续数组，其中每个节点拥有一个与相应的被支配节点的间隔(可以为空)。
     //—indexArray 是dominatedNodes中与_nodeIndex位置相同的索引数组。
-    // const indexArray = this.firstDominatedNodeIdx;
-    // // All nodes except the root have dominators.
-    // const dominatedNodes = this.dominatedNodes;
     let fromNodeIdx = 0;
     let toNodeIdx = this.nodeCount;
 
@@ -472,7 +469,7 @@ export class HeapLoader {
       let dominatorIdx = this.dominatorTree[nodeIdx];
       let dominatorRefIdx = this.firstDominatedNodesIdx[dominatorIdx];
       dominatorRefIdx += --this.dominatedNodes[dominatorRefIdx];
-      this.dominatedNodes[dominatorRefIdx] = nodeIdx * 7;
+      this.dominatedNodes[dominatorRefIdx] = nodeIdx;
     }
   }
 
@@ -552,7 +549,7 @@ export class HeapLoader {
           continue;
         }
         let childNode = this.nodeMap.get(edge.toNodeId);
-        // 如果已经设置过一次distance了 不再设置
+        // if distance is set,not set again
         if (!childNode || childNode.distance != -5 || !this.filterForBpf(node, edge)) {
           continue;
         }
@@ -690,33 +687,33 @@ export class HeapLoader {
     return true;
   }
 
-  private calClassDiff(baseClass: ConstructorItem, classItem?: ConstructorItem) {
+  private calClassDiff(targetClass: ConstructorItem, baseClass?: ConstructorItem) {
     let diff = new ConstructorComparison();
     diff.type = ConstructorType.ComparisonType;
     diff.fileId = this.fileId;
-    diff.targetFileId = baseClass.fileId;
-    diff.nodeName = baseClass.nodeName;
+    diff.targetFileId = targetClass.fileId;
+    diff.nodeName = targetClass.nodeName;
     let i = 0;
     let j = 0;
-    let classLen = classItem ? classItem.childCount : 0;
-    let baseLen = baseClass.childCount;
-    baseClass.classChildren.sort((a, b) => a.id - b.id);
-    if (classItem) {
-      classItem.classChildren.sort((a, b) => a.id - b.id);
+    let baseLen = baseClass ? baseClass.childCount : 0;
+    let targetLen = targetClass.childCount;
+    targetClass.classChildren.sort((a, b) => a.id - b.id);
+    if (baseClass) {
+      baseClass.classChildren.sort((a, b) => a.id - b.id);
     }
     // The overlap between the base class and the target class
-    while (i < baseLen && j < classLen) {
-      let classNode = classItem!.classChildren[j];
-      let baseNode = baseClass.classChildren[i];
-      if (baseNode.id < classNode.id) {
-        diff.deletedIdx.push(baseNode.index);
+    while (i < targetLen && j < baseLen) {
+      let baseNode = baseClass!.classChildren[j];
+      let targetNode = targetClass.classChildren[i];
+      if (targetNode.id < baseNode.id) {
+        diff.deletedIdx.push(targetNode.index);
         diff.removedCount++;
-        diff.removedSize += baseNode.shallowSize;
+        diff.removedSize += targetNode.shallowSize;
         i++;
-      } else if (baseNode.id > classNode.id) {
-        diff.addedIndx.push(classNode.index);
+      } else if (targetNode.id > baseNode.id) {
+        diff.addedIndx.push(baseNode.index);
         diff.addedCount++;
-        diff.addedSize += classNode.shallowSize;
+        diff.addedSize += baseNode.shallowSize;
         j++;
       } else {
         i++;
@@ -724,19 +721,19 @@ export class HeapLoader {
       }
     }
     // base more then target
-    while (i < baseLen) {
-      let baseNode = baseClass!.classChildren[i];
-      diff.deletedIdx.push(baseNode.index);
+    while (i < targetLen) {
+      let targetNode = targetClass!.classChildren[i];
+      diff.deletedIdx.push(targetNode.index);
       diff.removedCount++;
-      diff.removedSize += baseNode.shallowSize;
+      diff.removedSize += targetNode.shallowSize;
       i++;
     }
     //
-    while (j < classLen) {
-      let classNode = classItem!.classChildren[j];
-      diff.addedIndx.push(classNode.index);
+    while (j < baseLen) {
+      let baseNode = baseClass!.classChildren[j];
+      diff.addedIndx.push(baseNode.index);
       diff.addedCount++;
-      diff.addedSize += classNode.shallowSize;
+      diff.addedSize += baseNode.shallowSize;
       j++;
     }
     diff.deltaCount = diff.addedCount - diff.removedCount;
@@ -842,8 +839,8 @@ export class HeapLoader {
       }
 
       for (let idx = dominatorFromIdx; idx < dominatorToIdx; idx++) {
-        let nodeOldIdx = this.dominatedNodes[idx];
-        let domNode = this.nodes[nodeOldIdx / 7];
+        let nodeIdx = this.dominatedNodes[idx];
+        let domNode = this.nodes[nodeIdx];
         list.push(domNode);
       }
 
@@ -858,15 +855,16 @@ export class HeapLoader {
     }
     return classes;
   }
+
   /**
    * compare base file and target file, calculate delta size and count to target class
-   * @param baseFileId to compare file's id
+   * @param targetFileId to compare file's id
    * @param targetFileClasses to compare file's constructor
    */
-  public getClassesForComparison(baseFileId: number, targetFileClasses: Map<string, ConstructorItem>) {
+  public getClassesForComparison(targetFileId: number, targetFileClasses: Map<string, ConstructorItem>) {
     // Return the result if it has been obtained before
-    if (this.diffToOtherFile.has(baseFileId)) {
-      return this.diffToOtherFile.get(baseFileId);
+    if (this.diffToOtherFile.has(targetFileId)) {
+      return this.diffToOtherFile.get(targetFileId);
     }
     // get base file class if not init before
     if (!this.allClasses) {
@@ -875,11 +873,11 @@ export class HeapLoader {
 
     //deal target class
     let diffMap = new Map<string, ConstructorComparison>();
-    for (let baseClass of targetFileClasses.values()) {
-      let classes = this.allClasses.get(baseClass.nodeName);
-      let different = this.calClassDiff(baseClass, classes);
+    for (let targetClass of targetFileClasses.values()) {
+      let classes = this.allClasses.get(targetClass.nodeName);
+      let different = this.calClassDiff(targetClass, classes);
       if (different) {
-        diffMap.set(baseClass.nodeName, different);
+        diffMap.set(targetClass.nodeName, different);
       }
     }
 
@@ -893,7 +891,7 @@ export class HeapLoader {
         diffMap.set(classItem.nodeName, different);
       }
     }
-    this.diffToOtherFile.set(baseFileId, diffMap);
+    this.diffToOtherFile.set(targetFileId, diffMap);
     return diffMap;
   }
 
@@ -960,7 +958,6 @@ export class HeapLoader {
    * @returns reference nodes
    */
   public getRetains(item: ConstructorItem): Array<ConstructorItem> {
-    let obj: any;
     if (item.retains.length > 0) {
       return item.retains;
     }
diff --git a/ide/src/js-heap/model/DatabaseStruct.ts b/ide/src/js-heap/model/DatabaseStruct.ts
index 0d8da58aa2291f5005b4dc8ab5b30ff13501368e..891270327362f811a9865717021e3864ee4ae028 100644
--- a/ide/src/js-heap/model/DatabaseStruct.ts
+++ b/ide/src/js-heap/model/DatabaseStruct.ts
@@ -117,8 +117,7 @@ export class HeapNode {
   }
 
   className(): string {
-    const type = this.type;
-    switch (type) {
+    switch (this.type) {
       case NodeType.HIDDEN:
         return '(system)';
       case NodeType.OBJECT:
@@ -127,7 +126,7 @@ export class HeapNode {
       case NodeType.CODE:
         return '(compiled code)';
       default:
-        let typeName = '(' + getNodeTypeName(type) + ')';
+        let typeName = '(' + getNodeTypeName(this.type) + ')';
         return typeName.toLowerCase();
     }
   }
@@ -136,13 +135,6 @@ export class HeapNode {
     return this.displayName || this.name;
   }
 
-  classIndex(): number {
-    if (this.type === NodeType.OBJECT || this.type === NodeType.NATIVE) {
-      return this.nodeIndex;
-    }
-    return -1 - this.type;
-  }
-
   addEdge(edge: HeapEdge) {
     this.edges.add(edge);
   }
@@ -234,8 +226,8 @@ export class HeapSample {
     this.size = 0;
   }
 }
-
 export class HeapLocation {
+
   objectIndex: number;
   scriptId: number;
   line: number;
diff --git a/ide/src/js-heap/model/UiStruct.ts b/ide/src/js-heap/model/UiStruct.ts
index 8d4f797db96205ddbf61914ba505f25a246bbfa1..1a03320b134b9a39a729ed1cf2edf4582f65141c 100644
--- a/ide/src/js-heap/model/UiStruct.ts
+++ b/ide/src/js-heap/model/UiStruct.ts
@@ -37,12 +37,11 @@ export class ConstructorItem {
   distance = -1;
   shallowSize = -1;
   retainedSize = -1;
-  showBox = false;
-  showCut = false;
   hasNext = true;
   status = true;
   isSelected: boolean = false;
   objectName = '';
+  expanded: boolean = true;
 
   edgeCount = 0;
   edgeType!: EdgeType;
@@ -104,7 +103,6 @@ export class ConstructorComparison extends ConstructorItem {
   addedIndx: Array<number> = [];
 
   isAdd = false;
-  status = true;
 
   getChildren(): ConstructorItem[] {
     if (this.type !== ConstructorType.ComparisonType) {
@@ -207,7 +205,6 @@ export class AllocationFunction {
 export class FileInfo {
   id: number = -1;
   name: string = '';
-  path: string = '';
   type!: FileType;
   start_ts: number = 0;
   end_ts: number = 0;
diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts
index abb854f1a841ddbc5cd6eb92565ef74e3c9c074f..5e6889952ecf0a00fa2927c5f2381a2f4a6f10ec 100644
--- a/ide/src/trace/SpApplication.ts
+++ b/ide/src/trace/SpApplication.ts
@@ -443,7 +443,7 @@ export class SpApplication extends BaseElement {
         menuItem!.forEach((item) => {
           item.style.color = 'white';
         });
-        ColorUtils.MD_PALETTE = ColorUtils.MD_PALETTE_A;
+        ColorUtils.MD_PALETTE = ColorUtils.FUNC_COLOR_A;
         ColorUtils.FUNC_COLOR = ColorUtils.FUNC_COLOR_A;
       } else {
         menu!.style.backgroundColor = 'white';
@@ -457,7 +457,7 @@ export class SpApplication extends BaseElement {
         menuItem!.forEach((item) => {
           item.style.color = 'var(--dark-color,rgba(0,0,0,0.6))';
         });
-        ColorUtils.MD_PALETTE = ColorUtils.MD_PALETTE_B;
+        ColorUtils.MD_PALETTE = ColorUtils.FUNC_COLOR_B;
         ColorUtils.FUNC_COLOR = ColorUtils.FUNC_COLOR_B;
       }
 
@@ -1233,37 +1233,11 @@ export class SpApplication extends BaseElement {
         a.href = URL.createObjectURL(new Blob([reqBufferDB]));
         a.download = fileName;
         a.click();
-        let querySelectorAll = mainMenu.shadowRoot?.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
-        querySelectorAll!.forEach((menuGroup) => {
-          let attribute = menuGroup.getAttribute('title');
-          if (attribute === 'Current Trace') {
-            let querySelectors = menuGroup.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
-            querySelectors.forEach((item) => {
-              if (item.getAttribute('title') == 'Download Database') {
-                item!.setAttribute('icon', 'convert-loading');
-                let querySelector1 = item!.shadowRoot?.querySelector('.icon') as LitIcon;
-                querySelector1.setAttribute('spin', '');
-              }
-            });
-          }
-        });
-        window.URL.revokeObjectURL(a.href);
+        this.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', true);
+        let that = this;
         let timer = setInterval(function () {
-          let querySelectorAll = mainMenu.shadowRoot?.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
-          querySelectorAll!.forEach((menuGroup) => {
-            let attribute = menuGroup.getAttribute('title');
-            if (attribute === 'Current Trace') {
-              let querySelectors = menuGroup.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
-              querySelectors.forEach((item) => {
-                if (item.getAttribute('title') == 'Download Database') {
-                  item!.setAttribute('icon', 'download');
-                  let querySelector1 = item!.shadowRoot?.querySelector('.icon') as LitIcon;
-                  querySelector1.removeAttribute('spin');
-                }
-              });
-              clearInterval(timer);
-            }
-          });
+          that.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', false);
+          clearInterval(timer);
         }, 4000);
       },
       'download-db'
@@ -1284,40 +1258,30 @@ export class SpApplication extends BaseElement {
     }
     a.download = fileName;
     a.click();
-    let querySelectorAll = mainMenu.shadowRoot?.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
-    querySelectorAll!.forEach((menuGroup) => {
-      let attribute = menuGroup.getAttribute('title');
-      if (attribute === 'Current Trace') {
-        let querySelectors = menuGroup.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
-        querySelectors.forEach((item) => {
-          if (item.getAttribute('title') == 'Download File') {
-            item!.setAttribute('icon', 'convert-loading');
-            let querySelector1 = item!.shadowRoot?.querySelector('.icon') as LitIcon;
-            querySelector1.setAttribute('spin', '');
-          }
-        });
-      }
-    });
     window.URL.revokeObjectURL(a.href);
+    let that = this;
+    this.itemIconLoading(mainMenu, 'Current Trace', 'Download File', true);
     let timer = setInterval(function () {
-      let querySelectorAll = mainMenu.shadowRoot?.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
-      querySelectorAll!.forEach((menuGroup) => {
-        let attribute = menuGroup.getAttribute('title');
-        if (attribute === 'Current Trace') {
-          let querySelectors = menuGroup.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
-          querySelectors.forEach((item) => {
-            if (item.getAttribute('title') == 'Download File') {
-              item!.setAttribute('icon', 'download');
-              let querySelector1 = item!.shadowRoot?.querySelector('.icon') as LitIcon;
-              querySelector1.removeAttribute('spin');
-            }
-          });
-          clearInterval(timer);
-        }
-      });
+      that.itemIconLoading(mainMenu, 'Current Trace', 'Download File', false);
+      clearInterval(timer);
     }, 4000);
   }
 
+  private itemIconLoading(mainMenu: LitMainMenu, groupName: string, itemName: string, start: boolean) {
+    let currentTraceGroup = mainMenu.shadowRoot?.querySelector<LitMainMenuGroup>(
+      `lit-main-menu-group[title='${groupName}']`
+    );
+    let downloadItem = currentTraceGroup!.querySelector<LitMainMenuItem>(`lit-main-menu-item[title='${itemName}']`);
+    let downloadIcon = downloadItem!.shadowRoot?.querySelector('.icon') as LitIcon;
+    if (start) {
+      downloadItem!.setAttribute('icon', 'convert-loading');
+      downloadIcon.setAttribute('spin', '');
+    } else {
+      downloadItem!.setAttribute('icon', 'download');
+      downloadIcon.removeAttribute('spin');
+    }
+  }
+
   private vsDownloadDB(mainMenu: LitMainMenu, fileDbName: string) {
     let fileName = fileDbName?.substring(0, fileDbName?.lastIndexOf('.')) + '.db';
     threadPool.submit(
@@ -1327,27 +1291,14 @@ export class SpApplication extends BaseElement {
       (reqBufferDB: any) => {
         Cmd.showSaveFile((filePath: string) => {
           if (filePath != '') {
-            let querySelectorAll = mainMenu.shadowRoot?.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
-            querySelectorAll!.forEach((menuGroup) => {
-              let attribute = menuGroup.getAttribute('title');
-              if (attribute === 'Current Trace') {
-                let querySelectors = menuGroup.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
-                querySelectors.forEach((item) => {
-                  if (item.getAttribute('title') == 'Download Database') {
-                    item!.setAttribute('icon', 'convert-loading');
-                    let querySelector1 = item!.shadowRoot?.querySelector('.icon') as LitIcon;
-                    querySelector1.setAttribute('spin', '');
-                  }
-                });
-              }
-            });
+            this.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', true);
             const fd = new FormData();
             fd.append('convertType', 'download');
             fd.append('filePath', filePath);
             fd.append('file', new File([reqBufferDB], fileName));
             Cmd.uploadFile(fd, (res: Response) => {
               if (res.ok) {
-                this.stopDownLoading(mainMenu, 'Download Database');
+                this.itemIconLoading(mainMenu, 'Current Trace', 'Download Database', false);
               }
             });
           }
@@ -1360,25 +1311,12 @@ export class SpApplication extends BaseElement {
   private vsDownload(mainMenu: LitMainMenu, fileName: string, isServer: boolean, dbName?: string) {
     Cmd.showSaveFile((filePath: string) => {
       if (filePath != '') {
-        let querySelectorAll = mainMenu.shadowRoot?.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
-        querySelectorAll!.forEach((menuGroup) => {
-          let attribute = menuGroup.getAttribute('title');
-          if (attribute === 'Current Trace') {
-            let querySelectors = menuGroup.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
-            querySelectors.forEach((item) => {
-              if (item.getAttribute('title') == 'DownLoad') {
-                item!.setAttribute('icon', 'convert-loading');
-                let querySelector1 = item!.shadowRoot?.querySelector('.icon') as LitIcon;
-                querySelector1.setAttribute('spin', '');
-              }
-            });
-          }
-        });
+        this.itemIconLoading(mainMenu, 'Current Trace', 'Download File', true);
         if (isServer) {
           if (dbName != '') {
             let file = dbName?.substring(0, dbName?.lastIndexOf('.')) + fileName.substring(fileName.lastIndexOf('.'));
             Cmd.copyFile(file, filePath, (res: Response) => {
-              this.stopDownLoading(mainMenu);
+              this.itemIconLoading(mainMenu, 'Current Trace', 'Download File', false);
             });
           }
         } else {
@@ -1388,7 +1326,7 @@ export class SpApplication extends BaseElement {
           fd.append('file', new File([DbPool.sharedBuffer!], fileName));
           Cmd.uploadFile(fd, (res: Response) => {
             if (res.ok) {
-              this.stopDownLoading(mainMenu);
+              this.itemIconLoading(mainMenu, 'Current Trace', 'Download File', false);
             }
           });
         }
diff --git a/ide/src/trace/bean/CpuAbilityMonitorStruct.ts b/ide/src/trace/bean/CpuAbilityMonitorStruct.ts
deleted file mode 100644
index 4fc096881cf3e819b24e879b0933b4b6d4252b1d..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/CpuAbilityMonitorStruct.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * 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 } from './BaseStruct.js';
-
-export class CpuAbilityMonitorStruct extends BaseStruct {
-  static maxCpuUtilization: number = 0;
-  static maxCpuUtilizationName: string = '0 %';
-  static hoverCpuAbilityStruct: CpuAbilityMonitorStruct | undefined;
-  static selectCpuAbilityStruct: CpuAbilityMonitorStruct | undefined;
-
-  type: number | undefined;
-  value: number | undefined;
-  startNS: number | undefined;
-  dur: number | undefined;
-}
diff --git a/ide/src/trace/bean/CpuFreqStruct.ts b/ide/src/trace/bean/CpuFreqStruct.ts
index a7e7a7b05ab4311b5c94f996cec14cb22a28e61e..2fa2526a215e8f027f2868a9a471379ca6c2b924 100644
--- a/ide/src/trace/bean/CpuFreqStruct.ts
+++ b/ide/src/trace/bean/CpuFreqStruct.ts
@@ -26,40 +26,68 @@ export class CpuFreqStruct extends BaseStruct {
   startNS: number | undefined;
   dur: number | undefined; // Self-supplementing, the database is not returned
 
-  static draw(ctx: any, data: CpuFreqStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      let index = data.cpu || 0;
-      index += 2;
-      ctx.fillStyle = ColorUtils.colorForTid(index);
-      ctx.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === CpuFreqStruct.hoverCpuFreqStruct?.startNS) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0) * 1.0) / CpuFreqStruct.maxFreq
+  static draw(freqBeanStructCanvasCtx: any, freqBeanStruct: CpuFreqStruct) {
+    if (freqBeanStruct.frame) {
+      let freqBeanStructWidth = freqBeanStruct.frame.width || 0;
+      let freqBeanStructIndex = freqBeanStruct.cpu || 0;
+      freqBeanStructIndex += 2;
+      freqBeanStructCanvasCtx.fillStyle = ColorUtils.colorForTid(freqBeanStructIndex);
+      freqBeanStructCanvasCtx.strokeStyle = ColorUtils.colorForTid(freqBeanStructIndex);
+      if (freqBeanStruct.startNS === CpuFreqStruct.hoverCpuFreqStruct?.startNS) {
+        freqBeanStructCanvasCtx.lineWidth = 1;
+        freqBeanStructCanvasCtx.globalAlpha = 0.6;
+        let freqBeanStructDrawHeight: number = Math.floor(
+          ((freqBeanStruct.value || 0) * (freqBeanStruct.frame.height || 0) * 1.0) /
+          CpuFreqStruct.maxFreq
+        );
+        freqBeanStructCanvasCtx.fillRect(
+          freqBeanStruct.frame.x,
+          freqBeanStruct.frame.y + freqBeanStruct.frame.height - freqBeanStructDrawHeight,
+          freqBeanStructWidth,
+          freqBeanStructDrawHeight
+        );
+        freqBeanStructCanvasCtx.beginPath();
+        freqBeanStructCanvasCtx.arc(
+          freqBeanStruct.frame.x,
+          freqBeanStruct.frame.y + freqBeanStruct.frame.height - freqBeanStructDrawHeight,
+          3,
+          0,
+          2 * Math.PI,
+          true
+        );
+        freqBeanStructCanvasCtx.fill();
+        freqBeanStructCanvasCtx.globalAlpha = 1.0;
+        freqBeanStructCanvasCtx.stroke();
+        freqBeanStructCanvasCtx.beginPath();
+        freqBeanStructCanvasCtx.moveTo(
+          freqBeanStruct.frame.x + 3,
+          freqBeanStruct.frame.y + freqBeanStruct.frame.height - freqBeanStructDrawHeight
+        );
+        freqBeanStructCanvasCtx.lineWidth = 3;
+        freqBeanStructCanvasCtx.lineTo(
+          freqBeanStruct.frame.x + freqBeanStructWidth,
+          freqBeanStruct.frame.y + freqBeanStruct.frame.height - freqBeanStructDrawHeight
         );
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        freqBeanStructCanvasCtx.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / CpuFreqStruct.maxFreq);
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        freqBeanStructCanvasCtx.globalAlpha = 0.6;
+        freqBeanStructCanvasCtx.lineWidth = 1;
+        let drawHeight: number = Math.floor(
+          ((freqBeanStruct.value || 0) * (freqBeanStruct.frame.height || 0)) /
+          CpuFreqStruct.maxFreq
+        );
+        freqBeanStructCanvasCtx.fillRect(
+          freqBeanStruct.frame.x,
+          freqBeanStruct.frame.y + freqBeanStruct.frame.height - drawHeight,
+          freqBeanStructWidth,
+          drawHeight
+        );
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    freqBeanStructCanvasCtx.globalAlpha = 1.0;
+    freqBeanStructCanvasCtx.lineWidth = 1;
   }
+
 }
 
 const textPadding = 2;
diff --git a/ide/src/trace/bean/CpuStruct.ts b/ide/src/trace/bean/CpuStruct.ts
index 30f9c72f71c8ceeaa8ad18097f508d716305c765..365efaecff556e3db8703c47bf302b26c153a552 100644
--- a/ide/src/trace/bean/CpuStruct.ts
+++ b/ide/src/trace/bean/CpuStruct.ts
@@ -21,7 +21,7 @@ export class CpuStruct extends BaseStruct {
   static cpuCount: number; //最大cpu数量
   static hoverCpuStruct: CpuStruct | undefined;
   static selectCpuStruct: CpuStruct | undefined;
-  static wakeupBean: WakeupBean | null | undefined = null;
+  static wakeupBean: WakeupBean | null | undefined;
   cpu: number | undefined;
   dur: number | undefined;
   end_state: string | undefined;
@@ -36,49 +36,49 @@ export class CpuStruct extends BaseStruct {
   tid: number | undefined;
   type: string | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: CpuStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      if (data.processId === CpuStruct.hoverCpuStruct?.processId || !CpuStruct.hoverCpuStruct) {
-        ctx.fillStyle = ColorUtils.colorForTid((data.processId || 0) > 0 ? data.processId || 0 : data.tid || 0);
+  static draw(cpuBeanStructCanvasCtx: CanvasRenderingContext2D, cpuBeanStruct: CpuStruct) {
+    if (cpuBeanStruct.frame) {
+      let cpuBeanStructWidth = cpuBeanStruct.frame.width || 0;
+      if (cpuBeanStruct.processId === CpuStruct.hoverCpuStruct?.processId || !CpuStruct.hoverCpuStruct) {
+        cpuBeanStructCanvasCtx.fillStyle = ColorUtils.colorForTid((cpuBeanStruct.processId || 0) > 0 ? cpuBeanStruct.processId || 0 : cpuBeanStruct.tid || 0);
       } else {
-        ctx.fillStyle = '#e0e0e0';
+        cpuBeanStructCanvasCtx.fillStyle = '#e0e0e0';
       }
-      ctx.fillRect(data.frame.x, data.frame.y, width, data.frame.height);
-      if (width > textPadding * 2) {
-        let process = `${data.processName || 'Process'} [${data.processId}]`;
-        let thread = `${data.name || 'Thread'} [${data.tid}]`;
-        let processMeasure = ctx.measureText(process);
-        let threadMeasure = ctx.measureText(thread);
-        let processCharWidth = Math.round(processMeasure.width / process.length);
-        let threadCharWidth = Math.round(threadMeasure.width / thread.length);
-        ctx.fillStyle = '#ffffff';
-        let y = data.frame.height / 2 + data.frame.y;
-        if (processMeasure.width < width - textPadding * 2) {
-          let x1 = Math.floor(width / 2 - processMeasure.width / 2 + data.frame.x + textPadding);
-          ctx.textBaseline = 'bottom';
-          ctx.fillText(process, x1, y, width - textPadding * 2);
-        } else if (width - textPadding * 2 > processCharWidth * 4) {
-          let chatNum = (width - textPadding * 2) / processCharWidth;
-          let x1 = data.frame.x + textPadding;
-          ctx.textBaseline = 'bottom';
-          ctx.fillText(process.substring(0, chatNum - 4) + '...', x1, y, width - textPadding * 2);
+      cpuBeanStructCanvasCtx.fillRect(cpuBeanStruct.frame.x, cpuBeanStruct.frame.y, cpuBeanStructWidth, cpuBeanStruct.frame.height);
+      if (cpuBeanStructWidth > textPadding * 2) {
+        let cpuBeanProcess = `${cpuBeanStruct.processName || 'Process'} [${cpuBeanStruct.processId}]`;
+        let cpuBeanThread = `${cpuBeanStruct.name || 'Thread'} [${cpuBeanStruct.tid}]`;
+        let cpuBeanProcessMeasure = cpuBeanStructCanvasCtx.measureText(cpuBeanProcess);
+        let cpuBeanThreadMeasure = cpuBeanStructCanvasCtx.measureText(cpuBeanThread);
+        let cpuBeanProcessCharWidth = Math.round(cpuBeanProcessMeasure.width / cpuBeanProcess.length);
+        let cpuBeanThreadCharWidth = Math.round(cpuBeanThreadMeasure.width / cpuBeanThread.length);
+        cpuBeanStructCanvasCtx.fillStyle = '#ffffff';
+        let y = cpuBeanStruct.frame.height / 2 + cpuBeanStruct.frame.y;
+        if (cpuBeanProcessMeasure.width < cpuBeanStructWidth - textPadding * 2) {
+          let x1 = Math.floor(cpuBeanStructWidth / 2 - cpuBeanProcessMeasure.width / 2 + cpuBeanStruct.frame.x + textPadding);
+          cpuBeanStructCanvasCtx.textBaseline = 'bottom';
+          cpuBeanStructCanvasCtx.fillText(cpuBeanProcess, x1, y, cpuBeanStructWidth - textPadding * 2);
+        } else if (cpuBeanStructWidth - textPadding * 2 > cpuBeanProcessCharWidth * 4) {
+          let chatNum = (cpuBeanStructWidth - textPadding * 2) / cpuBeanProcessCharWidth;
+          let x1 = cpuBeanStruct.frame.x + textPadding;
+          cpuBeanStructCanvasCtx.textBaseline = 'bottom';
+          cpuBeanStructCanvasCtx.fillText(cpuBeanProcess.substring(0, chatNum - 4) + '...', x1, y, cpuBeanStructWidth - textPadding * 2);
         }
-        if (threadMeasure.width < width - textPadding * 2) {
-          ctx.textBaseline = 'top';
-          let x2 = Math.floor(width / 2 - threadMeasure.width / 2 + data.frame.x + textPadding);
-          ctx.fillText(thread, x2, y + 2, width - textPadding * 2);
-        } else if (width - textPadding * 2 > threadCharWidth * 4) {
-          let chatNum = (width - textPadding * 2) / threadCharWidth;
-          let x1 = data.frame.x + textPadding;
-          ctx.textBaseline = 'top';
-          ctx.fillText(thread.substring(0, chatNum - 4) + '...', x1, y + 2, width - textPadding * 2);
+        if (cpuBeanThreadMeasure.width < cpuBeanStructWidth - textPadding * 2) {
+          cpuBeanStructCanvasCtx.textBaseline = 'top';
+          let x2 = Math.floor(cpuBeanStructWidth / 2 - cpuBeanThreadMeasure.width / 2 + cpuBeanStruct.frame.x + textPadding);
+          cpuBeanStructCanvasCtx.fillText(cpuBeanThread, x2, y + 2, cpuBeanStructWidth - textPadding * 2);
+        } else if (cpuBeanStructWidth - textPadding * 2 > cpuBeanThreadCharWidth * 4) {
+          let chatNum = (cpuBeanStructWidth - textPadding * 2) / cpuBeanThreadCharWidth;
+          let x1 = cpuBeanStruct.frame.x + textPadding;
+          cpuBeanStructCanvasCtx.textBaseline = 'top';
+          cpuBeanStructCanvasCtx.fillText(cpuBeanThread.substring(0, chatNum - 4) + '...', x1, y + 2, cpuBeanStructWidth - textPadding * 2);
         }
       }
-      if (CpuStruct.selectCpuStruct && CpuStruct.equals(CpuStruct.selectCpuStruct, data)) {
-        ctx.strokeStyle = '#232c5d';
-        ctx.lineWidth = 2;
-        ctx.strokeRect(data.frame.x, data.frame.y, width - 2, data.frame.height);
+      if (CpuStruct.selectCpuStruct && CpuStruct.equals(CpuStruct.selectCpuStruct, cpuBeanStruct)) {
+        cpuBeanStructCanvasCtx.strokeStyle = '#232c5d';
+        cpuBeanStructCanvasCtx.lineWidth = 2;
+        cpuBeanStructCanvasCtx.strokeRect(cpuBeanStruct.frame.x, cpuBeanStruct.frame.y, cpuBeanStructWidth - 2, cpuBeanStruct.frame.height);
       }
     }
   }
diff --git a/ide/src/trace/bean/DiskAbilityMonitorStruct.ts b/ide/src/trace/bean/DiskAbilityMonitorStruct.ts
deleted file mode 100644
index 8a9d9919ffdada3a96176432e325b47a75e36c71..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/DiskAbilityMonitorStruct.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { ColorUtils } from '../component/trace/base/ColorUtils.js';
-import { BaseStruct } from './BaseStruct.js';
-
-export class DiskAbilityMonitorStruct extends BaseStruct {
-  static maxDiskRate: number = 0;
-  static maxDiskRateName: string = '0 KB/S';
-  static hoverDiskAbilityStruct: DiskAbilityMonitorStruct | undefined;
-  static selectDiskAbilityStruct: DiskAbilityMonitorStruct | undefined;
-  cpu: number | undefined;
-  value: number | undefined;
-  startNS: number | undefined;
-  dur: number | undefined;
-
-  static draw(context2D: any, data: DiskAbilityMonitorStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      let index = data.cpu || 0;
-      index += 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === DiskAbilityMonitorStruct.hoverDiskAbilityStruct?.startNS) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0) * 1.0) / DiskAbilityMonitorStruct.maxDiskRate
-        );
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        context2D.stroke();
-      } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0)) / DiskAbilityMonitorStruct.maxDiskRate
-        );
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-      }
-    }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
-  }
-}
diff --git a/ide/src/trace/bean/EnergyStruct.ts b/ide/src/trace/bean/EnergyStruct.ts
index 48a5dc4c69d9612ecf9d8ec019f47de15c5f87d1..b13c58a5f4bab963933d78f3e2269a78fda49e0c 100644
--- a/ide/src/trace/bean/EnergyStruct.ts
+++ b/ide/src/trace/bean/EnergyStruct.ts
@@ -13,68 +13,6 @@
  * limitations under the License.
  */
 
-import { BaseStruct } from './BaseStruct.js';
-
-export class EnergyAnomalyStruct extends BaseStruct {
-  static hoverEnergyAnomalyStruct: EnergyAnomalyStruct | undefined;
-  static selectEnergyAnomalyStruct: EnergyAnomalyStruct | undefined;
-  type: number | undefined;
-  startNS: number | undefined;
-  height: number | undefined;
-  eventName: string | undefined;
-}
-
-export class EnergySystemStruct extends BaseStruct {
-  static hoverEnergySystemStruct: EnergySystemStruct | undefined;
-  static selectEnergySystemStruct: EnergySystemStruct | undefined;
-  type: number | undefined;
-  startNs: number | undefined;
-  dur: number | undefined;
-  count: number | undefined;
-  workScheduler: string | undefined;
-  power: string | undefined;
-  location: string | undefined;
-}
-
-export class EnergyPowerStruct extends BaseStruct {
-  static maxPower: number = 0;
-  static maxPowerName: string = '0 %';
-  static powerItemNumber: number = 9;
-  static colorIndex: number = 2;
-  static currentTextWidth: number = 0;
-  static rowHeight: number = 200;
-  static appName: string | undefined;
-  static hoverEnergyPowerStruct: EnergyPowerStruct | undefined;
-  static selectEnergyPowerStruct: EnergyPowerStruct | undefined;
-  name: string | undefined; // appName
-  ts: number = 0;
-  cpu: number = 0;
-  location: number = 0;
-  gpu: number = 0;
-  display: number = 0;
-  camera: number = 0;
-  bluetooth: number = 0;
-  flashlight: number = 0;
-  audio: number = 0;
-  wifiscan: number = 0;
-}
-
-export class EnergyStateStruct extends BaseStruct {
-  static maxState: number = 0;
-  static maxStateName: string = '0';
-  static hoverEnergyStateStruct: EnergyStateStruct | undefined;
-  static selectEnergyStateStruct: EnergyStateStruct | undefined;
-  type: string | undefined;
-  value: number | undefined;
-  startNs: number | undefined;
-  dur: number | undefined;
-
-  sensorType: number | undefined;
-  pkg_name: string | undefined;
-  deviceState: number | undefined;
-  deviceType: number | undefined;
-}
-
 export class PowerDetailsEnergy {
   constructor(eventName: string) {
     this.event = eventName;
@@ -115,17 +53,6 @@ export class PowerDetailsEnergy {
   }
 }
 
-export class PowerBatteryEnergy {
-  gasGauge: number = -1;
-  charge: number = -1;
-  screen: number = -1;
-  level: number = -1;
-  current: number = -1;
-  capacity: number = -1;
-  appName: string = '';
-  uid: number = -1;
-}
-
 export class SystemDetailsEnergy {
   ts: number = 0;
   eventName: string = '';
diff --git a/ide/src/trace/bean/FpsStruct.ts b/ide/src/trace/bean/FpsStruct.ts
index 7f3c649df3a08257420591b666eba186a0f11d4e..793cd20c39966804853499f61a870e9a589ea31f 100644
--- a/ide/src/trace/bean/FpsStruct.ts
+++ b/ide/src/trace/bean/FpsStruct.ts
@@ -27,57 +27,57 @@ export class FpsStruct extends BaseStruct {
   startNS: number | undefined = 0;
   dur: number | undefined; //自补充，数据库没有返回
 
-  static draw(ctx: CanvasRenderingContext2D, data: FpsStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      ctx.fillStyle = '#535da6';
-      ctx.strokeStyle = '#535da6';
-      if (data.startNS === FpsStruct.hoverFpsStruct?.startNS) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+  static draw(fpsBeanStructCanvasCtx: CanvasRenderingContext2D, fpsBeanStructData: FpsStruct) {
+    if (fpsBeanStructData.frame) {
+      let fpsBeanWidth = fpsBeanStructData.frame.width || 0;
+      fpsBeanStructCanvasCtx.fillStyle = '#535da6';
+      fpsBeanStructCanvasCtx.strokeStyle = '#535da6';
+      if (fpsBeanStructData.startNS === FpsStruct.hoverFpsStruct?.startNS) {
+        fpsBeanStructCanvasCtx.lineWidth = 1;
+        fpsBeanStructCanvasCtx.globalAlpha = 0.6;
+        let drawHeight: number = ((fpsBeanStructData.fps || 0) * (fpsBeanStructData.frame.height || 0) * 1.0) / FpsStruct.maxFps;
+        fpsBeanStructCanvasCtx.fillRect(fpsBeanStructData.frame.x, fpsBeanStructData.frame.y + fpsBeanStructData.frame.height - drawHeight, fpsBeanWidth, drawHeight);
+        fpsBeanStructCanvasCtx.beginPath();
+        fpsBeanStructCanvasCtx.arc(fpsBeanStructData.frame.x, fpsBeanStructData.frame.y + fpsBeanStructData.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        fpsBeanStructCanvasCtx.fill();
+        fpsBeanStructCanvasCtx.globalAlpha = 1.0;
+        fpsBeanStructCanvasCtx.stroke();
+        fpsBeanStructCanvasCtx.beginPath();
+        fpsBeanStructCanvasCtx.moveTo(fpsBeanStructData.frame.x + 3, fpsBeanStructData.frame.y + fpsBeanStructData.frame.height - drawHeight);
+        fpsBeanStructCanvasCtx.lineWidth = 3;
+        fpsBeanStructCanvasCtx.lineTo(fpsBeanStructData.frame.x + fpsBeanWidth, fpsBeanStructData.frame.y + fpsBeanStructData.frame.height - drawHeight);
+        fpsBeanStructCanvasCtx.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
-        let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        fpsBeanStructCanvasCtx.globalAlpha = 0.6;
+        fpsBeanStructCanvasCtx.lineWidth = 1;
+        let drawHeight: number = ((fpsBeanStructData.fps || 0) * (fpsBeanStructData.frame.height || 0) * 1.0) / FpsStruct.maxFps;
+        fpsBeanStructCanvasCtx.fillRect(fpsBeanStructData.frame.x, fpsBeanStructData.frame.y + fpsBeanStructData.frame.height - drawHeight, fpsBeanWidth, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    fpsBeanStructCanvasCtx.globalAlpha = 1.0;
+    fpsBeanStructCanvasCtx.lineWidth = 1;
   }
 
-  static setFrame(node: FpsStruct, padding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) {
-    let x1: number, x2: number;
-    if ((node.startNS || 0) < startNS) {
-      x1 = 0;
+  static setFrame(fpsBeanStructNode: FpsStruct, fpsBeanFramePadding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) {
+    let fpsBeanStructX1: number, fpsBeanStructX2: number;
+    if ((fpsBeanStructNode.startNS || 0) < startNS) {
+      fpsBeanStructX1 = 0;
     } else {
-      x1 = ns2x(node.startNS || 0, startNS, endNS, totalNS, frame);
+      fpsBeanStructX1 = ns2x(fpsBeanStructNode.startNS || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      x2 = frame.width;
+    if ((fpsBeanStructNode.startNS || 0) + (fpsBeanStructNode.dur || 0) > endNS) {
+      fpsBeanStructX2 = frame.width;
     } else {
-      x2 = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      fpsBeanStructX2 = ns2x((fpsBeanStructNode.startNS || 0) + (fpsBeanStructNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
+    let getV: number = fpsBeanStructX2 - fpsBeanStructX1 <= 1 ? 1 : fpsBeanStructX2 - fpsBeanStructX1;
     let rectangle: Rect = new Rect(
-      Math.floor(x1),
-      Math.ceil(frame.y + padding),
+      Math.floor(fpsBeanStructX1),
+      Math.ceil(frame.y + fpsBeanFramePadding),
       Math.ceil(getV),
-      Math.floor(frame.height - padding * 2)
+      Math.floor(frame.height - fpsBeanFramePadding * 2)
     );
-    node.frame = rectangle;
+    fpsBeanStructNode.frame = rectangle;
   }
 }
 
diff --git a/ide/src/trace/bean/FrameChartStruct.ts b/ide/src/trace/bean/FrameChartStruct.ts
index 1f21b167c2426e967e67acbb33a6a6ae789ec3d3..336f8b4f8571751cc99d6e852630b00cd12baad4 100644
--- a/ide/src/trace/bean/FrameChartStruct.ts
+++ b/ide/src/trace/bean/FrameChartStruct.ts
@@ -17,6 +17,7 @@ import { SpApplication } from '../SpApplication.js';
 import { BaseStruct } from './BaseStruct.js';
 import { Rect } from '../component/trace/timer-shaft/Rect.js';
 import { info, warn } from '../../log/Log.js';
+import { drawString } from '../database/ui-worker/ProcedureWorkerCommon.js';
 
 const padding: number = 1;
 const lightBlue = {
@@ -88,53 +89,53 @@ export function setFuncFrame(node: ChartStruct, canvas_frame: Rect, total: numbe
 
 /**
  * draw rect
- * @param ctx CanvasRenderingContext2D
- * @param data rect which is need draw
+ * @param frameChartBeanCanvasCtx CanvasRenderingContext2D
+ * @param frameChartBeanData rect which is need draw
  * @param percent function size or count / total size or count
  */
-export function draw(ctx: CanvasRenderingContext2D, data: ChartStruct) {
+export function draw(frameChartBeanCanvasCtx: CanvasRenderingContext2D, frameChartBeanData: ChartStruct) {
   let spApplication = <SpApplication>document.getElementsByTagName('sp-application')[0];
-  if (data.frame) {
+  if (frameChartBeanData.frame) {
     // draw rect
-    let miniHeight = 20;
-    if (isSelected(data)) {
-      ctx.fillStyle = `rgba(${lightBlue.r}, ${lightBlue.g}, ${lightBlue.b}, ${lightBlue.a})`;
+    let frameChartMiniHeight = 20;
+    if (isSelected(frameChartBeanData)) {
+      frameChartBeanCanvasCtx.fillStyle = `rgba(${lightBlue.r}, ${lightBlue.g}, ${lightBlue.b}, ${lightBlue.a})`;
     } else {
-      let color = getHeatColor(data.percent);
-      ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, 0.9)`;
+      let color = getHeatColor(frameChartBeanData.percent);
+      frameChartBeanCanvasCtx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, 0.9)`;
     }
-    ctx.fillRect(data.frame.x, data.frame.y, data.frame.width, miniHeight - padding * 2);
+    frameChartBeanCanvasCtx.fillRect(frameChartBeanData.frame.x, frameChartBeanData.frame.y, frameChartBeanData.frame.width, frameChartMiniHeight - padding * 2);
     //draw border
-    ctx.lineWidth = 0.4;
-    if (isHover(data)) {
+    frameChartBeanCanvasCtx.lineWidth = 0.4;
+    if (isHover(frameChartBeanData)) {
       if (spApplication.dark) {
-        ctx.strokeStyle = '#fff';
+        frameChartBeanCanvasCtx.strokeStyle = '#fff';
       } else {
-        ctx.strokeStyle = '#000';
+        frameChartBeanCanvasCtx.strokeStyle = '#000';
       }
     } else {
       if (spApplication.dark) {
-        ctx.strokeStyle = '#000';
+        frameChartBeanCanvasCtx.strokeStyle = '#000';
       } else {
-        ctx.strokeStyle = '#fff';
+        frameChartBeanCanvasCtx.strokeStyle = '#fff';
       }
-      if (data.isSearch) {
-        ctx.strokeStyle = `rgb(${lightBlue.r}, ${lightBlue.g}, ${lightBlue.b})`;
-        ctx.lineWidth = 1;
+      if (frameChartBeanData.isSearch) {
+        frameChartBeanCanvasCtx.strokeStyle = `rgb(${lightBlue.r}, ${lightBlue.g}, ${lightBlue.b})`;
+        frameChartBeanCanvasCtx.lineWidth = 1;
       }
     }
-    ctx.strokeRect(data.frame.x, data.frame.y, data.frame.width, miniHeight - padding * 2);
+    frameChartBeanCanvasCtx.strokeRect(frameChartBeanData.frame.x, frameChartBeanData.frame.y, frameChartBeanData.frame.width, frameChartMiniHeight - padding * 2);
 
     //draw symbol name
-    if (data.frame.width > 10) {
-      if (data.percent > 0.6 || isSelected(data)) {
-        ctx.fillStyle = '#fff';
+    if (frameChartBeanData.frame.width > 10) {
+      if (frameChartBeanData.percent > 0.6 || isSelected(frameChartBeanData)) {
+        frameChartBeanCanvasCtx.fillStyle = '#fff';
       } else {
-        ctx.fillStyle = '#000';
+        frameChartBeanCanvasCtx.fillStyle = '#000';
       }
-      drawString(ctx, data.symbol || '', 5, data.frame, data);
+      drawString(frameChartBeanCanvasCtx, frameChartBeanData.symbol || '', 5, frameChartBeanData.frame, frameChartBeanData);
     }
-    data.isDraw = true;
+    frameChartBeanData.isDraw = true;
   }
 }
 
@@ -151,51 +152,6 @@ function getHeatColor(widthPercentage: number) {
   };
 }
 
-/**
- * draw function string in rect
- * @param ctx CanvasRenderingContext2D
- * @param str function Name
- * @param textPadding textPadding
- * @param frame canvas area
- * @returns is draw
- */
-function drawString(
-  ctx: CanvasRenderingContext2D,
-  str: string,
-  textPadding: number,
-  frame: Rect,
-  struct: ChartStruct
-): boolean {
-  if (!struct.textMetricsWidth) {
-    struct.textMetricsWidth = ctx.measureText(str).width;
-  }
-
-  let charWidth = Math.round(struct.textMetricsWidth / str.length);
-  let fillTextWidth = frame.width - textPadding * 2;
-  if (struct.textMetricsWidth < frame.width - textPadding * 2) {
-    let x2 = Math.floor(frame.width / 2 - struct.textMetricsWidth / 2 + frame.x + textPadding);
-    ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2 + 2), fillTextWidth);
-    return true;
-  } 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 + 2), fillTextWidth);
-      } else {
-        ctx.fillText(
-          str.substring(0, chatNum - 1) + '...',
-          x1,
-          Math.floor(frame.y + frame.height / 2 + 2),
-          fillTextWidth
-        );
-      }
-      return true;
-    }
-  }
-  return false;
-}
-
 function isHover(data: ChartStruct): boolean {
   return ChartStruct.hoverFuncStruct == data;
 }
diff --git a/ide/src/trace/bean/FuncStruct.ts b/ide/src/trace/bean/FuncStruct.ts
index e282a4534357a6fa3add4a88c0ba07831e57f2b9..416ebd07a2c5f07b164223b0b26d4b46c4b0da9f 100644
--- a/ide/src/trace/bean/FuncStruct.ts
+++ b/ide/src/trace/bean/FuncStruct.ts
@@ -16,6 +16,7 @@
 import { BaseStruct } from './BaseStruct.js';
 import { Rect } from '../component/trace/timer-shaft/Rect.js';
 import { ColorUtils } from '../component/trace/base/ColorUtils.js';
+import { drawString } from '../database/ui-worker/ProcedureWorkerCommon.js';
 
 export class FuncStruct extends BaseStruct {
   static hoverFuncStruct: FuncStruct | undefined;
@@ -33,46 +34,24 @@ export class FuncStruct extends BaseStruct {
   identify: number | undefined;
   track_id: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: FuncStruct) {
-    if (data.frame) {
-      if (data.dur == undefined || data.dur == null || data.dur == 0 || FuncStruct.isBinder(data)) {
+  static draw(funcBeanStructCanvasCtx: CanvasRenderingContext2D, funcBeanStruct: FuncStruct) {
+    if (funcBeanStruct.frame) {
+      if (funcBeanStruct.dur == undefined || funcBeanStruct.dur == null || funcBeanStruct.dur == 0 || FuncStruct.isBinder(funcBeanStruct)) {
       } else {
-        let width = data.frame.width || 0;
-        ctx.fillStyle = ColorUtils.FUNC_COLOR[data.depth || 0 % ColorUtils.FUNC_COLOR.length];
+        funcBeanStructCanvasCtx.fillStyle = ColorUtils.FUNC_COLOR[funcBeanStruct.depth || 0 % ColorUtils.FUNC_COLOR.length];
         let miniHeight = 20;
-        ctx.fillRect(data.frame.x, data.frame.y, data.frame.width, miniHeight - padding * 2);
-        ctx.fillStyle = '#fff';
-        FuncStruct.drawString(ctx, data.funName || '', 5, data.frame);
-        if (FuncStruct.isSelected(data)) {
-          ctx.strokeStyle = '#000';
-          ctx.lineWidth = 1;
-          ctx.strokeRect(data.frame.x, data.frame.y, data.frame.width, miniHeight - padding * 2);
+        funcBeanStructCanvasCtx.fillRect(funcBeanStruct.frame.x, funcBeanStruct.frame.y, funcBeanStruct.frame.width, miniHeight - padding * 2);
+        funcBeanStructCanvasCtx.fillStyle = '#fff';
+        drawString(funcBeanStructCanvasCtx, funcBeanStruct.funName || '', 5, funcBeanStruct.frame, funcBeanStruct);
+        if (FuncStruct.isSelected(funcBeanStruct)) {
+          funcBeanStructCanvasCtx.strokeStyle = '#000';
+          funcBeanStructCanvasCtx.lineWidth = 1;
+          funcBeanStructCanvasCtx.strokeRect(funcBeanStruct.frame.x, funcBeanStruct.frame.y, funcBeanStruct.frame.width, miniHeight - padding * 2);
         }
       }
     }
   }
 
-  static drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect) {
-    let textMetrics = ctx.measureText(str);
-    let charWidth = Math.round(textMetrics.width / str.length);
-    if (textMetrics.width < frame.width - textPadding * 2) {
-      let x2 = Math.floor(frame.width / 2 - textMetrics.width / 2 + frame.x + textPadding);
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2 + 2), frame.width - textPadding * 2);
-      return;
-    }
-    if (frame.width - textPadding * 2 > charWidth * 4) {
-      let chatNum = (frame.width - textPadding * 2) / charWidth;
-      let x1 = frame.x + textPadding;
-      ctx.fillText(
-        str.substring(0, chatNum - 4) + '...',
-        x1,
-        Math.floor(frame.y + frame.height / 2 + 2),
-        frame.width - textPadding * 2
-      );
-      return;
-    }
-  }
-
   static isSelected(data: FuncStruct): boolean {
     return (
       FuncStruct.selectFuncStruct != undefined &&
diff --git a/ide/src/trace/bean/HeapBean.ts b/ide/src/trace/bean/HeapBean.ts
deleted file mode 100644
index 4a48b4fd348d65475739189f409379cb59e7b406..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/HeapBean.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * 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 class HeapBean {
-  MoudleName: string | undefined;
-  AllocationFunction: string | undefined;
-  Allocations: number | string = 0;
-  Deallocations: number | string = 0;
-  AllocationSize: number | string = 0;
-  DeAllocationSize: number | string = 0;
-  Total: number | string = 0;
-  RemainingSize: number | string = 0;
-  children: HeapBean[] = [];
-  depth: number = 0;
-}
diff --git a/ide/src/trace/bean/HeapStruct.ts b/ide/src/trace/bean/HeapStruct.ts
index 2f5e812dc8e7a0e9a2d92ca536f2ee1769664e51..3705d398eb556d2b8398410e7b7929e2d2c42851 100644
--- a/ide/src/trace/bean/HeapStruct.ts
+++ b/ide/src/trace/bean/HeapStruct.ts
@@ -27,64 +27,34 @@ export class HeapStruct extends BaseStruct {
   density: number | undefined;
   maxHeapSize: number = 0;
   minHeapSize: number = 0;
-
-  static setFrame(node: HeapStruct, padding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) {
-    let x1: number, x2: number;
-    if ((node.startTime || 0) < startNS) {
-      x1 = 0;
-    } else {
-      x1 = ns2x(node.startTime || 0, startNS, endNS, totalNS, frame);
-    }
-    if ((node.startTime || 0) + (node.dur || 0) > endNS) {
-      x2 = frame.width;
-    } else {
-      x2 = ns2x(
-        // @ts-ignore
-        node.startTime + node.dur,
-        startNS,
-        endNS,
-        totalNS,
-        frame
-      );
-    }
-    let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
-    let rectangle: Rect = new Rect(
-      Math.floor(x1),
-      Math.ceil(frame.y + padding),
-      Math.ceil(getV),
-      Math.floor(frame.height - padding * 2)
-    );
-    node.frame = rectangle;
-  }
-
-  static draw(ctx: CanvasRenderingContext2D, data: HeapStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      ctx.fillStyle = '#2db3aa';
-      ctx.strokeStyle = '#2db3aa';
-      if (data.startTime === HeapStruct.hoverHeapStruct?.startTime) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        let drawHeight: number = Math.ceil(((data.heapsize || 0) * (data.frame.height || 0)) / data.maxHeapSize);
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+  static draw(heapBeanStructCanvasCtx: CanvasRenderingContext2D, heapBeanData: HeapStruct) {
+    if (heapBeanData.frame) {
+      let width = heapBeanData.frame.width || 0;
+      heapBeanStructCanvasCtx.fillStyle = '#2db3aa';
+      heapBeanStructCanvasCtx.strokeStyle = '#2db3aa';
+      if (heapBeanData.startTime === HeapStruct.hoverHeapStruct?.startTime) {
+        heapBeanStructCanvasCtx.lineWidth = 1;
+        heapBeanStructCanvasCtx.globalAlpha = 0.6;
+        let drawHeight: number = Math.ceil(((heapBeanData.heapsize || 0) * (heapBeanData.frame.height || 0)) / heapBeanData.maxHeapSize);
+        heapBeanStructCanvasCtx.fillRect(heapBeanData.frame.x, heapBeanData.frame.y + heapBeanData.frame.height - drawHeight, width, drawHeight);
+        heapBeanStructCanvasCtx.beginPath();
+        heapBeanStructCanvasCtx.arc(heapBeanData.frame.x, heapBeanData.frame.y + heapBeanData.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        heapBeanStructCanvasCtx.fill();
+        heapBeanStructCanvasCtx.globalAlpha = 1.0;
+        heapBeanStructCanvasCtx.stroke();
+        heapBeanStructCanvasCtx.beginPath();
+        heapBeanStructCanvasCtx.moveTo(heapBeanData.frame.x + 3, heapBeanData.frame.y + heapBeanData.frame.height - drawHeight);
+        heapBeanStructCanvasCtx.lineWidth = 3;
+        heapBeanStructCanvasCtx.lineTo(heapBeanData.frame.x + width, heapBeanData.frame.y + heapBeanData.frame.height - drawHeight);
+        heapBeanStructCanvasCtx.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
-        let drawHeight: number = Math.ceil(((data.heapsize || 0) * (data.frame.height || 0)) / data.maxHeapSize);
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        heapBeanStructCanvasCtx.globalAlpha = 0.6;
+        heapBeanStructCanvasCtx.lineWidth = 1;
+        let drawHeight: number = Math.ceil(((heapBeanData.heapsize || 0) * (heapBeanData.frame.height || 0)) / heapBeanData.maxHeapSize);
+        heapBeanStructCanvasCtx.fillRect(heapBeanData.frame.x, heapBeanData.frame.y + heapBeanData.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    heapBeanStructCanvasCtx.globalAlpha = 1.0;
+    heapBeanStructCanvasCtx.lineWidth = 1;
   }
 }
diff --git a/ide/src/trace/bean/HeapTreeDataBean.ts b/ide/src/trace/bean/HeapTreeDataBean.ts
deleted file mode 100644
index 4d590dace66074c591faafac05f9c3a6947adb22..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/HeapTreeDataBean.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * 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 class HeapTreeDataBean {
-  MoudleName: string | undefined;
-  AllocationFunction: string | undefined;
-  symbolId: number = 0;
-  fileId: number = 0;
-  startTs: number = 0;
-  endTs: number = 0;
-  eventType: string | undefined;
-  depth: number = 0;
-  heapSize: number = 0;
-  eventId: string = '';
-}
diff --git a/ide/src/trace/bean/MemoryAbilityMonitorStruct.ts b/ide/src/trace/bean/MemoryAbilityMonitorStruct.ts
deleted file mode 100644
index b7fb700fb20d466c997de8cc55a668f37b345719..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/MemoryAbilityMonitorStruct.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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 { ColorUtils } from '../component/trace/base/ColorUtils.js';
-import { BaseStruct } from './BaseStruct.js';
-
-export class MemoryAbilityMonitorStruct extends BaseStruct {
-  static maxMemoryByte: number = 0;
-  static maxMemoryByteName: string = '0 MB';
-  static hoverMemoryAbilityStruct: MemoryAbilityMonitorStruct | undefined;
-  static selectMemoryAbilityStruct: MemoryAbilityMonitorStruct | undefined;
-  cpu: number | undefined;
-  value: number | undefined;
-  startNS: number | undefined;
-  dur: number | undefined;
-
-  static draw(context2D: any, data: MemoryAbilityMonitorStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      let index = data.cpu || 0;
-      index += 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct?.startNS) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0) * 1.0) / MemoryAbilityMonitorStruct.maxMemoryByte
-        );
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        context2D.stroke();
-      } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0)) / MemoryAbilityMonitorStruct.maxMemoryByte
-        );
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-      }
-    }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
-  }
-}
diff --git a/ide/src/trace/bean/NetworkAbilityMonitorStruct.ts b/ide/src/trace/bean/NetworkAbilityMonitorStruct.ts
deleted file mode 100644
index ae96c8e13e3f2130774029b44a323cc58c3c9eee..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/NetworkAbilityMonitorStruct.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * 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 { ColorUtils } from '../component/trace/base/ColorUtils.js';
-import { BaseStruct } from './BaseStruct.js';
-
-export class NetworkAbilityMonitorStruct extends BaseStruct {
-  static maxNetworkRate: number = 0;
-  static maxNetworkRateName: string = '0 KB/S';
-  static hoverNetworkAbilityStruct: NetworkAbilityMonitorStruct | undefined;
-  static selectNetworkAbilityStruct: NetworkAbilityMonitorStruct | undefined;
-  value: number | undefined;
-  startNS: number | undefined;
-  dur: number | undefined;
-
-  static draw(context2D: any, data: NetworkAbilityMonitorStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      let index = 0;
-      index += 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct?.startNS) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0) * 1.0) / NetworkAbilityMonitorStruct.maxNetworkRate
-        );
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        context2D.stroke();
-      } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0)) / NetworkAbilityMonitorStruct.maxNetworkRate
-        );
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-      }
-    }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
-  }
-}
diff --git a/ide/src/trace/bean/PerfProfile.ts b/ide/src/trace/bean/PerfProfile.ts
index e6949b01211fb6da4c8209c31f96ea91ef270925..3c0aef060eb105ef7d0b114f8a6b3b0236bdc264 100644
--- a/ide/src/trace/bean/PerfProfile.ts
+++ b/ide/src/trace/bean/PerfProfile.ts
@@ -13,9 +13,7 @@
  * limitations under the License.
  */
 
-import { Utils } from '../component/trace/base/Utils.js';
 import { ChartStruct } from '../../trace/bean/FrameChartStruct.js';
-import { SpHiPerf } from '../component/chart/SpHiPerf.js';
 
 export class PerfFile {
   fileId: number = 0;
@@ -33,17 +31,6 @@ export class PerfFile {
     }
     data.fileName = data.path;
   }
-
-  setFileName() {
-    if (this.path) {
-      let number = this.path.lastIndexOf('/');
-      if (number > 0) {
-        this.fileName = this.path.substring(number + 1);
-        return;
-      }
-    }
-    this.fileName = this.path;
-  }
 }
 
 export class PerfThread {
@@ -83,29 +70,9 @@ export class PerfCallChain {
   canCharge: boolean = true;
   previousNode: PerfCallChain | undefined = undefined; //将list转换为一个链表结构
   nextNode: PerfCallChain | undefined = undefined;
-
-  static setNextNode(currentNode: PerfCallChain, nextNode: PerfCallChain) {
-    currentNode.nextNode = nextNode;
-    nextNode.previousNode = currentNode;
-  }
-
-  static setPreviousNode(currentNode: PerfCallChain, prevNode: PerfCallChain) {
-    currentNode.previousNode = prevNode;
-    prevNode.nextNode = currentNode;
-  }
-
-  static merageCallChain(currentNode: PerfCallChain, callChain: PerfCallChain) {
-    currentNode.startNS = callChain.startNS;
-    currentNode.tid = callChain.tid;
-    currentNode.pid = callChain.pid;
-    currentNode.sampleId = callChain.sampleId;
-    currentNode.dur = callChain.dur;
-  }
 }
 
 export class PerfCallChainMerageData extends ChartStruct {
-  #parentNode: PerfCallChainMerageData | undefined = undefined;
-  #total = 0;
   id: string = '';
   parentId: string = '';
   currentTreeParentNode: PerfCallChainMerageData | undefined = undefined;
@@ -128,46 +95,6 @@ export class PerfCallChainMerageData extends ChartStruct {
   vaddrInFile: number = 0;
   isSelected: boolean = false;
   searchShow: boolean = true;
-
-  set parentNode(data: PerfCallChainMerageData | undefined) {
-    this.currentTreeParentNode = data;
-    this.#parentNode = data;
-  }
-
-  get parentNode() {
-    return this.#parentNode;
-  }
-
-  set total(data: number) {
-    this.#total = data;
-    this.weight = `${Utils.timeMsFormat2p(this.dur * (SpHiPerf.stringResult?.fValue || 1))}`;
-    this.weightPercent = `${((this.dur / data) * 100).toFixed(1)}%`;
-  }
-
-  get total() {
-    return this.#total;
-  }
-
-  static merageCallChain(currentNode: PerfCallChainMerageData, callChain: PerfCallChain, isTopDown: boolean) {
-    if (currentNode.symbolName == '') {
-      currentNode.symbol = `${callChain.name}  ${callChain.fileName ? `(${callChain.fileName})` : ''}`;
-      currentNode.symbolName = callChain.name;
-      currentNode.pid = callChain.pid;
-      currentNode.tid = callChain.tid;
-      currentNode.libName = callChain.fileName;
-      currentNode.vaddrInFile = callChain.vaddrInFile;
-      currentNode.canCharge = callChain.canCharge;
-      if (callChain.path) {
-        currentNode.path = callChain.path;
-      }
-    }
-    if (callChain[isTopDown ? 'nextNode' : 'previousNode'] == undefined) {
-      currentNode.selfDur++;
-      currentNode.self = Utils.timeMsFormat2p(currentNode.selfDur);
-    }
-    currentNode.dur++;
-    currentNode.count++;
-  }
 }
 
 export class PerfSample {
diff --git a/ide/src/trace/bean/ProcessMemStruct.ts b/ide/src/trace/bean/ProcessMemStruct.ts
index 566e5b753e6bb462435de0679ef587e81b62d294..9d7aa90ccb91f37fbd75e2e03cc1d24e88b87763 100644
--- a/ide/src/trace/bean/ProcessMemStruct.ts
+++ b/ide/src/trace/bean/ProcessMemStruct.ts
@@ -31,36 +31,36 @@ export class ProcessMemStruct extends BaseStruct {
   maxValue: number | undefined;
   delta: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: ProcessMemStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      if (data.startTime === ProcessMemStruct.hoverProcessMemStruct?.startTime) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
+  static draw(processMemBeanStructCanvasCtx: CanvasRenderingContext2D, processMemBeanStructData: ProcessMemStruct) {
+    if (processMemBeanStructData.frame) {
+      let width = processMemBeanStructData.frame.width || 0;
+      if (processMemBeanStructData.startTime === ProcessMemStruct.hoverProcessMemStruct?.startTime) {
+        processMemBeanStructCanvasCtx.lineWidth = 1;
+        processMemBeanStructCanvasCtx.globalAlpha = 0.6;
         let drawHeight: number = Math.floor(
-          ((data.value || 0) * (data.frame.height || 0) * 1.0) / (data.maxValue || 0)
+          ((processMemBeanStructData.value || 0) * (processMemBeanStructData.frame.height || 0) * 1.0) / (processMemBeanStructData.maxValue || 0)
         );
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        processMemBeanStructCanvasCtx.fillRect(processMemBeanStructData.frame.x, processMemBeanStructData.frame.y + processMemBeanStructData.frame.height - drawHeight, width, drawHeight);
+        processMemBeanStructCanvasCtx.beginPath();
+        processMemBeanStructCanvasCtx.arc(processMemBeanStructData.frame.x, processMemBeanStructData.frame.y + processMemBeanStructData.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        processMemBeanStructCanvasCtx.fill();
+        processMemBeanStructCanvasCtx.globalAlpha = 1.0;
+        processMemBeanStructCanvasCtx.stroke();
+        processMemBeanStructCanvasCtx.beginPath();
+        processMemBeanStructCanvasCtx.moveTo(processMemBeanStructData.frame.x + 3, processMemBeanStructData.frame.y + processMemBeanStructData.frame.height - drawHeight);
+        processMemBeanStructCanvasCtx.lineWidth = 3;
+        processMemBeanStructCanvasCtx.lineTo(processMemBeanStructData.frame.x + width, processMemBeanStructData.frame.y + processMemBeanStructData.frame.height - drawHeight);
+        processMemBeanStructCanvasCtx.stroke();
       } else {
-        ctx.fillStyle = ColorUtils.colorForTid(data.maxValue || 0);
-        ctx.strokeStyle = ColorUtils.colorForTid(data.maxValue || 0);
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
-        let drawHeight: number = ((data.value || 0) * (data.frame.height || 0) * 1.0) / (data.maxValue || 1);
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        processMemBeanStructCanvasCtx.fillStyle = ColorUtils.colorForTid(processMemBeanStructData.maxValue || 0);
+        processMemBeanStructCanvasCtx.strokeStyle = ColorUtils.colorForTid(processMemBeanStructData.maxValue || 0);
+        processMemBeanStructCanvasCtx.globalAlpha = 0.6;
+        processMemBeanStructCanvasCtx.lineWidth = 1;
+        let drawHeight: number = ((processMemBeanStructData.value || 0) * (processMemBeanStructData.frame.height || 0) * 1.0) / (processMemBeanStructData.maxValue || 1);
+        processMemBeanStructCanvasCtx.fillRect(processMemBeanStructData.frame.x, processMemBeanStructData.frame.y + processMemBeanStructData.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    processMemBeanStructCanvasCtx.globalAlpha = 1.0;
+    processMemBeanStructCanvasCtx.lineWidth = 1;
   }
 }
diff --git a/ide/src/trace/bean/ProcessStruct.ts b/ide/src/trace/bean/ProcessStruct.ts
index 32883880083882fe1a5daefcd341e826bbca0b1a..b5fdb07b92f7a3677ecf2eec28e97726f47243b7 100644
--- a/ide/src/trace/bean/ProcessStruct.ts
+++ b/ide/src/trace/bean/ProcessStruct.ts
@@ -33,15 +33,15 @@ export class ProcessStruct extends BaseStruct {
   type: string | undefined;
   utid: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: ProcessStruct) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
-      ctx.fillStyle = ColorUtils.colorForTid(data.pid || 0);
-      let miniHeight = Math.round(data.frame.height / CpuStruct.cpuCount);
-      ctx.fillRect(
-        data.frame.x,
-        data.frame.y + (data.cpu || 0) * miniHeight + padding,
-        data.frame.width,
+  static draw(processBeanCanvasCtx: CanvasRenderingContext2D, processBeanStruct: ProcessStruct) {
+    if (processBeanStruct.frame) {
+      let width = processBeanStruct.frame.width || 0;
+      processBeanCanvasCtx.fillStyle = ColorUtils.colorForTid(processBeanStruct.pid || 0);
+      let miniHeight = Math.round(processBeanStruct.frame.height / CpuStruct.cpuCount);
+      processBeanCanvasCtx.fillRect(
+        processBeanStruct.frame.x,
+        processBeanStruct.frame.y + (processBeanStruct.cpu || 0) * miniHeight + padding,
+        processBeanStruct.frame.width,
         miniHeight - padding * 2
       );
     }
diff --git a/ide/src/trace/bean/ThreadStruct.ts b/ide/src/trace/bean/ThreadStruct.ts
index 1bc2c349ce6b45cadf2301975ef952a055dd78a9..a9f69b476fe95c8e7baa12679c734dfa03190cd7 100644
--- a/ide/src/trace/bean/ThreadStruct.ts
+++ b/ide/src/trace/bean/ThreadStruct.ts
@@ -14,8 +14,8 @@
  */
 
 import { BaseStruct } from './BaseStruct.js';
-import { Rect } from '../component/trace/timer-shaft/Rect.js';
 import { Utils } from '../component/trace/base/Utils.js';
+import { drawString } from '../database/ui-worker/ProcedureWorkerCommon.js';
 
 const padding = 1;
 
@@ -44,69 +44,46 @@ export class ThreadStruct extends BaseStruct {
   state: string | undefined;
   type: string | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: ThreadStruct) {
-    if (data.frame) {
-      ctx.globalAlpha = 1;
-      let stateText = data.state || '';
-      if ('S' == data.state) {
-        ctx.fillStyle = ThreadStruct.sColor;
-        ctx.globalAlpha = 0.2; // transparency
-        ctx.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
-        ctx.globalAlpha = 1; // transparency
-      } else if ('R' == data.state) {
-        ctx.fillStyle = ThreadStruct.rColor;
-        ctx.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
-        ctx.fillStyle = '#fff';
-        ThreadStruct.drawString(ctx, ThreadStruct.getEndState(data.state || ''), 2, data.frame);
-      } else if ('D' == data.state) {
-        ctx.fillStyle = ThreadStruct.uninterruptibleSleepColor;
-        ctx.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
-        ctx.fillStyle = '#fff';
-        ThreadStruct.drawString(ctx, ThreadStruct.getEndState(data.state || ''), 2, data.frame);
-      } else if ('Running' == data.state) {
-        ctx.fillStyle = ThreadStruct.runningColor;
-        ctx.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
-        ctx.fillStyle = '#fff';
-        ThreadStruct.drawString(ctx, ThreadStruct.getEndState(data.state || ''), 2, data.frame);
+  static draw(threadBeanCanvasCtx: CanvasRenderingContext2D, threadBeanStructData: ThreadStruct) {
+    if (threadBeanStructData.frame) {
+      threadBeanCanvasCtx.globalAlpha = 1;
+      let stateText = threadBeanStructData.state || '';
+      if ('S' == threadBeanStructData.state) {
+        threadBeanCanvasCtx.fillStyle = ThreadStruct.sColor;
+        threadBeanCanvasCtx.globalAlpha = 0.2; // transparency
+        threadBeanCanvasCtx.fillRect(threadBeanStructData.frame.x, threadBeanStructData.frame.y + padding, threadBeanStructData.frame.width, threadBeanStructData.frame.height - padding * 2);
+        threadBeanCanvasCtx.globalAlpha = 1; // transparency
+      } else if ('R' == threadBeanStructData.state) {
+        threadBeanCanvasCtx.fillStyle = ThreadStruct.rColor;
+        this.drawRectAndString(threadBeanCanvasCtx, threadBeanStructData);
+      } else if ('D' == threadBeanStructData.state) {
+        threadBeanCanvasCtx.fillStyle = ThreadStruct.uninterruptibleSleepColor;
+        this.drawRectAndString(threadBeanCanvasCtx, threadBeanStructData);
+      } else if ('Running' == threadBeanStructData.state) {
+        threadBeanCanvasCtx.fillStyle = ThreadStruct.runningColor;
+        this.drawRectAndString(threadBeanCanvasCtx, threadBeanStructData);
       } else {
-        ctx.fillStyle = ThreadStruct.rColor;
-        ctx.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
-        ctx.fillStyle = '#fff';
-        ThreadStruct.drawString(ctx, ThreadStruct.getEndState(data.state || ''), 2, data.frame);
+        threadBeanCanvasCtx.fillStyle = ThreadStruct.rColor;
+        this.drawRectAndString(threadBeanCanvasCtx, threadBeanStructData);
       }
       if (
         ThreadStruct.selectThreadStruct &&
-        ThreadStruct.equals(ThreadStruct.selectThreadStruct, data) &&
+        ThreadStruct.equals(ThreadStruct.selectThreadStruct, threadBeanStructData) &&
         ThreadStruct.selectThreadStruct.state != 'S'
       ) {
-        ctx.strokeStyle = '#232c5d';
-        ctx.lineWidth = 2;
-        ctx.strokeRect(data.frame.x, data.frame.y + padding, data.frame.width - 2, data.frame.height - padding * 2);
+        threadBeanCanvasCtx.strokeStyle = '#232c5d';
+        threadBeanCanvasCtx.lineWidth = 2;
+        threadBeanCanvasCtx.strokeRect(threadBeanStructData.frame.x, threadBeanStructData.frame.y + padding, threadBeanStructData.frame.width - 2, threadBeanStructData.frame.height - padding * 2);
       }
     }
   }
 
-  static drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect) {
-    let textMetrics = ctx.measureText(str);
-    let charWidth = Math.round(textMetrics.width / str.length);
-    if (textMetrics.width < frame.width - textPadding * 2) {
-      let x2 = Math.floor(frame.width / 2 - textMetrics.width / 2 + frame.x + textPadding);
-      ctx.textBaseline = 'middle';
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2), frame.width - textPadding * 2);
-      return;
-    }
-    if (frame.width - textPadding * 2 > charWidth * 4) {
-      let chatNum = (frame.width - textPadding * 2) / charWidth;
-      let x1 = frame.x + textPadding;
-      ctx.textBaseline = 'middle';
-      ctx.fillText(
-        str.substring(0, chatNum - 4) + '...',
-        x1,
-        Math.floor(frame.y + frame.height / 2),
-        frame.width - textPadding * 2
-      );
-      return;
-    }
+  private static drawRectAndString(threadBeanCanvasCtx: CanvasRenderingContext2D, threadBeanStructData: ThreadStruct) {
+    // @ts-ignore
+    threadBeanCanvasCtx.fillRect(threadBeanStructData.frame.x, threadBeanStructData.frame.y + padding, threadBeanStructData.frame.width, threadBeanStructData.frame.height - padding * 2);
+    threadBeanCanvasCtx.fillStyle = '#fff';
+    // @ts-ignore
+    drawString(threadBeanCanvasCtx, ThreadStruct.getEndState(threadBeanStructData.state || ''), 2, threadBeanStructData.frame, threadBeanStructData);
   }
 
   static getEndState(state: string): string {
@@ -122,18 +99,12 @@ export class ThreadStruct extends BaseStruct {
   }
 
   static equals(d1: ThreadStruct, d2: ThreadStruct): boolean {
-    if (
-      d1 &&
+    return d1 &&
       d2 &&
       d1.cpu == d2.cpu &&
       d1.tid == d2.tid &&
       d1.state == d2.state &&
       d1.startTime == d2.startTime &&
-      d1.dur == d2.dur
-    ) {
-      return true;
-    } else {
-      return false;
-    }
+      d1.dur == d2.dur;
   }
 }
diff --git a/ide/src/trace/bean/WakeUpTimeBean.ts b/ide/src/trace/bean/WakeUpTimeBean.ts
deleted file mode 100644
index 37c66843f2ced83210c1e05ce4c2626fe627bf29..0000000000000000000000000000000000000000
--- a/ide/src/trace/bean/WakeUpTimeBean.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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 class WakeUpTimeBean {
-  wakeTs: number | undefined;
-  startTs: number | undefined;
-  preRow: number | undefined;
-}
diff --git a/ide/src/trace/component/SpFilter.ts b/ide/src/trace/component/SpFilter.ts
deleted file mode 100644
index cced4eb597c2d9176c971d4c13c8e501e810d75f..0000000000000000000000000000000000000000
--- a/ide/src/trace/component/SpFilter.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * 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.js';
-
-@element('sp-filter')
-export class SpFilter extends BaseElement {
-  initElements(): void {}
-
-  initHtml(): string {
-    return `
-        <style>
-        :host{
-            width:100%;
-        }
-
-        .root{
-            display: flex;
-            align-items: center;
-            padding: 0px 12px 0px 12px;
-            height: 24px;
-            z-index: 3;
-            background-color: var(--dark-background5,#F2F2F2);
-        }
-        .search{
-            display: flex;
-            align-items: center;
-            border: 1px solid rgba(0,0,0,0.60);
-            border-radius: 8px;
-            width: 356px;
-            height: 16px;
-            background-color: var(--dark-background5,#FFFFFF);
-            margin-left: 13px;
-        }
-        .inputFilter{
-            opacity: 0.86;
-            font-family: Helvetica;
-            font-size: 14px;
-            text-align: left;
-            line-height: 16px;
-            font-weight: 400;
-            width: 67px;
-        }
-        ::-webkit-input-placeholder{
-            font-size:12px;
-        }
-        .image{
-            width: 20px;
-            height: 12px;
-            margin-left: 8px;
-            margin-right: 8px;
-        }
-        .input{
-            border:none;
-            width: 100%;
-            margin-right: 8px;
-            font-size: 12px;
-            background-color: var(--dark-background,#FFFFFF);
-            outline:none;
-        }
-        </style>
-        <div class="root">
-         <span class="inputFilter">Input Filter</span>
-         <div class="search">
-           <img src="img/screening.png" class="image">
-           <input placeholder="Detail Filter" class="input"/>
-        </div>
-        </div>
-        `;
-  }
-}
diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts
index a54cbf892eeadfcfde34bca0affa1eeac4c02463..077f740620c7d89e87083f20e303a35e2146e4d3 100644
--- a/ide/src/trace/component/SpHelp.ts
+++ b/ide/src/trace/component/SpHelp.ts
@@ -298,6 +298,21 @@ export class SpHelp extends BaseElement {
                 ' width="100%" height="100%"></object>';
             },
           },
+          {
+            title: '调用栈可视化和不同库函数调用占比说明',
+            icon: '',
+            clickHandler: function (item: MenuItem) {
+              SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                event: 'import_so',
+                action: 'help_doc',
+              });
+              that.appContent!.innerHTML =
+                  '<object type="text/html" data=' +
+                  '/application/doc/quickstart_Import_so.html?' +
+                  that.dark +
+                  ' width="100%" height="100%"></object>';
+            },
+          },
         ],
       },
       {
@@ -407,13 +422,13 @@ export class SpHelp extends BaseElement {
         ],
       },
     ];
-    mainMenu.style.width = '300px';
+    mainMenu.style.width = '330px';
     let body = mainMenu.shadowRoot?.querySelector('.menu-body') as HTMLDivElement;
     let groups = body.querySelectorAll<LitMainMenuGroup>('lit-main-menu-group');
     groups.forEach((value) => {
       let items = value.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
       items.forEach((item) => {
-        item.style.width = '300px';
+        item.style.width = '330px';
       });
       if (value.title == 'TraceStreamer') {
         let items = value.querySelectorAll<LitMainMenuItem>('lit-main-menu-item');
@@ -432,13 +447,6 @@ export class SpHelp extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: block;
-            width: 100%;
-            height: 100%;
-            background-color: var(--dark-background5,#F6F6F6);
-        }
-
         .container {
             display: grid;
             grid-template-columns: 1fr;
@@ -446,7 +454,12 @@ export class SpHelp extends BaseElement {
             background-color: var(--dark-background5,#F6F6F6);
             min-height: 100%;
         }
-
+        :host{
+            display: block;
+            width: 100%;
+            height: 100%;
+            background-color: var(--dark-background5,#F6F6F6);
+        }
         .body{
             width: 90%;
             margin-left: 3%;
diff --git a/ide/src/trace/component/SpInfoAndStas.ts b/ide/src/trace/component/SpInfoAndStas.ts
index a68a8e12390b60d789bf05f7f2b3ddbf01151cbb..9b919242a26adb5d443a3dffd59f3d66fc7c76e1 100644
--- a/ide/src/trace/component/SpInfoAndStas.ts
+++ b/ide/src/trace/component/SpInfoAndStas.ts
@@ -27,8 +27,6 @@ export class SpInfoAndStats extends BaseElement {
   private metaTableEl: LitTable | undefined;
   private infoTableEl: LitTable | undefined;
   private th: HTMLElement | undefined;
-  private backgroundMetaTable: HTMLDivElement | undefined;
-  private backgroundInfoTable: HTMLDivElement | undefined;
   private progressLoad: LitProgressBar | undefined;
 
   static get observedAttributes() {
@@ -152,7 +150,6 @@ export class SpInfoAndStats extends BaseElement {
                 margin: 0;
                 padding: 0;
             }
-        
             .info-stats{
                 display: flex;
                 flex-direction: column;
@@ -164,7 +161,6 @@ export class SpInfoAndStats extends BaseElement {
                 right: 0;
                 grid-row-gap: 30px;
             }
-        
             .metadata{
                 width: 90%;
                 color: #121212;
@@ -174,7 +170,6 @@ export class SpInfoAndStats extends BaseElement {
                 background-color: var(--dark-background3,#FFFFFF);
                 position: relative;
             }
-       
             #metaData-table{
                 background-color: var(--dark-background5,#F6F6F6);
                 margin-left: 10px;
@@ -182,13 +177,11 @@ export class SpInfoAndStats extends BaseElement {
                 max-height: inherit;
                 padding: 10px;
             }
-            
             #stats-table{
                 margin-bottom: 2%;
                 margin-left: 10px;
                 padding: 10px;
             }
-            
             #dataValueResult{
                 overflow-y: auto;
                 background-color: var(--dark-background5,#F6F6F6);
@@ -206,7 +199,6 @@ export class SpInfoAndStats extends BaseElement {
                 max-height: inherit;
                 margin-bottom: 2%;
             }
-            
             p{
                  display: table-cell;
                  padding: 7px 10px 20px 10px;
@@ -216,7 +208,6 @@ export class SpInfoAndStats extends BaseElement {
                  font-weight: 400;
                  text-align: left;
             }
-            
             .stats{
                flex-grow: 1;
                height: min-content;
@@ -226,16 +217,13 @@ export class SpInfoAndStats extends BaseElement {
                display: flex;
                flex-direction: column;
             }
-            
             .info{
                max-height: inherit;
                min-height: inherit;
             }
-            
             .tr{
                background-color: var(--dark-background5,#F6F6F6); 
             }
-            
             .load-metric{
                 width: 95%;
                 bottom: 0;
diff --git a/ide/src/trace/component/SpMetrics.ts b/ide/src/trace/component/SpMetrics.ts
index 8f24a945ee319271942db3419f179c32c489bd0c..b6aeaa1abddbcf7398911fc74ac0024f3e589731 100644
--- a/ide/src/trace/component/SpMetrics.ts
+++ b/ide/src/trace/component/SpMetrics.ts
@@ -52,7 +52,7 @@ export class SpMetrics extends BaseElement {
   private runButtonEl: HTMLButtonElement | undefined | null;
   private responseJson: HTMLPreElement | undefined | null;
   private metricOptionalSelects: Array<MetricQueryItem> | undefined;
-  private progressLoad: LitProgressBar | undefined;
+  private metricProgressLoad: LitProgressBar | undefined;
 
   static get observedAttributes() {
     return ['metric', 'metricResult'];
@@ -81,7 +81,7 @@ export class SpMetrics extends BaseElement {
   }
 
   initElements(): void {
-    this.progressLoad = this.shadowRoot?.querySelector('.load-metric') as LitProgressBar;
+    this.metricProgressLoad = this.shadowRoot?.querySelector('.sp-load-metric') as LitProgressBar;
     this.selectMetricEl = this.shadowRoot?.querySelector('.sql-select') as HTMLSelectElement;
     this.runButtonEl = this.shadowRoot?.querySelector('.sql-select-button') as HTMLButtonElement;
     this.responseJson = this.shadowRoot?.querySelector('.response-json') as HTMLPreElement;
@@ -96,7 +96,7 @@ export class SpMetrics extends BaseElement {
 
   async initMetric(queryItem: MetricQueryItem) {
     this.initMetricData(queryItem).then((item) => {
-      this.progressLoad!.loading = false;
+      this.metricProgressLoad!.loading = false;
     });
   }
 
@@ -126,7 +126,7 @@ export class SpMetrics extends BaseElement {
       event: 'metrics',
       action: 'metrics',
     });
-    this.progressLoad!.loading = true;
+    this.metricProgressLoad!.loading = true;
     let selectedIndex = this.selectMetricEl!.selectedIndex;
     let value = this.selectMetricEl!.options[selectedIndex].value;
     let resultQuery = this.metricOptionalSelects?.filter((item) => {
@@ -301,22 +301,17 @@ export class SpMetrics extends BaseElement {
              text-align: left;
              width: 100%;
         }
-
-        /*Define scroll bar height, width and background*/
         ::-webkit-scrollbar
         {
           width: 8px;
           background-color: var(--dark-background3,#FFFFFF);
         }
-
-        /*define slider*/
         ::-webkit-scrollbar-thumb
         {
           border-radius: 6px;
           background-color: var(--dark-background7,rgba(0,0,0,0.1));
         }
-        
-        .load-metric{
+        .sp-load-metric{
             width: 95%;
             bottom: 0;
         }
@@ -329,7 +324,7 @@ export class SpMetrics extends BaseElement {
                 <select class="sql-select">
                 </select>
                 <button class="sql-select-button">&nbsp;&nbsp; Run &nbsp;&nbsp;</button>
-                <lit-progress-bar class="load-metric"></lit-progress-bar>
+                <lit-progress-bar class="sp-load-metric"></lit-progress-bar>
             </div>
             <div class="metric-select response">
                  <textarea class="response-json" readonly>
diff --git a/ide/src/trace/component/SpQuerySQL.ts b/ide/src/trace/component/SpQuerySQL.ts
index 0ed8ab1b952924780f2e7cbb56f5c9567b84699a..0b61a99aa224fc2bc08028b0d9617b35eb6df4af 100644
--- a/ide/src/trace/component/SpQuerySQL.ts
+++ b/ide/src/trace/component/SpQuerySQL.ts
@@ -45,7 +45,7 @@ export class SpQuerySQL extends BaseElement {
   private maxPageSize: number = 500000;
 
   initElements(): void {
-    this.progressLoad = this.shadowRoot?.querySelector('.load-metric') as LitProgressBar;
+    this.progressLoad = this.shadowRoot?.querySelector('.load-query-sql') as LitProgressBar;
     this.selector = this.shadowRoot?.querySelector('.sql-select') as HTMLTextAreaElement;
     this.queryTableEl = new LitTable();
     this.querySize = this.shadowRoot?.querySelector('.query_size') as HTMLElement;
@@ -516,22 +516,18 @@ export class SpQuerySQL extends BaseElement {
         .sql-select{
             background-color: var(--dark-background5, #F6F6F6);
         }
-
-        /*Define the height, width and background of the scroll bar*/
         ::-webkit-scrollbar
         {
           width: 8px;
           background-color: var(--dark-background3,#FFFFFF);
         }
-
-        /*define slider*/
         ::-webkit-scrollbar-thumb
         {
           border-radius: 6px;
           background-color: var(--dark-background7,rgba(0,0,0,0.1));
         }
         
-        .load-metric{
+        .load-query-sql{
             width: 95%;
             bottom: 0;
         }
@@ -569,7 +565,7 @@ export class SpQuerySQL extends BaseElement {
             <div class="query-message request">
                 <p class="query_select" style="color: #999999">Enter query and press cmd/ctrl + Enter</p>
                 <textarea class="sql-select"></textarea>
-                <lit-progress-bar class="load-metric"></lit-progress-bar>
+                <lit-progress-bar class="load-query-sql"></lit-progress-bar>
             </div>
             <div class="query-message response">
                    <div style="display: flex;justify-content: space-between">
diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts
index e2920b5e0c0b2588cc01ccb7bfdbe0456ecae76b..0d06a1febc2e9399f3d91d7a1f90b47a44e3ac5c 100644
--- a/ide/src/trace/component/SpRecordTrace.ts
+++ b/ide/src/trace/component/SpRecordTrace.ts
@@ -565,13 +565,7 @@ export class SpRecordTrace extends BaseElement {
       if (this.vs) {
         let cmd = Cmd.formatString(CmdConstant.CMD_GET_VERSION_DEVICES, [SpRecordTrace.serialNumber]);
         Cmd.execHdcCmd(cmd, (deviceVersion: string) => {
-          let deviceVersionItem = SpRecordTrace.supportVersions.filter((item) => deviceVersion.indexOf(item) != -1);
-          if (deviceVersionItem.length > 0) {
-            SpRecordTrace.selectVersion = deviceVersionItem[0];
-          } else {
-            SpRecordTrace.selectVersion = SpRecordTrace.supportVersions[0];
-          }
-          this.setDeviceVersionSelect(SpRecordTrace.selectVersion);
+          this.selectedDevice(deviceVersion);
           this.traceCommand!.hdcCommon = PluginConvertUtils.createHdcCmd(
             PluginConvertUtils.BeanToCmdTxt(this.makeRequest(), false),
             this.recordSetting!.output,
@@ -582,13 +576,7 @@ export class SpRecordTrace extends BaseElement {
         HdcDeviceManager.connect(value).then((result) => {
           if (result) {
             HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_VERSION, true).then((deviceVersion) => {
-              let deviceVersionItem = SpRecordTrace.supportVersions.filter((item) => deviceVersion.indexOf(item) != -1);
-              if (deviceVersionItem.length > 0) {
-                SpRecordTrace.selectVersion = deviceVersionItem[0];
-              } else {
-                SpRecordTrace.selectVersion = SpRecordTrace.supportVersions[0];
-              }
-              this.setDeviceVersionSelect(SpRecordTrace.selectVersion);
+              this.selectedDevice(deviceVersion);
               this.traceCommand!.hdcCommon = PluginConvertUtils.createHdcCmd(
                 PluginConvertUtils.BeanToCmdTxt(this.makeRequest(), false),
                 this.recordSetting!.output,
@@ -697,6 +685,16 @@ export class SpRecordTrace extends BaseElement {
     this.initMenuItems();
   }
 
+  private selectedDevice(deviceVersion: string) {
+    let deviceVersionItem = SpRecordTrace.supportVersions.filter((item) => deviceVersion.indexOf(item) != -1);
+    if (deviceVersionItem.length > 0) {
+      SpRecordTrace.selectVersion = deviceVersionItem[0];
+    } else {
+      SpRecordTrace.selectVersion = SpRecordTrace.supportVersions[0];
+    }
+    this.setDeviceVersionSelect(SpRecordTrace.selectVersion);
+  }
+
   private appendDeviceVersion() {
     SpRecordTrace.supportVersions.forEach((supportVersion) => {
       let option = document.createElement('option');
@@ -727,10 +725,10 @@ export class SpRecordTrace extends BaseElement {
         this.progressEL!.loading = false;
         this.sp!.search = false;
         this.litSearch!.clear();
-        this.disconnectButton!.style.pointerEvents = 'auto';
         this.recordButton!.style.pointerEvents = 'auto';
         this.addButton!.style.pointerEvents = 'auto';
         this.deviceSelect!.style.pointerEvents = 'auto';
+        this.disconnectButton!.style.pointerEvents = 'auto';
         this.traceCommand!.show = false;
       });
     } else {
@@ -786,11 +784,10 @@ export class SpRecordTrace extends BaseElement {
           icon: 'dbsetbreakpoint',
           fileChoose: false,
           clickHandler: function (ev: InputEvent) {
-            let request = that.makeRequest();
             that.appContent!.innerHTML = '';
             that.appContent!.append(that.traceCommand!);
             that.traceCommand!.hdcCommon = PluginConvertUtils.createHdcCmd(
-              PluginConvertUtils.BeanToCmdTxt(request, false),
+              PluginConvertUtils.BeanToCmdTxt(that.makeRequest(), false),
               that.recordSetting!.output,
               that.recordSetting!.maxDur
             );
@@ -1009,9 +1006,8 @@ export class SpRecordTrace extends BaseElement {
     if (this.vs) {
       this.appContent!.innerHTML = '';
       this.appContent!.append(this.traceCommand!);
-      let config = this.makeRequest();
       this.traceCommand!.hdcCommon = PluginConvertUtils.createHdcCmd(
-        PluginConvertUtils.BeanToCmdTxt(config, false),
+        PluginConvertUtils.BeanToCmdTxt(this.makeRequest(), false),
         this.recordSetting!.output,
         this.recordSetting!.maxDur
       );
@@ -1023,10 +1019,7 @@ export class SpRecordTrace extends BaseElement {
           this.progressEL!.loading = true;
           this.litSearch!.clear();
           this.litSearch!.setPercent('tracing  ' + this.recordSetting!.maxDur * 1000 + 'ms', -1);
-          this.buttonDisable(true);
-          this.traceCommand!.show = true;
-          this.freshMenuDisable(true);
-          this.freshConfigMenuDisable(true);
+          this.initRecordUIState();
           Cmd.execHdcTraceCmd(traceCommandStr, SpRecordTrace.serialNumber, (traceResult: string) => {
             if (traceResult.indexOf('DestroySession done') != -1) {
               this.litSearch!.setPercent('tracing htrace down', -1);
@@ -1163,6 +1156,13 @@ export class SpRecordTrace extends BaseElement {
     }
   }
 
+  private initRecordUIState() {
+    this.buttonDisable(true);
+    this.traceCommand!.show = true;
+    this.freshMenuDisable(true);
+    this.freshConfigMenuDisable(true);
+  }
+
   private isSuccess(traceResult: string): number {
     if (traceResult.indexOf('CreateSession FAIL') != -1 || traceResult.indexOf('failed') != -1) {
       return 1;
@@ -1521,7 +1521,7 @@ export class SpRecordTrace extends BaseElement {
                </select>
                <select class="device_version" id = "device-version">
                </select>
-              <lit-button style="width: 180px"class="add" height="32px" width="164px" color="#0A59F7" font_size="14px" border="1px solid #0A59F7" 
+              <lit-button style="width: 180px" class="add" height="32px" width="164px" color="#0A59F7" font_size="14px" border="1px solid #0A59F7" 
               padding="0 0 0 12px" justify_content="left" icon="add" margin_icon="0 10px 0 8px">Add HDC Device</lit-button>
               <div class="header-right">
               <lit-button class="disconnect" style="margin-right: 30px" height="32px" width="96px" font_size="14px" justify_content="center" color="#FFFFFF"
@@ -1688,8 +1688,6 @@ export class SpRecordTrace extends BaseElement {
       smbPages: this.spAllocations!.shared,
       maxStackDepth: this.spAllocations!.unwind,
       processName: processName,
-      mallocFreeMatchingInterval: 1000,
-      mallocFreeMatchingCnt: 1000,
       stringCompressed: true,
       fpUnwind: this.spAllocations!.fp_unwind,
       blocked: true,
@@ -1833,7 +1831,7 @@ export class SpRecordTrace extends BaseElement {
       ftraceEvents: this.createTraceEvents(this.probesConfig!.traceConfig),
       hitraceCategories: [],
       hitraceApps: [],
-      bufferSizeKb: 2048,
+      bufferSizeKb: this.probesConfig!.ftraceBufferSize,
       flushIntervalMs: 1000,
       flushThresholdKb: 4096,
       parseKsyms: true,
diff --git a/ide/src/trace/component/SpRecyclerSystemTrace.ts b/ide/src/trace/component/SpRecyclerSystemTrace.ts
index f61cf182c1193d1fd8b4b6d380b183cde58b9cbe..87197e75cf79db31a58b2b7bc954e9af9d65e57e 100644
--- a/ide/src/trace/component/SpRecyclerSystemTrace.ts
+++ b/ide/src/trace/component/SpRecyclerSystemTrace.ts
@@ -72,8 +72,8 @@ export class SpRecyclerSystemTrace extends BaseElement {
 
   initElements(): void {
     this.rowsEL = this.shadowRoot?.querySelector<TraceRowRecyclerView>('.rows');
-    this.timerShaftEL = this.shadowRoot?.querySelector('.timer-shaft');
-    this.traceSheetEL = this.shadowRoot?.querySelector('.trace-sheet');
+    this.timerShaftEL = this.shadowRoot?.querySelector('.recycle-timer-shaft');
+    this.traceSheetEL = this.shadowRoot?.querySelector('.recycle-trace-sheet');
     this.rangeSelect = new RangeSelect(this.timerShaftEL);
     this.rangeSelect.rowsEL = this.rowsEL;
     document?.addEventListener('flag-change', (event: any) => {
@@ -748,7 +748,7 @@ export class SpRecyclerSystemTrace extends BaseElement {
             width: 100%;
             height: 100%;
         }
-        .timer-shaft{
+        .recycle-timer-shaft{
             width: 100%;
             z-index: 2;
         }
@@ -772,11 +772,11 @@ export class SpRecyclerSystemTrace extends BaseElement {
 
         </style>
         <div class="container">
-            <timer-shaft-element class="timer-shaft">
+            <timer-shaft-element class="recycle-timer-shaft">
             </timer-shaft-element>
             <trace-row-recycler-view class="rows">
             </trace-row-recycler-view>
-            <trace-sheet class="trace-sheet" mode="hidden">
+            <trace-sheet class="recycle-trace-sheet" mode="hidden">
             </trace-sheet>
         </div>
         `;
diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts
index 41d3b82492edc58d3063a5f165e1b6cf5fb9d37b..6108b07b74eeaa0df93e742b0a8e239b7ee4347a 100644
--- a/ide/src/trace/component/SpSystemTrace.ts
+++ b/ide/src/trace/component/SpSystemTrace.ts
@@ -145,22 +145,6 @@ export class SpSystemTrace extends BaseElement {
     this.linkNodes.length = 0;
   }
 
-  appendFamilyRelationships(currentRow: TraceRow<any>): string {
-    let relationships = '';
-    if (currentRow.rowParentId !== '') {
-      let parentRow = this.rowsEL!.querySelector<TraceRow<any>>(
-        `trace-row[row-id='${currentRow.rowParentId}'][folder]`
-      );
-      if (parentRow) {
-        relationships = this.appendFamilyRelationships(parentRow) + ':' + parentRow.rowId;
-      }
-    }
-    if (relationships.startsWith(':')) {
-      return relationships.trim().substring(1);
-    }
-    return relationships.trim();
-  }
-
   initElements(): void {
     this.rowsEL = this.shadowRoot?.querySelector<HTMLDivElement>('.rows');
     this.tipEL = this.shadowRoot?.querySelector<HTMLDivElement>('.tip');
@@ -218,8 +202,34 @@ export class SpSystemTrace extends BaseElement {
         replaceRow.setAttribute('row-parent-id', currentRow.rowParentId);
         replaceRow.style.display = 'none';
         currentRow.rowHidden = !currentRow.hasAttribute('scene');
-        currentRow.setAttribute('relationship', this.appendFamilyRelationships(currentRow));
-        this.rowsEL!.replaceChild(replaceRow, currentRow);
+        if (this.rowsEL!.contains(currentRow)) {
+          this.rowsEL!.replaceChild(replaceRow, currentRow);
+        } else {
+          for (let index = 0; index < currentRow.familyGenealogy.length; index++) {
+            let family = currentRow.familyGenealogy[index];
+            let parent = this.rowsEL!.querySelector<TraceRow<any>>(
+                `trace-row[row-id='${family.rowId}'][row-type='${family.rowType}']`
+            );
+            if (parent) {
+              while (
+                  parent!.folder &&
+                  index < currentRow.familyGenealogy.length &&
+                  currentRow.familyGenealogy.length > 1
+                  ) {
+                let child: TraceRow<any> = parent!.childrenList.filter((chd) => {
+                  let genealogy = currentRow.familyGenealogy[index + 1];
+                  return chd.rowId == genealogy.rowId && chd.rowType == genealogy.rowType;
+                })[0];
+                if (child) {
+                  parent = child;
+                } else {
+                  break;
+                }
+              }
+              parent!.replaceTraceRow(replaceRow, currentRow);
+            }
+          }
+        }
         this.favoriteRowsEL!.append(currentRow);
       } else {
         this.favoriteRowsEL!.removeChild(currentRow);
@@ -229,9 +239,9 @@ export class SpSystemTrace extends BaseElement {
             this.collectRows.splice(rowIndex, 1);
           }
         }
-        let relationships = currentRow.getAttribute('relationship');
-        relationships.split(':').forEach((relationship: string) => {
-          let parentRow = this.rowsEL!.querySelector<TraceRow<any>>(`trace-row[row-id='${relationship}'][folder]`);
+        currentRow.familyGenealogy.forEach((relationship:{rowId:any, rowType:any}) => {
+          let parentRow = this.rowsEL!.querySelector<TraceRow<any>>(
+            `trace-row[row-id='${relationship.rowId}'][row-type='${relationship.rowType}'][folder]`);
           if (parentRow) {
             parentRow.expansion = true;
           }
@@ -613,17 +623,17 @@ export class SpSystemTrace extends BaseElement {
             minNodeId = it.dataList[it.dataList.length - 1].last_assigned_id;
           }
           // If you select the box from the beginning
-          if (startNS === TraceRow.range?.startNS) {
+          if (startNS! <= TraceRow.range?.startNS!) {
             minNodeId = HeapDataInterface.getInstance().getMinNodeId(SpJsMemoryChart.file.id);
           }
           //If you select the box from the ending
-          if (endNS === TraceRow.range?.endNS) {
+          if (endNS! >= TraceRow.range?.endNS! || endNS! >= it.dataList[it.dataList.length - 1].timestamp_us * 1000) {
             maxNodeId = HeapDataInterface.getInstance().getMaxNodeId(SpJsMemoryChart.file.id);
           }
           let summary = (this.traceSheetEL?.shadowRoot?.querySelector('#tabs') as LitTabs)
             ?.querySelector('#box-heap-summary')
             ?.querySelector('tabpane-summary') as TabPaneSummary;
-          summary.initSummaryData(SpJsMemoryChart.file.id, maxNodeId, minNodeId);
+          summary.initSummaryData(SpJsMemoryChart.file.id, minNodeId, maxNodeId);
           selection.jsMemory.push(1);
         }
         if (this.rangeTraceRow!.length !== rows.length) {
@@ -1256,7 +1266,6 @@ export class SpSystemTrace extends BaseElement {
       }
     }
     this.rangeTraceRow = rows;
-    console.log('-------', this.rangeSelect.rangeTraceRow);
     this.rangeSelect.selectHandler?.(this.rangeSelect.rangeTraceRow, false);
   };
   inFavoriteArea: boolean | undefined;
@@ -1295,7 +1304,7 @@ export class SpSystemTrace extends BaseElement {
         this.hoverStructNull();
       }
       rows
-        .filter((it) => it.focusContain(ev) && it.collect === this.inFavoriteArea)
+        .filter((it) => it.focusContain(ev,this.inFavoriteArea!) && it.collect === this.inFavoriteArea)
         .filter((it) => {
           if (it.collect) {
             return true;
@@ -1405,8 +1414,8 @@ export class SpSystemTrace extends BaseElement {
     ) {
     } else {
       let inFavoriteArea = this.favoriteRowsEL?.containPoint(ev);
-      let rows = this.visibleRows.filter((it) => it.focusContain(ev) && it.collect == inFavoriteArea);
-      if (rows.length != 0) {
+      let rows = this.visibleRows.filter((it) => it.focusContain(ev,inFavoriteArea!) && it.collect == inFavoriteArea);
+      if (JankStruct.delJankLineFlag) {
         this.clearPointPair();
       }
       if (rows && rows[0] && this.traceRowClickJudgmentConditions.get(rows[0]!.rowType!)?.()) {
@@ -1432,6 +1441,7 @@ export class SpSystemTrace extends BaseElement {
     this.timerShaftEL?.removeTriangle('inverted');
     this.traceSheetEL?.setAttribute('mode', 'hidden');
     this.refreshCanvas(true);
+    JankStruct.delJankLineFlag = true;
   }
 
   //泳道图点击判定条件
@@ -1514,7 +1524,7 @@ export class SpSystemTrace extends BaseElement {
     };
 
     cpuClickHandler = (d: CpuStruct) => {
-      let traceRow = this.shadowRoot?.querySelector<TraceRow<any>>(`trace-row[row-id='${d.processId}']`);
+      let traceRow = this.shadowRoot?.querySelector<TraceRow<any>>(`trace-row[row-id='${d.processId}'][row-type='process']`);
       if (traceRow) {
         traceRow.expansion = true;
       }
@@ -2084,7 +2094,7 @@ export class SpSystemTrace extends BaseElement {
           this.refreshCanvas(true);
           let param: SelectionParam = new SelectionParam();
           Object.assign(param, this.selectionParam);
-          this.traceSheetEL?.rangeSelect(param);
+          this.traceSheetEL?.rangeSelect(param, true);
         }
       });
     });
@@ -2100,14 +2110,16 @@ export class SpSystemTrace extends BaseElement {
       });
     } else {
       let row = this.shadowRoot!.querySelector<TraceRow<any>>(`trace-row[row-id='${rowParentId}'][folder]`);
-      if (row) {
+      if (row && !row.expansion) {
         row.expansion = true;
       }
-      this.rowsPaneEL!.scroll({
-        top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (rootRow?.offsetHeight || 0),
-        left: 0,
-        behavior: smooth ? 'smooth' : undefined,
-      });
+      if(rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0){
+        this.rowsPaneEL!.scroll({
+          top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (rootRow?.offsetHeight || 0),
+          left: 0,
+          behavior: smooth ? 'smooth' : undefined,
+        });
+      }
     }
   }
 
@@ -2121,14 +2133,16 @@ export class SpSystemTrace extends BaseElement {
       });
     } else {
       let row = this.shadowRoot!.querySelector<TraceRow<any>>(`trace-row[row-id='${rowParentId}'][folder]`);
-      if (row) {
+      if (row && !row.expansion) {
         row.expansion = true;
       }
-      this.rowsPaneEL!.scroll({
-        top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (++depth * 20 || 0),
-        left: 0,
-        behavior: smooth ? 'smooth' : undefined,
-      });
+      if(rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0){
+        this.rowsPaneEL!.scroll({
+          top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (++depth * 20 || 0),
+          left: 0,
+          behavior: smooth ? 'smooth' : undefined,
+        });
+      }
     }
   }
 
@@ -2486,10 +2500,6 @@ export class SpSystemTrace extends BaseElement {
     if (row && !row.expansion) {
       row.expansion = true;
     }
-    if (funcStract.cookie == null) {
-      this.scrollToProcess(`${funcStract.tid}`, `${funcStract.pid}`, 'thread', false);
-    }
-    this.scrollToDepth(`${funcRowID}`, `${funcStract.pid}`, funcStract.type, true, funcStract.depth || 0);
     let completeEntry = () => {
       let searchEntry = filterRow!.dataList!.find((dat) => dat.startTs === funcStract.startTime);
       this.hoverStructNull();
@@ -2693,6 +2703,63 @@ export class SpSystemTrace extends BaseElement {
     info('All TraceRow Data initialized');
     this.loadTraceCompleted = true;
     this.rowsEL!.querySelectorAll<TraceRow<any>>('trace-row').forEach((it) => {
+      if(it.folder){
+        let offsetYTimeOut: any = undefined;
+        it.addEventListener('expansion-change', (event: any) => {
+          JankStruct.delJankLineFlag = false;
+          if (offsetYTimeOut) {
+            clearTimeout(offsetYTimeOut);
+          }
+          if (event.detail.expansion) {
+            offsetYTimeOut = setTimeout(() => {
+              this.linkNodes.forEach((linkNode) => {
+                JankStruct.selectJankStructList?.forEach((selectStruct: any) => {
+                  if (event.detail.rowId == selectStruct.pid) {
+                    JankStruct.selectJankStruct = selectStruct;
+                    JankStruct.hoverJankStruct = selectStruct;
+                  }
+                });
+                if (linkNode[0].rowEL.collect) {
+                  linkNode[0].rowEL.translateY = linkNode[0].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkNode[0].rowEL.translateY = linkNode[0].rowEL.offsetTop - this.rowsPaneEL!.scrollTop;
+                }
+                linkNode[0].y = linkNode[0].rowEL!.translateY! + linkNode[0].offsetY;
+                if (linkNode[1].rowEL.collect) {
+                  linkNode[1].rowEL.translateY = linkNode[1].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkNode[1].rowEL.translateY = linkNode[1].rowEL.offsetTop - this.rowsPaneEL!.scrollTop;
+                }
+                linkNode[1].y = linkNode[1].rowEL!.translateY! + linkNode[1].offsetY;
+              });
+            }, 300);
+          } else {
+            if (JankStruct!.selectJankStruct) {
+              JankStruct.selectJankStructList?.push(<JankStruct>JankStruct!.selectJankStruct);
+            }
+            offsetYTimeOut = setTimeout(() => {
+              this.linkNodes?.forEach((linkNode) => {
+                if (linkNode[0].rowEL.collect) {
+                  linkNode[0].rowEL.translateY = linkNode[0].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkNode[0].rowEL.translateY = linkNode[0].rowEL.offsetTop - this.rowsPaneEL!.scrollTop;
+                }
+                linkNode[0].y = linkNode[0].rowEL!.translateY! + linkNode[0].offsetY;
+                if (linkNode[1].rowEL.collect) {
+                  linkNode[1].rowEL.translateY = linkNode[1].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkNode[1].rowEL.translateY = linkNode[1].rowEL.offsetTop - this.rowsPaneEL!.scrollTop;
+                }
+                linkNode[1].y = linkNode[1].rowEL!.translateY! + linkNode[1].offsetY;
+              });
+            }, 300);
+          }
+          let refreshTimeOut = setTimeout(() => {
+            this.refreshCanvas(true);
+            clearTimeout(refreshTimeOut);
+          }, 360);
+        });
+      }
       this.intersectionObserver?.observe(it);
     });
     return { status: true, msg: 'success' };
diff --git a/ide/src/trace/component/Sptext.ts b/ide/src/trace/component/Sptext.ts
deleted file mode 100644
index ce64d8739640037c0e9c720d4b4d1f6532826b2b..0000000000000000000000000000000000000000
--- a/ide/src/trace/component/Sptext.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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.js';
-import '../../base-ui/popover/LitPopover.js';
-import { LitPopover } from '../../base-ui/popover/LitPopover.js';
-
-@element('sp-text')
-export class SpText extends BaseElement {
-  initElements(): void {
-    let litPopover = this.shadowRoot?.querySelector<LitPopover>('lit-popover');
-    litPopover!.dataSource = [
-      {
-        text: '# Samples',
-        isSelected: true,
-      },
-    ];
-  }
-
-  initHtml(): string {
-    return `
-        <style>
-        :host{
-        }
-        .root{
-            display: flex;
-            flex-direction: column;
-        }
-        .trace-menu{
-            grid-area: m;
-        }
-        .trace-content{
-            grid-area: b;
-            width: 100%;
-            height: 2000px;
-            overflow: auto;
-        }
-        </style>
-        <div class="root">
-            <div id="trace-content" class="trace-content">
-            <img src="img/pic.png">
-            <lit-popover direction="topleft" type="multiple-text" title="">
-              <button>test</button>
-            </lit-popover>
-            </div>
-        </div>
-        `;
-  }
-}
diff --git a/ide/src/trace/component/chart/FrameChart.ts b/ide/src/trace/component/chart/FrameChart.ts
index 602ec8989a54795f7427c18b2c16273bfc89143b..518ffc03e68692384ea8f0bf145a8d2c383e7fdd 100644
--- a/ide/src/trace/component/chart/FrameChart.ts
+++ b/ide/src/trace/component/chart/FrameChart.ts
@@ -203,15 +203,15 @@ export class FrameChart extends BaseElement {
         for (let node of this.currentData!) {
           let nodeSize = node.drawSize || node.size;
           let width = Math.round((nodeSize / this.currentSize) * this.rect!.width);
-          let height = depthHeight; // 20px / depth
+          let nmHeight = depthHeight; // 20px / depth
           // ensure the data for first depth frame
           if (!node.frame) {
-            node.frame = new Rect(x, scaleHeight, width, height);
+            node.frame = new Rect(x, scaleHeight, width, nmHeight);
           } else {
             node.frame!.x = x;
             node.frame!.y = scaleHeight;
             node.frame!.width = width;
-            node.frame!.height = height;
+            node.frame!.height = nmHeight;
           }
           // not draw when rect not in canvas
           if (x + width >= 0 && x < this.canvas!.width) {
@@ -227,15 +227,15 @@ export class FrameChart extends BaseElement {
         for (let node of this.currentData!) {
           let nodeCount = node.drawCount || node.count;
           let width = Math.round((nodeCount / this.currentCount) * this.rect!.width);
-          let height = depthHeight; // 20px / depth
+          let perfHeight = depthHeight; // 20px / depth
           // ensure the data for first depth frame
           if (!node.frame) {
-            node.frame = new Rect(x, scaleHeight, width, height);
+            node.frame = new Rect(x, scaleHeight, width, perfHeight);
           } else {
             node.frame!.x = x;
             node.frame!.y = scaleHeight;
             node.frame!.width = width;
-            node.frame!.height = height;
+            node.frame!.height = perfHeight;
           }
           // not draw when rect not in canvas
           if (x + width >= 0 && x < this.canvas!.width) {
@@ -251,15 +251,15 @@ export class FrameChart extends BaseElement {
         for (let node of this.currentData!) {
           let nodeDur = node.drawDur || node.dur;
           let width = Math.round((nodeDur / this.currentDuration) * this.rect!.width);
-          let height = depthHeight; // 20px / depth
+          let ebpfHeight = depthHeight; // 20px / depth
           // ensure the data for first depth frame
           if (!node.frame) {
-            node.frame = new Rect(x, scaleHeight, width, height);
+            node.frame = new Rect(x, scaleHeight, width, ebpfHeight);
           } else {
             node.frame!.x = x;
             node.frame!.y = scaleHeight;
             node.frame!.width = width;
-            node.frame!.height = height;
+            node.frame!.height = ebpfHeight;
           }
           // not draw when rect not in canvas
           if (x + width >= 0 && x < this.canvas!.width) {
@@ -799,9 +799,9 @@ export class FrameChart extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.canvas!.getBoundingClientRect()) {
         let box = this.canvas!.getBoundingClientRect();
-        let D = document.documentElement;
-        this.startX = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
-        this.startY = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop + this.canvasScrollTop;
+        let element = document.documentElement;
+        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;
       }
     }).observe(document.documentElement);
   }
@@ -809,11 +809,7 @@ export class FrameChart extends BaseElement {
   initHtml(): string {
     return `
             <style>
-            :host{
-                display: flex;
-                padding: 10px 10px;
-            }
-            .tip{
+            .frame-tip{
                 position:absolute;
                 left: 0;
                 background-color: white;
@@ -832,8 +828,12 @@ export class FrameChart extends BaseElement {
                 max-width:350px;
                 word-break: break-all;
             }
+            :host{
+                display: flex;
+                padding: 10px 10px;
+            }
             </style>
             <canvas id="canvas"></canvas>
-            <div id ="float_hint" class="tip"></div>`;
+            <div id ="float_hint" class="frame-tip"></div>`;
   }
 }
diff --git a/ide/src/trace/component/chart/PerfDataQuery.ts b/ide/src/trace/component/chart/PerfDataQuery.ts
index ef7d6acb24114914a9bf7261dd1a29dd3605c955..75af5bf4fdc82dd92b79586dfab49720f8babbdf 100644
--- a/ide/src/trace/component/chart/PerfDataQuery.ts
+++ b/ide/src/trace/component/chart/PerfDataQuery.ts
@@ -13,21 +13,14 @@
  * limitations under the License.
  */
 
-import { queryPerfFiles, query, threadPool } from '../../database/SqlLite.js';
-import { PerfCall, PerfCallChain, PerfCallChainMerageData, PerfFile } from '../../bean/PerfProfile.js';
+import { queryPerfFiles } from '../../database/SqlLite.js';
+import { PerfCall, PerfFile } from '../../bean/PerfProfile.js';
 import { info } from '../../../log/Log.js';
 import { SpHiPerf } from './SpHiPerf.js';
 import { procedurePool } from '../../database/Procedure.js';
 
 export class PerfDataQuery {
   filesData: any = {};
-  samplesData: any = {};
-  threadData: any = {};
-  callChainData: any = {};
-  splitMapData: any = {};
-  currentTreeMapData: any = {};
-  currentTreeList: any[] = [];
-  searchValue: string = '';
   callChainMap: Map<number, PerfCall> = new Map<number, PerfCall>();
 
   async initPerfCache() {
@@ -55,329 +48,6 @@ export class PerfDataQuery {
     this.callChainMap = results as any;
     info('Perf Files Data initialized');
   }
-
-  initCallChainBottomUp(callChains: PerfCallChain[]) {
-    callChains.forEach((callChain, index) => {
-      if (this.threadData[callChain.tid] == undefined) {
-        return;
-      }
-      callChain.name = this.setCallChainName(callChain);
-      this.addGroupData(callChain);
-      if (index + 1 < callChains.length && callChains[index + 1].sampleId == callChain.sampleId) {
-        PerfCallChain.setPreviousNode(callChain, callChains[index + 1]);
-      }
-      if (callChains.length == index + 1 || callChains[index + 1].sampleId != callChain.sampleId) {
-        this.addProcessThreadStateData(callChain);
-      }
-    });
-  }
-
-  setCallChainName(callChain: PerfCallChain): string {
-    //设置调用栈的名称
-    callChain.pid = this.threadData[callChain.tid]?.pid;
-    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;
-        return this.filesData[callChain.fileId][0].fileName + '+0x' + callChain.vaddrInFile;
-      } else {
-        callChain.fileName = 'unkown';
-        return '+0x' + callChain.vaddrInFile;
-      }
-    } 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;
-        return this.filesData[callChain.fileId][callChain.symbolId].symbol;
-      } else {
-        callChain.fileName = 'unkown';
-        return '+0x' + callChain.vaddrInFile;
-      }
-    }
-  }
-
-  addProcessThreadStateData(callChain: PerfCallChain) {
-    //当调用栈为调用的根节点时
-    let threadCallChain = new PerfCallChain(); //新增的线程数据
-    threadCallChain.depth = 0;
-    PerfCallChain.merageCallChain(threadCallChain, callChain);
-    threadCallChain.canCharge = false;
-    threadCallChain.name = this.threadData[callChain.tid].threadName || 'Thead' + '(' + callChain.tid + ')';
-    let threadStateCallChain = new PerfCallChain(); //新增的线程状态数据
-    PerfCallChain.merageCallChain(threadStateCallChain, callChain);
-    threadStateCallChain.name = callChain.threadState || 'Unkown State';
-    threadStateCallChain.fileName = threadStateCallChain.name == '-' ? 'Unkown Thead State' : '';
-    threadStateCallChain.canCharge = false;
-    this.addGroupData(threadStateCallChain);
-    this.addGroupData(threadCallChain);
-    PerfCallChain.setNextNode(threadCallChain, threadStateCallChain);
-    PerfCallChain.setNextNode(threadStateCallChain, callChain);
-  }
-
-  addGroupData(callChain: PerfCallChain) {
-    this.callChainData[callChain.sampleId] = this.callChainData[callChain.sampleId] || [];
-    this.callChainData[callChain.sampleId].push(callChain);
-  }
-
-  getCallChainsBySampleIds(sampleIds: string[], isTopDown: boolean) {
-    return this.groupNewTreeNoId(sampleIds, isTopDown);
-  }
-
-  groupNewTreeNoId(sampleIds: string[], isTopDown: boolean) {
-    this.currentTreeMapData = {};
-    this.currentTreeList = [];
-    for (let i = 0; i < sampleIds.length; i++) {
-      let callChains = this.callChainData[sampleIds[i]];
-      if (callChains == undefined) continue;
-      let topIndex = isTopDown ? callChains.length - 1 : 0;
-      if (callChains.length > 0) {
-        let root = this.currentTreeMapData[callChains[topIndex].name + callChains[topIndex].pid];
-        if (root == undefined) {
-          root = new PerfCallChainMerageData();
-          this.currentTreeMapData[callChains[topIndex].name + callChains[topIndex].pid] = root;
-          this.currentTreeList.push(root);
-        }
-        PerfCallChainMerageData.merageCallChain(root, callChains[topIndex], isTopDown);
-        this.merageChildren(root, callChains[topIndex], isTopDown);
-      }
-    }
-    let rootMerageMap: any = {};
-    // @ts-ignore
-    Object.values(this.currentTreeMapData).forEach((merageData: any) => {
-      if (rootMerageMap[merageData.pid] == undefined) {
-        let processMerageData = new PerfCallChainMerageData(); //新增进程的节点数据
-        processMerageData.canCharge = false;
-        processMerageData.symbolName = this.threadData[merageData.tid].processName || `Process(${merageData.pid})`;
-        processMerageData.symbol = processMerageData.symbolName;
-        processMerageData.tid = merageData.tid;
-        processMerageData.children.push(merageData);
-        processMerageData.initChildren.push(merageData);
-        processMerageData.dur = merageData.dur;
-        processMerageData.count = merageData.dur;
-        processMerageData.total = sampleIds.length;
-        rootMerageMap[merageData.pid] = processMerageData;
-      } else {
-        rootMerageMap[merageData.pid].children.push(merageData);
-        rootMerageMap[merageData.pid].initChildren.push(merageData);
-        rootMerageMap[merageData.pid].dur += merageData.dur;
-        rootMerageMap[merageData.pid].count += merageData.dur;
-        rootMerageMap[merageData.pid].total = sampleIds.length;
-      }
-      merageData.parentNode = rootMerageMap[merageData.pid]; //子节点添加父节点的引用
-    });
-    let id = 0;
-    this.currentTreeList.forEach((node) => {
-      node.total = sampleIds.length;
-      if (node.id == '') {
-        node.id = id + '';
-        id++;
-      }
-      if (node.parentNode) {
-        if (node.parentNode.id == '') {
-          node.parentNode.id = id + '';
-          id++;
-        }
-        node.parentId = node.parentNode.id;
-      }
-    });
-    // @ts-ignore
-    return Object.values(rootMerageMap);
-  }
-
-  merageChildren(currentNode: PerfCallChainMerageData, callChain: any, isTopDown: boolean) {
-    let nextNodeKey = isTopDown ? 'nextNode' : 'previousNode';
-    if (callChain[nextNodeKey] == undefined) return;
-    let node;
-    if (
-      currentNode.initChildren.filter((child: PerfCallChainMerageData) => {
-        if (child.symbolName == callChain[nextNodeKey]?.name) {
-          node = child;
-          PerfCallChainMerageData.merageCallChain(child, callChain[nextNodeKey], isTopDown);
-          return true;
-        }
-        return false;
-      }).length == 0
-    ) {
-      node = new PerfCallChainMerageData();
-      PerfCallChainMerageData.merageCallChain(node, callChain[nextNodeKey], isTopDown);
-      currentNode.children.push(node);
-      currentNode.initChildren.push(node);
-      this.currentTreeList.push(node);
-      node.parentNode = currentNode;
-    }
-    if (node) this.merageChildren(node, callChain[nextNodeKey], isTopDown);
-  }
-
-  //所有的操作都是针对整个树结构的 不区分特定的数据
-  splitTree(data: PerfCallChainMerageData[], name: string, isCharge: boolean, isSymbol: boolean) {
-    data.forEach((process) => {
-      process.children = [];
-      if (isCharge) {
-        this.recursionChargeInitTree(process, name, isSymbol);
-      } else {
-        this.recursionPruneInitTree(process, name, isSymbol);
-      }
-    });
-    this.resetAllNode(data);
-  }
-
-  recursionChargeInitTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(node);
-      node.isStore++;
-    }
-    if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
-        this.recursionChargeInitTree(child, symbolName, isSymbol);
-      });
-    }
-  }
-
-  //symbol lib charge
-  recursionChargeTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      node.currentTreeParentNode &&
-        node.currentTreeParentNode.children.splice(
-          node.currentTreeParentNode.children.indexOf(node),
-          1,
-          ...node.children
-        );
-      node.children.forEach((child) => {
-        child.currentTreeParentNode = node.currentTreeParentNode;
-      });
-    }
-    if (node.children.length > 0) {
-      node.children.forEach((child) => {
-        this.recursionChargeTree(child, symbolName, isSymbol);
-      });
-    }
-  }
-
-  recursionPruneInitTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(node);
-      node.isStore++;
-      this.pruneChildren(node, symbolName);
-    } else if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
-        this.recursionPruneInitTree(child, symbolName, isSymbol);
-      });
-    }
-  }
-
-  //symbol lib prune
-  recursionPruneTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      node.currentTreeParentNode &&
-        node.currentTreeParentNode.children.splice(node.currentTreeParentNode.children.indexOf(node), 1);
-    } else {
-      node.children.forEach((child) => {
-        this.recursionPruneTree(child, symbolName, isSymbol);
-      });
-    }
-  }
-
-  recursionChargeByRule(
-    node: PerfCallChainMerageData,
-    ruleName: string,
-    rule: (node: PerfCallChainMerageData) => boolean
-  ) {
-    if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
-        if (rule(child)) {
-          (this.splitMapData[ruleName] = this.splitMapData[ruleName] || []).push(child);
-          child.isStore++;
-        }
-        this.recursionChargeByRule(child, ruleName, rule);
-      });
-    }
-  }
-
-  pruneChildren(node: PerfCallChainMerageData, symbolName: string) {
-    if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
-        child.isStore++;
-        (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(child);
-        this.pruneChildren(child, symbolName);
-      });
-    }
-  }
-
-  clearSplitMapData(symbolName: string) {
-    delete this.splitMapData[symbolName];
-  }
-
-  resotreAllNode(symbols: string[]) {
-    symbols.forEach((symbol) => {
-      let list = this.splitMapData[symbol];
-      if (list != undefined) {
-        list.forEach((item: any) => {
-          item.isStore--;
-        });
-      }
-    });
-  }
-
-  resetAllNode(data: PerfCallChainMerageData[]) {
-    this.clearSearchNode();
-    data.forEach((process) => {
-      process.searchShow = true;
-    });
-    this.resetNewAllNode(data);
-    if (this.searchValue != '') {
-      this.findSearchNode(data, this.searchValue, false);
-      this.resetNewAllNode(data);
-    }
-  }
-
-  resetNewAllNode(data: PerfCallChainMerageData[]) {
-    data.forEach((process) => {
-      process.children = [];
-    });
-    let values = this.currentTreeList.map((item: any) => {
-      item.children = [];
-      return item;
-    });
-    values.forEach((item: any) => {
-      if (item.parentNode != undefined) {
-        if (item.isStore == 0 && item.searchShow) {
-          let parentNode = item.parentNode;
-          while (parentNode != undefined && !(parentNode.isStore == 0 && parentNode.searchShow)) {
-            parentNode = parentNode.parentNode;
-          }
-          if (parentNode) {
-            item.currentTreeParentNode = parentNode;
-            parentNode.children.push(item);
-          }
-        }
-      }
-    });
-  }
-
-  findSearchNode(data: PerfCallChainMerageData[], search: string, parentSearch: boolean) {
-    data.forEach((node) => {
-      if ((node.symbol && node.symbol.includes(search)) || parentSearch) {
-        node.searchShow = true;
-        let parentNode = node.currentTreeParentNode;
-        while (parentNode != undefined && !parentNode.searchShow) {
-          parentNode.searchShow = true;
-          parentNode = parentNode.currentTreeParentNode;
-        }
-      } else {
-        node.searchShow = false;
-      }
-      if (node.children.length > 0) {
-        this.findSearchNode(node.children, search, node.searchShow);
-      }
-    });
-  }
-
-  clearSearchNode() {
-    this.currentTreeList.forEach((node) => {
-      node.searchShow = true;
-    });
-  }
 }
 
 export const perfDataQuery = new PerfDataQuery();
diff --git a/ide/src/trace/component/chart/SmapsChart.ts b/ide/src/trace/component/chart/SmapsChart.ts
index 206f16de0faa565d3405a7479db13411edd95a24..b01530c1ff58a29bed0b26032ac643c843d176f1 100644
--- a/ide/src/trace/component/chart/SmapsChart.ts
+++ b/ide/src/trace/component/chart/SmapsChart.ts
@@ -71,17 +71,17 @@ export class SmapsChart {
   };
 
   private initRows = async (nodeRow: TraceRow<BaseStruct>, rowName: string) => {
-    let traceRow = TraceRow.skeleton<SmapsStruct>();
-    traceRow.rowParentId = `smapsRow`;
-    traceRow.rowHidden = !nodeRow.expansion;
-    traceRow.rowId = rowName;
-    traceRow.rowType = TraceRow.ROW_TYPE_SMAPS;
-    traceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    traceRow.selectChangeHandler = this.trace.selectChangeHandler;
-    traceRow.style.height = '40px';
-    traceRow.style.width = `100%`;
-    traceRow.setAttribute('children', '');
-    traceRow.name = rowName;
+    let smapsTraceRow = TraceRow.skeleton<SmapsStruct>();
+    smapsTraceRow.rowParentId = `smapsRow`;
+    smapsTraceRow.rowHidden = !nodeRow.expansion;
+    smapsTraceRow.rowId = rowName;
+    smapsTraceRow.rowType = TraceRow.ROW_TYPE_SMAPS;
+    smapsTraceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    smapsTraceRow.selectChangeHandler = this.trace.selectChangeHandler;
+    smapsTraceRow.style.height = '40px';
+    smapsTraceRow.style.width = `100%`;
+    smapsTraceRow.setAttribute('children', '');
+    smapsTraceRow.name = rowName;
     let columnName = '';
     if (rowName == 'Dirty Size') {
       columnName = 'dirty';
@@ -90,19 +90,19 @@ export class SmapsChart {
     } else {
       columnName = 'resident_size';
     }
-    traceRow.supplier = () => querySmapsData(columnName);
+    smapsTraceRow.supplier = () => querySmapsData(columnName);
     let maxList = await querySmapsDataMax(columnName);
     let maxValue = maxList[0].max_value;
-    traceRow.focusHandler = (ev) => {
+    smapsTraceRow.focusHandler = (ev) => {
       this.trace?.displayTip(
-        traceRow,
+        smapsTraceRow,
         SmapsStruct.hoverSmapsStruct,
         `<span>${Utils.getBinaryByteWithUnit((SmapsStruct.hoverSmapsStruct?.value || 0) * 1024)}</span>`
       );
     };
-    traceRow.onThreadHandler = (useCache) => {
-      let context = traceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      traceRow.canvasSave(context);
+    smapsTraceRow.onThreadHandler = (useCache) => {
+      let context = smapsTraceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      smapsTraceRow.canvasSave(context);
       (renders['smaps'] as SmapsRender).renderMainThread(
         {
           context: context,
@@ -111,10 +111,10 @@ export class SmapsChart {
           rowName: columnName,
           maxValue: maxValue,
         },
-        traceRow
+        smapsTraceRow
       );
-      traceRow.canvasRestore(context);
+      smapsTraceRow.canvasRestore(context);
     };
-    nodeRow.addChildTraceRow(traceRow);
+    nodeRow.addChildTraceRow(smapsTraceRow);
   };
 }
diff --git a/ide/src/trace/component/chart/SpAbilityMonitorChart.ts b/ide/src/trace/component/chart/SpAbilityMonitorChart.ts
index 3c058e2f7ce87146011bf3b3f1ce31553919858d..1d13c54ba06949d14e7e91dc6bdbcb0caaccac20 100644
--- a/ide/src/trace/component/chart/SpAbilityMonitorChart.ts
+++ b/ide/src/trace/component/chart/SpAbilityMonitorChart.ts
@@ -116,20 +116,20 @@ export class SpAbilityMonitorChart {
   }
 
   private initAbilityRow = () => {
-    let processRow = TraceRow.skeleton<ProcessStruct>();
-    processRow.rowId = `abilityMonitor`;
-    processRow.rowType = TraceRow.ROW_TYPE_MONITOR;
-    processRow.style.height = '40px';
-    processRow.rowParentId = '';
-    processRow.folder = true;
-    processRow.name = 'Ability Monitor';
-    processRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    processRow.selectChangeHandler = this.trace.selectChangeHandler;
-    processRow.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    processRow.onThreadHandler = (useCache) => {
-      processRow.canvasSave(this.trace.canvasPanelCtx!);
-      if (processRow.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, processRow.frame.width, processRow.frame.height);
+    let abilityRow = TraceRow.skeleton<ProcessStruct>();
+    abilityRow.rowId = `abilityMonitor`;
+    abilityRow.rowType = TraceRow.ROW_TYPE_MONITOR;
+    abilityRow.style.height = '40px';
+    abilityRow.rowParentId = '';
+    abilityRow.folder = true;
+    abilityRow.name = 'Ability Monitor';
+    abilityRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    abilityRow.selectChangeHandler = this.trace.selectChangeHandler;
+    abilityRow.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    abilityRow.onThreadHandler = (useCache) => {
+      abilityRow.canvasSave(this.trace.canvasPanelCtx!);
+      if (abilityRow.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, abilityRow.frame.width, abilityRow.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -137,13 +137,13 @@ export class SpAbilityMonitorChart {
             useCache: useCache,
             type: ``,
           },
-          processRow
+          abilityRow
         );
       }
-      processRow.canvasRestore(this.trace.canvasPanelCtx!);
+      abilityRow.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    this.trace.rowsEL?.appendChild(processRow);
-    return processRow;
+    this.trace.rowsEL?.appendChild(abilityRow);
+    return abilityRow;
   };
 
   private initCpuAbility = async (processRow: TraceRow<ProcessStruct>) => {
diff --git a/ide/src/trace/component/chart/SpClockChart.ts b/ide/src/trace/component/chart/SpClockChart.ts
index 22503d0a3815f9ea2f9046927f6aa11eb1e38bec..956e09320f702993d4fc3d85dbcc00f1bc1ba37a 100644
--- a/ide/src/trace/component/chart/SpClockChart.ts
+++ b/ide/src/trace/component/chart/SpClockChart.ts
@@ -71,25 +71,25 @@ export class SpClockChart {
         if (promiseData == null) {
           return new Promise<Array<any>>((resolve) => resolve([]));
         } else {
-          return promiseData.then((res) => {
-            for (let j = 0; j < res.length; j++) {
+          return promiseData.then((resultClock) => {
+            for (let j = 0; j < resultClock.length; j++) {
               if (!isState) {
-                if (j == res.length - 1) {
-                  res[j].dur = (TraceRow.range?.totalNS || 0) - (res[j].startNS || 0);
+                if (j == resultClock.length - 1) {
+                  resultClock[j].dur = (TraceRow.range?.totalNS || 0) - (resultClock[j].startNS || 0);
                 } else {
-                  res[j].dur = (res[j + 1].startNS || 0) - (res[j].startNS || 0);
+                  resultClock[j].dur = (resultClock[j + 1].startNS || 0) - (resultClock[j].startNS || 0);
                 }
               }
-              if ((res[j].value || 0) > maxValue) {
-                maxValue = res[j].value || 0;
+              if ((resultClock[j].value || 0) > maxValue) {
+                maxValue = resultClock[j].value || 0;
               }
               if (j > 0) {
-                res[j].delta = (res[j].value || 0) - (res[j - 1].value || 0);
+                resultClock[j].delta = (resultClock[j].value || 0) - (resultClock[j - 1].value || 0);
               } else {
-                res[j].delta = 0;
+                resultClock[j].delta = 0;
               }
             }
-            return res;
+            return resultClock;
           });
         }
       };
@@ -124,21 +124,21 @@ export class SpClockChart {
   }
 
   async initFolder(): Promise<TraceRow<any>> {
-    let folder = TraceRow.skeleton();
-    folder.rowId = `Clocks`;
-    folder.index = 0;
-    folder.rowType = TraceRow.ROW_TYPE_CLOCK_GROUP;
-    folder.rowParentId = '';
-    folder.style.height = '40px';
-    folder.folder = true;
-    folder.name = `Clocks`; /* & I/O Latency */
-    folder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    folder.selectChangeHandler = this.trace.selectChangeHandler;
-    folder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    folder.onThreadHandler = (useCache) => {
-      folder.canvasSave(this.trace.canvasPanelCtx!);
-      if (folder.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, folder.frame.width, folder.frame.height);
+    let clockFolder = TraceRow.skeleton();
+    clockFolder.rowId = `Clocks`;
+    clockFolder.index = 0;
+    clockFolder.rowType = TraceRow.ROW_TYPE_CLOCK_GROUP;
+    clockFolder.rowParentId = '';
+    clockFolder.style.height = '40px';
+    clockFolder.folder = true;
+    clockFolder.name = `Clocks`; /* & I/O Latency */
+    clockFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    clockFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    clockFolder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    clockFolder.onThreadHandler = (useCache) => {
+      clockFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (clockFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, clockFolder.frame.width, clockFolder.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -146,11 +146,11 @@ export class SpClockChart {
             useCache: useCache,
             type: ``,
           },
-          folder
+          clockFolder
         );
       }
-      folder.canvasRestore(this.trace.canvasPanelCtx!);
+      clockFolder.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    return folder;
+    return clockFolder;
   }
 }
diff --git a/ide/src/trace/component/chart/SpFileSystemChart.ts b/ide/src/trace/component/chart/SpFileSystemChart.ts
index 461ea7614d97e3ff7f40f36f738b439634b747be..bc31d43f9c5ef19f49a00561a30f59e7feffe448 100644
--- a/ide/src/trace/component/chart/SpFileSystemChart.ts
+++ b/ide/src/trace/component/chart/SpFileSystemChart.ts
@@ -69,21 +69,21 @@ export class SpFileSystemChart {
   }
 
   async initFolder(): Promise<TraceRow<any>> {
-    let folder = TraceRow.skeleton();
-    folder.rowId = `FileSystem`;
-    folder.index = 0;
-    folder.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM_GROUP;
-    folder.rowParentId = '';
-    folder.style.height = '40px';
-    folder.folder = true;
-    folder.name = `EBPF`; /* & I/O Latency */
-    folder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    folder.selectChangeHandler = this.trace.selectChangeHandler;
-    folder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    folder.onThreadHandler = (useCache) => {
-      folder.canvasSave(this.trace.canvasPanelCtx!);
-      if (folder.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, folder.frame.width, folder.frame.height);
+    let fsFolder = TraceRow.skeleton();
+    fsFolder.rowId = `FileSystem`;
+    fsFolder.index = 0;
+    fsFolder.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM_GROUP;
+    fsFolder.rowParentId = '';
+    fsFolder.style.height = '40px';
+    fsFolder.folder = true;
+    fsFolder.name = `EBPF`; /* & I/O Latency */
+    fsFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    fsFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    fsFolder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    fsFolder.onThreadHandler = (useCache) => {
+      fsFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (fsFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, fsFolder.frame.width, fsFolder.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -91,32 +91,32 @@ export class SpFileSystemChart {
             useCache: useCache,
             type: ``,
           },
-          folder
+          fsFolder
         );
       }
-      folder.canvasRestore(this.trace.canvasPanelCtx!);
+      fsFolder.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    this.trace.rowsEL?.appendChild(folder);
-    return folder;
+    this.trace.rowsEL?.appendChild(fsFolder);
+    return fsFolder;
   }
 
   async initLogicalRead(folder: TraceRow<any>) {
-    let row = TraceRow.skeleton<FileSysChartStruct>();
-    row.rowId = `FileSystemLogicalRead`;
-    row.index = 1;
-    row.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
-    row.rowParentId = folder.rowId;
-    row.rowHidden = !folder.expansion;
-    row.style.height = '40px';
-    row.setAttribute('children', '');
-    row.name = `FileSystem Logical Read`;
-    row.supplier = () => getFileSysChartDataByType(2);
-    row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    row.selectChangeHandler = this.trace.selectChangeHandler;
-    row.focusHandler = () => this.focusHandler(row);
-    row.onThreadHandler = (useCache) => {
-      let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      row.canvasSave(context);
+    let logicalReadRow = TraceRow.skeleton<FileSysChartStruct>();
+    logicalReadRow.rowId = `FileSystemLogicalRead`;
+    logicalReadRow.index = 1;
+    logicalReadRow.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
+    logicalReadRow.rowParentId = folder.rowId;
+    logicalReadRow.rowHidden = !folder.expansion;
+    logicalReadRow.style.height = '40px';
+    logicalReadRow.setAttribute('children', '');
+    logicalReadRow.name = `FileSystem Logical Read`;
+    logicalReadRow.supplier = () => getFileSysChartDataByType(2);
+    logicalReadRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    logicalReadRow.selectChangeHandler = this.trace.selectChangeHandler;
+    logicalReadRow.focusHandler = () => this.focusHandler(logicalReadRow);
+    logicalReadRow.onThreadHandler = (useCache) => {
+      let context = logicalReadRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      logicalReadRow.canvasSave(context);
       (renders[TraceRow.ROW_TYPE_FILE_SYSTEM] as FileSystemRender).renderMainThread(
         {
           context: context,
@@ -124,30 +124,30 @@ export class SpFileSystemChart {
           type: `${TraceRow.ROW_TYPE_FILE_SYSTEM}-logical-read`,
           chartColor: ColorUtils.MD_PALETTE[0],
         },
-        row
+        logicalReadRow
       );
-      row.canvasRestore(context);
+      logicalReadRow.canvasRestore(context);
     };
-    folder.addChildTraceRow(row);
+    folder.addChildTraceRow(logicalReadRow);
   }
 
   async initLogicalWrite(folder: TraceRow<any>) {
-    let row = TraceRow.skeleton<FileSysChartStruct>();
-    row.rowId = `FileSystemLogicalWrite`;
-    row.index = 2;
-    row.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
-    row.rowParentId = folder.rowId;
-    row.rowHidden = !folder.expansion;
-    row.style.height = '40px';
-    row.setAttribute('children', '');
-    row.name = `FileSystem Logical Write`;
-    row.supplier = () => getFileSysChartDataByType(3);
-    row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    row.selectChangeHandler = this.trace.selectChangeHandler;
-    row.focusHandler = () => this.focusHandler(row);
-    row.onThreadHandler = (useCache) => {
-      let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      row.canvasSave(context);
+    let logicalWriteRow = TraceRow.skeleton<FileSysChartStruct>();
+    logicalWriteRow.rowId = `FileSystemLogicalWrite`;
+    logicalWriteRow.index = 2;
+    logicalWriteRow.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
+    logicalWriteRow.rowParentId = folder.rowId;
+    logicalWriteRow.rowHidden = !folder.expansion;
+    logicalWriteRow.style.height = '40px';
+    logicalWriteRow.setAttribute('children', '');
+    logicalWriteRow.name = `FileSystem Logical Write`;
+    logicalWriteRow.supplier = () => getFileSysChartDataByType(3);
+    logicalWriteRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    logicalWriteRow.selectChangeHandler = this.trace.selectChangeHandler;
+    logicalWriteRow.focusHandler = () => this.focusHandler(logicalWriteRow);
+    logicalWriteRow.onThreadHandler = (useCache) => {
+      let context = logicalWriteRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      logicalWriteRow.canvasSave(context);
       (renders[TraceRow.ROW_TYPE_FILE_SYSTEM] as FileSystemRender).renderMainThread(
         {
           context: context,
@@ -155,31 +155,31 @@ export class SpFileSystemChart {
           type: `${TraceRow.ROW_TYPE_FILE_SYSTEM}-logical-write`,
           chartColor: ColorUtils.MD_PALETTE[8],
         },
-        row
+        logicalWriteRow
       );
-      row.canvasRestore(context);
+      logicalWriteRow.canvasRestore(context);
     };
-      folder.addChildTraceRow(row);
+      folder.addChildTraceRow(logicalWriteRow);
   }
 
   async initDiskIOLatency(folder: TraceRow<any>) {
-    let row = TraceRow.skeleton<FileSysChartStruct>();
-    row.rowId = `FileSystemDiskIOLatency`;
-    row.index = 4;
-    row.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
-    row.rowParentId = folder.rowId;
-    row.rowHidden = !folder.expansion;
-    row.style.height = '40px';
-    row.style.width = `100%`;
-    row.setAttribute('children', '');
-    row.name = `Disk I/O Latency`;
-    row.supplier = () => getDiskIOLatencyChartDataByProcess(true, 0, [1, 2, 3, 4]);
-    row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    row.selectChangeHandler = this.trace.selectChangeHandler;
-    row.focusHandler = () => this.focusHandler(row);
-    row.onThreadHandler = (useCache) => {
-      let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      row.canvasSave(context);
+    let diskIoRow = TraceRow.skeleton<FileSysChartStruct>();
+    diskIoRow.rowId = `FileSystemDiskIOLatency`;
+    diskIoRow.index = 4;
+    diskIoRow.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
+    diskIoRow.rowParentId = folder.rowId;
+    diskIoRow.rowHidden = !folder.expansion;
+    diskIoRow.style.height = '40px';
+    diskIoRow.style.width = `100%`;
+    diskIoRow.setAttribute('children', '');
+    diskIoRow.name = `Disk I/O Latency`;
+    diskIoRow.supplier = () => getDiskIOLatencyChartDataByProcess(true, 0, [1, 2, 3, 4]);
+    diskIoRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    diskIoRow.selectChangeHandler = this.trace.selectChangeHandler;
+    diskIoRow.focusHandler = () => this.focusHandler(diskIoRow);
+    diskIoRow.onThreadHandler = (useCache) => {
+      let context = diskIoRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      diskIoRow.canvasSave(context);
       (renders[TraceRow.ROW_TYPE_FILE_SYSTEM] as FileSystemRender).renderMainThread(
         {
           context: context,
@@ -187,11 +187,11 @@ export class SpFileSystemChart {
           type: `${TraceRow.ROW_TYPE_FILE_SYSTEM}-disk-io`,
           chartColor: ColorUtils.MD_PALETTE[0],
         },
-        row
+        diskIoRow
       );
-      row.canvasRestore(context);
+      diskIoRow.canvasRestore(context);
     };
-    folder.addChildTraceRow(row);
+    folder.addChildTraceRow(diskIoRow);
   }
 
   async initProcessDiskIOLatency(folder: TraceRow<any>) {
@@ -260,24 +260,24 @@ export class SpFileSystemChart {
   }
 
   async initVirtualMemoryTrace(folder: TraceRow<any>) {
-    let row = TraceRow.skeleton<FileSysChartStruct>();
-    row.rowId = `FileSystemVirtualMemory`;
-    row.index = 3;
-    row.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
-    row.rowParentId = folder.rowId;
-    row.rowHidden = !folder.expansion;
-    row.rangeSelect = true;
-    row.style.height = '40px';
-    row.style.width = `100%`;
-    row.setAttribute('children', '');
-    row.name = `Page Fault Trace`;
-    row.supplier = () => getFileSysVirtualMemoryChartData();
-    row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    row.selectChangeHandler = this.trace.selectChangeHandler;
-    row.focusHandler = () => this.focusHandler(row);
-    row.onThreadHandler = (useCache) => {
-      let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      row.canvasSave(context);
+    let vmTraceRow = TraceRow.skeleton<FileSysChartStruct>();
+    vmTraceRow.rowId = `FileSystemVirtualMemory`;
+    vmTraceRow.index = 3;
+    vmTraceRow.rowType = TraceRow.ROW_TYPE_FILE_SYSTEM;
+    vmTraceRow.rowParentId = folder.rowId;
+    vmTraceRow.rowHidden = !folder.expansion;
+    vmTraceRow.rangeSelect = true;
+    vmTraceRow.style.height = '40px';
+    vmTraceRow.style.width = `100%`;
+    vmTraceRow.setAttribute('children', '');
+    vmTraceRow.name = `Page Fault Trace`;
+    vmTraceRow.supplier = () => getFileSysVirtualMemoryChartData();
+    vmTraceRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    vmTraceRow.selectChangeHandler = this.trace.selectChangeHandler;
+    vmTraceRow.focusHandler = () => this.focusHandler(vmTraceRow);
+    vmTraceRow.onThreadHandler = (useCache) => {
+      let context = vmTraceRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      vmTraceRow.canvasSave(context);
       (renders[TraceRow.ROW_TYPE_FILE_SYSTEM] as FileSystemRender).renderMainThread(
         {
           context: context,
@@ -285,11 +285,11 @@ export class SpFileSystemChart {
           type: `${TraceRow.ROW_TYPE_FILE_SYSTEM}-virtual-memory`,
           chartColor: ColorUtils.MD_PALETTE[0],
         },
-        row
+        vmTraceRow
       );
-      row.canvasRestore(context);
+      vmTraceRow.canvasRestore(context);
     };
-    folder.addChildTraceRow(row);
+    folder.addChildTraceRow(vmTraceRow);
   }
 
   focusHandler(row: TraceRow<FileSysChartStruct>) {
diff --git a/ide/src/trace/component/chart/SpFrameTimeChart.ts b/ide/src/trace/component/chart/SpFrameTimeChart.ts
index 2284e86fb17924d4dc0ced09a609b4055dceceb2..84b0731b9e1476dcd82d966dbad8c201087f945b 100644
--- a/ide/src/trace/component/chart/SpFrameTimeChart.ts
+++ b/ide/src/trace/component/chart/SpFrameTimeChart.ts
@@ -75,28 +75,28 @@ export class SpFrameTimeChart {
     if (frameExpectedData.length > 0) {
       let isIntersect = (a: JanksStruct, b: JanksStruct) =>
         Math.max(a.ts! + a.dur!, b.ts! + b.dur!) - Math.min(a.ts!, b.ts!) < a.dur! + b.dur!;
-      let depthArray: any = [];
+      let depths: any = [];
       for (let i = 0; i < frameExpectedData.length; i++) {
         let it = frameExpectedData[i];
         if (!it.dur || it.dur < 0) {
           continue;
         }
-        if (depthArray.length == 0) {
+        if (depths.length == 0) {
           it.depth = 0;
-          depthArray[0] = it;
+          depths[0] = it;
         } else {
           let index = 0;
           let isContinue = true;
           while (isContinue) {
-            if (isIntersect(depthArray[index], it)) {
-              if (depthArray[index + 1] == undefined || !depthArray[index + 1]) {
+            if (isIntersect(depths[index], it)) {
+              if (depths[index + 1] == undefined || !depths[index + 1]) {
                 it.depth = index + 1;
-                depthArray[index + 1] = it;
+                depths[index + 1] = it;
                 isContinue = false;
               }
             } else {
               it.depth = index;
-              depthArray[index] = it;
+              depths[index] = it;
               isContinue = false;
             }
             index++;
@@ -209,50 +209,45 @@ export class SpFrameTimeChart {
     frameTimeLineRow.addChildTraceRow(actualTimeLineRow);
     let offsetYTimeOut: any = undefined;
     frameTimeLineRow.addEventListener('expansion-change', (e: any) => {
+      JankStruct.delJankLineFlag = false;
       if (offsetYTimeOut) {
         clearTimeout(offsetYTimeOut);
       }
       if (e.detail.expansion) {
-        if (JankStruct!.selectJankStruct) {
-          JankStruct.delJankLineFlag = true;
-        } else {
-          JankStruct.delJankLineFlag = false;
-        }
         offsetYTimeOut = setTimeout(() => {
-          this.trace.linkNodes.forEach((linkNode) => {
+          this.trace.linkNodes.forEach((linkFrameNode) => {
             JankStruct.selectJankStructList?.forEach((dat: any) => {
               if (e.detail.rowId == dat.pid) {
                 JankStruct.selectJankStruct = dat;
                 JankStruct.hoverJankStruct = dat;
               }
             });
-            if (linkNode[0].rowEL.collect) {
-              linkNode[0].rowEL.translateY = linkNode[0].rowEL.getBoundingClientRect().top - 195;
+            if (linkFrameNode[0].rowEL.collect) {
+              linkFrameNode[0].rowEL.translateY = linkFrameNode[0].rowEL.getBoundingClientRect().top - 195;
             } else {
-              linkNode[0].rowEL.translateY = linkNode[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+              linkFrameNode[0].rowEL.translateY = linkFrameNode[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
             }
-            linkNode[0].y = linkNode[0].rowEL!.translateY! + linkNode[0].offsetY;
-            if (linkNode[1].rowEL.collect) {
-              linkNode[1].rowEL.translateY = linkNode[1].rowEL.getBoundingClientRect().top - 195;
+            linkFrameNode[0].y = linkFrameNode[0].rowEL!.translateY! + linkFrameNode[0].offsetY;
+            if (linkFrameNode[1].rowEL.collect) {
+              linkFrameNode[1].rowEL.translateY = linkFrameNode[1].rowEL.getBoundingClientRect().top - 195;
             } else {
-              linkNode[1].rowEL.translateY = linkNode[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+              linkFrameNode[1].rowEL.translateY = linkFrameNode[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
             }
-            linkNode[1].y = linkNode[1].rowEL!.translateY! + linkNode[1].offsetY;
-            if (linkNode[0].rowEL.rowId == e.detail.rowId) {
-              linkNode[0].x = ns2xByTimeShaft(linkNode[0].ns, this.trace.timerShaftEL!);
-              linkNode[0].y = actualTimeLineRow!.translateY! + linkNode[0].offsetY * 2;
-              linkNode[0].offsetY = linkNode[0].offsetY * 2;
-              linkNode[0].rowEL = actualTimeLineRow;
-            } else if (linkNode[1].rowEL.rowId == e.detail.rowId) {
-              linkNode[1].x = ns2xByTimeShaft(linkNode[1].ns, this.trace.timerShaftEL!);
-              linkNode[1].y = actualTimeLineRow!.translateY! + linkNode[1].offsetY * 2;
-              linkNode[1].offsetY = linkNode[1].offsetY * 2;
-              linkNode[1].rowEL = actualTimeLineRow!;
+            linkFrameNode[1].y = linkFrameNode[1].rowEL!.translateY! + linkFrameNode[1].offsetY;
+            if (linkFrameNode[0].rowEL.rowId == e.detail.rowId) {
+              linkFrameNode[0].x = ns2xByTimeShaft(linkFrameNode[0].ns, this.trace.timerShaftEL!);
+              linkFrameNode[0].y = actualTimeLineRow!.translateY! + linkFrameNode[0].offsetY * 2;
+              linkFrameNode[0].offsetY = linkFrameNode[0].offsetY * 2;
+              linkFrameNode[0].rowEL = actualTimeLineRow;
+            } else if (linkFrameNode[1].rowEL.rowId == e.detail.rowId) {
+              linkFrameNode[1].x = ns2xByTimeShaft(linkFrameNode[1].ns, this.trace.timerShaftEL!);
+              linkFrameNode[1].y = actualTimeLineRow!.translateY! + linkFrameNode[1].offsetY * 2;
+              linkFrameNode[1].offsetY = linkFrameNode[1].offsetY * 2;
+              linkFrameNode[1].rowEL = actualTimeLineRow!;
             }
           });
         }, 300);
       } else {
-        JankStruct.delJankLineFlag = false;
         if (JankStruct!.selectJankStruct) {
           JankStruct.selectJankStructList?.push(<JankStruct>JankStruct!.selectJankStruct);
         }
diff --git a/ide/src/trace/component/chart/SpFreqChart.ts b/ide/src/trace/component/chart/SpFreqChart.ts
index d869a822f5aca7bf4839624c50631f06d1ef8c93..3004415a72c140d00c7d89eded2b2caf0ff62799 100644
--- a/ide/src/trace/component/chart/SpFreqChart.ts
+++ b/ide/src/trace/component/chart/SpFreqChart.ts
@@ -30,9 +30,9 @@ import { procedurePool } from '../../database/Procedure.js';
 import { ColorUtils } from '../trace/base/ColorUtils.js';
 import { CpuFreqLimitRender, CpuFreqLimitsStruct } from '../../database/ui-worker/ProcedureWorkerCpuFreqLimits.js';
 import { renders } from '../../database/ui-worker/ProcedureWorker.js';
-import { CpuStruct } from '../../database/ui-worker/ProcedureWorkerCPU.js';
 import { CpuFreqStruct, FreqRender } from '../../database/ui-worker/ProcedureWorkerFreq.js';
 import { CpuStateRender, CpuStateStruct } from '../../database/ui-worker/ProcedureWorkerCpuState.js';
+import {Utils} from "../trace/base/Utils.js";
 
 export class SpFreqChart {
   private trace: SpSystemTrace;
@@ -56,7 +56,7 @@ export class SpFreqChart {
     info('Cpu Freq data size is: ', freqList!.length);
     let freqMaxList = await queryCpuMaxFreq();
     CpuFreqStruct.maxFreq = freqMaxList[0].maxFreq;
-    let maxFreqObj = this.math(freqMaxList[0].maxFreq);
+    let maxFreqObj = Utils.getFrequencyWithUnit(freqMaxList[0].maxFreq);
     CpuFreqStruct.maxFreq = maxFreqObj.maxFreq;
     CpuFreqStruct.maxFreqName = maxFreqObj.maxFreqName;
     for (let i = 0; i < freqList.length; i++) {
@@ -137,7 +137,7 @@ export class SpFreqChart {
     let durTime = new Date().getTime() - cpuFreqStartTime;
     info('The time to load the CpuFreq data is: ', durTime);
     for (let limit of cpuFreqLimits) {
-      let findMax = this.math(
+      let findMax = Utils.getFrequencyWithUnit(
         cpuFreqLimitsMax.find((maxLimit) => {
           return maxLimit.filterId == limit.maxFilterId;
         })?.maxValue || 0
@@ -183,24 +183,6 @@ export class SpFreqChart {
     }
   }
 
-  math = (maxFreq: number) => {
-    let maxFreqObj = {
-      maxFreqName: ' ',
-      maxFreq: 0,
-    };
-    let units: Array<string> = ['', 'K', 'M', 'G', 'T', 'E'];
-    let sb = ' ';
-    if (maxFreq > 0) {
-      let log10: number = Math.ceil(Math.log10(maxFreq));
-      let pow10: number = Math.pow(10, log10);
-      let afterCeil: number = Math.ceil(maxFreq / (pow10 / 4)) * (pow10 / 4);
-      maxFreqObj.maxFreq = afterCeil;
-      let unitIndex: number = Math.floor(log10 / 3);
-      sb = `${afterCeil / Math.pow(10, unitIndex * 3)}${units[unitIndex + 1]}hz`;
-    }
-    maxFreqObj.maxFreqName = sb.toString();
-    return maxFreqObj;
-  };
 }
 
 export class CpuFreqRowLimit {
diff --git a/ide/src/trace/component/chart/SpHiPerf.ts b/ide/src/trace/component/chart/SpHiPerf.ts
index 6f678eb472ef605920b0f83359ea3a6e25e1402c..438613c8caffce91a4783c6593e316739aad7440 100644
--- a/ide/src/trace/component/chart/SpHiPerf.ts
+++ b/ide/src/trace/component/chart/SpHiPerf.ts
@@ -153,23 +153,23 @@ export class SpHiPerf {
   }
 
   async initCpuMerge() {
-    let row = TraceRow.skeleton<HiPerfCpuStruct>();
-    row.rowId = `HiPerf-cpu-merge`;
-    row.index = 0;
-    row.rowType = TraceRow.ROW_TYPE_HIPERF_CPU;
-    row.rowParentId = 'HiPerf';
-    row.rowHidden = !this.rowFolder.expansion;
-    row.folder = false;
-    row.name = `HiPerf`;
-    row.style.height = '40px';
-    row.setAttribute('children', '');
-    row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    row.selectChangeHandler = this.trace.selectChangeHandler;
-    row.supplier = () => queryHiPerfCpuMergeData();
-    row.focusHandler = () => this.hoverTip(row, HiPerfCpuStruct.hoverStruct);
-    row.onThreadHandler = (useCache) => {
-      let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      row.canvasSave(context);
+    let cpuMergeRow = TraceRow.skeleton<HiPerfCpuStruct>();
+    cpuMergeRow.rowId = `HiPerf-cpu-merge`;
+    cpuMergeRow.index = 0;
+    cpuMergeRow.rowType = TraceRow.ROW_TYPE_HIPERF_CPU;
+    cpuMergeRow.rowParentId = 'HiPerf';
+    cpuMergeRow.rowHidden = !this.rowFolder.expansion;
+    cpuMergeRow.folder = false;
+    cpuMergeRow.name = `HiPerf`;
+    cpuMergeRow.style.height = '40px';
+    cpuMergeRow.setAttribute('children', '');
+    cpuMergeRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    cpuMergeRow.selectChangeHandler = this.trace.selectChangeHandler;
+    cpuMergeRow.supplier = () => queryHiPerfCpuMergeData();
+    cpuMergeRow.focusHandler = () => this.hoverTip(cpuMergeRow, HiPerfCpuStruct.hoverStruct);
+    cpuMergeRow.onThreadHandler = (useCache) => {
+      let context = cpuMergeRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      cpuMergeRow.canvasSave(context);
       (renders['HiPerf-Cpu'] as HiperfCpuRender).renderMainThread(
         {
           context: context,
@@ -180,33 +180,33 @@ export class SpHiPerf {
           intervalPerf: SpHiPerf.stringResult?.fValue || 1,
           range: TraceRow.range,
         },
-        row
+        cpuMergeRow
       );
-      row.canvasRestore(context);
+      cpuMergeRow.canvasRestore(context);
     };
-    this.rowFolder.addChildTraceRow(row);
-    this.rowList?.push(row);
+    this.rowFolder.addChildTraceRow(cpuMergeRow);
+    this.rowList?.push(cpuMergeRow);
   }
 
   async initCpu() {
     for (let i = 0; i <= this.maxCpuId; i++) {
-      let row = TraceRow.skeleton<HiPerfCpuStruct>();
-      row.rowId = `HiPerf-cpu-${i}`;
-      row.index = i;
-      row.rowType = TraceRow.ROW_TYPE_HIPERF_CPU;
-      row.rowParentId = 'HiPerf';
-      row.rowHidden = !this.rowFolder.expansion;
-      row.folder = false;
-      row.name = `Cpu ${i}`;
-      row.setAttribute('children', '');
-      row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-      row.selectChangeHandler = this.trace.selectChangeHandler;
-      row.style.height = '40px';
-      row.supplier = () => queryHiPerfCpuData(i);
-      row.focusHandler = () => this.hoverTip(row, HiPerfCpuStruct.hoverStruct);
-      row.onThreadHandler = (useCache) => {
-        let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-        row.canvasSave(context);
+      let perfCpuRow = TraceRow.skeleton<HiPerfCpuStruct>();
+      perfCpuRow.rowId = `HiPerf-cpu-${i}`;
+      perfCpuRow.index = i;
+      perfCpuRow.rowType = TraceRow.ROW_TYPE_HIPERF_CPU;
+      perfCpuRow.rowParentId = 'HiPerf';
+      perfCpuRow.rowHidden = !this.rowFolder.expansion;
+      perfCpuRow.folder = false;
+      perfCpuRow.name = `Cpu ${i}`;
+      perfCpuRow.setAttribute('children', '');
+      perfCpuRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+      perfCpuRow.selectChangeHandler = this.trace.selectChangeHandler;
+      perfCpuRow.style.height = '40px';
+      perfCpuRow.supplier = () => queryHiPerfCpuData(i);
+      perfCpuRow.focusHandler = () => this.hoverTip(perfCpuRow, HiPerfCpuStruct.hoverStruct);
+      perfCpuRow.onThreadHandler = (useCache) => {
+        let context = perfCpuRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+        perfCpuRow.canvasSave(context);
         (renders['HiPerf-Cpu'] as HiperfCpuRender).renderMainThread(
           {
             context: context,
@@ -217,12 +217,12 @@ export class SpHiPerf {
             intervalPerf: SpHiPerf.stringResult?.fValue || 1,
             range: TraceRow.range,
           },
-          row
+          perfCpuRow
         );
-        row.canvasRestore(context);
+        perfCpuRow.canvasRestore(context);
       };
-      this.rowFolder.addChildTraceRow(row);
-      this.rowList?.push(row);
+      this.rowFolder.addChildTraceRow(perfCpuRow);
+      this.rowList?.push(perfCpuRow);
     }
   }
 
diff --git a/ide/src/trace/component/chart/SpIrqChart.ts b/ide/src/trace/component/chart/SpIrqChart.ts
index 06bc0197ee4fd839819b113ca56e46ec5f85c476..c5ba98d4368f707422952f213a69fa2d1b0a61ef 100644
--- a/ide/src/trace/component/chart/SpIrqChart.ts
+++ b/ide/src/trace/component/chart/SpIrqChart.ts
@@ -82,21 +82,21 @@ export class SpIrqChart {
   }
 
   async initFolder(): Promise<TraceRow<any>> {
-    let folder = TraceRow.skeleton();
-    folder.rowId = `Irqs`;
-    folder.index = 0;
-    folder.rowType = TraceRow.ROW_TYPE_IRQ_GROUP;
-    folder.rowParentId = '';
-    folder.style.height = '40px';
-    folder.folder = true;
-    folder.name = `Irqs`; /* & I/O Latency */
-    folder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    folder.selectChangeHandler = this.trace.selectChangeHandler;
-    folder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    folder.onThreadHandler = (useCache) => {
-      folder.canvasSave(this.trace.canvasPanelCtx!);
-      if (folder.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, folder.frame.width, folder.frame.height);
+    let irqFolder = TraceRow.skeleton();
+    irqFolder.rowId = `Irqs`;
+    irqFolder.index = 0;
+    irqFolder.rowType = TraceRow.ROW_TYPE_IRQ_GROUP;
+    irqFolder.rowParentId = '';
+    irqFolder.style.height = '40px';
+    irqFolder.folder = true;
+    irqFolder.name = `Irqs`; /* & I/O Latency */
+    irqFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    irqFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    irqFolder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    irqFolder.onThreadHandler = (useCache) => {
+      irqFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (irqFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, irqFolder.frame.width, irqFolder.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -104,11 +104,11 @@ export class SpIrqChart {
             useCache: useCache,
             type: ``,
           },
-          folder
+          irqFolder
         );
       }
-      folder.canvasRestore(this.trace.canvasPanelCtx!);
+      irqFolder.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    return folder;
+    return irqFolder;
   }
 }
diff --git a/ide/src/trace/component/chart/SpNativeMemoryChart.ts b/ide/src/trace/component/chart/SpNativeMemoryChart.ts
index 0562b5d5ae00279bcee23d7d1e62ef7d565e56d6..cdfe495184a9a09dafc9d1305b505e362f7d7a57 100644
--- a/ide/src/trace/component/chart/SpNativeMemoryChart.ts
+++ b/ide/src/trace/component/chart/SpNativeMemoryChart.ts
@@ -68,13 +68,11 @@ export class SpNativeMemoryChart {
     nativeRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
     nativeRow.selectChangeHandler = this.trace.selectChangeHandler;
     nativeRow.onDrawTypeChangeHandler = (type) => {
-      this.trace.rowsEL?.querySelectorAll<TraceRow<any>>(`trace-row[row-type='heap']`).forEach((it) => {
-        it.drawType = type;
-        this.trace.refreshCanvas(false);
-      });
+      nativeRow.childrenList.forEach(row => row.drawType = type);
       this.trace.favoriteRowsEL?.querySelectorAll<TraceRow<any>>(`trace-row[row-type='heap']`).forEach((it) => {
         it.drawType = type;
       });
+      this.trace.refreshCanvas(false);
     };
     nativeRow.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
     nativeRow.onThreadHandler = (useCache) => {
@@ -151,7 +149,7 @@ export class SpNativeMemoryChart {
   };
 
   getNativeMemoryStatisticByChartType = async (chartType: number): Promise<Array<HeapStruct>> => {
-    let arr: Array<HeapStruct> = [];
+    let nmStatisticArray: Array<HeapStruct> = [];
     await new Promise<Array<HeapStruct>>((resolve, reject) => {
       procedurePool.submitWithName(
         'logic1',
@@ -159,15 +157,15 @@ export class SpNativeMemoryChart {
         { type: chartType, totalNS: TraceRow.range?.totalNS! },
         undefined,
         (res: any) => {
-          arr = arr.concat(res.data);
+          nmStatisticArray = nmStatisticArray.concat(res.data);
           res.data = null;
           if (res.tag == 'end') {
-            resolve(arr);
+            resolve(nmStatisticArray);
           }
         }
       );
     });
-    return arr;
+    return nmStatisticArray;
   };
 
   getNativeMemoryDataByChartType = async (nativeMemoryType: number, chartType: number): Promise<Array<HeapStruct>> => {
@@ -176,17 +174,17 @@ export class SpNativeMemoryChart {
     args.set('chartType', chartType);
     args.set('totalNS', TraceRow.range?.totalNS!);
     args.set('actionType', 'memory-chart');
-    let arr: Array<HeapStruct> = [];
+    let nmArray: Array<HeapStruct> = [];
     await new Promise<Array<HeapStruct>>((resolve, reject) => {
       procedurePool.submitWithName('logic1', 'native-memory-chart-action', args, undefined, (res: any) => {
-        arr = arr.concat(res.data);
+        nmArray = nmArray.concat(res.data);
         res.data = null;
         if (res.tag == 'end') {
-          resolve(arr);
+          resolve(nmArray);
         }
       });
     });
-    return arr;
+    return nmArray;
   };
 
   initNativeMemory = async () => {
diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts
index 8d0e32dc380200d2cf0f90218ab8cbf50f9b3af6..4dc65880f32dccb8ff27e9c34966fbef522c9fdc 100644
--- a/ide/src/trace/component/chart/SpProcessChart.ts
+++ b/ide/src/trace/component/chart/SpProcessChart.ts
@@ -91,31 +91,31 @@ export class SpProcessChart {
       this.trace.rowsEL?.appendChild(row);
     }
     Reflect.ownKeys(asyncFuncGroup).map((key: any) => {
-      let asyncFunctions: Array<any> = asyncFuncGroup[key];
-      if (asyncFunctions.length > 0) {
-        let isIntersect = (a: any, b: any) =>
-          Math.max(a.startTs + a.dur, b.startTs + b.dur) - Math.min(a.startTs, b.startTs) < a.dur + b.dur;
-        let depthArray: any = [];
+      let asyncFuncGroups: Array<any> = asyncFuncGroup[key];
+      if (asyncFuncGroups.length > 0) {
+        let isIntersect = (left: any, right: any) =>
+          Math.max(left.startTs + left.dur, right.startTs + right.dur) - Math.min(left.startTs, right.startTs) < left.dur + right.dur;
+        let depths: any = [];
         let createDepth = (currentDepth: number, index: number) => {
-          if (depthArray[currentDepth] == undefined || !isIntersect(depthArray[currentDepth], asyncFunctions[index])) {
-            asyncFunctions[index].depth = currentDepth;
-            depthArray[currentDepth] = asyncFunctions[index];
+          if (depths[currentDepth] == undefined || !isIntersect(depths[currentDepth], asyncFuncGroups[index])) {
+            asyncFuncGroups[index].depth = currentDepth;
+            depths[currentDepth] = asyncFuncGroups[index];
           } else {
             createDepth(++currentDepth, index);
           }
         };
-        asyncFunctions.forEach((it, i) => {
+        asyncFuncGroups.forEach((it, i) => {
           if (it.dur == -1) {
             it.dur = (TraceRow.range?.endNS || 0) - it.startTs;
             it.flag = 'Did not end';
           }
           createDepth(0, i);
         });
-        let max = Math.max(...asyncFunctions.map((it) => it.depth || 0)) + 1;
+        let max = Math.max(...asyncFuncGroups.map((it) => it.depth || 0)) + 1;
         let maxHeight = max * 20;
         let funcRow = TraceRow.skeleton<FuncStruct>();
-        funcRow.rowId = `${asyncFunctions[0].funName}-${key}`;
-        funcRow.asyncFuncName = asyncFunctions[0].funName;
+        funcRow.rowId = `${asyncFuncGroups[0].funName}-${key}`;
+        funcRow.asyncFuncName = asyncFuncGroups[0].funName;
         funcRow.asyncFuncNamePID = key;
         funcRow.rowType = TraceRow.ROW_TYPE_FUNC;
         funcRow.rowParentId = `${row.rowId}`;
@@ -123,9 +123,9 @@ export class SpProcessChart {
         funcRow.style.width = `100%`;
         funcRow.style.height = `${maxHeight}px`;
         funcRow.setAttribute('height', `${maxHeight}`);
-        funcRow.name = `${asyncFunctions[0].funName} ${key}`;
+        funcRow.name = `${asyncFuncGroups[0].funName} ${key}`;
         funcRow.setAttribute('children', '');
-        funcRow.supplier = () => new Promise((resolve) => resolve(asyncFunctions));
+        funcRow.supplier = () => new Promise((resolve) => resolve(asyncFuncGroups));
         funcRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
         funcRow.selectChangeHandler = this.trace.selectChangeHandler;
         funcRow.onThreadHandler = (useCache) => {
@@ -135,7 +135,7 @@ export class SpProcessChart {
             {
               context: context,
               useCache: useCache,
-              type: `func-${asyncFunctions[0].funName}-${key}`,
+              type: `func-${asyncFuncGroups[0].funName}-${key}`,
             },
             funcRow
           );
@@ -250,27 +250,27 @@ export class SpProcessChart {
             Math.max(a.ts + a.dur, b.ts + b.dur) - Math.min(a.ts, b.ts) < a.dur + b.dur;
           let depthArray: any = [];
           for (let j = 0; j < expectedData.length; j++) {
-            let it = expectedData[j];
-            if (it.cmdline != 'render_service') {
-              it.frame_type = 'app';
+            let expectedItem = expectedData[j];
+            if (expectedItem.cmdline != 'render_service') {
+              expectedItem.frame_type = 'app';
             } else {
-              it.frame_type = it.cmdline;
+              expectedItem.frame_type = expectedItem.cmdline;
             }
-            if (!it.dur || it.dur < 0) {
+            if (!expectedItem.dur || expectedItem.dur < 0) {
               continue;
             }
             if (depthArray.length === 0) {
-              it.depth = 0;
-              depthArray.push(it);
+              expectedItem.depth = 0;
+              depthArray.push(expectedItem);
             } else {
-              if (isIntersect(depthArray[0], it)) {
-                if (isIntersect(depthArray[depthArray.length - 1], it)) {
-                  it.depth = depthArray.length;
-                  depthArray.push(it);
+              if (isIntersect(depthArray[0], expectedItem)) {
+                if (isIntersect(depthArray[depthArray.length - 1], expectedItem)) {
+                  expectedItem.depth = depthArray.length;
+                  depthArray.push(expectedItem);
                 }
               } else {
-                it.depth = 0;
-                depthArray = [it];
+                expectedItem.depth = 0;
+                depthArray = [expectedItem];
               }
             }
           }
@@ -316,27 +316,27 @@ export class SpProcessChart {
               Math.max(a.ts + a.dur, b.ts + b.dur) - Math.min(a.ts, b.ts) < a.dur + b.dur;
             let depthArray: any = [];
             for (let j = 0; j < actualData.length; j++) {
-              let it = actualData[j];
-              if (it.cmdline != 'render_service') {
-                it.frame_type = 'app';
+              let actualItem = actualData[j];
+              if (actualItem.cmdline != 'render_service') {
+                actualItem.frame_type = 'app';
               } else {
-                it.frame_type = it.cmdline;
+                actualItem.frame_type = actualItem.cmdline;
               }
-              if (!it.dur || it.dur < 0) {
+              if (!actualItem.dur || actualItem.dur < 0) {
                 continue;
               }
               if (depthArray.length === 0) {
-                it.depth = 0;
-                depthArray.push(it);
+                actualItem.depth = 0;
+                depthArray.push(actualItem);
               } else {
-                if (isIntersect(depthArray[0], it)) {
-                  if (isIntersect(depthArray[depthArray.length - 1], it)) {
-                    it.depth = depthArray.length;
-                    depthArray.push(it);
+                if (isIntersect(depthArray[0], actualItem)) {
+                  if (isIntersect(depthArray[depthArray.length - 1], actualItem)) {
+                    actualItem.depth = depthArray.length;
+                    depthArray.push(actualItem);
                   }
                 } else {
-                  it.depth = 0;
-                  depthArray = [it];
+                  actualItem.depth = 0;
+                  depthArray = [actualItem];
                 }
               }
             }
@@ -377,77 +377,72 @@ export class SpProcessChart {
       }
       let offsetYTimeOut: any = undefined;
       processRow.addEventListener('expansion-change', (e: any) => {
+        JankStruct.delJankLineFlag = false;
         if (offsetYTimeOut) {
           clearTimeout(offsetYTimeOut);
         }
         if (e.detail.expansion) {
-          if (JankStruct!.selectJankStruct) {
-            JankStruct.delJankLineFlag = true;
-          } else {
-            JankStruct.delJankLineFlag = false;
-          }
           offsetYTimeOut = setTimeout(() => {
-            this.trace.linkNodes.forEach((linkNode) => {
-              JankStruct.selectJankStructList?.forEach((dat: any) => {
-                if (e.detail.rowId == dat.pid) {
-                  JankStruct.selectJankStruct = dat;
-                  JankStruct.hoverJankStruct = dat;
+            this.trace.linkNodes.forEach((linkNodeItem) => {
+              JankStruct.selectJankStructList?.forEach((selectProcessStruct: any) => {
+                if (e.detail.rowId == selectProcessStruct.pid) {
+                  JankStruct.selectJankStruct = selectProcessStruct;
+                  JankStruct.hoverJankStruct = selectProcessStruct;
                 }
               });
-              if (linkNode[0].rowEL.collect) {
-                linkNode[0].rowEL.translateY = linkNode[0].rowEL.getBoundingClientRect().top - 195;
+              if (linkNodeItem[0].rowEL.collect) {
+                linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.getBoundingClientRect().top - 195;
               } else {
-                linkNode[0].rowEL.translateY = linkNode[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
               }
-              linkNode[0].y = linkNode[0].rowEL!.translateY! + linkNode[0].offsetY;
-              if (linkNode[1].rowEL.collect) {
-                linkNode[1].rowEL.translateY = linkNode[1].rowEL.getBoundingClientRect().top - 195;
+              linkNodeItem[0].y = linkNodeItem[0].rowEL!.translateY! + linkNodeItem[0].offsetY;
+              if (linkNodeItem[1].rowEL.collect) {
+                linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.getBoundingClientRect().top - 195;
               } else {
-                linkNode[1].rowEL.translateY = linkNode[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
               }
-              linkNode[1].y = linkNode[1].rowEL!.translateY! + linkNode[1].offsetY;
-              if (linkNode[0].rowEL.rowId == e.detail.rowId) {
-                linkNode[0].x = ns2xByTimeShaft(linkNode[0].ns, this.trace.timerShaftEL!);
-                linkNode[0].y = actualRow!.translateY! + linkNode[0].offsetY * 2;
-                linkNode[0].offsetY = linkNode[0].offsetY * 2;
-                linkNode[0].rowEL = actualRow!;
-              } else if (linkNode[1].rowEL.rowId == e.detail.rowId) {
-                linkNode[1].x = ns2xByTimeShaft(linkNode[1].ns, this.trace.timerShaftEL!);
-                linkNode[1].y = actualRow!.translateY! + linkNode[1].offsetY * 2;
-                linkNode[1].offsetY = linkNode[1].offsetY * 2;
-                linkNode[1].rowEL = actualRow!;
+              linkNodeItem[1].y = linkNodeItem[1].rowEL!.translateY! + linkNodeItem[1].offsetY;
+              if (linkNodeItem[0].rowEL.rowId == e.detail.rowId) {
+                linkNodeItem[0].x = ns2xByTimeShaft(linkNodeItem[0].ns, this.trace.timerShaftEL!);
+                linkNodeItem[0].y = actualRow!.translateY! + linkNodeItem[0].offsetY * 2;
+                linkNodeItem[0].offsetY = linkNodeItem[0].offsetY * 2;
+                linkNodeItem[0].rowEL = actualRow!;
+              } else if (linkNodeItem[1].rowEL.rowId == e.detail.rowId) {
+                linkNodeItem[1].x = ns2xByTimeShaft(linkNodeItem[1].ns, this.trace.timerShaftEL!);
+                linkNodeItem[1].y = actualRow!.translateY! + linkNodeItem[1].offsetY * 2;
+                linkNodeItem[1].offsetY = linkNodeItem[1].offsetY * 2;
+                linkNodeItem[1].rowEL = actualRow!;
               }
             });
           }, 300);
         } else {
-          JankStruct.delJankLineFlag = false;
           if (JankStruct!.selectJankStruct) {
             JankStruct.selectJankStructList?.push(<JankStruct>JankStruct!.selectJankStruct);
           }
           offsetYTimeOut = setTimeout(() => {
-            this.trace.linkNodes?.forEach((linkNode) => {
-              if (linkNode[0].rowEL.collect) {
-                linkNode[0].rowEL.translateY = linkNode[0].rowEL.getBoundingClientRect().top - 195;
+            this.trace.linkNodes?.forEach((linkProcessItem) => {
+              if (linkProcessItem[0].rowEL.collect) {
+                linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.getBoundingClientRect().top - 195;
               } else {
-                linkNode[0].rowEL.translateY = linkNode[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
               }
-              linkNode[0].y = linkNode[0].rowEL!.translateY! + linkNode[0].offsetY;
-              if (linkNode[1].rowEL.collect) {
-                linkNode[1].rowEL.translateY = linkNode[1].rowEL.getBoundingClientRect().top - 195;
+              linkProcessItem[0].y = linkProcessItem[0].rowEL!.translateY! + linkProcessItem[0].offsetY;
+              if (linkProcessItem[1].rowEL.collect) {
+                linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.getBoundingClientRect().top - 195;
               } else {
-                linkNode[1].rowEL.translateY = linkNode[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
               }
-              linkNode[1].y = linkNode[1].rowEL!.translateY! + linkNode[1].offsetY;
-              if (linkNode[0].rowEL.rowParentId == e.detail.rowId) {
-                linkNode[0].x = ns2xByTimeShaft(linkNode[0].ns, this.trace.timerShaftEL!);
-                linkNode[0].y = processRow!.translateY! + linkNode[0].offsetY / 2;
-                linkNode[0].offsetY = linkNode[0].offsetY / 2;
-                linkNode[0].rowEL = processRow!;
-              } else if (linkNode[1].rowEL.rowParentId == e.detail.rowId) {
-                linkNode[1].x = ns2xByTimeShaft(linkNode[1].ns, this.trace.timerShaftEL!);
-                linkNode[1].y = processRow!.translateY! + linkNode[1].offsetY / 2;
-                linkNode[1].offsetY = linkNode[1].offsetY / 2;
-                linkNode[1].rowEL = processRow!;
+              linkProcessItem[1].y = linkProcessItem[1].rowEL!.translateY! + linkProcessItem[1].offsetY;
+              if (linkProcessItem[0].rowEL.rowParentId == e.detail.rowId) {
+                linkProcessItem[0].x = ns2xByTimeShaft(linkProcessItem[0].ns, this.trace.timerShaftEL!);
+                linkProcessItem[0].y = processRow!.translateY! + linkProcessItem[0].offsetY / 2;
+                linkProcessItem[0].offsetY = linkProcessItem[0].offsetY / 2;
+                linkProcessItem[0].rowEL = processRow!;
+              } else if (linkProcessItem[1].rowEL.rowParentId == e.detail.rowId) {
+                linkProcessItem[1].x = ns2xByTimeShaft(linkProcessItem[1].ns, this.trace.timerShaftEL!);
+                linkProcessItem[1].y = processRow!.translateY! + linkProcessItem[1].offsetY / 2;
+                linkProcessItem[1].offsetY = linkProcessItem[1].offsetY / 2;
+                linkProcessItem[1].rowEL = processRow!;
               }
             });
           }, 300);
@@ -503,13 +498,13 @@ export class SpProcessChart {
           funcRow.supplier = () => new Promise((resolve) => resolve(asyncFunctions));
           funcRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
           funcRow.selectChangeHandler = this.trace.selectChangeHandler;
-          funcRow.onThreadHandler = (useCache) => {
+          funcRow.onThreadHandler = (cacheFlag) => {
             let context = funcRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
             funcRow.canvasSave(context);
             (renders['func'] as FuncRender).renderMainThread(
               {
                 context: context,
-                useCache: useCache,
+                useCache: cacheFlag,
                 type: `func-${asyncFunctions[0].funName}-${it.pid}`,
               },
               funcRow
@@ -544,22 +539,22 @@ export class SpProcessChart {
           );
         };
         row.supplier = () =>
-          queryProcessMemData(mem.trackId).then((res) => {
-            let maxValue = Math.max(...res.map((it) => it.value || 0));
-            for (let j = 0; j < res.length; j++) {
-              res[j].maxValue = maxValue;
-              if (j == res.length - 1) {
-                res[j].duration = (TraceRow.range?.totalNS || 0) - (res[j].startTime || 0);
+          queryProcessMemData(mem.trackId).then((resultProcess) => {
+            let maxValue = Math.max(...resultProcess.map((it) => it.value || 0));
+            for (let j = 0; j < resultProcess.length; j++) {
+              resultProcess[j].maxValue = maxValue;
+              if (j == resultProcess.length - 1) {
+                resultProcess[j].duration = (TraceRow.range?.totalNS || 0) - (resultProcess[j].startTime || 0);
               } else {
-                res[j].duration = (res[j + 1].startTime || 0) - (res[j].startTime || 0);
+                resultProcess[j].duration = (resultProcess[j + 1].startTime || 0) - (resultProcess[j].startTime || 0);
               }
               if (j > 0) {
-                res[j].delta = (res[j].value || 0) - (res[j - 1].value || 0);
+                resultProcess[j].delta = (resultProcess[j].value || 0) - (resultProcess[j - 1].value || 0);
               } else {
-                res[j].delta = 0;
+                resultProcess[j].delta = 0;
               }
             }
-            return res;
+            return resultProcess;
           });
         row.onThreadHandler = (useCache) => {
           let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
diff --git a/ide/src/trace/component/chart/SpSdkChart.ts b/ide/src/trace/component/chart/SpSdkChart.ts
index 76eaef6e62cae3519a947f857fd811715a46bd99..006e951182bbef42ff7147513a16b9e8fa3b0937 100644
--- a/ide/src/trace/component/chart/SpSdkChart.ts
+++ b/ide/src/trace/component/chart/SpSdkChart.ts
@@ -28,6 +28,7 @@ import { CounterStruct, SdkCounterRender } from '../../database/ui-worker/Produc
 import { renders } from '../../database/ui-worker/ProcedureWorker.js';
 import { SdkSliceRender, SdkSliceStruct } from '../../database/ui-worker/ProduceWorkerSdkSlice.js';
 import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js';
+import {TabUtil} from "../trace/sheet/sdk/TabUtil.js";
 
 export class SpSdkChart {
   private trace: SpSystemTrace;
@@ -51,7 +52,7 @@ export class SpSdkChart {
           let showTypes = tableConfig.showType;
           for (let i = 0; i < showTypes.length; i++) {
             let showType = showTypes[i];
-            let type = this.getTableType(showType);
+            let type = TabUtil.getTableType(showType);
             if (type == 'counter') {
               let chartSql = this.createSql(
                 startTime,
@@ -116,23 +117,6 @@ export class SpSdkChart {
     return tablesMap;
   }
 
-  private getTableType(showType: any) {
-    let columns = showType.columns;
-    for (let i = 0; i < columns.length; i++) {
-      let column = columns[i];
-      let showType = column.showType;
-      if (showType != null) {
-        if (showType.indexOf(1) != -1) {
-          return 'counter';
-        }
-        if (showType.indexOf(2) != -1) {
-          return 'slice';
-        }
-      }
-    }
-    return '';
-  }
-
   private createSliceSql(startTime: number, tableName: string, columns: Array<any>, where?: string): string {
     let selectSql = 'select ';
     for (let i = 0; i < columns.length; i++) {
@@ -279,21 +263,21 @@ export class SpSdkChart {
   };
 
   private initNodeRow = (index: number, name: string) => {
-    let folder = TraceRow.skeleton();
-    folder.rowId = `Sdk-${index}`;
-    folder.index = index;
-    folder.rowType = TraceRow.ROW_TYPE_SDK;
-    folder.rowParentId = '';
-    folder.style.height = '40px';
-    folder.folder = true;
-    folder.name = `${name}`;
-    folder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    folder.selectChangeHandler = this.trace.selectChangeHandler;
-    folder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    folder.onThreadHandler = (useCache) => {
-      folder.canvasSave(this.trace.canvasPanelCtx!);
-      if (folder.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, folder.frame.width, folder.frame.height);
+    let sdkFolder = TraceRow.skeleton();
+    sdkFolder.rowId = `Sdk-${index}`;
+    sdkFolder.index = index;
+    sdkFolder.rowType = TraceRow.ROW_TYPE_SDK;
+    sdkFolder.rowParentId = '';
+    sdkFolder.style.height = '40px';
+    sdkFolder.folder = true;
+    sdkFolder.name = `${name}`;
+    sdkFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    sdkFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    sdkFolder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    sdkFolder.onThreadHandler = (useCache) => {
+      sdkFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (sdkFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, sdkFolder.frame.width, sdkFolder.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -301,33 +285,33 @@ export class SpSdkChart {
             useCache: useCache,
             type: ``,
           },
-          folder
+          sdkFolder
         );
       }
-      folder.canvasRestore(this.trace.canvasPanelCtx!);
+      sdkFolder.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    this.trace.rowsEL?.appendChild(folder);
-    return folder;
+    this.trace.rowsEL?.appendChild(sdkFolder);
+    return sdkFolder;
   };
 
   private initSecondaryRow = async (nodeRow: TraceRow<BaseStruct>, index: number, name: string) => {
-    let folder = TraceRow.skeleton();
-    folder.rowId = `Sdk-${name}-${index}`;
-    folder.index = index;
-    folder.rowType = TraceRow.ROW_TYPE_SDK;
-    folder.rowParentId = nodeRow.rowId;
-    folder.rowHidden = !nodeRow.expansion;
-    folder.style.height = '40px';
-    folder.folder = true;
-    folder.folderPaddingLeft = 30;
-    folder.name = `${name}`;
-    folder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    folder.selectChangeHandler = this.trace.selectChangeHandler;
-    folder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    folder.onThreadHandler = (useCache) => {
-      folder.canvasSave(this.trace.canvasPanelCtx!);
-      if (folder.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, folder.frame.width, folder.frame.height);
+    let sdkSecondFolder = TraceRow.skeleton();
+    sdkSecondFolder.rowId = `Sdk-${name}-${index}`;
+    sdkSecondFolder.index = index;
+    sdkSecondFolder.rowType = TraceRow.ROW_TYPE_SDK;
+    sdkSecondFolder.rowParentId = nodeRow.rowId;
+    sdkSecondFolder.rowHidden = !nodeRow.expansion;
+    sdkSecondFolder.style.height = '40px';
+    sdkSecondFolder.folder = true;
+    sdkSecondFolder.folderPaddingLeft = 30;
+    sdkSecondFolder.name = `${name}`;
+    sdkSecondFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    sdkSecondFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    sdkSecondFolder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    sdkSecondFolder.onThreadHandler = (useCache) => {
+      sdkSecondFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (sdkSecondFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, sdkSecondFolder.frame.width, sdkSecondFolder.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -335,13 +319,13 @@ export class SpSdkChart {
             useCache: useCache,
             type: ``,
           },
-          folder
+          sdkSecondFolder
         );
       }
-      folder.canvasRestore(this.trace.canvasPanelCtx!);
+      sdkSecondFolder.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    this.trace.rowsEL?.appendChild(folder);
-    return folder;
+    this.trace.rowsEL?.appendChild(sdkSecondFolder);
+    return sdkSecondFolder;
   };
 
   private initSlice = async (
diff --git a/ide/src/trace/component/chart/SpVirtualMemChart.ts b/ide/src/trace/component/chart/SpVirtualMemChart.ts
index fa52e71d49285c5bb60328d0c6ee99b8c8f62d8b..20efcb02661fc70b01c7e1861687091e34077f92 100644
--- a/ide/src/trace/component/chart/SpVirtualMemChart.ts
+++ b/ide/src/trace/component/chart/SpVirtualMemChart.ts
@@ -32,21 +32,21 @@ export class SpVirtualMemChart {
     if (array.length == 0) {
       return;
     }
-    let folder = TraceRow.skeleton();
-    folder.rowId = `VirtualMemory`;
-    folder.index = 0;
-    folder.rowType = TraceRow.ROW_TYPE_VIRTUAL_MEMORY_GROUP;
-    folder.rowParentId = '';
-    folder.folder = true;
-    folder.name = `Virtual Memory`;
-    folder.style.height = '40px';
-    folder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    folder.selectChangeHandler = this.trace.selectChangeHandler;
-    folder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
-    folder.onThreadHandler = (useCache) => {
-      folder.canvasSave(this.trace.canvasPanelCtx!);
-      if (folder.expansion) {
-        this.trace.canvasPanelCtx?.clearRect(0, 0, folder.frame.width, folder.frame.height);
+    let vmFolder = TraceRow.skeleton();
+    vmFolder.rowId = `VirtualMemory`;
+    vmFolder.index = 0;
+    vmFolder.rowType = TraceRow.ROW_TYPE_VIRTUAL_MEMORY_GROUP;
+    vmFolder.rowParentId = '';
+    vmFolder.folder = true;
+    vmFolder.name = `Virtual Memory`;
+    vmFolder.style.height = '40px';
+    vmFolder.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    vmFolder.selectChangeHandler = this.trace.selectChangeHandler;
+    vmFolder.supplier = () => new Promise<Array<any>>((resolve) => resolve([]));
+    vmFolder.onThreadHandler = (useCache) => {
+      vmFolder.canvasSave(this.trace.canvasPanelCtx!);
+      if (vmFolder.expansion) {
+        this.trace.canvasPanelCtx?.clearRect(0, 0, vmFolder.frame.width, vmFolder.frame.height);
       } else {
         (renders['empty'] as EmptyRender).renderMainThread(
           {
@@ -54,64 +54,64 @@ export class SpVirtualMemChart {
             useCache: useCache,
             type: ``,
           },
-          folder
+          vmFolder
         );
       }
-      folder.canvasRestore(this.trace.canvasPanelCtx!);
+      vmFolder.canvasRestore(this.trace.canvasPanelCtx!);
     };
-    this.trace.rowsEL?.appendChild(folder);
-    array.forEach((it, idx) => this.initVirtualMemoryRow(folder, it.id, it.name, idx));
+    this.trace.rowsEL?.appendChild(vmFolder);
+    array.forEach((it, idx) => this.initVirtualMemoryRow(vmFolder, it.id, it.name, idx));
   }
 
   initVirtualMemoryRow(folder: TraceRow<any>, id: number, name: string, idx: number) {
-    let row = TraceRow.skeleton<VirtualMemoryStruct>();
-    row.rowId = `${id}`;
-    row.rowType = TraceRow.ROW_TYPE_VIRTUAL_MEMORY;
-    row.rowParentId = folder.rowId;
-    row.rowHidden = !folder.expansion;
-    row.style.height = '40px';
-    row.name = `${name.substring(16)}`;
-    row.setAttribute('children', '');
-    row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-    row.selectChangeHandler = this.trace.selectChangeHandler;
-    row.supplier = () =>
-      queryVirtualMemoryData(id).then((res) => {
-        let maxValue = Math.max(...res.map((it) => it.value || 0));
-        for (let j = 0; j < res.length; j++) {
-          res[j].maxValue = maxValue;
-          if (j == res.length - 1) {
-            res[j].duration = (TraceRow.range?.totalNS || 0) - (res[j].startTime || 0);
+    let virtualMemoryRow = TraceRow.skeleton<VirtualMemoryStruct>();
+    virtualMemoryRow.rowId = `${id}`;
+    virtualMemoryRow.rowType = TraceRow.ROW_TYPE_VIRTUAL_MEMORY;
+    virtualMemoryRow.rowParentId = folder.rowId;
+    virtualMemoryRow.rowHidden = !folder.expansion;
+    virtualMemoryRow.style.height = '40px';
+    virtualMemoryRow.name = `${name.substring(16)}`;
+    virtualMemoryRow.setAttribute('children', '');
+    virtualMemoryRow.favoriteChangeHandler = this.trace.favoriteChangeHandler;
+    virtualMemoryRow.selectChangeHandler = this.trace.selectChangeHandler;
+    virtualMemoryRow.supplier = () =>
+      queryVirtualMemoryData(id).then((resultVm) => {
+        let maxValue = Math.max(...resultVm.map((it) => it.value || 0));
+        for (let j = 0; j < resultVm.length; j++) {
+          resultVm[j].maxValue = maxValue;
+          if (j == resultVm.length - 1) {
+            resultVm[j].duration = (TraceRow.range?.totalNS || 0) - (resultVm[j].startTime || 0);
           } else {
-            res[j].duration = (res[j + 1].startTime || 0) - (res[j].startTime || 0);
+            resultVm[j].duration = (resultVm[j + 1].startTime || 0) - (resultVm[j].startTime || 0);
           }
           if (j > 0) {
-            res[j].delta = (res[j].value || 0) - (res[j - 1].value || 0);
+            resultVm[j].delta = (resultVm[j].value || 0) - (resultVm[j - 1].value || 0);
           } else {
-            res[j].delta = 0;
+            resultVm[j].delta = 0;
           }
         }
-        return res;
+        return resultVm;
       });
-    row.focusHandler = () => {
+    virtualMemoryRow.focusHandler = () => {
       this.trace?.displayTip(
-        row,
+        virtualMemoryRow,
         VirtualMemoryStruct.hoverStruct,
         `<span>value:${VirtualMemoryStruct.hoverStruct?.value}</span>`
       );
     };
-    row.onThreadHandler = (useCache) => {
-      let context = row.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-      row.canvasSave(context);
+    virtualMemoryRow.onThreadHandler = (useCache) => {
+      let context = virtualMemoryRow.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
+      virtualMemoryRow.canvasSave(context);
       (renders['virtual-memory-cell'] as VirtualMemoryRender).renderMainThread(
         {
           context: context,
           useCache: useCache,
           type: `virtual-memory-cell-${id}`,
         },
-        row
+        virtualMemoryRow
       );
-      row.canvasRestore(context);
+      virtualMemoryRow.canvasRestore(context);
     };
-    folder.addChildTraceRow(row);
+    folder.addChildTraceRow(virtualMemoryRow);
   }
 }
diff --git a/ide/src/trace/component/schedulingAnalysis/SpSchedulingAnalysis.ts b/ide/src/trace/component/schedulingAnalysis/SpSchedulingAnalysis.ts
index 9f45c1d7354d52042cf298a0a909ba07a0d7a177..f84503f38408bb02f1e55965a5bb5e48eabfe7a1 100644
--- a/ide/src/trace/component/schedulingAnalysis/SpSchedulingAnalysis.ts
+++ b/ide/src/trace/component/schedulingAnalysis/SpSchedulingAnalysis.ts
@@ -63,11 +63,6 @@ export class SpSchedulingAnalysis extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host {
-            width: 100%;
-            height: 100%;
-            background: var(--dark-background5,#F6F6F6);
-        }
         .content{
             display: flex;
             flex-direction: column;
@@ -85,6 +80,11 @@ export class SpSchedulingAnalysis extends BaseElement {
             height: calc(100% - 55px);
             background-color: var(--dark-background,#FFFFFF);
         }
+        :host {
+            width: 100%;
+            height: 100%;
+            background: var(--dark-background5,#F6F6F6);
+        }
         .interval{
             height: 55px;
             width: 100%;
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts
index 212b3f5a87aee06121a148a947d217dbbf303438..22cd28762917885b78790e561b4609b40a4e7bc9 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts
@@ -143,7 +143,7 @@ export class TabCpuAnalysis extends BaseElement {
   }
 
   queryLogicWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let cpuAnalysisTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
       option,
@@ -154,7 +154,7 @@ export class TabCpuAnalysis extends BaseElement {
       undefined,
       handler
     );
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - cpuAnalysisTime;
     info(log, durTime);
   }
 
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts
index 418cd1066ce1bb41e47d0ec37a549e7c7ad5581b..396f9e152dc60fca9cea636bf724567f3fafa856 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts
@@ -30,24 +30,24 @@ import { TableNoData } from './TableNoData.js';
 @element('tab-cpu-details-frequency')
 export class TabCpuDetailsFrequency extends BaseElement {
   private tableNoData: TableNoData | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private cpuDetailsFrequencyProgress: LitProgressBar | null | undefined;
   traceChange: boolean = false;
-  private pie: LitChartPie | null | undefined;
-  private table: LitTable | null | undefined;
+  private cpuDetailsFrequencyPie: LitChartPie | null | undefined;
+  private cpuDetailsFrequencyUsageTbl: LitTable | null | undefined;
   private tabCpuDetailsThreads: TabCpuDetailsThreads | null | undefined;
   private cpu: number = 0;
-  private data: Array<any> = [];
-  private sortColumn: string = '';
+  private cpuDetailsFrequencyData: Array<any> = [];
+  private cpuDetailsFrequencySortColumn: string = '';
   private sortType: number = 0;
 
   initElements(): void {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
+    this.cpuDetailsFrequencyProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.cpuDetailsFrequencyPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.cpuDetailsFrequencyUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
     this.tabCpuDetailsThreads = this.shadowRoot!.querySelector<TabCpuDetailsThreads>('#tab-cpu-details-threads');
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.cpuDetailsFrequencyUsageTbl!.addEventListener('row-click', (evt: any) => {
       let data = evt.detail.data;
       data.isSelected = true;
       // @ts-ignore
@@ -57,13 +57,13 @@ export class TabCpuDetailsFrequency extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt: any) => {
-      this.sortColumn = evt.detail.key;
+    this.cpuDetailsFrequencyUsageTbl!.addEventListener('column-click', (evt: any) => {
+      this.cpuDetailsFrequencySortColumn = evt.detail.key;
       this.sortType = evt.detail.sort;
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.cpuDetailsFrequencyUsageTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -71,7 +71,7 @@ export class TabCpuDetailsFrequency extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.cpuDetailsFrequencyPie?.showHover();
     });
   }
 
@@ -84,17 +84,17 @@ export class TabCpuDetailsFrequency extends BaseElement {
     if (this.traceChange) {
       return;
     }
-    this.progress!.loading = true;
+    this.cpuDetailsFrequencyProgress!.loading = true;
     this.queryLoginWorker(`scheduling-${type}`, 'query Cpu Frequency Analysis Time:', (res) => {
       this.traceChange = true;
-      this.progress!.loading = false;
-      this.data = res.get(cpu) || [];
-      this.data = getDataNo(this.data);
-      this.tableNoData!.noData = this.data.length == 0;
-      this.noData(this.data.length == 0);
-      this.pie!.config = {
+      this.cpuDetailsFrequencyProgress!.loading = false;
+      this.cpuDetailsFrequencyData = res.get(cpu) || [];
+      this.cpuDetailsFrequencyData = getDataNo(this.cpuDetailsFrequencyData);
+      this.tableNoData!.noData = this.cpuDetailsFrequencyData.length == 0;
+      this.noData(this.cpuDetailsFrequencyData.length == 0);
+      this.cpuDetailsFrequencyPie!.config = {
         appendPadding: 0,
-        data: this.data,
+        data: this.cpuDetailsFrequencyData,
         angleField: 'sum',
         colorField: 'value',
         radius: 1,
@@ -114,9 +114,9 @@ export class TabCpuDetailsFrequency extends BaseElement {
         },
         hoverHandler: (data) => {
           if (data) {
-            this.table!.setCurrentHover(data);
+            this.cpuDetailsFrequencyUsageTbl!.setCurrentHover(data);
           } else {
-            this.table!.mouseOut();
+            this.cpuDetailsFrequencyUsageTbl!.mouseOut();
           }
         },
         angleClick: (it) => {
@@ -130,15 +130,15 @@ export class TabCpuDetailsFrequency extends BaseElement {
           },
         ],
       };
-      if (this.sortColumn != '') {
+      if (this.cpuDetailsFrequencySortColumn != '') {
         this.sortByColumn({
-          key: this.sortColumn,
+          key: this.cpuDetailsFrequencySortColumn,
           sort: this.sortType,
         });
       } else {
-        this.table!.recycleDataSource = this.data;
+        this.cpuDetailsFrequencyUsageTbl!.recycleDataSource = this.cpuDetailsFrequencyData;
       }
-      this.table?.reMeauseHeight();
+      this.cpuDetailsFrequencyUsageTbl?.reMeauseHeight();
     });
   }
 
@@ -149,8 +149,8 @@ export class TabCpuDetailsFrequency extends BaseElement {
 
   clearData() {
     this.traceChange = false;
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.cpuDetailsFrequencyPie!.dataSource = [];
+    this.cpuDetailsFrequencyUsageTbl!.recycleDataSource = [];
     this.shadowRoot!.querySelector<HTMLDivElement>('.d-box')!.style.display = 'flex';
     this.tabCpuDetailsThreads!.setShow = false;
     this.noData(false);
@@ -165,7 +165,7 @@ export class TabCpuDetailsFrequency extends BaseElement {
   }
 
   queryLoginWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let cpuDetailsFrequencyTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
       option,
@@ -176,24 +176,24 @@ export class TabCpuDetailsFrequency extends BaseElement {
       undefined,
       handler
     );
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - cpuDetailsFrequencyTime;
     info(log, durTime);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(cpuDetailsFrequencyProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[cpuDetailsFrequencyProperty]) - parseFloat(a[cpuDetailsFrequencyProperty])
+            : parseFloat(a[cpuDetailsFrequencyProperty]) - parseFloat(b[cpuDetailsFrequencyProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[cpuDetailsFrequencyProperty].toString().localeCompare(a[cpuDetailsFrequencyProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[cpuDetailsFrequencyProperty].toString().localeCompare(b[cpuDetailsFrequencyProperty].toString());
           }
         }
       };
@@ -201,27 +201,31 @@ export class TabCpuDetailsFrequency extends BaseElement {
 
     if (detail.key === 'min') {
       detail.key = 'minValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsFrequencyData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'max') {
       detail.key = 'maxValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsFrequencyData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'avg') {
       detail.key = 'avgValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsFrequencyData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'sumTimeStr') {
       detail.key = 'sum';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsFrequencyData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'value' || detail.key === 'ratio' || detail.key === 'index') {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsFrequencyData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.cpuDetailsFrequencyData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.cpuDetailsFrequencyUsageTbl!.recycleDataSource = this.cpuDetailsFrequencyData;
   }
 
   initHtml(): string {
     return `
         <style>
+        #loading{
+            height: 1px;
+            width: 100%
+        }
         :host {
             width: 100%;
             height: 100%;
@@ -241,15 +245,15 @@ export class TabCpuDetailsFrequency extends BaseElement {
         .table-box{
             width: 60%;
             max-height: calc(100vh - 165px);
+            padding: 10px;
             border: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
-            padding: 10px;
         }
         #chart-pie{
             height: 360px;
         }
         </style>
-        <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
+        <lit-progress-bar id="loading"></lit-progress-bar>
         <div class="d-box">
             <div class="chart-box">
                 <div style="text-align: center">Statistics By Duration</div>
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
index 95f4468f88fa0b8b362e6516b4172ea4f0aec447..070b5be75de27711c237fbc84fefb16fadf491a4 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
@@ -29,21 +29,21 @@ import { pieChartColors } from '../../../base-ui/chart/pie/LitChartPieData.js';
 @element('tab-cpu-details-idle')
 export class TabCpuDetailsIdle extends BaseElement {
   private tableNoData: TableNoData | null | undefined;
-  private table: LitTable | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private cpuDetailsLdlUsageTbl: LitTable | null | undefined;
+  private cpuDetailsLdlProgress: LitProgressBar | null | undefined;
   traceChange: boolean = false;
-  private pie: LitChartPie | null | undefined;
-  private data: Array<any> = [];
-  private sortColumn: string = '';
+  private cpuDetailsLdlPie: LitChartPie | null | undefined;
+  private cpuDetailsLdlData: Array<any> = [];
+  private cpuDetailsLdlSortColumn: string = '';
   private sortType: number = 0;
 
   initElements(): void {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
+    this.cpuDetailsLdlProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.cpuDetailsLdlPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.cpuDetailsLdlUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.cpuDetailsLdlUsageTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data;
       data.isSelected = true;
@@ -54,13 +54,13 @@ export class TabCpuDetailsIdle extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt: any) => {
-      this.sortColumn = evt.detail.key;
+    this.cpuDetailsLdlUsageTbl!.addEventListener('column-click', (evt: any) => {
+      this.cpuDetailsLdlSortColumn = evt.detail.key;
       this.sortType = evt.detail.sort;
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.cpuDetailsLdlUsageTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -68,7 +68,7 @@ export class TabCpuDetailsIdle extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.cpuDetailsLdlPie?.showHover();
     });
   }
 
@@ -80,17 +80,17 @@ export class TabCpuDetailsIdle extends BaseElement {
     if (this.traceChange) {
       return;
     }
-    this.progress!.loading = true;
+    this.cpuDetailsLdlProgress!.loading = true;
     this.queryLoginWorker(`scheduling-${type}`, 'query Cpu Frequency Analysis Time:', (res) => {
       this.traceChange = true;
-      this.progress!.loading = false;
-      this.data = res.get(cpu) || [];
-      this.data = getDataNo(this.data);
-      this.tableNoData!.noData = this.data.length == 0;
-      this.noData(this.data.length == 0);
-      this.pie!.config = {
+      this.cpuDetailsLdlProgress!.loading = false;
+      this.cpuDetailsLdlData = res.get(cpu) || [];
+      this.cpuDetailsLdlData = getDataNo(this.cpuDetailsLdlData);
+      this.tableNoData!.noData = this.cpuDetailsLdlData.length == 0;
+      this.noData(this.cpuDetailsLdlData.length == 0);
+      this.cpuDetailsLdlPie!.config = {
         appendPadding: 0,
-        data: this.data,
+        data: this.cpuDetailsLdlData,
         angleField: 'sum',
         colorField: 'value',
         radius: 1,
@@ -105,9 +105,9 @@ export class TabCpuDetailsIdle extends BaseElement {
         },
         hoverHandler: (data) => {
           if (data) {
-            this.table!.setCurrentHover(data);
+            this.cpuDetailsLdlUsageTbl!.setCurrentHover(data);
           } else {
-            this.table!.mouseOut();
+            this.cpuDetailsLdlUsageTbl!.mouseOut();
           }
         },
         tip: (obj) => {
@@ -127,15 +127,15 @@ export class TabCpuDetailsIdle extends BaseElement {
           },
         ],
       };
-      if (this.sortColumn != '') {
+      if (this.cpuDetailsLdlSortColumn != '') {
         this.sortByColumn({
-          key: this.sortColumn,
+          key: this.cpuDetailsLdlSortColumn,
           sort: this.sortType,
         });
       } else {
-        this.table!.recycleDataSource = this.data;
+        this.cpuDetailsLdlUsageTbl!.recycleDataSource = this.cpuDetailsLdlData;
       }
-      this.table?.reMeauseHeight();
+      this.cpuDetailsLdlUsageTbl?.reMeauseHeight();
     });
   }
 
@@ -146,13 +146,13 @@ export class TabCpuDetailsIdle extends BaseElement {
 
   clearData() {
     this.traceChange = false;
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.cpuDetailsLdlPie!.dataSource = [];
+    this.cpuDetailsLdlUsageTbl!.recycleDataSource = [];
     this.noData(false);
   }
 
   queryLoginWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let cpuDetailsldleTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
       option,
@@ -163,24 +163,24 @@ export class TabCpuDetailsIdle extends BaseElement {
       undefined,
       handler
     );
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - cpuDetailsldleTime;
     info(log, durTime);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(cpuDetailsLdlProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[cpuDetailsLdlProperty]) - parseFloat(a[cpuDetailsLdlProperty])
+            : parseFloat(a[cpuDetailsLdlProperty]) - parseFloat(b[cpuDetailsLdlProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[cpuDetailsLdlProperty].toString().localeCompare(a[cpuDetailsLdlProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[cpuDetailsLdlProperty].toString().localeCompare(b[cpuDetailsLdlProperty].toString());
           }
         }
       };
@@ -188,32 +188,27 @@ export class TabCpuDetailsIdle extends BaseElement {
 
     if (detail.key === 'min') {
       detail.key = 'minValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLdlData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'max') {
       detail.key = 'maxValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLdlData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'avg') {
       detail.key = 'avgValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLdlData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'sumTimeStr') {
       detail.key = 'sum';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLdlData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'value' || detail.key === 'ratio' || detail.key === 'index') {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLdlData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.cpuDetailsLdlData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.cpuDetailsLdlUsageTbl!.recycleDataSource = this.cpuDetailsLdlData;
   }
 
   initHtml(): string {
     return `
         <style>
-        :host {
-            width: 100%;
-            height: 100%;
-            background-color: var(--dark-background,#FFFFFF);
-        }
         .d-box{
             display: flex;
             margin: 20px;
@@ -225,6 +220,11 @@ export class TabCpuDetailsIdle extends BaseElement {
         #tb-cpu-usage{
             height: 100%;
         }
+        :host {
+            width: 100%;
+            height: 100%;
+            background-color: var(--dark-background,#FFFFFF);
+        }
         .table-box{
             width: 60%;
             max-height: calc(100vh - 165px);
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts
index e974f788b71a8b26678b15b2503dfa7ad6b67321..ee39bdff856d3c08bdf933b630592b64388298bf 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts
@@ -28,21 +28,21 @@ import { TableNoData } from './TableNoData.js';
 @element('tab-cpu-details-irq')
 export class TabCpuDetailsIrq extends BaseElement {
   private tableNoData: TableNoData | null | undefined;
-  private table: LitTable | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private cpuDetailsLrqUsageTbl: LitTable | null | undefined;
+  private cpuDetailsLrqProgress: LitProgressBar | null | undefined;
   traceChange: boolean = false;
-  private pie: LitChartPie | null | undefined;
-  private data: Array<any> = [];
-  private sortColumn: string = '';
+  private cpuDetailsLrqPie: LitChartPie | null | undefined;
+  private cpuDetailsLrqData: Array<any> = [];
+  private cpuDetailsLrqSortColumn: string = '';
   private sortType: number = 0;
 
   initElements(): void {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
+    this.cpuDetailsLrqProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.cpuDetailsLrqPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.cpuDetailsLrqUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.cpuDetailsLrqUsageTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data;
       data.isSelected = true;
@@ -53,13 +53,13 @@ export class TabCpuDetailsIrq extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt: any) => {
-      this.sortColumn = evt.detail.key;
+    this.cpuDetailsLrqUsageTbl!.addEventListener('column-click', (evt: any) => {
+      this.cpuDetailsLrqSortColumn = evt.detail.key;
       this.sortType = evt.detail.sort;
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.cpuDetailsLrqUsageTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -67,7 +67,7 @@ export class TabCpuDetailsIrq extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.cpuDetailsLrqPie?.showHover();
     });
   }
 
@@ -79,17 +79,17 @@ export class TabCpuDetailsIrq extends BaseElement {
     if (this.traceChange) {
       return;
     }
-    this.progress!.loading = true;
+    this.cpuDetailsLrqProgress!.loading = true;
     this.queryLoginWorker(`scheduling-${type}`, 'query Cpu Frequency Analysis Time:', (res) => {
       this.traceChange = true;
-      this.progress!.loading = false;
-      this.data = res.get(cpu) || [];
-      this.data = getDataNo(this.data);
-      this.tableNoData!.noData = this.data.length == 0;
-      this.noData(this.data.length == 0);
-      this.pie!.config = {
+      this.cpuDetailsLrqProgress!.loading = false;
+      this.cpuDetailsLrqData = res.get(cpu) || [];
+      this.cpuDetailsLrqData = getDataNo(this.cpuDetailsLrqData);
+      this.tableNoData!.noData = this.cpuDetailsLrqData.length == 0;
+      this.noData(this.cpuDetailsLrqData.length == 0);
+      this.cpuDetailsLrqPie!.config = {
         appendPadding: 0,
-        data: this.data,
+        data: this.cpuDetailsLrqData,
         angleField: 'sum',
         colorField: 'value',
         radius: 1,
@@ -110,9 +110,9 @@ export class TabCpuDetailsIrq extends BaseElement {
         },
         hoverHandler: (data) => {
           if (data) {
-            this.table!.setCurrentHover(data);
+            this.cpuDetailsLrqUsageTbl!.setCurrentHover(data);
           } else {
-            this.table!.mouseOut();
+            this.cpuDetailsLrqUsageTbl!.mouseOut();
           }
         },
         interactions: [
@@ -121,15 +121,15 @@ export class TabCpuDetailsIrq extends BaseElement {
           },
         ],
       };
-      if (this.sortColumn != '') {
+      if (this.cpuDetailsLrqSortColumn != '') {
         this.sortByColumn({
-          key: this.sortColumn,
+          key: this.cpuDetailsLrqSortColumn,
           sort: this.sortType,
         });
       } else {
-        this.table!.recycleDataSource = this.data;
+        this.cpuDetailsLrqUsageTbl!.recycleDataSource = this.cpuDetailsLrqData;
       }
-      this.table?.reMeauseHeight();
+      this.cpuDetailsLrqUsageTbl?.reMeauseHeight();
     });
   }
 
@@ -140,13 +140,13 @@ export class TabCpuDetailsIrq extends BaseElement {
 
   clearData() {
     this.traceChange = false;
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.cpuDetailsLrqPie!.dataSource = [];
+    this.cpuDetailsLrqUsageTbl!.recycleDataSource = [];
     this.noData(false);
   }
 
   queryLoginWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let cpuDetailsLrqTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
       option,
@@ -157,24 +157,24 @@ export class TabCpuDetailsIrq extends BaseElement {
       undefined,
       handler
     );
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - cpuDetailsLrqTime;
     info(log, durTime);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(cpuDetailsLrqProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[cpuDetailsLrqProperty]) - parseFloat(a[cpuDetailsLrqProperty])
+            : parseFloat(a[cpuDetailsLrqProperty]) - parseFloat(b[cpuDetailsLrqProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[cpuDetailsLrqProperty].toString().localeCompare(a[cpuDetailsLrqProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[cpuDetailsLrqProperty].toString().localeCompare(b[cpuDetailsLrqProperty].toString());
           }
         }
       };
@@ -182,32 +182,27 @@ export class TabCpuDetailsIrq extends BaseElement {
 
     if (detail.key === 'min') {
       detail.key = 'minValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'max') {
       detail.key = 'maxValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'avg') {
       detail.key = 'avgValue';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'sumTimeStr') {
       detail.key = 'sum';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'ratio' || detail.key === 'index') {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.cpuDetailsLrqData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.cpuDetailsLrqUsageTbl!.recycleDataSource = this.cpuDetailsLrqData;
   }
 
   initHtml(): string {
     return `
         <style>
-        :host {
-            width: 100%;
-            height: 100%;
-            background-color: var(--dark-background,#FFFFFF);
-        }
         .d-box{
             display: flex;
             margin: 20px;
@@ -226,6 +221,11 @@ export class TabCpuDetailsIrq extends BaseElement {
             border-radius: 5px;
             padding: 10px;
         }
+        :host {
+            width: 100%;
+            height: 100%;
+            background-color: var(--dark-background,#FFFFFF);
+        }
         #chart-pie{
             height: 360px;
         }
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts
index b946958494f9a477149509943870bf57b3d5e5a4..5d7b9513d68029db93d438feb6716ed0dc2b6ba6 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts
@@ -26,18 +26,18 @@ import { TableNoData } from './TableNoData.js';
 @element('tab-cpu-details-threads')
 export class TabCpuDetailsThreads extends BaseElement {
   private tableNoData: TableNoData | null | undefined;
-  private table: LitTable | null | undefined;
+  private cpuDetailsThreadUsageTbl: LitTable | null | undefined;
   private progress: LitProgressBar | null | undefined;
-  private pie: LitChartPie | null | undefined;
+  private cpuDetailsThreadPie: LitChartPie | null | undefined;
   private data: Array<any> = [];
-  private sortColumn: string = '';
+  private cpuDetailsThreadSortColumn: string = '';
   private sortType: number = 0;
 
   initElements(): void {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
     this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
+    this.cpuDetailsThreadPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.cpuDetailsThreadUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
 
     this.shadowRoot!.querySelector<HTMLDivElement>('.go-back')!.onclick = (e) => {
       if (!this.progress!.loading) {
@@ -46,7 +46,7 @@ export class TabCpuDetailsThreads extends BaseElement {
       }
     };
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.cpuDetailsThreadUsageTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data;
       data.isSelected = true;
@@ -57,13 +57,13 @@ export class TabCpuDetailsThreads extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt: any) => {
-      this.sortColumn = evt.detail.key;
+    this.cpuDetailsThreadUsageTbl!.addEventListener('column-click', (evt: any) => {
+      this.cpuDetailsThreadSortColumn = evt.detail.key;
       this.sortType = evt.detail.sort;
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.cpuDetailsThreadUsageTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -71,7 +71,7 @@ export class TabCpuDetailsThreads extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.cpuDetailsThreadPie?.showHover();
     });
   }
 
@@ -104,7 +104,7 @@ export class TabCpuDetailsThreads extends BaseElement {
     this.data = getDataNo(this.data);
     this.tableNoData!.noData = this.data.length == 0;
     this.noData(this.data.length == 0);
-    this.pie!.config = {
+    this.cpuDetailsThreadPie!.config = {
       appendPadding: 0,
       data: this.data,
       angleField: 'dur',
@@ -126,9 +126,9 @@ export class TabCpuDetailsThreads extends BaseElement {
       },
       hoverHandler: (data) => {
         if (data) {
-          this.table!.setCurrentHover(data);
+          this.cpuDetailsThreadUsageTbl!.setCurrentHover(data);
         } else {
-          this.table!.mouseOut();
+          this.cpuDetailsThreadUsageTbl!.mouseOut();
         }
       },
       interactions: [
@@ -137,12 +137,12 @@ export class TabCpuDetailsThreads extends BaseElement {
         },
       ],
     };
-    if (this.sortColumn != '') {
-      this.sortByColumn({ key: this.sortColumn, sort: this.sortType });
+    if (this.cpuDetailsThreadSortColumn != '') {
+      this.sortByColumn({ key: this.cpuDetailsThreadSortColumn, sort: this.sortType });
     } else {
-      this.table!.recycleDataSource = this.data;
+      this.cpuDetailsThreadUsageTbl!.recycleDataSource = this.data;
     }
-    this.table?.reMeauseHeight();
+    this.cpuDetailsThreadUsageTbl?.reMeauseHeight();
   }
 
   noData(value: boolean) {
@@ -151,25 +151,25 @@ export class TabCpuDetailsThreads extends BaseElement {
   }
 
   clearData() {
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.cpuDetailsThreadPie!.dataSource = [];
+    this.cpuDetailsThreadUsageTbl!.recycleDataSource = [];
     this.noData(false);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(cpuDetailsThreadProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[cpuDetailsThreadProperty]) - parseFloat(a[cpuDetailsThreadProperty])
+            : parseFloat(a[cpuDetailsThreadProperty]) - parseFloat(b[cpuDetailsThreadProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[cpuDetailsThreadProperty].toString().localeCompare(a[cpuDetailsThreadProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[cpuDetailsThreadProperty].toString().localeCompare(b[cpuDetailsThreadProperty].toString());
           }
         }
       };
@@ -189,7 +189,7 @@ export class TabCpuDetailsThreads extends BaseElement {
     } else {
       this.data.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.cpuDetailsThreadUsageTbl!.recycleDataSource = this.data;
   }
 
   initHtml(): string {
@@ -215,6 +215,17 @@ export class TabCpuDetailsThreads extends BaseElement {
         #tb-cpu-usage{
             height: 100%;
         }
+        .back-box{
+            background-color: var(--bark-expansion,#0C65D1);
+            border-radius: 5px;
+            color: #fff;
+            display: flex;
+            margin-right: 10px;
+            width: 40px;
+            height: 20px;
+            justify-content: center;
+            align-items: center;
+        }
         .table-box{
             width: 60%;
             max-height: calc(100vh - 165px);
@@ -230,17 +241,6 @@ export class TabCpuDetailsThreads extends BaseElement {
             align-items: center;
             cursor: pointer;
         }
-        .back-box{
-            background-color: var(--bark-expansion,#0C65D1);
-            border-radius: 5px;
-            color: #fff;
-            display: flex;
-            margin-right: 10px;
-            width: 40px;
-            height: 20px;
-            justify-content: center;
-            align-items: center;
-        }
         </style>
         <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
         <div class="d-box">
diff --git a/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.ts b/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.ts
index 4136fec0e5e590d1e37f1e6f7a6a95f6d1feff8b..0d5353bc7fc8237f5bfb556315faa559b5dd293f 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabThreadAnalysis.ts
@@ -138,11 +138,6 @@ export class TabThreadAnalysis extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host {
-            width: 100%;
-            height: 100%;
-            background: var(--dark-background5,#F6F6F6);
-        }
         .tag_bt{
             height: 45px;
             border-radius: 10px;
@@ -153,6 +148,11 @@ export class TabThreadAnalysis extends BaseElement {
             background-color: var(--dark-background5,#FFFFFF);
             cursor: pointer;
         }
+        :host {
+            width: 100%;
+            height: 100%;
+            background: var(--dark-background5,#F6F6F6);
+        }
         .tab_click{
             height: 45px;
             border-radius: 10px;
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts
index 9ca785a0432acf11f47ad007ebfe42c6354c40b0..0f89fab00f7b809325f2b8a2ad775d8326078f6f 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts
@@ -32,33 +32,33 @@ import { getProbablyTime } from '../../database/logic-worker/ProcedureLogicWorke
 export class Top20FrequencyThread extends BaseElement {
   static threads: { id: number; tid: number; name: string }[] | undefined;
   traceChange: boolean = false;
-  private table: LitTable | null | undefined;
+  private frequencyThreadTbl: LitTable | null | undefined;
   private threadSelect: LitSelect | null | undefined;
-  private pie: LitChartPie | null | undefined;
+  private frequencyThreadPie: LitChartPie | null | undefined;
   private currentThread: HTMLDivElement | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private frequencyThreadProgress: LitProgressBar | null | undefined;
   private nodata: TableNoData | null | undefined;
   private currentTid: number = 0;
-  private data: Array<any> = [];
+  private frequencyThreadData: Array<any> = [];
   private sortColumn: string = '';
   private sortType: number = 0;
 
   initElements(): void {
     this.nodata = this.shadowRoot!.querySelector<TableNoData>('#nodata');
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-process-thread-count');
+    this.frequencyThreadProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.frequencyThreadTbl = this.shadowRoot!.querySelector<LitTable>('#tb-process-thread-count');
     this.currentThread = this.shadowRoot!.querySelector<HTMLDivElement>('#current_thread');
     this.threadSelect = this.shadowRoot!.querySelector<LitSelect>('#thread_select');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
+    this.frequencyThreadPie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
 
     this.threadSelect!.onchange = (e) => {
       this.currentThread!.textContent = (e as any).detail.text;
       this.currentTid = parseInt((e as any).detail.value);
-      this.progress!.loading = true;
+      this.frequencyThreadProgress!.loading = true;
       this.queryData();
     };
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.frequencyThreadTbl!.addEventListener('row-click', (evt: any) => {
       let data = evt.detail.data;
       data.isSelected = true;
       if ((evt.detail as any).callBack) {
@@ -66,13 +66,13 @@ export class Top20FrequencyThread extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt: any) => {
+    this.frequencyThreadTbl!.addEventListener('column-click', (evt: any) => {
       this.sortColumn = evt.detail.key;
       this.sortType = evt.detail.sort;
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.frequencyThreadTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -80,24 +80,24 @@ export class Top20FrequencyThread extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.frequencyThreadPie?.showHover();
     });
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(frequencyThreadProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[frequencyThreadProperty]) - parseFloat(a[frequencyThreadProperty])
+            : parseFloat(a[frequencyThreadProperty]) - parseFloat(b[frequencyThreadProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[frequencyThreadProperty].toString().localeCompare(a[frequencyThreadProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[frequencyThreadProperty].toString().localeCompare(b[frequencyThreadProperty].toString());
           }
         }
       };
@@ -105,24 +105,24 @@ export class Top20FrequencyThread extends BaseElement {
 
     if (detail.key === 'timeStr') {
       detail.key = 'time';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.frequencyThreadData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (detail.key === 'no' || detail.key === 'cpu' || detail.key === 'freq' || detail.key === 'ratio') {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.frequencyThreadData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.frequencyThreadData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.frequencyThreadTbl!.recycleDataSource = this.frequencyThreadData;
   }
 
   async init() {
     if (!this.traceChange) {
-      if (this.table!.recycleDataSource.length > 0) {
-        this.table?.reMeauseHeight();
+      if (this.frequencyThreadTbl!.recycleDataSource.length > 0) {
+        this.frequencyThreadTbl?.reMeauseHeight();
       }
       return;
     }
     this.traceChange = false;
-    this.progress!.loading = true;
+    this.frequencyThreadProgress!.loading = true;
     if (Top20FrequencyThread.threads === undefined) {
       Top20FrequencyThread.threads = (await queryThreads()) || [];
       this.nodata!.noData = Top20FrequencyThread.threads === undefined || Top20FrequencyThread.threads.length === 0;
@@ -152,17 +152,17 @@ export class Top20FrequencyThread extends BaseElement {
       (res as any[]).map((it: any, index: number) => {
         it.no = index + 1;
       });
-      this.data = res;
+      this.frequencyThreadData = res;
       if (this.sortColumn != '') {
         this.sortByColumn({
           key: this.sortColumn,
           sort: this.sortType,
         });
       } else {
-        this.table!.recycleDataSource = res;
+        this.frequencyThreadTbl!.recycleDataSource = res;
       }
-      this.table!.reMeauseHeight();
-      this.pie!.config = {
+      this.frequencyThreadTbl!.reMeauseHeight();
+      this.frequencyThreadPie!.config = {
         appendPadding: 10,
         data: this.getPieChartData(res),
         angleField: 'time',
@@ -182,9 +182,9 @@ export class Top20FrequencyThread extends BaseElement {
         },
         hoverHandler: (data) => {
           if (data) {
-            this.table!.setCurrentHover(data);
+            this.frequencyThreadTbl!.setCurrentHover(data);
           } else {
-            this.table!.mouseOut();
+            this.frequencyThreadTbl!.mouseOut();
           }
         },
         interactions: [
@@ -193,7 +193,7 @@ export class Top20FrequencyThread extends BaseElement {
           },
         ],
       };
-      this.progress!.loading = false;
+      this.frequencyThreadProgress!.loading = false;
       this.shadowRoot!.querySelector('#tb_container')!.scrollTop = 0;
     });
   }
@@ -227,14 +227,14 @@ export class Top20FrequencyThread extends BaseElement {
   clearData() {
     this.traceChange = true;
     this.threadSelect!.innerHTML = '';
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.frequencyThreadPie!.dataSource = [];
+    this.frequencyThreadTbl!.recycleDataSource = [];
   }
 
   queryLogicWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let frequencyThreadTime = new Date().getTime();
     procedurePool.submitWithName('logic1', option, { tid: this.currentTid }, undefined, handler);
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - frequencyThreadTime;
     info(log, durTime);
   }
 
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts b/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts
index 9fc715b158aba93b228063ac7fccc4f5044531ac..dc60a5ded1251c1125d8907927291c274ef9663d 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts
@@ -26,19 +26,19 @@ import { TableNoData } from './TableNoData.js';
 @element('top20-process-switch-count')
 export class Top20ProcessSwitchCount extends BaseElement {
   traceChange: boolean = false;
-  private table: LitTable | null | undefined;
-  private pie: LitChartPie | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private processSwitchCountTbl: LitTable | null | undefined;
+  private processSwitchCountPie: LitChartPie | null | undefined;
+  private processSwitchCountProgress: LitProgressBar | null | undefined;
   private nodata: TableNoData | null | undefined;
-  private data: Array<any> = [];
+  private processSwitchCountData: Array<any> = [];
 
   initElements(): void {
     this.nodata = this.shadowRoot!.querySelector<TableNoData>('#nodata');
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-process-switch-count');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
+    this.processSwitchCountProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.processSwitchCountTbl = this.shadowRoot!.querySelector<LitTable>('#tb-process-switch-count');
+    this.processSwitchCountPie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.processSwitchCountTbl!.addEventListener('row-click', (evt: any) => {
       let data = evt.detail.data;
       data.isSelected = true;
       // @ts-ignore
@@ -48,11 +48,11 @@ export class Top20ProcessSwitchCount extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt) => {
+    this.processSwitchCountTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.processSwitchCountTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -60,25 +60,25 @@ export class Top20ProcessSwitchCount extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.processSwitchCountPie?.showHover();
     });
   }
 
   init() {
     if (!this.traceChange) {
-      if (this.table!.recycleDataSource.length > 0) {
-        this.table?.reMeauseHeight();
+      if (this.processSwitchCountTbl!.recycleDataSource.length > 0) {
+        this.processSwitchCountTbl?.reMeauseHeight();
       }
       return;
     }
     this.traceChange = false;
-    this.progress!.loading = true;
+    this.processSwitchCountProgress!.loading = true;
     this.queryLogicWorker('scheduling-Process SwitchCount', 'query Process Switch Count Analysis Time:', (res) => {
       this.nodata!.noData = res === undefined || res.length === 0;
-      this.table!.recycleDataSource = res;
-      this.data = res;
-      this.table?.reMeauseHeight();
-      this.pie!.config = {
+      this.processSwitchCountTbl!.recycleDataSource = res;
+      this.processSwitchCountData = res;
+      this.processSwitchCountTbl?.reMeauseHeight();
+      this.processSwitchCountPie!.config = {
         appendPadding: 10,
         data: res,
         angleField: 'switchCount',
@@ -97,9 +97,9 @@ export class Top20ProcessSwitchCount extends BaseElement {
         },
         hoverHandler: (data) => {
           if (data) {
-            this.table!.setCurrentHover(data);
+            this.processSwitchCountTbl!.setCurrentHover(data);
           } else {
-            this.table!.mouseOut();
+            this.processSwitchCountTbl!.mouseOut();
           }
         },
         interactions: [
@@ -108,48 +108,48 @@ export class Top20ProcessSwitchCount extends BaseElement {
           },
         ],
       };
-      this.progress!.loading = false;
+      this.processSwitchCountProgress!.loading = false;
     });
   }
 
   clearData() {
     this.traceChange = true;
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.processSwitchCountPie!.dataSource = [];
+    this.processSwitchCountTbl!.recycleDataSource = [];
   }
 
   queryLogicWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let processSwitchCountTime = new Date().getTime();
     procedurePool.submitWithName('logic1', option, {}, undefined, handler);
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - processSwitchCountTime;
     info(log, durTime);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(processSwitchCountProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[processSwitchCountProperty]) - parseFloat(a[processSwitchCountProperty])
+            : parseFloat(a[processSwitchCountProperty]) - parseFloat(b[processSwitchCountProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[processSwitchCountProperty].toString().localeCompare(a[processSwitchCountProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[processSwitchCountProperty].toString().localeCompare(b[processSwitchCountProperty].toString());
           }
         }
       };
     }
 
     if (detail.key === 'NO' || detail.key === 'pid' || detail.key === 'switchCount' || detail.key === 'tid') {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.processSwitchCountData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.processSwitchCountData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.processSwitchCountTbl!.recycleDataSource = this.processSwitchCountData;
   }
 
   initHtml(): string {
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts b/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts
index b91797a48f23d12c41ad26f65b0a55435be87ef8..f76f5f13015ac8056fb73d9f0465eec9a4bc0055 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts
@@ -27,19 +27,19 @@ import { TableNoData } from './TableNoData.js';
 @element('top20-process-thread-count')
 export class Top20ProcessThreadCount extends BaseElement {
   traceChange: boolean = false;
-  private table: LitTable | null | undefined;
-  private pie: LitChartPie | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private processThreadCountTbl: LitTable | null | undefined;
+  private processThreadCountPie: LitChartPie | null | undefined;
+  private processThreadCountProgress: LitProgressBar | null | undefined;
   private nodata: TableNoData | null | undefined;
-  private data: Array<any> = [];
+  private processThreadCountData: Array<any> = [];
 
   initElements(): void {
     this.nodata = this.shadowRoot!.querySelector<TableNoData>('#nodata');
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-process-thread-count');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
+    this.processThreadCountProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.processThreadCountTbl = this.shadowRoot!.querySelector<LitTable>('#tb-process-thread-count');
+    this.processThreadCountPie = this.shadowRoot!.querySelector<LitChartPie>('#pie');
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.processThreadCountTbl!.addEventListener('row-click', (evt: any) => {
       let data = evt.detail.data;
       data.isSelected = true;
       // @ts-ignore
@@ -49,11 +49,11 @@ export class Top20ProcessThreadCount extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt) => {
+    this.processThreadCountTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.table!.addEventListener('row-hover', (evt: any) => {
+    this.processThreadCountTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -61,25 +61,25 @@ export class Top20ProcessThreadCount extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
+      this.processThreadCountPie?.showHover();
     });
   }
 
   init() {
     if (!this.traceChange) {
-      if (this.table!.recycleDataSource.length > 0) {
-        this.table?.reMeauseHeight();
+      if (this.processThreadCountTbl!.recycleDataSource.length > 0) {
+        this.processThreadCountTbl?.reMeauseHeight();
       }
       return;
     }
     this.traceChange = false;
-    this.progress!.loading = true;
+    this.processThreadCountProgress!.loading = true;
     this.queryLogicWorker('scheduling-Process ThreadCount', 'query Process Thread Count Analysis Time:', (res) => {
       this.nodata!.noData = res === undefined || res.length === 0;
-      this.table!.recycleDataSource = res;
-      this.data = res;
-      this.table?.reMeauseHeight();
-      this.pie!.config = {
+      this.processThreadCountTbl!.recycleDataSource = res;
+      this.processThreadCountData = res;
+      this.processThreadCountTbl?.reMeauseHeight();
+      this.processThreadCountPie!.config = {
         appendPadding: 10,
         data: res,
         angleField: 'threadNumber',
@@ -90,9 +90,9 @@ export class Top20ProcessThreadCount extends BaseElement {
         },
         hoverHandler: (data) => {
           if (data) {
-            this.table!.setCurrentHover(data);
+            this.processThreadCountTbl!.setCurrentHover(data);
           } else {
-            this.table!.mouseOut();
+            this.processThreadCountTbl!.mouseOut();
           }
         },
         tip: (obj) => {
@@ -109,48 +109,48 @@ export class Top20ProcessThreadCount extends BaseElement {
           },
         ],
       };
-      this.progress!.loading = false;
+      this.processThreadCountProgress!.loading = false;
     });
   }
 
   clearData() {
     this.traceChange = true;
-    this.pie!.dataSource = [];
-    this.table!.recycleDataSource = [];
+    this.processThreadCountPie!.dataSource = [];
+    this.processThreadCountTbl!.recycleDataSource = [];
   }
 
   queryLogicWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let processThreadCountTime = new Date().getTime();
     procedurePool.submitWithName('logic1', option, {}, undefined, handler);
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - processThreadCountTime;
     info(log, durTime);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(processThreadCountProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[processThreadCountProperty]) - parseFloat(a[processThreadCountProperty])
+            : parseFloat(a[processThreadCountProperty]) - parseFloat(b[processThreadCountProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[processThreadCountProperty].toString().localeCompare(a[processThreadCountProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[processThreadCountProperty].toString().localeCompare(b[processThreadCountProperty].toString());
           }
         }
       };
     }
 
     if (detail.key === 'NO' || detail.key === 'pid' || detail.key === 'threadNumber') {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.processThreadCountData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.processThreadCountData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.processThreadCountTbl!.recycleDataSource = this.processThreadCountData;
   }
 
   initHtml(): string {
@@ -161,6 +161,12 @@ export class Top20ProcessThreadCount extends BaseElement {
             height: 100%;
             background-color: var(--dark-background5,#F6F6F6);
         }
+        .pie-chart{
+            display: flex;
+            box-sizing: border-box;
+            width: 500px;
+            height: 500px;
+        }
         .tb_thread_count{
             flex: 1;
             overflow: auto ;
@@ -169,12 +175,6 @@ export class Top20ProcessThreadCount extends BaseElement {
             margin: 15px;
             padding: 5px 15px
         }
-        .pie-chart{
-            display: flex;
-            box-sizing: border-box;
-            width: 500px;
-            height: 500px;
-        }
         .root{
             width: 100%;
             height: 100%;
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.ts b/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.ts
index 261b5eee57ac595037067d98dbfa7cd36a342cf3..a698bb334fafb0ee8a1cbcfe4ce27503ef0e2f4a 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.ts
@@ -163,18 +163,18 @@ export class Top20ThreadCpuUsage extends BaseElement {
 
   sortByColumn(detail: any, table: LitTable | null | undefined, data: Array<any>) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(threadCpuUsageProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[threadCpuUsageProperty]) - parseFloat(a[threadCpuUsageProperty])
+            : parseFloat(a[threadCpuUsageProperty]) - parseFloat(b[threadCpuUsageProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[threadCpuUsageProperty].toString().localeCompare(a[threadCpuUsageProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[threadCpuUsageProperty].toString().localeCompare(b[threadCpuUsageProperty].toString());
           }
         }
       };
@@ -432,11 +432,6 @@ export class Top20ThreadCpuUsage extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host {
-            width: 100%;
-            height: 100%;
-            background: var(--dark-background5,#F6F6F6);
-        }
         .content_grid{
             display: grid;
             padding: 15px;
@@ -455,7 +450,11 @@ export class Top20ThreadCpuUsage extends BaseElement {
             padding-right: 5px;
             border-radius: 5px
         }
-      
+        :host {
+            width: 100%;
+            height: 100%;
+            background: var(--dark-background5,#F6F6F6);
+        }
         .tb_cpu_usage{
              overflow: auto;
              background-color: var(--dark-background,#FFFFFF);
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ThreadRunTime.ts b/ide/src/trace/component/schedulingAnalysis/Top20ThreadRunTime.ts
index 70158dc29571105c8bf2932d70cc4c35674b8f7a..eb51e2fffed5fbaf876c8e768429c316c67bd05d 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ThreadRunTime.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ThreadRunTime.ts
@@ -26,17 +26,17 @@ import { TableNoData } from './TableNoData.js';
 @element('top20-thread-run-time')
 export class Top20ThreadRunTime extends BaseElement {
   traceChange: boolean = false;
-  private table: LitTable | null | undefined;
-  private progress: LitProgressBar | null | undefined;
+  private threadRunTimeTbl: LitTable | null | undefined;
+  private threadRunTimeProgress: LitProgressBar | null | undefined;
   private nodata: TableNoData | null | undefined;
-  private data: Array<any> = [];
+  private threadRunTimeData: Array<any> = [];
 
   initElements(): void {
-    this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.table = this.shadowRoot!.querySelector<LitTable>('#tb-thread-run-time');
+    this.threadRunTimeProgress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
+    this.threadRunTimeTbl = this.shadowRoot!.querySelector<LitTable>('#tb-thread-run-time');
     this.nodata = this.shadowRoot!.querySelector<TableNoData>('#nodata');
 
-    this.table!.addEventListener('row-click', (evt: any) => {
+    this.threadRunTimeTbl!.addEventListener('row-click', (evt: any) => {
       let data = evt.detail.data;
       data.isSelected = true;
       // @ts-ignore
@@ -46,7 +46,7 @@ export class Top20ThreadRunTime extends BaseElement {
       }
     });
 
-    this.table!.addEventListener('column-click', (evt) => {
+    this.threadRunTimeTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -54,48 +54,48 @@ export class Top20ThreadRunTime extends BaseElement {
 
   init() {
     if (!this.traceChange) {
-      if (this.table!.recycleDataSource.length > 0) {
-        this.table?.reMeauseHeight();
+      if (this.threadRunTimeTbl!.recycleDataSource.length > 0) {
+        this.threadRunTimeTbl?.reMeauseHeight();
       }
       return;
     }
-    this.progress!.loading = true;
+    this.threadRunTimeProgress!.loading = true;
     this.traceChange = false;
     this.queryLogicWorker(`scheduling-Thread RunTime`, `query Thread Cpu Run Time Analysis Time:`, (res) => {
       this.nodata!.noData = res === undefined || res.length === 0;
-      this.table!.recycleDataSource = res;
-      this.table?.reMeauseHeight();
-      this.progress!.loading = false;
-      this.data = res;
+      this.threadRunTimeTbl!.recycleDataSource = res;
+      this.threadRunTimeTbl?.reMeauseHeight();
+      this.threadRunTimeProgress!.loading = false;
+      this.threadRunTimeData = res;
     });
   }
 
   clearData() {
     this.traceChange = true;
-    this.table!.recycleDataSource = [];
+    this.threadRunTimeTbl!.recycleDataSource = [];
   }
 
   queryLogicWorker(option: string, log: string, handler: (res: any) => void) {
-    let time = new Date().getTime();
+    let threadRunTime = new Date().getTime();
     procedurePool.submitWithName('logic1', option, { cpuMax: SpSchedulingAnalysis.cpuCount - 1 }, undefined, handler);
-    let durTime = new Date().getTime() - time;
+    let durTime = new Date().getTime() - threadRunTime;
     info(log, durTime);
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
+    function compare(threadRunTimeProperty, sort, type) {
       return function (a: any, b: any) {
         if (type === 'number') {
           // @ts-ignore
           return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+            ? parseFloat(b[threadRunTimeProperty]) - parseFloat(a[threadRunTimeProperty])
+            : parseFloat(a[threadRunTimeProperty]) - parseFloat(b[threadRunTimeProperty]);
         } else {
           if (sort === 2) {
-            return b[property].toString().localeCompare(a[property].toString());
+            return b[threadRunTimeProperty].toString().localeCompare(a[threadRunTimeProperty].toString());
           } else {
-            return a[property].toString().localeCompare(b[property].toString());
+            return a[threadRunTimeProperty].toString().localeCompare(b[threadRunTimeProperty].toString());
           }
         }
       };
@@ -103,7 +103,7 @@ export class Top20ThreadRunTime extends BaseElement {
 
     if (detail.key === 'maxDurationStr') {
       detail.key = 'maxDuration';
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.threadRunTimeData.sort(compare(detail.key, detail.sort, 'number'));
     } else if (
       detail.key === 'cpu' ||
       detail.key === 'no' ||
@@ -111,11 +111,11 @@ export class Top20ThreadRunTime extends BaseElement {
       detail.key === 'tid' ||
       detail.key === 'timestamp'
     ) {
-      this.data.sort(compare(detail.key, detail.sort, 'number'));
+      this.threadRunTimeData.sort(compare(detail.key, detail.sort, 'number'));
     } else {
-      this.data.sort(compare(detail.key, detail.sort, 'string'));
+      this.threadRunTimeData.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.table!.recycleDataSource = this.data;
+    this.threadRunTimeTbl!.recycleDataSource = this.threadRunTimeData;
   }
 
   initHtml(): string {
diff --git a/ide/src/trace/component/setting/SpAllocations.ts b/ide/src/trace/component/setting/SpAllocations.ts
index 169db93952786d93f4b4c6e34f6dd092f1ae9ff5..65c8a592f081eec366dc69dbb383ad19e77a4a8f 100644
--- a/ide/src/trace/component/setting/SpAllocations.ts
+++ b/ide/src/trace/component/setting/SpAllocations.ts
@@ -112,7 +112,7 @@ export class SpAllocations extends BaseElement {
     let input = this.processId.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement;
     let sp = document.querySelector('sp-application') as SpApplication;
     let litSearch = sp?.shadowRoot?.querySelector('#lit-search') as LitSearch;
-    let processData: Array<string> = [];
+    let allocationProcessData: Array<string> = [];
     input.addEventListener('mousedown', (ev) => {
       if (SpRecordTrace.serialNumber == '') {
         this.processId!.processData = [];
@@ -122,24 +122,24 @@ export class SpAllocations extends BaseElement {
       this.dispatchEvent(new CustomEvent('addProbe', {}));
     });
     input.addEventListener('inputClick', () => {
-      processData = [];
+      allocationProcessData = [];
       if (SpRecordTrace.serialNumber != '') {
         if (SpRecordTrace.isVscode) {
           let cmd = Cmd.formatString(CmdConstant.CMD_GET_PROCESS_DEVICES, [SpRecordTrace.serialNumber]);
           Cmd.execHdcCmd(cmd, (res: string) => {
-            let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-            for (let lineVal of lineValues) {
+            let allocationsValuesVs: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+            for (let lineVal of allocationsValuesVs) {
               if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                 continue;
               }
-              let process: string[] = lineVal.trim().split(' ');
-              if (process.length == 2) {
-                let processId = process[0];
-                let processName = process[1];
-                processData.push(processName + '(' + processId + ')');
+              let allocationsVsProcess: string[] = lineVal.trim().split(' ');
+              if (allocationsVsProcess.length == 2) {
+                let processId = allocationsVsProcess[0];
+                let processName = allocationsVsProcess[1];
+                allocationProcessData.push(processName + '(' + processId + ')');
               }
             }
-            this.processId!.processData = processData;
+            this.processId!.processData = allocationProcessData;
             this.processId!.initData();
           });
         } else {
@@ -151,20 +151,20 @@ export class SpAllocations extends BaseElement {
             if (rr) {
               HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res) => {
                 if (res) {
-                  let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-                  for (let lineVal of lineValues) {
+                  let allocationsConfigValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+                  for (let lineVal of allocationsConfigValues) {
                     if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                       continue;
                     }
-                    let process: string[] = lineVal.trim().split(' ');
-                    if (process.length == 2) {
-                      let processId = process[0];
-                      let processName = process[1];
-                      processData.push(processName + '(' + processId + ')');
+                    let allocationsConfigProcess: string[] = lineVal.trim().split(' ');
+                    if (allocationsConfigProcess.length == 2) {
+                      let processId = allocationsConfigProcess[0];
+                      let processName = allocationsConfigProcess[1];
+                      allocationProcessData.push(processName + '(' + processId + ')');
                     }
                   }
                 }
-                this.processId!.processData = processData;
+                this.processId!.processData = allocationProcessData;
                 this.processId!.initData();
               });
             } else {
@@ -284,21 +284,21 @@ export class SpAllocations extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: block;
-            width: 100%;
-            height: 100%;
-            border-radius: 0px 16px 16px 0px;
-        }
         .root {
+            padding-top: 45px;
+            margin-left: 40px;
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             grid-template-rows: min-content 1fr min-content;
-            padding-top: 45px;
-            margin-left: 40px;
             width: 90%;
             border-radius: 0px 16px 16px 0px;
         }
+        :host{
+            display: block;
+            width: 100%;
+            border-radius: 0px 16px 16px 0px;
+            height: 100%;
+        }
         .title {
             grid-column: span 2 / auto;
         }
@@ -406,18 +406,18 @@ export class SpAllocations extends BaseElement {
             grid-column: span 2;
         }
         .resultSize{
-            margin: 0 30px 0 0;
-            height: 40px;
-            background-color: var(--dark-background5,#F2F2F2);
-            -webkit-appearance:none;
-            outline:0;
-            border:1px solid var(--dark-border,#c8cccf);
-            color:var(--dark-color,#6a6f77);
-            border-radius:20px;
             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);
         }
         .record-mode{
             font-family: Helvetica-Bold;
@@ -437,15 +437,15 @@ export class SpAllocations extends BaseElement {
               font-weight: 400;
         }
         .interval-result{
-            margin: 5px 0 5px 5px;
             background-color: var(--dark-background5,#F2F2F2);
             -webkit-appearance:none;
-            outline:0;
-            font-size:14px;
             color:var(--dark-color,#6a6f77);
             border: none;
             text-align: center;
             width: 90px;
+            font-size:14px;
+            outline:0;
+            margin: 5px 0 5px 5px;
         }
         
         </style>
diff --git a/ide/src/trace/component/setting/SpFileSystem.ts b/ide/src/trace/component/setting/SpFileSystem.ts
index eaf8592fd3f418fa989d8f015f68051908649ffa..6ad2b7c488c2c462aed6d7825a5b80dfe3dd87e6 100644
--- a/ide/src/trace/component/setting/SpFileSystem.ts
+++ b/ide/src/trace/component/setting/SpFileSystem.ts
@@ -129,72 +129,72 @@ export class SpFileSystem extends BaseElement {
 
   initElements(): void {
     this.initConfigList();
-    let configList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
+    let fileSystemConfigList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
     this.configList.forEach((config) => {
-      let div = document.createElement('div');
+      let fileSystemDiv = document.createElement('div');
       if (config.hidden) {
-        div.className = 'config-div hidden';
+        fileSystemDiv.className = 'file-system-config-div hidden';
       } else {
-        div.className = 'config-div';
+        fileSystemDiv.className = 'file-system-config-div';
       }
-      let headDiv = document.createElement('div');
-      div.appendChild(headDiv);
-      let title = document.createElement('span');
-      title.className = 'title';
-      title.textContent = config.title;
-      headDiv.appendChild(title);
-      let des = document.createElement('span');
-      des.textContent = config.des;
-      des.className = 'des';
-      headDiv.appendChild(des);
+      let fileSystemHeadDiv = document.createElement('div');
+      fileSystemDiv.appendChild(fileSystemHeadDiv);
+      let fileSystemTitle = document.createElement('span');
+      fileSystemTitle.className = 'file-system-title';
+      fileSystemTitle.textContent = config.title;
+      fileSystemHeadDiv.appendChild(fileSystemTitle);
+      let fileSystemDes = document.createElement('span');
+      fileSystemDes.textContent = config.des;
+      fileSystemDes.className = 'file-system-des';
+      fileSystemHeadDiv.appendChild(fileSystemDes);
       switch (config.type) {
         case 'select-multiple':
-          let html = '';
+          let multipleSelect = '';
           let placeholder = config.selectArray[0];
           if (config.title == 'Process') {
           } else if (config.title == 'SystemCall Event') {
             placeholder = 'ALL-Event';
           }
-          html += `<lit-select-v default-value="" rounded="" class="select config" mode="multiple" canInsert="" title="${config.title}" rounded placement = "bottom" placeholder="${placeholder}">`;
+          multipleSelect += `<lit-select-v default-value="" rounded="" class="file-system-select config" mode="multiple" canInsert="" title="${config.title}" rounded placement = "bottom" placeholder="${placeholder}">`;
           config.selectArray.forEach((value: string) => {
-            html += `<lit-select-option value="${value}">${value}</lit-select-option>`;
+            multipleSelect += `<lit-select-option value="${value}">${value}</lit-select-option>`;
           });
-          html += `</lit-select-v>`;
-          div.innerHTML = div.innerHTML + html;
+          multipleSelect += `</lit-select-v>`;
+          fileSystemDiv.innerHTML = fileSystemDiv.innerHTML + multipleSelect;
           break;
         case 'input':
-          let input = document.createElement('input');
-          input.className = 'input config';
-          input.textContent = config.value;
-          input.value = config.value;
-          input.title = config.title;
+          let fileSystemInput = document.createElement('input');
+          fileSystemInput.className = 'fileSystem-input config';
+          fileSystemInput.textContent = config.value;
+          fileSystemInput.value = config.value;
+          fileSystemInput.title = config.title;
           if (config.title == 'Record Time') {
-            input.oninput = (ev) => {
-              input.value = input.value.replace(/\D/g, '');
+            fileSystemInput.oninput = (ev) => {
+              fileSystemInput.value = fileSystemInput.value.replace(/\D/g, '');
             };
           }
-          div.appendChild(input);
+          fileSystemDiv.appendChild(fileSystemInput);
           break;
         case 'select':
-          let html1 = '';
-          html1 += `<lit-select rounded="" default-value="" class="select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
+          let fileSystemSelect = '';
+          fileSystemSelect += `<lit-select rounded="" default-value="" class="file-system-select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
           config.selectArray.forEach((value: string) => {
-            html1 += `<lit-select-option value="${value}">${value}</lit-select-option>`;
+            fileSystemSelect += `<lit-select-option value="${value}">${value}</lit-select-option>`;
           });
-          html1 += `</lit-select>`;
-          div.innerHTML = div.innerHTML + html1;
+          fileSystemSelect += `</lit-select>`;
+          fileSystemDiv.innerHTML = fileSystemDiv.innerHTML + fileSystemSelect;
           break;
         case 'switch':
-          let switch1 = document.createElement('lit-switch') as LitSwitch;
-          switch1.className = 'config';
-          switch1.title = config.title;
+          let fileSystemSwitch = document.createElement('lit-switch') as LitSwitch;
+          fileSystemSwitch.className = 'config';
+          fileSystemSwitch.title = config.title;
           if (config.value) {
-            switch1.checked = true;
+            fileSystemSwitch.checked = true;
           } else {
-            switch1.checked = false;
+            fileSystemSwitch.checked = false;
           }
           if (config.title == 'Start FileSystem Record') {
-            switch1.addEventListener('change', (event: any) => {
+            fileSystemSwitch.addEventListener('change', (event: any) => {
               let detail = event.detail;
               if (detail.checked) {
                 this.startFileSystem = true;
@@ -204,7 +204,7 @@ export class SpFileSystem extends BaseElement {
             });
           }
           if (config.title == 'Start Page Fault Record') {
-            switch1.addEventListener('change', (event: any) => {
+            fileSystemSwitch.addEventListener('change', (event: any) => {
               let detail = event.detail;
               if (detail.checked) {
                 this.startVirtualMemory = true;
@@ -214,7 +214,7 @@ export class SpFileSystem extends BaseElement {
             });
           }
           if (config.title == 'Start BIO Latency Record') {
-            switch1.addEventListener('change', (event: any) => {
+            fileSystemSwitch.addEventListener('change', (event: any) => {
               let detail = event.detail;
               if (detail.checked) {
                 this.startIo = true;
@@ -223,12 +223,12 @@ export class SpFileSystem extends BaseElement {
               }
             });
           }
-          headDiv.appendChild(switch1);
+          fileSystemHeadDiv.appendChild(fileSystemSwitch);
           break;
         default:
           break;
       }
-      configList!.appendChild(div);
+      fileSystemConfigList!.appendChild(fileSystemDiv);
     });
     this.processInput = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='Process']");
     this.maximum = this.shadowRoot?.querySelector<HTMLInputElement>("input[title='Max Unwind Level']");
@@ -242,7 +242,7 @@ export class SpFileSystem extends BaseElement {
       }
     });
     this.selectProcess = this.processInput!.shadowRoot?.querySelector('input') as HTMLInputElement;
-    let processData: Array<string> = [];
+    let fileSystemProcessData: Array<string> = [];
     this.selectProcess!.addEventListener('mousedown', (ev) => {
       if (SpRecordTrace.serialNumber == '') {
         this.processInput!.dataSource([], '');
@@ -256,47 +256,47 @@ export class SpFileSystem extends BaseElement {
         if (SpRecordTrace.isVscode) {
           let cmd = Cmd.formatString(CmdConstant.CMD_GET_PROCESS_DEVICES, [SpRecordTrace.serialNumber]);
           Cmd.execHdcCmd(cmd, (res: string) => {
-            processData = [];
-            let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-            for (let lineVal of lineValues) {
+            fileSystemProcessData = [];
+            let fileSystemValuesVs: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+            for (let lineVal of fileSystemValuesVs) {
               if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                 continue;
               }
-              let process: string[] = lineVal.trim().split(' ');
-              if (process.length == 2) {
-                let processId = process[0];
-                let processName = process[1];
-                processData.push(processName + '(' + processId + ')');
+              let fileSystemProcessVs: string[] = lineVal.trim().split(' ');
+              if (fileSystemProcessVs.length == 2) {
+                let processId = fileSystemProcessVs[0];
+                let processName = fileSystemProcessVs[1];
+                fileSystemProcessData.push(processName + '(' + processId + ')');
               }
             }
-            if (processData.length > 0 && this.startRecord) {
+            if (fileSystemProcessData.length > 0 && this.startRecord) {
               this.processInput!.setAttribute('readonly', 'readonly');
             }
-            this.processInput?.dataSource(processData, 'ALL-Process');
+            this.processInput?.dataSource(fileSystemProcessData, 'ALL-Process');
           });
         } else {
           HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn) => {
             if (conn) {
               HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res) => {
-                processData = [];
+                fileSystemProcessData = [];
                 if (res) {
-                  let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-                  for (let lineVal of lineValues) {
+                    let fileSystemValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+                  for (let lineVal of fileSystemValues) {
                     if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                       continue;
                     }
-                    let process: string[] = lineVal.trim().split(' ');
-                    if (process.length == 2) {
-                      let processId = process[0];
-                      let processName = process[1];
-                      processData.push(processName + '(' + processId + ')');
+                    let fileSystemProcess: string[] = lineVal.trim().split(' ');
+                    if (fileSystemProcess.length == 2) {
+                      let processId = fileSystemProcess[0];
+                      let processName = fileSystemProcess[1];
+                      fileSystemProcessData.push(processName + '(' + processId + ')');
                     }
                   }
                 }
-                if (processData.length > 0 && this.startRecord) {
+                if (fileSystemProcessData.length > 0 && this.startRecord) {
                   this.selectProcess!.setAttribute('readonly', 'readonly');
                 }
-                this.processInput?.dataSource(processData, 'ALL-Process');
+                this.processInput?.dataSource(fileSystemProcessData, 'ALL-Process');
               });
             }
           });
@@ -307,22 +307,22 @@ export class SpFileSystem extends BaseElement {
   }
 
   private unDisable() {
-    let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
-    configVal!.forEach((configVal1) => {
-      configVal1.removeAttribute('disabled');
+    let fileSystemConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
+    fileSystemConfigVals!.forEach((fileSystemConfigVal) => {
+      fileSystemConfigVal.removeAttribute('disabled');
     });
   }
 
   private disable() {
-    let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
-    configVal!.forEach((configVal1) => {
+    let fileSystemConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
+    fileSystemConfigVals!.forEach((fileSystemConfigVal) => {
       if (
-        configVal1.title == 'Start FileSystem Record' ||
-        configVal1.title == 'Start Page Fault Record' ||
-        configVal1.title == 'Start BIO Latency Record'
+        fileSystemConfigVal.title == 'Start FileSystem Record' ||
+        fileSystemConfigVal.title == 'Start Page Fault Record' ||
+        fileSystemConfigVal.title == 'Start BIO Latency Record'
       ) {
       } else {
-        configVal1.setAttribute('disabled', '');
+        fileSystemConfigVal.setAttribute('disabled', '');
       }
     });
   }
@@ -370,90 +370,90 @@ export class SpFileSystem extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 16px 0px;
-        }
-
         .root {
+            font-size:16px;
+            margin-bottom: 30px;
             padding-top: 30px;
             padding-left: 54px;
             margin-right: 30px;
-            font-size:16px;
-            margin-bottom: 30px;
         }
-
-        .config-div {
-           width: 80%;
+        :host{
+            display: inline-block;
+            background: var(--dark-background3,#FFFFFF);
+            border-radius: 0px 16px 16px 0px;
+             width: 100%;
+            height: 100%;
+        }
+        .file-system-config-div {
            display: flex;
            flex-direction: column;
+           width: 80%;
            margin-top: 5vh;
            margin-bottom: 5vh;
            gap: 25px;
         }
         
-        .title {
+        .file-system-title {
+          line-height: 40px;
+          font-weight: 700;
+          margin-right: 10px;
           opacity: 0.9;
           font-family: Helvetica-Bold;
           font-size: 18px;
           text-align: center;
-          line-height: 40px;
-          font-weight: 700;
-          margin-right: 10px;
         }
 
-        .des {
+        input {
+           border-radius: 16px;
+           text-indent:2%;
+           height: 25px;
+           outline:none;
+        }
+        
+        .file-system-select {
+          border-radius: 15px;
+        }
+
+        .file-system-des {
+          line-height: 35px;
+          font-weight: 400;
           opacity: 0.6;
           font-family: Helvetica;
           font-size: 14px;
           text-align: center;
-          line-height: 35px;
-          font-weight: 400;
-        }
-
-        .select {
-          border-radius: 15px;
         }
 
         lit-switch {
-          display:inline;
-          float: right;
           height: 38px;
           margin-top: 10px;
+          display:inline;
+          float: right;
         }
-        input {
-           height: 25px;
-           outline:none;
-           border-radius: 16px;
-           text-indent:2%
-        }
-        input::-webkit-input-placeholder{
-            color:var(--bark-prompt,#999999);
-        }
-
-        .input {
-            border: 1px solid var(--dark-background5,#ccc);
-            font-family: Helvetica;
-            font-size: 14px;
+        
+        .fileSystem-input {
             color: var(--dark-color1,#212121);
             text-align: left;
             line-height: 20px;
             font-weight: 400;
+            border: 1px solid var(--dark-background5,#ccc);
+            font-family: Helvetica;
+            font-size: 14px;
+        }
+
+        :host(:not([startSamp])) .fileSystem-input {
+            color: #999999;
         }
         
-        :host([startSamp]) .input {
+         :host([startSamp]) .fileSystem-input {
             background: var(--dark-background5,#FFFFFF);
         }
         
-        :host(:not([startSamp])) .input {
-            color: #999999;
+        input::-webkit-input-placeholder{
+            color:var(--bark-prompt,#999999);
         }
         </style>
         <div class="root">
-            <div class="configList">
+            <div class="configList file-system-config">
             </div>
         </div>
         `;
diff --git a/ide/src/trace/component/setting/SpHisysEvent.ts b/ide/src/trace/component/setting/SpHisysEvent.ts
index a76aefb043aeb9e9afd8d60e9ebd788021b47c2d..e558aa1b846d1b8f4298876b54e579c65bfafd0b 100644
--- a/ide/src/trace/component/setting/SpHisysEvent.ts
+++ b/ide/src/trace/component/setting/SpHisysEvent.ts
@@ -26,23 +26,23 @@ import { HdcDeviceManager } from '../../../hdc/HdcDeviceManager.js';
 
 @element('sp-hisys-event')
 export class SpHisysEvent extends BaseElement {
-  private processInput: LitAllocationSelect | undefined | null;
+  private eventProcessInput: LitAllocationSelect | undefined | null;
   private selectProcess: HTMLInputElement | undefined | null;
-  private configList: Array<any> = [];
+  private eventConfigList: Array<any> = [];
 
   set startSamp(start: boolean) {
     if (start) {
       this.setAttribute('startSamp', '');
     } else {
       this.removeAttribute('startSamp');
-      let input = this.processInput?.shadowRoot?.querySelector<HTMLInputElement>('#singleInput');
-      input!.value = '';
+      let eventInput = this.eventProcessInput?.shadowRoot?.querySelector<HTMLInputElement>('#singleInput');
+      eventInput!.value = '';
     }
   }
 
   get process(): string {
-    if (this.processInput!.value.length > 0) {
-      return this.processInput!.value;
+    if (this.eventProcessInput!.value.length > 0) {
+      return this.eventProcessInput!.value;
     }
     return '';
   }
@@ -53,42 +53,42 @@ export class SpHisysEvent extends BaseElement {
 
   initElements(): void {
     this.initConfigList();
-    let configList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
-    this.configList.forEach((config) => {
-      let div = document.createElement('div');
+    let hisysEventConfigList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
+    this.eventConfigList.forEach((config) => {
+      let hisysEventDiv = document.createElement('div');
       if (config.hidden) {
-        div.className = 'config-div hidden';
+        hisysEventDiv.className = 'hisys-event-config-div hidden';
       } else {
-        div.className = 'config-div';
+        hisysEventDiv.className = 'hisys-event-config-div';
       }
-      let headDiv = document.createElement('div');
-      div.appendChild(headDiv);
-      let title = document.createElement('span');
-      title.className = 'title';
-      title.textContent = config.title;
-      headDiv.appendChild(title);
-      let des = document.createElement('span');
-      des.textContent = config.des;
-      des.className = 'des';
-      headDiv.appendChild(des);
+      let hisysEventHeadDiv = document.createElement('div');
+      hisysEventDiv.appendChild(hisysEventHeadDiv);
+      let hisysEventTitle = document.createElement('span');
+      hisysEventTitle.className = 'event-title';
+      hisysEventTitle.textContent = config.title;
+      hisysEventHeadDiv.appendChild(hisysEventTitle);
+      let hisysEventDes = document.createElement('span');
+      hisysEventDes.textContent = config.des;
+      hisysEventDes.className = 'event-des';
+      hisysEventHeadDiv.appendChild(hisysEventDes);
       switch (config.type) {
         case 'select':
-          let html1 = '';
-          html1 += `<lit-allocation-select style="width: 100%;" rounded="" default-value="" class="select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
-          html1 += `</lit-allocation-select>`;
-          div.innerHTML = div.innerHTML + html1;
+          let hisysEventSelect = '';
+          hisysEventSelect += `<lit-allocation-select style="width: 100%;" rounded="" default-value="" class="event-select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
+          hisysEventSelect += `</lit-allocation-select>`;
+          hisysEventDiv.innerHTML = hisysEventDiv.innerHTML + hisysEventSelect;
           break;
         case 'switch':
-          let switch1 = document.createElement('lit-switch') as LitSwitch;
-          switch1.className = 'config';
-          switch1.title = config.title;
+          let hisysEventSwitch = document.createElement('lit-switch') as LitSwitch;
+          hisysEventSwitch.className = 'config';
+          hisysEventSwitch.title = config.title;
           if (config.value) {
-            switch1.checked = true;
+            hisysEventSwitch.checked = true;
           } else {
-            switch1.checked = false;
+            hisysEventSwitch.checked = false;
           }
           if (config.title == 'Start Hisystem Event Tracker Record') {
-            switch1.addEventListener('change', (event: any) => {
+            hisysEventSwitch.addEventListener('change', (event: any) => {
               let detail = event.detail;
               if (detail.checked) {
                 this.startSamp = true;
@@ -99,64 +99,64 @@ export class SpHisysEvent extends BaseElement {
               }
             });
           }
-          headDiv.appendChild(switch1);
+          hisysEventHeadDiv.appendChild(hisysEventSwitch);
           break;
         default:
           break;
       }
-      configList!.appendChild(div);
+      hisysEventConfigList!.appendChild(hisysEventDiv);
     });
-    this.processInput = this.shadowRoot?.querySelector<LitAllocationSelect>("lit-allocation-select[title='AppName']");
-    let inputDiv = this.processInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement;
-    this.selectProcess = this.processInput!.shadowRoot?.querySelector('input') as HTMLInputElement;
-    let processData: Array<string> = [];
-    inputDiv!.addEventListener('mousedown', (ev) => {
+    this.eventProcessInput = this.shadowRoot?.querySelector<LitAllocationSelect>("lit-allocation-select[title='AppName']");
+    let hisyEventProcessInput = this.eventProcessInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement;
+    this.selectProcess = this.eventProcessInput!.shadowRoot?.querySelector('input') as HTMLInputElement;
+    let hisysEventProcessData: Array<string> = [];
+    hisyEventProcessInput!.addEventListener('mousedown', (ev) => {
       if (SpRecordTrace.serialNumber == '') {
-        this.processInput!.processData = [];
-        this.processInput!.initData();
+        this.eventProcessInput!.processData = [];
+        this.eventProcessInput!.initData();
       }
     });
-    inputDiv!.addEventListener('mouseup', () => {
+    hisyEventProcessInput!.addEventListener('mouseup', () => {
       if (SpRecordTrace.serialNumber == '') {
-        this.processInput!.processData = [];
-        this.processInput!.initData();
+        this.eventProcessInput!.processData = [];
+        this.eventProcessInput!.initData();
       } else {
         if (SpRecordTrace.isVscode) {
           let cmd = Cmd.formatString(CmdConstant.CMD_GET_APP_NMAE_DEVICES, [SpRecordTrace.serialNumber]);
           Cmd.execHdcCmd(cmd, (res: string) => {
-            processData = [];
-            let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-            for (let lineVal of lineValues) {
+            hisysEventProcessData = [];
+            let hisyEventValuesVs: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+            for (let lineVal of hisyEventValuesVs) {
               if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('CMD') != -1) {
                 continue;
               }
               let process = lineVal.trim();
               if (process != '') {
-                processData.push(process);
+                hisysEventProcessData.push(process);
               }
             }
-            this.processInput!.processData = processData;
-            this.processInput!.initData();
+            this.eventProcessInput!.processData = hisysEventProcessData;
+            this.eventProcessInput!.initData();
           });
         } else {
           HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn) => {
             if (conn) {
               HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_APP_NMAE, false).then((res) => {
-                processData = [];
+                hisysEventProcessData = [];
                 if (res) {
-                  let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-                  for (let lineVal of lineValues) {
+                  let hisyEventValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+                  for (let lineVal of hisyEventValues) {
                     if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('CMD') != -1) {
                       continue;
                     }
                     let process = lineVal.trim();
                     if (process != '') {
-                      processData.push(process);
+                      hisysEventProcessData.push(process);
                     }
                   }
                 }
-                this.processInput!.processData = processData;
-                this.processInput!.initData();
+                this.eventProcessInput!.processData = hisysEventProcessData;
+                this.eventProcessInput!.initData();
               });
             }
           });
@@ -167,23 +167,23 @@ export class SpHisysEvent extends BaseElement {
   }
 
   private unDisable() {
-    let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
-    configVal!.forEach((configVal1) => {
-      configVal1.removeAttribute('disabled');
+    let hisysEventConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
+    hisysEventConfigVals!.forEach((hisysEventConfigVal) => {
+      hisysEventConfigVal.removeAttribute('disabled');
     });
   }
 
   private disable() {
-    let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
-    configVal!.forEach((configVal1) => {
-      if (configVal1.title != 'Start Hisystem Event Tracker Record') {
-        configVal1.setAttribute('disabled', '');
+    let hisysEventConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
+    hisysEventConfigVals!.forEach((hisysEventConfigVal) => {
+      if (hisysEventConfigVal.title != 'Start Hisystem Event Tracker Record') {
+        hisysEventConfigVal.setAttribute('disabled', '');
       }
     });
   }
 
   initConfigList(): void {
-    this.configList = [
+    this.eventConfigList = [
       {
         title: 'Start Hisystem Event Tracker Record',
         des: '',
@@ -204,63 +204,63 @@ export class SpHisysEvent extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 16px 0px;
-        }
-
         .root {
+            margin-bottom: 30px;
             padding-top: 30px;
             padding-left: 54px;
             margin-right: 30px;
             font-size:16px;
-            margin-bottom: 30px;
         }
 
-        .config-div {
+        :host{
+            background: var(--dark-background3,#FFFFFF);
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            border-radius: 0px 16px 16px 0px;
+        }
+        
+        .hisys-event-config-div {
            width: 80%;
            display: flex;
            flex-direction: column;
+           gap: 25px;
            margin-top: 5vh;
            margin-bottom: 5vh;
-           gap: 25px;
         }
         
-        .title {
+        .event-title {
+          font-weight: 700;
           opacity: 0.9;
           font-family: Helvetica-Bold;
           font-size: 18px;
           text-align: center;
           line-height: 40px;
-          font-weight: 700;
           margin-right: 10px;
         }
 
-        .des {
+        .event-des {
+          font-size: 14px;
           opacity: 0.6;
+          line-height: 35px;
           font-family: Helvetica;
-          font-size: 14px;
           text-align: center;
-          line-height: 35px;
           font-weight: 400;
         }
 
-        .select {
+        .event-select {
           border-radius: 15px;
         }
 
         lit-switch {
-          display:inline;
-          float: right;
           height: 38px;
           margin-top: 10px;
+          display:inline;
+          float: right;
         }
         input {
-           height: 25px;
            outline:none;
+           height: 25px;
            border-radius: 16px;
            text-indent:2%
         }
@@ -268,7 +268,7 @@ export class SpHisysEvent extends BaseElement {
             color:var(--bark-prompt,#999999);
         }
 
-        .input {
+        .event-input {
             border: 1px solid var(--dark-background5,#ccc);
             font-family: Helvetica;
             font-size: 14px;
@@ -277,17 +277,9 @@ export class SpHisysEvent extends BaseElement {
             line-height: 20px;
             font-weight: 400;
         }
-
-        :host([startSamp]) .input {
-            background: var(--dark-background5,#FFFFFF);
-        }
-        
-        :host(:not([startSamp])) .input {
-            color: #999999;
-        }
         </style>
         <div class="root">
-            <div class="configList">
+            <div class="configList hisys-event-config">
             </div>
         </div>
         `;
diff --git a/ide/src/trace/component/setting/SpProbesConfig.ts b/ide/src/trace/component/setting/SpProbesConfig.ts
index 313fdeed5d513d4cd5261fe874bd9de0fa9d4da5..d3f8003decee3037efd9f8d7584611ce69b276b9 100644
--- a/ide/src/trace/component/setting/SpProbesConfig.ts
+++ b/ide/src/trace/component/setting/SpProbesConfig.ts
@@ -18,6 +18,7 @@ import { checkDesBean, SpCheckDesBox } from './SpCheckDesBox.js';
 import { LitCheckBox } from '../../../base-ui/checkbox/LitCheckBox.js';
 import { LitRadioGroup } from '../../../base-ui/radiobox/LitRadioGroup.js';
 import { info, log } from '../../../log/Log.js';
+import { LitSlider } from '../../../base-ui/slider/LitSlider';
 
 @element('probes-config')
 export class SpProbesConfig extends BaseElement {
@@ -30,6 +31,7 @@ export class SpProbesConfig extends BaseElement {
   private _traceConfig: HTMLElement | undefined;
   private _memoryConfig: HTMLElement | undefined | null;
   private _abilityConfig: HTMLElement | undefined | null;
+  private ftraceBufferSizeResult: HTMLDivElement | null | undefined;
 
   get traceConfig() {
     let selectedTrace = this._traceConfig?.querySelectorAll<SpCheckDesBox>(`check-des-box[checked]`) || [];
@@ -44,6 +46,13 @@ export class SpProbesConfig extends BaseElement {
     return values;
   }
 
+  get ftraceBufferSize(): number {
+    if (this.ftraceBufferSizeResult?.hasAttribute('percent')) {
+      return Number(this.ftraceBufferSizeResult?.getAttribute('percent'));
+    }
+    return 1024;
+  }
+
   get memoryConfig() {
     let values = [];
     let selectedMemory = this._memoryConfig?.querySelectorAll<SpCheckDesBox>(
@@ -248,35 +257,105 @@ export class SpProbesConfig extends BaseElement {
       });
       parent.append(litCheckBox);
     });
+    this.bufferSizeSliderInit();
+  }
+
+  private bufferSizeSliderInit() {
+    let ftraceBufferSizeSlider = this.shadowRoot?.querySelector<LitSlider>('#ftrace-buff-size-slider') as LitSlider;
+    this.ftraceBufferSizeResult = this.shadowRoot?.querySelector('#ftrace-buff-size-div') as HTMLDivElement;
+    ftraceBufferSizeSlider.sliderStyle = {
+      minRange: 1024,
+      maxRange: 65536,
+      defaultValue: '1024',
+      resultUnit: 'KB',
+      stepSize: 2,
+      lineColor: 'var(--dark-color3,#46B1E3)',
+      buttonColor: '#999999',
+    };
+    let ftraceBufferSizeSliderParent = ftraceBufferSizeSlider!.parentNode as Element;
+    let ftraceBuffSizeResultInput = this.shadowRoot?.querySelector('.ftrace-buff-size-result') as HTMLInputElement;
+    ftraceBuffSizeResultInput.value = ftraceBufferSizeSlider.sliderStyle.defaultValue;
+    ftraceBufferSizeSlider.addEventListener('input', (evt) => {
+      ftraceBuffSizeResultInput.parentElement!.classList.remove('border-red');
+      if (this.ftraceBufferSizeResult!.hasAttribute('percent')) {
+        ftraceBuffSizeResultInput.value = Number(this.ftraceBufferSizeResult!.getAttribute('percent')).toString();
+      } else {
+        ftraceBuffSizeResultInput.value = '1024';
+      }
+    });
+    ftraceBufferSizeSliderParent.setAttribute('percent', '1024');
+    ftraceBuffSizeResultInput.style.color = 'var(--dark-color1,#000000)';
+    ftraceBuffSizeResultInput.addEventListener('input', (ev) => {
+      if (this.ftraceBufferSizeResult!.hasAttribute('percent')) {
+        this.ftraceBufferSizeResult!.removeAttribute('percent');
+      }
+      ftraceBuffSizeResultInput.style.color = 'var(--dark-color1,#000000)';
+      ftraceBuffSizeResultInput.parentElement!.style.backgroundColor = 'var(--dark-background5,#F2F2F2)';
+      ftraceBuffSizeResultInput.style.backgroundColor = 'var(--dark-background5,#F2F2F2)';
+      if (ftraceBuffSizeResultInput.value.trim() == '') {
+        ftraceBuffSizeResultInput.style.color = 'red';
+        ftraceBufferSizeSliderParent.setAttribute('percent', '1024');
+        return;
+      }
+      let ftraceBufferSize = Number(ftraceBuffSizeResultInput.value);
+      if (
+        ftraceBufferSize < ftraceBufferSizeSlider!.sliderStyle.minRange ||
+        ftraceBufferSize > ftraceBufferSizeSlider!.sliderStyle.maxRange
+      ) {
+        ftraceBuffSizeResultInput.parentElement!.classList.add('border-red');
+        ftraceBufferSizeSliderParent.setAttribute('percent', '1024');
+      } else {
+        ftraceBuffSizeResultInput.parentElement!.classList.remove('border-red');
+        ftraceBufferSizeSlider!.percent = ftraceBuffSizeResultInput.value;
+        let htmlInputElement = ftraceBufferSizeSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement;
+        htmlInputElement.value = ftraceBuffSizeResultInput.value;
+        ftraceBufferSizeSliderParent.setAttribute('percent', ftraceBuffSizeResultInput.value);
+        ftraceBufferSizeSliderParent.setAttribute('percentValue', ftraceBuffSizeResultInput.value);
+      }
+    });
+    ftraceBuffSizeResultInput.addEventListener('focusout', (ev) => {
+      if (ftraceBuffSizeResultInput.value.trim() == '') {
+        ftraceBuffSizeResultInput.parentElement!.classList.remove('border-red');
+        ftraceBufferSizeSliderParent.setAttribute('percent', '1024');
+        ftraceBuffSizeResultInput.value = '1024';
+        ftraceBuffSizeResultInput.style.color = 'var(--dark-color,#6a6f77)';
+        ftraceBufferSizeSliderParent.setAttribute('percent', ftraceBuffSizeResultInput.value);
+        ftraceBufferSizeSliderParent.setAttribute('percentValue', ftraceBuffSizeResultInput.value);
+        ftraceBufferSizeSlider!.percent = ftraceBuffSizeResultInput.value;
+        let htmlInputElement = ftraceBufferSizeSlider!.shadowRoot?.querySelector('#slider') as HTMLInputElement;
+        htmlInputElement.value = ftraceBuffSizeResultInput.value;
+      }
+    });
   }
 
   initHtml(): string {
     return `
         <style>
+        .recordText {
+           font-family: Helvetica-Bold;
+           font-size: 1em;
+           color: var(--dark-color1,#000000);
+           line-height: 28px;
+           font-weight: 700;
+           margin-bottom: 20px;
+        }
+
         :host{
             display: inline-block;
+            background: var(--dark-background3,#FFFFFF);
             width: 100%;
             height: 100%;
-            background: var(--dark-background3,#FFFFFF);
             border-radius: 0px 16px 16px 0px;
         }
 
         .root {
+            margin-right: 30px;
             padding-top: 30px;
             padding-left: 54px;
-            margin-right: 30px;
-            font-size:16px;
             margin-bottom: 30px;
+            font-size:16px;
         }
-        .recordText {
-           font-family: Helvetica-Bold;
-           font-size: 1em;
-           color: var(--dark-color1,#000000);
-           line-height: 28px;
-           font-weight: 700;
-           margin-bottom: 20px;
-        }
-
+        
         .config-page {
             height: 95%;
             font-size: 0.875em;
@@ -334,6 +413,49 @@ export class SpProbesConfig extends BaseElement {
            gap: 10px;
            margin-left: 15px;;
         }
+        #ftrace-buff-size-div {
+            width: 100%;
+            height: min-content;
+            display: grid;
+            grid-template-columns: 1fr min-content;
+        }
+        .buffer-size-des {
+            opacity: 0.6;
+            font-family: Helvetica;
+            font-size: 1em;
+            color: var(--dark-color,#000000);
+            text-align: left;
+            line-height: 20px;
+            font-weight: 400;
+        }
+        .ftrace-buff-size-result-div{
+            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 20px 0 0;
+            height: 40px;
+            border-radius:20px;
+            outline:0;
+            border:1px solid var(--dark-border,#c8cccf);
+        }
+        .ftrace-buff-size-result{
+            background-color: var(--dark-background5,#F2F2F2);
+            -webkit-appearance:none;
+            color:var(--dark-color,#6a6f77);
+            border: none;
+            text-align: center;
+            width: 90px;
+            font-size:14px;
+            outline:0;
+            margin: 5px 0 5px 5px;
+        }
+        .border-red {
+           border:1px solid red;
+        }
         </style>
         <div class="root">
             <div class="recordText" >Record mode</div>
@@ -347,6 +469,20 @@ export class SpProbesConfig extends BaseElement {
                           <slot></slot>
                       </div>
                     </div>
+                    <div>
+                       <div>
+                          <p>Buffer Size</p>
+                          <p class="buffer-size-des">The ftrace buffer size range is 1024 Kb to 65536 KB</p>
+                       </div>
+                       <div id="ftrace-buff-size-div">
+                          <lit-slider id="ftrace-buff-size-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
+                          </lit-slider>
+                          <div class='ftrace-buff-size-result-div'>
+                              <input class="ftrace-buff-size-result" type="text" value='0' onkeyup="this.value=this.value.replace(/\\D/g,'')">
+                              <span style="text-align: center; margin: 8px"> KB </span>
+                           </div>
+                       </div>
+                    </div>
                 </div>
                 <div class="memory-config">
                     <div class="span-col-2">
diff --git a/ide/src/trace/component/setting/SpRecordPerf.ts b/ide/src/trace/component/setting/SpRecordPerf.ts
index 238d3281350c5efb59c9ebea7ef397df6f2326fd..f0b0b9daab2a1669c48ea5a67085469963f8337c 100644
--- a/ide/src/trace/component/setting/SpRecordPerf.ts
+++ b/ide/src/trace/component/setting/SpRecordPerf.ts
@@ -38,30 +38,30 @@ export class SpRecordPerf extends BaseElement {
   private eventSelect: LitSelectV | undefined | null;
 
   private frequencySetInput: HTMLInputElement | undefined | null;
-  private processInput: HTMLInputElement | undefined | null;
+  private recordProcessInput: HTMLInputElement | undefined | null;
   private offCPUSwitch: LitSwitch | undefined | null;
   private callSelect: LitSelect | undefined | null;
-  private configList: Array<any> = [];
+  private perfConfigList: Array<any> = [];
 
   get show(): boolean {
     return this.hasAttribute('show');
   }
 
-  set show(show: boolean) {
-    if (show) {
+  set show(perfShow: boolean) {
+    if (perfShow) {
       this.setAttribute('show', '');
     } else {
       this.removeAttribute('show');
     }
   }
 
-  set startSamp(start: boolean) {
-    if (start) {
+  set startSamp(perfStart: boolean) {
+    if (perfStart) {
       this.setAttribute('startSamp', '');
-      this.processInput!.removeAttribute('readonly');
+      this.recordProcessInput!.removeAttribute('readonly');
     } else {
       this.removeAttribute('startSamp');
-      this.processInput!.setAttribute('readonly', 'readonly');
+      this.recordProcessInput!.setAttribute('readonly', 'readonly');
     }
   }
 
@@ -70,7 +70,7 @@ export class SpRecordPerf extends BaseElement {
   }
 
   getPerfConfig(): PerfConfig | undefined {
-    let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
+    let recordPerfConfigVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     let perfConfig: PerfConfig = {
       process: 'ALL',
       cpu: 'select ALL',
@@ -85,7 +85,7 @@ export class SpRecordPerf extends BaseElement {
       mmap: 256,
       clockType: 'monotonic',
     };
-    configVal!.forEach((value) => {
+    recordPerfConfigVal!.forEach((value) => {
       switch (value.title) {
         case 'Process':
           let processSelect = value as LitSelectV;
@@ -177,25 +177,25 @@ export class SpRecordPerf extends BaseElement {
   initElements(): void {
     let that = this;
     this.initConfigList();
-    let configList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
+    let recordPerfConfigList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
     this.addOptionButton = this.shadowRoot?.querySelector<HTMLButtonElement>('#addOptions');
-    this.configList.forEach((config) => {
-      let div = document.createElement('div');
+    this.perfConfigList.forEach((config) => {
+      let recordPerfDiv = document.createElement('div');
       if (config.hidden) {
-        div.className = 'config-div hidden';
+        recordPerfDiv.className = 'record-perf-config-div hidden';
       } else {
-        div.className = 'config-div';
+        recordPerfDiv.className = 'record-perf-config-div';
       }
-      let headDiv = document.createElement('div');
-      div.appendChild(headDiv);
-      let title = document.createElement('span');
-      title.className = 'title';
-      title.textContent = config.title;
-      headDiv.appendChild(title);
-      let des = document.createElement('span');
-      des.textContent = config.des;
-      des.className = 'des';
-      headDiv.appendChild(des);
+      let recordPerfHeadDiv = document.createElement('div');
+      recordPerfDiv.appendChild(recordPerfHeadDiv);
+      let recordPerfTitle = document.createElement('span');
+      recordPerfTitle.className = 'record-perf-title';
+      recordPerfTitle.textContent = config.title;
+      recordPerfHeadDiv.appendChild(recordPerfTitle);
+      let recordPerfDes = document.createElement('span');
+      recordPerfDes.textContent = config.des;
+      recordPerfDes.className = 'record-perf-des';
+      recordPerfHeadDiv.appendChild(recordPerfDes);
       switch (config.type) {
         case 'select-multiple':
           let html = '';
@@ -203,22 +203,22 @@ export class SpRecordPerf extends BaseElement {
           if (config.title == 'Event List') {
             placeholder = 'NONE';
           }
-          html += `<lit-select-v default-value="" rounded="" class="select config" mode="multiple" canInsert="" title="${config.title}" rounded placement = "bottom" placeholder="${placeholder}">`;
+          html += `<lit-select-v default-value="" rounded="" class="record-perf-select config" mode="multiple" canInsert="" title="${config.title}" rounded placement = "bottom" placeholder="${placeholder}">`;
           config.selectArray.forEach((value: string) => {
             html += `<lit-select-option value="${value}">${value}</lit-select-option>`;
           });
           html += `</lit-select-v>`;
-          div.innerHTML = div.innerHTML + html;
+          recordPerfDiv.innerHTML = recordPerfDiv.innerHTML + html;
           break;
         case 'lit-slider':
           let silder = `<div class="sliderBody"><lit-slider defaultColor="var(--dark-color3,#46B1E3)" open dir="right" class="silderclass config" title="${config.title}"></lit-slider>
                               <input readonly class="sliderInput" type="text" value = '    ${config.litSliderStyle.defaultValue} ${config.litSliderStyle.resultUnit}' >
                                </div>`;
-          div.innerHTML = div.innerHTML + silder;
-          let litSlider = div.querySelector<LitSlider>('.silderclass');
+          recordPerfDiv.innerHTML = recordPerfDiv.innerHTML + silder;
+          let litSlider = recordPerfDiv.querySelector<LitSlider>('.silderclass');
           litSlider!.percent = config.litSliderStyle.defaultValue;
-          let sliderBody = div.querySelector<HTMLDivElement>('.sliderBody');
-          let bufferInput = div?.querySelector('.sliderInput') as HTMLInputElement;
+          let sliderBody = recordPerfDiv.querySelector<HTMLDivElement>('.sliderBody');
+          let bufferInput = recordPerfDiv?.querySelector('.sliderInput') as HTMLInputElement;
           litSlider!.addEventListener('input', (evt) => {
             bufferInput.value = sliderBody!.getAttribute('percent') + config.litSliderStyle.resultUnit;
           });
@@ -229,11 +229,11 @@ export class SpRecordPerf extends BaseElement {
           let mapsilder = `<div class="sliderBody"><lit-slider defaultColor="var(--dark-color3,#46B1E3)" open dir="right" class="silderclass config" title="${config.title}"></lit-slider>
                               <input readonly class="sliderInput" type="text" value = '    ${defaultValue} ${config.litSliderStyle.resultUnit}' >
                                </div>`;
-          div.innerHTML = div.innerHTML + mapsilder;
-          let maplitSlider = div.querySelector<LitSlider>('.silderclass');
+          recordPerfDiv.innerHTML = recordPerfDiv.innerHTML + mapsilder;
+          let maplitSlider = recordPerfDiv.querySelector<LitSlider>('.silderclass');
           maplitSlider!.percent = config.litSliderStyle.defaultValue;
-          let mapsliderBody = div.querySelector<HTMLDivElement>('.sliderBody');
-          let mapbufferInput = div?.querySelector('.sliderInput') as HTMLInputElement;
+          let mapsliderBody = recordPerfDiv.querySelector<HTMLDivElement>('.sliderBody');
+          let mapbufferInput = recordPerfDiv?.querySelector('.sliderInput') as HTMLInputElement;
           maplitSlider!.addEventListener('input', (evt) => {
             let percnet = mapsliderBody!.getAttribute('percent');
             if (percnet != null) {
@@ -243,36 +243,36 @@ export class SpRecordPerf extends BaseElement {
           maplitSlider!.sliderStyle = config.litSliderStyle;
           break;
         case 'input':
-          let input = document.createElement('input');
-          input.className = 'input config';
-          input.textContent = config.value;
-          input.value = config.value;
-          input.title = config.title;
-          input.oninput = (ev) => {
-            input.value = input.value.replace(/\D/g, '');
+          let recordPerfInput = document.createElement('input');
+          recordPerfInput.className = 'record-perf-input config';
+          recordPerfInput.textContent = config.value;
+          recordPerfInput.value = config.value;
+          recordPerfInput.title = config.title;
+          recordPerfInput.oninput = (ev) => {
+            recordPerfInput.value = recordPerfInput.value.replace(/\D/g, '');
           };
-          div.appendChild(input);
+          recordPerfDiv.appendChild(recordPerfInput);
           break;
         case 'select':
-          let html1 = '';
-          html1 += `<lit-select rounded="" default-value="" class="select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
+          let recordPerfSelect = '';
+          recordPerfSelect += `<lit-select rounded="" default-value="" class="record-perf-select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
           config.selectArray.forEach((value: string) => {
-            html1 += `<lit-select-option value="${value}">${value}</lit-select-option>`;
+            recordPerfSelect += `<lit-select-option value="${value}">${value}</lit-select-option>`;
           });
-          html1 += `</lit-select>`;
-          div.innerHTML = div.innerHTML + html1;
+          recordPerfSelect += `</lit-select>`;
+          recordPerfDiv.innerHTML = recordPerfDiv.innerHTML + recordPerfSelect;
           break;
         case 'switch':
-          let switch1 = document.createElement('lit-switch') as LitSwitch;
-          switch1.className = 'config';
-          switch1.title = config.title;
+          let recordPerfSwitch = document.createElement('lit-switch') as LitSwitch;
+          recordPerfSwitch.className = 'config';
+          recordPerfSwitch.title = config.title;
           if (config.value) {
-            switch1.checked = true;
+            recordPerfSwitch.checked = true;
           } else {
-            switch1.checked = false;
+            recordPerfSwitch.checked = false;
           }
           if (config.title == 'Start Hiperf Sampling') {
-            switch1.addEventListener('change', (event: any) => {
+            recordPerfSwitch.addEventListener('change', (event: any) => {
               let detail = event.detail;
               if (detail.checked) {
                 this.startSamp = true;
@@ -286,19 +286,19 @@ export class SpRecordPerf extends BaseElement {
               }
             });
           }
-          headDiv.appendChild(switch1);
+          recordPerfHeadDiv.appendChild(recordPerfSwitch);
           break;
         default:
           break;
       }
-      configList!.appendChild(div);
+      recordPerfConfigList!.appendChild(recordPerfDiv);
     });
     let sp = document.querySelector('sp-application') as SpApplication;
-    let litSearch = sp?.shadowRoot?.querySelector('#lit-search') as LitSearch;
+    let recordPerfSearch = sp?.shadowRoot?.querySelector('#lit-search') as LitSearch;
     this.processSelect = this.shadowRoot?.querySelector<LitSelectV>("lit-select-v[title='Process']");
-    this.processInput = this.processSelect?.shadowRoot?.querySelector<HTMLInputElement>('input');
+    this.recordProcessInput = this.processSelect?.shadowRoot?.querySelector<HTMLInputElement>('input');
     let querySelector = this.processSelect!.shadowRoot?.querySelector('input') as HTMLInputElement;
-    let processData: Array<string> = [];
+    let recordPerfProcessData: Array<string> = [];
     querySelector.addEventListener('mousedown', (ev) => {
       if (SpRecordTrace.serialNumber == '') {
         this.processSelect!.dataSource([], 'ALL-Process');
@@ -310,57 +310,57 @@ export class SpRecordPerf extends BaseElement {
       } else {
         if (sp.search) {
           sp.search = false;
-          litSearch.clear();
+          recordPerfSearch.clear();
         }
         if (SpRecordTrace.isVscode) {
           let cmd = Cmd.formatString(CmdConstant.CMD_GET_PROCESS_DEVICES, [SpRecordTrace.serialNumber]);
           Cmd.execHdcCmd(cmd, (res: string) => {
-            processData = [];
-            let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-            for (let lineVal of lineValues) {
+            recordPerfProcessData = [];
+            let recordPerfValuesVs: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+            for (let lineVal of recordPerfValuesVs) {
               if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                 continue;
               }
-              let process: string[] = lineVal.trim().split(' ');
-              if (process.length == 2) {
-                let processId = process[0];
-                let processName = process[1];
-                processData.push(processName + '(' + processId + ')');
+              let recordPerfProcessVs: string[] = lineVal.trim().split(' ');
+              if (recordPerfProcessVs.length == 2) {
+                let processId = recordPerfProcessVs[0];
+                let processName = recordPerfProcessVs[1];
+                recordPerfProcessData.push(processName + '(' + processId + ')');
               }
             }
-            if (processData.length > 0 && this.startSamp) {
-              this.processInput!.setAttribute('readonly', 'readonly');
+            if (recordPerfProcessData.length > 0 && this.startSamp) {
+              this.recordProcessInput!.setAttribute('readonly', 'readonly');
             }
-            this.processSelect?.dataSource(processData, 'ALL-Process');
+            this.processSelect?.dataSource(recordPerfProcessData, 'ALL-Process');
           });
         } else {
           HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn) => {
             if (conn) {
               HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res) => {
-                processData = [];
+                recordPerfProcessData = [];
                 if (res) {
-                  let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-                  for (let lineVal of lineValues) {
+                  let recordPerfValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+                  for (let lineVal of recordPerfValues) {
                     if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                       continue;
                     }
-                    let process: string[] = lineVal.trim().split(' ');
-                    if (process.length == 2) {
-                      let processId = process[0];
-                      let processName = process[1];
-                      processData.push(processName + '(' + processId + ')');
+                    let recordPerfProcess: string[] = lineVal.trim().split(' ');
+                    if (recordPerfProcess.length == 2) {
+                      let processId = recordPerfProcess[0];
+                      let processName = recordPerfProcess[1];
+                      recordPerfProcessData.push(processName + '(' + processId + ')');
                     }
                   }
                 }
-                if (processData.length > 0 && this.startSamp) {
-                  this.processInput!.setAttribute('readonly', 'readonly');
+                if (recordPerfProcessData.length > 0 && this.startSamp) {
+                  this.recordProcessInput!.setAttribute('readonly', 'readonly');
                 }
-                this.processSelect?.dataSource(processData, 'ALL-Process');
+                this.processSelect?.dataSource(recordPerfProcessData, 'ALL-Process');
               });
             } else {
               sp.search = true;
-              litSearch.clear();
-              litSearch.setPercent('please kill other hdc-server !', -2);
+              recordPerfSearch.clear();
+              recordPerfSearch.setPercent('please kill other hdc-server !', -2);
             }
           });
         }
@@ -381,7 +381,7 @@ export class SpRecordPerf extends BaseElement {
       } else {
         if (sp.search) {
           sp.search = false;
-          litSearch.clear();
+          recordPerfSearch.clear();
         }
         if (SpRecordTrace.isVscode) {
           let cmd = Cmd.formatString(CmdConstant.CMD_GET_CPU_COUNT_DEVICES, [SpRecordTrace.serialNumber]);
@@ -408,8 +408,8 @@ export class SpRecordPerf extends BaseElement {
               });
             } else {
               sp.search = true;
-              litSearch.clear();
-              litSearch.setPercent('please kill other hdc-server !', -2);
+              recordPerfSearch.clear();
+              recordPerfSearch.setPercent('please kill other hdc-server !', -2);
             }
           });
         }
@@ -453,7 +453,7 @@ export class SpRecordPerf extends BaseElement {
       } else {
         if (sp.search) {
           sp.search = false;
-          litSearch.clear();
+          recordPerfSearch.clear();
         }
         if (SpRecordTrace.isVscode) {
           let cmd = Cmd.formatString(CmdConstant.CMD_GET_HIPERF_EVENTS_DEVICES, [SpRecordTrace.serialNumber]);
@@ -485,8 +485,8 @@ export class SpRecordPerf extends BaseElement {
               });
             } else {
               sp.search = true;
-              litSearch.clear();
-              litSearch.setPercent('please kill other hdc-server !', -2);
+              recordPerfSearch.clear();
+              recordPerfSearch.setPercent('please kill other hdc-server !', -2);
             }
           });
         }
@@ -584,7 +584,7 @@ export class SpRecordPerf extends BaseElement {
   }
 
   initConfigList(): void {
-    this.configList = [
+    this.perfConfigList = [
       {
         title: 'Start Hiperf Sampling',
         des: '',
@@ -698,36 +698,55 @@ export class SpRecordPerf extends BaseElement {
   initHtml(): string {
     return `
         <style>
+       input {
+           height: 25px;
+           border-radius: 16px;
+           outline:none;
+           text-indent:2%
+        }
+        
+        input::-webkit-input-placeholder{
+            color:var(--bark-prompt,#999999);
+        }
+        
+         :host([startSamp]) .record-perf-input {
+            background: var(--dark-background5,#FFFFFF);
+        }
+        
+        :host(:not([startSamp])) .record-perf-input {
+            color: #999999;
+        }
+        
         :host{
-            display: inline-block;
             width: 100%;
+            display: inline-block;
             height: 100%;
             background: var(--dark-background3,#FFFFFF);
             border-radius: 0px 16px 16px 0px;
         }
 
+        .record-perf-config-div {
+           display: flex;
+           flex-direction: column;
+           gap: 15px;
+           width: 80%;
+        }
+        
         .root {
             padding-top: 30px;
-            padding-left: 54px;
             margin-right: 30px;
+            padding-left: 54px;
             font-size:16px;
             margin-bottom: 30px;
         }
 
-        .config-div {
-           width: 80%;
-           display: flex;
-           flex-direction: column;
-           gap: 15px;
-        }
-
-        :host([show]) .config-div {
+        :host([show]) .record-perf-config-div {
            display: flex;
            flex-direction: column;
            margin-bottom: 1vh;
         }
 
-        :host(:not([show])) .config-div {
+        :host(:not([show])) .record-perf-config-div {
            margin-top: 5vh;
            margin-bottom: 5vh;
            gap: 25px;
@@ -759,63 +778,46 @@ export class SpRecordPerf extends BaseElement {
            background: #3391FF;
         }
 
-        .title {
+        .record-perf-title {
           opacity: 0.9;
           font-family: Helvetica-Bold;
+          margin-right: 10px;
           font-size: 18px;
           text-align: center;
           line-height: 40px;
           font-weight: 700;
-          margin-right: 10px;
         }
 
-        .des {
+        .record-perf-des {
           opacity: 0.6;
           font-family: Helvetica;
+          line-height: 35px;
           font-size: 14px;
           text-align: center;
-          line-height: 35px;
           font-weight: 400;
         }
 
-        .select {
+        .record-perf-select {
           border-radius: 15px;
         }
 
         lit-switch {
-          display:inline;
-          float: right;
           height: 38px;
           margin-top: 10px;
+          display:inline;
+          float: right;
         }
-        input {
-           height: 25px;
-           outline:none;
-           border-radius: 16px;
-           text-indent:2%
-        }
-        input::-webkit-input-placeholder{
-            color:var(--bark-prompt,#999999);
-        }
-
-        .input {
+     
+        .record-perf-input {
+            line-height: 20px;
+            font-weight: 400;
             border: 1px solid var(--dark-background5,#ccc);
             font-family: Helvetica;
             font-size: 14px;
             color: var(--dark-color1,#212121);
             text-align: left;
-            line-height: 20px;
-            font-weight: 400;
         }
 
-        :host([startSamp]) .input {
-            background: var(--dark-background5,#FFFFFF);
-        }
-        
-        :host(:not([startSamp])) .input {
-            color: #999999;
-        }
-     
         .sliderBody{
             width: 100%;
             height: min-content;
@@ -837,7 +839,7 @@ export class SpRecordPerf extends BaseElement {
         }
         </style>
         <div class="root">
-            <div class="configList">
+            <div class="configList record-perf-config">
             </div>
             <button id ="addOptions">Advance Options</button>
         </div>
diff --git a/ide/src/trace/component/setting/SpRecordSetting.ts b/ide/src/trace/component/setting/SpRecordSetting.ts
index 0389ba7d44c065ea415140573ae3bdf916a2efd9..a1953d09593f1791d03c6dda04969c419e13902e 100644
--- a/ide/src/trace/component/setting/SpRecordSetting.ts
+++ b/ide/src/trace/component/setting/SpRecordSetting.ts
@@ -269,25 +269,25 @@ export class SpRecordSetting extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: block;
-            width: 100%;
-            height: 100%;
-            position: relative;
-            background: background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 16px 0px;
-        }
         .root {
-            display: grid;
-            grid-template-columns: repeat(1, 1fr);
-            grid-template-rows: min-content min-content min-content;
-            grid-gap: 50px;
             padding-top: 45px;
             padding-left: 41px;
             background: var(--dark-background3,#FFFFFF);
             font-size:16px;
             border-radius: 0px 16px 16px 0px;
             overflow-y: auto;
+            display: grid;
+            grid-template-columns: repeat(1, 1fr);
+            grid-template-rows: min-content min-content min-content;
+            grid-gap: 50px;
+        }
+        :host{
+            display: block;
+            border-radius: 0px 16px 16px 0px;
+            background: background: var(--dark-background3,#FFFFFF);
+            position: relative;
+            width: 100%;
+            height: 100%;
         }
         .record-mode{
             font-family: Helvetica-Bold;
@@ -359,41 +359,41 @@ export class SpRecordSetting extends BaseElement {
         }
 
         .line{
+            width: 100%;
+            height: 1px;
+            overflow: hidden;
             border-top: 1px solid #C5C7CF;
             background: #E4E3E9;
             margin-top: 4px;
             display: inline-block;
-            width: 100%;
-            height: 1px;
-            overflow: hidden;
             vertical-align: middle;
         }
 
         .max_duration_result, .memory_buffer_result{
-            margin: 5px 0 5px 5px;
             background-color: var(--dark-background5,#F2F2F2);
-            -webkit-appearance:none;
-            outline:0;
-            font-size:14px;
             color:var(--dark-color,#6a6f77);
             border: none;
+             -webkit-appearance:none;
+            outline:0;
+            font-size:14px;
             text-align: center;
             width: 90px;
+            margin: 5px 0 5px 5px;
         }
         
         .resultValue, .resultSize{
-            margin: 0 30px 0 0;
-            height: 40px;
-            background-color: var(--dark-background5,#F2F2F2);
             -webkit-appearance:none;
-            outline:0;
-            border:1px solid var(--dark-border,#c8cccf);
             color:var(--dark-color,#6a6f77);
             border-radius:20px;
+            margin: 0 30px 0 0;
+            background-color: var(--dark-background5,#F2F2F2);
             display: grid;
             grid-template-rows: 1fr;
             grid-template-columns:  min-content min-content;
             width: 150px;
+            height: 40px;
+            outline:0;
+            border:1px solid var(--dark-border,#c8cccf);
         }
 
         #memory-buffer, #max-duration {
diff --git a/ide/src/trace/component/setting/SpRecordTemplate.ts b/ide/src/trace/component/setting/SpRecordTemplate.ts
index f46324ce40af75e207d7ba0a47c9321fb01c56f2..e4c8e302f01315456fe378f5ae72ae5b33691c5e 100644
--- a/ide/src/trace/component/setting/SpRecordTemplate.ts
+++ b/ide/src/trace/component/setting/SpRecordTemplate.ts
@@ -126,16 +126,16 @@ export class SpRecordTemplate extends BaseElement {
       let tracePluginConfig: TracePluginConfig = {
         ftraceEvents: traceEventSet,
         hitraceCategories: hitraceCategories,
+        flushIntervalMs: 1000,
         hitraceApps: [],
         bufferSizeKb: 2048,
-        flushIntervalMs: 1000,
+        debugOn: false,
         flushThresholdKb: 4096,
-        parseKsyms: true,
         clock: 'boot',
         tracePeriodMs: 200,
+        parseKsyms: true,
         rawDataPrefix: '',
         traceDurationMs: 0,
-        debugOn: false,
         hitraceTime: this.args.recordSetting!.maxDur,
       };
       let htraceProfilerPluginConfig: ProfilerPluginConfig<TracePluginConfig> = {
@@ -152,37 +152,37 @@ export class SpRecordTemplate extends BaseElement {
   initHtml(): string {
     return `
         <style>
-         :host{
+        .template-config-div {
+          flex-direction: column;
+          margin-bottom: 3vh;
+          width: 80%;
+          display: flex;
+        }
+        .template-title {
+            line-height: 40px;
+            font-weight: 700;
+            margin-right: 10px;
+            opacity: 0.9;
+            font-family: Helvetica-Bold;
+            font-size: 18px;
+            text-align: center;
+        }
+        :host{
+            background: var(--dark-background3,#FFFFFF);
+            border-radius: 0px 16px 16px 0px;
             display: inline-block;
             width: 100%;
             height: 100%;
-            background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 16px 0px;
          }
          .root {
+            font-size:16px;
             width: 100%;
             height: 95%;
             padding-top: 50px;
             padding-left: 54px;
             margin-right: 30px;
-            font-size:16px;
             margin-bottom: 30px;
         }
-        .config-div {
-          width: 80%;
-          display: flex;
-          flex-direction: column;
-          margin-bottom: 3vh;
-        }
-        .title {
-            opacity: 0.9;
-            font-family: Helvetica-Bold;
-            font-size: 18px;
-            text-align: center;
-            line-height: 40px;
-            font-weight: 700;
-            margin-right: 10px;
-        }
         lit-switch {
              display: inline;
              float: right;
@@ -191,15 +191,15 @@ export class SpRecordTemplate extends BaseElement {
         }
         </style>
         <div class="root">
-            <div class="config-div">
+            <div class="template-config-div">
                <div>
-                 <span class="title">Frame timeline</span>
+                 <span class="template-title">Frame timeline</span>
                  <lit-switch class="config_switch" id="frame_timeline"></lit-switch>
                </div>
             </div>
-             <div class="config-div">
+             <div class="template-config-div">
                <div>
-                 <span class="title">Scheduling analysis</span>
+                 <span class="template-title">Scheduling analysis</span>
                  <lit-switch class="config_switch" id="scheduling_analysis"></lit-switch>
                </div>
             </div>
diff --git a/ide/src/trace/component/setting/SpSdkConfig.ts b/ide/src/trace/component/setting/SpSdkConfig.ts
index d7de3d9eae1c7bc20f7179a024d0095b912aab7f..0c13506b99c82901b85a59640746bb658ce29a70 100644
--- a/ide/src/trace/component/setting/SpSdkConfig.ts
+++ b/ide/src/trace/component/setting/SpSdkConfig.ts
@@ -26,7 +26,7 @@ import { SpRecordTrace } from '../SpRecordTrace.js';
 @element('sp-sdk-config')
 export class SpSdkConfig extends BaseElement {
   private worker: Worker | undefined;
-  private configList: any;
+  private sdkConfigList: any;
   private customConfig: HTMLDivElement | undefined | null;
   private selectConfig: LitAllocationSelect | undefined | null;
   private list: Array<HTMLElement> | undefined;
@@ -41,16 +41,16 @@ export class SpSdkConfig extends BaseElement {
     return this.hasAttribute('show');
   }
 
-  set show(show: boolean) {
-    if (show) {
+  set show(sdkConfigShow: boolean) {
+    if (sdkConfigShow) {
       this.setAttribute('show', '');
     } else {
       this.removeAttribute('show');
     }
   }
 
-  set startSamp(start: boolean) {
-    if (start) {
+  set startSamp(sdkConfigStart: boolean) {
+    if (sdkConfigStart) {
       this.setAttribute('startSamp', '');
     } else {
       this.removeAttribute('startSamp');
@@ -101,7 +101,7 @@ export class SpSdkConfig extends BaseElement {
     this.worker!.postMessage(pam);
     this.worker!.onmessage = (event: MessageEvent) => {
       let results = event.data.results;
-      this.configList = results.settingConfig;
+      this.sdkConfigList = results.settingConfig;
       this.initConfig();
     };
   }
@@ -199,47 +199,47 @@ export class SpSdkConfig extends BaseElement {
     this.customConfig!.innerHTML = '';
     this.list = [];
     this.list.push(this.selectConfig!);
-    let switch1 = document.createElement('lit-switch') as LitSwitch;
-    for (let key in this.configList.configuration) {
+    let sdkConfigSwitch = document.createElement('lit-switch') as LitSwitch;
+    for (let key in this.sdkConfigList.configuration) {
       let html = '';
-      let div = document.createElement('div');
-      div.className = 'config-div';
-      let headDiv = document.createElement('div');
-      div.appendChild(headDiv);
-      let title = document.createElement('span');
-      title.className = 'title';
-      title.textContent = key;
-      headDiv.appendChild(title);
-      let des = document.createElement('span');
-      des.textContent = this.configList.configuration[key].description;
-      des.className = 'des';
-      headDiv.appendChild(des);
-      switch (this.configList.configuration[key].type) {
+      let sdkConfigDiv = document.createElement('div');
+      sdkConfigDiv.className = 'sdk-config-div';
+      let sdkConfigHeadDiv = document.createElement('div');
+      sdkConfigDiv.appendChild(sdkConfigHeadDiv);
+      let sdkConfigTitle = document.createElement('span');
+      sdkConfigTitle.className = 'sdk-config-title';
+      sdkConfigTitle.textContent = key;
+      sdkConfigHeadDiv.appendChild(sdkConfigTitle);
+      let sdkConfigDes = document.createElement('span');
+      sdkConfigDes.textContent = this.sdkConfigList.configuration[key].description;
+      sdkConfigDes.className = 'sdk-config-des';
+      sdkConfigHeadDiv.appendChild(sdkConfigDes);
+      switch (this.sdkConfigList.configuration[key].type) {
         case 'string':
-          if (this.configList.configuration[key].enum) {
+          if (this.sdkConfigList.configuration[key].enum) {
             let placeholder = '';
-            if (this.configList.configuration[key].default) {
-              placeholder = this.configList.configuration[key].default;
+            if (this.sdkConfigList.configuration[key].default) {
+              placeholder = this.sdkConfigList.configuration[key].default;
             }
-            html += `<lit-select-v id="${key}" type="${this.configList.configuration[key].type}" default-value="" rounded="" class="select config" mode="multiple" canInsert="" rounded placement = "bottom" configName ="${key}" placeholder="${placeholder}"></lit-select-v>`;
-            div.innerHTML = div.innerHTML + html;
+            html += `<lit-select-v id="${key}" type="${this.sdkConfigList.configuration[key].type}" default-value="" rounded="" class="sdk-config-select config" mode="multiple" canInsert="" rounded placement = "bottom" configName ="${key}" placeholder="${placeholder}"></lit-select-v>`;
+            sdkConfigDiv.innerHTML = sdkConfigDiv.innerHTML + html;
           } else {
             let inputElement = document.createElement('input');
-            inputElement.className = 'input config';
-            if (this.configList.configuration[key].default) {
-              inputElement.value = this.configList.configuration[key].default;
+            inputElement.className = 'sdk-config-input config';
+            if (this.sdkConfigList.configuration[key].default) {
+              inputElement.value = this.sdkConfigList.configuration[key].default;
             }
             inputElement.setAttribute('configName', key);
-            inputElement.setAttribute('type', this.configList.configuration[key].type);
-            div.appendChild(inputElement);
+            inputElement.setAttribute('type', this.sdkConfigList.configuration[key].type);
+            sdkConfigDiv.appendChild(inputElement);
             this.list.push(inputElement);
           }
           break;
         case 'number':
           let numberInput = document.createElement('input');
-          numberInput.className = 'input config';
-          if (this.configList.configuration[key].default) {
-            numberInput.value = this.configList.configuration[key].default;
+          numberInput.className = 'sdk-config-input config';
+          if (this.sdkConfigList.configuration[key].default) {
+            numberInput.value = this.sdkConfigList.configuration[key].default;
           }
           numberInput.setAttribute('configName', key);
           numberInput.setAttribute('type', 'num');
@@ -247,57 +247,57 @@ export class SpSdkConfig extends BaseElement {
             let inputValue = this.checkFloatInput(numberInput.value);
             numberInput.value = inputValue;
           };
-          div.appendChild(numberInput);
+          sdkConfigDiv.appendChild(numberInput);
           this.list.push(numberInput);
           break;
         case 'integer':
           let input = document.createElement('input');
-          input.className = 'input config';
-          if (this.configList.configuration[key].default) {
-            input.value = this.configList.configuration[key].default;
+          input.className = 'sdk-config-input config';
+          if (this.sdkConfigList.configuration[key].default) {
+            input.value = this.sdkConfigList.configuration[key].default;
           }
           input.setAttribute('configName', key);
-          input.setAttribute('type', this.configList.configuration[key].type);
+          input.setAttribute('type', this.sdkConfigList.configuration[key].type);
           input.oninput = (ev) => {
             let inputValue = this.checkIntegerInput(input.value);
             input.value = inputValue;
-            title.setAttribute('value', input.value);
+            sdkConfigTitle.setAttribute('value', input.value);
           };
-          div.appendChild(input);
+          sdkConfigDiv.appendChild(input);
           this.list.push(input);
           break;
         case 'boolean':
-          switch1.className = 'switch1 config';
-          switch1.setAttribute('configName', key);
-          switch1.setAttribute('type', this.configList.configuration[key].type);
-          if (this.configList.configuration[key].default == 'true') {
-            switch1.setAttribute('checked', '');
-            switch1.setAttribute('value', 'true');
+          sdkConfigSwitch.className = 'switch1 config';
+          sdkConfigSwitch.setAttribute('configName', key);
+          sdkConfigSwitch.setAttribute('type', this.sdkConfigList.configuration[key].type);
+          if (this.sdkConfigList.configuration[key].default == 'true') {
+            sdkConfigSwitch.setAttribute('checked', '');
+            sdkConfigSwitch.setAttribute('value', 'true');
           } else {
-            switch1.removeAttribute('checked');
-            switch1.setAttribute('value', 'false');
+            sdkConfigSwitch.removeAttribute('checked');
+            sdkConfigSwitch.setAttribute('value', 'false');
           }
-          headDiv.appendChild(switch1);
-          this.list.push(switch1);
+          sdkConfigHeadDiv.appendChild(sdkConfigSwitch);
+          this.list.push(sdkConfigSwitch);
           break;
       }
-      this.customConfig!.appendChild(div);
-      if (this.configList.configuration[key].enum) {
+      this.customConfig!.appendChild(sdkConfigDiv);
+      if (this.sdkConfigList.configuration[key].enum) {
         let select = this.shadowRoot!.querySelector<LitSelectV>(`#${key}`);
         select!.setAttribute('type', 'enum');
-        select!.setAttribute('value', this.configList.configuration[key].default);
-        select!.dataSource(this.configList.configuration[key].enum, '');
+        select!.setAttribute('value', this.sdkConfigList.configuration[key].default);
+        select!.dataSource(this.sdkConfigList.configuration[key].enum, '');
         this.list.push(select!);
         select!.addEventListener('click', (event: any) => {
           select!.setAttribute('value', select!.value);
         });
       }
     }
-    switch1.addEventListener('change', (event: any) => {
-      if (switch1.hasAttribute('checked')) {
-        switch1.setAttribute('value', 'true');
+    sdkConfigSwitch.addEventListener('change', (event: any) => {
+      if (sdkConfigSwitch.hasAttribute('checked')) {
+        sdkConfigSwitch.setAttribute('value', 'true');
       } else {
-        switch1.setAttribute('value', 'false');
+        sdkConfigSwitch.setAttribute('value', 'false');
       }
     });
   }
@@ -333,40 +333,15 @@ export class SpSdkConfig extends BaseElement {
     }
   }
 
-  initConfigList(): void {
-    this.configList = {
-      name: '',
-      configuration: {
-        ss: {
-          type: 'string',
-          default: 'strsadsa',
-          description: 'xxxx',
-        },
-        aa: {
-          type: 'string',
-          default: '11',
-          enum: ['consistent', '11', 'delegated'],
-        },
-        cc: {
-          type: 'number',
-          description: 'number1111',
-        },
-        ee: {
-          type: 'integer',
-          default: '12',
-          description: 'integer1222',
-        },
-        ff: {
-          type: 'boolean',
-          description: 'switchhh',
-        },
-      },
-    };
-  }
-
   initHtml(): string {
     return `
         <style>
+        .sdk-config-div {
+           flex-direction: column;
+           width: 80%;
+           display: flex;
+           gap: 15px;
+        }
         :host{
             display: inline-block;
             width: 100%;
@@ -374,29 +349,20 @@ export class SpSdkConfig extends BaseElement {
             background: var(--dark-background3,#FFFFFF);
             border-radius: 0px 16px 16px 0px;
         }
-
         .root {
-            padding-top: 30px;
+            font-size:16px;
             padding-left: 54px;
             margin-right: 30px;
-            font-size:16px;
+            padding-top: 30px;
             margin-bottom: 30px;
         }
-
-        .config-div {
-           width: 80%;
-           display: flex;
-           flex-direction: column;
-           gap: 15px;
-        }
-
-        :host([show]) .config-div {
+        :host([show]) .sdk-config-div {
            display: flex;
            flex-direction: column;
            margin-bottom: 1vh;
         }
 
-        :host(:not([show])) .config-div {
+        :host(:not([show])) .sdk-config-div {
            margin-top: 5vh;
            margin-bottom: 5vh;
            gap: 25px;
@@ -406,17 +372,17 @@ export class SpSdkConfig extends BaseElement {
            display: none;
         }
 
-        .title {
+        .sdk-config-title {
           opacity: 0.9;
+          line-height: 40px;
           font-family: Helvetica-Bold;
           font-size: 18px;
           text-align: center;
-          line-height: 40px;
           font-weight: 700;
           margin-right: 10px;
         }
 
-        .des {
+        .sdk-config-des {
           opacity: 0.6;
           font-family: Helvetica;
           font-size: 14px;
@@ -425,16 +391,10 @@ export class SpSdkConfig extends BaseElement {
           font-weight: 400;
         }
 
-        .select {
+        .sdk-config-select {
           border-radius: 15px;
         }
 
-        lit-switch {
-          display:inline;
-          float: right;
-          height: 38px;
-          margin-top: 10px;
-        }
         input {
            height: 25px;
            outline:none;
@@ -444,8 +404,13 @@ export class SpSdkConfig extends BaseElement {
         input::-webkit-input-placeholder{
             color:var(--bark-prompt,#999999);
         }
-
-        .input {
+        lit-switch {
+          display:inline;
+          float: right;
+          height: 38px;
+          margin-top: 10px;
+        }
+        .sdk-config-input {
             border: 1px solid var(--dark-background5,#ccc);
             font-family: Helvetica;
             font-size: 14px;
@@ -455,23 +420,23 @@ export class SpSdkConfig extends BaseElement {
             font-weight: 400;
         }
         
-        :host([startSamp]) .input {
+        :host([startSamp]) .sdk-config-input {
             background: var(--dark-background5,#FFFFFF);
         }
         
-        :host(:not([startSamp])) .input {
+        :host(:not([startSamp])) .sdk-config-input {
             color: var(--dark-color1,#212121);
         }
        
         </style>
         <div class="root">
-            <div class="config-div">
+            <div class="sdk-config-div">
                 <div>
-                    <span class="title">Start Custom Config</span>
+                    <span class="sdk-config-title">Start Custom Config</span>
                     <lit-switch class="config_switch" ></lit-switch>
                 </div>
             </div>
-            <div class="config-div" id="select_config">
+            <div class="sdk-config-div" id="select_config">
                 <lit-allocation-select show-search class="processSelect" rounded default-value="" id="pid" placement="bottom" style="width:100%"></lit-allocation-select>
             </div>
             <div class="configList">
diff --git a/ide/src/trace/component/setting/SpVmTracker.ts b/ide/src/trace/component/setting/SpVmTracker.ts
index 7771019cd58193b00bce9beeb59f6d52242c46be..5f5b7e384436e6e79ada8bb259225b8b4b17857d 100644
--- a/ide/src/trace/component/setting/SpVmTracker.ts
+++ b/ide/src/trace/component/setting/SpVmTracker.ts
@@ -26,8 +26,8 @@ import { HdcDeviceManager } from '../../../hdc/HdcDeviceManager.js';
 
 @element('sp-vm-tracker')
 export class SpVmTracker extends BaseElement {
-  private processInput: LitAllocationSelect | undefined | null;
-  private selectProcess: HTMLInputElement | undefined | null;
+  private vmTrackerProcessInput: LitAllocationSelect | undefined | null;
+  private vmTrackerSelectProcess: HTMLInputElement | undefined | null;
   private configList: Array<any> = [];
 
   set startSamp(start: boolean) {
@@ -35,18 +35,18 @@ export class SpVmTracker extends BaseElement {
       this.setAttribute('startSamp', '');
     } else {
       this.removeAttribute('startSamp');
-      let input = this.processInput?.shadowRoot?.querySelector<HTMLInputElement>('#singleInput');
+      let input = this.vmTrackerProcessInput?.shadowRoot?.querySelector<HTMLInputElement>('#singleInput');
       input!.value = '';
     }
   }
 
   get process(): string {
-    if (this.processInput!.value.length > 0) {
-      let result = this.processInput!.value.match(/\((.+?)\)/g);
+    if (this.vmTrackerProcessInput!.value.length > 0) {
+      let result = this.vmTrackerProcessInput!.value.match(/\((.+?)\)/g);
       if (result) {
         return result.toString().replace('(', '').replace(')', '');
       } else {
-        return this.processInput!.value;
+        return this.vmTrackerProcessInput!.value;
       }
     }
     return '';
@@ -60,18 +60,18 @@ export class SpVmTracker extends BaseElement {
     this.initConfigList();
     let configList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
     this.configList.forEach((config) => {
-      let div = document.createElement('div');
+      let vmTrackerDiv = document.createElement('div');
       if (config.hidden) {
-        div.className = 'config-div hidden';
+        vmTrackerDiv.className = 'vm-config-div hidden';
       } else {
-        div.className = 'config-div';
+        vmTrackerDiv.className = 'vm-config-div';
       }
       let headDiv = document.createElement('div');
-      div.appendChild(headDiv);
-      let title = document.createElement('span');
-      title.className = 'title';
-      title.textContent = config.title;
-      headDiv.appendChild(title);
+      vmTrackerDiv.appendChild(headDiv);
+      let vmTrackerTitle = document.createElement('span');
+      vmTrackerTitle.className = 'title';
+      vmTrackerTitle.textContent = config.title;
+      headDiv.appendChild(vmTrackerTitle);
       let des = document.createElement('span');
       des.textContent = config.des;
       des.className = 'des';
@@ -81,19 +81,19 @@ export class SpVmTracker extends BaseElement {
           let html1 = '';
           html1 += `<lit-allocation-select style="width: 100%;" rounded="" default-value="" class="select config" placement="bottom" title="${config.title}"  placeholder="${config.selectArray[0]}">`;
           html1 += `</lit-allocation-select>`;
-          div.innerHTML = div.innerHTML + html1;
+          vmTrackerDiv.innerHTML = vmTrackerDiv.innerHTML + html1;
           break;
         case 'switch':
-          let switch1 = document.createElement('lit-switch') as LitSwitch;
-          switch1.className = 'config';
-          switch1.title = config.title;
+          let vmTrackerSwitch = document.createElement('lit-switch') as LitSwitch;
+          vmTrackerSwitch.className = 'config';
+          vmTrackerSwitch.title = config.title;
           if (config.value) {
-            switch1.checked = true;
+            vmTrackerSwitch.checked = true;
           } else {
-            switch1.checked = false;
+            vmTrackerSwitch.checked = false;
           }
           if (config.title == 'Start VM Tracker Record') {
-            switch1.addEventListener('change', (event: any) => {
+            vmTrackerSwitch.addEventListener('change', (event: any) => {
               let detail = event.detail;
               if (detail.checked) {
                 this.startSamp = true;
@@ -104,59 +104,59 @@ export class SpVmTracker extends BaseElement {
               }
             });
           }
-          headDiv.appendChild(switch1);
+          headDiv.appendChild(vmTrackerSwitch);
           break;
         default:
           break;
       }
-      configList!.appendChild(div);
+      configList!.appendChild(vmTrackerDiv);
     });
-    this.processInput = this.shadowRoot?.querySelector<LitAllocationSelect>("lit-allocation-select[title='Process']");
-    let inputDiv = this.processInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement;
-    this.selectProcess = this.processInput!.shadowRoot?.querySelector('input') as HTMLInputElement;
+    this.vmTrackerProcessInput = this.shadowRoot?.querySelector<LitAllocationSelect>("lit-allocation-select[title='Process']");
+    let vmTrackerMul = this.vmTrackerProcessInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement;
+    this.vmTrackerSelectProcess = this.vmTrackerProcessInput!.shadowRoot?.querySelector('input') as HTMLInputElement;
     let processData: Array<string> = [];
-    inputDiv!.addEventListener('mousedown', (ev) => {
+    vmTrackerMul!.addEventListener('mousedown', (ev) => {
       if (SpRecordTrace.serialNumber == '') {
-        this.processInput!.processData = [];
-        this.processInput!.initData();
+        this.vmTrackerProcessInput!.processData = [];
+        this.vmTrackerProcessInput!.initData();
       }
     });
-    inputDiv!.addEventListener('mouseup', () => {
+    vmTrackerMul!.addEventListener('mouseup', () => {
       if (SpRecordTrace.serialNumber == '') {
-        this.processInput!.processData = [];
-        this.processInput!.initData();
+        this.vmTrackerProcessInput!.processData = [];
+        this.vmTrackerProcessInput!.initData();
       } else {
         if (SpRecordTrace.isVscode) {
-          let cmd = Cmd.formatString(CmdConstant.CMD_GET_PROCESS_DEVICES, [SpRecordTrace.serialNumber]);
-          Cmd.execHdcCmd(cmd, (res: string) => {
+          let vmTrackerCmd = Cmd.formatString(CmdConstant.CMD_GET_PROCESS_DEVICES, [SpRecordTrace.serialNumber]);
+          Cmd.execHdcCmd(vmTrackerCmd, (res: string) => {
             processData = [];
-            let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-            for (let lineVal of lineValues) {
+            let lineArray: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+            for (let lineVal of lineArray) {
               if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
                 continue;
               }
-              let process: string[] = lineVal.trim().split(' ');
-              if (process.length == 2) {
-                let processId = process[0];
-                let processName = process[1];
+              let processArray: string[] = lineVal.trim().split(' ');
+              if (processArray.length == 2) {
+                let processId = processArray[0];
+                let processName = processArray[1];
                 processData.push(processName + '(' + processId + ')');
               }
             }
-            this.processInput!.processData = processData;
-            this.processInput!.initData();
+            this.vmTrackerProcessInput!.processData = processData;
+            this.vmTrackerProcessInput!.initData();
           });
         } else {
           HdcDeviceManager.connect(SpRecordTrace.serialNumber).then((conn) => {
             if (conn) {
-              HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((res) => {
+              HdcDeviceManager.shellResultAsString(CmdConstant.CMD_GET_PROCESS, false).then((result) => {
                 processData = [];
-                if (res) {
-                  let lineValues: string[] = res.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
-                  for (let lineVal of lineValues) {
-                    if (lineVal.indexOf('__progname') != -1 || lineVal.indexOf('PID CMD') != -1) {
+                if (result) {
+                  let lineValues: string[] = result.replace(/\r\n/g, '\r').replace(/\n/g, '\r').split(/\r/);
+                  for (let lineItem of lineValues) {
+                    if (lineItem.indexOf('__progname') != -1 || lineItem.indexOf('PID CMD') != -1) {
                       continue;
                     }
-                    let process: string[] = lineVal.trim().split(' ');
+                    let process: string[] = lineItem.trim().split(' ');
                     if (process.length == 2) {
                       let processId = process[0];
                       let processName = process[1];
@@ -164,8 +164,8 @@ export class SpVmTracker extends BaseElement {
                     }
                   }
                 }
-                this.processInput!.processData = processData;
-                this.processInput!.initData();
+                this.vmTrackerProcessInput!.processData = processData;
+                this.vmTrackerProcessInput!.initData();
               });
             }
           });
@@ -214,22 +214,32 @@ export class SpVmTracker extends BaseElement {
     return `
         <style>
         :host{
+            background: var(--dark-background3,#FFFFFF);
+            border-radius: 0px 16px 16px 0px;
             display: inline-block;
             width: 100%;
             height: 100%;
-            background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 16px 0px;
         }
 
-        .root {
+        .vm-tracker {
+            font-size:16px;
+            margin-bottom: 30px;
             padding-top: 30px;
             padding-left: 54px;
             margin-right: 30px;
-            font-size:16px;
-            margin-bottom: 30px;
+        }
+        
+        .title {
+          text-align: center;
+          line-height: 40px;
+          font-weight: 700;
+          margin-right: 10px;
+          opacity: 0.9;
+          font-family: Helvetica-Bold;
+          font-size: 18px;
         }
 
-        .config-div {
+        .vm-config-div {
            width: 80%;
            display: flex;
            flex-direction: column;
@@ -237,24 +247,14 @@ export class SpVmTracker extends BaseElement {
            margin-bottom: 5vh;
            gap: 25px;
         }
-        
-        .title {
-          opacity: 0.9;
-          font-family: Helvetica-Bold;
-          font-size: 18px;
-          text-align: center;
-          line-height: 40px;
-          font-weight: 700;
-          margin-right: 10px;
-        }
 
         .des {
-          opacity: 0.6;
-          font-family: Helvetica;
-          font-size: 14px;
           text-align: center;
           line-height: 35px;
           font-weight: 400;
+          opacity: 0.6;
+          font-family: Helvetica;
+          font-size: 14px;
         }
 
         .select {
@@ -267,35 +267,37 @@ export class SpVmTracker extends BaseElement {
           height: 38px;
           margin-top: 10px;
         }
-        input {
-           height: 25px;
-           outline:none;
-           border-radius: 16px;
-           text-indent:2%
-        }
+        
         input::-webkit-input-placeholder{
             color:var(--bark-prompt,#999999);
         }
 
         .input {
+            text-align: left;
+            line-height: 20px;
+            font-weight: 400;
             border: 1px solid var(--dark-background5,#ccc);
             font-family: Helvetica;
             font-size: 14px;
             color: var(--dark-color1,#212121);
-            text-align: left;
-            line-height: 20px;
-            font-weight: 400;
         }
 
         :host([startSamp]) .input {
             background: var(--dark-background5,#FFFFFF);
         }
         
+        input {
+           outline:none;
+           border-radius: 16px;
+           height: 25px;
+           text-indent:2%
+        }
+        
         :host(:not([startSamp])) .input {
             color: #999999;
         }
         </style>
-        <div class="root">
+        <div class="root vm-tracker">
             <div class="configList">
             </div>
         </div>
diff --git a/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts b/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts
index 0b65c6c75fdf915df3ac90785ba0e459a4ef8ce1..49f6583673e10b782096c11b0b5131db9fce58f6 100644
--- a/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts
+++ b/ide/src/trace/component/setting/bean/ProfilerServiceTypes.ts
@@ -853,8 +853,6 @@ export interface NativeHookConfig {
   smbPages: number;
   maxStackDepth: number;
   processName: string;
-  mallocFreeMatchingInterval: number;
-  mallocFreeMatchingCnt: number;
   stringCompressed: boolean;
   fpUnwind: boolean;
   blocked: boolean;
diff --git a/ide/src/trace/component/setting/utils/PluginConvertUtils.ts b/ide/src/trace/component/setting/utils/PluginConvertUtils.ts
index 8e823f5726000edbfe81d9159505e6399cb0ea8a..a1ae9b3b55352d94ff2b2dd38e84c5b1bc3cc04e 100644
--- a/ide/src/trace/component/setting/utils/PluginConvertUtils.ts
+++ b/ide/src/trace/component/setting/utils/PluginConvertUtils.ts
@@ -68,34 +68,16 @@ export class PluginConvertUtils {
         } else {
           switch (typeof value) {
             case 'bigint':
-              prefixText =
-                prefixText +
-                ' '.repeat(spacesNumber).repeat(indentation + 1) +
-                this.humpToSnake(key) +
-                ': ' +
-                value.toString() +
-                this.crlf;
+              prefixText = this.getMontageStrings(prefixText, spacesNumber, indentation, key, value);
               break;
             case 'boolean':
-              prefixText =
-                prefixText +
-                ' '.repeat(spacesNumber).repeat(indentation + 1) +
-                this.humpToSnake(key) +
-                ': ' +
-                value.toString() +
-                this.crlf;
+              prefixText = this.getMontageStrings(prefixText, spacesNumber, indentation, key, value);
               break;
             case 'number':
               if (value == 0 && !needColon) {
                 break;
               }
-              prefixText =
-                prefixText +
-                ' '.repeat(spacesNumber).repeat(indentation + 1) +
-                this.humpToSnake(key) +
-                ': ' +
-                value.toString() +
-                this.crlf;
+              prefixText = this.getMontageStrings(prefixText, spacesNumber, indentation, key, value);
               break;
             case 'string':
               if (value == '') {
@@ -240,4 +222,13 @@ export class PluginConvertUtils {
   private static humpToSnake(humpString: string): string {
     return humpString.replace(/[A-Z]/g, (value) => '_' + value.toLowerCase());
   }
+
+  private static getMontageStrings(prefixText: string, spacesNumber: number, indentation: number, key: string, value: any): string{
+    return prefixText +
+    ' '.repeat(spacesNumber).repeat(indentation + 1) +
+    this.humpToSnake(key) +
+    ': ' +
+    value.toString() +
+    this.crlf;
+  }
 }
diff --git a/ide/src/trace/component/trace/TimerShaftElement.ts b/ide/src/trace/component/trace/TimerShaftElement.ts
index d9f58b72392ee01336c4acb55518756df1279645..1f9744c860142f31e213c4bd082e71106c788a6e 100644
--- a/ide/src/trace/component/trace/TimerShaftElement.ts
+++ b/ide/src/trace/component/trace/TimerShaftElement.ts
@@ -33,23 +33,23 @@ export function randomRgbColor() {
 }
 
 export function ns2s(ns: number): string {
-  let second1 = 1_000_000_000; // 1 second
-  let millisecond1 = 1_000_000; // 1 millisecond
-  let microsecond1 = 1_000; // 1 microsecond
+  let one_second = 1_000_000_000; // 1 second
+  let one_millisecond = 1_000_000; // 1 millisecond
+  let one_microsecond = 1_000; // 1 microsecond
   let nanosecond1 = 1000.0;
-  let res;
-  if (ns >= second1) {
-    res = (ns / 1000 / 1000 / 1000).toFixed(1) + ' s';
-  } else if (ns >= millisecond1) {
-    res = (ns / 1000 / 1000).toFixed(1) + ' ms';
-  } else if (ns >= microsecond1) {
-    res = (ns / 1000).toFixed(1) + ' μs';
+  let result;
+  if (ns >= one_second) {
+    result = (ns / 1000 / 1000 / 1000).toFixed(1) + ' s';
+  } else if (ns >= one_millisecond) {
+    result = (ns / 1000 / 1000).toFixed(1) + ' ms';
+  } else if (ns >= one_microsecond) {
+    result = (ns / 1000).toFixed(1) + ' μs';
   } else if (ns > 0) {
-    res = ns.toFixed(1) + ' ns';
+    result = ns.toFixed(1) + ' ns';
   } else {
-    res = ns.toFixed(1) + ' s';
+    result = ns.toFixed(1) + ' s';
   }
-  return res;
+  return result;
 }
 
 export function ns2x(ns: number, startNS: number, endNS: number, duration: number, rect: Rect) {
@@ -149,8 +149,8 @@ export class TimerShaftElement extends BaseElement {
   reset(): void {
     this.loadComplete = false;
     if (this.rangeRuler) {
-      this.rangeRuler.markA.frame.x = 0;
-      this.rangeRuler.markB.frame.x = this.rangeRuler.frame.width;
+      this.rangeRuler.markAObj.frame.x = 0;
+      this.rangeRuler.markBObj.frame.x = this.rangeRuler.frame.width;
       this.rangeRuler.cpuUsage = [];
       this.sportRuler!.flagList.length = 0;
       this.sportRuler!.isRangeSelect = false;
diff --git a/ide/src/trace/component/trace/base/ColorUtils.ts b/ide/src/trace/component/trace/base/ColorUtils.ts
index a9f406927f0ab1ff1aab673afa4cc521bddc4801..0eb82b519b848a681a73154e6c43c2c327e58242 100644
--- a/ide/src/trace/component/trace/base/ColorUtils.ts
+++ b/ide/src/trace/component/trace/base/ColorUtils.ts
@@ -18,38 +18,6 @@ import { CpuStruct } from '../../../database/ui-worker/ProcedureWorkerCPU.js';
 export class ColorUtils {
   public static GREY_COLOR: string = '#f0f0f0';
 
-  public static MD_PALETTE_A: Array<string> = [
-    '#40b3e7',
-    '#606e75',
-    '#8d9171',
-    '#8f8f8f',
-    '#7a9160',
-    '#9fafc4',
-    '#8a8a8b',
-    '#9e8e00',
-    '#696e35',
-    '#5c4d21',
-    '#18a8a1',
-    '#a16a40',
-    '#a94eb9',
-    '#886EB4',
-  ];
-  public static MD_PALETTE_B: Array<string> = [
-    '#9785D3',
-    '#A27F7E',
-    '#00bdd6',
-    '#94B5F4',
-    '#B282F6',
-    '#E97978',
-    '#7AD7E6',
-    '#A1C38A',
-    '#DB8E86',
-    '#42B7A4',
-    '#AACEA0',
-    '#E69553',
-    '#7EC6BB',
-    '#C6D9F2',
-  ];
   public static FUNC_COLOR_A: Array<string> = [
     '#40b3e7',
     '#606e75',
@@ -84,7 +52,7 @@ export class ColorUtils {
   ];
 
   public static JANK_COLOR: Array<string> = ['#42A14D', '#C0CE85', '#FF651D', '#FFE335', '#009DFA', '#E97978'];
-  public static MD_PALETTE: Array<string> = ColorUtils.MD_PALETTE_B;
+  public static MD_PALETTE: Array<string> = ColorUtils.FUNC_COLOR_B;
   public static FUNC_COLOR: Array<string> = ColorUtils.FUNC_COLOR_B;
 
   public static hash(str: string, max: number): number {
diff --git a/ide/src/trace/component/trace/base/RangeSelect.ts b/ide/src/trace/component/trace/base/RangeSelect.ts
index 47d8b544126211463313471e31778fa580b7ade2..cd7833e530aa44e868945d127561e39c22282724 100644
--- a/ide/src/trace/component/trace/base/RangeSelect.ts
+++ b/ide/src/trace/component/trace/base/RangeSelect.ts
@@ -62,36 +62,36 @@ export class RangeSelect {
     return this.spacerEL.containPoint(ev, { left: 248 });
   }
 
-  mouseDown(ev: MouseEvent) {
+  mouseDown(eventDown: MouseEvent) {
     if (this.isHover) {
       this.isMouseDown = true;
       return;
     }
-    if (this.isInRowsEl(ev)) {
+    if (this.isInRowsEl(eventDown)) {
       this.rangeTraceRow = [];
       this.isMouseDown = true;
       TraceRow.rangeSelectObject = undefined;
-      this.startX = ev.pageX - this.rowsEL!.getBoundingClientRect().left - 248;
-      if (this.isInSpacerEL(ev)) {
+      this.startX = eventDown.pageX - this.rowsEL!.getBoundingClientRect().left - 248;
+      if (this.isInSpacerEL(eventDown)) {
         this.startY = 0;
-        this.startY2 = ev.pageY - this.spacerEL.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
+        this.startY2 = eventDown.pageY - this.spacerEL.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
       } else {
         this.startY =
-          ev.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height;
-        this.startY2 = ev.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
+          eventDown.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height;
+        this.startY2 = eventDown.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
       }
     }
   }
 
-  mouseUp(ev: MouseEvent) {
+  mouseUp(mouseEventUp: MouseEvent) {
     if (this.drag) {
-      this.endX = ev.pageX - this.rowsEL!.getBoundingClientRect().left - 248;
-      if (this.isInSpacerEL(ev)) {
+      this.endX = mouseEventUp.pageX - this.rowsEL!.getBoundingClientRect().left - 248;
+      if (this.isInSpacerEL(mouseEventUp)) {
         this.endY = 0;
-        this.endY2 = ev.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
+        this.endY2 = mouseEventUp.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
       } else {
-        this.endY = ev.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height;
-        this.endY2 = ev.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
+        this.endY = mouseEventUp.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height;
+        this.endY2 = mouseEventUp.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
       }
       if (this.selectHandler) {
         this.selectHandler(this.rangeTraceRow || [], !this.isHover);
@@ -118,15 +118,15 @@ export class RangeSelect {
     return notTimeHeight && (this.rangeTraceRow?.isNotEmpty() ?? false) && !this.isMouseDown;
   }
 
-  mouseOut(ev: MouseEvent) {
+  mouseOut(mouseEventOut: MouseEvent) {
     if (this.drag) {
       this.endX = this.rowsEL!.getBoundingClientRect().right - this.rowsEL!.getBoundingClientRect().left - 248;
-      if (this.isInSpacerEL(ev)) {
+      if (this.isInSpacerEL(mouseEventOut)) {
         this.endY = 0;
-        this.endY2 = ev.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
+        this.endY2 = mouseEventOut.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
       } else {
-        this.endY = ev.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height;
-        this.endY2 = ev.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
+        this.endY = mouseEventOut.pageY - this.rowsEL!.getBoundingClientRect().top + this.spacerEL.getBoundingClientRect().height;
+        this.endY2 = mouseEventOut.pageY - this.spacerEL!.getBoundingClientRect().top - this.rowsPaneEL!.scrollTop;
       }
       if (this.selectHandler && this.isMouseDown) {
         this.selectHandler(this.rangeTraceRow || [], !this.isHover);
@@ -178,12 +178,8 @@ export class RangeSelect {
             let endX = markB < markA ? markA : markB;
             rangeSelect.startX = startX;
             rangeSelect.endX = endX;
-            rangeSelect.startNS = Math.floor(
-              ((TraceRow.range!.endNS - TraceRow.range!.startNS) * startX) / it.frame.width + TraceRow.range!.startNS!
-            );
-            rangeSelect.endNS = Math.floor(
-              ((TraceRow.range!.endNS - TraceRow.range!.startNS) * endX) / it.frame.width + TraceRow.range!.startNS!
-            );
+            rangeSelect.startNS = RangeSelect.SetNS(it, startX);
+            rangeSelect.endNS = RangeSelect.SetNS(it, endX);
             if (rangeSelect.startNS <= TraceRow.range!.startNS) {
               rangeSelect.startNS = TraceRow.range!.startNS;
             }
@@ -256,12 +252,8 @@ export class RangeSelect {
           let endX = Math.floor(rt.x + rt.width > it.frame.width ? it.frame.width : rt.x + rt.width);
           rangeSelect.startX = startX;
           rangeSelect.endX = endX;
-          rangeSelect.startNS = Math.floor(
-            ((TraceRow.range!.endNS - TraceRow.range!.startNS) * startX) / it.frame.width + TraceRow.range!.startNS!
-          );
-          rangeSelect.endNS = Math.floor(
-            ((TraceRow.range!.endNS - TraceRow.range!.startNS) * endX) / it.frame.width + TraceRow.range!.startNS!
-          );
+          rangeSelect.startNS = RangeSelect.SetNS(it, startX);
+          rangeSelect.endNS = RangeSelect.SetNS(it, endX);
         }
         TraceRow.rangeSelectObject = rangeSelect;
         it.rangeSelect = true;
@@ -274,4 +266,10 @@ export class RangeSelect {
     this.timerShaftEL!.sportRuler!.isRangeSelect = this.rangeTraceRow?.length > 0;
     this.timerShaftEL!.sportRuler!.draw();
   }
+
+  static SetNS(row: TraceRow<any>, num: number): number{
+    return Math.floor(
+        ((TraceRow.range!.endNS - TraceRow.range!.startNS) * num) / row.frame.width + TraceRow.range!.startNS!
+    );
+  }
 }
diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts
index ffc52f46111929503bd87191d1c8631d15343d72..95118858a864a862ac77a602ee02c86c63904ebd 100644
--- a/ide/src/trace/component/trace/base/TraceRow.ts
+++ b/ide/src/trace/component/trace/base/TraceRow.ts
@@ -130,6 +130,8 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   asyncFuncNamePID: number | undefined | null;
   translateY: number = 0; //single canvas offsetY;
   childrenList: Array<TraceRow<any>> = [];
+  familyGenealogy:Array<{rowId:string | undefined | null, rowType:string | undefined | null}> = [];
+
   depth: number = 1;
   focusHandler?: (ev: MouseEvent) => void | undefined;
 
@@ -315,7 +317,15 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     );
   }
 
+  replaceTraceRow(newNode:any, oldNode:any) {
+    let oldIndex = this.childrenList.indexOf(oldNode);
+    if (oldIndex != -1) {
+      this.childrenList.splice(oldIndex, 1, newNode);
+    }
+  }
+
   addChildTraceRow(child: TraceRow<any>) {
+    this.addFamilyGenealogy(child);
     this.depth = 2;
     if (child.rowType == TraceRow.ROW_TYPE_HIPERF_PROCESS) {
       this.depth = 3;
@@ -323,8 +333,16 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     this.childrenList.push(child);
   }
 
+  private addFamilyGenealogy(child: TraceRow<any>) {
+    if (this.familyGenealogy.length > 0) {
+      child.familyGenealogy.push(...this.familyGenealogy)
+    }
+    child.familyGenealogy.push({rowId:this.rowId,rowType:this.rowType})
+  }
+
   addChildTraceRowAfter(child: TraceRow<any>, targetRow: TraceRow<any>) {
     this.depth = 2;
+    this.addFamilyGenealogy(child);
     let index = this.childrenList.indexOf(targetRow);
     if (index != -1) {
       this.childrenList.splice(index + 1, 0, child);
@@ -334,6 +352,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
   }
 
   addChildTraceRowSpecifyLocation(child: TraceRow<any>, index: number) {
+    this.addFamilyGenealogy(child);
     this.childrenList.splice(index, 0, child);
   }
   insertAfter(newEl: DocumentFragment, targetEl: HTMLElement) {
@@ -722,10 +741,10 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
         parentCheck!.checked = true;
         parentCheck!.indeterminate = false;
       }
-      checkList?.forEach((it) => {
-        it.checkType = '2';
-        it.rangeSelect = true;
-        it.draw();
+      checkList?.forEach((rowItem) => {
+        rowItem.checkType = '2';
+        rowItem.rangeSelect = true;
+        rowItem.draw();
       });
       checkList2?.forEach((it) => {
         it.checkType = '2';
@@ -748,10 +767,10 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
         it.rangeSelect = true;
         it.draw();
       });
-      unselectedList?.forEach((it) => {
-        it.checkType = '0';
-        it.rangeSelect = false;
-        it.draw();
+      unselectedList?.forEach((item) => {
+        item.checkType = '0';
+        item.rangeSelect = false;
+        item.draw();
       });
       unselectedList2?.forEach((it) => {
         it.checkType = '0';
@@ -1011,7 +1030,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     }
   }
 
-  focusContain(e: MouseEvent): boolean {
+  focusContain(e: MouseEvent, inFavoriteArea: boolean): boolean {
     let _y = (e.currentTarget as HTMLElement).getBoundingClientRect().y;
     let myRect = this.getBoundingClientRect();
     let x = e.offsetX;
@@ -1019,7 +1038,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     if (x >= myRect.x && x <= myRect.x + myRect.width && y >= myRect.y && y <= myRect.y + myRect.height) {
       this.hoverX = x - this.describeEl!.clientWidth;
       this.hoverY = y - myRect.y;
-      this.isHover = true;
+      this.isHover = this.collect === inFavoriteArea;
       return true;
     } else {
       this.isHover = false;
diff --git a/ide/src/trace/component/trace/base/TraceRowConfig.ts b/ide/src/trace/component/trace/base/TraceRowConfig.ts
index c9397ddb69a9a1c69d2e68e4c52bcca282c49544..c40f91b1ff0a36abc84fb5fcf340f823d69eab1c 100644
--- a/ide/src/trace/component/trace/base/TraceRowConfig.ts
+++ b/ide/src/trace/component/trace/base/TraceRowConfig.ts
@@ -413,30 +413,30 @@ export class TraceRowConfig extends BaseElement {
                     -moz-user-select:none;
                     user-select:none;
                     display: inline-flex;
-                    color: var(--dark-color2,rgba(0,0,0,0.6));
                     width:100%;
+                    color: var(--dark-color2,rgba(0,0,0,0.6));
                 }
                 .multipleSelect{
+                    outline: none;
+                    font-size: 1rem;
+                    -webkit-user-select:none ;
+                    -moz-user-select:none;
                     position: relative;
                     padding: 3px 6px;
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
                     transition: all .3s;
-                    outline: none;
-                    font-size: 1rem;
-                    -webkit-user-select:none ;
-                    -moz-user-select:none;
                     user-select:none;
                     width: 250px;
-                    border:1px solid var(--bark-prompt,#dcdcdc);
-                    border-radius:16px;
-                    background-color: #FFFFFF;
-                    height: 50%;
                     color: #ffffff;
                     cursor: pointer;
                     line-height: 40px;
                     text-align: center;
+                    border:1px solid var(--bark-prompt,#dcdcdc);
+                    border-radius:16px;
+                    background-color: #FFFFFF;
+                    height: 50%;
                     margin: auto 4.2em auto auto;
                 }
                 .processBar {
diff --git a/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts b/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts
index a0df444adfea16de9dda8870cb51ee24f44de436..d5817dfa0ac810d98482d1fc00ee125be9010944 100644
--- a/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts
+++ b/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts
@@ -82,9 +82,9 @@ export class TraceRowRecyclerView extends BaseElement {
     this.container!.onscroll = (ev) => {
       let top = this.container!.scrollTop;
       let skip = 0;
-      for (let i = 0; i < this.visibleObjects.length; i++) {
-        if (this.visibleObjects[i].top >= top) {
-          skip = this.visibleObjects[i].rowIndex - 1;
+      for (let index = 0; index < this.visibleObjects.length; index++) {
+        if (this.visibleObjects[index].top >= top) {
+          skip = this.visibleObjects[index].rowIndex - 1;
           break;
         }
       }
diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts
index 496b23ce7f4aece63b529cc41203446ed71e3398..733c5c7adef544c0da8521838a0e80098bbb63ed 100644
--- a/ide/src/trace/component/trace/base/TraceSheet.ts
+++ b/ide/src/trace/component/trace/base/TraceSheet.ts
@@ -35,7 +35,6 @@ import { ClockStruct } from '../../../database/ui-worker/ProcedureWorkerClock.js
 import { IrqStruct } from '../../../database/ui-worker/ProcedureWorkerIrq.js';
 import { JankStruct } from '../../../database/ui-worker/ProcedureWorkerJank.js';
 import { HeapStruct } from '../../../database/ui-worker/ProcedureWorkerHeap.js';
-import { TabpaneNMCalltree } from '../sheet/native-memory/TabPaneNMCallTree';
 import { LitTable } from '../../../../base-ui/table/lit-table.js';
 import { threadPool } from '../../../database/SqlLite.js';
 import { HeapSnapshotStruct } from '../../../database/ui-worker/ProcedureWorkerHeapSnapshot.js';
@@ -46,6 +45,7 @@ import { TabPaneNMStatisticAnalysis } from '../sheet/native-memory/TabPaneNMStat
 @element('trace-sheet')
 export class TraceSheet extends BaseElement {
   private litTabs: LitTabs | undefined | null;
+  private importDiv: HTMLDivElement | undefined | null;
   private nav: HTMLDivElement | undefined | null;
   private selection: SelectionParam | undefined | null;
   private currentPaneID: string = 'current-selection';
@@ -74,6 +74,7 @@ export class TraceSheet extends BaseElement {
 
   displayTab<T>(...names: string[]): T {
     this.setAttribute('mode', 'max');
+    this.showUploadSoBt(null);
     this.shadowRoot
       ?.querySelectorAll<LitTabpane>('#tabs lit-tabpane')
       .forEach((it) => (it.hidden = !names.some((k) => k === it.id)));
@@ -92,6 +93,7 @@ export class TraceSheet extends BaseElement {
 
   initElements(): void {
     this.litTabs = this.shadowRoot?.querySelector('#tabs');
+    this.importDiv = this.shadowRoot?.querySelector('#import_div');
     this.buildTabs(this.litTabs);
     let minBtn = this.shadowRoot?.querySelector('#min-btn');
     minBtn?.addEventListener('click', () => {});
@@ -112,8 +114,6 @@ export class TraceSheet extends BaseElement {
     });
     this.getComponentByID<any>('box-spt')!.addEventListener('row-click', this.rowClickHandler.bind(this));
     this.getComponentByID<any>('box-pts')!.addEventListener('row-click', this.rowClickHandler.bind(this));
-    this.getComponentByID<any>('box-cs')!.addEventListener('row-click', this.rowClickHandler.bind(this));
-    this.getComponentByID<any>('box-ts')!.addEventListener('row-click', this.rowClickHandler.bind(this));
     this.getComponentByID<any>('box-native-statstics')!.addEventListener('row-click', (e: any) => {
       this.selection!.statisticsSelectData = e.detail;
       let pane = this.getPaneByID('box-native-memory');
@@ -322,18 +322,18 @@ export class TraceSheet extends BaseElement {
             <div id="container" style="border-top: 1px solid var(--dark-border1,#D5D5D5);">
                 <lit-tabs id="tabs" position="top-left" activekey="1" mode="card" >
                     <div slot="right" style="margin: 0 10px; color: var(--dark-icon,#606060);display: flex;align-items: center;">
-                        <div style="width: 20px;height: 20px;display: flex;flex-direction: row;margin-right: 10px">
+                        <div title="SO导入" id="import_div" style="width: 20px;height: 20px;display: flex;flex-direction: row;margin-right: 10px">
                             <input id="import-file" style="display: none;pointer-events: none" type="file" webkitdirectory>
                             <label style="width: 20px;height: 20px;cursor: pointer;" for="import-file">
-                                <lit-icon id="import-btn" name="import-so" style="pointer-events: none" size="20">
+                                <lit-icon id="import-btn" name="copy-csv" style="pointer-events: none" size="20">
                                 </lit-icon>
                             </label>
                         </div>
-                        <lit-icon id="export-btn" name="copy-csv" style="font-weight: bold;cursor: pointer;margin-right: 10px" size="20">
+                        <lit-icon title="下载数据" id="export-btn" name="import-so" style="font-weight: bold;cursor: pointer;margin-right: 10px" size="20">
                         </lit-icon>
-                        <lit-icon id="max-btn" name="vertical-align-top" style="font-weight: bold;cursor: pointer;margin-right: 10px" size="20">
+                        <lit-icon title="最大化" id="max-btn" name="vertical-align-top" style="font-weight: bold;cursor: pointer;margin-right: 10px" size="20">
                         </lit-icon>
-                        <lit-icon id="min-btn" name="down" style="font-weight: bold;cursor: pointer;" size="20">
+                        <lit-icon title="最小化" id="min-btn" name="down" style="font-weight: bold;cursor: pointer;" size="20">
                         </lit-icon>
                     </div>
                 </lit-tabs>
@@ -359,6 +359,7 @@ export class TraceSheet extends BaseElement {
     val.rightNs = data.startTime! + data.dur! -1;
     this.selection = val;
     this.displayTab<TabPaneNMStatisticAnalysis>('box-native-statistic-analysis', 'box-native-calltree').data = val;
+    this.showUploadSoBt(val);
   };
 
   displayFuncData = (data: FuncStruct, scrollCallback: Function) =>
@@ -405,8 +406,9 @@ export class TraceSheet extends BaseElement {
   displayFreqLimitData = () =>
     (this.displayTab<TabPaneCurrentSelection>('box-freq-limit').data = CpuFreqLimitsStruct.selectCpuFreqLimitsStruct);
 
-  rangeSelect(selection: SelectionParam): boolean {
+  rangeSelect(selection: SelectionParam, restore = false): boolean {
     this.selection = selection;
+    this.showUploadSoBt(selection);
     Reflect.ownKeys(tabConfig)
       .reverse()
       .forEach((id) => {
@@ -422,15 +424,48 @@ export class TraceSheet extends BaseElement {
           this.shadowRoot!.querySelector<LitTabpane>(`#${id as string}`)!.hidden = true;
         }
       });
-    let firstPane = this.shadowRoot!.querySelector<LitTabpane>(`lit-tabpane[hidden='false']`);
-    if (firstPane) {
-      this.litTabs?.activeByKey(firstPane.key);
-      this.loadTabPaneData(firstPane.key);
-      this.setAttribute('mode', 'max');
-      return true;
+    if (restore) {
+      if (this.litTabs?.activekey) {
+        this.loadTabPaneData(this.litTabs?.activekey)
+        this.setAttribute('mode', 'max');
+        return true;
+      } else {
+        this.setAttribute('mode', 'hidden');
+        return false;
+      }
+    } else {
+      let firstPane = this.shadowRoot!.querySelector<LitTabpane>(`lit-tabpane[hidden='false']`);
+      if (firstPane) {
+        this.litTabs?.activeByKey(firstPane.key);
+        this.loadTabPaneData(firstPane.key);
+        this.setAttribute('mode', 'max');
+        return true;
+      } else {
+        this.setAttribute('mode', 'hidden');
+        return false;
+      }
+    }
+
+  }
+
+  showUploadSoBt(selection: SelectionParam | null | undefined) {
+    if (
+        selection &&
+        (
+            selection.nativeMemory.length > 0 ||
+            selection.nativeMemoryStatistic.length > 0 ||
+            selection.perfSampleIds.length > 0 ||
+            selection.fileSystemType.length > 0 ||
+            selection.fsCount > 0 ||
+            selection.fileSysVirtualMemory ||
+            selection.vmCount > 0 ||
+            selection.diskIOLatency ||
+            selection.diskIOipids.length > 0
+        )
+    ) {
+      this.importDiv!.style.display = 'flex';
     } else {
-      this.setAttribute('mode', 'hidden');
-      return false;
+      this.importDiv!.style.display = 'none';
     }
   }
 
diff --git a/ide/src/trace/component/trace/base/TraceSheetConfig.ts b/ide/src/trace/component/trace/base/TraceSheetConfig.ts
index 9f37e444eb19f0eda9790bfdbb476901e984b7db..986ad5b523d560cafdc2bdf3f64a61c0c71ebf7d 100644
--- a/ide/src/trace/component/trace/base/TraceSheetConfig.ts
+++ b/ide/src/trace/component/trace/base/TraceSheetConfig.ts
@@ -20,9 +20,7 @@ import { SelectionParam } from '../../../bean/BoxSelection.js';
 import { TabPaneCpuByProcess } from '../sheet/cpu/TabPaneCpuByProcess.js';
 import { TabPaneCpuUsage } from '../sheet/cpu/TabPaneCpuUsage.js';
 import { TabPaneSPT } from '../sheet/cpu/TabPaneSPT.js';
-import { TabPaneContextSwitch } from '../sheet/cpu/TabPaneContextSwitch.js';
 import { TabPanePTS } from '../sheet/cpu/TabPanePTS.js';
-import { TabPaneThreadSwitch } from '../sheet/cpu/TabPaneThreadSwitch.js';
 import { TabPaneSlices } from '../sheet/process/TabPaneSlices.js';
 import { TabPaneCounter } from '../sheet/process/TabPaneCounter.js';
 import { TabPaneFps } from '../sheet/fps/TabPaneFps.js';
@@ -113,25 +111,15 @@ export let tabConfig: any = {
     require: (param: SelectionParam) => param.cpus.length > 0,
   },
   'box-spt': {
-    title: 'States List',
+    title: 'Thread Switches',
     type: TabPaneSPT,
     require: (param: SelectionParam) => param.cpus.length > 0,
   },
-  'box-cs': {
-    title: 'Switches List',
-    type: TabPaneContextSwitch,
-    require: (param: SelectionParam) => param.cpus.length > 0,
-  },
   'box-pts': {
     title: 'Thread States',
     type: TabPanePTS,
     require: (param: SelectionParam) => param.cpus.length > 0,
   },
-  'box-ts': {
-    title: 'Thread Switches',
-    type: TabPaneThreadSwitch,
-    require: (param: SelectionParam) => param.cpus.length > 0,
-  }, //end range select
   'box-slices': {
     title: 'Slices',
     type: TabPaneSlices,
diff --git a/ide/src/trace/component/trace/base/Utils.ts b/ide/src/trace/component/trace/base/Utils.ts
index 5747ac9568d3ddc0badbe739d841732608b8f368..3f4c4021410c89a594796a499cd78692a3f75fec 100644
--- a/ide/src/trace/component/trace/base/Utils.ts
+++ b/ide/src/trace/component/trace/base/Utils.ts
@@ -91,35 +91,35 @@ export class Utils {
   }
 
   public static getTimeString(ns: number): string {
-    let currentNs = ns;
+    let currentTime = ns;
     let hour1 = 3600_000_000_000;
     let minute1 = 60_000_000_000;
     let second1 = 1_000_000_000;
     let millisecond1 = 1_000_000;
     let microsecond1 = 1_000;
     let res = '';
-    if (currentNs >= hour1) {
-      res += Math.floor(currentNs / hour1) + 'h ';
-      currentNs = currentNs - Math.floor(currentNs / hour1) * hour1;
+    if (currentTime >= hour1) {
+      res += Math.floor(currentTime / hour1) + 'h ';
+      currentTime = currentTime - Math.floor(currentTime / hour1) * hour1;
     }
-    if (currentNs >= minute1) {
-      res += Math.floor(currentNs / minute1) + 'm ';
-      currentNs = currentNs - Math.floor(ns / minute1) * minute1;
+    if (currentTime >= minute1) {
+      res += Math.floor(currentTime / minute1) + 'm ';
+      currentTime = currentTime - Math.floor(ns / minute1) * minute1;
     }
-    if (currentNs >= second1) {
-      res += Math.floor(currentNs / second1) + 's ';
-      currentNs = currentNs - Math.floor(currentNs / second1) * second1;
+    if (currentTime >= second1) {
+      res += Math.floor(currentTime / second1) + 's ';
+      currentTime = currentTime - Math.floor(currentTime / second1) * second1;
     }
-    if (currentNs >= millisecond1) {
-      res += Math.floor(currentNs / millisecond1) + 'ms ';
-      currentNs = currentNs - Math.floor(currentNs / millisecond1) * millisecond1;
+    if (currentTime >= millisecond1) {
+      res += Math.floor(currentTime / millisecond1) + 'ms ';
+      currentTime = currentTime - Math.floor(currentTime / millisecond1) * millisecond1;
     }
-    if (currentNs >= microsecond1) {
-      res += Math.floor(currentNs / microsecond1) + 'μs ';
-      currentNs = currentNs - Math.floor(currentNs / microsecond1) * microsecond1;
+    if (currentTime >= microsecond1) {
+      res += Math.floor(currentTime / microsecond1) + 'μs ';
+      currentTime = currentTime - Math.floor(currentTime / microsecond1) * microsecond1;
     }
-    if (currentNs > 0) {
-      res += currentNs + 'ns ';
+    if (currentTime > 0) {
+      res += currentTime + 'ns ';
     }
     if (res == '') {
       res = ns + '';
@@ -194,19 +194,19 @@ export class Utils {
     if (bytes < 0) {
       return '-' + this.getByteWithUnit(Math.abs(bytes));
     }
-    let currentBytes = bytes;
+    let currentByte = bytes;
     let kb1 = 1 << 10;
     let mb1 = (1 << 10) << 10;
     let gb1 = ((1 << 10) << 10) << 10; // 1 gb
     let res = '';
-    if (currentBytes > gb1) {
-      res += (currentBytes / gb1).toFixed(2) + ' Gb';
-    } else if (currentBytes > mb1) {
-      res += (currentBytes / mb1).toFixed(2) + ' Mb';
-    } else if (currentBytes > kb1) {
-      res += (currentBytes / kb1).toFixed(2) + ' Kb';
+    if (currentByte > gb1) {
+      res += (currentByte / gb1).toFixed(2) + ' Gb';
+    } else if (currentByte > mb1) {
+      res += (currentByte / mb1).toFixed(2) + ' Mb';
+    } else if (currentByte > kb1) {
+      res += (currentByte / kb1).toFixed(2) + ' Kb';
     } else {
-      res += Math.round(currentBytes) + ' byte';
+      res += Math.round(currentByte) + ' byte';
     }
     return res;
   }
@@ -230,8 +230,8 @@ export class Utils {
     }, {});
   }
 
-  public static timeMsFormat2p(ns: number) {
-    let currentNs = ns;
+  public static timeMsFormat2p(ms: number) {
+    let currentNs = ms;
     let hour1 = 3600_000;
     let minute1 = 60_000;
     let second1 = 1_000; // 1 second
diff --git a/ide/src/trace/bean/SdkStruct.ts b/ide/src/trace/component/trace/sheet/SheetUtils.ts
similarity index 37%
rename from ide/src/trace/bean/SdkStruct.ts
rename to ide/src/trace/component/trace/sheet/SheetUtils.ts
index c8376fe0404247ad807199b04e5fb3fa0d6c7442..818576e804c3fdd2ea2e70a00a23781463ea8e01 100644
--- a/ide/src/trace/bean/SdkStruct.ts
+++ b/ide/src/trace/component/trace/sheet/SheetUtils.ts
@@ -13,28 +13,29 @@
  * limitations under the License.
  */
 
-import { BaseStruct } from './BaseStruct.js';
+import {LitTable} from "../../../../base-ui/table/lit-table.js";
 
-export class SdkSliceStruct extends BaseStruct {
-  static maxSdkSlice: number = 0;
-  static maxSdkSliceName: string = '';
-  static hoverSdkSliceStruct: SdkSliceStruct | undefined;
-  static selectSdkSliceStruct: SdkSliceStruct | undefined;
-  static sdkName: number = 0;
-
-  value: number | undefined;
-  start_ts: number | undefined;
-  end_ts: number | undefined;
-  slice_message: string | undefined;
+export function resizeObserver(parentEl:HTMLElement, tableEl:LitTable, tblOffsetHeight: number = 45, loadingPage?: HTMLElement, loadingPageOffsetHeight:number = 24) {
+   new ResizeObserver((entries) => {
+        if (parentEl.clientHeight != 0) {
+            // @ts-ignore
+            tableEl?.shadowRoot.querySelector('.table').style.height = parentEl.clientHeight - tblOffsetHeight + 'px';
+            tableEl?.reMeauseHeight();
+            if (loadingPage) {
+              loadingPage.style.height = parentEl.clientHeight - loadingPageOffsetHeight + 'px';
+            }
+        }
+    }).observe(parentEl);
 }
 
-export class CounterStruct extends BaseStruct {
-  static maxCounter: number = 0;
-  static maxCounterName: string = '';
-  static hoverCounterStruct: CounterStruct | undefined;
-  static selectCounterStruct: CounterStruct | undefined;
-
-  value: number | undefined;
-  ts: number | undefined;
-  counter_id: number | undefined;
-}
+export function showButtonMenu(filter: any, isShow: boolean){
+    if (isShow) {
+        filter.setAttribute('tree', '');
+        filter.setAttribute('input', '');
+        filter.setAttribute('inputLeftText', '');
+    } else {
+        filter.removeAttribute('tree');
+        filter.removeAttribute('input');
+        filter.removeAttribute('inputLeftText');
+    }
+}
\ 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 3b37647815feba324b818a0b24d5b8012f56aab5..47b5c3045bfe28f192575c3e206ec88475cb91e8 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
@@ -51,35 +51,35 @@ export function getTimeString(ns: number): string {
   if (ns === 0) {
     return '0';
   }
-  let currentNs = ns;
+  let currentTimeNs = ns;
   let hour1 = 3600_000_000_000;
   let minute1 = 60_000_000_000;
   let second1 = 1_000_000_000; // 1 second
   let millisecond1 = 1_000_000; // 1 millisecond
   let microsecond1 = 1_000; // 1 microsecond
   let res = '';
-  if (currentNs >= hour1) {
-    res += Math.floor(currentNs / hour1) + 'h ';
-    currentNs = currentNs - Math.floor(currentNs / hour1) * hour1;
+  if (currentTimeNs >= hour1) {
+    res += Math.floor(currentTimeNs / hour1) + 'h ';
+    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / hour1) * hour1;
   }
-  if (currentNs >= minute1) {
-    res += Math.floor(currentNs / minute1) + 'm ';
-    currentNs = currentNs - Math.floor(ns / minute1) * minute1;
+  if (currentTimeNs >= minute1) {
+    res += Math.floor(currentTimeNs / minute1) + 'm ';
+    currentTimeNs = currentTimeNs - Math.floor(ns / minute1) * minute1;
   }
-  if (currentNs >= second1) {
-    res += Math.floor(currentNs / second1) + 's ';
-    currentNs = currentNs - Math.floor(currentNs / second1) * second1;
+  if (currentTimeNs >= second1) {
+    res += Math.floor(currentTimeNs / second1) + 's ';
+    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / second1) * second1;
   }
-  if (currentNs >= millisecond1) {
-    res += Math.floor(currentNs / millisecond1) + 'ms ';
-    currentNs = currentNs - Math.floor(currentNs / millisecond1) * millisecond1;
+  if (currentTimeNs >= millisecond1) {
+    res += Math.floor(currentTimeNs / millisecond1) + 'ms ';
+    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / millisecond1) * millisecond1;
   }
-  if (currentNs >= microsecond1) {
-    res += Math.floor(currentNs / microsecond1) + 'μs ';
-    currentNs = currentNs - Math.floor(currentNs / microsecond1) * microsecond1;
+  if (currentTimeNs >= microsecond1) {
+    res += Math.floor(currentTimeNs / microsecond1) + 'μs ';
+    currentTimeNs = currentTimeNs - Math.floor(currentTimeNs / microsecond1) * microsecond1;
   }
-  if (currentNs > 0) {
-    res += currentNs + 'ns ';
+  if (currentTimeNs > 0) {
+    res += currentTimeNs + 'ns ';
   }
   return res;
 }
@@ -87,13 +87,13 @@ export function getTimeString(ns: number): string {
 @element('tabpane-current-selection')
 export class TabPaneCurrentSelection extends BaseElement {
   weakUpBean: WakeupBean | null | undefined;
-  private tbl: LitTable | null | undefined;
+  private currentSelectionTbl: LitTable | null | undefined;
   private tableObserver: MutationObserver | undefined;
   // @ts-ignore
   private dpr: any = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
 
-  set data(value: any) {
-    this.setCpuData(value);
+  set data(currentSelectionValue: any) {
+    this.setCpuData(currentSelectionValue);
   }
 
   setCpuData(
@@ -161,10 +161,10 @@ export class TabPaneCurrentSelection extends BaseElement {
           list.push({ name: arg.keyName, value: arg.strValue });
         });
       }
-      this.tbl!.dataSource = list;
-      let rightArea: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#right-table');
+      this.currentSelectionTbl!.dataSource = list;
+      let rightArea: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#table-right');
       let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-      let threadClick = this.tbl?.shadowRoot?.querySelector('#thread-id');
+      let threadClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#thread-id');
       threadClick?.addEventListener('click', () => {
         //cpu点击
         if (scrollCallback) {
@@ -195,15 +195,7 @@ export class TabPaneCurrentSelection extends BaseElement {
 
   setFunctionData(data: FuncStruct, scrollCallback: Function) {
     //方法信息
-    this.initCanvas();
-    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
-    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-    if (rightTitle) {
-      rightTitle.style.visibility = 'hidden';
-    }
-    if (leftTitle) {
-      leftTitle.innerText = 'Slice Details';
-    }
+    this.tabCurrentSelectionInit('Slice Details');
     let list: any[] = [];
     let name = this.transferString(data.funName ?? '');
     let isBinder = FuncStruct.isBinder(data);
@@ -250,8 +242,8 @@ export class TabPaneCurrentSelection extends BaseElement {
           });
           list.push({ name: 'depth', value: data.depth });
           list.push({ name: 'arg_set_id', value: data.argsetid });
-          this.tbl!.dataSource = list;
-          let funcClick = this.tbl?.shadowRoot?.querySelector('#function-jump');
+          this.currentSelectionTbl!.dataSource = list;
+          let funcClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#function-jump');
           funcClick?.addEventListener('click', () => {
             scrollCallback(asyncBinderStract);
           });
@@ -285,8 +277,8 @@ export class TabPaneCurrentSelection extends BaseElement {
           });
           list.push({ name: 'depth', value: data.depth });
           list.push({ name: 'arg_set_id', value: data.argsetid });
-          this.tbl!.dataSource = list;
-          let funcClick = this.tbl?.shadowRoot?.querySelector('#function-jump');
+          this.currentSelectionTbl!.dataSource = list;
+          let funcClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#function-jump');
           funcClick?.addEventListener('click', () => {
             if (!Number.isNaN(binderSliceId) && binderSliceId != -1) {
               queryBinderBySliceId(binderSliceId).then((result: any[]) => {
@@ -314,7 +306,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           });
           list.push({ name: 'depth', value: data.depth });
           list.push({ name: 'arg_set_id', value: data.argsetid });
-          this.tbl!.dataSource = list;
+          this.currentSelectionTbl!.dataSource = list;
         });
       }
     } else {
@@ -328,21 +320,25 @@ export class TabPaneCurrentSelection extends BaseElement {
         value: getTimeString(data.dur || 0),
       });
       list.push({ name: 'depth', value: data.depth });
-      this.tbl!.dataSource = list;
+      this.currentSelectionTbl!.dataSource = list;
     }
   }
 
-  setClockData(data: ClockStruct) {
-    //时钟信息
+  private tabCurrentSelectionInit(leftTitleStr:string) {
     this.initCanvas();
+    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
     let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
     if (rightTitle) {
       rightTitle.style.visibility = 'hidden';
     }
-    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
     if (leftTitle) {
-      leftTitle.innerText = 'Counter Details';
+      leftTitle.innerText = leftTitleStr;
     }
+  }
+
+  setClockData(data: ClockStruct) {
+    //时钟信息
+    this.tabCurrentSelectionInit('Counter Details');
     let list: any[] = [];
     list.push({
       name: 'Start time',
@@ -354,7 +350,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     });
     // list.push({name: 'Delta', value: ColorUtils.formatNumberComma(data.delta||0)})
     list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
-    this.tbl!.dataSource = list;
+    this.currentSelectionTbl!.dataSource = list;
   }
 
   setMemData(data: ProcessMemStruct) {
@@ -375,7 +371,7 @@ export class TabPaneCurrentSelection extends BaseElement {
       name: 'Duration',
       value: getTimeString(data.duration || 0),
     });
-    this.tbl!.dataSource = list;
+    this.currentSelectionTbl!.dataSource = list;
   }
 
   setIrqData(data: IrqStruct) {
@@ -401,7 +397,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           list.push({ name: item.keyName, value: item.strValue });
         });
       }
-      this.tbl!.dataSource = list;
+      this.currentSelectionTbl!.dataSource = list;
     });
   }
 
@@ -426,7 +422,7 @@ export class TabPaneCurrentSelection extends BaseElement {
       value: getTimeString(data.startTime || 0),
     });
     list.push({ name: 'Duration', value: getTimeString(data.dur || 0) });
-    let state = '';
+    let state;
     if (data.state) {
       state = Utils.getEndState(data.state);
     } else if (data.state == '' || data.state == null) {
@@ -442,7 +438,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     } else {
       list.push({
         name: 'State',
-        value: `<div style="margin-left: 5px;white-space: nowrap;display: flex;align-items: center">
+        value: `<div style="white-space: nowrap;display: flex;align-items: center">
             <div style="white-space:pre-wrap">${state}</div>
             <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="state-click" name="select" color="#7fa1e7" size="20"></lit-icon>
             </div>`,
@@ -496,14 +492,14 @@ export class TabPaneCurrentSelection extends BaseElement {
           list.push({ name: arg.keyName, value: arg.strValue });
         });
       }
-      this.tbl!.dataSource = list;
-      this.tbl?.shadowRoot?.querySelector('#state-click')?.addEventListener('click', () => {
+      this.currentSelectionTbl!.dataSource = list;
+      this.currentSelectionTbl?.shadowRoot?.querySelector('#state-click')?.addEventListener('click', () => {
         //线程点击
         if (scrollCallback) {
           scrollCallback(data);
         }
       });
-      this.tbl?.shadowRoot?.querySelector('#wakeup-from')?.addEventListener('click', (e) => {
+      this.currentSelectionTbl?.shadowRoot?.querySelector('#wakeup-from')?.addEventListener('click', () => {
         //点击跳转，唤醒和被唤醒的 线程
         if (fromBean && scrollWakeUp) {
           scrollWakeUp({
@@ -515,7 +511,7 @@ export class TabPaneCurrentSelection extends BaseElement {
       });
       if (wakeUps) {
         wakeUps.map((up) => {
-          this.tbl?.shadowRoot?.querySelector(`#wakeup-${up.tid}`)?.addEventListener('click', (e) => {
+          this.currentSelectionTbl?.shadowRoot?.querySelector(`#wakeup-${up.tid}`)?.addEventListener('click', () => {
             //点击跳转，唤醒和被唤醒的 线程
             if (up && scrollWakeUp != undefined) {
               scrollWakeUp({
@@ -536,15 +532,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     scrollCallback: ((d: any) => void) | undefined
   ) {
     //线程信息
-    this.initCanvas();
-    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
-    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-    if (rightTitle) {
-      rightTitle.style.visibility = 'hidden';
-    }
-    if (leftTitle) {
-      leftTitle.innerText = 'Slice Details';
-    }
+    this.tabCurrentSelectionInit('Slice Details');
     let list: any[] = [];
     list.push({ name: 'Name', value: data.name });
     list.push({ name: 'StartTime', value: getTimeString(data.ts || 0) });
@@ -594,7 +582,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           queryFlowsData(data.src_slice!.split(',')).then((it) => {
             if (it.length > 0) {
               list.push({
-                name: `<div style="padding:5px 0px 5px 0px;">FrameTimeLine flows</div>`,
+                name: `<div style="padding:5px 0 5px 0;">FrameTimeLine flows</div>`,
                 value: '',
               });
               it.forEach((a: any) => {
@@ -613,7 +601,7 @@ export class TabPaneCurrentSelection extends BaseElement {
                 });
               });
               list.push({
-                name: `<div style="padding:5px 0px 5px 0px;">Following flows</div>`,
+                name: `<div style="padding:5px 0 5px 0;">Following flows</div>`,
                 value: '',
               });
               it.forEach((a: any) => {
@@ -627,30 +615,16 @@ export class TabPaneCurrentSelection extends BaseElement {
                     `<lit-icon class="jank_cla" style="display: inline-flex;cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="${a.type}-${a.pid}" slice_name="${a.name}"  pid="${a.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
                 });
               });
-              this.tbl!.dataSource = list;
-              let all = this.tbl?.shadowRoot?.querySelectorAll(`.jank_cla`);
-              all!.forEach((a) => {
-                a.addEventListener('click', (e) => {
-                  if (scrollCallback) {
-                    scrollCallback({
-                      rowId: a.id,
-                      name: a.getAttribute('slice_name'),
-                      pid: a.getAttribute('pid'),
-                    });
-                  }
-                });
-              });
-              if (callback) {
-                callback(jankJumperList);
-              }
+              this.currentSelectionTbl!.dataSource = list;
+              this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
             }
           });
         } else {
-          this.tbl!.dataSource = list;
+          this.currentSelectionTbl!.dataSource = list;
         }
       } else if (data.frame_type === 'app') {
         list.push({
-          name: `<div style="padding:5px 0px 5px 0px;">FrameTimeLine flows</div>`,
+          name: `<div style="padding:5px 0 5px 0;">FrameTimeLine flows</div>`,
           value: '',
         });
         list.push({
@@ -668,7 +642,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           queryPrecedingData(data.dst_slice).then((it) => {
             if (it.length > 0) {
               list.push({
-                name: `<div style="padding:5px 0px 5px 0px;">Preceding flows</div>`,
+                name: `<div style="padding:5px 0 5px 0;">Preceding flows</div>`,
                 value: '',
               });
               it.forEach((a: any) => {
@@ -684,41 +658,13 @@ export class TabPaneCurrentSelection extends BaseElement {
                     `<lit-icon class="jank_cla" style="display: inline-flex;cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="${a.type}-${a.pid}" slice_name="${a.name}" pid="${a.pid}" name="select" color="#7fa1e7" size="20"></lit-icon>`,
                 });
               });
-              this.tbl!.dataSource = list;
-              let all = this.tbl?.shadowRoot?.querySelectorAll(`.jank_cla`);
-              all!.forEach((a) => {
-                a.addEventListener('click', (e) => {
-                  if (scrollCallback) {
-                    scrollCallback({
-                      rowId: a.id,
-                      name: a.getAttribute('slice_name'),
-                      pid: a.getAttribute('pid'),
-                    });
-                  }
-                });
-              });
-              if (callback) {
-                callback(jankJumperList);
-              }
+              this.currentSelectionTbl!.dataSource = list;
+              this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
             }
           });
         } else {
-          this.tbl!.dataSource = list;
-          let all = this.tbl?.shadowRoot?.querySelectorAll(`.jank_cla`);
-          all!.forEach((a) => {
-            a.addEventListener('click', (e) => {
-              if (scrollCallback) {
-                scrollCallback({
-                  rowId: a.id,
-                  name: a.getAttribute('slice_name'),
-                  pid: a.getAttribute('pid'),
-                });
-              }
-            });
-          });
-          if (callback) {
-            callback(jankJumperList);
-          }
+          this.currentSelectionTbl!.dataSource = list;
+          this.addJankScrollCallBackEvent(scrollCallback, callback, jankJumperList);
         }
       } else if (data.frame_type === 'frameTime') {
         queryGpuDur(data.id!).then((it) => {
@@ -730,7 +676,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           }
           if (data.name) {
             list.push({
-              name: `<div style="padding:5px 0px 5px 0px;">App Frame</div>`,
+              name: `<div style="padding:5px 0 5px 0;">App Frame</div>`,
               value: '',
             });
             list.push({
@@ -748,7 +694,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           }
           if (data.rs_name) {
             list.push({
-              name: `<div style="padding:5px 0px 5px 0px;">RenderService Frame</div>`,
+              name: `<div style="padding:5px 0 5px 0;">RenderService Frame</div>`,
               value: '',
             });
             list.push({
@@ -765,7 +711,7 @@ export class TabPaneCurrentSelection extends BaseElement {
             });
           }
           list.push({
-            name: `<div style="padding:5px 0px 5px 0px;">Following</div>`,
+            name: `<div style="padding:5px 0 5px 0;">Following</div>`,
             value: '',
           });
           list.push({
@@ -781,10 +727,10 @@ export class TabPaneCurrentSelection extends BaseElement {
           let rsNode = new JankTreeNode(data.rs_vsync!, data.rs_pid!, 'render_service');
           appNode.children.push(rsNode);
           jankJumperList.push(appNode);
-          this.tbl!.dataSource = list;
-          let all = this.tbl?.shadowRoot?.querySelectorAll<LitIcon>(`.jank_cla`);
+          this.currentSelectionTbl!.dataSource = list;
+          let all = this.currentSelectionTbl?.shadowRoot?.querySelectorAll<LitIcon>(`.jank_cla`);
           all!.forEach((a) => {
-            a!.addEventListener('click', (e) => {
+            a!.addEventListener('click', () => {
               if (scrollCallback) {
                 scrollCallback({
                   rowId: a.id,
@@ -800,7 +746,25 @@ export class TabPaneCurrentSelection extends BaseElement {
         });
       }
     } else {
-      this.tbl!.dataSource = list;
+      this.currentSelectionTbl!.dataSource = list;
+    }
+  }
+
+  private addJankScrollCallBackEvent(scrollCallback: ((d: any) => void) | undefined, callback: ((data: Array<any>) => void) | undefined, jankJumperList: JankTreeNode[]) {
+    let all = this.currentSelectionTbl?.shadowRoot?.querySelectorAll(`.jank_cla`);
+    all!.forEach((a) => {
+      a.addEventListener('click', () => {
+        if (scrollCallback) {
+          scrollCallback({
+            rowId: a.id,
+            name: a.getAttribute('slice_name'),
+            pid: a.getAttribute('pid'),
+          });
+        }
+      });
+    });
+    if (callback) {
+      callback(jankJumperList);
     }
   }
 
@@ -848,7 +812,6 @@ export class TabPaneCurrentSelection extends BaseElement {
 
   /**
    * 查询出 线程唤醒了哪些线程信息
-   * @param data
    */
   async queryThreadWakeUpFromData(itid: number, startTime: number, dur: number): Promise<WakeupBean | undefined> {
     let wakeUps = await queryThreadWakeUpFrom(itid, startTime + (window as any).recordStartNS);
@@ -859,7 +822,6 @@ export class TabPaneCurrentSelection extends BaseElement {
 
   /**
    * 查询出 线程唤醒了哪些线程信息
-   * @param data
    */
   async queryThreadWakeUpData(itid: number, startTime: number, dur: number): Promise<Array<WakeupBean>> {
     let list: Array<WakeupBean> = [];
@@ -875,8 +837,8 @@ export class TabPaneCurrentSelection extends BaseElement {
 
   initCanvas(): HTMLCanvasElement | null {
     let canvas = this.shadowRoot!.querySelector<HTMLCanvasElement>('#rightDraw');
-    let width = getComputedStyle(this.tbl!).getPropertyValue('width');
-    let height = getComputedStyle(this.tbl!).getPropertyValue('height');
+    let width = getComputedStyle(this.currentSelectionTbl!).getPropertyValue('width');
+    let height = getComputedStyle(this.currentSelectionTbl!).getPropertyValue('height');
     if (canvas != null) {
       canvas.width = Math.round(Number(width.replace('px', '')) * this.dpr);
       canvas.height = Math.round(Number(height.replace('px', '')) * this.dpr);
@@ -929,7 +891,6 @@ export class TabPaneCurrentSelection extends BaseElement {
           context.fillText(str, 40, 40 + 16 * index);
         }
       });
-      //绘制左右箭头
       context.lineWidth = 2;
       context.lineJoin = 'bevel';
       context.moveTo(10, 95);
@@ -970,21 +931,14 @@ export class TabPaneCurrentSelection extends BaseElement {
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#selectionTbl');
-    this.tbl?.addEventListener('column-click', (ev: any) => {});
+    this.currentSelectionTbl = this.shadowRoot?.querySelector<LitTable>('#selectionTbl');
+    this.currentSelectionTbl?.addEventListener('column-click', (ev: any) => {});
     this.addTableObserver();
   }
 
   addTableObserver() {
-    let MutationObserver = window.MutationObserver;
-    this.tableObserver = new MutationObserver((list) => {
-      if (this.tbl) {
-        let width = getComputedStyle(this.tbl).getPropertyValue('width');
-        let height = getComputedStyle(this.tbl).getPropertyValue('height');
-      }
-    });
-    let selector = this.shadowRoot?.querySelector('.left-table');
-    this.tableObserver?.observe(selector!, {
+    let leftTable = this.shadowRoot?.querySelector('.table-left');
+    this.tableObserver?.observe(leftTable!, {
       attributes: true,
       attributeFilter: ['style'],
       attributeOldValue: true,
@@ -994,40 +948,40 @@ export class TabPaneCurrentSelection extends BaseElement {
   initHtml(): string {
     return `
         <style>
-            .current-title{
-                width: 100%;
-                display: flex;
+            .table-title{
                 top: 0;
                 background: var(--dark-background,#ffffff);
                 position: sticky;
+                width: 100%;
+                display: flex;
             }
-            .current-title h2{
-                width: 50%;
-                padding: 0 10px;
+            .table-title h2{
                 font-size: 16px;
                 font-weight: 400;
                 visibility: visible;
+                width: 50%;
+                padding: 0 10px;
             }
-            .bottom-scroll-area{
+            .scroll-area{
                 display: flex;
                 height: auto;
                 overflow-y: auto;
             }
-            .left-table{
+            .table-left{
                 width: 50%;
                 padding: 0 10px;
             }
-            .right-table{
+            .table-right{
                 width: 50%;
             }
         </style>
         <div style="width: 100%;height: auto;position: relative">
-            <div class="current-title">
+            <div class="table-title">
                 <h2 id="leftTitle"></h2>
                 <h2 id="rightTitle">Scheduling Latency</h2>
             </div>
-            <div class="bottom-scroll-area">
-                <div class="left-table">
+            <div class="scroll-area">
+                <div class="table-left">
                     <lit-table id="selectionTbl" no-head hideDownload style="height: auto">
                         <lit-table-column title="name" data-index="name" key="name" align="flex-start"  width="180px">
                             <template><div>{{name}}</div></template>
@@ -1037,7 +991,7 @@ export class TabPaneCurrentSelection extends BaseElement {
                         </lit-table-column>
                     </lit-table>
                 </div>
-                <div class="right-table">
+                <div class="table-right">
                     <canvas id="rightDraw" style="width: 100%;height: 100%;"></canvas>
                 </div>
             </div>
diff --git a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
index 3e01d441f821d31f59c471bac2d124923075b639..2fff2c4f7712dfda34275691d8d4744266a630ea 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
@@ -722,18 +722,7 @@ export class TabPaneFilter extends BaseElement {
         .constraints-input[disabled]{
             background: var(--dark-background5,#ededed);
         }
-        .mining-button{
-            opacity: 0.9;
-            font-size: 13px;
-            color: #0A59F7;
-            text-align: center;
-            line-height: 16px;
-            background: var(--dark-background3,#F4F3F4);
-            border: 1px solid var(--dark-background8,#F4F3F4);
-            border-radius: 16px;
-            padding: 2px 18px;
-        }
-        .library-button{
+        .reset-button{
             opacity: 0.9;
             font-size: 13px;
             color: #0A59F7;
@@ -838,7 +827,7 @@ export class TabPaneFilter extends BaseElement {
                      
                  </div>
                  <div style="display: flex;justify-content: space-around; margin-top: 8px">
-                     <div class="mining-button">Reset</div>
+                     <div class="mining-button reset-button">Reset</div>
                  </div>
             </div>
             <span class="describe tree max-spacing" id="data-mining">Symbol Filter</span>
@@ -849,7 +838,7 @@ export class TabPaneFilter extends BaseElement {
                      
                  </div>
                  <div style="display: flex;justify-content: space-around; margin-top: 8px">
-                     <div class="library-button">Reset</div>
+                     <div class="library-button reset-button">Reset</div>
                  </div>
             </div>
             <span class="describe tree max-spacing" id="data-library">Library Filter</span>
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts
index 4b84a19a9b7603dcaa0ecc19964fb21a968b90a0..784cd302cf7ef67c31dc5e8057df537423c27a8e 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneCpuAbility.ts
@@ -20,26 +20,25 @@ import { getTabCpuAbilityData } from '../../../../database/SqlLite.js';
 import { SystemCpuSummary } from '../../../../bean/AbilityMonitor.js';
 import { Utils } from '../../base/Utils.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
-import '../../../SpFilter.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-cpu-ability')
 export class TabPaneCpuAbility extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<SystemCpuSummary> = [];
-  private queryResult: Array<SystemCpuSummary> = [];
-  private float: HTMLDivElement | null | undefined;
+  private cpuAbilityTbl: LitTable | null | undefined;
+  private cpuAbilitySource: Array<SystemCpuSummary> = [];
+  private queryCpuResult: Array<SystemCpuSummary> = [];
   private search: HTMLInputElement | undefined | null;
 
-  set data(val: SelectionParam | any) {
+  set data(cpuAbilityValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.cpuAbilityTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(cpuAbilityValue);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-ability');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.cpuAbilityTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-ability');
+    this.cpuAbilityTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -47,28 +46,22 @@ export class TabPaneCpuAbility extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.cpuAbilityTbl!)
   }
 
   filterData() {
-    if (this.queryResult.length > 0) {
-      let filter = this.queryResult.filter((item) => {
+    if (this.queryCpuResult.length > 0) {
+      let filterCpu = this.queryCpuResult.filter((item) => {
         let array = this.toCpuAbilityArray(item);
         let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1);
         return isInclude.length > 0;
       });
-      if (filter.length > 0) {
-        this.source = filter;
-        this.tbl!.recycleDataSource = this.source;
+      if (filterCpu.length > 0) {
+        this.cpuAbilitySource = filterCpu;
+        this.cpuAbilityTbl!.recycleDataSource = this.cpuAbilitySource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.cpuAbilitySource = [];
+        this.cpuAbilityTbl!.recycleDataSource = [];
       }
     }
   }
@@ -100,13 +93,13 @@ export class TabPaneCpuAbility extends BaseElement {
           systemCpuSummary.systemLoadStr = systemCpuSummary.systemLoad.toFixed(2) + '%';
           systemCpuSummary.threadsStr = ColorUtils.formatNumberComma(systemCpuSummary.threads);
         }
-        this.source = result;
-        this.queryResult = result;
-        this.tbl!.recycleDataSource = this.source;
+        this.cpuAbilitySource = result;
+        this.queryCpuResult = result;
+        this.cpuAbilityTbl!.recycleDataSource = this.cpuAbilitySource;
       } else {
-        this.source = [];
-        this.queryResult = [];
-        this.tbl!.recycleDataSource = [];
+        this.cpuAbilitySource = [];
+        this.queryCpuResult = [];
+        this.cpuAbilityTbl!.recycleDataSource = [];
       }
     });
   }
@@ -114,14 +107,16 @@ export class TabPaneCpuAbility extends BaseElement {
   initHtml(): string {
     return `
         <style>
+        .cpu-ability{
+            height: auto;
+        }
         :host{
-            display: flex;
-            flex-direction: column;
             padding: 10px 10px;
+            flex-direction: column;
+            display: flex;
         }
-
         </style>
-        <lit-table id="tb-cpu-ability" style="height: auto">
+        <lit-table id="tb-cpu-ability" class="cpu-ability">
             <lit-table-column order width="1fr" title="Start Time" data-index="startTimeStr" key="startTimeStr" align="flex-start" >
             </lit-table-column>
             <lit-table-column order width="1fr" title="Duration" data-index="durationStr" key="durationStr" align="flex-start" >
@@ -141,25 +136,25 @@ export class TabPaneCpuAbility extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SystemCpuSummary, b: SystemCpuSummary) {
+      return function (cpuAbilityLeftData: SystemCpuSummary, cpuAbilityRightData: SystemCpuSummary) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(cpuAbilityRightData[property]) - parseFloat(cpuAbilityLeftData[property]) : parseFloat(cpuAbilityLeftData[property]) - parseFloat(cpuAbilityRightData[property]);
         } else if (type === 'durationStr') {
-          return sort === 2 ? b.duration - a.duration : a.duration - b.duration;
+          return sort === 2 ? cpuAbilityRightData.duration - cpuAbilityLeftData.duration : cpuAbilityLeftData.duration - cpuAbilityRightData.duration;
         } else if (type === 'totalLoadStr') {
-          return sort === 2 ? b.totalLoad - a.totalLoad : a.totalLoad - b.totalLoad;
+          return sort === 2 ? cpuAbilityRightData.totalLoad - cpuAbilityLeftData.totalLoad : cpuAbilityLeftData.totalLoad - cpuAbilityRightData.totalLoad;
         } else if (type === 'userLoadStr') {
-          return sort === 2 ? b.userLoad - a.userLoad : a.userLoad - b.userLoad;
+          return sort === 2 ? cpuAbilityRightData.userLoad - cpuAbilityLeftData.userLoad : cpuAbilityLeftData.userLoad - cpuAbilityRightData.userLoad;
         } else if (type === 'systemLoadStr') {
-          return sort === 2 ? b.systemLoad - a.systemLoad : a.systemLoad - b.systemLoad;
+          return sort === 2 ? cpuAbilityRightData.systemLoad - cpuAbilityLeftData.systemLoad : cpuAbilityLeftData.systemLoad - cpuAbilityRightData.systemLoad;
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (cpuAbilityRightData[property] > cpuAbilityLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (cpuAbilityRightData[property] == cpuAbilityLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -170,18 +165,18 @@ export class TabPaneCpuAbility extends BaseElement {
     }
 
     if (detail.key === 'startTime') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.cpuAbilitySource.sort(compare(detail.key, detail.sort, 'string'));
     } else if (detail.key === 'durationStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'durationStr'));
+      this.cpuAbilitySource.sort(compare(detail.key, detail.sort, 'durationStr'));
     } else if (detail.key === 'totalLoadStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'totalLoadStr'));
+      this.cpuAbilitySource.sort(compare(detail.key, detail.sort, 'totalLoadStr'));
     } else if (detail.key === 'userLoadStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'userLoadStr'));
+      this.cpuAbilitySource.sort(compare(detail.key, detail.sort, 'userLoadStr'));
     } else if (detail.key === 'systemLoadStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'systemLoadStr'));
+      this.cpuAbilitySource.sort(compare(detail.key, detail.sort, 'systemLoadStr'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuAbilitySource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.cpuAbilityTbl!.recycleDataSource = this.cpuAbilitySource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts
index a88f19acd39ec407c5a0e649807236a049a89f9c..6fc7de24341514a3ab11cffd73b2246d3596d497 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDiskAbility.ts
@@ -20,25 +20,25 @@ import { getTabDiskAbilityData } from '../../../../database/SqlLite.js';
 import { SystemDiskIOSummary } from '../../../../bean/AbilityMonitor.js';
 import { Utils } from '../../base/Utils.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
-import '../../../SpFilter.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-disk-ability')
 export class TabPaneDiskAbility extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<SystemDiskIOSummary> = [];
-  private queryResult: Array<SystemDiskIOSummary> = [];
+  private diskAbilityTbl: LitTable | null | undefined;
+  private diskAbilitySource: Array<SystemDiskIOSummary> = [];
+  private queryDiskResult: Array<SystemDiskIOSummary> = [];
   private search: HTMLInputElement | undefined | null;
 
-  set data(val: SelectionParam | any) {
+  set data(diskAbilityValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.diskAbilityTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(diskAbilityValue);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-disk-ability');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.diskAbilityTbl = this.shadowRoot?.querySelector<LitTable>('#tb-disk-ability');
+    this.diskAbilityTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -46,28 +46,22 @@ export class TabPaneDiskAbility extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl!.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.diskAbilityTbl!)
   }
 
   filterData() {
-    if (this.queryResult.length > 0) {
-      let filter = this.queryResult.filter((item) => {
+    if (this.queryDiskResult.length > 0) {
+      let filterDisk = this.queryDiskResult.filter((item) => {
         let array = this.toDiskAbilityArray(item);
         let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1);
         return isInclude.length > 0;
       });
-      if (filter.length > 0) {
-        this.source = filter;
-        this.tbl!.recycleDataSource = this.source;
+      if (filterDisk.length > 0) {
+        this.diskAbilitySource = filterDisk;
+        this.diskAbilityTbl!.recycleDataSource = this.diskAbilitySource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.diskAbilitySource = [];
+        this.diskAbilityTbl!.recycleDataSource = [];
       }
     }
   }
@@ -106,13 +100,13 @@ export class TabPaneDiskAbility extends BaseElement {
           systemDiskIOSummary.writeOutStr = ColorUtils.formatNumberComma(systemDiskIOSummary.writeOut);
           systemDiskIOSummary.writeOutSecStr = systemDiskIOSummary.writeOutSec.toString();
         }
-        this.source = result;
-        this.queryResult = result;
-        this.tbl!.recycleDataSource = result;
+        this.diskAbilitySource = result;
+        this.queryDiskResult = result;
+        this.diskAbilityTbl!.recycleDataSource = result;
       } else {
-        this.source = [];
-        this.queryResult = [];
-        this.tbl!.recycleDataSource = [];
+        this.diskAbilitySource = [];
+        this.queryDiskResult = [];
+        this.diskAbilityTbl!.recycleDataSource = [];
       }
     });
   }
@@ -120,13 +114,16 @@ export class TabPaneDiskAbility extends BaseElement {
   initHtml(): string {
     return `
         <style>
+        .disk-ability-table{
+            height: auto;
+        }
         :host{
-            display: flex;
             flex-direction: column;
+            display: flex;
             padding: 10px 10px;
         }
         </style>
-        <lit-table id="tb-disk-ability" style="height: auto">
+        <lit-table id="tb-disk-ability" class="disk-ability-table">
             <lit-table-column order width="1fr" title="StartTime" data-index="startTimeStr" key="startTimeStr" align="flex-start">
             </lit-table-column>
             <lit-table-column order width="1fr" title="Duration" data-index="durationStr" key="durationStr" align="flex-start" >
@@ -154,35 +151,35 @@ export class TabPaneDiskAbility extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SystemDiskIOSummary, b: SystemDiskIOSummary) {
+      return function (diskAbilityLeftData: SystemDiskIOSummary, diskAbilityRightData: SystemDiskIOSummary) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(diskAbilityRightData[property]) - parseFloat(diskAbilityLeftData[property]) : parseFloat(diskAbilityLeftData[property]) - parseFloat(diskAbilityRightData[property]);
         } else if (type === 'durationStr') {
-          return sort === 2 ? b.duration - a.duration : a.duration - b.duration;
+          return sort === 2 ? diskAbilityRightData.duration - diskAbilityLeftData.duration : diskAbilityLeftData.duration - diskAbilityRightData.duration;
         } else if (type === 'dataReadStr') {
-          return sort === 2 ? b.dataRead - a.dataRead : a.dataRead - b.dataRead;
+          return sort === 2 ? diskAbilityRightData.dataRead - diskAbilityLeftData.dataRead : diskAbilityLeftData.dataRead - diskAbilityRightData.dataRead;
         } else if (type === 'dataReadSecStr') {
-          return sort === 2 ? b.dataReadSec - a.dataReadSec : a.dataReadSec - b.dataReadSec;
+          return sort === 2 ? diskAbilityRightData.dataReadSec - diskAbilityLeftData.dataReadSec : diskAbilityLeftData.dataReadSec - diskAbilityRightData.dataReadSec;
         } else if (type === 'dataWriteStr') {
-          return sort === 2 ? b.dataWrite - a.dataWrite : a.dataWrite - b.dataWrite;
+          return sort === 2 ? diskAbilityRightData.dataWrite - diskAbilityLeftData.dataWrite : diskAbilityLeftData.dataWrite - diskAbilityRightData.dataWrite;
         } else if (type === 'dataWriteSecStr') {
-          return sort === 2 ? b.dataWriteSec - a.dataWriteSec : a.dataWriteSec - b.dataWriteSec;
+          return sort === 2 ? diskAbilityRightData.dataWriteSec - diskAbilityLeftData.dataWriteSec : diskAbilityLeftData.dataWriteSec - diskAbilityRightData.dataWriteSec;
         } else if (type === 'readsInStr') {
-          return sort === 2 ? b.readsIn - a.readsIn : a.readsIn - b.readsIn;
+          return sort === 2 ? diskAbilityRightData.readsIn - diskAbilityLeftData.readsIn : diskAbilityLeftData.readsIn - diskAbilityRightData.readsIn;
         } else if (type === 'readsInSecStr') {
-          return sort === 2 ? b.readsInSec - a.readsInSec : a.readsInSec - b.readsInSec;
+          return sort === 2 ? diskAbilityRightData.readsInSec - diskAbilityLeftData.readsInSec : diskAbilityLeftData.readsInSec - diskAbilityRightData.readsInSec;
         } else if (type === 'writeOutStr') {
-          return sort === 2 ? b.writeOut - a.writeOut : a.writeOut - b.writeOut;
+          return sort === 2 ? diskAbilityRightData.writeOut - diskAbilityLeftData.writeOut : diskAbilityLeftData.writeOut - diskAbilityRightData.writeOut;
         } else if (type === 'writeOutSecStr') {
-          return sort === 2 ? b.writeOutSec - a.writeOutSec : a.writeOutSec - b.writeOutSec;
+          return sort === 2 ? diskAbilityRightData.writeOutSec - diskAbilityLeftData.writeOutSec : diskAbilityLeftData.writeOutSec - diskAbilityRightData.writeOutSec;
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (diskAbilityRightData[property] > diskAbilityLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (diskAbilityRightData[property] == diskAbilityLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -193,28 +190,28 @@ export class TabPaneDiskAbility extends BaseElement {
     }
 
     if (detail.key === 'startTime') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'string'));
     } else if (detail.key === 'durationStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'durationStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'durationStr'));
     } else if (detail.key === 'dataReadStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataReadStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'dataReadStr'));
     } else if (detail.key === 'dataReadSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataReadSecStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'dataReadSecStr'));
     } else if (detail.key === 'dataWriteStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataWriteStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'dataWriteStr'));
     } else if (detail.key === 'dataWriteSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataWriteSecStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'dataWriteSecStr'));
     } else if (detail.key === 'readsInStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'readsInStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'readsInStr'));
     } else if (detail.key === 'readsInSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'readsInSecStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'readsInSecStr'));
     } else if (detail.key === 'writeOutStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'writeOutStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'writeOutStr'));
     } else if (detail.key === 'writeOutSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'writeOutSecStr'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'writeOutSecStr'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.diskAbilitySource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.diskAbilityTbl!.recycleDataSource = this.diskAbilitySource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts
index 33962db5a18ea1e1f3145dbbfabb386c30a982cd..9d6241a0c67f36ba7874ddc8ddc7469c68b221a4 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneHistoryProcesses.ts
@@ -19,26 +19,25 @@ import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabProcessHistoryData } from '../../../../database/SqlLite.js';
 import { Utils } from '../../base/Utils.js';
 import { ProcessHistory } from '../../../../bean/AbilityMonitor.js';
-import '../../../SpFilter.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-history-processes')
 export class TabPaneHistoryProcesses extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<ProcessHistory> = [];
-  private queryResult: Array<ProcessHistory> = [];
-  private float: HTMLDivElement | null | undefined;
+  private historyProcessTbl: LitTable | null | undefined;
+  private historyProcessSource: Array<ProcessHistory> = [];
+  private queryHistoryResult: Array<ProcessHistory> = [];
   private search: HTMLInputElement | undefined | null;
 
-  set data(val: SelectionParam | any) {
+  set data(historyProcessValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.historyProcessTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(historyProcessValue);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-history-processes');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.historyProcessTbl = this.shadowRoot?.querySelector<LitTable>('#tb-history-processes');
+    this.historyProcessTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -46,28 +45,22 @@ export class TabPaneHistoryProcesses extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.historyProcessTbl!)
   }
 
   filterData() {
-    if (this.queryResult.length > 0) {
-      let filter = this.queryResult.filter((item) => {
+    if (this.queryHistoryResult.length > 0) {
+      let filterHistory = this.queryHistoryResult.filter((item) => {
         let array = this.toProcessHistoryArray(item);
         let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1);
         return isInclude.length > 0;
       });
-      if (filter.length > 0) {
-        this.source = filter;
-        this.tbl!.recycleDataSource = this.source;
+      if (filterHistory.length > 0) {
+        this.historyProcessSource = filterHistory;
+        this.historyProcessTbl!.recycleDataSource = this.historyProcessSource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.historyProcessSource = [];
+        this.historyProcessTbl!.recycleDataSource = [];
       }
     }
   }
@@ -104,37 +97,37 @@ export class TabPaneHistoryProcesses extends BaseElement {
           processHistory.cpuTimeNumber = Number(processHistory.cpuTime);
           processHistory.cpuTime = this.timeFormat(processHistory.cpuTimeNumber);
         }
-        this.source = item;
-        this.queryResult = item;
-        this.tbl!.recycleDataSource = this.source;
+        this.historyProcessSource = item;
+        this.queryHistoryResult = item;
+        this.historyProcessTbl!.recycleDataSource = this.historyProcessSource;
       } else {
-        this.source = [];
-        this.queryResult = [];
-        this.tbl!.recycleDataSource = [];
+        this.historyProcessSource = [];
+        this.queryHistoryResult = [];
+        this.historyProcessTbl!.recycleDataSource = [];
       }
     });
   }
 
   timeFormat(ms: number): string {
-    let currentMs = ms;
+    let currentTimeMs = ms;
     let hours = 3600000;
     let minute1 = 60000;
     let second1 = 1000;
     let res = '';
-    if (currentMs >= hours) {
-      res += Math.floor(currentMs / hours) + ' h ';
-      currentMs = currentMs - Math.floor(currentMs / hours) * hours;
+    if (currentTimeMs >= hours) {
+      res += Math.floor(currentTimeMs / hours) + ' h ';
+      currentTimeMs = currentTimeMs - Math.floor(currentTimeMs / hours) * hours;
     }
-    if (currentMs >= minute1) {
-      res += Math.floor(currentMs / minute1) + ' min ';
-      currentMs = currentMs - Math.floor(currentMs / minute1) * minute1;
+    if (currentTimeMs >= minute1) {
+      res += Math.floor(currentTimeMs / minute1) + ' min ';
+      currentTimeMs = currentTimeMs - Math.floor(currentTimeMs / minute1) * minute1;
     }
-    if (currentMs >= second1) {
-      res += Math.floor(currentMs / second1) + ' s ';
-      currentMs = currentMs - Math.floor(currentMs / second1) * second1;
+    if (currentTimeMs >= second1) {
+      res += Math.floor(currentTimeMs / second1) + ' s ';
+      currentTimeMs = currentTimeMs - Math.floor(currentTimeMs / second1) * second1;
     }
-    if (currentMs > 0) {
-      res += currentMs + ' ms ';
+    if (currentTimeMs > 0) {
+      res += currentTimeMs + ' ms ';
     } else {
       res += '0 ms ';
     }
@@ -144,21 +137,24 @@ export class TabPaneHistoryProcesses extends BaseElement {
   initHtml(): string {
     return `
 <style>
+.history-process-table{
+    height: auto;
+}
 :host{
-    display: flex;
     flex-direction: column;
+    display: flex;
     padding: 10px 10px;
 }
 </style>
-<lit-table id="tb-history-processes" style="height: auto">
-    <lit-table-column order width="1fr" title="Process ID" data-index="processId" key="processId" align="flex-start"></lit-table-column>
-    <lit-table-column order width="1fr" title="Alive" data-index="alive" key="alive" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="First Seen" data-index="firstSeen" key="firstSeen" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Last Seen" data-index="lastSeen" key="lastSeen" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Process Name" data-index="processName" key="processName" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Responsible Process" data-index="responsibleProcess" key="responsibleProcess" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="User ID" data-index="userName" key="userName" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="CPU Time" data-index="cpuTime" key="cpuTime" align="flex-start" ></lit-table-column>
+<lit-table id="tb-history-processes" class="history-process-table">
+    <lit-table-column order width="1fr" align="flex-start" title="Process ID" data-index="processId" key="processId"></lit-table-column>
+    <lit-table-column order width="1fr" data-index="alive" key="alive" align="flex-start" title="Alive"></lit-table-column>
+    <lit-table-column order width="1fr" title="First Seen" key="firstSeen" data-index="firstSeen" align="flex-start" ></lit-table-column>
+    <lit-table-column order width="1fr" data-index="lastSeen" key="lastSeen" align="flex-start" title="Last Seen"></lit-table-column>
+    <lit-table-column width="1fr" order title="Process Name" data-index="processName" key="processName" align="flex-start" ></lit-table-column>
+    <lit-table-column order title="Responsible Process" width="1fr" data-index="responsibleProcess" key="responsibleProcess" align="flex-start" ></lit-table-column>
+    <lit-table-column order width="1fr" data-index="userName" title="User ID" key="userName" align="flex-start" ></lit-table-column>
+    <lit-table-column order width="1fr" data-index="cpuTime" key="cpuTime" align="flex-start" title="CPU Time"></lit-table-column>
 </lit-table>
         `;
   }
@@ -166,25 +162,25 @@ export class TabPaneHistoryProcesses extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: ProcessHistory, b: ProcessHistory) {
+      return function (historyProcessLeftData: ProcessHistory, historyProcessRightData: ProcessHistory) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(historyProcessRightData[property]) - parseFloat(historyProcessLeftData[property]) : parseFloat(historyProcessLeftData[property]) - parseFloat(historyProcessRightData[property]);
         } else if (type === 'cpuTime') {
-          return sort === 2 ? b.cpuTimeNumber - a.cpuTimeNumber : a.cpuTimeNumber - b.cpuTimeNumber;
+          return sort === 2 ? historyProcessRightData.cpuTimeNumber - historyProcessLeftData.cpuTimeNumber : historyProcessLeftData.cpuTimeNumber - historyProcessRightData.cpuTimeNumber;
         } else if (type === 'lastSeen') {
-          return sort === 2 ? b.lastSeenNumber - a.lastSeenNumber : a.lastSeenNumber - b.lastSeenNumber;
+          return sort === 2 ? historyProcessRightData.lastSeenNumber - historyProcessLeftData.lastSeenNumber : historyProcessLeftData.lastSeenNumber - historyProcessRightData.lastSeenNumber;
         } else if (type === 'firstSeen') {
-          return sort === 2 ? b.firstSeenNumber - a.firstSeenNumber : a.firstSeenNumber - b.firstSeenNumber;
+          return sort === 2 ? historyProcessRightData.firstSeenNumber - historyProcessLeftData.firstSeenNumber : historyProcessLeftData.firstSeenNumber - historyProcessRightData.firstSeenNumber;
         } else if (type === 'alive') {
           let aaaa = 0;
           let bbbb = 0;
           // @ts-ignore
-          if (b[property] == 'Yes') {
+          if (historyProcessRightData[property] == 'Yes') {
             bbbb = 1;
           }
           // @ts-ignore
-          if (a[property] == 'Yes') {
+          if (historyProcessLeftData[property] == 'Yes') {
             aaaa = 1;
           }
           if (aaaa - bbbb == 0) {
@@ -193,11 +189,11 @@ export class TabPaneHistoryProcesses extends BaseElement {
           return aaaa - bbbb ? -1 : 1;
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (historyProcessRightData[property] > historyProcessLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (historyProcessRightData[property] == historyProcessLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -208,14 +204,14 @@ export class TabPaneHistoryProcesses extends BaseElement {
     }
 
     if (detail.key === 'startTime' || detail.key === 'processName') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.historyProcessSource.sort(compare(detail.key, detail.sort, 'string'));
     } else if (detail.key == 'cpuTime') {
-      this.source.sort(compare(detail.key, detail.sort, 'cpuTime'));
+      this.historyProcessSource.sort(compare(detail.key, detail.sort, 'cpuTime'));
     } else if (detail.key === 'alive') {
-      this.source.sort(compare(detail.key, detail.sort, 'alive'));
+      this.historyProcessSource.sort(compare(detail.key, detail.sort, 'alive'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.historyProcessSource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.historyProcessTbl!.recycleDataSource = this.historyProcessSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts
index 870035d46794160de6ddf7a5060a173cd1a1c302..7e403bbd09ec45c989efd8acc2cec1ae84114f4d 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneLiveProcesses.ts
@@ -18,27 +18,26 @@ import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabLiveProcessData } from '../../../../database/SqlLite.js';
 import { LiveProcess } from '../../../../bean/AbilityMonitor.js';
-import '../../../SpFilter.js';
 import { Utils } from '../../base/Utils.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-live-processes')
 export class TabPaneLiveProcesses extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<LiveProcess> = [];
-  private queryResult: Array<LiveProcess> = [];
-  private float: HTMLDivElement | null | undefined;
+  private liveProcessTbl: LitTable | null | undefined;
+  private liveProcessSource: Array<LiveProcess> = [];
+  private queryLiveResult: Array<LiveProcess> = [];
   private search: HTMLInputElement | undefined | null;
 
-  set data(val: SelectionParam | any) {
+  set data(liveProcessValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.liveProcessTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(liveProcessValue);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-live-processes');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.liveProcessTbl = this.shadowRoot?.querySelector<LitTable>('#tb-live-processes');
+    this.liveProcessTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -46,28 +45,22 @@ export class TabPaneLiveProcesses extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.liveProcessTbl!)
   }
 
   filterData() {
-    if (this.queryResult.length > 0) {
-      let filter = this.queryResult.filter((item) => {
+    if (this.queryLiveResult.length > 0) {
+      let filterLive = this.queryLiveResult.filter((item) => {
         let array = this.toLiveProcessArray(item);
         let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1);
         return isInclude.length > 0;
       });
-      if (filter.length > 0) {
-        this.source = filter;
-        this.tbl!.recycleDataSource = this.source;
+      if (filterLive.length > 0) {
+        this.liveProcessSource = filterLive;
+        this.liveProcessTbl!.recycleDataSource = this.liveProcessSource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.liveProcessSource = [];
+        this.liveProcessTbl!.recycleDataSource = [];
       }
     }
   }
@@ -102,37 +95,37 @@ export class TabPaneLiveProcesses extends BaseElement {
           liveProcess.cpuTimeNumber = Number(liveProcess.cpuTime);
           liveProcess.cpuTime = this.timeFormat(Number(liveProcess.cpuTime));
         }
-        this.source = item;
-        this.queryResult = item;
-        this.tbl!.recycleDataSource = this.source;
+        this.liveProcessSource = item;
+        this.queryLiveResult = item;
+        this.liveProcessTbl!.recycleDataSource = this.liveProcessSource;
       } else {
-        this.source = [];
-        this.queryResult = [];
-        this.tbl!.recycleDataSource = [];
+        this.liveProcessSource = [];
+        this.queryLiveResult = [];
+        this.liveProcessTbl!.recycleDataSource = [];
       }
     });
   }
 
   timeFormat(ms: number): string {
-    let currentMs = ms;
+    let currentMsTime = ms;
     let hours = 3600000;
     let minute1 = 60000;
     let second1 = 1000;
     let res = '';
-    if (currentMs >= hours) {
-      res += Math.floor(currentMs / hours) + ' h ';
-      currentMs = currentMs - Math.floor(currentMs / hours) * hours;
+    if (currentMsTime >= hours) {
+      res += Math.floor(currentMsTime / hours) + ' h ';
+      currentMsTime = currentMsTime - Math.floor(currentMsTime / hours) * hours;
     }
-    if (currentMs >= minute1) {
-      res += Math.floor(currentMs / minute1) + ' min ';
-      currentMs = currentMs - Math.floor(currentMs / minute1) * minute1;
+    if (currentMsTime >= minute1) {
+      res += Math.floor(currentMsTime / minute1) + ' min ';
+      currentMsTime = currentMsTime - Math.floor(currentMsTime / minute1) * minute1;
     }
-    if (currentMs >= second1) {
-      res += Math.floor(currentMs / second1) + ' s ';
-      currentMs = currentMs - Math.floor(currentMs / second1) * second1;
+    if (currentMsTime >= second1) {
+      res += Math.floor(currentMsTime / second1) + ' s ';
+      currentMsTime = currentMsTime - Math.floor(currentMsTime / second1) * second1;
     }
-    if (currentMs > 0) {
-      res += currentMs + ' ms ';
+    if (currentMsTime > 0) {
+      res += currentMsTime + ' ms ';
     } else {
       res += '0 ms ';
     }
@@ -142,23 +135,26 @@ export class TabPaneLiveProcesses extends BaseElement {
   initHtml(): string {
     return `
 <style>
+.live-processes-table{
+    height: auto;
+}
 :host{
     display: flex;
     flex-direction: column;
     padding: 10px 10px;
 }
 </style>
-<lit-table id="tb-live-processes" style="height: auto">
-    <lit-table-column order width="1fr" title="Process ID" data-index="processId" key="processId" align="flex-start"></lit-table-column>
-    <lit-table-column order width="1fr" title="Process Name" data-index="processName" key="processName" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Responsible Process" data-index="responsibleProcess" key="responsibleProcess" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="User ID" data-index="userName" key="userName" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="%CPU" data-index="cpu" key="cpu" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="CPU Time" data-index="cpuTime" key="cpuTime" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="#Threads" data-index="threads" key="threads" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Memory" data-index="memory" key="memory" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Disk Writes(B)" data-index="diskWrite" key="diskWrite" align="flex-start" ></lit-table-column>
-    <lit-table-column order width="1fr" title="Disk Reads(B)" data-index="diskReads" key="diskReads" align="flex-start" ></lit-table-column>
+<lit-table id="tb-live-processes" class="live-processes-table">
+    <lit-table-column order title="Process ID" data-index="processId" key="processId" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="Process Name" data-index="processName" key="processName" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="Responsible Process" data-index="responsibleProcess" key="responsibleProcess" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="User ID" data-index="userName" key="userName" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="%CPU" data-index="cpu" key="cpu" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="CPU Time" data-index="cpuTime" key="cpuTime" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="#Threads" data-index="threads" key="threads" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="Memory" data-index="memory" key="memory" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="Disk Writes(B)" data-index="diskWrite" key="diskWrite" align="flex-start" width="1fr" ></lit-table-column>
+    <lit-table-column order title="Disk Reads(B)" data-index="diskReads" key="diskReads" align="flex-start" width="1fr" ></lit-table-column>
 </lit-table>
         `;
   }
@@ -166,21 +162,21 @@ export class TabPaneLiveProcesses extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: LiveProcess, b: LiveProcess) {
+      return function (liveProcessLeftData: LiveProcess, liveProcessRightData: LiveProcess) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(liveProcessRightData[property]) - parseFloat(liveProcessLeftData[property]) : parseFloat(liveProcessLeftData[property]) - parseFloat(liveProcessRightData[property]);
         } else if (type === 'cpuTime') {
-          return sort === 2 ? b.cpuTimeNumber - a.cpuTimeNumber : a.cpuTimeNumber - b.cpuTimeNumber;
+          return sort === 2 ? liveProcessRightData.cpuTimeNumber - liveProcessLeftData.cpuTimeNumber : liveProcessLeftData.cpuTimeNumber - liveProcessRightData.cpuTimeNumber;
         } else if (type === 'memory') {
-          return sort === 2 ? b.memoryNumber - a.memoryNumber : a.memoryNumber - b.memoryNumber;
+          return sort === 2 ? liveProcessRightData.memoryNumber - liveProcessLeftData.memoryNumber : liveProcessLeftData.memoryNumber - liveProcessRightData.memoryNumber;
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (liveProcessRightData[property] > liveProcessLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (liveProcessRightData[property] == liveProcessLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -191,14 +187,14 @@ export class TabPaneLiveProcesses extends BaseElement {
     }
 
     if (detail.key == 'startTime' || detail.key == 'processName') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.liveProcessSource.sort(compare(detail.key, detail.sort, 'string'));
     } else if (detail.key == 'cpuTime') {
-      this.source.sort(compare(detail.key, detail.sort, 'cpuTime'));
+      this.liveProcessSource.sort(compare(detail.key, detail.sort, 'cpuTime'));
     } else if (detail.key == 'memory') {
-      this.source.sort(compare(detail.key, detail.sort, 'memory'));
+      this.liveProcessSource.sort(compare(detail.key, detail.sort, 'memory'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.liveProcessSource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.liveProcessTbl!.recycleDataSource = this.liveProcessSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts
index 9a7708b9f67b9cd20d7603f55bceca3026fbf6b7..ef888e333d413d7e8688bc0e936a8965c81aa81e 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneMemoryAbility.ts
@@ -19,26 +19,25 @@ import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabMemoryAbilityData, queryStartTime } from '../../../../database/SqlLite.js';
 import { SystemMemorySummary } from '../../../../bean/AbilityMonitor.js';
 import { Utils } from '../../base/Utils.js';
-import '../../../SpFilter.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-memory-ability')
 export class TabPaneMemoryAbility extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<SystemMemorySummary> = [];
-  private float: HTMLDivElement | null | undefined;
-  private queryResult: Array<SystemMemorySummary> = [];
+  private memoryAbilityTbl: LitTable | null | undefined;
+  private memoryAbilitySource: Array<SystemMemorySummary> = [];
+  private queryMemoryResult: Array<SystemMemorySummary> = [];
   private search: HTMLInputElement | undefined | null;
 
-  set data(val: SelectionParam | any) {
+  set data(memoryAbilityValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.memoryAbilityTbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(memoryAbilityValue);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-memory-ability');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.memoryAbilityTbl = this.shadowRoot?.querySelector<LitTable>('#tb-memory-ability');
+    this.memoryAbilityTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -46,28 +45,22 @@ export class TabPaneMemoryAbility extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.memoryAbilityTbl!)
   }
 
   filterData() {
-    if (this.queryResult.length > 0) {
-      let filter = this.queryResult.filter((item) => {
+    if (this.queryMemoryResult.length > 0) {
+      let filterMemory = this.queryMemoryResult.filter((item) => {
         let array = this.toMemoryAbilityArray(item);
         let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1);
         return isInclude.length > 0;
       });
-      if (filter.length > 0) {
-        this.source = filter;
-        this.tbl!.recycleDataSource = this.source;
+      if (filterMemory.length > 0) {
+        this.memoryAbilitySource = filterMemory;
+        this.memoryAbilityTbl!.recycleDataSource = this.memoryAbilitySource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.memoryAbilitySource = [];
+        this.memoryAbilityTbl!.recycleDataSource = [];
       }
     }
   }
@@ -87,8 +80,8 @@ export class TabPaneMemoryAbility extends BaseElement {
       let startTime = res[0].start_ts;
       getTabMemoryAbilityData(val.leftNs + startTime, val.rightNs + startTime).then((items) => {
         log('getTabMemoryAbilityData result size : ' + items.length);
-        this.source = [];
-        this.queryResult = [];
+        this.memoryAbilitySource = [];
+        this.queryMemoryResult = [];
         if (items.length != null && items.length > 0) {
           let lastTime = 0;
           for (const item of items) {
@@ -178,17 +171,17 @@ export class TabPaneMemoryAbility extends BaseElement {
                   break;
               }
             }
-            this.source.push(systemMemorySummary);
+            this.memoryAbilitySource.push(systemMemorySummary);
           }
-          this.tbl!.recycleDataSource = this.source;
+          this.memoryAbilityTbl!.recycleDataSource = this.memoryAbilitySource;
         } else {
-          this.source = [];
-          this.tbl!.recycleDataSource = [];
+          this.memoryAbilitySource = [];
+          this.memoryAbilityTbl!.recycleDataSource = [];
         }
       });
     });
-    if (this.tbl) {
-      let th = this.tbl.shadowRoot?.querySelector<HTMLDivElement>('.th');
+    if (this.memoryAbilityTbl) {
+      let th = this.memoryAbilityTbl.shadowRoot?.querySelector<HTMLDivElement>('.th');
       if (th) {
         th.style.gridColumnGap = '5px';
       }
@@ -198,14 +191,14 @@ export class TabPaneMemoryAbility extends BaseElement {
   initHtml(): string {
     return `
 <style>
+#tb-memory-ability{
+    overflow-x:auto;     
+}
 :host{
-    display: flex;
     flex-direction: column;
+    display: flex;
     padding: 10px 10px;
 }
-#tb-memory-ability{
-  overflow-x:auto;     
-}
 </style>
    <lit-table id="tb-memory-ability" style="height: auto">
     <lit-table-column order width="150px" title="StartTime" data-index="startTimeStr" key="startTimeStr" align="flex-start"></lit-table-column>
@@ -238,19 +231,19 @@ export class TabPaneMemoryAbility extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SystemMemorySummary, b: SystemMemorySummary) {
+      return function (memoryAbilityLeftData: SystemMemorySummary, memoryAbilityRightData: SystemMemorySummary) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(memoryAbilityRightData[property]) - parseFloat(memoryAbilityLeftData[property]) : parseFloat(memoryAbilityLeftData[property]) - parseFloat(memoryAbilityRightData[property]);
         } else if (type === 'durationStr') {
-          return sort === 2 ? b.durationNumber - a.durationNumber : a.durationNumber - b.durationNumber;
+          return sort === 2 ? memoryAbilityRightData.durationNumber - memoryAbilityLeftData.durationNumber : memoryAbilityLeftData.durationNumber - memoryAbilityRightData.durationNumber;
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (memoryAbilityRightData[property] > memoryAbilityLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (memoryAbilityRightData[property] == memoryAbilityLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -261,12 +254,12 @@ export class TabPaneMemoryAbility extends BaseElement {
     }
 
     if (detail.key === 'startTime') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.memoryAbilitySource.sort(compare(detail.key, detail.sort, 'string'));
     } else if (detail.key === 'durationStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'durationStr'));
+      this.memoryAbilitySource.sort(compare(detail.key, detail.sort, 'durationStr'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.memoryAbilitySource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.memoryAbilityTbl!.recycleDataSource = this.memoryAbilitySource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts
index 49382b4c6699988fe94ae1dd87e163cc679c5227..c7bdbd7ff3419bae139137f934fe69d19e2672ca 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneNetworkAbility.ts
@@ -19,27 +19,27 @@ import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabNetworkAbilityData } from '../../../../database/SqlLite.js';
 import { SystemNetworkSummary } from '../../../../bean/AbilityMonitor.js';
 import { Utils } from '../../base/Utils.js';
-import '../../../SpFilter.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-network-ability')
 export class TabPaneNetworkAbility extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<SystemNetworkSummary> = [];
+  private networkAbilityTbl: LitTable | null | undefined;
+  private networkAbilitySource: Array<SystemNetworkSummary> = [];
   private float: HTMLDivElement | null | undefined;
   private queryResult: Array<SystemNetworkSummary> = [];
   private search: HTMLInputElement | undefined | null;
 
-  set data(val: SelectionParam | any) {
+  set data(networkAbilityValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.networkAbilityTbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(networkAbilityValue);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-network-ability');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.networkAbilityTbl = this.shadowRoot?.querySelector<LitTable>('#tb-network-ability');
+    this.networkAbilityTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -47,28 +47,22 @@ export class TabPaneNetworkAbility extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.networkAbilityTbl!)
   }
 
   filterData() {
     if (this.queryResult.length > 0) {
-      let filter = this.queryResult.filter((item) => {
+      let filterNetwork = this.queryResult.filter((item) => {
         let array = this.toNetWorkAbilityArray(item);
         let isInclude = array.filter((value) => value.indexOf(this.search!.value) > -1);
         return isInclude.length > 0;
       });
-      if (filter.length > 0) {
-        this.source = filter;
-        this.tbl!.recycleDataSource = this.source;
+      if (filterNetwork.length > 0) {
+        this.networkAbilitySource = filterNetwork;
+        this.networkAbilityTbl!.recycleDataSource = this.networkAbilitySource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.networkAbilitySource = [];
+        this.networkAbilityTbl!.recycleDataSource = [];
       }
     }
   }
@@ -107,13 +101,13 @@ export class TabPaneNetworkAbility extends BaseElement {
           systemNetworkSummary.packetsOutStr = ColorUtils.formatNumberComma(systemNetworkSummary.packetsOut);
           systemNetworkSummary.packetsOutSecStr = systemNetworkSummary.packetsOutSec.toFixed(2);
         }
-        this.source = item;
+        this.networkAbilitySource = item;
         this.queryResult = item;
-        this.tbl!.recycleDataSource = this.source;
+        this.networkAbilityTbl!.recycleDataSource = this.networkAbilitySource;
       } else {
-        this.source = [];
+        this.networkAbilitySource = [];
         this.queryResult = [];
-        this.tbl!.recycleDataSource = [];
+        this.networkAbilityTbl!.recycleDataSource = [];
       }
     });
   }
@@ -121,13 +115,16 @@ export class TabPaneNetworkAbility extends BaseElement {
   initHtml(): string {
     return `
 <style>
+.network-ability-table{
+    height: auto;
+}
 :host{
+    padding: 10px 10px;
     display: flex;
     flex-direction: column;
-    padding: 10px 10px;
 }
 </style>
-<lit-table id="tb-network-ability" style="height: auto">
+<lit-table id="tb-network-ability" class="network-ability-table">
     <lit-table-column order width="1fr" title="StartTime" data-index="startTimeStr" key="startTimeStr" align="flex-start"></lit-table-column>
     <lit-table-column order width="1fr" title="Duration" data-index="durationStr" key="durationStr" align="flex-start" ></lit-table-column>
     <lit-table-column order width="1fr" title="Data Received" data-index="dataReceivedStr" key="dataReceivedStr" align="flex-start" ></lit-table-column>
@@ -145,35 +142,35 @@ export class TabPaneNetworkAbility extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SystemNetworkSummary, b: SystemNetworkSummary) {
+      return function (networkAbilityLeftData: SystemNetworkSummary, networkAbilityRightData: SystemNetworkSummary) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(networkAbilityRightData[property]) - parseFloat(networkAbilityLeftData[property]) : parseFloat(networkAbilityLeftData[property]) - parseFloat(networkAbilityRightData[property]);
         } else if (type === 'durationStr') {
-          return sort === 2 ? b.duration - a.duration : a.duration - b.duration;
+          return sort === 2 ? networkAbilityRightData.duration - networkAbilityLeftData.duration : networkAbilityLeftData.duration - networkAbilityRightData.duration;
         } else if (type === 'dataReceivedStr') {
-          return sort === 2 ? b.dataReceived - a.dataReceived : a.dataReceived - b.dataReceived;
+          return sort === 2 ? networkAbilityRightData.dataReceived - networkAbilityLeftData.dataReceived : networkAbilityLeftData.dataReceived - networkAbilityRightData.dataReceived;
         } else if (type === 'dataReceivedSecStr') {
-          return sort === 2 ? b.dataReceivedSec - a.dataReceivedSec : a.dataReceivedSec - b.dataReceivedSec;
+          return sort === 2 ? networkAbilityRightData.dataReceivedSec - networkAbilityLeftData.dataReceivedSec : networkAbilityLeftData.dataReceivedSec - networkAbilityRightData.dataReceivedSec;
         } else if (type === 'dataSendStr') {
-          return sort === 2 ? b.dataSend - a.dataSend : a.dataSend - b.dataSend;
+          return sort === 2 ? networkAbilityRightData.dataSend - networkAbilityLeftData.dataSend : networkAbilityLeftData.dataSend - networkAbilityRightData.dataSend;
         } else if (type === 'dataSendSecStr') {
-          return sort === 2 ? b.dataSendSec - a.dataSendSec : a.dataSendSec - b.dataSendSec;
+          return sort === 2 ? networkAbilityRightData.dataSendSec - networkAbilityLeftData.dataSendSec : networkAbilityLeftData.dataSendSec - networkAbilityRightData.dataSendSec;
         } else if (type === 'packetsInStr') {
-          return sort === 2 ? b.packetsIn - a.packetsIn : a.packetsIn - b.packetsIn;
+          return sort === 2 ? networkAbilityRightData.packetsIn - networkAbilityLeftData.packetsIn : networkAbilityLeftData.packetsIn - networkAbilityRightData.packetsIn;
         } else if (type === 'packetsInSecStr') {
-          return sort === 2 ? b.packetsInSec - a.packetsInSec : a.packetsInSec - b.packetsInSec;
+          return sort === 2 ? networkAbilityRightData.packetsInSec - networkAbilityLeftData.packetsInSec : networkAbilityLeftData.packetsInSec - networkAbilityRightData.packetsInSec;
         } else if (type === 'packetsOutStr') {
-          return sort === 2 ? b.packetsOut - a.packetsOut : a.packetsOut - b.packetsOut;
+          return sort === 2 ? networkAbilityRightData.packetsOut - networkAbilityLeftData.packetsOut : networkAbilityLeftData.packetsOut - networkAbilityRightData.packetsOut;
         } else if (type === 'packetsOutSecStr') {
-          return sort === 2 ? b.packetsOutSec - a.packetsOutSec : a.packetsOutSec - b.packetsOutSec;
+          return sort === 2 ? networkAbilityRightData.packetsOutSec - networkAbilityLeftData.packetsOutSec : networkAbilityLeftData.packetsOutSec - networkAbilityRightData.packetsOutSec;
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (networkAbilityRightData[property] > networkAbilityLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (networkAbilityRightData[property] == networkAbilityLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -184,28 +181,28 @@ export class TabPaneNetworkAbility extends BaseElement {
     }
 
     if (detail.key === 'startTime') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'string'));
     } else if (detail.key === 'durationStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'durationStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'durationStr'));
     } else if (detail.key === 'dataReceivedStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataReceivedStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'dataReceivedStr'));
     } else if (detail.key === 'dataReceivedSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataReceivedSecStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'dataReceivedSecStr'));
     } else if (detail.key === 'dataSendStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataSendStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'dataSendStr'));
     } else if (detail.key === 'dataSendSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'dataSendSecStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'dataSendSecStr'));
     } else if (detail.key === 'packetsInStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'packetsInStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'packetsInStr'));
     } else if (detail.key === 'packetsInSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'packetsInSecStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'packetsInSecStr'));
     } else if (detail.key === 'packetsOutStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'packetsOutStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'packetsOutStr'));
     } else if (detail.key === 'packetsOutSecStr') {
-      this.source.sort(compare(detail.key, detail.sort, 'packetsOutSecStr'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'packetsOutSecStr'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.networkAbilitySource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.networkAbilityTbl!.recycleDataSource = this.networkAbilitySource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts b/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts
index 2f2d8696092c36b78f21740a1f9514b428a1d1b9..c4f4d8eb692bffd5f5ee226e7ad7d3b1e6b284ff 100644
--- a/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts
+++ b/ide/src/trace/component/trace/sheet/clock/TabPaneClockCounter.ts
@@ -16,25 +16,25 @@
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { Counter, SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
-import { getTabCounters, getTabVirtualCounters } from '../../../../database/SqlLite.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-clock-counter')
 export class TabPaneClockCounter extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private source: Array<SelectionData> = [];
+  private clockCounterTbl: LitTable | null | undefined;
+  private clockCounterRange: HTMLLabelElement | null | undefined;
+  private clockCounterSource: Array<SelectionData> = [];
 
-  set data(val: SelectionParam | any) {
+  set data(clockCounterValue: SelectionParam | any) {
     //@ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    this.clockCounterTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
+    this.clockCounterRange!.textContent =
+      'Selected range: ' + parseFloat(((clockCounterValue.rightNs - clockCounterValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     let dataSource: Array<SelectionData> = [];
-    let collect = val.clockMapData;
+    let collect = clockCounterValue.clockMapData;
     let sumCount = 0;
     for (let key of collect.keys()) {
       let counters = collect.get(key);
-      let sd = this.createSelectCounterData(key, counters, val.leftNs, val.rightNs);
+      let sd = this.createSelectCounterData(key, counters, clockCounterValue.leftNs, clockCounterValue.rightNs);
       sumCount += Number.parseInt(sd.count || '0');
       dataSource.push(sd);
     }
@@ -42,14 +42,14 @@ export class TabPaneClockCounter extends BaseElement {
     sumData.count = sumCount.toString();
     sumData.process = ' ';
     dataSource.splice(0, 0, sumData);
-    this.source = dataSource;
-    this.tbl!.recycleDataSource = dataSource;
+    this.clockCounterSource = dataSource;
+    this.clockCounterTbl!.recycleDataSource = dataSource;
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.clockCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
+    this.clockCounterRange = this.shadowRoot?.querySelector('#time-range');
+    this.clockCounterTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -57,97 +57,94 @@ export class TabPaneClockCounter extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.clockCounterTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .clock-counter-label{
+            margin-bottom: 5px;
+        }
         :host{
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="time-range" class="clock-counter-label" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
         <lit-table id="tb-counter" style="height: auto">
-            <lit-table-column width="25%" title="Name" data-index="name" key="name"  align="flex-start" order>
+            <lit-table-column order title="Name" data-index="name" key="name"  align="flex-start" width="25%">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Delta value" data-index="delta" key="delta"  align="flex-start" order >
+            <lit-table-column data-index="delta" order title="Delta value"  key="delta"  align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Rate /s" data-index="rate" key="rate"  align="flex-start" order >
+            <lit-table-column title="Rate /s" key="rate" order data-index="rate" align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Weighted avg value" data-index="avgWeight" key="avgWeight"  align="flex-start" order >
+            <lit-table-column title="Weighted avg value" order data-index="avgWeight" key="avgWeight"  align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count"  align="flex-start" order >
+            <lit-table-column data-index="count" title="Count" order key="count"  align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="First value" data-index="first" key="first"  align="flex-start" order >
+            <lit-table-column title="First value" data-index="first" order key="first"  align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Last value" data-index="last" key="last"  align="flex-start" order >
+            <lit-table-column title="Last value" align="flex-start" order data-index="last" key="last" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min value" data-index="min" key="min"  align="flex-start" order >
+            <lit-table-column title="Min value" key="min" data-index="min" order align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max value" data-index="max" key="max"  align="flex-start" order >
+            <lit-table-column data-index="max" title="Max value" key="max"  order align="flex-start" width="1fr">
             </lit-table-column>
         </lit-table>
         `;
   }
 
   createSelectCounterData(name: string, list: Array<any>, leftNs: number, rightNs: number): SelectionData {
-    let selectData = new SelectionData();
+    let selectCounterData = new SelectionData();
     if (list.length > 0) {
       let range = rightNs - leftNs;
       let first = list[0];
-      selectData.trackId = first.filterId;
-      selectData.name = name;
-      selectData.first = first.value + '';
-      selectData.count = list.length + '';
-      selectData.last = list[list.length - 1].value + '';
-      selectData.delta = parseInt(selectData.last) - parseInt(selectData.first) + '';
-      selectData.rate = (parseInt(selectData.delta) / ((range * 1.0) / 1000000000)).toFixed(4);
-      selectData.min = first.value + '';
-      selectData.max = '0';
+      selectCounterData.trackId = first.filterId;
+      selectCounterData.name = name;
+      selectCounterData.first = first.value + '';
+      selectCounterData.count = list.length + '';
+      selectCounterData.last = list[list.length - 1].value + '';
+      selectCounterData.delta = parseInt(selectCounterData.last) - parseInt(selectCounterData.first) + '';
+      selectCounterData.rate = (parseInt(selectCounterData.delta) / ((range * 1.0) / 1000000000)).toFixed(4);
+      selectCounterData.min = first.value + '';
+      selectCounterData.max = '0';
       let weightAvg = 0.0;
       for (let i = 0; i < list.length; i++) {
         let counter = list[i];
-        if (counter.value < parseInt(selectData.min)) {
-          selectData.min = counter.value.toString();
+        if (counter.value < parseInt(selectCounterData.min)) {
+          selectCounterData.min = counter.value.toString();
         }
-        if (counter.value > parseInt(selectData.max)) {
-          selectData.max = counter.value.toString();
+        if (counter.value > parseInt(selectCounterData.max)) {
+          selectCounterData.max = counter.value.toString();
         }
         let start = i == 0 ? leftNs : counter.startNS;
         let end = i == list.length - 1 ? rightNs : list[i + 1].startNS;
         weightAvg += counter.value * (((end - start) * 1.0) / range);
       }
-      selectData.avgWeight = weightAvg.toFixed(2);
+      selectCounterData.avgWeight = weightAvg.toFixed(2);
     }
-    return selectData;
+    return selectCounterData;
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+      return function (clockCounterLeftData: SelectionData, clockCounterRightData: SelectionData) {
+        if (clockCounterLeftData.process == ' ' || clockCounterRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(clockCounterRightData[property]) - parseFloat(clockCounterLeftData[property]) : parseFloat(clockCounterLeftData[property]) - parseFloat(clockCounterRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (clockCounterRightData[property] > clockCounterLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (clockCounterRightData[property] == clockCounterLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -158,10 +155,10 @@ export class TabPaneClockCounter extends BaseElement {
     }
 
     if (detail.key === 'name') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.clockCounterSource.sort(compare(detail.key, detail.sort, 'string'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.clockCounterSource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.clockCounterTbl!.recycleDataSource = this.clockCounterSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts
index f38ae77dcb8e79107cc2e45d0673362ff29f788e..fe1668219d23bc4c914c92be7fa17542b475b1cf 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneBoxChild.ts
@@ -21,37 +21,38 @@ import { Utils } from '../../base/Utils.js';
 import { SpSystemTrace } from '../../../SpSystemTrace.js';
 import { SPTChild } from '../../../../bean/StateProcessThread.js';
 import { TraceRow } from '../../base/TraceRow.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-box-child')
 export class TabPaneBoxChild extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private source: Array<SPTChild> = [];
+  private boxChildTbl: LitTable | null | undefined;
+  private boxChildRange: HTMLLabelElement | null | undefined;
+  private boxChildSource: Array<SPTChild> = [];
   private loadDataInCache: boolean = false;
 
-  set data(val: BoxJumpParam) {
+  set data(boxChildValue: BoxJumpParam) {
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    if (val.state != null && val.state != undefined && val.processId && val.threadId) {
-      this.tbl!.recycleDataSource = [];
+    this.boxChildTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
+    this.boxChildRange!.textContent =
+      'Selected range: ' + parseFloat(((boxChildValue.rightNs - boxChildValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    if (boxChildValue.state != null && boxChildValue.state != undefined && boxChildValue.processId && boxChildValue.threadId) {
+      this.boxChildTbl!.recycleDataSource = [];
       if (this.loadDataInCache) {
-        this.getDataByCache(val).then((arr) => {
-          this.source = arr;
+        this.getDataByCache(boxChildValue).then((arr) => {
+          this.boxChildSource = arr;
           // @ts-ignore
-          this.tbl?.recycleDataSource = arr;
+          this.boxChildTbl?.recycleDataSource = arr;
         });
       } else {
-        this.getDataByDB(val);
+        this.getDataByDB(boxChildValue);
       }
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.boxChildTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread');
+    this.boxChildRange = this.shadowRoot?.querySelector('#time-range');
+    this.boxChildTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -59,13 +60,7 @@ export class TabPaneBoxChild extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.boxChildTbl!)
   }
 
   getDataByDB(val: BoxJumpParam) {
@@ -82,13 +77,13 @@ export class TabPaneBoxChild extends BaseElement {
           e.threadName = (e.thread == undefined || e.thread == null ? 'thread' : e.thread) + '(' + e.threadId + ')';
           e.note = '-';
         });
-        this.source = result;
+        this.boxChildSource = result;
         // @ts-ignore
-        this.tbl?.recycleDataSource = result;
+        this.boxChildTbl?.recycleDataSource = result;
       } else {
-        this.source = [];
+        this.boxChildSource = [];
         // @ts-ignore
-        this.tbl?.recycleDataSource = [];
+        this.boxChildTbl?.recycleDataSource = [];
       }
     });
   }
@@ -128,29 +123,34 @@ export class TabPaneBoxChild extends BaseElement {
   initHtml(): string {
     return `
         <style>
+        .box-child-label{
+          text-align: end;
+          width: 100%;
+          height: 20px;
+        }
         :host{
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="time-range" class="box-child-label" style="font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-cpu-thread" style="height: auto">
-            <lit-table-column order width="15%" title="StartTime(Relative)" data-index="startTime" key="startTime" align="flex-start" order >
+            <lit-table-column order title="StartTime(Relative)" width="15%" data-index="startTime" key="startTime" align="flex-start" order >
             </lit-table-column>
-            <lit-table-column order width="15%" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start" order >
+            <lit-table-column order title="StartTime(Absolute)" width="15%" data-index="absoluteTime" key="absoluteTime" align="flex-start" order >
             </lit-table-column>
-            <lit-table-column order width="20%" title="Process" data-index="processName" key="processName" align="flex-start" order >
+            <lit-table-column order width="20%" data-index="processName" key="processName" title="Process" align="flex-start" order >
             </lit-table-column>
-            <lit-table-column order width="20%" title="Thread" data-index="threadName" key="threadName" align="flex-start" order >
+            <lit-table-column order width="20%" data-index="threadName" key="threadName" align="flex-start" order title="Thread">
             </lit-table-column>
-            <lit-table-column order width="1fr" title="State" data-index="state" key="state" align="flex-start" order >
+            <lit-table-column order width="1fr" data-index="state" key="state" align="flex-start" order title="State">
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Core" data-index="core" key="core" align="flex-start" order >
+            <lit-table-column order width="1fr"data-index="core"  title="Core" key="core" align="flex-start" order >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Priority" data-index="prior" key="prior" align="flex-start" order >
+            <lit-table-column order width="1fr" data-index="prior" title="Priority" key="prior" align="flex-start" order >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Note" data-index="note" key="note" align="flex-start" >
+            <lit-table-column order width="1fr" data-index="note" key="note" align="flex-start" title="Note">
             </lit-table-column>
         </lit-table>
         `;
@@ -159,17 +159,17 @@ export class TabPaneBoxChild extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
+      return function (boxChildLeftData: SelectionData, boxChildRightData: SelectionData) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(boxChildRightData[property]) - parseFloat(boxChildLeftData[property]) : parseFloat(boxChildLeftData[property]) - parseFloat(boxChildRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (boxChildRightData[property] > boxChildLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (boxChildRightData[property] == boxChildLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -180,7 +180,7 @@ export class TabPaneBoxChild extends BaseElement {
     }
 
     // @ts-ignore
-    this.source.sort(compare(detail.key, detail.sort, 'string'));
-    this.tbl!.recycleDataSource = this.source;
+    this.boxChildSource.sort(compare(detail.key, detail.sort, 'string'));
+    this.boxChildTbl!.recycleDataSource = this.boxChildSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneContextSwitch.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneContextSwitch.ts
deleted file mode 100644
index ade1a6e56c4f4e99e0dc8001729ebcb65dc901d6..0000000000000000000000000000000000000000
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneContextSwitch.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
- * 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.js';
-import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionParam } from '../../../../bean/BoxSelection.js';
-import { getStatesProcessThreadDataByRange } from '../../../../database/SqlLite.js';
-import { SPT, StateProcessThread } from '../../../../bean/StateProcessThread.js';
-import { Utils } from '../../base/Utils.js';
-import { SpSystemTrace } from '../../../SpSystemTrace.js';
-
-@element('tabpane-context-switch')
-export class TabPaneContextSwitch extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private loadDataInCache: boolean = true;
-  private selectionParam: SelectionParam | null | undefined;
-
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
-      return;
-    }
-    this.selectionParam = val;
-    // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    if (this.loadDataInCache) {
-      this.getDataBySPT(val.leftNs, val.rightNs, SpSystemTrace.SPT_DATA);
-    } else {
-      this.queryDataByDB(val);
-    }
-  }
-
-  initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cs');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
-  }
-
-  getDataBySPT(leftNs: number, rightNs: number, source: Array<SPT>) {
-    let pMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    let ptMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    let ptsMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    source.map((d) => {
-      if (!(d.end_ts < leftNs || d.start_ts > rightNs)) {
-        if (pMap.has(d.processId + '')) {
-          let obj1 = pMap.get(d.processId + '');
-          obj1!.count++;
-          obj1!.wallDuration += d.dur;
-          obj1!.avgDuration = (obj1!.wallDuration / obj1!.count).toFixed(2);
-          if (d.dur > obj1!.maxDuration) {
-            obj1!.maxDuration = d.dur;
-          }
-          if (d.dur < obj1!.minDuration) {
-            obj1!.minDuration = d.dur;
-          }
-        } else {
-          let obj1 = new StateProcessThread();
-          obj1.id = 'p' + d.processId;
-          obj1.title = (d.process == null || d.process == '' ? 'Process' : d.process) + '(' + d.processId + ')';
-          obj1.process = d.process;
-          obj1.processId = d.processId;
-          obj1.minDuration = d.dur;
-          obj1.maxDuration = d.dur;
-          obj1.count = 1;
-          obj1.avgDuration = d.dur + '';
-          obj1.wallDuration = d.dur;
-          pMap.set(d.processId + '', obj1);
-        }
-        if (ptMap.has(d.processId + '_' + d.threadId)) {
-          let obj2 = ptMap.get(d.processId + '_' + d.threadId);
-          obj2!.count++;
-          obj2!.wallDuration += d.dur;
-          obj2!.avgDuration = (obj2!.wallDuration / obj2!.count).toFixed(2);
-          if (d.dur > obj2!.maxDuration) {
-            obj2!.maxDuration = d.dur;
-          }
-          if (d.dur < obj2!.minDuration) {
-            obj2!.minDuration = d.dur;
-          }
-        } else {
-          let obj2 = new StateProcessThread();
-          obj2.id = 'p' + d.processId + '_' + 't' + d.threadId;
-          obj2.pid = 'p' + d.processId;
-          obj2.title = (d.thread == null || d.thread == '' ? 'Thread' : d.thread) + '(' + d.threadId + ')';
-          obj2.processId = d.processId;
-          obj2.process = d.process;
-          obj2.thread = d.thread;
-          obj2.threadId = d.threadId;
-          obj2.minDuration = d.dur;
-          obj2.maxDuration = d.dur;
-          obj2.count = 1;
-          obj2.avgDuration = d.dur + '';
-          obj2.wallDuration = d.dur;
-          ptMap.set(d.processId + '_' + d.threadId, obj2);
-        }
-        if (ptsMap.has(d.processId + '_' + d.threadId + '_' + d.state)) {
-          let obj3 = ptsMap.get(d.processId + '_' + d.threadId + '_' + d.state);
-          obj3!.count++;
-          obj3!.wallDuration += d.dur;
-          obj3!.avgDuration = (obj3!.wallDuration / obj3!.count).toFixed(2);
-          if (d.dur > obj3!.maxDuration) {
-            obj3!.maxDuration = d.dur;
-          }
-          if (d.dur < obj3!.minDuration) {
-            obj3!.minDuration = d.dur;
-          }
-        } else {
-          let obj3 = new StateProcessThread();
-          obj3.id = 'p' + d.processId + '_' + 't' + d.threadId + '_' + (d.state == 'R+' ? 'RP' : d.state);
-          obj3.pid = 'p' + d.processId + '_' + 't' + d.threadId;
-          obj3.title = Utils.getEndState(d.state);
-          obj3.processId = d.processId;
-          obj3.process = d.process;
-          obj3.thread = d.thread;
-          obj3.threadId = d.threadId;
-          obj3.state = d.state;
-          obj3.minDuration = d.dur;
-          obj3.maxDuration = d.dur;
-          obj3.count = 1;
-          obj3.avgDuration = d.dur + '';
-          obj3.wallDuration = d.dur;
-          ptsMap.set(d.processId + '_' + d.threadId + '_' + d.state, obj3);
-        }
-      }
-    });
-    let arr: Array<StateProcessThread> = [];
-    for (let key of pMap.keys()) {
-      let s = pMap.get(key);
-      s!.children = [];
-      for (let ks of ptMap.keys()) {
-        if (ks.startsWith(key + '_')) {
-          let sp = ptMap.get(ks);
-          sp!.children = [];
-          for (let kst of ptsMap.keys()) {
-            if (kst.startsWith(ks + '_')) {
-              let spt = ptsMap.get(kst);
-              sp!.children.push(spt!);
-            }
-          }
-          s!.children.push(sp!);
-        }
-      }
-      arr.push(s!);
-    }
-    this.tbl!.recycleDataSource = arr;
-  }
-
-  queryDataByDB(val: SelectionParam | any) {
-    getStatesProcessThreadDataByRange(val.leftNs, val.rightNs).then((result) => {
-      this.getDataBySPT(val.leftNs, val.rightNs, result);
-    });
-  }
-
-  initHtml(): string {
-    return `
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
-        <lit-table id="tb-cs" style="height: auto" tree>
-            <lit-table-column width="500px" title="Process/Thread/Event" data-index="title" key="title" align="flex-start">
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" >
-            </lit-table-column>
-        </lit-table>
-        `;
-  }
-}
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts
index 0b4c592c7cfe4dbb2c1c277b419e10df2666947b..99adf96b708f43ea5b0ed530563f8765a915dc57 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCounterSample.ts
@@ -13,47 +13,48 @@
  * limitations under the License.
  */
 
-import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
-import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionParam } from '../../../../bean/BoxSelection.js';
-import { getTabPaneCounterSampleData } from '../../../../database/SqlLite.js';
-import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
-import { Utils } from '../../base/Utils.js';
+import {BaseElement, element} from '../../../../../base-ui/BaseElement.js';
+import {LitTable} from '../../../../../base-ui/table/lit-table.js';
+import {SelectionParam} from '../../../../bean/BoxSelection.js';
+import {getTabPaneCounterSampleData} from '../../../../database/SqlLite.js';
+import {LitProgressBar} from '../../../../../base-ui/progress-bar/LitProgressBar.js';
+import {Utils} from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-counter-sample')
 export class TabPaneCounterSample extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private counterSampleTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private loadDataInCache: boolean = true;
   private selectionParam: SelectionParam | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private loadingPage: any;
-  private loadingList: number[] = [];
-  private source: any[] = [];
-  private sortKey: string = 'counter';
-  private sortType: number = 0;
+  private sampleProgressEL: LitProgressBar | null | undefined;
+  private counterLoadingPage: any;
+  private counterLoadingList: number[] = [];
+  private counterSampleSource: any[] = [];
+  private counterSortKey: string = 'counter';
+  private counterSortType: number = 0;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(counterSampleValue: SelectionParam | any) {
+    if (counterSampleValue == this.selectionParam) {
       return;
     }
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    this.selectionParam = val;
+    this.sampleProgressEL!.loading = true;
+    this.counterLoadingPage.style.visibility = 'visible';
+    this.selectionParam = counterSampleValue;
     // @ts-ignore
-    this.tbl!.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-    this.queryDataByDB(val);
+    this.counterSampleTbl!.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
+    this.queryDataByDB(counterSampleValue);
   }
 
   initElements(): void {
-    this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
-    this.loadingPage = this.shadowRoot!.querySelector('.loading');
-    this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.sampleProgressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progressCounter');
+    this.counterLoadingPage = this.shadowRoot!.querySelector('.loadingCounter');
+    this.counterSampleTbl = this.shadowRoot!.querySelector<LitTable>('#tb-counter-sample');
+    this.counterSampleTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.counterSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.counterSortType = evt.detail.sort;
       // @ts-ignore
       this.sortTable(evt.detail.key, evt.detail.sort);
     });
@@ -61,63 +62,56 @@ export class TabPaneCounterSample extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement!.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-        this.tbl!.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.counterSampleTbl!, 25, this.counterLoadingPage, 24)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
-    this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+  queryDataByDB(counterSampleParam: SelectionParam | any) {
+    this.counterLoadingList.push(1);
+    this.sampleProgressEL!.loading = true;
+    this.counterLoadingPage.style.visibility = 'visible';
 
     getTabPaneCounterSampleData(
-      val.leftNs + val.recordStartNs,
-      val.rightNs + val.recordStartNs,
-      val.cpuStateFilterIds
+      counterSampleParam.leftNs + counterSampleParam.recordStartNs,
+      counterSampleParam.rightNs + counterSampleParam.recordStartNs,
+      counterSampleParam.cpuStateFilterIds
     ).then((result) => {
-      this.loadingList.splice(0, 1);
-      if (this.loadingList.length == 0) {
-        this.progressEL!.loading = false;
-        this.loadingPage.style.visibility = 'hidden';
+      this.counterLoadingList.splice(0, 1);
+      if (this.counterLoadingList.length == 0) {
+        this.sampleProgressEL!.loading = false;
+        this.counterLoadingPage.style.visibility = 'hidden';
       }
       let sampleMap = new Map<any, any>();
-      val.cpuStateFilterIds.forEach((a: number) => {
+      counterSampleParam.cpuStateFilterIds.forEach((a: number) => {
         this.getInitTime(
           result.filter((f) => f.filterId == a),
           sampleMap,
-          val
+          counterSampleParam
         );
       });
-      let dataList: Array<any> = [];
+      let counterSampleList: Array<any> = [];
       sampleMap.forEach((a) => {
         a.timeStr = Utils.getProbablyTime(a.time);
-        dataList.push(a);
+        counterSampleList.push(a);
       });
-      this.source = dataList;
-      this.sortTable(this.sortKey, this.sortType);
+      this.counterSampleSource = counterSampleList;
+      this.sortTable(this.counterSortKey, this.counterSortType);
     });
   }
 
-  getInitTime(result: Array<any>, sampleMap: Map<any, any>, val: SelectionParam) {
+  getInitTime(initCounterResultList: Array<any>, sampleMap: Map<any, any>, val: SelectionParam) {
     let leftNs = val.leftNs + val.recordStartNs;
     let rightNs = val.rightNs + val.recordStartNs;
-    if (result.length == 0) return;
-    let idx = result.findIndex((a) => a.ts >= leftNs);
+    if (initCounterResultList.length == 0) return;
+    let idx = initCounterResultList.findIndex((a) => a.ts >= leftNs);
     if (idx !== 0) {
-      result = result.slice(idx == -1 ? result.length - 1 : idx - 1, result.length);
+      initCounterResultList = initCounterResultList.slice(idx == -1 ? initCounterResultList.length - 1 : idx - 1, initCounterResultList.length);
     }
-    if (result[0].ts < leftNs && idx !== 0) result[0].ts = leftNs;
-    result.forEach((item, idx) => {
-      if (idx + 1 == result.length) {
+    if (initCounterResultList[0].ts < leftNs && idx !== 0) initCounterResultList[0].ts = leftNs;
+    initCounterResultList.forEach((item, idx) => {
+      if (idx + 1 == initCounterResultList.length) {
         item.time = rightNs - item.ts;
       } else {
-        item.time = result[idx + 1].ts - item.ts;
+        item.time = initCounterResultList[idx + 1].ts - item.ts;
       }
       if (sampleMap.has(item.filterId + '-' + item.value)) {
         let obj = sampleMap.get(item.filterId + '-' + item.value);
@@ -133,73 +127,76 @@ export class TabPaneCounterSample extends BaseElement {
 
   sortTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.counterSampleTbl!.recycleDataSource = this.counterSampleSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.counterSampleSource);
+      arr.sort((sortByColumnLeftData, sortByColumnRightData): number => {
         if (key == 'timeStr') {
           if (type == 1) {
-            return a.time - b.time;
+            return sortByColumnLeftData.time - sortByColumnRightData.time;
           } else {
-            return b.time - a.time;
+            return sortByColumnRightData.time - sortByColumnLeftData.time;
           }
         } else if (key == 'counter') {
-          if (a.counter > b.counter) {
+          if (sortByColumnLeftData.counter > sortByColumnRightData.counter) {
             return type === 2 ? -1 : 1;
-          } else if (a.counter == b.counter) {
+          } else if (sortByColumnLeftData.counter == sortByColumnRightData.counter) {
             return 0;
           } else {
             return type === 2 ? 1 : -1;
           }
         } else if (key == 'value') {
           if (type == 1) {
-            return a.value - b.value;
+            return sortByColumnLeftData.value - sortByColumnRightData.value;
           } else {
-            return b.value - a.value;
+            return sortByColumnRightData.value - sortByColumnLeftData.value;
           }
         } else {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.counterSampleTbl!.recycleDataSource = arr;
     }
   }
 
   initHtml(): string {
     return `
         <style>
+        .progressCounter{
+            height: 1px;
+            left: 0;
+            right: 0;
+            bottom: 5px;
+            position: absolute;
+        }
         :host{
             display: flex;
-            flex-direction: column;
             padding: 10px 10px;
+            flex-direction: column;
         }
-        .progress{
-            bottom: 5px;
-            position: absolute;
-            height: 1px;
+        .loadingCounter{
             left: 0;
             right: 0;
-        }
-        .loading{
+            width:100%;
             bottom: 0;
             position: absolute;
-            left: 0;
-            right: 0;
-            width:100%;
             background:transparent;
             z-index: 999999;
         }
+        .counter-sample-table{
+            height: auto;
+        }
         </style>
-        <lit-table id="tb-states" style="height: auto" >
-            <lit-table-column width="20%" title="Cpu" data-index="counter" key="counter" align="flex-start" order>
+        <lit-table id="tb-counter-sample" class="counter-sample-table">
+            <lit-table-column class="counter-sample-column" width="20%" order data-index="counter" key="counter" align="flex-start" title="Cpu" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order>
+            <lit-table-column class="counter-sample-column" width="1fr" order data-index="timeStr" key="timeStr" align="flex-start" title="Time" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Value" data-index="value" key="value" align="flex-start" order>
+            <lit-table-column class="counter-sample-column" width="1fr" order data-index="value" key="value" align="flex-start" title="Value" >
             </lit-table-column>
         </lit-table>
-        <lit-progress-bar class="progress"></lit-progress-bar>
-        <div class="loading"></div>
+        <lit-progress-bar class="progressCounter"></lit-progress-bar>
+        <div class="loadingCounter"></div>
         `;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts
index 492233ded5c64c6ff1de396a3a5277abd3763cde..7596c33b08b24a2bc1d0e0fdae9a2d0b03987438 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.ts
@@ -19,20 +19,21 @@ import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js'
 import { getTabCpuByProcess } from '../../../../database/SqlLite.js';
 import { log } from '../../../../../log/Log.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-cpu-process')
 export class TabPaneCpuByProcess extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private source: Array<SelectionData> = [];
+  private cpuByProcessTbl: LitTable | null | undefined;
+  private cpuByProcessRange: HTMLLabelElement | null | undefined;
+  private cpuByProcessSource: Array<SelectionData> = [];
 
-  set data(val: SelectionParam | any) {
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+  set data(cpuByProcessValue: SelectionParam | any) {
+    this.cpuByProcessRange!.textContent =
+      'Selected range: ' + parseFloat(((cpuByProcessValue.rightNs - cpuByProcessValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     // @ts-ignore
-    this.tbl!.shadowRoot!.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
-    this.tbl!.recycleDataSource = [];
-    getTabCpuByProcess(val.cpus, val.leftNs, val.rightNs).then((result) => {
+    this.cpuByProcessTbl!.shadowRoot!.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
+    this.cpuByProcessTbl!.recycleDataSource = [];
+    getTabCpuByProcess(cpuByProcessValue.cpus, cpuByProcessValue.leftNs, cpuByProcessValue.rightNs).then((result) => {
       if (result != null && result.length > 0) {
         log('getTabCpuByProcess size :' + result.length);
         let sumWall = 0.0;
@@ -50,19 +51,19 @@ export class TabPaneCpuByProcess extends BaseElement {
         count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(5));
         count.occurrences = sumOcc;
         result.splice(0, 0, count);
-        this.source = result;
-        this.tbl!.recycleDataSource = result;
+        this.cpuByProcessSource = result;
+        this.cpuByProcessTbl!.recycleDataSource = result;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = this.source;
+        this.cpuByProcessSource = [];
+        this.cpuByProcessTbl!.recycleDataSource = this.cpuByProcessSource;
       }
     });
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-process');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.cpuByProcessTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-process');
+    this.cpuByProcessRange = this.shadowRoot?.querySelector('#cpu-process-time-range');
+    this.cpuByProcessTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -70,57 +71,57 @@ export class TabPaneCpuByProcess extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.cpuByProcessTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .cpu-process-label{
+            font-size: 10pt;
+            margin-bottom: 5px;
+            text-align: end;
+        }
         :host{
+            border: 0;
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="cpu-process-time-range" class="cpu-process-label" style="width: 100%;height: 20px;">Selected range:0.0 ms</label>
         <lit-table id="tb-cpu-process" style="height: auto">
-            <lit-table-column order width="30%" title="Process" data-index="process" key="process" align="flex-start" order>
+            <lit-table-column class="cpu-process-column" order width="30%" title="Process" data-index="process" key="process" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column order width="1fr" title="PID" data-index="pid" key="pid" align="flex-start" order>
+            <lit-table-column class="cpu-process-column" order width="1fr" title="PID" data-index="pid" key="pid" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Wall duration(ms)" data-index="wallDuration" key="wallDuration" align="flex-start" order>
+            <lit-table-column class="cpu-process-column" order width="1fr" title="Wall duration(ms)" data-index="wallDuration" key="wallDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Avg Wall duration(ms)" data-index="avgDuration" key="avgDuration" align="flex-start" order>
+            <lit-table-column class="cpu-process-column" order width="1fr" title="Avg Wall duration(ms)" data-index="avgDuration" key="avgDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Occurrences" data-index="occurrences" key="occurrences" align="flex-start" order>
+            <lit-table-column class="cpu-process-column" order width="1fr" title="Occurrences" data-index="occurrences" key="occurrences" align="flex-start" order>
             </lit-table-column>
         </lit-table>
         `;
   }
 
-  sortByColumn(detail: any) {
+  sortByColumn(cpuByProcessDetail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+      return function (cpuByProcessLeftData: SelectionData, cpuByProcessRightData: SelectionData) {
+        if (cpuByProcessLeftData.process == ' ' || cpuByProcessRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(cpuByProcessRightData[property]) - parseFloat(cpuByProcessLeftData[property]) : parseFloat(cpuByProcessLeftData[property]) - parseFloat(cpuByProcessRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (cpuByProcessRightData[property] > cpuByProcessLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (cpuByProcessRightData[property] == cpuByProcessLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -131,15 +132,15 @@ export class TabPaneCpuByProcess extends BaseElement {
     }
 
     if (
-      detail.key === 'pid' ||
-      detail.key === 'wallDuration' ||
-      detail.key === 'avgDuration' ||
-      detail.key === 'occurrences'
+      cpuByProcessDetail.key === 'pid' ||
+      cpuByProcessDetail.key === 'wallDuration' ||
+      cpuByProcessDetail.key === 'avgDuration' ||
+      cpuByProcessDetail.key === 'occurrences'
     ) {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.cpuByProcessSource.sort(compare(cpuByProcessDetail.key, cpuByProcessDetail.sort, 'number'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.cpuByProcessSource.sort(compare(cpuByProcessDetail.key, cpuByProcessDetail.sort, 'string'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.cpuByProcessTbl!.recycleDataSource = this.cpuByProcessSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts
index 3b660c0f81969921a8faf9b2a00ce738a9f88e01..2b98dbfa2a11fe9405ab95df444a1c7521a0a4de 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuByThread.ts
@@ -20,12 +20,13 @@ import { getTabCpuByThread } from '../../../../database/SqlLite.js';
 import { log } from '../../../../../log/Log.js';
 import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-cpu-thread')
 export class TabPaneCpuByThread extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private cpuByThreadTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
-  private source: Array<SelectionData> = [];
+  private cpuByThreadSource: Array<SelectionData> = [];
   private pubColumns = `
             <lit-table-column order width="250px" title="Process" data-index="process" key="process" align="flex-start" order >
             </lit-table-column>
@@ -43,11 +44,11 @@ export class TabPaneCpuByThread extends BaseElement {
             </lit-table-column>
     `;
 
-  set data(val: SelectionParam | any) {
-    this.tbl!.innerHTML = this.getTableColumns(val.cpus);
+  set data(cpuByThreadValue: SelectionParam | any) {
+    this.cpuByThreadTbl!.innerHTML = this.getTableColumns(cpuByThreadValue.cpus);
     this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    getTabCpuByThread(val.cpus, val.leftNs, val.rightNs).then((result) => {
+      'Selected range: ' + parseFloat(((cpuByThreadValue.rightNs - cpuByThreadValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    getTabCpuByThread(cpuByThreadValue.cpus, cpuByThreadValue.leftNs, cpuByThreadValue.rightNs).then((result) => {
       if (result != null && result.length > 0) {
         log('getTabCpuByThread size :' + result.length);
         let sumWall = 0.0;
@@ -62,11 +63,11 @@ export class TabPaneCpuByThread extends BaseElement {
             thread.occurrences += e.occurrences;
             thread[`cpu${e.cpu}`] = e.wallDuration || 0;
             thread[`cpu${e.cpu}TimeStr`] = getProbablyTime(e.wallDuration || 0);
-            thread[`cpu${e.cpu}Ratio`] = ((100.0 * (e.wallDuration || 0)) / (val.rightNs - val.leftNs)).toFixed(2);
+            thread[`cpu${e.cpu}Ratio`] = ((100.0 * (e.wallDuration || 0)) / (cpuByThreadValue.rightNs - cpuByThreadValue.leftNs)).toFixed(2);
           } else {
             let process = Utils.PROCESS_MAP.get(e.pid);
             let thread = Utils.THREAD_MAP.get(e.tid);
-            let obj: any = {
+            let cpuByThreadObject: any = {
               tid: e.tid,
               pid: e.pid,
               thread: thread == null || thread.length == 0 ? '[NULL]' : thread,
@@ -75,15 +76,15 @@ export class TabPaneCpuByThread extends BaseElement {
               occurrences: e.occurrences || 0,
               avgDuration: 0,
             };
-            for (let i of val.cpus) {
-              obj[`cpu${i}`] = 0;
-              obj[`cpu${i}TimeStr`] = '0';
-              obj[`cpu${i}Ratio`] = '0';
+            for (let i of cpuByThreadValue.cpus) {
+              cpuByThreadObject[`cpu${i}`] = 0;
+              cpuByThreadObject[`cpu${i}TimeStr`] = '0';
+              cpuByThreadObject[`cpu${i}Ratio`] = '0';
             }
-            obj[`cpu${e.cpu}`] = e.wallDuration || 0;
-            obj[`cpu${e.cpu}TimeStr`] = getProbablyTime(e.wallDuration || 0);
-            obj[`cpu${e.cpu}Ratio`] = ((100.0 * (e.wallDuration || 0)) / (val.rightNs - val.leftNs)).toFixed(2);
-            map.set(`${e.tid}`, obj);
+            cpuByThreadObject[`cpu${e.cpu}`] = e.wallDuration || 0;
+            cpuByThreadObject[`cpu${e.cpu}TimeStr`] = getProbablyTime(e.wallDuration || 0);
+            cpuByThreadObject[`cpu${e.cpu}Ratio`] = ((100.0 * (e.wallDuration || 0)) / (cpuByThreadValue.rightNs - cpuByThreadValue.leftNs)).toFixed(2);
+            map.set(`${e.tid}`, cpuByThreadObject);
           }
         }
         let arr = Array.from(map.values()).sort((a, b) => b.wallDuration - a.wallDuration);
@@ -96,66 +97,65 @@ export class TabPaneCpuByThread extends BaseElement {
         count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(7));
         count.occurrences = sumOcc;
         arr.splice(0, 0, count);
-        this.source = arr;
-        this.tbl!.recycleDataSource = arr;
+        this.cpuByThreadSource = arr;
+        this.cpuByThreadTbl!.recycleDataSource = arr;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = this.source;
+        this.cpuByThreadSource = [];
+        this.cpuByThreadTbl!.recycleDataSource = this.cpuByThreadSource;
       }
     });
   }
 
   getTableColumns(cpus: Array<number>) {
-    let col = `${this.pubColumns}`;
-    let cpuArr = cpus.sort((a, b) => a - b);
-    for (let i of cpuArr) {
-      col = `${col}
-            <lit-table-column width="100px" title="cpu${i}" data-index="cpu${i}TimeStr" key="cpu${i}TimeStr"  align="flex-start" order>
+    let cpuByThreadTblHtml = `${this.pubColumns}`;
+    let cpuByThreadList = cpus.sort((cpuByThreadA, cpuByThreadB) => cpuByThreadA - cpuByThreadB);
+    for (let index of cpuByThreadList) {
+      cpuByThreadTblHtml = `${cpuByThreadTblHtml}
+            <lit-table-column width="100px" title="cpu${index}" data-index="cpu${index}TimeStr" key="cpu${index}TimeStr"  align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="100px" title="%" data-index="cpu${i}Ratio" key="cpu${i}Ratio"  align="flex-start" order>
+            <lit-table-column width="100px" title="%" data-index="cpu${index}Ratio" key="cpu${index}Ratio"  align="flex-start" order>
             </lit-table-column>
             `;
     }
-    return col;
+    return cpuByThreadTblHtml;
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread');
+    this.cpuByThreadTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-thread');
     this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.cpuByThreadTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.tbl!.addEventListener('row-click', (evt: any) => {
+    this.cpuByThreadTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data;
       data.isSelected = true;
-      this.tbl?.clearAllSelection(data);
-      this.tbl?.setCurrentSelection(data);
+      this.cpuByThreadTbl?.clearAllSelection(data);
+      this.cpuByThreadTbl?.setCurrentSelection(data);
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.cpuByThreadTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .cpu-by-thread-label{
+            width: 100%;
+            height: 20px;
+        }
         :host{
+            width: auto;
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="time-range" class="cpu-by-thread-label" style="text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-cpu-thread" style="height:calc( 30vh - 25px )" >
             
         </lit-table>
@@ -165,20 +165,20 @@ export class TabPaneCpuByThread extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+      return function (cpuByThreadLeftData: SelectionData, cpuByThreadRightData: SelectionData) {
+        if (cpuByThreadLeftData.process == ' ' || cpuByThreadRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(cpuByThreadRightData[property]) - parseFloat(cpuByThreadLeftData[property]) : parseFloat(cpuByThreadLeftData[property]) - parseFloat(cpuByThreadRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (cpuByThreadRightData[property] > cpuByThreadLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (cpuByThreadRightData[property] == cpuByThreadLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -189,9 +189,9 @@ export class TabPaneCpuByThread extends BaseElement {
     }
     if ((detail.key as string).includes('cpu')) {
       if ((detail.key as string).includes('Ratio')) {
-        this.source.sort(compare(detail.key, detail.sort, 'string'));
+        this.cpuByThreadSource.sort(compare(detail.key, detail.sort, 'string'));
       } else {
-        this.source.sort(compare((detail.key as string).replace('TimeStr', ''), detail.sort, 'number'));
+        this.cpuByThreadSource.sort(compare((detail.key as string).replace('TimeStr', ''), detail.sort, 'number'));
       }
     } else {
       if (
@@ -201,12 +201,12 @@ export class TabPaneCpuByThread extends BaseElement {
         detail.key === 'avgDuration' ||
         detail.key === 'occurrences'
       ) {
-        this.source.sort(compare(detail.key, detail.sort, 'number'));
+        this.cpuByThreadSource.sort(compare(detail.key, detail.sort, 'number'));
       } else {
-        this.source.sort(compare(detail.key, detail.sort, 'string'));
+        this.cpuByThreadSource.sort(compare(detail.key, detail.sort, 'string'));
       }
     }
 
-    this.tbl!.recycleDataSource = this.source;
+    this.cpuByThreadTbl!.recycleDataSource = this.cpuByThreadSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuStateClick.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuStateClick.ts
index 03c847368070726109a94bfb9205cb5ebf7df115..258136542506d70918b7d5e2769783b4653a11ca 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuStateClick.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuStateClick.ts
@@ -16,59 +16,57 @@
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-cpu-state-click')
 export class TabPaneCpuStateClick extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private cpuStateClickTbl: LitTable | null | undefined;
 
-  set data(val: any) {
-    if (val) {
-      this.tbl!.dataSource = [
+  set data(cpuStateClickValue: any) {
+    if (cpuStateClickValue) {
+      this.cpuStateClickTbl!.dataSource = [
         {
-          startNS: Utils.getTimeString(val.startTs),
-          absoluteTime: (val.startTs + (window as any).recordStartNS) / 1000000000,
-          dur: Utils.getProbablyTime(val.dur),
-          state: val.value,
-          cpu: `Cpu ${val.cpu}`,
+          startNS: Utils.getTimeString(cpuStateClickValue.startTs),
+          absoluteTime: (cpuStateClickValue.startTs + (window as any).recordStartNS) / 1000000000,
+          dur: Utils.getProbablyTime(cpuStateClickValue.dur),
+          state: cpuStateClickValue.value,
+          cpu: `Cpu ${cpuStateClickValue.cpu}`,
         },
       ];
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq');
+    this.cpuStateClickTbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.cpuStateClickTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .cpu-stack-click{
+            height: auto;
+        }
         :host{
             display: flex;
-            flex-direction: column;
             padding: 10px 10px;
+            flex-direction: column;
         }
         </style>
-        <lit-table id="tb-freq" style="height: auto">
-            <lit-table-column width="1fr" title="StartTime(Relative)" data-index="startNS" key="startNS" align="flex-start">
+        <lit-table id="tb-freq" class="cpu-stack-click">
+            <lit-table-column class="cpu-stack-column" width="1fr" title="StartTime(Relative)" data-index="startNS" key="startNS" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start">
+            <lit-table-column class="cpu-stack-column" width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" >
+            <lit-table-column class="cpu-stack-column" width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" >
+            <lit-table-column class="cpu-stack-column" width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="State" data-index="state" key="state" align="flex-start" >
+            <lit-table-column class="cpu-stack-column" width="1fr" title="State" data-index="state" key="state" align="flex-start" >
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts
index a68dd1bd075164c8b49325aa097101d67c10ef4d..71f729df8d885f80fc41e1bb9c07af8603115338 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneCpuUsage.ts
@@ -18,27 +18,28 @@ import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabCpuFreq, getTabCpuUsage } from '../../../../database/SqlLite.js';
 import { CpuUsage, Freq } from '../../../../bean/CpuUsage.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-cpu-usage')
 export class TabPaneCpuUsage extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private cpuUsageTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private orderByOldList: any[] = [];
 
-  set data(val: SelectionParam | any) {
+  set data(cpuUsageValue: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.cpuUsageTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
     this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+      'Selected range: ' + parseFloat(((cpuUsageValue.rightNs - cpuUsageValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     Promise.all([
-      getTabCpuUsage(val.cpus, val.leftNs, val.rightNs),
-      getTabCpuFreq(val.cpus, val.leftNs, val.rightNs),
+      getTabCpuUsage(cpuUsageValue.cpus, cpuUsageValue.leftNs, cpuUsageValue.rightNs),
+      getTabCpuFreq(cpuUsageValue.cpus, cpuUsageValue.leftNs, cpuUsageValue.rightNs),
     ]).then((result) => {
       let usages = result[0];
       let freqMap = this.groupByCpuToMap(result[1]);
       let data = [];
-      let range = val.rightNs - val.leftNs;
-      for (let cpu of val.cpus) {
+      let range = cpuUsageValue.rightNs - cpuUsageValue.leftNs;
+      for (let cpu of cpuUsageValue.cpus) {
         let usage = new CpuUsage();
         usage.cpu = cpu;
         let u = usages.find((e) => e.cpu == cpu);
@@ -58,18 +59,18 @@ export class TabPaneCpuUsage extends BaseElement {
           for (let i = 0; i < freqList!.length; i++) {
             let freq = freqList![i];
             if (i == freqList!.length - 1) {
-              freq.dur = val.rightNs - freq.startNs;
+              freq.dur = cpuUsageValue.rightNs - freq.startNs;
             } else {
               freq.dur = freqList![i + 1].startNs - freq.startNs;
             }
-            if (freq.startNs + freq.dur > val.leftNs) {
+            if (freq.startNs + freq.dur > cpuUsageValue.leftNs) {
               list.push(freq);
             }
           }
           if (list.length > 0) {
-            if (list[0].startNs < val.leftNs) {
-              list[0].dur = list[0].startNs + list[0].dur - val.leftNs;
-              list[0].startNs = val.leftNs;
+            if (list[0].startNs < cpuUsageValue.leftNs) {
+              list[0].dur = list[0].startNs + list[0].dur - cpuUsageValue.leftNs;
+              list[0].startNs = cpuUsageValue.leftNs;
             }
           }
           arr = this.sortFreq(list);
@@ -77,48 +78,42 @@ export class TabPaneCpuUsage extends BaseElement {
         }
         data.push(usage);
       }
-      this.tbl!.recycleDataSource = data;
+      this.cpuUsageTbl!.recycleDataSource = data;
       this.orderByOldList = [...data];
     });
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-usage');
+    this.cpuUsageTbl = this.shadowRoot?.querySelector<LitTable>('#tb-cpu-usage');
     this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl?.addEventListener('column-click', (event) => {
+    this.cpuUsageTbl?.addEventListener('column-click', (event) => {
       // @ts-ignore
       let orderType = event.detail;
       if (orderType.sort == 1) {
         //倒序   注意  sort会改变原数组，需要传入table上的数组 不能传入缓存排序数组
-        this.sortTable(this.tbl!.recycleDataSource, orderType.key, false);
+        this.sortTable(this.cpuUsageTbl!.recycleDataSource, orderType.key, false);
       } else if (orderType.sort == 2) {
         //正序
-        this.sortTable(this.tbl!.recycleDataSource, orderType.key, true);
+        this.sortTable(this.cpuUsageTbl!.recycleDataSource, orderType.key, true);
       } else {
         //默认排序
-        this.tbl!.recycleDataSource = [...this.orderByOldList];
+        this.cpuUsageTbl!.recycleDataSource = [...this.orderByOldList];
       }
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.cpuUsageTbl!)
   }
 
   sortTable(arr: any[], key: string, sort: boolean) {
-    this.tbl!.recycleDataSource = arr.sort((item1, item2) => {
-      let value1 = Number(item1[key].toString().replace('%', ''));
-      let value2 = Number(item2[key].toString().replace('%', ''));
-      if (value1 > value2) {
+    this.cpuUsageTbl!.recycleDataSource = arr.sort((item1, item2) => {
+      let cpuUsageLeftData = Number(item1[key].toString().replace('%', ''));
+      let cpuUsageRightData = Number(item2[key].toString().replace('%', ''));
+      if (cpuUsageLeftData > cpuUsageRightData) {
         return sort ? -1 : 1;
-      } else if (value1 < value2) {
+      } else if (cpuUsageLeftData < cpuUsageRightData) {
         return sort ? 1 : -1;
       } else {
         return 0;
@@ -127,16 +122,16 @@ export class TabPaneCpuUsage extends BaseElement {
   }
 
   sortFreq(arr: Array<Freq>): Array<Array<number>> {
-    let map = new Map<number, number>();
+    let cpuUsageMap = new Map<number, number>();
     for (let freq of arr) {
-      if (map.has(freq.value)) {
-        let sumDur = map.get(freq.value)! + freq.dur;
-        map.set(freq.value, sumDur);
+      if (cpuUsageMap.has(freq.value)) {
+        let sumDur = cpuUsageMap.get(freq.value)! + freq.dur;
+        cpuUsageMap.set(freq.value, sumDur);
       } else {
-        map.set(freq.value, freq.dur);
+        cpuUsageMap.set(freq.value, freq.dur);
       }
     }
-    let array = Array.from(map);
+    let array = Array.from(cpuUsageMap);
     array.sort((a, b) => b[1] - a[1]);
     return array;
   }
@@ -157,45 +152,49 @@ export class TabPaneCpuUsage extends BaseElement {
   }
 
   groupByCpuToMap(arr: Array<Freq>): Map<number, Array<Freq>> {
-    let map = new Map<number, Array<Freq>>();
+    let cpuUsageMap = new Map<number, Array<Freq>>();
     for (let spt of arr) {
-      if (map.has(spt.cpu)) {
-        map.get(spt.cpu)!.push(spt);
+      if (cpuUsageMap.has(spt.cpu)) {
+        cpuUsageMap.get(spt.cpu)!.push(spt);
       } else {
         let list: Array<Freq> = [];
         list.push(spt);
-        map.set(spt.cpu, list);
+        cpuUsageMap.set(spt.cpu, list);
       }
     }
-    return map;
+    return cpuUsageMap;
   }
 
   initHtml(): string {
     return `
         <style>
+        .cpu-usage-label{
+            width: 100%;
+            height: 20px;
+        }
         :host{
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="time-range" class="cpu-usage-label" style="text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-cpu-usage" style="height: auto">
-            <lit-table-column order width="1fr" title="CPU" data-index="cpu" key="cpu" align="flex-start">
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="CPU" data-index="cpu" key="cpu" align="flex-start">
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Usage" data-index="usageStr" key="usageStr" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="Usage" data-index="usageStr" key="usageStr" align="flex-start" >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="CPU Freq Top1(M)" data-index="top1" key="top1" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="CPU Freq Top1(M)" data-index="top1" key="top1" align="flex-start" >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Top1 percent(%)" data-index="top1PercentStr" key="top1PercentStr" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="Top1 percent(%)" data-index="top1PercentStr" key="top1PercentStr" align="flex-start" >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="CPU Freq Top2(M)" data-index="top2" key="top2" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="CPU Freq Top2(M)" data-index="top2" key="top2" align="flex-start" >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Top2 percent(%)" data-index="top2PercentStr" key="top2PercentStr" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="Top2 percent(%)" data-index="top2PercentStr" key="top2PercentStr" align="flex-start" >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="CPU Freq Top3(M)" data-index="top3" key="top3" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="CPU Freq Top3(M)" data-index="top3" key="top3" align="flex-start" >
             </lit-table-column>
-            <lit-table-column order width="1fr" title="Top3 percent(%)" data-index="top3PercentStr" key="top3PercentStr" align="flex-start" >
+            <lit-table-column class="cpu-usage-column" order width="1fr" title="Top3 percent(%)" data-index="top3PercentStr" key="top3PercentStr" align="flex-start" >
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts
index 3b0af20635b11b6a7f71cc9791c5468cf1d57676..bcf62ea0b3de7567a2587f42a36804c695515842 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneFrequencySample.ts
@@ -20,41 +20,42 @@ import { getTabPaneFrequencySampleData } from '../../../../database/SqlLite.js';
 import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
 import { Utils } from '../../base/Utils.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-frequency-sample')
 export class TabPaneFrequencySample extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private frequencySampleTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private loadDataInCache: boolean = true;
   private selectionParam: SelectionParam | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private loadingPage: any;
-  private loadingList: number[] = [];
-  private source: any[] = [];
-  private sortKey: string = 'counter';
-  private sortType: number = 0;
+  private frequencyProgressEL: LitProgressBar | null | undefined;
+  private frequencyLoadingPage: any;
+  private frequencyLoadingList: number[] = [];
+  private frequencySampleSource: any[] = [];
+  private frequencySampleSortKey: string = 'counter';
+  private frequencySampleSortType: number = 0;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(frequencySampleValue: SelectionParam | any) {
+    if (frequencySampleValue == this.selectionParam) {
       return;
     }
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    this.selectionParam = val;
+    this.frequencyProgressEL!.loading = true;
+    this.frequencyLoadingPage.style.visibility = 'visible';
+    this.selectionParam = frequencySampleValue;
     // @ts-ignore
-    this.tbl!.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-    this.queryDataByDB(val);
+    this.frequencySampleTbl!.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
+    this.queryDataByDB(frequencySampleValue);
   }
 
   initElements(): void {
-    this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
-    this.loadingPage = this.shadowRoot!.querySelector('.loading');
-    this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.frequencyProgressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progressFre');
+    this.frequencyLoadingPage = this.shadowRoot!.querySelector('.loadingFre');
+    this.frequencySampleTbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
+    this.frequencySampleTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.frequencySampleSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.frequencySampleSortType = evt.detail.sort;
       // @ts-ignore
       this.sortTable(evt.detail.key, evt.detail.sort);
     });
@@ -62,64 +63,57 @@ export class TabPaneFrequencySample extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement!.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-        this.tbl!.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.frequencySampleTbl!,25,this.frequencyLoadingPage, 24)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
-    this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+  queryDataByDB(frqSampleParam: SelectionParam | any) {
+    this.frequencyLoadingList.push(1);
+    this.frequencyProgressEL!.loading = true;
+    this.frequencyLoadingPage.style.visibility = 'visible';
 
     getTabPaneFrequencySampleData(
-      val.leftNs + val.recordStartNs,
-      val.rightNs + val.recordStartNs,
-      val.cpuFreqFilterIds
+      frqSampleParam.leftNs + frqSampleParam.recordStartNs,
+      frqSampleParam.rightNs + frqSampleParam.recordStartNs,
+      frqSampleParam.cpuFreqFilterIds
     ).then((result) => {
-      this.loadingList.splice(0, 1);
-      if (this.loadingList.length == 0) {
-        this.progressEL!.loading = false;
-        this.loadingPage.style.visibility = 'hidden';
+      this.frequencyLoadingList.splice(0, 1);
+      if (this.frequencyLoadingList.length == 0) {
+        this.frequencyProgressEL!.loading = false;
+        this.frequencyLoadingPage.style.visibility = 'hidden';
       }
       let sampleMap = new Map<any, any>();
-      val.cpuFreqFilterIds.forEach((a: number) => {
+      frqSampleParam.cpuFreqFilterIds.forEach((a: number) => {
         this.getInitTime(
           result.filter((f) => f.filterId == a),
           sampleMap,
-          val
+          frqSampleParam
         );
       });
 
-      let dataList: Array<any> = [];
+      let frqSampleList: Array<any> = [];
       sampleMap.forEach((a) => {
         a.timeStr = Utils.getProbablyTime(a.time);
-        dataList.push(a);
+        frqSampleList.push(a);
       });
-      this.source = dataList;
-      this.sortTable(this.sortKey, this.sortType);
+      this.frequencySampleSource = frqSampleList;
+      this.sortTable(this.frequencySampleSortKey, this.frequencySampleSortType);
     });
   }
 
-  getInitTime(result: Array<any>, sampleMap: Map<any, any>, val: SelectionParam) {
-    let leftNs = val.leftNs + val.recordStartNs;
-    let rightNs = val.rightNs + val.recordStartNs;
-    if (result.length == 0) return;
-    let idx = result.findIndex((a) => a.ts >= leftNs);
-    if (idx !== 0) {
-      result = result.slice(idx == -1 ? result.length - 1 : idx - 1, result.length);
+  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;
+    let includeData = initFreqResult.findIndex((a) => a.ts >= leftStartNs);
+    if (includeData !== 0) {
+      initFreqResult = initFreqResult.slice(includeData == -1 ? initFreqResult.length - 1 : includeData - 1, initFreqResult.length);
     }
-    if (result[0].ts < leftNs && idx !== 0) result[0].ts = leftNs;
-    result.forEach((item, idx) => {
-      if (idx + 1 == result.length) {
-        item.time = rightNs - item.ts;
+    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;
       } else {
-        item.time = result[idx + 1].ts - item.ts;
+        item.time = initFreqResult[idx + 1].ts - item.ts;
       }
       if (sampleMap.has(item.filterId + '-' + item.value)) {
         let obj = sampleMap.get(item.filterId + '-' + item.value);
@@ -136,54 +130,54 @@ export class TabPaneFrequencySample extends BaseElement {
 
   sortTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.frequencySampleTbl!.recycleDataSource = this.frequencySampleSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.frequencySampleSource);
+      arr.sort((frequencySampleLeftData, frequencySampleRightData): number => {
         if (key == 'timeStr') {
           if (type == 1) {
-            return a.time - b.time;
+            return frequencySampleLeftData.time - frequencySampleRightData.time;
           } else {
-            return b.time - a.time;
+            return frequencySampleRightData.time - frequencySampleLeftData.time;
           }
         } else if (key == 'counter') {
-          if (a.counter > b.counter) {
+          if (frequencySampleLeftData.counter > frequencySampleRightData.counter) {
             return type === 2 ? -1 : 1;
-          } else if (a.counter == b.counter) {
+          } else if (frequencySampleLeftData.counter == frequencySampleRightData.counter) {
             return 0;
           } else {
             return type === 2 ? 1 : -1;
           }
         } else if (key == 'valueStr') {
           if (type == 1) {
-            return a.value - b.value;
+            return frequencySampleLeftData.value - frequencySampleRightData.value;
           } else {
-            return b.value - a.value;
+            return frequencySampleRightData.value - frequencySampleLeftData.value;
           }
         } else {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.frequencySampleTbl!.recycleDataSource = arr;
     }
   }
 
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        .progress{
+        .progressFre{
             bottom: 5px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        :host{
+            padding: 10px 10px;
+            display: flex;
+            flex-direction: column;
+        }
+        .loadingFre{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -194,15 +188,15 @@ export class TabPaneFrequencySample extends BaseElement {
         }
         </style>
         <lit-table id="tb-states" style="height: auto" >
-            <lit-table-column width="20%" title="Cpu" data-index="counter" key="counter" align="flex-start" order>
+            <lit-table-column class="freq-sample-column" width="20%" title="Cpu" data-index="counter" key="counter" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order>
+            <lit-table-column class="freq-sample-column" width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Value" data-index="valueStr" key="valueStr" align="flex-start" order>
+            <lit-table-column class="freq-sample-column" width="1fr" title="Value" data-index="valueStr" key="valueStr" align="flex-start" order>
             </lit-table-column>
         </lit-table>
-        <lit-progress-bar class="progress"></lit-progress-bar>
-        <div class="loading"></div>
+        <lit-progress-bar class="progressFre"></lit-progress-bar>
+        <div class="loadingFre"></div>
         `;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts b/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
index ec19d417fe3fbe03fb436faf1cbc77f2eb95042f..64636f8c797cbc552db9a43d41867acea53a626f 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
@@ -20,157 +20,152 @@ import { getStatesProcessThreadDataByRange } from '../../../../database/SqlLite.
 import { SPT, StateProcessThread } from '../../../../bean/StateProcessThread.js';
 import { Utils } from '../../base/Utils.js';
 import { SpSystemTrace } from '../../../SpSystemTrace.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-pts')
 export class TabPanePTS extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
+  private ptsTbl: LitTable | null | undefined;
+  private ptsRange: HTMLLabelElement | null | undefined;
   private loadDataInCache: boolean = true;
   private selectionParam: SelectionParam | null | undefined;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(ptsValue: SelectionParam | any) {
+    if (ptsValue == this.selectionParam) {
       return;
     }
-    this.selectionParam = val;
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    this.selectionParam = ptsValue;
+    this.ptsRange!.textContent =
+      'Selected range: ' + parseFloat(((ptsValue.rightNs - ptsValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     if (this.loadDataInCache) {
-      this.getDataBySPT(val.leftNs, val.rightNs, SpSystemTrace.SPT_DATA);
+      this.getDataBySPT(ptsValue.leftNs, ptsValue.rightNs, SpSystemTrace.SPT_DATA);
     } else {
-      this.queryDataByDB(val);
+      this.queryDataByDB(ptsValue);
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-states');
-    this.range = this.shadowRoot?.querySelector('#time-range');
+    this.ptsTbl = this.shadowRoot?.querySelector<LitTable>('#pts-tbl');
+    this.ptsRange = this.shadowRoot?.querySelector('#pts-time-range');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.ptsTbl!)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
-    getStatesProcessThreadDataByRange(val.leftNs, val.rightNs).then((result) => {
-      this.getDataBySPT(val.leftNs, val.rightNs, result);
+  queryDataByDB(ptsVal: SelectionParam | any) {
+    getStatesProcessThreadDataByRange(ptsVal.leftNs, ptsVal.rightNs).then((result) => {
+      this.getDataBySPT(ptsVal.leftNs, ptsVal.rightNs, result);
     });
   }
 
-  getDataBySPT(leftNs: number, rightNs: number, source: Array<SPT>) {
+  getDataBySPT(ptsLeftNs: number, ptsRightNs: number, ptsSource: Array<SPT>) {
     let pMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
     let ptMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
     let ptsMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    source.map((d) => {
-      if (!(d.end_ts < leftNs || d.start_ts > rightNs)) {
+    ptsSource.map((d) => {
+      if (!(d.end_ts < ptsLeftNs || d.start_ts > ptsRightNs)) {
         if (pMap.has(d.processId + '')) {
-          let obj1 = pMap.get(d.processId + '');
-          obj1!.count++;
-          obj1!.wallDuration += d.dur;
-          obj1!.avgDuration = (obj1!.wallDuration / obj1!.count).toFixed(2);
-          if (d.dur > obj1!.maxDuration) {
-            obj1!.maxDuration = d.dur;
+          let ptsPMapObj = pMap.get(d.processId + '');
+          ptsPMapObj!.count++;
+          ptsPMapObj!.wallDuration += d.dur;
+          ptsPMapObj!.avgDuration = (ptsPMapObj!.wallDuration / ptsPMapObj!.count).toFixed(2);
+          if (d.dur > ptsPMapObj!.maxDuration) {
+            ptsPMapObj!.maxDuration = d.dur;
           }
-          if (d.dur < obj1!.minDuration) {
-            obj1!.minDuration = d.dur;
+          if (d.dur < ptsPMapObj!.minDuration) {
+            ptsPMapObj!.minDuration = d.dur;
           }
         } else {
-          let obj1 = new StateProcessThread();
-          obj1.id = 'p' + d.processId;
-          obj1.title = (d.process == null || d.process == '' ? 'Process' : d.process) + '(' + d.processId + ')';
-          obj1.process = d.process;
-          obj1.processId = d.processId;
-          obj1.minDuration = d.dur;
-          obj1.maxDuration = d.dur;
-          obj1.count = 1;
-          obj1.avgDuration = d.dur + '';
-          obj1.wallDuration = d.dur;
-          pMap.set(d.processId + '', obj1);
+          let ptsPMapObj = new StateProcessThread();
+          ptsPMapObj.id = 'p' + d.processId;
+          ptsPMapObj.title = (d.process == null || d.process == '' ? 'Process' : d.process) + '(' + d.processId + ')';
+          ptsPMapObj.process = d.process;
+          ptsPMapObj.processId = d.processId;
+          ptsPMapObj.minDuration = d.dur;
+          ptsPMapObj.maxDuration = d.dur;
+          ptsPMapObj.count = 1;
+          ptsPMapObj.avgDuration = d.dur + '';
+          ptsPMapObj.wallDuration = d.dur;
+          pMap.set(d.processId + '', ptsPMapObj);
         }
         if (ptMap.has(d.processId + '_' + d.threadId)) {
-          let obj2 = ptMap.get(d.processId + '_' + d.threadId);
-          obj2!.count++;
-          obj2!.wallDuration += d.dur;
-          obj2!.avgDuration = (obj2!.wallDuration / obj2!.count).toFixed(2);
-          if (d.dur > obj2!.maxDuration) {
-            obj2!.maxDuration = d.dur;
+          let ptsPtMapObj = ptMap.get(d.processId + '_' + d.threadId);
+          ptsPtMapObj!.count++;
+          ptsPtMapObj!.wallDuration += d.dur;
+          ptsPtMapObj!.avgDuration = (ptsPtMapObj!.wallDuration / ptsPtMapObj!.count).toFixed(2);
+          if (d.dur > ptsPtMapObj!.maxDuration) {
+            ptsPtMapObj!.maxDuration = d.dur;
           }
-          if (d.dur < obj2!.minDuration) {
-            obj2!.minDuration = d.dur;
+          if (d.dur < ptsPtMapObj!.minDuration) {
+            ptsPtMapObj!.minDuration = d.dur;
           }
         } else {
-          let obj2 = new StateProcessThread();
-          obj2.id = 'p' + d.processId + '_' + 't' + d.threadId;
-          obj2.pid = 'p' + d.processId;
-          obj2.title = (d.thread == null || d.thread == '' ? 'Thread' : d.thread) + '(' + d.threadId + ')';
-          obj2.processId = d.processId;
-          obj2.process = d.process;
-          obj2.thread = d.thread;
-          obj2.threadId = d.threadId;
-          obj2.minDuration = d.dur;
-          obj2.maxDuration = d.dur;
-          obj2.count = 1;
-          obj2.avgDuration = d.dur + '';
-          obj2.wallDuration = d.dur;
-          ptMap.set(d.processId + '_' + d.threadId, obj2);
+          let ptsPtMapObj = new StateProcessThread();
+          ptsPtMapObj.id = 'p' + d.processId + '_' + 't' + d.threadId;
+          ptsPtMapObj.pid = 'p' + d.processId;
+          ptsPtMapObj.title = (d.thread == null || d.thread == '' ? 'Thread' : d.thread) + '(' + d.threadId + ')';
+          ptsPtMapObj.processId = d.processId;
+          ptsPtMapObj.process = d.process;
+          ptsPtMapObj.thread = d.thread;
+          ptsPtMapObj.threadId = d.threadId;
+          ptsPtMapObj.minDuration = d.dur;
+          ptsPtMapObj.maxDuration = d.dur;
+          ptsPtMapObj.count = 1;
+          ptsPtMapObj.avgDuration = d.dur + '';
+          ptsPtMapObj.wallDuration = d.dur;
+          ptMap.set(d.processId + '_' + d.threadId, ptsPtMapObj);
         }
         if (ptsMap.has(d.processId + '_' + d.threadId + '_' + d.state)) {
-          let obj3 = ptsMap.get(d.processId + '_' + d.threadId + '_' + d.state);
-          obj3!.count++;
-          obj3!.wallDuration += d.dur;
-          obj3!.avgDuration = (obj3!.wallDuration / obj3!.count).toFixed(2);
-          if (d.dur > obj3!.maxDuration) {
-            obj3!.maxDuration = d.dur;
+          let ptsPtsMapObj = ptsMap.get(d.processId + '_' + d.threadId + '_' + d.state);
+          ptsPtsMapObj!.count++;
+          ptsPtsMapObj!.wallDuration += d.dur;
+          ptsPtsMapObj!.avgDuration = (ptsPtsMapObj!.wallDuration / ptsPtsMapObj!.count).toFixed(2);
+          if (d.dur > ptsPtsMapObj!.maxDuration) {
+            ptsPtsMapObj!.maxDuration = d.dur;
           }
-          if (d.dur < obj3!.minDuration) {
-            obj3!.minDuration = d.dur;
+          if (d.dur < ptsPtsMapObj!.minDuration) {
+            ptsPtsMapObj!.minDuration = d.dur;
           }
         } else {
-          let obj3 = new StateProcessThread();
-          obj3.id = 'p' + d.processId + '_' + 't' + d.threadId + '_' + (d.state == 'R+' ? 'RP' : d.state);
-          obj3.pid = 'p' + d.processId + '_' + 't' + d.threadId;
-          obj3.title = Utils.getEndState(d.state);
-          obj3.processId = d.processId;
-          obj3.process = d.process;
-          obj3.thread = d.thread;
-          obj3.threadId = d.threadId;
-          obj3.state = d.state;
-          obj3.minDuration = d.dur;
-          obj3.maxDuration = d.dur;
-          obj3.count = 1;
-          obj3.avgDuration = d.dur + '';
-          obj3.wallDuration = d.dur;
-          ptsMap.set(d.processId + '_' + d.threadId + '_' + d.state, obj3);
+          let ptsPtsMapObj = new StateProcessThread();
+          ptsPtsMapObj.id = 'p' + d.processId + '_' + 't' + d.threadId + '_' + (d.state == 'R+' ? 'RP' : d.state);
+          ptsPtsMapObj.pid = 'p' + d.processId + '_' + 't' + d.threadId;
+          ptsPtsMapObj.title = Utils.getEndState(d.state);
+          ptsPtsMapObj.processId = d.processId;
+          ptsPtsMapObj.process = d.process;
+          ptsPtsMapObj.thread = d.thread;
+          ptsPtsMapObj.threadId = d.threadId;
+          ptsPtsMapObj.state = d.state;
+          ptsPtsMapObj.minDuration = d.dur;
+          ptsPtsMapObj.maxDuration = d.dur;
+          ptsPtsMapObj.count = 1;
+          ptsPtsMapObj.avgDuration = d.dur + '';
+          ptsPtsMapObj.wallDuration = d.dur;
+          ptsMap.set(d.processId + '_' + d.threadId + '_' + d.state, ptsPtsMapObj);
         }
       }
     });
-    let arr: Array<StateProcessThread> = [];
+    let ptsArr: Array<StateProcessThread> = [];
     for (let key of pMap.keys()) {
-      let s = pMap.get(key);
-      s!.children = [];
-      for (let ks of ptMap.keys()) {
-        if (ks.startsWith(key + '_')) {
-          let sp = ptMap.get(ks);
+      let ptsValues = pMap.get(key);
+      ptsValues!.children = [];
+      for (let itemKey of ptMap.keys()) {
+        if (itemKey.startsWith(key + '_')) {
+          let sp = ptMap.get(itemKey);
           sp!.children = [];
-          for (let kst of ptsMap.keys()) {
-            if (kst.startsWith(ks + '_')) {
-              let spt = ptsMap.get(kst);
+          for (let keySt of ptsMap.keys()) {
+            if (keySt.startsWith(itemKey + '_')) {
+              let spt = ptsMap.get(keySt);
               sp!.children.push(spt!);
             }
           }
-          s!.children.push(sp!);
+          ptsValues!.children.push(sp!);
         }
       }
-      arr.push(s!);
+      ptsArr.push(ptsValues!);
     }
-    this.tbl!.recycleDataSource = arr;
+    this.ptsTbl!.recycleDataSource = ptsArr;
   }
 
   initHtml(): string {
@@ -182,19 +177,19 @@ export class TabPanePTS extends BaseElement {
             padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
-        <lit-table id="tb-states" style="height: auto" tree>
-            <lit-table-column width="27%" title="Process/Thread/State" data-index="title" key="title" align="flex-start">
+        <label id="pts-time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <lit-table id="pts-tbl" style="height: auto" tree>
+            <lit-table-column class="pts-column" title="Process/Thread/State" data-index="title" key="title" align="flex-start" width="27%">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" >
+            <lit-table-column class="pts-column" title="Count" data-index="count" key="count" align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration(ns)" data-index="wallDuration" key="wallDuration" align="flex-start" >
+            <lit-table-column class="pts-column" title="Duration(ns)" data-index="wallDuration" key="wallDuration" align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min Duration(ns)" data-index="minDuration" key="minDuration" align="flex-start" >
+            <lit-table-column class="pts-column" title="Min Duration(ns)" data-index="minDuration" key="minDuration" align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Avg Duration(ns)" data-index="avgDuration" key="avgDuration" align="flex-start" >
+            <lit-table-column class="pts-column" title="Avg Duration(ns)" data-index="avgDuration" key="avgDuration" align="flex-start" width="1fr">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max Duration(ns)" data-index="maxDuration" key="maxDuration" align="flex-start" >
+            <lit-table-column class="pts-column" title="Max Duration(ns)" data-index="maxDuration" key="maxDuration" align="flex-start" width="1fr">
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts
index 393211ef3503acb0ab84815e5915150a62d47180..3f5c573c615bb26bb6343f215de698886af1bd31 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPaneSPT.ts
@@ -20,44 +20,39 @@ import { getStatesProcessThreadDataByRange } from '../../../../database/SqlLite.
 import { SPT, StateProcessThread } from '../../../../bean/StateProcessThread.js';
 import { Utils } from '../../base/Utils.js';
 import { SpSystemTrace } from '../../../SpSystemTrace.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-spt')
 export class TabPaneSPT extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private sptTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private loadDataInCache: boolean = true;
   private selectionParam: SelectionParam | null | undefined;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(sptValue: SelectionParam | any) {
+    if (sptValue == this.selectionParam) {
       return;
     }
-    this.selectionParam = val;
+    this.selectionParam = sptValue;
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 45 + 'px';
+    this.sptTbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 45 + 'px';
     this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+      'Selected range: ' + parseFloat(((sptValue.rightNs - sptValue.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     if (this.loadDataInCache) {
-      this.getDataBySPT(val.leftNs, val.rightNs, SpSystemTrace.SPT_DATA);
+      this.getDataBySPT(sptValue.leftNs, sptValue.rightNs, SpSystemTrace.SPT_DATA);
     } else {
-      this.queryDataByDB(val);
+      this.queryDataByDB(sptValue);
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-states');
-    this.range = this.shadowRoot?.querySelector('#time-range');
+    this.sptTbl = this.shadowRoot?.querySelector<LitTable>('#spt-tbl');
+    this.range = this.shadowRoot?.querySelector('#spt-time-range');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.sptTbl!)
   }
 
   getDataBySPT(leftNs: number, rightNs: number, source: Array<SPT>) {
@@ -67,109 +62,109 @@ export class TabPaneSPT extends BaseElement {
     source.map((d) => {
       if (!(d.end_ts < leftNs || d.start_ts > rightNs)) {
         if (statesMap.has(d.state)) {
-          let obj1 = statesMap.get(d.state);
-          obj1!.count++;
-          obj1!.wallDuration += d.dur;
-          obj1!.avgDuration = (obj1!.wallDuration / obj1!.count).toFixed(2);
-          if (d.dur > obj1!.maxDuration) {
-            obj1!.maxDuration = d.dur;
+          let sptStateMapObj = statesMap.get(d.state);
+          sptStateMapObj!.count++;
+          sptStateMapObj!.wallDuration += d.dur;
+          sptStateMapObj!.avgDuration = (sptStateMapObj!.wallDuration / sptStateMapObj!.count).toFixed(2);
+          if (d.dur > sptStateMapObj!.maxDuration) {
+            sptStateMapObj!.maxDuration = d.dur;
           }
-          if (d.dur < obj1!.minDuration) {
-            obj1!.minDuration = d.dur;
+          if (d.dur < sptStateMapObj!.minDuration) {
+            sptStateMapObj!.minDuration = d.dur;
           }
         } else {
-          let obj1 = new StateProcessThread();
-          obj1.id = d.state == 'R+' ? 'RP' : d.state;
-          obj1.title = Utils.getEndState(d.state);
-          obj1.state = d.state;
-          obj1.minDuration = d.dur;
-          obj1.maxDuration = d.dur;
-          obj1.count = 1;
-          obj1.avgDuration = d.dur + '';
-          obj1.wallDuration = d.dur;
-          statesMap.set(d.state, obj1);
+          let sptStateMapObj = new StateProcessThread();
+          sptStateMapObj.id = d.state == 'R+' ? 'RP' : d.state;
+          sptStateMapObj.title = Utils.getEndState(d.state);
+          sptStateMapObj.state = d.state;
+          sptStateMapObj.minDuration = d.dur;
+          sptStateMapObj.maxDuration = d.dur;
+          sptStateMapObj.count = 1;
+          sptStateMapObj.avgDuration = d.dur + '';
+          sptStateMapObj.wallDuration = d.dur;
+          statesMap.set(d.state, sptStateMapObj);
         }
         if (spMap.has(d.state + '_' + d.processId)) {
-          let obj2 = spMap.get(d.state + '_' + d.processId);
-          obj2!.count++;
-          obj2!.wallDuration += d.dur;
-          obj2!.avgDuration = (obj2!.wallDuration / obj2!.count).toFixed(2);
-          if (d.dur > obj2!.maxDuration) {
-            obj2!.maxDuration = d.dur;
+          let sptSpMapObj = spMap.get(d.state + '_' + d.processId);
+          sptSpMapObj!.count++;
+          sptSpMapObj!.wallDuration += d.dur;
+          sptSpMapObj!.avgDuration = (sptSpMapObj!.wallDuration / sptSpMapObj!.count).toFixed(2);
+          if (d.dur > sptSpMapObj!.maxDuration) {
+            sptSpMapObj!.maxDuration = d.dur;
           }
-          if (d.dur < obj2!.minDuration) {
-            obj2!.minDuration = d.dur;
+          if (d.dur < sptSpMapObj!.minDuration) {
+            sptSpMapObj!.minDuration = d.dur;
           }
         } else {
-          let obj2 = new StateProcessThread();
-          obj2.id = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId;
-          obj2.pid = d.state == 'R+' ? 'RP' : d.state;
-          obj2.title = (d.process == null || d.process == '' ? 'Process' : d.process) + '(' + d.processId + ')';
-          obj2.processId = d.processId;
-          obj2.process = d.process;
-          obj2.state = d.state;
-          obj2.minDuration = d.dur;
-          obj2.maxDuration = d.dur;
-          obj2.count = 1;
-          obj2.avgDuration = d.dur + '';
-          obj2.wallDuration = d.dur;
-          spMap.set(d.state + '_' + d.processId, obj2);
+          let sptSpMapObj = new StateProcessThread();
+          sptSpMapObj.id = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId;
+          sptSpMapObj.pid = d.state == 'R+' ? 'RP' : d.state;
+          sptSpMapObj.title = (d.process == null || d.process == '' ? 'Process' : d.process) + '(' + d.processId + ')';
+          sptSpMapObj.processId = d.processId;
+          sptSpMapObj.process = d.process;
+          sptSpMapObj.state = d.state;
+          sptSpMapObj.minDuration = d.dur;
+          sptSpMapObj.maxDuration = d.dur;
+          sptSpMapObj.count = 1;
+          sptSpMapObj.avgDuration = d.dur + '';
+          sptSpMapObj.wallDuration = d.dur;
+          spMap.set(d.state + '_' + d.processId, sptSpMapObj);
         }
         if (sptMap.has(d.state + '_' + d.processId + '_' + d.threadId)) {
-          let obj3 = sptMap.get(d.state + '_' + d.processId + '_' + d.threadId);
-          obj3!.count++;
-          obj3!.wallDuration += d.dur;
-          obj3!.avgDuration = (obj3!.wallDuration / obj3!.count).toFixed(2);
-          if (d.dur > obj3!.maxDuration) {
-            obj3!.maxDuration = d.dur;
+          let sptMapObject = sptMap.get(d.state + '_' + d.processId + '_' + d.threadId);
+          sptMapObject!.count++;
+          sptMapObject!.wallDuration += d.dur;
+          sptMapObject!.avgDuration = (sptMapObject!.wallDuration / sptMapObject!.count).toFixed(2);
+          if (d.dur > sptMapObject!.maxDuration) {
+            sptMapObject!.maxDuration = d.dur;
           }
-          if (d.dur < obj3!.minDuration) {
-            obj3!.minDuration = d.dur;
+          if (d.dur < sptMapObject!.minDuration) {
+            sptMapObject!.minDuration = d.dur;
           }
         } else {
-          let obj3 = new StateProcessThread();
-          obj3.id = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId + '_' + d.threadId;
-          obj3.pid = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId;
-          obj3.title = (d.thread == null || d.thread == '' ? 'Thread' : d.thread) + '(' + d.threadId + ')';
-          obj3.processId = d.processId;
-          obj3.process = d.process;
-          obj3.thread = d.thread;
-          obj3.threadId = d.threadId;
-          obj3.state = d.state;
-          obj3.minDuration = d.dur;
-          obj3.maxDuration = d.dur;
-          obj3.count = 1;
-          obj3.avgDuration = d.dur + '';
-          obj3.wallDuration = d.dur;
-          sptMap.set(d.state + '_' + d.processId + '_' + d.threadId, obj3);
+          let sptMapObject = new StateProcessThread();
+          sptMapObject.id = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId + '_' + d.threadId;
+          sptMapObject.pid = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId;
+          sptMapObject.title = (d.thread == null || d.thread == '' ? 'Thread' : d.thread) + '(' + d.threadId + ')';
+          sptMapObject.processId = d.processId;
+          sptMapObject.process = d.process;
+          sptMapObject.thread = d.thread;
+          sptMapObject.threadId = d.threadId;
+          sptMapObject.state = d.state;
+          sptMapObject.minDuration = d.dur;
+          sptMapObject.maxDuration = d.dur;
+          sptMapObject.count = 1;
+          sptMapObject.avgDuration = d.dur + '';
+          sptMapObject.wallDuration = d.dur;
+          sptMap.set(d.state + '_' + d.processId + '_' + d.threadId, sptMapObject);
         }
       }
     });
-    let arr: Array<StateProcessThread> = [];
+    let sptArr: Array<StateProcessThread> = [];
     for (let key of statesMap.keys()) {
-      let s = statesMap.get(key);
-      s!.children = [];
-      for (let ks of spMap.keys()) {
-        if (ks.startsWith(key + '_')) {
-          let sp = spMap.get(ks);
+      let stateValue = statesMap.get(key);
+      stateValue!.children = [];
+      for (let spKey of spMap.keys()) {
+        if (spKey.startsWith(key + '_')) {
+          let sp = spMap.get(spKey);
           sp!.children = [];
-          for (let kst of sptMap.keys()) {
-            if (kst.startsWith(ks + '_')) {
-              let spt = sptMap.get(kst);
+          for (let stKey of sptMap.keys()) {
+            if (stKey.startsWith(spKey + '_')) {
+              let spt = sptMap.get(stKey);
               sp!.children.push(spt!);
             }
           }
-          s!.children.push(sp!);
+          stateValue!.children.push(sp!);
         }
       }
-      arr.push(s!);
+      sptArr.push(stateValue!);
     }
-    this.tbl!.recycleDataSource = arr;
+    this.sptTbl!.recycleDataSource = sptArr;
   }
 
-  queryDataByDB(val: SelectionParam | any) {
-    getStatesProcessThreadDataByRange(val.leftNs, val.rightNs).then((result) => {
-      this.getDataBySPT(val.leftNs, val.rightNs, result);
+  queryDataByDB(sptParam: SelectionParam | any) {
+    getStatesProcessThreadDataByRange(sptParam.leftNs, sptParam.rightNs).then((result) => {
+      this.getDataBySPT(sptParam.leftNs, sptParam.rightNs, result);
     });
   }
 
@@ -182,19 +177,19 @@ export class TabPaneSPT extends BaseElement {
             padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
-        <lit-table id="tb-states" style="height: auto" tree>
-            <lit-table-column width="27%" title="State/Process/Thread" data-index="title" key="title" align="flex-start">
+        <label id="spt-time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <lit-table id="spt-tbl" style="height: auto" tree>
+            <lit-table-column class="spt-column" width="27%" data-index="title" key="title" align="flex-start" title="State/Process/Thread">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" >
+            <lit-table-column class="spt-column" width="1fr" data-index="count" key="count" align="flex-start" title="Count">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration(ns)" data-index="wallDuration" key="wallDuration" align="flex-start" >
+            <lit-table-column class="spt-column" width="1fr" data-index="wallDuration" key="wallDuration" align="flex-start" title="Duration(ns)">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min Duration(ns)" data-index="minDuration" key="minDuration" align="flex-start" >
+            <lit-table-column class="spt-column" width="1fr" data-index="minDuration" key="minDuration" align="flex-start" title="Min Duration(ns)">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Avg Duration(ns)" data-index="avgDuration" key="avgDuration" align="flex-start" >
+            <lit-table-column class="spt-column" width="1fr" data-index="avgDuration" key="avgDuration" align="flex-start" title="Avg Duration(ns)">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max Duration(ns)" data-index="maxDuration" key="maxDuration" align="flex-start" >
+            <lit-table-column class="spt-column" width="1fr" data-index="maxDuration" key="maxDuration" align="flex-start" title="Max Duration(ns)">
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPaneThreadSwitch.ts b/ide/src/trace/component/trace/sheet/cpu/TabPaneThreadSwitch.ts
deleted file mode 100644
index ff2c767ca743c39c955b9529474ee80236188855..0000000000000000000000000000000000000000
--- a/ide/src/trace/component/trace/sheet/cpu/TabPaneThreadSwitch.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- * 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.js';
-import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionParam } from '../../../../bean/BoxSelection.js';
-import { getStatesProcessThreadDataByRange } from '../../../../database/SqlLite.js';
-import { SPT, StateProcessThread } from '../../../../bean/StateProcessThread.js';
-import { Utils } from '../../base/Utils.js';
-import { SpSystemTrace } from '../../../SpSystemTrace.js';
-
-@element('tabpane-thread-switch')
-export class TabPaneThreadSwitch extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private loadDataInCache: boolean = true;
-  private selectionParam: SelectionParam | null | undefined;
-
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
-      return;
-    }
-    this.selectionParam = val;
-    //@ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    if (this.loadDataInCache) {
-      this.getDataBySPT(val.leftNs, val.rightNs, SpSystemTrace.SPT_DATA);
-    } else {
-      this.queryDataByDB(val);
-    }
-  }
-
-  initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-ts');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement!.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
-  }
-
-  getDataBySPT(leftNs: number, rightNs: number, source: Array<SPT>) {
-    let statesMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    let spMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    let sptMap: Map<string, StateProcessThread> = new Map<string, StateProcessThread>();
-    source.map((d) => {
-      if (!(d.end_ts < leftNs || d.start_ts > rightNs)) {
-        if (statesMap.has(d.state)) {
-          let obj1 = statesMap.get(d.state);
-          obj1!.count++;
-          obj1!.wallDuration += d.dur;
-          obj1!.avgDuration = (obj1!.wallDuration / obj1!.count).toFixed(2);
-          if (d.dur > obj1!.maxDuration) {
-            obj1!.maxDuration = d.dur;
-          }
-          if (d.dur < obj1!.minDuration) {
-            obj1!.minDuration = d.dur;
-          }
-        } else {
-          let obj1 = new StateProcessThread();
-          obj1.id = d.state == 'R+' ? 'RP' : d.state;
-          obj1.title = Utils.getEndState(d.state);
-          obj1.state = d.state;
-          obj1.minDuration = d.dur;
-          obj1.maxDuration = d.dur;
-          obj1.count = 1;
-          obj1.avgDuration = d.dur + '';
-          obj1.wallDuration = d.dur;
-          statesMap.set(d.state, obj1);
-        }
-        if (spMap.has(d.state + '_' + d.processId)) {
-          let obj2 = spMap.get(d.state + '_' + d.processId);
-          obj2!.count++;
-          obj2!.wallDuration += d.dur;
-          obj2!.avgDuration = (obj2!.wallDuration / obj2!.count).toFixed(2);
-          if (d.dur > obj2!.maxDuration) {
-            obj2!.maxDuration = d.dur;
-          }
-          if (d.dur < obj2!.minDuration) {
-            obj2!.minDuration = d.dur;
-          }
-        } else {
-          let obj2 = new StateProcessThread();
-          obj2.id = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId;
-          obj2.pid = d.state == 'R+' ? 'RP' : d.state;
-          obj2.title = (d.process == null || d.process == '' ? 'Process' : d.process) + '(' + d.processId + ')';
-          obj2.processId = d.processId;
-          obj2.process = d.process;
-          obj2.state = d.state;
-          obj2.minDuration = d.dur;
-          obj2.maxDuration = d.dur;
-          obj2.count = 1;
-          obj2.avgDuration = d.dur + '';
-          obj2.wallDuration = d.dur;
-          spMap.set(d.state + '_' + d.processId, obj2);
-        }
-        if (sptMap.has(d.state + '_' + d.processId + '_' + d.threadId)) {
-          let obj3 = sptMap.get(d.state + '_' + d.processId + '_' + d.threadId);
-          obj3!.count++;
-          obj3!.wallDuration += d.dur;
-          obj3!.avgDuration = (obj3!.wallDuration / obj3!.count).toFixed(2);
-          if (d.dur > obj3!.maxDuration) {
-            obj3!.maxDuration = d.dur;
-          }
-          if (d.dur < obj3!.minDuration) {
-            obj3!.minDuration = d.dur;
-          }
-        } else {
-          let obj3 = new StateProcessThread();
-          obj3.id = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId + '_' + d.threadId;
-          obj3.pid = (d.state == 'R+' ? 'RP' : d.state) + '_' + d.processId;
-          obj3.title = (d.thread == null || d.thread == '' ? 'Thread' : d.thread) + '(' + d.threadId + ')';
-          obj3.processId = d.processId;
-          obj3.process = d.process;
-          obj3.thread = d.thread;
-          obj3.threadId = d.threadId;
-          obj3.state = d.state;
-          obj3.minDuration = d.dur;
-          obj3.maxDuration = d.dur;
-          obj3.count = 1;
-          obj3.avgDuration = d.dur + '';
-          obj3.wallDuration = d.dur;
-          sptMap.set(d.state + '_' + d.processId + '_' + d.threadId, obj3);
-        }
-      }
-    });
-    let arr: Array<StateProcessThread> = [];
-    for (let key of statesMap.keys()) {
-      let s = statesMap.get(key);
-      s!.children = [];
-      for (let ks of spMap.keys()) {
-        if (ks.startsWith(key + '_')) {
-          let sp = spMap.get(ks);
-          sp!.children = [];
-          for (let kst of sptMap.keys()) {
-            if (kst.startsWith(ks + '_')) {
-              let spt = sptMap.get(kst);
-              sp!.children.push(spt!);
-            }
-          }
-          s!.children.push(sp!);
-        }
-      }
-      arr.push(s!);
-    }
-    this.tbl!.recycleDataSource = arr;
-  }
-
-  queryDataByDB(val: SelectionParam | any) {
-    getStatesProcessThreadDataByRange(val.leftNs, val.rightNs).then((result) => {
-      this.getDataBySPT(val.leftNs, val.rightNs, result);
-    });
-  }
-
-  initHtml(): string {
-    return `
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
-        <lit-table id="tb-ts" style="height: auto" tree>
-            <lit-table-column width="500px" title="Event/Process/Thread" data-index="title" key="title" align="flex-start">
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" >
-            </lit-table-column>
-        </lit-table>
-        `;
-  }
-}
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts b/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts
index 3d05edcbd9d0bf1ac8038009c52a4ce794482864..7dd82cc2f8b0f81a8fb0cdfcea6d3241121c9ac1 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.ts
@@ -20,18 +20,18 @@ import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { queryAnomalyDetailedData } from '../../../../database/SqlLite.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { EnergyAnomalyStruct } from '../../../../database/ui-worker/ProcedureWorkerEnergyAnomaly.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-anomaly-details')
 export class TabPaneEnergyAnomaly extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tableObserver: MutationObserver | undefined;
+  private tblAnomaly: LitTable | null | undefined;
   private static KEY_INDEX: number = 2;
   private static VALUE_INDEX: number = 3;
-  set data(selection: SelectionParam) {
+  set data(selectionAnomaly: SelectionParam) {
     let div: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#anomaly-details');
     let htmlText = '';
-    if (selection) {
-      this.queryAnomalyTableData(selection.leftNs, selection.rightNs).then((bean) => {
+    if (selectionAnomaly) {
+      this.queryAnomalyTableData(selectionAnomaly.leftNs, selectionAnomaly.rightNs).then((bean) => {
         let filterAppMap = new Map();
         for (let index = 0; index < bean.length; index++) {
           let findAppNameIndex = -1;
@@ -136,75 +136,56 @@ export class TabPaneEnergyAnomaly extends BaseElement {
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#anomalyselectionTbl');
-    this.tbl?.addEventListener('column-click', (ev: any) => {});
-    this.addTableObserver();
+    this.tblAnomaly = this.shadowRoot?.querySelector<LitTable>('#anomalyselectionTbl');
+    this.tblAnomaly?.addEventListener('column-click', (ev: any) => {});
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl!.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
-  }
-
-  addTableObserver() {
-    let MutationObserver = window.MutationObserver;
-    this.tableObserver = new MutationObserver((list) => {
-      if (this.tbl) {
-        let width = getComputedStyle(this.tbl).getPropertyValue('width');
-        let height = getComputedStyle(this.tbl).getPropertyValue('height');
-      }
-    });
-    let selector = this.shadowRoot?.querySelector('.left-table');
-    this.tableObserver?.observe(selector!, {
-      attributes: true,
-      attributeFilter: ['style'],
-      attributeOldValue: true,
-    });
+    resizeObserver(this.parentElement!, this.tblAnomaly!)
   }
 
   initHtml(): string {
     return `
         <style>
-            .current-title{
-                width: 95%;
+            .anomaly-title{
                 display: flex;
-                top: 0;
+                width: 95%;
                 background: var(--dark-background,#ffffff);
+                top: 0;
                 position: sticky;
             }
-            .current-title h2{
-                width: 50%;
+            .anomaly-title h2{
                 padding: 0 10px;
                 font-size: 16px;
                 font-weight: 400;
+                width: 50%;
                 visibility: visible;
             }
-            .bottom-scroll-area{
-                display: flex;
-                height: auto;
+            .scroll-area{
                 overflow-y: auto;
+                height: auto;
+                display: flex;
+                
             }
             .left-table{
-                width: 50%;
                 padding: 0 10px;
+                width: 50%;
+            }
+            .anomaly-table{
+                height: auto;
             }
         </style>
         <div style="width: 100%;height: auto;position: relative">
-            <div id="anomaly-details" class="current-title" style="margin-left: 12px;display: block">
+            <div id="anomaly-details" class="anomaly-title" style="margin-left: 12px;display: block">
                 <h2 id="leftTitle"></h2>
             </div>
-            <div class="bottom-scroll-area">
+            <div class="scroll-area">
                 <div class="left-table">
-                    <lit-table id="anomalyselectionTbl" no-head style="height: auto">
-                        <lit-table-column title="name" data-index="name" key="name" align="flex-start"  width="180px">
+                    <lit-table id="anomalyselectionTbl" no-head class="anomaly-table">
+                        <lit-table-column key="name" align="flex-start"  width="180px" title="name" data-index="name" >
                         </lit-table-column>
-                        <lit-table-column title="value" data-index="value" key="value" align="flex-start" >
+                        <lit-table-column key="value" align="flex-start" title="value" data-index="value">
                         </lit-table-column>
                     </lit-table>
                 </div>
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts b/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts
index 74c297136db30cd3de219500cb9c4760129f0e12..b2349e63fdd189ed82fed0e49306a8fc818d0168 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPanePowerBattery.ts
@@ -19,28 +19,23 @@ import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabPowerBatteryData } from '../../../../database/SqlLite.js';
 import { SpHiSysEventChart } from '../../../chart/SpHiSysEventChart.js';
 import '../../../../../base-ui/table/lit-table.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-power-battery')
 export class TabPanePowerBattery extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private tblPower: LitTable | null | undefined;
 
-  set data(val: SelectionParam | any) {
-    this.queryDataByDB(val);
+  set data(valPower: SelectionParam | any) {
+    this.queryDataByDB(valPower);
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl!.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.tblPower!)
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-power-battery-energy');
+    this.tblPower = this.shadowRoot?.querySelector<LitTable>('#tb-power-battery-energy');
   }
 
   queryDataByDB(val: SelectionParam | any) {
@@ -98,11 +93,11 @@ export class TabPanePowerBattery extends BaseElement {
       });
       list.push({ name: 'APP Name', value: SpHiSysEventChart.app_name! });
       if (list.length > 0) {
-        this.tbl!.recycleDataSource = list;
+        this.tblPower!.recycleDataSource = list;
       } else {
-        this.tbl!.recycleDataSource = [];
+        this.tblPower!.recycleDataSource = [];
       }
-      this.tbl?.shadowRoot?.querySelectorAll<HTMLDivElement>('.tr').forEach((tr) => {
+      this.tblPower?.shadowRoot?.querySelectorAll<HTMLDivElement>('.tr').forEach((tr) => {
         let td = tr.querySelectorAll<HTMLDivElement>('.td');
         this.setTableStyle(td[0], '0.9', '16px');
         this.setTableStyle(td[1], '0.6', '20px');
@@ -120,43 +115,21 @@ export class TabPanePowerBattery extends BaseElement {
   initHtml(): string {
     return `
         <style>
-            .current-static{
-                width: 100%;
-                display: flex;
-                top: 0;
-                background: var(--dark-background,#ffffff);
-                position: sticky;
-            }
-            .current-static h2{
-                width: 50%;
-                padding: 0 10px;
-                font-size: 16px;
-                font-weight: 400;
-                visibility: visible;
-            }
-            .bottom-scroll-area{
+            .power-battery-bottom-scroll-area{
                 display: flex;
                 height: auto;
                 overflow-y: auto;
                 margin-top: 1.2em;
             }
-            .battery-canvas{
+            .power-battery-battery-canvas{
                 width: 50%;
                 padding: 0 10px;
             }
-            
-            #batteryTitle{
-                opacity: 0.9;
-                font-size: 14px;
-                color: #000000;
-                text-align: left;
-                line-height: 16px;
-                font-weight: 700;
-            }
+         
         </style>
         <div style="width: 100%;height: auto;position: relative">
-            <div class="bottom-scroll-area">
-                <div class="battery-canvas">
+            <div class="power-battery-bottom-scroll-area">
+                <div class="power-battery-battery-canvas">
                     <lit-table id="tb-power-battery-energy" no-head style="height: auto">
                         <lit-table-column title="name" data-index="name" key="name" align="flex-start"  width="180px"></lit-table-column>
                         <lit-table-column title="value" data-index="value" key="value" align="flex-start" ></lit-table-column>
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts
index b9c44ec2ef71adb70b021eebebc4cb6b9da5230f..4d848ea7910eb9b6d730476e15ba5976c57f6221 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPanePowerDetails.ts
@@ -20,35 +20,30 @@ import { getTabPowerDetailsData } from '../../../../database/SqlLite.js';
 import { log } from '../../../../../log/Log.js';
 import { PowerDetailsEnergy } from '../../../../bean/EnergyStruct.js';
 import { SpHiSysEventChart } from '../../../chart/SpHiSysEventChart.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-power-details')
 export class TabPanePowerDetails extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<any> = [];
+  private tblPowerDetails: LitTable | null | undefined;
+  private sourcePowerDetails: Array<any> = [];
   private itemType: any;
 
-  set data(val: SelectionParam | any) {
-    this.queryDataByDB(val);
+  set data(valPowerDetails: SelectionParam | any) {
+    this.queryDataByDB(valPowerDetails);
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl!.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.tblPowerDetails!)
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-power-details-energy');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.tblPowerDetails = this.shadowRoot?.querySelector<LitTable>('#tb-power-details-energy');
+    this.tblPowerDetails!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
-    this.source = [];
+    this.sourcePowerDetails = [];
     this.itemType = {
       time_type: [
         'foreground_duration',
@@ -182,20 +177,20 @@ export class TabPanePowerDetails extends BaseElement {
       detailsData.push(this.setEnergyItems(powerData, totalEnergy, 'POWER_IDE_WIFISCAN', false, 'count_type'));
 
       if (detailsData.length > 0) {
-        this.source = detailsData;
-        this.tbl!.recycleDataSource = detailsData;
+        this.sourcePowerDetails = detailsData;
+        this.tblPowerDetails!.recycleDataSource = detailsData;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.sourcePowerDetails = [];
+        this.tblPowerDetails!.recycleDataSource = [];
       }
-      this.tbl?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
+      this.tblPowerDetails?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
         td.style.fontSize = '14px';
         td.style.fontWeight = '400';
         td.style.opacity = '0.9';
         td.style.lineHeight = '16px';
       });
     });
-    let th = this.tbl?.shadowRoot?.querySelector<HTMLDivElement>('.th');
+    let th = this.tblPowerDetails?.shadowRoot?.querySelector<HTMLDivElement>('.th');
     if (th) {
       th!.style.gridColumnGap = '5px';
     }
@@ -232,14 +227,16 @@ export class TabPanePowerDetails extends BaseElement {
   initHtml(): string {
     return `
         <style>
+        .power-details-table{
+            height: auto;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
-
         </style>
-        <lit-table id="tb-power-details-energy" style="height: auto">
+        <lit-table id="tb-power-details-energy" class="power-details-table">
             <lit-table-column order width="100px" title="" data-index="event" key="event" align="flex-start" >
             </lit-table-column>
             <lit-table-column order width="60px" title="UID" data-index="uid" key="uid" align="flex-start" >
@@ -297,20 +294,20 @@ export class TabPanePowerDetails extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: PowerDetailsEnergy, b: PowerDetailsEnergy) {
+      return function (aPowerDetails: PowerDetailsEnergy, bPowerDetails: PowerDetailsEnergy) {
         if (type === 'number') {
           return sort === 2
             ? // @ts-ignore
-              parseFloat(b[property] == '-' ? 0 : b[property]) - parseFloat(a[property] == '-' ? 0 : a[property])
+              parseFloat(bPowerDetails[property] == '-' ? 0 : bPowerDetails[property]) - parseFloat(aPowerDetails[property] == '-' ? 0 : aPowerDetails[property])
             : // @ts-ignore
-              parseFloat(a[property] == '-' ? 0 : a[property]) - parseFloat(b[property] == '-' ? 0 : b[property]);
+              parseFloat(aPowerDetails[property] == '-' ? 0 : aPowerDetails[property]) - parseFloat(bPowerDetails[property] == '-' ? 0 : bPowerDetails[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (bPowerDetails[property] > aPowerDetails[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (bPowerDetails[property] == aPowerDetails[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -321,13 +318,13 @@ export class TabPanePowerDetails extends BaseElement {
     }
 
     if (detail.key === 'appName') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.sourcePowerDetails.sort(compare(detail.key, detail.sort, 'string'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.sourcePowerDetails.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.tblPowerDetails!.recycleDataSource = this.sourcePowerDetails;
 
-    this.tbl?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
+    this.tblPowerDetails?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
       td.style.fontSize = '14px';
       td.style.fontWeight = '400';
       td.style.opacity = '0.9';
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
index 09cc0ac19c86c8e5d59786ac1f6d3d83d64fea26..4edfb4e580571229ab566e603ce92a45a2c29c60 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
@@ -23,46 +23,36 @@ import {
   querySystemWorkData,
 } from '../../../../database/SqlLite.js';
 import { SpHiSysEventChart } from '../../../chart/SpHiSysEventChart.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-system-details')
 export class TabPaneSystemDetails extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private tblSystemDetails: LitTable | null | undefined;
   private detailsTbl: LitTable | null | undefined;
   private eventSource: Array<any> = [];
   private detailsSource: Array<any> = [];
   private boxDetails: HTMLDivElement | null | undefined;
 
-  set data(val: SelectionParam | any) {
-    this.queryDataByDB(val);
+  set data(valSystemDetails: SelectionParam | any) {
+    this.queryDataByDB(valSystemDetails);
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl!.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.tblSystemDetails!)
   }
 
   initElements(): void {
     this.boxDetails = this.shadowRoot?.querySelector<HTMLDivElement>('.box-details');
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-system-data');
+    this.tblSystemDetails = this.shadowRoot?.querySelector<LitTable>('#tb-system-data');
     this.detailsTbl = this.shadowRoot?.querySelector<LitTable>('#tb-system-details-data');
 
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.tblSystemDetails!.addEventListener('row-click', (e) => {
       this.detailsSource = [];
       // @ts-ignore
       let data = e.detail.data as SystemDetailsEnergy;
       this.convertData(data);
     });
-
-    this.tbl!.addEventListener('column-click', (evt) => {
-      // @ts-ignore
-      this.sortByColumn(evt.detail.key, evt.detail.sort);
-    });
   }
 
   convertData(data: SystemDetailsEnergy) {
@@ -165,10 +155,10 @@ export class TabPaneSystemDetails extends BaseElement {
         eventName: 'Event Name',
       });
 
-      this.tbl!.recycleDataSource = this.eventSource.concat(itemList);
+      this.tblSystemDetails!.recycleDataSource = this.eventSource.concat(itemList);
       this.detailsTbl!.recycleDataSource = [];
       this.boxDetails!.style.width = '100%';
-      this.tbl?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
+      this.tblSystemDetails?.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
         td.style.fontSize = '14px';
         if (td.getAttribute('title') === 'Event Name' || td.getAttribute('title') === 'Time') {
           td.style.fontWeight = '700';
@@ -326,19 +316,19 @@ export class TabPaneSystemDetails extends BaseElement {
   }
 
   private getConvertData(data: Array<any>) {
-    let it: any = {};
+    let convertItem: any = {};
     data.forEach((item: any) => {
-      if (it[item.ts + item.eventName] == undefined) {
-        it[item.ts + item.eventName] = {};
-        it[item.ts + item.eventName]['ts'] = item.ts;
-        it[item.ts + item.eventName]['eventName'] = item.eventName;
-        it[item.ts + item.eventName][item.appKey.toLocaleLowerCase()] = item.appValue;
+      if (convertItem[item.ts + item.eventName] == undefined) {
+        convertItem[item.ts + item.eventName] = {};
+        convertItem[item.ts + item.eventName]['ts'] = item.ts;
+        convertItem[item.ts + item.eventName]['eventName'] = item.eventName;
+        convertItem[item.ts + item.eventName][item.appKey.toLocaleLowerCase()] = item.appValue;
       } else {
-        it[item.ts + item.eventName][item.appKey.toLocaleLowerCase()] = item.appValue;
+        convertItem[item.ts + item.eventName][item.appKey.toLocaleLowerCase()] = item.appValue;
       }
     });
     // @ts-ignore
-    return Object.values(it);
+    return Object.values(convertItem);
   }
 
   initHtml(): string {
@@ -349,7 +339,7 @@ export class TabPaneSystemDetails extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .progress{
+        .sys-detail-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -357,27 +347,27 @@ export class TabPaneSystemDetails extends BaseElement {
             right: 0;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="sys-detail-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row">
                 <lit-slicer style="width:100%">
                     <div class="box-details" style="width: 100%">
                         <lit-table id="tb-system-data" style="height: auto">
-                            <lit-table-column width="300px" title="" data-index="eventName" key="eventName"  align="flex-start" order>
+                            <lit-table-column class="sys-detail-column" width="300px" title="" data-index="eventName" key="eventName"  align="flex-start" order>
                             </lit-table-column>
-                            <lit-table-column width="300px" title="" data-index="ts" key="ts"  align="flex-start" order>
+                            <lit-table-column class="sys-detail-column" width="300px" title="" data-index="ts" key="ts"  align="flex-start" order>
                             </lit-table-column>
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
                     <lit-table id="tb-system-details-data" no-head hideDownload style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)">
-                        <lit-table-column width="100px" title="" data-index="key" key="key"  align="flex-start" >
+                        <lit-table-column class="sys-detail-column" width="100px" title="" data-index="key" key="key"  align="flex-start" >
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="value" key="value"  align="flex-start">
+                        <lit-table-column class="sys-detail-column" width="1fr" title="" data-index="value" key="value"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
+            <lit-progress-bar class="progress sys-detail-progress"></lit-progress-bar>
         </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 6f9acfdf318ec57c2541600b7c23d4a94fb78bd5..8819dd3fe3645d4aafab8aba150573ec05940e11 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
@@ -22,19 +22,20 @@ import { ChartMode } from '../../../../bean/FrameChartStruct.js';
 import { FilterData, TabPaneFilter } from '../TabPaneFilter.js';
 import { procedurePool } from '../../../../database/Procedure.js';
 import { MerageBean } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon.js';
+import { showButtonMenu } from '../SheetUtils.js';
 
 @element('tabpane-calltree')
 export class TabPaneCallTree extends BaseElement {
   public queryFuncName: string = '';
   public procedureAction: string = '';
-  private tbl: LitTable | null | undefined;
-  private tbr: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private rightSource: Array<MerageBean> = [];
-  private filter: any;
-  private dataSource: any[] = [];
-  private sortKey = 'weight';
-  private sortType = 0;
+  private callTreeTbl: LitTable | null | undefined;
+  private callTreeTbr: LitTable | null | undefined;
+  private callTreeProgressEL: LitProgressBar | null | undefined;
+  private callTreeRightSource: Array<MerageBean> = [];
+  private callTreeFilter: any;
+  private callTreeDataSource: any[] = [];
+  private callTreeSortKey = 'weight';
+  private callTreeSortType = 0;
   private currentSelectedData: any = undefined;
   private frameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
@@ -47,22 +48,22 @@ export class TabPaneCallTree extends BaseElement {
   private currentSelection: SelectionParam | undefined;
   private flameChartMode: ChartMode = ChartMode.Duration;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(callTreeSelection: SelectionParam | any) {
+    if (callTreeSelection == this.currentSelection) {
       return;
     }
     this.searchValue = '';
     this.initModeAndAction();
-    this.currentSelection = val;
-    this.tbl!.style.visibility = 'visible';
-    if (this.parentElement!.clientHeight > this.filter!.clientHeight) {
-      this.filter!.style.display = 'flex';
+    this.currentSelection = callTreeSelection;
+    this.callTreeTbl!.style.visibility = 'visible';
+    if (this.parentElement!.clientHeight > this.callTreeFilter!.clientHeight) {
+      this.callTreeFilter!.style.display = 'flex';
     } else {
-      this.filter!.style.display = 'none';
+      this.callTreeFilter!.style.display = 'none';
     }
-    this.filter!.initializeFilterTree(true, true, true);
-    this.filter!.filterValue = '';
-    this.progressEL!.loading = true;
+    this.callTreeFilter!.initializeFilterTree(true, true, true);
+    this.callTreeFilter!.filterValue = '';
+    this.callTreeProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
     this.getDataByWorker(
       [
@@ -72,14 +73,14 @@ export class TabPaneCallTree extends BaseElement {
         },
         {
           funcName: 'getCurrentDataFromDb',
-          funcArgs: [{ queryFuncName: this.queryFuncName, ...val }],
+          funcArgs: [{ queryFuncName: this.queryFuncName, ...callTreeSelection }],
         },
       ],
       (results: any[]) => {
         this.setLTableData(results);
-        this.tbr!.recycleDataSource = [];
+        this.callTreeTbr!.recycleDataSource = [];
         this.frameChart!.mode = this.flameChartMode;
-        this.frameChart!.data = this.dataSource;
+        this.frameChart!.data = this.callTreeDataSource;
         this.frameChart?.updateCanvas(true, this.clientWidth);
         this.frameChart?.calculateChartData();
       }
@@ -91,8 +92,8 @@ export class TabPaneCallTree extends BaseElement {
       this.procedureAction = this.getAttribute('action') || '';
     }
     if (this.hasAttribute('flame-mode')) {
-      let mode = this.getAttribute('flame-mode');
-      switch (mode) {
+      let callTreeFlameMode = this.getAttribute('flame-mode');
+      switch (callTreeFlameMode) {
         case 'Byte':
           this.flameChartMode = ChartMode.Byte;
           break;
@@ -109,14 +110,14 @@ export class TabPaneCallTree extends BaseElement {
     }
   }
 
-  getParentTree(src: Array<MerageBean>, target: MerageBean, parents: Array<MerageBean>): boolean {
-    for (let call of src) {
-      if (call.id == target.id) {
-        parents.push(call);
+  getParentTree(callTreeSrc: Array<MerageBean>, target: MerageBean, parents: Array<MerageBean>): boolean {
+    for (let callTreeBean of callTreeSrc) {
+      if (callTreeBean.id == target.id) {
+        parents.push(callTreeBean);
         return true;
       } else {
-        if (this.getParentTree(call.children as Array<MerageBean>, target, parents)) {
-          parents.push(call);
+        if (this.getParentTree(callTreeBean.children as Array<MerageBean>, target, parents)) {
+          parents.push(callTreeBean);
           return true;
         }
       }
@@ -124,14 +125,14 @@ export class TabPaneCallTree extends BaseElement {
     return false;
   }
 
-  getChildTree(src: Array<MerageBean>, id: string, children: Array<MerageBean>): boolean {
-    for (let call of src) {
-      if (call.id == id && call.children.length == 0) {
-        children.push(call);
+  getChildTree(callTreeSrc: Array<MerageBean>, id: string, children: Array<MerageBean>): boolean {
+    for (let callTreeBean of callTreeSrc) {
+      if (callTreeBean.id == id && callTreeBean.children.length == 0) {
+        children.push(callTreeBean);
         return true;
       } else {
-        if (this.getChildTree(call.children as Array<MerageBean>, id, children)) {
-          children.push(call);
+        if (this.getChildTree(callTreeBean.children as Array<MerageBean>, id, children)) {
+          children.push(callTreeBean);
           return true;
         }
       }
@@ -139,48 +140,36 @@ export class TabPaneCallTree extends BaseElement {
     return false;
   }
 
-  setRightTableData(call: MerageBean) {
+  setRightTableData(bean: MerageBean) {
     let parents: Array<MerageBean> = [];
     let children: Array<MerageBean> = [];
-    this.getParentTree(this.dataSource, call, parents);
-    let maxId = call.id;
+    this.getParentTree(this.callTreeDataSource, bean, parents);
+    let maxId = bean.id;
     let maxDur = 0;
 
-    function findMaxStack(call: MerageBean) {
-      if (call.children.length == 0) {
-        if (call.dur > maxDur) {
-          maxDur = call.dur;
-          maxId = call.id;
+    function findMaxStack(bean: MerageBean) {
+      if (bean.children.length == 0) {
+        if (bean.dur > maxDur) {
+          maxDur = bean.dur;
+          maxId = bean.id;
         }
       } else {
-        call.children.map((callChild: any) => {
+        bean.children.map((callChild: any) => {
           findMaxStack(<MerageBean>callChild);
         });
       }
     }
 
-    findMaxStack(call);
-    this.getChildTree(call.children as Array<MerageBean>, maxId, children);
-    let arr = parents.reverse().concat(children.reverse());
-    for (let data of arr) {
+    findMaxStack(bean);
+    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;
     }
-    let len = arr.length;
-    this.rightSource = arr;
-    this.tbr!.dataSource = len == 0 ? [] : arr;
-  }
-
-  showButtomMenu(isShow: boolean) {
-    if (isShow) {
-      this.filter.setAttribute('tree', '');
-      this.filter.setAttribute('input', '');
-      this.filter.setAttribute('inputLeftText', '');
-    } else {
-      this.filter.removeAttribute('tree');
-      this.filter.removeAttribute('input');
-      this.filter.removeAttribute('inputLeftText');
-    }
+    let len = callTreeArr.length;
+    this.callTreeRightSource = callTreeArr;
+    this.callTreeTbr!.dataSource = len == 0 ? [] : callTreeArr;
   }
 
   connectedCallback() {
@@ -189,20 +178,20 @@ export class TabPaneCallTree extends BaseElement {
     };
     this.frameChart!.addChartClickListener((needShowMenu: boolean) => {
       this.parentElement!.scrollTo(0, 0);
-      this.showButtomMenu(needShowMenu);
+      showButtonMenu(this.callTreeFilter, needShowMenu);
       this.needShowMenu = needShowMenu;
     });
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let callTreeTabFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
+      if (callTreeTabFilter.clientHeight > 0) filterHeight = callTreeTabFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        callTreeTabFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        callTreeTabFilter.style.display = 'none';
       }
-      if (this.tbl!.style.visibility == 'hidden') {
-        tabPaneFilter.style.display = 'none';
+      if (this.callTreeTbl!.style.visibility == 'hidden') {
+        callTreeTabFilter.style.display = 'none';
       }
       if (this.parentElement?.clientHeight != 0) {
         if (this.isChartShow) {
@@ -210,45 +199,45 @@ export class TabPaneCallTree extends BaseElement {
           this.frameChart?.calculateChartData();
         }
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.callTreeTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
+        this.callTreeTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
-        this.tbr?.reMeauseHeight();
+        this.callTreeTbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
+        this.callTreeTbr?.reMeauseHeight();
         this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-calltree');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
+    this.callTreeTbl = this.shadowRoot?.querySelector<LitTable>('#tb-calltree');
+    this.callTreeProgressEL = this.shadowRoot?.querySelector('.call-tree-progress') as LitProgressBar;
     this.frameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
+    this.loadingPage = this.shadowRoot?.querySelector('.call-tree-loading');
 
-    this.tbl!.rememberScrollTop = true;
-    this.filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    this.tbl!.addEventListener('row-click', (evt: any) => {
+    this.callTreeTbl!.rememberScrollTop = true;
+    this.callTreeFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    this.callTreeTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as MerageBean;
       this.setRightTableData(data);
       data.isSelected = true;
       this.currentSelectedData = data;
-      this.tbr?.clearAllSelection(data);
-      this.tbr?.setCurrentSelection(data);
+      this.callTreeTbr?.clearAllSelection(data);
+      this.callTreeTbr?.setCurrentSelection(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
         (evt.detail as any).callBack(true);
       }
     });
-    this.tbr = this.shadowRoot?.querySelector<LitTable>('#tb-list');
-    this.tbr!.addEventListener('row-click', (evt: any) => {
+    this.callTreeTbr = this.shadowRoot?.querySelector<LitTable>('#tb-list');
+    this.callTreeTbr!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as MerageBean;
-      this.tbl?.clearAllSelection(data);
+      this.callTreeTbl?.clearAllSelection(data);
       (data as any).isSelected = true;
-      this.tbl!.scrollToData(data);
+      this.callTreeTbl!.scrollToData(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
@@ -256,37 +245,37 @@ export class TabPaneCallTree extends BaseElement {
       }
     });
     let filterFunc = (data: any) => {
-      let args: any[] = [];
+      let callTreeFuncArgs: any[] = [];
       if (data.type == 'check') {
         if (data.item.checked) {
-          args.push({
+          callTreeFuncArgs.push({
             funcName: 'splitTree',
             funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
           });
         } else {
-          args.push({
+          callTreeFuncArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[data.item.name]],
           });
-          args.push({
+          callTreeFuncArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          callTreeFuncArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [data.item.name],
           });
         }
       } else if (data.type == 'select') {
-        args.push({
+        callTreeFuncArgs.push({
           funcName: 'resotreAllNode',
           funcArgs: [[data.item.name]],
         });
-        args.push({
+        callTreeFuncArgs.push({
           funcName: 'clearSplitMapData',
           funcArgs: [data.item.name],
         });
-        args.push({
+        callTreeFuncArgs.push({
           funcName: 'splitTree',
           funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
         });
@@ -296,8 +285,8 @@ export class TabPaneCallTree extends BaseElement {
             return;
           }
           if (this.currentSelectedData != undefined) {
-            this.filter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
-            args.push({
+            this.callTreeFilter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
+            callTreeFuncArgs.push({
               funcName: 'splitTree',
               funcArgs: [this.currentSelectedData.symbolName, false, true],
             });
@@ -309,8 +298,8 @@ export class TabPaneCallTree extends BaseElement {
             return;
           }
           if (this.currentSelectedData != undefined && this.currentSelectedData.libName != '') {
-            this.filter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
-            args.push({
+            this.callTreeFilter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
+            callTreeFuncArgs.push({
               funcName: 'splitTree',
               funcArgs: [this.currentSelectedData.libName, false, false],
             });
@@ -322,16 +311,16 @@ export class TabPaneCallTree extends BaseElement {
             let list = data.remove.map((item: any) => {
               return item.name;
             });
-            args.push({
+            callTreeFuncArgs.push({
               funcName: 'resotreAllNode',
               funcArgs: [list],
             });
-            args.push({
+            callTreeFuncArgs.push({
               funcName: 'resetAllNode',
               funcArgs: [],
             });
             list.forEach((symbolName: string) => {
-              args.push({
+              callTreeFuncArgs.push({
                 funcName: 'clearSplitMapData',
                 funcArgs: [symbolName],
               });
@@ -339,61 +328,61 @@ export class TabPaneCallTree extends BaseElement {
           }
         }
       }
-      this.getDataByWorker(args, (result: any[]) => {
+      this.getDataByWorker(callTreeFuncArgs, (result: any[]) => {
         this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
+        this.frameChart!.data = this.callTreeDataSource;
         if (this.isChartShow) this.frameChart?.calculateChartData();
-        this.tbl!.move1px();
+        this.callTreeTbl!.move1px();
         if (this.currentSelectedData) {
           this.currentSelectedData.isSelected = false;
-          this.tbl?.clearAllSelection(this.currentSelectedData);
-          this.tbr!.recycleDataSource = [];
+          this.callTreeTbl?.clearAllSelection(this.currentSelectedData);
+          this.callTreeTbr!.recycleDataSource = [];
           this.currentSelectedData = undefined;
         }
       });
     };
-    this.filter!.getDataLibrary(filterFunc);
-    this.filter!.getDataMining(filterFunc);
-    this.filter!.getCallTreeData((data: any) => {
+    this.callTreeFilter!.getDataLibrary(filterFunc);
+    this.callTreeFilter!.getDataMining(filterFunc);
+    this.callTreeFilter!.getCallTreeData((data: any) => {
       if (data.value == 0) {
         this.refreshAllNode({
-          ...this.filter!.getFilterTreeData(),
+          ...this.callTreeFilter!.getFilterTreeData(),
           callTree: data.checks,
         });
       } else {
-        let args: any[] = [];
+        let callTreeArgs: any[] = [];
         if (data.checks[1]) {
-          args.push({
+          callTreeArgs.push({
             funcName: 'hideSystemLibrary',
             funcArgs: [],
           });
-          args.push({
+          callTreeArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
         } else {
-          args.push({
+          callTreeArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[this.systmeRuleName]],
           });
-          args.push({
+          callTreeArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          callTreeArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [this.systmeRuleName],
           });
         }
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(callTreeArgs, (result: any[]) => {
           this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
+          this.frameChart!.data = this.callTreeDataSource;
           if (this.isChartShow) this.frameChart?.calculateChartData();
         });
       }
     });
-    this.filter!.getCallTreeConstraintsData((data: any) => {
-      let args: any[] = [
+    this.callTreeFilter!.getCallTreeConstraintsData((data: any) => {
+      let callTreeConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
           funcArgs: [[this.numRuleName]],
@@ -404,24 +393,24 @@ export class TabPaneCallTree extends BaseElement {
         },
       ];
       if (data.checked) {
-        args.push({
+        callTreeConstraintsArgs.push({
           funcName: 'hideNumMaxAndMin',
           funcArgs: [parseInt(data.min), data.max],
         });
       }
-      args.push({
+      callTreeConstraintsArgs.push({
         funcName: 'resetAllNode',
         funcArgs: [],
       });
-      this.getDataByWorker(args, (result: any[]) => {
+      this.getDataByWorker(callTreeConstraintsArgs, (result: any[]) => {
         this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
+        this.frameChart!.data = this.callTreeDataSource;
         if (this.isChartShow) this.frameChart?.calculateChartData();
       });
     });
-    this.filter!.getFilterData((data: FilterData) => {
-      if (this.searchValue != this.filter!.filterValue) {
-        this.searchValue = this.filter!.filterValue;
+    this.callTreeFilter!.getFilterData((callTreeFilterData: FilterData) => {
+      if (this.searchValue != this.callTreeFilter!.filterValue) {
+        this.searchValue = this.callTreeFilter!.filterValue;
         let args = [
           {
             funcName: 'setSearchValue',
@@ -434,128 +423,128 @@ export class TabPaneCallTree extends BaseElement {
         ];
         this.getDataByWorker(args, (result: any[]) => {
           this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
-          this.switchFlameChart(data);
+          this.frameChart!.data = this.callTreeDataSource;
+          this.switchFlameChart(callTreeFilterData);
         });
       } else {
-        this.switchFlameChart(data);
+        this.switchFlameChart(callTreeFilterData);
       }
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.callTreeTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.callTreeSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.callTreeSortType = evt.detail.sort;
       // @ts-ignore
-      this.setLTableData(this.dataSource);
-      this.frameChart!.data = this.dataSource;
+      this.setLTableData(this.callTreeDataSource);
+      this.frameChart!.data = this.callTreeDataSource;
     });
   }
 
   switchFlameChart(data: any) {
-    let pageTab = this.shadowRoot?.querySelector('#show_table');
-    let pageChart = this.shadowRoot?.querySelector('#show_chart');
+    let callTreePageTab = this.shadowRoot?.querySelector('#show_table');
+    let callTreePageChart = this.shadowRoot?.querySelector('#show_chart');
     if (data.icon == 'block') {
-      pageChart?.setAttribute('class', 'show');
-      pageTab?.setAttribute('class', '');
+      callTreePageChart?.setAttribute('class', 'show');
+      callTreePageTab?.setAttribute('class', '');
       this.isChartShow = true;
-      this.filter!.disabledMining = true;
-      this.showButtomMenu(this.needShowMenu);
-      this.frameChart!.data = this.dataSource;
+      this.callTreeFilter!.disabledMining = true;
+      showButtonMenu(this.callTreeFilter, this.needShowMenu);
+      this.frameChart!.data = this.callTreeDataSource;
       this.frameChart?.calculateChartData();
     } else if (data.icon == 'tree') {
-      pageChart?.setAttribute('class', '');
-      pageTab?.setAttribute('class', 'show');
-      this.showButtomMenu(true);
+      callTreePageChart?.setAttribute('class', '');
+      callTreePageTab?.setAttribute('class', 'show');
+      showButtonMenu(this.callTreeFilter, true);
       this.isChartShow = false;
-      this.filter!.disabledMining = false;
+      this.callTreeFilter!.disabledMining = false;
       this.frameChart!.clearCanvas();
-      this.tbl!.reMeauseHeight();
+      this.callTreeTbl!.reMeauseHeight();
     }
   }
 
   refreshAllNode(filterData: any) {
-    let args: any[] = [];
+    let callTreeArgs: any[] = [];
     let isTopDown: boolean = !filterData.callTree[0];
     let isHideSystemLibrary = filterData.callTree[1];
     let list = filterData.dataMining.concat(filterData.dataLibrary);
-    args.push({
+    callTreeArgs.push({
       funcName: 'getCallChainsBySampleIds',
       funcArgs: [isTopDown, this.queryFuncName],
     });
-    this.tbr!.recycleDataSource = [];
+    this.callTreeTbr!.recycleDataSource = [];
     if (isHideSystemLibrary) {
-      args.push({
+      callTreeArgs.push({
         funcName: 'hideSystemLibrary',
         funcArgs: [],
       });
     }
     if (filterData.callTreeConstraints.checked) {
-      args.push({
+      callTreeArgs.push({
         funcName: 'hideNumMaxAndMin',
         funcArgs: [parseInt(filterData.callTreeConstraints.inputs[0]), filterData.callTreeConstraints.inputs[1]],
       });
     }
-    args.push({
+    callTreeArgs.push({
       funcName: 'splitAllProcess',
       funcArgs: [list],
     });
-    args.push({
+    callTreeArgs.push({
       funcName: 'resetAllNode',
       funcArgs: [],
     });
-    this.getDataByWorker(args, (result: any[]) => {
+    this.getDataByWorker(callTreeArgs, (result: any[]) => {
       this.setLTableData(result);
-      this.frameChart!.data = this.dataSource;
+      this.frameChart!.data = this.callTreeDataSource;
       if (this.isChartShow) this.frameChart?.calculateChartData();
     });
   }
 
   setLTableData(resultData: any[]) {
-    this.dataSource = this.sortTree(resultData);
-    this.tbl!.recycleDataSource = this.dataSource;
+    this.callTreeDataSource = this.sortCallFnTree(resultData);
+    this.callTreeTbl!.recycleDataSource = this.callTreeDataSource;
   }
 
-  sortTree(arr: Array<any>): Array<any> {
-    let sortArr = arr.sort((a, b) => {
-      if (this.sortKey == 'self') {
-        if (this.sortType == 0) {
-          return b.dur - a.dur;
-        } else if (this.sortType == 1) {
-          return a.selfDur - b.selfDur;
+  sortCallFnTree(arr: Array<any>): Array<any> {
+    let sortArr = arr.sort((compareFnA, compareFnB) => {
+      if (this.callTreeSortKey == 'self') {
+        if (this.callTreeSortType == 0) {
+          return compareFnB.dur - compareFnA.dur;
+        } else if (this.callTreeSortType == 1) {
+          return compareFnA.selfDur - compareFnB.selfDur;
         } else {
-          return b.selfDur - a.selfDur;
+          return compareFnB.selfDur - compareFnA.selfDur;
         }
       } else {
-        if (this.sortType == 0) {
-          return b.dur - a.dur;
-        } else if (this.sortType == 1) {
-          return a.dur - b.dur;
+        if (this.callTreeSortType == 0) {
+          return compareFnB.dur - compareFnA.dur;
+        } else if (this.callTreeSortType == 1) {
+          return compareFnA.dur - compareFnB.dur;
         } else {
-          return b.dur - a.dur;
+          return compareFnB.dur - compareFnA.dur;
         }
       }
     });
     sortArr.map((call) => {
-      call.children = this.sortTree(call.children);
+      call.children = this.sortCallFnTree(call.children);
     });
     return sortArr;
   }
 
   getDataByWorker(args: any[], handler: Function) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
+    this.callTreeProgressEL!.loading = true;
     procedurePool.submitWithName(
       'logic0',
       this.procedureAction,
       { args, callType: this.queryFuncName },
       undefined,
-      (results: any) => {
-        handler(results);
+      (callTreeResults: any) => {
+        handler(callTreeResults);
         this.loadingList.splice(0, 1);
         if (this.loadingList.length == 0) {
-          this.progressEL!.loading = false;
+          this.callTreeProgressEL!.loading = false;
           this.loadingPage.style.visibility = 'hidden';
         }
       }
@@ -570,7 +559,7 @@ export class TabPaneCallTree extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        tab-pane-filter {
+        .call-tree-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -584,14 +573,14 @@ export class TabPaneCallTree extends BaseElement {
             display: flex;
             flex: 1;
         }
-        .progress{
+        .call-tree-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .call-tree-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -601,40 +590,40 @@ export class TabPaneCallTree extends BaseElement {
             z-index: 999999;
         }
     </style>
-    <div style="display: flex;flex-direction: row">
+    <div class="call-tree-content" style="display: flex;flex-direction: row">
     
     <selector id='show_table' class="show">
         <lit-slicer style="width:100%">
         <div id="left_table" style="width: 65%">
             <lit-table id="tb-calltree" style="height: auto" tree>
-                <lit-table-column width="70%" title="Call Stack" data-index="symbolName" key="symbolName"  align="flex-start" ></lit-table-column>
-                <lit-table-column width="1fr" title="Local" data-index="self" key="self"  align="flex-start"  order></lit-table-column>
-                <lit-table-column width="1fr" title="Weight" data-index="weight" key="weight"  align="flex-start"  order></lit-table-column>
-                <lit-table-column width="1fr" title="%" data-index="weightPercent" key="weightPercent"  align="flex-start"  order></lit-table-column>
+                <lit-table-column class="call-tree-column" width="70%" title="Call Stack" data-index="symbolName" key="symbolName"  align="flex-start" ></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>
             </lit-table>
             
         </div>
         <lit-slicer-track ></lit-slicer-track>
         <lit-table id="tb-list" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
             <span slot="head">Heaviest Stack Trace</span>
-            <lit-table-column width="30px" title="" data-index="type" key="type"  align="flex-start" >
+            <lit-table-column class="call-tree-column" width="30px" title="" data-index="type" key="type"  align="flex-start" >
                 <template>
                     <img src="img/library.png" size="20" v-if=" type == 1 ">
                     <img src="img/function.png" size="20" v-if=" type == 0 ">
                 </template>
             </lit-table-column>
-            <lit-table-column width="60px" title="" data-index="count" key="count"  align="flex-start"></lit-table-column>
-            <lit-table-column width="1fr" title="" data-index="symbolName" key="symbolName"  align="flex-start"></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>
         </div>
         </lit-slicer>
      </selector>
-     <tab-pane-filter id="filter" input inputLeftText icon tree></tab-pane-filter>
-     <lit-progress-bar class="progress"></lit-progress-bar>
-    <selector id='show_chart'>
+     <tab-pane-filter id="filter" class="call-tree-filter" input inputLeftText icon tree></tab-pane-filter>
+     <lit-progress-bar class="progress call-tree-progress"></lit-progress-bar>
+    <selector id='show_chart' class="call-tree-selector" >
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>  
-    <div class="loading"></div>
+    <div class="loading call-tree-loading"></div>
     </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 0cb2500f7ea61bdfa20b95ab6c61722821bac166..648d9dbefbbfd79bf9509dfa31201f5a6358aa4e 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
@@ -26,18 +26,19 @@ import { FilterData, TabPaneFilter } from '../TabPaneFilter.js';
 import '../TabPaneFilter.js';
 import { procedurePool } from '../../../../database/Procedure.js';
 import { FileMerageBean } from '../../../../database/logic-worker/ProcedureLogicWorkerFileSystem.js';
+import { showButtonMenu } from '../SheetUtils.js';
 
 @element('tabpane-filesystem-calltree')
 export class TabpaneFilesystemCalltree extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tbr: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private rightSource: Array<FileMerageBean> = [];
-  private filter: any;
-  private dataSource: any[] = [];
-  private sortKey = 'weight';
-  private sortType = 0;
-  private currentSelectedData: any = undefined;
+  private fsCallTreeTbl: LitTable | null | undefined;
+  private fsCallTreeTbr: LitTable | null | undefined;
+  private fsCallTreeProgressEL: LitProgressBar | null | undefined;
+  private fsCallTreeRightSource: Array<FileMerageBean> = [];
+  private fsCallTreeFilter: any;
+  private fsCallTreeDataSource: any[] = [];
+  private fsCallTreeSortKey = 'weight';
+  private fsCallTreeSortType = 0;
+  private fsCallTreeCurrentSelectedData: any = undefined;
   private frameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
   private systmeRuleName = '/system/';
@@ -49,22 +50,22 @@ export class TabpaneFilesystemCalltree extends BaseElement {
   private loadingPage: any;
   private currentSelection: SelectionParam | undefined;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(fsCallTreeSelection: SelectionParam | any) {
+    if (fsCallTreeSelection == this.currentSelection) {
       return;
     }
     this.searchValue = '';
-    this.currentSelection = val;
+    this.currentSelection = fsCallTreeSelection;
     this.modal!.style.display = 'none';
-    this.tbl!.style.visibility = 'visible';
-    if (this.parentElement!.clientHeight > this.filter!.clientHeight) {
-      this.filter!.style.display = 'flex';
+    this.fsCallTreeTbl!.style.visibility = 'visible';
+    if (this.parentElement!.clientHeight > this.fsCallTreeFilter!.clientHeight) {
+      this.fsCallTreeFilter!.style.display = 'flex';
     } else {
-      this.filter!.style.display = 'none';
+      this.fsCallTreeFilter!.style.display = 'none';
     }
-    this.filter!.initializeFilterTree(true, true, true);
-    this.filter!.filterValue = '';
-    this.progressEL!.loading = true;
+    this.fsCallTreeFilter!.initializeFilterTree(true, true, true);
+    this.fsCallTreeFilter!.filterValue = '';
+    this.fsCallTreeProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
     this.getDataByWorker(
       [
@@ -74,28 +75,28 @@ export class TabpaneFilesystemCalltree extends BaseElement {
         },
         {
           funcName: 'getCurrentDataFromDb',
-          funcArgs: [{ queryFuncName: 'fileSystem', ...val }],
+          funcArgs: [{ queryFuncName: 'fileSystem', ...fsCallTreeSelection }],
         },
       ],
-      (results: any[]) => {
-        this.setLTableData(results);
-        this.tbr!.recycleDataSource = [];
+      (fsCallTreeResults: any[]) => {
+        this.setLTableData(fsCallTreeResults);
+        this.fsCallTreeTbr!.recycleDataSource = [];
         this.frameChart!.mode = ChartMode.Duration;
-        this.frameChart!.data = this.dataSource;
+        this.frameChart!.data = this.fsCallTreeDataSource;
         this.frameChart?.updateCanvas(true, this.clientWidth);
         this.frameChart?.calculateChartData();
       }
     );
   }
 
-  getParentTree(src: Array<FileMerageBean>, target: FileMerageBean, parents: Array<FileMerageBean>): boolean {
-    for (let call of src) {
-      if (call.id == target.id) {
-        parents.push(call);
+  getParentTree(fsCallTreeSrc: Array<FileMerageBean>, fsCallTreeTarget: FileMerageBean, parents: Array<FileMerageBean>): boolean {
+    for (let fsCallTreeBean of fsCallTreeSrc) {
+      if (fsCallTreeBean.id == fsCallTreeTarget.id) {
+        parents.push(fsCallTreeBean);
         return true;
       } else {
-        if (this.getParentTree(call.children as Array<FileMerageBean>, target, parents)) {
-          parents.push(call);
+        if (this.getParentTree(fsCallTreeBean.children as Array<FileMerageBean>, fsCallTreeTarget, parents)) {
+          parents.push(fsCallTreeBean);
           return true;
         }
       }
@@ -103,14 +104,14 @@ export class TabpaneFilesystemCalltree extends BaseElement {
     return false;
   }
 
-  getChildTree(src: Array<FileMerageBean>, id: string, children: Array<FileMerageBean>): boolean {
-    for (let call of src) {
-      if (call.id == id && call.children.length == 0) {
-        children.push(call);
+  getChildTree(fsCallTreeSrc: Array<FileMerageBean>, id: string, children: Array<FileMerageBean>): boolean {
+    for (let fsCallTreeBean of fsCallTreeSrc) {
+      if (fsCallTreeBean.id == id && fsCallTreeBean.children.length == 0) {
+        children.push(fsCallTreeBean);
         return true;
       } else {
-        if (this.getChildTree(call.children as Array<FileMerageBean>, id, children)) {
-          children.push(call);
+        if (this.getChildTree(fsCallTreeBean.children as Array<FileMerageBean>, id, children)) {
+          children.push(fsCallTreeBean);
           return true;
         }
       }
@@ -118,84 +119,72 @@ export class TabpaneFilesystemCalltree extends BaseElement {
     return false;
   }
 
-  setRightTableData(call: FileMerageBean) {
+  setRightTableData(merageBean: FileMerageBean) {
     let parents: Array<FileMerageBean> = [];
     let children: Array<FileMerageBean> = [];
-    this.getParentTree(this.dataSource, call, parents);
-    let maxId = call.id;
+    this.getParentTree(this.fsCallTreeDataSource, merageBean, parents);
+    let maxId = merageBean.id;
     let maxDur = 0;
 
-    function findMaxStack(call: FileMerageBean) {
-      if (call.children.length == 0) {
-        if (call.dur > maxDur) {
-          maxDur = call.dur;
-          maxId = call.id;
+    function findMaxStack(fsMerageBean: FileMerageBean) {
+      if (fsMerageBean.children.length == 0) {
+        if (fsMerageBean.dur > maxDur) {
+          maxDur = fsMerageBean.dur;
+          maxId = fsMerageBean.id;
         }
       } else {
-        call.children.map((callChild: any) => {
+        fsMerageBean.children.map((callChild: any) => {
           findMaxStack(<FileMerageBean>callChild);
         });
       }
     }
 
-    findMaxStack(call);
-    this.getChildTree(call.children as Array<FileMerageBean>, maxId, children);
-    let arr = parents.reverse().concat(children.reverse());
-    for (let data of arr) {
+    findMaxStack(merageBean);
+    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;
     }
-    let len = arr.length;
-    this.rightSource = arr;
-    this.tbr!.dataSource = len == 0 ? [] : arr;
-  }
-
-  showButtomMenu(isShow: boolean) {
-    if (isShow) {
-      this.filter.setAttribute('tree', '');
-      this.filter.setAttribute('input', '');
-      this.filter.setAttribute('inputLeftText', '');
-    } else {
-      this.filter.removeAttribute('tree');
-      this.filter.removeAttribute('input');
-      this.filter.removeAttribute('inputLeftText');
-    }
+    let len = fsMerageParentsList.length;
+    this.fsCallTreeRightSource = fsMerageParentsList;
+    this.fsCallTreeTbr!.dataSource = len == 0 ? [] : fsMerageParentsList;
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-calltree');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
+    this.fsCallTreeTbl = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-calltree');
+    this.fsCallTreeProgressEL = this.shadowRoot?.querySelector('.fs-call-tree-progress') as LitProgressBar;
     this.frameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
     this.modal = this.shadowRoot?.querySelector<DisassemblingWindow>('tab-native-data-modal');
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
+    this.loadingPage = this.shadowRoot?.querySelector('.fs-call-tree-loading');
     this.frameChart!.addChartClickListener((needShowMenu: boolean) => {
       this.parentElement!.scrollTo(0, 0);
-      this.showButtomMenu(needShowMenu);
+      showButtonMenu(this.fsCallTreeFilter, needShowMenu);
       this.needShowMenu = needShowMenu;
     });
-    this.tbl!.rememberScrollTop = true;
-    this.filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    this.tbl!.addEventListener('row-click', (evt: any) => {
+    this.fsCallTreeTbl!.rememberScrollTop = true;
+    this.fsCallTreeFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    this.fsCallTreeTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as FileMerageBean;
       this.setRightTableData(data);
       data.isSelected = true;
-      this.currentSelectedData = data;
-      this.tbr?.clearAllSelection(data);
-      this.tbr?.setCurrentSelection(data);
+      this.fsCallTreeCurrentSelectedData = data;
+      this.fsCallTreeTbr?.clearAllSelection(data);
+      this.fsCallTreeTbr?.setCurrentSelection(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
         (evt.detail as any).callBack(true);
       }
     });
-    this.tbr = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-list');
-    this.tbr!.addEventListener('row-click', (evt: any) => {
+    this.fsCallTreeTbr = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-list');
+    this.fsCallTreeTbr!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as FileMerageBean;
-      this.tbl?.clearAllSelection(data);
+      this.fsCallTreeTbl?.clearAllSelection(data);
       (data as any).isSelected = true;
-      this.tbl!.scrollToData(data);
+      this.fsCallTreeTbl!.scrollToData(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
@@ -204,67 +193,67 @@ export class TabpaneFilesystemCalltree extends BaseElement {
     });
     this.modal!.setCloseListener(() => {
       this.modal!.style.display = 'none';
-      this.tbl!.style.visibility = 'visible';
+      this.fsCallTreeTbl!.style.visibility = 'visible';
       this.shadowRoot!.querySelector<TabPaneFilter>('#filter')!.style.display = 'flex';
     });
     let filterFunc = (data: any) => {
-      let args: any[] = [];
+      let fsCallTreeFuncArgs: any[] = [];
       if (data.type == 'check') {
         if (data.item.checked) {
-          args.push({
+          fsCallTreeFuncArgs.push({
             funcName: 'splitTree',
             funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
           });
         } else {
-          args.push({
+          fsCallTreeFuncArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[data.item.name]],
           });
-          args.push({
+          fsCallTreeFuncArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          fsCallTreeFuncArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [data.item.name],
           });
         }
       } else if (data.type == 'select') {
-        args.push({
+        fsCallTreeFuncArgs.push({
           funcName: 'resotreAllNode',
           funcArgs: [[data.item.name]],
         });
-        args.push({
+        fsCallTreeFuncArgs.push({
           funcName: 'clearSplitMapData',
           funcArgs: [data.item.name],
         });
-        args.push({
+        fsCallTreeFuncArgs.push({
           funcName: 'splitTree',
           funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
         });
       } else if (data.type == 'button') {
         if (data.item == 'symbol') {
-          if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
+          if (this.fsCallTreeCurrentSelectedData && !this.fsCallTreeCurrentSelectedData.canCharge) {
             return;
           }
-          if (this.currentSelectedData != undefined) {
-            this.filter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
-            args.push({
+          if (this.fsCallTreeCurrentSelectedData != undefined) {
+            this.fsCallTreeFilter!.addDataMining({ name: this.fsCallTreeCurrentSelectedData.symbolName }, data.item);
+            fsCallTreeFuncArgs.push({
               funcName: 'splitTree',
-              funcArgs: [this.currentSelectedData.symbolName, false, true],
+              funcArgs: [this.fsCallTreeCurrentSelectedData.symbolName, false, true],
             });
           } else {
             return;
           }
         } else if (data.item == 'library') {
-          if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
+          if (this.fsCallTreeCurrentSelectedData && !this.fsCallTreeCurrentSelectedData.canCharge) {
             return;
           }
-          if (this.currentSelectedData != undefined && this.currentSelectedData.libName != '') {
-            this.filter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
-            args.push({
+          if (this.fsCallTreeCurrentSelectedData != undefined && this.fsCallTreeCurrentSelectedData.libName != '') {
+            this.fsCallTreeFilter!.addDataMining({ name: this.fsCallTreeCurrentSelectedData.libName }, data.item);
+            fsCallTreeFuncArgs.push({
               funcName: 'splitTree',
-              funcArgs: [this.currentSelectedData.libName, false, false],
+              funcArgs: [this.fsCallTreeCurrentSelectedData.libName, false, false],
             });
           } else {
             return;
@@ -274,16 +263,16 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             let list = data.remove.map((item: any) => {
               return item.name;
             });
-            args.push({
+            fsCallTreeFuncArgs.push({
               funcName: 'resotreAllNode',
               funcArgs: [list],
             });
-            args.push({
+            fsCallTreeFuncArgs.push({
               funcName: 'resetAllNode',
               funcArgs: [],
             });
             list.forEach((symbolName: string) => {
-              args.push({
+              fsCallTreeFuncArgs.push({
                 funcName: 'clearSplitMapData',
                 funcArgs: [symbolName],
               });
@@ -291,61 +280,61 @@ export class TabpaneFilesystemCalltree extends BaseElement {
           }
         }
       }
-      this.getDataByWorker(args, (result: any[]) => {
+      this.getDataByWorker(fsCallTreeFuncArgs, (result: any[]) => {
         this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
+        this.frameChart!.data = this.fsCallTreeDataSource;
         if (this.isChartShow) this.frameChart?.calculateChartData();
-        this.tbl!.move1px();
-        if (this.currentSelectedData) {
-          this.currentSelectedData.isSelected = false;
-          this.tbl?.clearAllSelection(this.currentSelectedData);
-          this.tbr!.recycleDataSource = [];
-          this.currentSelectedData = undefined;
+        this.fsCallTreeTbl!.move1px();
+        if (this.fsCallTreeCurrentSelectedData) {
+          this.fsCallTreeCurrentSelectedData.isSelected = false;
+          this.fsCallTreeTbl?.clearAllSelection(this.fsCallTreeCurrentSelectedData);
+          this.fsCallTreeTbr!.recycleDataSource = [];
+          this.fsCallTreeCurrentSelectedData = undefined;
         }
       });
     };
-    this.filter!.getDataLibrary(filterFunc);
-    this.filter!.getDataMining(filterFunc);
-    this.filter!.getCallTreeData((data: any) => {
+    this.fsCallTreeFilter!.getDataLibrary(filterFunc);
+    this.fsCallTreeFilter!.getDataMining(filterFunc);
+    this.fsCallTreeFilter!.getCallTreeData((data: any) => {
       if (data.value == 0) {
         this.refreshAllNode({
-          ...this.filter!.getFilterTreeData(),
+          ...this.fsCallTreeFilter!.getFilterTreeData(),
           callTree: data.checks,
         });
       } else {
-        let args: any[] = [];
+        let fileSysCallTreeArgs: any[] = [];
         if (data.checks[1]) {
-          args.push({
+          fileSysCallTreeArgs.push({
             funcName: 'hideSystemLibrary',
             funcArgs: [],
           });
-          args.push({
+          fileSysCallTreeArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
         } else {
-          args.push({
+          fileSysCallTreeArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[this.systmeRuleName]],
           });
-          args.push({
+          fileSysCallTreeArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          fileSysCallTreeArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [this.systmeRuleName],
           });
         }
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(fileSysCallTreeArgs, (result: any[]) => {
           this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
+          this.frameChart!.data = this.fsCallTreeDataSource;
           if (this.isChartShow) this.frameChart?.calculateChartData();
         });
       }
     });
-    this.filter!.getCallTreeConstraintsData((data: any) => {
-      let args: any[] = [
+    this.fsCallTreeFilter!.getCallTreeConstraintsData((data: any) => {
+      let fsCallTreeConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
           funcArgs: [[this.numRuleName]],
@@ -356,24 +345,24 @@ export class TabpaneFilesystemCalltree extends BaseElement {
         },
       ];
       if (data.checked) {
-        args.push({
+        fsCallTreeConstraintsArgs.push({
           funcName: 'hideNumMaxAndMin',
           funcArgs: [parseInt(data.min), data.max],
         });
       }
-      args.push({
+      fsCallTreeConstraintsArgs.push({
         funcName: 'resetAllNode',
         funcArgs: [],
       });
-      this.getDataByWorker(args, (result: any[]) => {
+      this.getDataByWorker(fsCallTreeConstraintsArgs, (result: any[]) => {
         this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
+        this.frameChart!.data = this.fsCallTreeDataSource;
         if (this.isChartShow) this.frameChart?.calculateChartData();
       });
     });
-    this.filter!.getFilterData((data: FilterData) => {
-      if (this.searchValue != this.filter!.filterValue) {
-        this.searchValue = this.filter!.filterValue;
+    this.fsCallTreeFilter!.getFilterData((data: FilterData) => {
+      if (this.searchValue != this.fsCallTreeFilter!.filterValue) {
+        this.searchValue = this.fsCallTreeFilter!.filterValue;
         let args = [
           {
             funcName: 'setSearchValue',
@@ -386,21 +375,21 @@ export class TabpaneFilesystemCalltree extends BaseElement {
         ];
         this.getDataByWorker(args, (result: any[]) => {
           this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
+          this.frameChart!.data = this.fsCallTreeDataSource;
           this.switchFlameChart(data);
         });
       } else {
         this.switchFlameChart(data);
       }
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.fsCallTreeTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.fsCallTreeSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.fsCallTreeSortType = evt.detail.sort;
       // @ts-ignore
-      this.setLTableData(this.dataSource);
-      this.frameChart!.data = this.dataSource;
+      this.setLTableData(this.fsCallTreeDataSource);
+      this.frameChart!.data = this.fsCallTreeDataSource;
     });
   }
 
@@ -408,16 +397,16 @@ export class TabpaneFilesystemCalltree extends BaseElement {
     super.connectedCallback();
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let fsCallTreeTabFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
+      if (fsCallTreeTabFilter.clientHeight > 0) filterHeight = fsCallTreeTabFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        fsCallTreeTabFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        fsCallTreeTabFilter.style.display = 'none';
       }
-      this.modal!.style.height = this.tbl!.clientHeight - 2 + 'px'; //2 is borderWidth
-      if (this.tbl!.style.visibility == 'hidden') {
-        tabPaneFilter.style.display = 'none';
+      this.modal!.style.height = this.fsCallTreeTbl!.clientHeight - 2 + 'px'; //2 is borderWidth
+      if (this.fsCallTreeTbl!.style.visibility == 'hidden') {
+        fsCallTreeTabFilter.style.display = 'none';
       }
       if (this.parentElement?.clientHeight != 0) {
         if (this.isChartShow) {
@@ -425,11 +414,11 @@ export class TabpaneFilesystemCalltree extends BaseElement {
           this.frameChart?.calculateChartData();
         }
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.fsCallTreeTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
+        this.fsCallTreeTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
-        this.tbr?.reMeauseHeight();
+        this.fsCallTreeTbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
+        this.fsCallTreeTbr?.reMeauseHeight();
         this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
@@ -439,109 +428,109 @@ export class TabpaneFilesystemCalltree extends BaseElement {
   }
 
   switchFlameChart(data: any) {
-    let pageTab = this.shadowRoot?.querySelector('#show_table');
-    let pageChart = this.shadowRoot?.querySelector('#show_chart');
+    let fsCallTreePageTab = this.shadowRoot?.querySelector('#show_table');
+    let fsCallTreePageChart = this.shadowRoot?.querySelector('#show_chart');
     if (data.icon == 'block') {
-      pageChart?.setAttribute('class', 'show');
-      pageTab?.setAttribute('class', '');
+      fsCallTreePageChart?.setAttribute('class', 'show');
+      fsCallTreePageTab?.setAttribute('class', '');
       this.isChartShow = true;
-      this.filter!.disabledMining = true;
-      this.showButtomMenu(this.needShowMenu);
-      this.frameChart!.data = this.dataSource;
+      this.fsCallTreeFilter!.disabledMining = true;
+      showButtonMenu(this.fsCallTreeFilter, this.needShowMenu);
+      this.frameChart!.data = this.fsCallTreeDataSource;
       this.frameChart?.calculateChartData();
     } else if (data.icon == 'tree') {
-      pageChart?.setAttribute('class', '');
-      pageTab?.setAttribute('class', 'show');
-      this.showButtomMenu(true);
+      fsCallTreePageChart?.setAttribute('class', '');
+      fsCallTreePageTab?.setAttribute('class', 'show');
+      showButtonMenu(this.fsCallTreeFilter, true);
       this.isChartShow = false;
-      this.filter!.disabledMining = false;
+      this.fsCallTreeFilter!.disabledMining = false;
       this.frameChart!.clearCanvas();
-      this.tbl!.reMeauseHeight();
+      this.fsCallTreeTbl!.reMeauseHeight();
     }
   }
 
   refreshAllNode(filterData: any) {
-    let args: any[] = [];
+    let fileSysCallTreeArgs: any[] = [];
     let isTopDown: boolean = !filterData.callTree[0];
     let isHideSystemLibrary = filterData.callTree[1];
     let list = filterData.dataMining.concat(filterData.dataLibrary);
-    args.push({
+    fileSysCallTreeArgs.push({
       funcName: 'getCallChainsBySampleIds',
       funcArgs: [isTopDown, 'fileSystem'],
     });
-    this.tbr!.recycleDataSource = [];
+    this.fsCallTreeTbr!.recycleDataSource = [];
     if (isHideSystemLibrary) {
-      args.push({
+      fileSysCallTreeArgs.push({
         funcName: 'hideSystemLibrary',
         funcArgs: [],
       });
     }
     if (filterData.callTreeConstraints.checked) {
-      args.push({
+      fileSysCallTreeArgs.push({
         funcName: 'hideNumMaxAndMin',
         funcArgs: [parseInt(filterData.callTreeConstraints.inputs[0]), filterData.callTreeConstraints.inputs[1]],
       });
     }
-    args.push({
+    fileSysCallTreeArgs.push({
       funcName: 'splitAllProcess',
       funcArgs: [list],
     });
-    args.push({
+    fileSysCallTreeArgs.push({
       funcName: 'resetAllNode',
       funcArgs: [],
     });
-    this.getDataByWorker(args, (result: any[]) => {
+    this.getDataByWorker(fileSysCallTreeArgs, (result: any[]) => {
       this.setLTableData(result);
-      this.frameChart!.data = this.dataSource;
+      this.frameChart!.data = this.fsCallTreeDataSource;
       if (this.isChartShow) this.frameChart?.calculateChartData();
     });
   }
 
   setLTableData(resultData: any[]) {
-    this.dataSource = this.sortTree(resultData);
-    this.tbl!.recycleDataSource = this.dataSource;
+    this.fsCallTreeDataSource = this.sortTree(resultData);
+    this.fsCallTreeTbl!.recycleDataSource = this.fsCallTreeDataSource;
   }
 
   sortTree(arr: Array<any>): Array<any> {
-    let sortArr = arr.sort((a, b) => {
-      if (this.sortKey == 'self') {
-        if (this.sortType == 0) {
-          return b.dur - a.dur;
-        } else if (this.sortType == 1) {
-          return a.selfDur - b.selfDur;
+    let fsCallTreeSortArr = arr.sort((fsCallTreeA, fsCallTreeB) => {
+      if (this.fsCallTreeSortKey == 'self') {
+        if (this.fsCallTreeSortType == 0) {
+          return fsCallTreeB.dur - fsCallTreeA.dur;
+        } else if (this.fsCallTreeSortType == 1) {
+          return fsCallTreeA.selfDur - fsCallTreeB.selfDur;
         } else {
-          return b.selfDur - a.selfDur;
+          return fsCallTreeB.selfDur - fsCallTreeA.selfDur;
         }
       } else {
-        if (this.sortType == 0) {
-          return b.dur - a.dur;
-        } else if (this.sortType == 1) {
-          return a.dur - b.dur;
+        if (this.fsCallTreeSortType == 0) {
+          return fsCallTreeB.dur - fsCallTreeA.dur;
+        } else if (this.fsCallTreeSortType == 1) {
+          return fsCallTreeA.dur - fsCallTreeB.dur;
         } else {
-          return b.dur - a.dur;
+          return fsCallTreeB.dur - fsCallTreeA.dur;
         }
       }
     });
-    sortArr.map((call) => {
+    fsCallTreeSortArr.map((call) => {
       call.children = this.sortTree(call.children);
     });
-    return sortArr;
+    return fsCallTreeSortArr;
   }
 
   getDataByWorker(args: any[], handler: Function) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
+    this.fsCallTreeProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
     procedurePool.submitWithName(
       'logic0',
       'fileSystem-action',
       { args, callType: 'fileSystem' },
       undefined,
-      (results: any) => {
-        handler(results);
+      (fsCallTreeResults: any) => {
+        handler(fsCallTreeResults);
         this.loadingList.splice(0, 1);
         if (this.loadingList.length == 0) {
-          this.progressEL!.loading = false;
+          this.fsCallTreeProgressEL!.loading = false;
           this.loadingPage.style.visibility = 'hidden';
         }
       }
@@ -556,7 +545,7 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        tab-pane-filter {
+        .fs-call-tree-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -570,14 +559,14 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             display: flex;
             flex: 1;
         }
-        .progress{
+        .fs-call-tree-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .fs-call-tree-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -587,41 +576,41 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             z-index: 999999;
         }
     </style>
-    <div style="display: flex;flex-direction: row">
+    <div class="fs-call-tree-content" style="display: flex;flex-direction: row">
     
     <selector id='show_table' class="show">
         <lit-slicer style="width:100%">
         <div id="left_table" style="width: 65%">
             <tab-native-data-modal id="modal"></tab-native-data-modal>
             <lit-table id="tb-filesystem-calltree" style="height: auto" tree>
-                <lit-table-column width="70%" title="Call Stack" data-index="symbolName" key="symbolName"  align="flex-start" ></lit-table-column>
-                <lit-table-column width="1fr" title="Local" data-index="self" key="self"  align="flex-start"  order></lit-table-column>
-                <lit-table-column width="1fr" title="Weight" data-index="weight" key="weight"  align="flex-start"  order></lit-table-column>
-                <lit-table-column width="1fr" title="%" data-index="weightPercent" key="weightPercent"  align="flex-start"  order></lit-table-column>
+                <lit-table-column class="fs-call-tree-column" width="70%" title="Call Stack" data-index="symbolName" key="symbolName"  align="flex-start" ></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>
             </lit-table>
             
         </div>
         <lit-slicer-track ></lit-slicer-track>
         <lit-table id="tb-filesystem-list" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
             <span slot="head">Heaviest Stack Trace</span>
-            <lit-table-column width="30px" title="" data-index="type" key="type"  align="flex-start" >
+            <lit-table-column class="fs-call-tree-column" width="30px" title="" data-index="type" key="type"  align="flex-start" >
                 <template>
                     <img src="img/library.png" size="20" v-if=" type == 1 ">
                     <img src="img/function.png" size="20" v-if=" type == 0 ">
                 </template>
             </lit-table-column>
-            <lit-table-column width="60px" title="" data-index="count" key="count"  align="flex-start"></lit-table-column>
-            <lit-table-column width="1fr" title="" data-index="symbolName" key="symbolName"  align="flex-start"></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>
         </div>
         </lit-slicer>
      </selector>
-     <tab-pane-filter id="filter" input inputLeftText icon tree></tab-pane-filter>
-     <lit-progress-bar class="progress"></lit-progress-bar>
-    <selector id='show_chart'>
+     <tab-pane-filter id="filter" class="fs-call-tree-filter" input inputLeftText icon tree></tab-pane-filter>
+     <lit-progress-bar class="progress fs-call-tree-progress"></lit-progress-bar>
+    <selector id='show_chart' class="fs-call-tree-selector" >
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>  
-    <div class="loading"></div>
+    <div class="loading fs-call-tree-loading"></div>
     </div>`;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.ts
index de139112a8261ea458ed4d106f96908638b44892..ce5f6e341bb6636e340aeecafa8ded6a17857be6 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.ts
@@ -24,16 +24,16 @@ import { procedurePool } from '../../../../database/Procedure.js';
 
 @element('tabpane-filesystem-desc-history')
 export class TabPaneFileSystemDescHistory extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tblData: LitTable | null | undefined;
-  private filter: TabPaneFilter | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private loadingList: number[] = [];
-  private loadingPage: any;
-  private source: Array<FileSysEvent> = [];
-  private filterSource: Array<FileSysEvent> = [];
-  private sortKey: string = 'startTs';
-  private sortType: number = 0;
+  private fsDescHistoryTbl: LitTable | null | undefined;
+  private fsDescHistoryTblData: LitTable | null | undefined;
+  private fsDescHistoryFilter: TabPaneFilter | null | undefined;
+  private fsDescHistoryProgressEL: LitProgressBar | null | undefined;
+  private fsDescHistoryLoadingList: number[] = [];
+  private fsDescHistoryLoadingPage: any;
+  private fsDescHistorySource: Array<FileSysEvent> = [];
+  private fsDescHistoryFilterSource: Array<FileSysEvent> = [];
+  private fsDescHistorySortKey: string = 'startTs';
+  private fsDescHistorySortType: number = 0;
   private filterEventType: string = '0';
   private filterProcess: string = '0';
   private filterPath: string = '0';
@@ -42,43 +42,43 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
   private processList: string[] | null | undefined;
   private pathList: string[] | null | undefined;
 
-  set data(val: SelectionParam | null | undefined) {
-    if (val == this.currentSelection) {
+  set data(fsDescHistorySelection: SelectionParam | null | undefined) {
+    if (fsDescHistorySelection == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
+    this.currentSelection = fsDescHistorySelection;
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.fsDescHistoryTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
-    this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
-    this.tbl!.recycleDataSource = [];
-    this.tblData!.recycleDataSource = [];
-    if (val) {
-      this.loadingList.push(1);
-      this.progressEL!.loading = true;
-      this.loadingPage.style.visibility = 'visible';
-      this.source = [];
+    this.fsDescHistoryTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.fsDescHistoryTbl!.recycleDataSource = [];
+    this.fsDescHistoryTblData!.recycleDataSource = [];
+    if (fsDescHistorySelection) {
+      this.fsDescHistoryLoadingList.push(1);
+      this.fsDescHistoryProgressEL!.loading = true;
+      this.fsDescHistoryLoadingPage.style.visibility = 'visible';
+      this.fsDescHistorySource = [];
       procedurePool.submitWithName(
         'logic0',
         'fileSystem-queryFileSysEvents',
         {
-          leftNs: val.leftNs,
-          rightNs: val.rightNs,
+          leftNs: fsDescHistorySelection.leftNs,
+          rightNs: fsDescHistorySelection.rightNs,
           typeArr: [0, 1],
           tab: 'history',
         },
         undefined,
         (res: any) => {
-          this.source = this.source.concat(res.data);
+          this.fsDescHistorySource = this.fsDescHistorySource.concat(res.data);
           res.data = null;
           if (!res.isSending) {
-            this.tbl!.recycleDataSource = this.source;
-            this.filterSource = this.source;
+            this.fsDescHistoryTbl!.recycleDataSource = this.fsDescHistorySource;
+            this.fsDescHistoryFilterSource = this.fsDescHistorySource;
             this.setProcessFilter();
-            this.loadingList.splice(0, 1);
-            if (this.loadingList.length == 0) {
-              this.progressEL!.loading = false;
-              this.loadingPage.style.visibility = 'hidden';
+            this.fsDescHistoryLoadingList.splice(0, 1);
+            if (this.fsDescHistoryLoadingList.length == 0) {
+              this.fsDescHistoryProgressEL!.loading = false;
+              this.fsDescHistoryLoadingPage.style.visibility = 'hidden';
             }
           }
         }
@@ -89,18 +89,18 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
   setProcessFilter() {
     this.processList = ['All Process'];
     this.pathList = ['All Path'];
-    this.source.map((it) => {
-      if (this.processList!.findIndex((a) => a === it.process) == -1) {
-        this.processList!.push(it.process);
+    this.fsDescHistorySource.map((historyItem) => {
+      if (this.processList!.findIndex((processItem) => processItem === historyItem.process) == -1) {
+        this.processList!.push(historyItem.process);
       }
-      if (this.pathList!.findIndex((a) => a === it.path) == -1) {
-        this.pathList!.push(it.path);
+      if (this.pathList!.findIndex((pathItem) => pathItem === historyItem.path) == -1) {
+        this.pathList!.push(historyItem.path);
       }
     });
-    this.filter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
-    this.filter!.firstSelect = '0';
-    this.filter!.secondSelect = '0';
-    this.filter!.thirdSelect = '0';
+    this.fsDescHistoryFilter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
+    this.fsDescHistoryFilter!.firstSelect = '0';
+    this.fsDescHistoryFilter!.secondSelect = '0';
+    this.fsDescHistoryFilter!.thirdSelect = '0';
     this.filterProcess = '0';
     this.filterPath = '0';
     this.filterEventType = '0';
@@ -109,33 +109,33 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
   filterData() {
     let pfv = parseInt(this.filterProcess);
     let pathIndex = parseInt(this.filterPath);
-    this.filterSource = this.source.filter((it) => {
+    this.fsDescHistoryFilterSource = this.fsDescHistorySource.filter((fsHistoryEvent) => {
       let pathFilter = true;
       let eventFilter = true;
       let processFilter = true;
       if (this.filterPath != '0') {
-        pathFilter = it.path == this.pathList![pathIndex];
+        pathFilter = fsHistoryEvent.path == this.pathList![pathIndex];
       }
       if (this.filterEventType == '1') {
-        eventFilter = it.type == 0;
+        eventFilter = fsHistoryEvent.type == 0;
       } else if (this.filterEventType == '2') {
-        eventFilter = it.type == 1;
+        eventFilter = fsHistoryEvent.type == 1;
       }
       if (this.filterProcess != '0') {
-        processFilter = it.process == this.processList![pfv];
+        processFilter = fsHistoryEvent.process == this.processList![pfv];
       }
       return pathFilter && eventFilter && processFilter;
     });
-    this.tblData!.recycleDataSource = [];
-    this.sortTable(this.sortKey, this.sortType);
+    this.fsDescHistoryTblData!.recycleDataSource = [];
+    this.sortFsDescHistoryTable(this.fsDescHistorySortKey, this.fsDescHistorySortType);
   }
 
   initElements(): void {
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl');
-    this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.fsDescHistoryLoadingPage = this.shadowRoot?.querySelector('.filesystem-desc-history-loading');
+    this.fsDescHistoryProgressEL = this.shadowRoot?.querySelector('.filesystem-desc-history-progress') as LitProgressBar;
+    this.fsDescHistoryTbl = this.shadowRoot?.querySelector<LitTable>('#tbl-file-system-desc-history');
+    this.fsDescHistoryTblData = this.shadowRoot?.querySelector<LitTable>('#tbr-file-system-desc-history');
+    this.fsDescHistoryTbl!.addEventListener('row-click', (e) => {
       // @ts-ignore
       let data = e.detail.data as FileSysEvent;
       (data as any).isSelected = true;
@@ -150,25 +150,25 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
         { callchainId: data.callchainId },
         undefined,
         (res: any) => {
-          this.tblData!.recycleDataSource = res;
+          this.fsDescHistoryTblData!.recycleDataSource = res;
         }
       );
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.fsDescHistoryTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.fsDescHistorySortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.fsDescHistorySortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortFsDescHistoryTable(evt.detail.key, evt.detail.sort);
     });
-    this.filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    this.fsDescHistoryFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#filesystem-desc-history-filter');
     this.eventList = ['All FD Event', 'All Open Event', 'All Close Event'];
     this.processList = ['All Process'];
     this.pathList = ['All Path'];
-    this.filter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
-    this.filter!.firstSelect = '0';
-    this.filter!.getFilterData((data: FilterData) => {
+    this.fsDescHistoryFilter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
+    this.fsDescHistoryFilter!.firstSelect = '0';
+    this.fsDescHistoryFilter!.getFilterData((data: FilterData) => {
       this.filterEventType = data.firstSelect || '0';
       this.filterProcess = data.secondSelect || '0';
       this.filterPath = data.thirdSelect || '0';
@@ -181,61 +181,61 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.fsDescHistoryTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
+        this.fsDescHistoryTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        this.tblData?.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
+        this.fsDescHistoryTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
+        this.fsDescHistoryTblData?.reMeauseHeight();
+        this.fsDescHistoryLoadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
 
-  sortTable(key: string, type: number) {
+  sortFsDescHistoryTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.filterSource;
+      this.fsDescHistoryTbl!.recycleDataSource = this.fsDescHistoryFilterSource;
     } else {
-      let arr = Array.from(this.filterSource);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.fsDescHistoryFilterSource);
+      arr.sort((fsHistoryA, fsHistoryB): number => {
         if (key == 'startTsStr') {
           if (type == 1) {
-            return a.startTs - b.startTs;
+            return fsHistoryA.startTs - fsHistoryB.startTs;
           } else {
-            return b.startTs - a.startTs;
+            return fsHistoryB.startTs - fsHistoryA.startTs;
           }
         } else if (key == 'durStr') {
           if (type == 1) {
-            return a.dur - b.dur;
+            return fsHistoryA.dur - fsHistoryB.dur;
           } else {
-            return b.dur - a.dur;
+            return fsHistoryB.dur - fsHistoryA.dur;
           }
         } else if (key == 'process') {
-          if (a.process > b.process) {
+          if (fsHistoryA.process > fsHistoryB.process) {
             return type === 2 ? 1 : -1;
-          } else if (a.process == b.process) {
+          } else if (fsHistoryA.process == fsHistoryB.process) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'typeStr') {
-          if (a.typeStr > b.typeStr) {
+          if (fsHistoryA.typeStr > fsHistoryB.typeStr) {
             return type === 2 ? 1 : -1;
-          } else if (a.typeStr == b.typeStr) {
+          } else if (fsHistoryA.typeStr == fsHistoryB.typeStr) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'fd') {
           if (type == 1) {
-            return a.fd - b.fd;
+            return fsHistoryA.fd - fsHistoryB.fd;
           } else {
-            return b.fd - a.fd;
+            return fsHistoryB.fd - fsHistoryA.fd;
           }
         } else {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.fsDescHistoryTbl!.recycleDataSource = arr;
     }
   }
 
@@ -247,7 +247,7 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .loading{
+        .filesystem-desc-history-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -256,7 +256,7 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
-        .progress{
+        .filesystem-desc-history-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -272,18 +272,18 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
             width: 100%;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="fs-history-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row">
                 <lit-slicer style="width:100%">
                     <div style="width: 65%">
-                        <lit-table id="tbl" style="height: auto">
-                            <lit-table-column width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="160px" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="120px" title="Type" data-index="typeStr" key="typeStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="160px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="300px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
+                        <lit-table id="tbl-file-system-desc-history" style="height: auto">
+                            <lit-table-column class="fs-history-column" width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-history-column"width="160px" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-history-column"width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-history-column"width="120px" title="Type" data-index="typeStr" key="typeStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-history-column"width="160px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-history-column"width="300px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-history-column"width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
                                 <template>
                                     <div>
                                         <span>{{backtrace[0]}}</span>
@@ -295,22 +295,22 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
-                    <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                        <lit-table-column width="60px" title="" data-index="type" key="type"  align="flex-start" >
+                    <lit-table id="tbr-file-system-desc-history" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
+                        <lit-table-column class="fs-history-column"width="60px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <div v-if=" type == -1 ">Thread:</div>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
                             </template>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
+                        <lit-table-column class="fs-history-column"width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter" first second></tab-pane-filter>
-            <div class="loading"></div>
+            <lit-progress-bar class="filesystem-desc-history-progress"></lit-progress-bar>
+            <tab-pane-filter id="filesystem-desc-history-filter" first second></tab-pane-filter>
+            <div class="filesystem-desc-history-loading"></div>
         </div>
 `;
   }
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 84aa6601d71a5cb37de174396a37bdb2d44b5ce9..aa3d9c2c22b7b7e2faf1e7a486d3ef83cffe1509 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
@@ -23,52 +23,52 @@ import { procedurePool } from '../../../../database/Procedure.js';
 
 @element('tabpane-filesystem-desc-time-slice')
 export class TabPaneFileSystemDescTimeSlice extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tblData: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private loadingList: number[] = [];
-  private loadingPage: any;
-  private source: Array<FileSysEvent> = [];
-  private sortKey: string = 'startTs';
-  private sortType: number = 0;
+  private fsDescTimeSliceTbl: LitTable | null | undefined;
+  private fsDescTimeSliceTblData: LitTable | null | undefined;
+  private fsDescTimeSliceProgressEL: LitProgressBar | null | undefined;
+  private fsDescTimeSliceLoadingList: number[] = [];
+  private fsDescTimeSliceLoadingPage: any;
+  private fsDescTimeSliceSource: Array<FileSysEvent> = [];
+  private fsDescTimeSliceSortKey: string = 'startTs';
+  private fsDescTimeSliceSortType: number = 0;
   private currentSelection: SelectionParam | undefined | null;
 
-  set data(val: SelectionParam | null | undefined) {
-    if (val == this.currentSelection) {
+  set data(fsDescTimeSliceSelection: SelectionParam | null | undefined) {
+    if (fsDescTimeSliceSelection == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
+    this.currentSelection = fsDescTimeSliceSelection;
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.fsDescTimeSliceTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
-    this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
-    this.tbl!.recycleDataSource = [];
-    this.tblData!.recycleDataSource = [];
-    if (val) {
-      this.loadingList.push(1);
-      this.progressEL!.loading = true;
-      this.loadingPage.style.visibility = 'visible';
+    this.fsDescTimeSliceTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.fsDescTimeSliceTbl!.recycleDataSource = [];
+    this.fsDescTimeSliceTblData!.recycleDataSource = [];
+    if (fsDescTimeSliceSelection) {
+      this.fsDescTimeSliceLoadingList.push(1);
+      this.fsDescTimeSliceProgressEL!.loading = true;
+      this.fsDescTimeSliceLoadingPage.style.visibility = 'visible';
       let startNs = (window as any).recordStartNS ?? 0;
-      this.source = [];
+      this.fsDescTimeSliceSource = [];
       procedurePool.submitWithName(
         'logic0',
         'fileSystem-queryFileSysEvents',
         {
-          leftNs: startNs + val.leftNs,
-          rightNs: startNs + val.rightNs,
+          leftNs: startNs + fsDescTimeSliceSelection.leftNs,
+          rightNs: startNs + fsDescTimeSliceSelection.rightNs,
           typeArr: [0],
           tab: 'time-slice',
         },
         undefined,
         (res: any) => {
-          this.source = this.source.concat(res.data);
+          this.fsDescTimeSliceSource = this.fsDescTimeSliceSource.concat(res.data);
           res.data = null;
           if (!res.isSending) {
-            this.tbl!.recycleDataSource = this.source;
-            this.loadingList.splice(0, 1);
-            if (this.loadingList.length == 0) {
-              this.progressEL!.loading = false;
-              this.loadingPage.style.visibility = 'hidden';
+            this.fsDescTimeSliceTbl!.recycleDataSource = this.fsDescTimeSliceSource;
+            this.fsDescTimeSliceLoadingList.splice(0, 1);
+            if (this.fsDescTimeSliceLoadingList.length == 0) {
+              this.fsDescTimeSliceProgressEL!.loading = false;
+              this.fsDescTimeSliceLoadingPage.style.visibility = 'hidden';
             }
           }
         }
@@ -77,18 +77,18 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
   }
 
   initElements(): void {
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl');
-    this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.fsDescTimeSliceLoadingPage = this.shadowRoot?.querySelector('.loading');
+    this.fsDescTimeSliceProgressEL = this.shadowRoot?.querySelector('.fs-slice-progress') as LitProgressBar;
+    this.fsDescTimeSliceTbl = this.shadowRoot?.querySelector<LitTable>('#tbl-filesystem-desc-time-slice');
+    this.fsDescTimeSliceTblData = this.shadowRoot?.querySelector<LitTable>('#tbr-filesystem-desc-time-slice');
+    this.fsDescTimeSliceTbl!.addEventListener('row-click', (fsTimeSliceRowClickEvent) => {
       // @ts-ignore
-      let data = e.detail.data as FileSysEvent;
+      let data = fsTimeSliceRowClickEvent.detail.data as FileSysEvent;
       (data as any).isSelected = true;
       // @ts-ignore
-      if ((e.detail as any).callBack) {
+      if ((fsTimeSliceRowClickEvent.detail as any).callBack) {
         // @ts-ignore
-        (e.detail as any).callBack(true);
+        (fsTimeSliceRowClickEvent.detail as any).callBack(true);
       }
       procedurePool.submitWithName(
         'logic0',
@@ -96,17 +96,17 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
         { callchainId: data.callchainId },
         undefined,
         (res: any) => {
-          this.tblData!.recycleDataSource = res;
+          this.fsDescTimeSliceTblData!.recycleDataSource = res;
         }
       );
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.fsDescTimeSliceTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.fsDescTimeSliceSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.fsDescTimeSliceSortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortFsDescTimeSliceTable(evt.detail.key, evt.detail.sort);
     });
   }
 
@@ -115,53 +115,53 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.fsDescTimeSliceTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
+        this.fsDescTimeSliceTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        this.tblData?.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
+        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!);
   }
 
-  sortTable(key: string, type: number) {
+  sortFsDescTimeSliceTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.fsDescTimeSliceTbl!.recycleDataSource = this.fsDescTimeSliceSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.fsDescTimeSliceSource);
+      arr.sort((fsTimeSliceA, fsTimeSliceB): number => {
         if (key == 'startTsStr') {
           if (type == 1) {
-            return a.startTs - b.startTs;
+            return fsTimeSliceA.startTs - fsTimeSliceB.startTs;
           } else {
-            return b.startTs - a.startTs;
+            return fsTimeSliceB.startTs - fsTimeSliceA.startTs;
           }
         } else if (key == 'durStr') {
           if (type == 1) {
-            return a.dur - b.dur;
+            return fsTimeSliceA.dur - fsTimeSliceB.dur;
           } else {
-            return b.dur - a.dur;
+            return fsTimeSliceB.dur - fsTimeSliceA.dur;
           }
         } else if (key == 'process') {
-          if (a.process > b.process) {
+          if (fsTimeSliceA.process > fsTimeSliceB.process) {
             return type === 2 ? 1 : -1;
-          } else if (a.process == b.process) {
+          } else if (fsTimeSliceA.process == fsTimeSliceB.process) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'fd') {
           if (type == 1) {
-            return a.fd - b.fd;
+            return fsTimeSliceA.fd - fsTimeSliceB.fd;
           } else {
-            return b.fd - a.fd;
+            return fsTimeSliceB.fd - fsTimeSliceA.fd;
           }
         } else {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.fsDescTimeSliceTbl!.recycleDataSource = arr;
     }
   }
 
@@ -173,7 +173,7 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .loading{
+        .fs-slice-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -182,7 +182,7 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
-        .progress{
+        .fs-slice-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -190,7 +190,7 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
             left: 0;
             right: 0;
         }
-        tab-pane-filter {
+        #fs-slice-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -198,17 +198,17 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
             width: 100%;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="fs-slice-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row">
                 <lit-slicer style="width:100%">
                     <div style="width: 65%">
-                        <lit-table id="tbl" style="height: auto">
-                            <lit-table-column width="200px" title="Open Time" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Open Duration" data-index="durStr" key="surStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="160px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="300px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
+                        <lit-table id="tbl-filesystem-desc-time-slice" style="height: auto">
+                            <lit-table-column class="fs-slice-column" width="200px" title="Open Time" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-slice-column" width="200px" title="Open Duration" data-index="durStr" key="surStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-slice-column" width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-slice-column" width="160px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-slice-column" width="300px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-slice-column" width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
                                 <template>
                                     <div>
                                         <span>{{backtrace[0]}}</span>
@@ -220,22 +220,22 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
-                    <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                        <lit-table-column width="60px" title="" data-index="type" key="type"  align="flex-start" >
+                    <lit-table id="tbr-filesystem-desc-time-slice" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
+                        <lit-table-column class="fs-slice-column" width="60px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <div v-if=" type == -1 ">Thread:</div>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
                             </template>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
+                        <lit-table-column class="fs-slice-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter"></tab-pane-filter>
-            <div class="loading"></div>
+            <lit-progress-bar class="progress fs-slice-progress"></lit-progress-bar>
+            <tab-pane-filter id="fs-slice-filter"></tab-pane-filter>
+            <div class="loading fs-slice-loading"></div>
         </div>
 `;
   }
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 7dde9be75078f5cb1321cb7fd9738797d58e130f..b1a8ae3ba6bf5cfe20f3a49f3790fe24e817e0d2 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
@@ -25,16 +25,16 @@ import '../TabPaneFilter.js';
 
 @element('tabpane-filesystem-event')
 export class TabPaneFileSystemEvents extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tblData: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private filter: TabPaneFilter | null | undefined;
-  private loadingList: number[] = [];
+  private fsSysEventTbl: LitTable | null | undefined;
+  private fsSysEventTblData: LitTable | null | undefined;
+  private fsSysEventProgressEL: LitProgressBar | null | undefined;
+  private fsSysEventFilter: TabPaneFilter | null | undefined;
+  private fsSysEventLoadingList: number[] = [];
   private loadingPage: any;
-  private source: Array<FileSysEvent> = [];
-  private filterSource: Array<FileSysEvent> = [];
-  private sortKey: string = 'startTs';
-  private sortType: number = 0;
+  private fsSysEventSource: Array<FileSysEvent> = [];
+  private fsSysEventFilterSource: Array<FileSysEvent> = [];
+  private fsSysEventSortKey: string = 'startTs';
+  private fsSysEventSortType: number = 0;
   private currentSelection: SelectionParam | undefined | null;
   private filterEventType: string = '0';
   private filterProcess: string = '0';
@@ -43,47 +43,47 @@ export class TabPaneFileSystemEvents extends BaseElement {
   private processList: string[] | null | undefined;
   private pathList: string[] | null | undefined;
 
-  set data(val: SelectionParam | null | undefined) {
-    if (val == this.currentSelection) {
+  set data(fsSysEventSelection: SelectionParam | null | undefined) {
+    if (fsSysEventSelection == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
+    this.currentSelection = fsSysEventSelection;
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.fsSysEventTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
-    this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.fsSysEventTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     this.filterEventType = '0';
     this.filterProcess = '0';
-    this.queryData(val);
+    this.queryData(fsSysEventSelection);
   }
 
-  queryData(val: SelectionParam | null | undefined) {
-    this.tbl!.recycleDataSource = [];
-    this.tblData!.recycleDataSource = [];
-    if (val) {
-      this.loadingList.push(1);
-      this.progressEL!.loading = true;
+  queryData(fsEventParam: SelectionParam | null | undefined) {
+    this.fsSysEventTbl!.recycleDataSource = [];
+    this.fsSysEventTblData!.recycleDataSource = [];
+    if (fsEventParam) {
+      this.fsSysEventLoadingList.push(1);
+      this.fsSysEventProgressEL!.loading = true;
       this.loadingPage.style.visibility = 'visible';
-      this.source = [];
+      this.fsSysEventSource = [];
       procedurePool.submitWithName(
         'logic0',
         'fileSystem-queryFileSysEvents',
         {
-          leftNs: val.leftNs,
-          rightNs: val.rightNs,
-          typeArr: val.fileSystemType,
+          leftNs: fsEventParam.leftNs,
+          rightNs: fsEventParam.rightNs,
+          typeArr: fsEventParam.fileSystemType,
           tab: 'events',
         },
         undefined,
         (res: any) => {
-          this.source = this.source.concat(res.data);
+          this.fsSysEventSource = this.fsSysEventSource.concat(res.data);
           res.data = null;
           if (!res.isSending) {
             this.setProcessFilter();
             this.filterData();
-            this.loadingList.splice(0, 1);
-            if (this.loadingList.length == 0) {
-              this.progressEL!.loading = false;
+            this.fsSysEventLoadingList.splice(0, 1);
+            if (this.fsSysEventLoadingList.length == 0) {
+              this.fsSysEventProgressEL!.loading = false;
               this.loadingPage.style.visibility = 'hidden';
             }
           }
@@ -95,7 +95,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
   setProcessFilter() {
     this.processList = ['All Process'];
     this.pathList = ['All Path'];
-    this.source.map((it) => {
+    this.fsSysEventSource.map((it) => {
       if (this.processList!.findIndex((a) => a === it.process) == -1) {
         this.processList!.push(it.process);
       }
@@ -103,51 +103,51 @@ export class TabPaneFileSystemEvents extends BaseElement {
         this.pathList!.push(it.path);
       }
     });
-    this.filter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
+    this.fsSysEventFilter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
     if (this.filterProcess == '-1') {
       this.filterProcess =
         this.processList.indexOf(
           `${this.currentSelection?.fileSystemFsData.name}[${this.currentSelection?.fileSystemFsData.pid}]`
         ) + '';
     }
-    this.filter!.firstSelect = this.filterEventType;
-    this.filter!.secondSelect = this.filterProcess;
-    this.filter!.thirdSelect = this.filterPath;
+    this.fsSysEventFilter!.firstSelect = this.filterEventType;
+    this.fsSysEventFilter!.secondSelect = this.filterProcess;
+    this.fsSysEventFilter!.thirdSelect = this.filterPath;
   }
 
   filterData() {
     let pfv = parseInt(this.filterProcess);
     let pathIndex = parseInt(this.filterPath);
     let eventType = parseInt(this.filterEventType) - 1;
-    this.filterSource = this.source.filter((it) => {
+    this.fsSysEventFilterSource = this.fsSysEventSource.filter((fsEvent) => {
       let pathFilter = true;
-      let eventFilter = it.type == eventType || eventType == -1;
+      let eventFilter = fsEvent.type == eventType || eventType == -1;
       let processFilter = true;
       if (this.filterPath != '0') {
-        pathFilter = it.path == this.pathList![pathIndex];
+        pathFilter = fsEvent.path == this.pathList![pathIndex];
       }
       if (this.filterProcess != '0') {
-        processFilter = it.process == this.processList![pfv];
+        processFilter = fsEvent.process == this.processList![pfv];
       }
       return pathFilter && eventFilter && processFilter;
     });
-    this.tblData!.recycleDataSource = [];
-    this.sortTable(this.sortKey, this.sortType);
+    this.fsSysEventTblData!.recycleDataSource = [];
+    this.sortFsSysEventTable(this.fsSysEventSortKey, this.fsSysEventSortType);
   }
 
   initElements(): void {
     this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl');
-    this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.fsSysEventProgressEL = this.shadowRoot?.querySelector('.fs-event-progress') as LitProgressBar;
+    this.fsSysEventTbl = this.shadowRoot?.querySelector<LitTable>('#tbl-filesystem-event');
+    this.fsSysEventTblData = this.shadowRoot?.querySelector<LitTable>('#tbr-filesystem-event');
+    this.fsSysEventTbl!.addEventListener('row-click', (fsEventRowClick) => {
       // @ts-ignore
-      let data = e.detail.data as FileSysEvent;
+      let data = fsEventRowClick.detail.data as FileSysEvent;
       (data as any).isSelected = true;
       // @ts-ignore
-      if ((e.detail as any).callBack) {
+      if ((fsEventRowClick.detail as any).callBack) {
         // @ts-ignore
-        (e.detail as any).callBack(true);
+        (fsEventRowClick.detail as any).callBack(true);
       }
       procedurePool.submitWithName(
         'logic0',
@@ -155,25 +155,25 @@ export class TabPaneFileSystemEvents extends BaseElement {
         { callchainId: data.callchainId },
         undefined,
         (res: any) => {
-          this.tblData!.recycleDataSource = res;
+          this.fsSysEventTblData!.recycleDataSource = res;
         }
       );
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.fsSysEventTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.fsSysEventSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.fsSysEventSortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortFsSysEventTable(evt.detail.key, evt.detail.sort);
     });
-    this.filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    this.fsSysEventFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#fs-event-filter');
     this.eventList = ['All Event', 'All Open Event', 'All Close Event', 'All Read Event', 'All Write Event'];
     this.processList = ['All Process'];
     this.pathList = ['All Path'];
-    this.filter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
-    this.filter!.firstSelect = '0';
-    this.filter!.getFilterData((data: FilterData) => {
+    this.fsSysEventFilter!.setSelectList(this.eventList, this.processList, '', '', this.pathList, '');
+    this.fsSysEventFilter!.firstSelect = '0';
+    this.fsSysEventFilter!.getFilterData((data: FilterData) => {
       this.filterEventType = data.firstSelect || '0';
       this.filterProcess = data.secondSelect || '0';
       this.filterPath = data.thirdSelect || '0';
@@ -201,9 +201,9 @@ export class TabPaneFileSystemEvents extends BaseElement {
         this.filterProcess =
           this.processList?.indexOf(`${val.fileSystemFsData.name}[${val.fileSystemFsData.pid}]`) + '';
       }
-      this.filter!.firstSelect = this.filterEventType;
-      this.filter!.secondSelect = this.filterProcess;
-      this.filter!.thirdSelect = this.filterPath;
+      this.fsSysEventFilter!.firstSelect = this.filterEventType;
+      this.fsSysEventFilter!.secondSelect = this.filterProcess;
+      this.fsSysEventFilter!.thirdSelect = this.filterPath;
       this.filterData();
     } else {
       this.currentSelection = val;
@@ -216,68 +216,68 @@ export class TabPaneFileSystemEvents extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.fsSysEventTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
+        this.fsSysEventTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
-        this.tblData?.reMeauseHeight();
+        this.fsSysEventTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
+        this.fsSysEventTblData?.reMeauseHeight();
         this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
 
-  sortTable(key: string, type: number) {
+  sortFsSysEventTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.filterSource;
+      this.fsSysEventTbl!.recycleDataSource = this.fsSysEventFilterSource;
     } else {
-      let arr = Array.from(this.filterSource);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.fsSysEventFilterSource);
+      arr.sort((fsEventA, fsEventB): number => {
         if (key == 'startTsStr') {
           if (type == 1) {
-            return a.startTs - b.startTs;
+            return fsEventA.startTs - fsEventB.startTs;
           } else {
-            return b.startTs - a.startTs;
+            return fsEventB.startTs - fsEventA.startTs;
           }
         } else if (key == 'durStr') {
           if (type == 1) {
-            return a.dur - b.dur;
+            return fsEventA.dur - fsEventB.dur;
           } else {
-            return b.dur - a.dur;
+            return fsEventB.dur - fsEventA.dur;
           }
         } else if (key == 'process') {
-          if (a.process > b.process) {
+          if (fsEventA.process > fsEventB.process) {
             return type === 2 ? 1 : -1;
-          } else if (a.process == b.process) {
+          } else if (fsEventA.process == fsEventB.process) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'thread') {
-          if (a.thread > b.thread) {
+          if (fsEventA.thread > fsEventB.thread) {
             return type === 2 ? 1 : -1;
-          } else if (a.thread == b.thread) {
+          } else if (fsEventA.thread == fsEventB.thread) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'typeStr') {
-          if (a.typeStr > b.typeStr) {
+          if (fsEventA.typeStr > fsEventB.typeStr) {
             return type === 2 ? 1 : -1;
-          } else if (a.typeStr == b.typeStr) {
+          } else if (fsEventA.typeStr == fsEventB.typeStr) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'fd') {
           if (type == 1) {
-            return (a.fd || 0) - (b.fd || 0);
+            return (fsEventA.fd || 0) - (fsEventB.fd || 0);
           } else {
-            return (b.fd || 0) - (a.fd || 0);
+            return (fsEventB.fd || 0) - (fsEventA.fd || 0);
           }
         } else if (key == 'path') {
-          if (a.path > b.path) {
+          if (fsEventA.path > fsEventB.path) {
             return type === 2 ? 1 : -1;
-          } else if (a.path == b.path) {
+          } else if (fsEventA.path == fsEventB.path) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
@@ -286,7 +286,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.fsSysEventTbl!.recycleDataSource = arr;
     }
   }
 
@@ -298,7 +298,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .loading{
+        .fs-event-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -307,7 +307,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
-        .progress{
+        .fs-event-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -315,7 +315,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
             left: 0;
             right: 0;
         }
-        tab-pane-filter {
+        #fs-event-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -323,25 +323,25 @@ export class TabPaneFileSystemEvents extends BaseElement {
             width: 100%;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="fs-event-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row;">
                 <lit-slicer style="width:100%">
                     <div style="width: 65%">
-                        <lit-table id="tbl" style="height: auto">
-                            <lit-table-column width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="160px" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="240px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="240px" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="120px" title="Type" data-index="typeStr" key="typeStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="120px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="160px" title="File Path" data-index="path" key="path" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="160px" title="First Argument" data-index="firstArg" key="firstArg" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="160px" title="Second Argument" data-index="secondArg" key="secondArg" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="160px" title="Third Argument" data-index="thirdArg" key="thirdArg" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="160px" title="Fourth Argument" data-index="fourthArg" key="fourthArg" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="160px" title="Return" data-index="returnValue" key="returnValue" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="160px" title="Error" data-index="error" key="error" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
+                        <lit-table id="tbl-filesystem-event" style="height: auto">
+                            <lit-table-column class="fs-event-column" width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="240px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="240px" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="120px" title="Type" data-index="typeStr" key="typeStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="120px" title="File Descriptor" data-index="fd" key="fd" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="File Path" data-index="path" key="path" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="First Argument" data-index="firstArg" key="firstArg" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="Second Argument" data-index="secondArg" key="secondArg" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="Third Argument" data-index="thirdArg" key="thirdArg" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="Fourth Argument" data-index="fourthArg" key="fourthArg" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="Return" data-index="returnValue" key="returnValue" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="160px" title="Error" data-index="error" key="error" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="fs-event-column" width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
                                 <template>
                                     <div>
                                         <span>{{backtrace[0]}}</span>
@@ -353,22 +353,22 @@ export class TabPaneFileSystemEvents extends BaseElement {
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
-                    <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                        <lit-table-column width="60px" title="" data-index="type" key="type"  align="flex-start" >
+                    <lit-table id="tbr-filesystem-event" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
+                        <lit-table-column class="fs-event-column" width="60px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <div v-if=" type == -1 ">Thread:</div>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
                             </template>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
+                        <lit-table-column class="fs-event-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter" first second></tab-pane-filter>
-            <div class="loading"></div>
+            <lit-progress-bar class="progress fs-event-progress"></lit-progress-bar>
+            <tab-pane-filter id="fs-event-filter" first second></tab-pane-filter>
+            <div class="loading fs-event-loading"></div>
         </div>
 `;
   }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.ts
index cc4b6db0e98e520de4298dda50acfcd077205b2f..642c66dcd53b818ede34bec3b6fa3ca7d1ce288b 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.ts
@@ -22,43 +22,41 @@ import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressB
 
 @element('tabpane-file-statistics')
 export class TabPaneFileStatistics extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private loadDataInCache: boolean = true;
+  private fileStatisticsTbl: LitTable | null | undefined;
   private selectionParam: SelectionParam | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private loadingPage: any;
-  private loadingList: number[] = [];
-  private source: Array<any> = [];
+  private fileStatisticsProgressEL: LitProgressBar | null | undefined;
+  private fileStatisticsLoadingPage: any;
+  private fileStatisticsLoadingList: number[] = [];
+  private fileStatisticsSource: Array<any> = [];
   private typeList: Array<string> = ['OPEN', 'CLOSE', 'READ', 'WRITE'];
-  private sortKey: string = '';
-  private sortType: number = 0;
+  private fileStatisticsSortKey: string = '';
+  private fileStatisticsSortType: number = 0;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(fileStatisticsSelection: SelectionParam | any) {
+    if (fileStatisticsSelection == this.selectionParam) {
       return;
     }
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    this.selectionParam = val;
+    this.fileStatisticsProgressEL!.loading = true;
+    this.fileStatisticsLoadingPage.style.visibility = 'visible';
+    this.selectionParam = fileStatisticsSelection;
     // @ts-ignore
-    this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-    this.queryDataByDB(val);
+    this.fileStatisticsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
+    this.queryDataByDB(fileStatisticsSelection);
   }
 
   initElements(): void {
-    this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
-    this.loadingPage = this.shadowRoot!.querySelector('.loading');
-    this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.fileStatisticsProgressEL = this.shadowRoot!.querySelector<LitProgressBar>('.file-statistics-progress');
+    this.fileStatisticsLoadingPage = this.shadowRoot!.querySelector('.file-statistics-loading');
+    this.fileStatisticsTbl = this.shadowRoot!.querySelector<LitTable>('#tb-file-statistics');
+    this.fileStatisticsTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.fileStatisticsSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.fileStatisticsSortType = evt.detail.sort;
 
-      let newSource = JSON.parse(JSON.stringify(this.source));
-      if (this.sortType != 0 && newSource.length > 0) this.sortTable(newSource[0], this.sortKey);
-      this.tbl!.recycleDataSource = newSource;
+      let newSource = JSON.parse(JSON.stringify(this.fileStatisticsSource));
+      if (this.fileStatisticsSortType != 0 && newSource.length > 0) this.sortTable(newSource[0], this.fileStatisticsSortKey);
+      this.fileStatisticsTbl!.recycleDataSource = newSource;
     });
   }
 
@@ -67,9 +65,9 @@ export class TabPaneFileStatistics extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement!.clientHeight != 0) {
         // @ts-ignore
-        this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-        this.tbl!.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
+        this.fileStatisticsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
+        this.fileStatisticsTbl!.reMeauseHeight();
+        this.fileStatisticsLoadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
@@ -90,21 +88,21 @@ export class TabPaneFileStatistics extends BaseElement {
   }
 
   queryDataByDB(val: SelectionParam | any) {
-    this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+    this.fileStatisticsLoadingList.push(1);
+    this.fileStatisticsProgressEL!.loading = true;
+    this.fileStatisticsLoadingPage.style.visibility = 'visible';
     getTabPaneFilesystemStatistics(
       val.leftNs + val.recordStartNs,
       val.rightNs + val.recordStartNs,
       val.fileSystemType
     ).then((result) => {
-      this.loadingList.splice(0, 1);
-      if (this.loadingList.length == 0) {
-        this.progressEL!.loading = false;
-        this.loadingPage.style.visibility = 'hidden';
+      this.fileStatisticsLoadingList.splice(0, 1);
+      if (this.fileStatisticsLoadingList.length == 0) {
+        this.fileStatisticsProgressEL!.loading = false;
+        this.fileStatisticsLoadingPage.style.visibility = 'hidden';
       }
-      let fatherMap = new Map<any, any>();
-      let allNode: any = {
+      let fileStatisticsFatherMap = new Map<any, any>();
+      let fileStatisticsAllNode: any = {
         title: 'All',
         count: 0,
         logicalReads: 0,
@@ -117,18 +115,18 @@ export class TabPaneFileStatistics extends BaseElement {
         children: [],
       };
       result.forEach((item, idx) => {
-        if (fatherMap.has(item.type)) {
-          let obj1 = fatherMap.get(item.type);
-          obj1.count += item.count;
-          obj1.logicalReads += item.logicalReads;
-          obj1.logicalWrites += item.logicalWrites;
-          obj1.otherFile += item.otherFile;
-          obj1.allDuration += item.allDuration;
-          obj1.minDuration = obj1.minDuration <= item.minDuration ? obj1.minDuration : item.minDuration;
-          obj1.maxDuration = obj1.maxDuration >= item.maxDuration ? obj1.maxDuration : item.maxDuration;
-          obj1.children.push(this.getInitData(item));
+        if (fileStatisticsFatherMap.has(item.type)) {
+          let fileStatisticsObj = fileStatisticsFatherMap.get(item.type);
+          fileStatisticsObj.count += item.count;
+          fileStatisticsObj.logicalReads += item.logicalReads;
+          fileStatisticsObj.logicalWrites += item.logicalWrites;
+          fileStatisticsObj.otherFile += item.otherFile;
+          fileStatisticsObj.allDuration += item.allDuration;
+          fileStatisticsObj.minDuration = fileStatisticsObj.minDuration <= item.minDuration ? fileStatisticsObj.minDuration : item.minDuration;
+          fileStatisticsObj.maxDuration = fileStatisticsObj.maxDuration >= item.maxDuration ? fileStatisticsObj.maxDuration : item.maxDuration;
+          fileStatisticsObj.children.push(this.getInitData(item));
         } else {
-          fatherMap.set(item.type, {
+          fileStatisticsFatherMap.set(item.type, {
             type: item.type,
             count: item.count,
             logicalReads: item.logicalReads,
@@ -141,18 +139,18 @@ export class TabPaneFileStatistics extends BaseElement {
           });
         }
         if (idx == 0) {
-          allNode.minDuration = item.minDuration;
+          fileStatisticsAllNode.minDuration = item.minDuration;
         } else {
-          allNode.minDuration = allNode.minDuration <= item.minDuration ? allNode.minDuration : item.minDuration;
+          fileStatisticsAllNode.minDuration = fileStatisticsAllNode.minDuration <= item.minDuration ? fileStatisticsAllNode.minDuration : item.minDuration;
         }
-        allNode.count += item.count;
-        allNode.logicalReads += item.logicalReads;
-        allNode.logicalWrites += item.logicalWrites;
-        allNode.otherFile += item.otherFile;
-        allNode.allDuration += item.allDuration;
-        allNode.maxDuration = allNode.maxDuration >= item.maxDuration ? allNode.maxDuration : item.maxDuration;
+        fileStatisticsAllNode.count += item.count;
+        fileStatisticsAllNode.logicalReads += item.logicalReads;
+        fileStatisticsAllNode.logicalWrites += item.logicalWrites;
+        fileStatisticsAllNode.otherFile += item.otherFile;
+        fileStatisticsAllNode.allDuration += item.allDuration;
+        fileStatisticsAllNode.maxDuration = fileStatisticsAllNode.maxDuration >= item.maxDuration ? fileStatisticsAllNode.maxDuration : item.maxDuration;
       });
-      fatherMap.forEach((item) => {
+      fileStatisticsFatherMap.forEach((item) => {
         item.avgDuration = item.allDuration / item.count;
         let node = this.getInitData(item);
         if (item.type < 4) {
@@ -160,32 +158,32 @@ export class TabPaneFileStatistics extends BaseElement {
         } else {
           node.title = item.type;
         }
-        allNode.children.push(node);
+        fileStatisticsAllNode.children.push(node);
       });
-      allNode.avgDuration = allNode.allDuration / allNode.count;
-      allNode = this.getInitData(allNode);
-      allNode.title = 'All';
-      this.source = result.length > 0 ? [allNode] : [];
-      let newSource = JSON.parse(JSON.stringify(this.source));
-      if (this.sortType != 0 && result.length > 0) this.sortTable(newSource[0], this.sortKey);
-      this.tbl!.recycleDataSource = newSource;
+      fileStatisticsAllNode.avgDuration = fileStatisticsAllNode.allDuration / fileStatisticsAllNode.count;
+      fileStatisticsAllNode = this.getInitData(fileStatisticsAllNode);
+      fileStatisticsAllNode.title = 'All';
+      this.fileStatisticsSource = result.length > 0 ? [fileStatisticsAllNode] : [];
+      let newSource = JSON.parse(JSON.stringify(this.fileStatisticsSource));
+      if (this.fileStatisticsSortType != 0 && result.length > 0) this.sortTable(newSource[0], this.fileStatisticsSortKey);
+      this.fileStatisticsTbl!.recycleDataSource = newSource;
     });
   }
 
-  sortTable(allNode: any, key: string) {
-    allNode.children.sort((a: any, b: any) => {
-      if (this.sortType == 1) {
-        return a.node[key] - b.node[key];
-      } else if (this.sortType == 2) {
-        return b.node[key] - a.node[key];
+  sortTable(fileStatisticsAllNode: any, key: string) {
+    fileStatisticsAllNode.children.sort((fileStatisticsA: any, fileStatisticsB: any) => {
+      if (this.fileStatisticsSortType == 1) {
+        return fileStatisticsA.node[key] - fileStatisticsB.node[key];
+      } else if (this.fileStatisticsSortType == 2) {
+        return fileStatisticsB.node[key] - fileStatisticsA.node[key];
       }
     });
-    allNode.children.forEach((item: any) => {
-      item.children.sort((a: any, b: any) => {
-        if (this.sortType == 1) {
-          return a.node[key] - b.node[key];
-        } else if (this.sortType == 2) {
-          return b.node[key] - a.node[key];
+    fileStatisticsAllNode.children.forEach((item: any) => {
+      item.children.sort((fileStatisticsA: any, fileStatisticsB: any) => {
+        if (this.fileStatisticsSortType == 1) {
+          return fileStatisticsA.node[key] - fileStatisticsB.node[key];
+        } else if (this.fileStatisticsSortType == 2) {
+          return fileStatisticsB.node[key] - fileStatisticsA.node[key];
         }
       });
     });
@@ -199,14 +197,14 @@ export class TabPaneFileStatistics extends BaseElement {
             flex-direction: column;
             padding: 10px 10px;
         }
-        .progress{
+        .file-statistics-progress{
             bottom: 5px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .file-statistics-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -216,28 +214,28 @@ export class TabPaneFileStatistics extends BaseElement {
             z-index: 999999;
         }
         </style>
-        <lit-table id="tb-states" style="height: auto" tree>
-            <lit-table-column width="20%" title="Syscall/Process" data-index="title" key="title" align="flex-start">
+        <lit-table id="tb-file-statistics" style="height: auto" tree>
+            <lit-table-column class="fs-stat-column" width="20%" title="Syscall/Process" data-index="title" key="title" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Count" data-index="count" key="count" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Logical Writes" data-index="logicalWrites" key="logicalWrites" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Logical Writes" data-index="logicalWrites" key="logicalWrites" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Logical Reads" data-index="logicalReads" key="logicalReads" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Logical Reads" data-index="logicalReads" key="logicalReads" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Other Filesystem Bytes" data-index="otherFile" key="otherFile" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Other Filesystem Bytes" data-index="otherFile" key="otherFile" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration" data-index="allDuration" key="allDuration" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Duration" data-index="allDuration" key="allDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min Duration" data-index="minDuration" key="minDuration" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Min Duration" data-index="minDuration" key="minDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Avg Duration" data-index="avgDuration" key="avgDuration" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Avg Duration" data-index="avgDuration" key="avgDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max Duration" data-index="maxDuration" key="maxDuration" align="flex-start" order>
+            <lit-table-column class="fs-stat-column" width="1fr" title="Max Duration" data-index="maxDuration" key="maxDuration" align="flex-start" order>
             </lit-table-column>
         </lit-table>
-        <lit-progress-bar class="progress"></lit-progress-bar>
-        <div class="loading"></div>
+        <lit-progress-bar class="file-statistics-progress"></lit-progress-bar>
+        <div class="file-statistics-loading"></div>
         `;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.ts
index 5539c308b6f3593ff4b83aeb90a64d9726482555..6f76507f2a555eba50eea171ee3e7f39962360c4 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.ts
@@ -24,28 +24,28 @@ import { procedurePool } from '../../../../database/Procedure.js';
 
 @element('tabpane-file-statistics-analysis')
 export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
-  private pie: LitChartPie | null | undefined;
-  private currentSelection: SelectionParam | any;
-  private processData: any;
-  private threadData!: any[];
-  private soData!: any[];
-  private pidData!: any[];
-  private typeData!: any[];
-  private functionData!: any[];
-  private tableProcess: LitTable | null | undefined;
-  private tableType: LitTable | null | undefined;
-  private tableThread: LitTable | null | undefined;
-  private tableSo: LitTable | null | undefined;
-  private tableFunction: LitTable | null | undefined;
+  private fileStatisticsAnalysisPie: LitChartPie | null | undefined;
+  private fileStatisticsAnalysisCurrentSelection: SelectionParam | any;
+  private fileStatisticsAnalysisProcessData: any;
+  private fileStatisticsAnalysisThreadData!: any[];
+  private fileStatisticsAnalysisSoData!: any[];
+  private fileStatisticsAnalysisPidData!: any[];
+  private fileStatisticsAnalysisTypeData!: any[];
+  private fileStatisticsAnalysisFunctionData!: any[];
+  private fileStatisticsAnalysisTableProcess: LitTable | null | undefined;
+  private fileStatisticsAnalysisTableType: LitTable | null | undefined;
+  private fileStatisticsAnalysisTableThread: LitTable | null | undefined;
+  private fileStatisticsAnalysisTableSo: LitTable | null | undefined;
+  private fileStatisticsAnalysisTableFunction: LitTable | null | undefined;
   private sumDur: any;
-  private range: HTMLLabelElement | null | undefined;
+  private fileStatisticsAnalysisRange: HTMLLabelElement | null | undefined;
   private back: HTMLDivElement | null | undefined;
   private tabName: HTMLDivElement | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private processName: string = '';
-  private threadName: string = '';
-  private sortColumn: string = '';
-  private sortType: number = 0;
+  private fileStatisticsAnalysisProgressEL: LitProgressBar | null | undefined;
+  private fileStatisticsAnalysisProcessName: string = '';
+  private fileStatisticsAnalysisThreadName: string = '';
+  private fileStatisticsAnalysisSortColumn: string = '';
+  private fileStatisticsAnalysisSortType: number = 0;
   private typeName: any;
   private currentLevel = -1;
   private currentLevelData!: Array<any>;
@@ -55,24 +55,24 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
   private libStatisticsData!: any;
   private functionStatisticsData!: any;
   set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
-      this.pidData.unshift(this.processStatisticsData);
-      this.tableProcess!.recycleDataSource = this.pidData;
+    if (val == this.fileStatisticsAnalysisCurrentSelection) {
+      this.fileStatisticsAnalysisPidData.unshift(this.processStatisticsData);
+      this.fileStatisticsAnalysisTableProcess!.recycleDataSource = this.fileStatisticsAnalysisPidData;
       // @ts-ignore
-      this.pidData.shift(this.processStatisticsData);
+      this.fileStatisticsAnalysisPidData.shift(this.processStatisticsData);
       return;
     }
     this.clearData();
-    this.currentSelection = val;
-    this.tableProcess!.style.display = 'grid';
-    this.tableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'none';
-    this.tableType!.style.display = 'none';
-    this.tableFunction!.style.display = 'none';
+    this.fileStatisticsAnalysisCurrentSelection = val;
+    this.fileStatisticsAnalysisTableProcess!.style.display = 'grid';
+    this.fileStatisticsAnalysisTableThread!.style.display = 'none';
+    this.fileStatisticsAnalysisTableSo!.style.display = 'none';
+    this.fileStatisticsAnalysisTableType!.style.display = 'none';
+    this.fileStatisticsAnalysisTableFunction!.style.display = 'none';
     this.back!.style.visibility = 'hidden';
-    this.range!.textContent =
+    this.fileStatisticsAnalysisRange!.textContent =
       'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    this.progressEL!.loading = true;
+    this.fileStatisticsAnalysisProgressEL!.loading = true;
     this.getDataByWorker(
       [
         {
@@ -90,65 +90,65 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     );
   }
   initElements(): void {
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
-    this.tableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
-    this.tableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
-    this.tableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
-    this.tableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
+    this.fileStatisticsAnalysisRange = this.shadowRoot?.querySelector('#time-range');
+    this.fileStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.fileStatisticsAnalysisTableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
+    this.fileStatisticsAnalysisTableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
+    this.fileStatisticsAnalysisTableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
+    this.fileStatisticsAnalysisTableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
     this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
     this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.subheading');
-    this.tableType = this.shadowRoot!.querySelector<LitTable>('#tb-type-usage');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
+    this.fileStatisticsAnalysisTableType = this.shadowRoot!.querySelector<LitTable>('#tb-type-usage');
+    this.fileStatisticsAnalysisProgressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
     this.goBack();
   }
   clearData() {
-    this.pie!.dataSource = [];
-    this.tableProcess!.recycleDataSource = [];
-    this.tableThread!.recycleDataSource = [];
-    this.tableType!.recycleDataSource = [];
-    this.tableSo!.recycleDataSource = [];
-    this.tableFunction!.recycleDataSource = [];
+    this.fileStatisticsAnalysisPie!.dataSource = [];
+    this.fileStatisticsAnalysisTableProcess!.recycleDataSource = [];
+    this.fileStatisticsAnalysisTableThread!.recycleDataSource = [];
+    this.fileStatisticsAnalysisTableType!.recycleDataSource = [];
+    this.fileStatisticsAnalysisTableSo!.recycleDataSource = [];
+    this.fileStatisticsAnalysisTableFunction!.recycleDataSource = [];
   }
   goBack() {
     this.back!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By type AllDuration') {
-        this.tableProcess!.style.display = 'grid';
-        this.tableType!.style.display = 'none';
+        this.fileStatisticsAnalysisTableProcess!.style.display = 'grid';
+        this.fileStatisticsAnalysisTableType!.style.display = 'none';
         this.back!.style.visibility = 'hidden';
-        this.tableType!.setAttribute('hideDownload', '');
-        this.tableProcess?.removeAttribute('hideDownload');
+        this.fileStatisticsAnalysisTableType!.setAttribute('hideDownload', '');
+        this.fileStatisticsAnalysisTableProcess?.removeAttribute('hideDownload');
         this.currentLevel = 0;
-        this.processPieChart(this.currentSelection);
+        this.processPieChart(this.fileStatisticsAnalysisCurrentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Thread AllDuration') {
-        this.tableType!.style.display = 'grid';
-        this.tableThread!.style.display = 'none';
-        this.tableThread!.setAttribute('hideDownload', '');
-        this.tableType?.removeAttribute('hideDownload');
+        this.fileStatisticsAnalysisTableType!.style.display = 'grid';
+        this.fileStatisticsAnalysisTableThread!.style.display = 'none';
+        this.fileStatisticsAnalysisTableThread!.setAttribute('hideDownload', '');
+        this.fileStatisticsAnalysisTableType?.removeAttribute('hideDownload');
         this.currentLevel = 1;
-        this.typePieChart(this.currentSelection);
+        this.typePieChart(this.fileStatisticsAnalysisCurrentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Library AllDuration') {
-        this.tableThread!.style.display = 'grid';
-        this.tableSo!.style.display = 'none';
-        this.tableSo!.setAttribute('hideDownload', '');
-        this.tableThread?.removeAttribute('hideDownload');
+        this.fileStatisticsAnalysisTableThread!.style.display = 'grid';
+        this.fileStatisticsAnalysisTableSo!.style.display = 'none';
+        this.fileStatisticsAnalysisTableSo!.setAttribute('hideDownload', '');
+        this.fileStatisticsAnalysisTableThread?.removeAttribute('hideDownload');
         this.currentLevel = 2;
-        this.threadPieChart(this.currentSelection);
+        this.threadPieChart(this.fileStatisticsAnalysisCurrentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Function AllDuration') {
-        this.tableSo!.style.display = 'grid';
-        this.tableFunction!.style.display = 'none';
-        this.tableFunction!.setAttribute('hideDownload', '');
-        this.tableSo?.removeAttribute('hideDownload');
+        this.fileStatisticsAnalysisTableSo!.style.display = 'grid';
+        this.fileStatisticsAnalysisTableFunction!.style.display = 'none';
+        this.fileStatisticsAnalysisTableFunction!.setAttribute('hideDownload', '');
+        this.fileStatisticsAnalysisTableSo?.removeAttribute('hideDownload');
         this.currentLevel = 3;
-        this.libraryPieChart(this.currentSelection);
+        this.libraryPieChart(this.fileStatisticsAnalysisCurrentSelection);
       }
     });
   }
   processPieChart(val: any) {
     this.sumDur = this.processStatisticsData.allDuration;
-    this.pie!.config = {
+    this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.pidData),
+      data: this.getPieChartData(this.fileStatisticsAnalysisPidData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -168,22 +168,22 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableProcess!.style.display = 'none';
-          this.tableType!.style.display = 'grid';
-          this.tableProcess!.setAttribute('hideDownload', '');
-          this.tableType?.removeAttribute('hideDownload');
+          this.fileStatisticsAnalysisTableProcess!.style.display = 'none';
+          this.fileStatisticsAnalysisTableType!.style.display = 'grid';
+          this.fileStatisticsAnalysisTableProcess!.setAttribute('hideDownload', '');
+          this.fileStatisticsAnalysisTableType?.removeAttribute('hideDownload');
           this.getFilesystemType(it, val);
           // @ts-ignore
-          this.processName = it.tableName;
-          this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
-          this.pie?.hideTip();
+          this.fileStatisticsAnalysisProcessName = it.tableName;
+          this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.fileStatisticsAnalysisProcessName;
+          this.fileStatisticsAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableProcess!.setCurrentHover(data);
+          this.fileStatisticsAnalysisTableProcess!.setCurrentHover(data);
         } else {
-          this.tableProcess!.mouseOut();
+          this.fileStatisticsAnalysisTableProcess!.mouseOut();
         }
       },
       interactions: [
@@ -192,34 +192,34 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableProcess!.addEventListener('row-hover', (evt: any) => {
+    this.fileStatisticsAnalysisTableProcess!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let fspData = evt.detail.data;
+        fspData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.fileStatisticsAnalysisPie?.showHover();
+      this.fileStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
     this.tabName!.textContent = 'Statistic By Process AllDuration';
-    this.pidData.unshift(this.processStatisticsData);
-    this.tableProcess!.recycleDataSource = this.pidData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.pidData));
+    this.fileStatisticsAnalysisPidData.unshift(this.processStatisticsData);
+    this.fileStatisticsAnalysisTableProcess!.recycleDataSource = this.fileStatisticsAnalysisPidData;
     // @ts-ignore
-    this.pidData.shift(this.processStatisticsData);
-    this.tableProcess?.reMeauseHeight();
-    this.tableProcess!.addEventListener('column-click', (evt) => {
+    this.fileStatisticsAnalysisPidData.shift(this.processStatisticsData);
+    this.currentLevelData = this.fileStatisticsAnalysisPidData;
+    this.fileStatisticsAnalysisTableProcess?.reMeauseHeight();
+    this.fileStatisticsAnalysisTableProcess!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
   typePieChart(val: any) {
-    this.pie!.config = {
+    this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.typeData,
+      data: this.fileStatisticsAnalysisTypeData,
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -237,22 +237,22 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       angleClick: (it) => {
         // @ts-ignore
         this.clearData();
-        this.tableType!.style.display = 'none';
-        this.tableThread!.style.display = 'grid';
-        this.tableType!.setAttribute('hideDownload', '');
-        this.tableThread?.removeAttribute('hideDownload');
+        this.fileStatisticsAnalysisTableType!.style.display = 'none';
+        this.fileStatisticsAnalysisTableThread!.style.display = 'grid';
+        this.fileStatisticsAnalysisTableType!.setAttribute('hideDownload', '');
+        this.fileStatisticsAnalysisTableThread?.removeAttribute('hideDownload');
         this.getFilesystemThread(it, val);
         // @ts-ignore
         this.typeName = it.tableName;
         this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
-          this.processName + ' / ' + this.typeName;
-        this.pie?.hideTip();
+          this.fileStatisticsAnalysisProcessName + ' / ' + this.typeName;
+        this.fileStatisticsAnalysisPie?.hideTip();
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableType!.setCurrentHover(data);
+          this.fileStatisticsAnalysisTableType!.setCurrentHover(data);
         } else {
-          this.tableType!.mouseOut();
+          this.fileStatisticsAnalysisTableType!.mouseOut();
         }
       },
       interactions: [
@@ -261,35 +261,35 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableType!.addEventListener('row-hover', (evt: any) => {
+    this.fileStatisticsAnalysisTableType!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let fsaData = evt.detail.data;
+        fsaData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.fileStatisticsAnalysisPie?.showHover();
+      this.fileStatisticsAnalysisPie?.hideTip();
     });
-    this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
+    this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.fileStatisticsAnalysisProcessName;
     this.tabName!.textContent = 'Statistic By type AllDuration';
-    this.typeData.unshift(this.typeStatisticsData);
-    this.tableType!.recycleDataSource = this.typeData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.typeData));
+    this.fileStatisticsAnalysisTypeData.unshift(this.typeStatisticsData);
+    this.fileStatisticsAnalysisTableType!.recycleDataSource = this.fileStatisticsAnalysisTypeData;
     // @ts-ignore
-    this.typeData.shift(this.typeStatisticsData);
-    this.tableType?.reMeauseHeight();
-    this.tableType!.addEventListener('column-click', (evt) => {
+    this.fileStatisticsAnalysisTypeData.shift(this.typeStatisticsData);
+    this.currentLevelData = this.fileStatisticsAnalysisTypeData;
+    this.fileStatisticsAnalysisTableType?.reMeauseHeight();
+    this.fileStatisticsAnalysisTableType!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
   threadPieChart(val: any) {
     this.sumDur = this.threadStatisticsData.allDuration;
-    this.pie!.config = {
+    this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.threadData),
+      data: this.getPieChartData(this.fileStatisticsAnalysisThreadData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -309,23 +309,23 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableThread!.style.display = 'none';
-          this.tableSo!.style.display = 'grid';
-          this.tableThread!.setAttribute('hideDownload', '');
-          this.tableSo?.removeAttribute('hideDownload');
+          this.fileStatisticsAnalysisTableThread!.style.display = 'none';
+          this.fileStatisticsAnalysisTableSo!.style.display = 'grid';
+          this.fileStatisticsAnalysisTableThread!.setAttribute('hideDownload', '');
+          this.fileStatisticsAnalysisTableSo?.removeAttribute('hideDownload');
           this.getFilesystemSo(it, val);
           // @ts-ignore
-          this.threadName = it.tableName;
+          this.fileStatisticsAnalysisThreadName = it.tableName;
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
-            this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
-          this.pie?.hideTip();
+            this.fileStatisticsAnalysisProcessName + ' / ' + this.typeName + ' / ' + this.fileStatisticsAnalysisThreadName;
+          this.fileStatisticsAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableThread!.setCurrentHover(data);
+          this.fileStatisticsAnalysisTableThread!.setCurrentHover(data);
         } else {
-          this.tableThread!.mouseOut();
+          this.fileStatisticsAnalysisTableThread!.mouseOut();
         }
       },
       interactions: [
@@ -334,35 +334,35 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableThread!.addEventListener('row-hover', (evt: any) => {
+    this.fileStatisticsAnalysisTableThread!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let tableData = evt.detail.data;
+        tableData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.fileStatisticsAnalysisPie?.showHover();
+      this.fileStatisticsAnalysisPie?.hideTip();
     });
-    this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName + ' / ' + this.typeName;
+    this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.fileStatisticsAnalysisProcessName + ' / ' + this.typeName;
     this.tabName!.textContent = 'Statistic By Thread AllDuration';
-    this.threadData.unshift(this.threadStatisticsData);
-    this.tableThread!.recycleDataSource = this.threadData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.threadData));
+    this.fileStatisticsAnalysisThreadData.unshift(this.threadStatisticsData);
+    this.fileStatisticsAnalysisTableThread!.recycleDataSource = this.fileStatisticsAnalysisThreadData;
     // @ts-ignore
-    this.threadData.shift(this.threadStatisticsData);
-    this.tableThread?.reMeauseHeight();
-    this.tableThread!.addEventListener('column-click', (evt) => {
+    this.fileStatisticsAnalysisThreadData.shift(this.threadStatisticsData);
+    this.currentLevelData = this.fileStatisticsAnalysisThreadData;
+    this.fileStatisticsAnalysisTableThread?.reMeauseHeight();
+    this.fileStatisticsAnalysisTableThread!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
   libraryPieChart(val: any) {
     this.sumDur = this.libStatisticsData.allDuration;
-    this.pie!.config = {
+    this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.soData),
+      data: this.getPieChartData(this.fileStatisticsAnalysisSoData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -382,22 +382,22 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableSo!.style.display = 'none';
-          this.tableFunction!.style.display = 'grid';
-          this.tableSo!.setAttribute('hideDownload', '');
-          this.tableFunction?.removeAttribute('hideDownload');
+          this.fileStatisticsAnalysisTableSo!.style.display = 'none';
+          this.fileStatisticsAnalysisTableFunction!.style.display = 'grid';
+          this.fileStatisticsAnalysisTableSo!.setAttribute('hideDownload', '');
+          this.fileStatisticsAnalysisTableFunction?.removeAttribute('hideDownload');
           this.getFilesystemFunction(it, val);
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
             // @ts-ignore
-            this.processName + ' / ' + this.typeName + ' / ' + this.threadName + ' / ' + it.tableName;
-          this.pie?.hideTip();
+            this.fileStatisticsAnalysisProcessName + ' / ' + this.typeName + ' / ' + this.fileStatisticsAnalysisThreadName + ' / ' + it.tableName;
+          this.fileStatisticsAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableSo!.setCurrentHover(data);
+          this.fileStatisticsAnalysisTableSo!.setCurrentHover(data);
         } else {
-          this.tableSo!.mouseOut();
+          this.fileStatisticsAnalysisTableSo!.mouseOut();
         }
       },
       interactions: [
@@ -406,84 +406,80 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableSo!.addEventListener('row-hover', (evt: any) => {
+    this.fileStatisticsAnalysisTableSo!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let fsSoData = evt.detail.data;
+        fsSoData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.fileStatisticsAnalysisPie?.showHover();
+      this.fileStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
-      this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
+      this.fileStatisticsAnalysisProcessName + ' / ' + this.typeName + ' / ' + this.fileStatisticsAnalysisThreadName;
     this.tabName!.textContent = 'Statistic By Library AllDuration';
-    this.soData.unshift(this.libStatisticsData);
-    this.tableSo!.recycleDataSource = this.soData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.soData));
+    this.fileStatisticsAnalysisSoData.unshift(this.libStatisticsData);
+    this.fileStatisticsAnalysisTableSo!.recycleDataSource = this.fileStatisticsAnalysisSoData;
     // @ts-ignore
-    this.soData.shift(this.libStatisticsData);
-    this.tableSo?.reMeauseHeight();
-    this.tableSo!.addEventListener('column-click', (evt) => {
+    this.fileStatisticsAnalysisSoData.shift(this.libStatisticsData);
+    this.currentLevelData = this.fileStatisticsAnalysisSoData;
+    this.fileStatisticsAnalysisTableSo?.reMeauseHeight();
+    this.fileStatisticsAnalysisTableSo!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
-  sortByColumn(column: string, sort: number) {
-    this.sortColumn = column;
-    this.sortType = sort;
-    let currentTable: LitTable | null | undefined;
+  sortByColumn(column: string, fsaSort: number) {
+    this.fileStatisticsAnalysisSortColumn = column;
+    this.fileStatisticsAnalysisSortType = fsaSort;
+    let fsaCurrentTable: LitTable | null | undefined;
     switch (this.currentLevel) {
       case 0:
-        currentTable = this.tableProcess;
+        fsaCurrentTable = this.fileStatisticsAnalysisTableProcess;
         break;
       case 1:
-        currentTable = this.tableType;
+        fsaCurrentTable = this.fileStatisticsAnalysisTableType;
         break;
       case 2:
-        currentTable = this.tableThread;
+        fsaCurrentTable = this.fileStatisticsAnalysisTableThread;
         break;
       case 3:
-        currentTable = this.tableSo;
+        fsaCurrentTable = this.fileStatisticsAnalysisTableSo;
         break;
       case 4:
-        currentTable = this.tableFunction;
+        fsaCurrentTable = this.fileStatisticsAnalysisTableFunction;
         break;
     }
-    if (!currentTable) {
+    if (!fsaCurrentTable) {
       return;
     }
-    if (sort == 0) {
-      currentTable!.recycleDataSource = this.currentLevelData;
-    } else {
-      let arr = [...this.currentLevelData];
+    if (fsaSort == 0) {
+      let fsaArr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          // @ts-ignore
-          arr.shift(this.processStatisticsData);
+          fsaArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          // @ts-ignore
-          arr.shift(this.typeStatisticsData);
+          fsaArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          // @ts-ignore
-          arr.shift(this.threadStatisticsData);
+          fsaArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          // @ts-ignore
-          arr.shift(this.libStatisticsData);
+          fsaArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          // @ts-ignore
-          arr.shift(this.functionStatisticsData);
+          fsaArr.unshift(this.functionStatisticsData);
           break;
       }
+      fsaCurrentTable!.recycleDataSource = fsaArr;
+    } else {
+      let fsaArr = [...this.currentLevelData];
       if (column == 'tableName') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          if (sort == 1) {
+        fsaCurrentTable!.recycleDataSource = fsaArr.sort((a, b) => {
+          if (fsaSort == 1) {
             if (a.tableName > b.tableName) {
               return 1;
             } else if (a.tableName == b.tableName) {
@@ -502,37 +498,40 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
           }
         });
       } else if (column == 'durFormat') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.duration - b.duration : b.duration - a.duration;
+        fsaCurrentTable!.recycleDataSource = fsaArr.sort((a, b) => {
+          return fsaSort == 1 ? a.duration - b.duration : b.duration - a.duration;
         });
       } else if (column == 'percent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.duration - b.duration : b.duration - a.v;
+        fsaCurrentTable!.recycleDataSource = fsaArr.sort((a, b) => {
+          return fsaSort == 1 ? a.duration - b.duration : b.duration - a.v;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          arr.unshift(this.processStatisticsData);
+          fsaArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          arr.unshift(this.typeStatisticsData);
+          fsaArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          arr.unshift(this.threadStatisticsData);
+          fsaArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          arr.unshift(this.libStatisticsData);
+          fsaArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          arr.unshift(this.functionStatisticsData);
+          fsaArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = arr;
+      fsaCurrentTable!.recycleDataSource = fsaArr;
     }
   }
   getFilesystemProcess(val: any, result: Array<any>) {
-    this.processData = JSON.parse(JSON.stringify(result));
-    if (!this.processData || this.processData.length == 0) {
+    this.fileStatisticsAnalysisProcessData = JSON.parse(JSON.stringify(result));
+    if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length == 0) {
+      this.fileStatisticsAnalysisPidData = [];
+      this.processStatisticsData = [];
+      this.processPieChart(val);
       return;
     }
     let allDur = 0;
@@ -547,7 +546,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         pidMap.set(itemData.pid, itemArray);
       }
     }
-    this.pidData = [];
+    this.fileStatisticsAnalysisPidData = [];
     pidMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       let pName = '';
@@ -565,37 +564,37 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.pidData.push(pidData);
+      this.fileStatisticsAnalysisPidData.push(pidData);
     });
-    this.pidData.sort((a, b) => b.duration - a.duration);
+    this.fileStatisticsAnalysisPidData.sort((a, b) => b.duration - a.duration);
     this.processStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 0;
-    this.progressEL!.loading = false;
+    this.fileStatisticsAnalysisProgressEL!.loading = false;
     this.processPieChart(val);
   }
 
   getFilesystemType(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.fileStatisticsAnalysisProgressEL!.loading = true;
     let typeMap = new Map<string, Array<any>>();
     let pid = item.pid;
     let allDur = 0;
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid) {
+    for (let fsItem of this.fileStatisticsAnalysisProcessData) {
+      if (fsItem.pid !== pid) {
         continue;
       }
-      allDur += itemData.dur;
-      if (typeMap.has(itemData.type)) {
-        typeMap.get(itemData.type)?.push(itemData);
+      allDur += fsItem.dur;
+      if (typeMap.has(fsItem.type)) {
+        typeMap.get(fsItem.type)?.push(fsItem);
       } else {
         let itemArray = new Array<any>();
-        itemArray.push(itemData);
-        typeMap.set(itemData.type, itemArray);
+        itemArray.push(fsItem);
+        typeMap.set(fsItem.type, itemArray);
       }
     }
-    this.typeData = [];
+    this.fileStatisticsAnalysisTypeData = [];
     typeMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       for (let item of value) {
@@ -609,38 +608,38 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.typeData.push(typeData);
+      this.fileStatisticsAnalysisTypeData.push(typeData);
     });
-    this.typeData.sort((a, b) => b.duration - a.duration);
+    this.fileStatisticsAnalysisTypeData.sort((a, b) => b.duration - a.duration);
     this.typeStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 1;
     this.typePieChart(val);
-    this.progressEL!.loading = false;
+    this.fileStatisticsAnalysisProgressEL!.loading = false;
   }
 
   getFilesystemThread(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.fileStatisticsAnalysisProgressEL!.loading = true;
     let threadMap = new Map<string, Array<any>>();
     let pid = item.pid;
     let type = item.type;
     let allDur = 0;
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.type !== type) {
+    for (let fspItem of this.fileStatisticsAnalysisProcessData) {
+      if (fspItem.pid !== pid || fspItem.type !== type) {
         continue;
       }
-      allDur += itemData.dur;
-      if (threadMap.has(itemData.tid)) {
-        threadMap.get(itemData.tid)?.push(itemData);
+      allDur += fspItem.dur;
+      if (threadMap.has(fspItem.tid)) {
+        threadMap.get(fspItem.tid)?.push(fspItem);
       } else {
         let itemArray = new Array<any>();
-        itemArray.push(itemData);
-        threadMap.set(itemData.tid, itemArray);
+        itemArray.push(fspItem);
+        threadMap.set(fspItem.tid, itemArray);
       }
     }
-    this.threadData = [];
+    this.fileStatisticsAnalysisThreadData = [];
     threadMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       let tName = '';
@@ -658,26 +657,26 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.threadData.push(threadData);
+      this.fileStatisticsAnalysisThreadData.push(threadData);
     });
-    this.threadData.sort((a, b) => b.duration - a.duration);
+    this.fileStatisticsAnalysisThreadData.sort((a, b) => b.duration - a.duration);
     this.threadStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 2;
-    this.progressEL!.loading = false;
+    this.fileStatisticsAnalysisProgressEL!.loading = false;
     this.threadPieChart(val);
   }
 
   getFilesystemSo(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.fileStatisticsAnalysisProgressEL!.loading = true;
     let tid = item.tid;
     let pid = item.pid;
     let type = item.type;
     let allDur = 0;
     let libMap = new Map<number, Array<any>>();
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
+    for (let itemData of this.fileStatisticsAnalysisProcessData) {
       if (itemData.pid !== pid || itemData.tid !== tid || itemData.type !== type) {
         continue;
       }
@@ -690,23 +689,23 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         libMap.set(itemData.libId, dataArray);
       }
     }
-    this.soData = [];
+    this.fileStatisticsAnalysisSoData = [];
     libMap.forEach((value: any[], key: number) => {
       let dur = 0;
-      let libName = '';
+      let soName = '';
       for (let item of value) {
         dur += item.dur;
         if (key == null) {
           item.libName = 'unkown';
         }
-        libName = item.libName;
+        soName = item.libName;
       }
-      let libPath = libName?.split('/');
+      let libPath = soName?.split('/');
       if (libPath) {
-        libName = libPath[libPath.length - 1];
+        soName = libPath[libPath.length - 1];
       }
       const soData = {
-        tableName: libName,
+        tableName: soName,
         pid: item.pid,
         type: item.type,
         tid: item.tid,
@@ -715,17 +714,17 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.soData.push(soData);
+      this.fileStatisticsAnalysisSoData.push(soData);
     });
-    this.soData.sort((a, b) => b.duration - a.duration);
+    this.fileStatisticsAnalysisSoData.sort((a, b) => b.duration - a.duration);
     this.libStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 3;
-    this.progressEL!.loading = false;
+    this.fileStatisticsAnalysisProgressEL!.loading = false;
     this.libraryPieChart(val);
   }
 
   getFilesystemFunction(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.fileStatisticsAnalysisProgressEL!.loading = true;
     this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function AllDuration';
     let tid = item.tid;
     let pid = item.pid;
@@ -733,52 +732,52 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     let libId = item.libId;
     let allDur = 0;
     let symbolMap = new Map<number, Array<any>>();
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.tid !== tid || itemData.type !== type || itemData.libId !== libId) {
+    for (let fsProcessData of this.fileStatisticsAnalysisProcessData) {
+      if (fsProcessData.pid !== pid || fsProcessData.tid !== tid || fsProcessData.type !== type || fsProcessData.libId !== libId) {
         continue;
       }
-      allDur += itemData.dur;
-      if (symbolMap.has(itemData.symbolId)) {
-        symbolMap.get(itemData.symbolId)?.push(itemData);
+      allDur += fsProcessData.dur;
+      if (symbolMap.has(fsProcessData.symbolId)) {
+        symbolMap.get(fsProcessData.symbolId)?.push(fsProcessData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(itemData);
-        symbolMap.set(itemData.symbolId, dataArray);
+        dataArray.push(fsProcessData);
+        symbolMap.set(fsProcessData.symbolId, dataArray);
       }
     }
-    this.functionData = [];
+    this.fileStatisticsAnalysisFunctionData = [];
     symbolMap.forEach((symbolItems, key) => {
       let dur = 0;
-      let symbolName = '';
+      let fsSymbolName = '';
       for (let symbolItem of symbolItems) {
-        symbolName = symbolItem.symbolName;
+        fsSymbolName = symbolItem.symbolName;
         dur += symbolItem.dur;
       }
-      let symbolPath = symbolName?.split('/');
+      let symbolPath = fsSymbolName?.split('/');
       if (symbolPath) {
-        symbolName = symbolPath[symbolPath.length - 1];
+        fsSymbolName = symbolPath[symbolPath.length - 1];
       }
       const symbolData = {
         pid: item.pid,
         tid: item.tid,
         percent: ((dur / allDur) * 100).toFixed(2),
-        tableName: symbolName,
+        tableName: fsSymbolName,
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.functionData.push(symbolData);
+      this.fileStatisticsAnalysisFunctionData.push(symbolData);
     });
-    this.functionData.sort((a, b) => b.duration - a.duration);
+    this.fileStatisticsAnalysisFunctionData.sort((a, b) => b.duration - a.duration);
     this.functionStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 4;
-    this.progressEL!.loading = false;
+    this.fileStatisticsAnalysisProgressEL!.loading = false;
     this.sumDur = this.functionStatisticsData.allDuration;
-    this.pie!.config = {
+    this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.functionData),
+      data: this.getPieChartData(this.fileStatisticsAnalysisFunctionData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -795,9 +794,9 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableFunction!.setCurrentHover(data);
+          this.fileStatisticsAnalysisTableFunction!.setCurrentHover(data);
         } else {
-          this.tableFunction!.mouseOut();
+          this.fileStatisticsAnalysisTableFunction!.mouseOut();
         }
       },
       interactions: [
@@ -806,37 +805,37 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableFunction!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.fileStatisticsAnalysisTableFunction!.addEventListener('row-hover', (fsStatRowClickEvent: any) => {
+      if (fsStatRowClickEvent.detail.data) {
+        let data = fsStatRowClickEvent.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((fsStatRowClickEvent.detail as any).callBack) {
+          (fsStatRowClickEvent.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.fileStatisticsAnalysisPie?.showHover();
+      this.fileStatisticsAnalysisPie?.hideTip();
     });
-    this.functionData.unshift(this.functionStatisticsData);
-    this.tableFunction!.recycleDataSource = this.functionData;
-    this.tableFunction?.reMeauseHeight();
-    this.currentLevelData = JSON.parse(JSON.stringify(this.functionData));
+    this.fileStatisticsAnalysisFunctionData.unshift(this.functionStatisticsData);
+    this.fileStatisticsAnalysisTableFunction!.recycleDataSource = this.fileStatisticsAnalysisFunctionData;
+    this.fileStatisticsAnalysisTableFunction?.reMeauseHeight();
     // @ts-ignore
-    this.functionData.shift(this.functionStatisticsData);
-    this.tableFunction!.addEventListener('column-click', (evt) => {
+    this.fileStatisticsAnalysisFunctionData.shift(this.functionStatisticsData);
+    this.currentLevelData = this.fileStatisticsAnalysisFunctionData;
+    this.fileStatisticsAnalysisTableFunction!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
-  typeIdToString(type: any) {
+  typeIdToString(transformType: any) {
     let releaseType: any;
-    if (type === 0) {
+    if (transformType === 0) {
       releaseType = 'OPEN';
-    } else if (type === 2) {
+    } else if (transformType === 2) {
       releaseType = 'READ';
-    } else if (type === 3) {
+    } else if (transformType === 3) {
       releaseType = 'WRITE';
-    } else if (type === 1) {
+    } else if (transformType === 1) {
       releaseType = 'CLOSE';
     }
     return releaseType;
@@ -851,8 +850,8 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     };
     return allDuration;
   }
-  getPieChartData(res: any[]) {
-    if (res.length > 20) {
+  getPieChartData(pieChartData: any[]) {
+    if (pieChartData.length > 20) {
       let pieChartArr: any[] = [];
       let other: any = {
         tableName: 'other',
@@ -860,11 +859,11 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         percent: 0,
         durFormat: 0,
       };
-      for (let i = 0; i < res.length; i++) {
-        if (i < 19) {
-          pieChartArr.push(res[i]);
+      for (let pieDataIndex = 0; pieDataIndex < pieChartData.length; pieDataIndex++) {
+        if (pieDataIndex < 19) {
+          pieChartArr.push(pieChartData[pieDataIndex]);
         } else {
-          other.duration += res[i].duration;
+          other.duration += pieChartData[pieDataIndex].duration;
           other.durFormat = Utils.getProbablyTime(other.duration);
           other.percent = ((other.duration / this.sumDur) * 100).toFixed(2);
         }
@@ -872,7 +871,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       pieChartArr.push(other);
       return pieChartArr;
     }
-    return res;
+    return pieChartData;
   }
 
   getDataByWorker(args: any[], handler: Function) {
@@ -883,7 +882,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       undefined,
       (results: any) => {
         handler(results);
-        this.progressEL!.loading = false;
+        this.fileStatisticsAnalysisProgressEL!.loading = false;
       }
     );
   }
@@ -926,7 +925,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
             font-weight: bold;
             text-align: center;
         }
-        .progress{
+        .fs-stat-analysis-progress{
             position: absolute;
             height: 1px;
             left: 0;
@@ -934,8 +933,8 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
         } 
         </style>
         <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label> 
-        <div style="display: flex;flex-direction: row;"class="d-box">
-            <lit-progress-bar class="progress"></lit-progress-bar>
+        <div style="display: flex;flex-direction: row;" class="d-box">
+            <lit-progress-bar class="progress fs-stat-analysis-progress"></lit-progress-bar>
                      <div id="left_table" style="width: 40%;height:auto;">
                          <div style="display: flex;margin-bottom: 10px">
                            <div class="go-back">
@@ -950,7 +949,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
                      </div>
                      <div class="table-box" style="height:auto;overflow: auto">
                     <lit-table id="tb-process-usage" style="max-height:565px;min-height: 350px">
-                        <lit-table-column width="1fr" title="ProcessName" data-index="tableName" key="tableName" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="1fr" title="ProcessName" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column>
                         <lit-table-column width="1fr" title="Duration" data-index="durFormat" key="durFormat" align="flex-start" order></lit-table-column>
                         <lit-table-column width="1fr" title="%" data-index="percent" key="percent" align="flex-start"order></lit-table-column>
                     </lit-table>
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.ts
index 0eb5e96dbba4d97aeb37cef535b98bfdffcbe4f1..9bc40e11a02810a8fbffa9c6e25739d6d984b15c 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.ts
@@ -24,45 +24,41 @@ import { SpSystemTrace } from '../../../SpSystemTrace.js';
 
 @element('tabpane-io-tier-statistics')
 export class TabPaneIOTierStatistics extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private loadDataInCache: boolean = true;
-  private selectionParam: SelectionParam | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private filter: TabPaneFilter | null | undefined;
+  private ioTierStatisticsTbl: LitTable | null | undefined;
+  private ioTierStatisticsSelectionParam: SelectionParam | null | undefined;
+  private ioTierStatisticsProgressEL: LitProgressBar | null | undefined;
   private loadingPage: any;
   private loadingList: number[] = [];
-  private source: Array<any> = [];
-  private typeList: Array<string> = ['OPEN', 'CLOSE', 'READ', 'WRITE'];
-  private sortKey: string = '';
-  private sortType: number = 0;
-  private resultData: Array<any> = [];
+  private ioTierStatisticsSource: Array<any> = [];
+  private ioTierStatisticsSortKey: string = '';
+  private ioTierStatisticsSortType: number = 0;
+  private ioTierStatisticsResultData: Array<any> = [];
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(ioTierStatisticsSelection: SelectionParam | any) {
+    if (ioTierStatisticsSelection == this.ioTierStatisticsSelectionParam) {
       return;
     }
-    this.progressEL!.loading = true;
+    this.ioTierStatisticsProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
-    this.selectionParam = val;
+    this.ioTierStatisticsSelectionParam = ioTierStatisticsSelection;
     // @ts-ignore
-    this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 20 + 'px';
-    this.queryDataByDB(val);
+    this.ioTierStatisticsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 20 + 'px';
+    this.queryDataByDB(ioTierStatisticsSelection);
   }
 
   initElements(): void {
-    this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
+    this.ioTierStatisticsProgressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
     this.loadingPage = this.shadowRoot!.querySelector('.loading');
-    this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.ioTierStatisticsTbl = this.shadowRoot!.querySelector<LitTable>('#tb-io-tier-statistics');
+    this.ioTierStatisticsTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.ioTierStatisticsSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.ioTierStatisticsSortType = evt.detail.sort;
 
-      let newSource = JSON.parse(JSON.stringify(this.source));
-      if (this.sortType != 0 && newSource.length > 0) this.sortTable(newSource[0], this.sortKey);
-      this.tbl!.recycleDataSource = newSource;
+      let newSource = JSON.parse(JSON.stringify(this.ioTierStatisticsSource));
+      if (this.ioTierStatisticsSortType != 0 && newSource.length > 0) this.sortTable(newSource[0], this.ioTierStatisticsSortKey);
+      this.ioTierStatisticsTbl!.recycleDataSource = newSource;
     });
   }
 
@@ -71,51 +67,51 @@ export class TabPaneIOTierStatistics extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement!.clientHeight != 0) {
         // @ts-ignore
-        this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-        this.tbl!.reMeauseHeight();
+        this.ioTierStatisticsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
+        this.ioTierStatisticsTbl!.reMeauseHeight();
         this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
 
-  getInitData(item: any, nameTitle: any = 'pname', subtitle: any = null) {
+  getInitData(initIoTierItem: any, nameTitle: any = 'pname', subtitle: any = null) {
     if (nameTitle == 'path') {
-      item.path = item.path != null ? SpSystemTrace.DATA_DICT.get(parseInt(item.path)) : '-';
+      initIoTierItem.path = initIoTierItem.path != null ? SpSystemTrace.DATA_DICT.get(parseInt(initIoTierItem.path)) : '-';
     }
     return {
-      ...item,
-      title: item[nameTitle] + (subtitle ? '(' + item[subtitle] + ')' : ''),
-      allDuration: Utils.getProbablyTime(item.allDuration),
-      minDuration: Utils.getProbablyTime(item.minDuration),
-      maxDuration: Utils.getProbablyTime(item.maxDuration),
-      avgDuration: Utils.getProbablyTime(item.avgDuration),
-      node: { ...item, children: [] },
+      ...initIoTierItem,
+      title: initIoTierItem[nameTitle] + (subtitle ? '(' + initIoTierItem[subtitle] + ')' : ''),
+      allDuration: Utils.getProbablyTime(initIoTierItem.allDuration),
+      minDuration: Utils.getProbablyTime(initIoTierItem.minDuration),
+      maxDuration: Utils.getProbablyTime(initIoTierItem.maxDuration),
+      avgDuration: Utils.getProbablyTime(initIoTierItem.avgDuration),
+      node: { ...initIoTierItem, children: [] },
     };
   }
 
-  queryDataByDB(val: SelectionParam | any) {
+  queryDataByDB(ioTierParam: SelectionParam | any) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
+    this.ioTierStatisticsProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
     getTabPaneIOTierStatisticsData(
-      val.leftNs + val.recordStartNs,
-      val.rightNs + val.recordStartNs,
-      val.diskIOipids
+      ioTierParam.leftNs + ioTierParam.recordStartNs,
+      ioTierParam.rightNs + ioTierParam.recordStartNs,
+      ioTierParam.diskIOipids
     ).then((result) => {
       this.loadingList.splice(0, 1);
       if (this.loadingList.length == 0) {
-        this.progressEL!.loading = false;
+        this.ioTierStatisticsProgressEL!.loading = false;
         this.loadingPage.style.visibility = 'hidden';
       }
-      this.resultData = JSON.parse(JSON.stringify(result));
-      this.sortStatus(result, 'tier', 'ipid');
+      this.ioTierStatisticsResultData = JSON.parse(JSON.stringify(result));
+      this.sortioTierStatisticsStatus(result, 'tier', 'ipid');
     });
   }
 
-  sortStatus(result: Array<any>, firstLevel: string, secondLevel: string) {
-    let fatherMap = new Map<any, any>();
-    let childMap = new Map<any, any>();
-    let allNode: any = {
+  sortioTierStatisticsStatus(result: Array<any>, firstLevel: string, secondLevel: string) {
+    let ioTierFatherMap = new Map<any, any>();
+    let ioTierChildMap = new Map<any, any>();
+    let ioTierAllNode: any = {
       title: 'All',
       count: 0,
       allDuration: 0,
@@ -124,111 +120,111 @@ export class TabPaneIOTierStatistics extends BaseElement {
       avgDuration: '',
       children: [],
     };
-    result.forEach((item, idx) => {
-      if (childMap.has(item[firstLevel] + '_' + item[secondLevel])) {
-        let obj1 = childMap.get(item[firstLevel] + '_' + item[secondLevel]);
-        obj1.count += item.count;
-        obj1.allDuration += item.allDuration;
-        obj1.minDuration = obj1.minDuration <= item.minDuration ? obj1.minDuration : item.minDuration;
-        obj1.maxDuration = obj1.maxDuration >= item.maxDuration ? obj1.maxDuration : item.maxDuration;
-        obj1.children.push(this.getInitData(item, 'path', null));
+    result.forEach((resultItem, idx) => {
+      if (ioTierChildMap.has(resultItem[firstLevel] + '_' + resultItem[secondLevel])) {
+        let currentChildObject = ioTierChildMap.get(resultItem[firstLevel] + '_' + resultItem[secondLevel]);
+        currentChildObject.count += resultItem.count;
+        currentChildObject.allDuration += resultItem.allDuration;
+        currentChildObject.minDuration = currentChildObject.minDuration <= resultItem.minDuration ? currentChildObject.minDuration : resultItem.minDuration;
+        currentChildObject.maxDuration = currentChildObject.maxDuration >= resultItem.maxDuration ? currentChildObject.maxDuration : resultItem.maxDuration;
+        currentChildObject.children.push(this.getInitData(resultItem, 'path', null));
       } else {
-        childMap.set(item[firstLevel] + '_' + item[secondLevel], {
-          ...item,
-          children: [this.getInitData(item, 'path', null)],
+        ioTierChildMap.set(resultItem[firstLevel] + '_' + resultItem[secondLevel], {
+          ...resultItem,
+          children: [this.getInitData(resultItem, 'path', null)],
         });
       }
 
-      if (fatherMap.has(item[firstLevel])) {
-        let obj1 = fatherMap.get(item[firstLevel]);
-        obj1.count += item.count;
-        obj1.allDuration += item.allDuration;
-        obj1.minDuration = obj1.minDuration <= item.minDuration ? obj1.minDuration : item.minDuration;
-        obj1.maxDuration = obj1.maxDuration >= item.maxDuration ? obj1.maxDuration : item.maxDuration;
-        obj1.children.push(this.getInitData(item));
+      if (ioTierFatherMap.has(resultItem[firstLevel])) {
+        let currentFatherObject = ioTierFatherMap.get(resultItem[firstLevel]);
+        currentFatherObject.count += resultItem.count;
+        currentFatherObject.allDuration += resultItem.allDuration;
+        currentFatherObject.minDuration = currentFatherObject.minDuration <= resultItem.minDuration ? currentFatherObject.minDuration : resultItem.minDuration;
+        currentFatherObject.maxDuration = currentFatherObject.maxDuration >= resultItem.maxDuration ? currentFatherObject.maxDuration : resultItem.maxDuration;
+        currentFatherObject.children.push(this.getInitData(resultItem));
       } else {
-        fatherMap.set(item[firstLevel], {
-          ...item,
-          children: [this.getInitData(item)],
+        ioTierFatherMap.set(resultItem[firstLevel], {
+          ...resultItem,
+          children: [this.getInitData(resultItem)],
         });
       }
       if (idx == 0) {
-        allNode.minDuration = item.minDuration;
+        ioTierAllNode.minDuration = resultItem.minDuration;
       } else {
-        allNode.minDuration = allNode.minDuration <= item.minDuration ? allNode.minDuration : item.minDuration;
+        ioTierAllNode.minDuration = ioTierAllNode.minDuration <= resultItem.minDuration ? ioTierAllNode.minDuration : resultItem.minDuration;
       }
-      allNode.count += item.count;
-      allNode.allDuration += item.allDuration;
-      allNode.maxDuration = allNode.maxDuration >= item.maxDuration ? allNode.maxDuration : item.maxDuration;
+      ioTierAllNode.count += resultItem.count;
+      ioTierAllNode.allDuration += resultItem.allDuration;
+      ioTierAllNode.maxDuration = ioTierAllNode.maxDuration >= resultItem.maxDuration ? ioTierAllNode.maxDuration : resultItem.maxDuration;
     });
 
-    for (let ks of fatherMap.keys()) {
-      let sp = fatherMap.get(ks);
+    for (let ks of ioTierFatherMap.keys()) {
+      let sp = ioTierFatherMap.get(ks);
       sp!.children = [];
       sp.avgDuration = sp.allDuration / sp.count;
-      let node = this.getInitData(sp, 'tier', null);
-      node.path = {
-        tier: node.tier,
+      let ioTierNode = this.getInitData(sp, 'tier', null);
+      ioTierNode.path = {
+        tier: ioTierNode.tier,
         pid: null,
         path: null,
-        value: node.title,
+        value: ioTierNode.title,
       };
-      for (let kst of childMap.keys()) {
+      for (let kst of ioTierChildMap.keys()) {
         if (kst.startsWith(ks + '_')) {
-          let spt = childMap.get(kst);
+          let spt = ioTierChildMap.get(kst);
           let data = this.getInitData(spt!, 'pname', 'pid');
           data.path = {
-            tier: node.tier,
+            tier: ioTierNode.tier,
             pid: data.pid,
             path: null,
-            value: 'All-' + node.title + '-' + data.title,
+            value: 'All-' + ioTierNode.title + '-' + data.title,
           };
           data.children.forEach((e: any) => {
             e.path = {
-              tier: node.tier,
+              tier: ioTierNode.tier,
               pid: data.pid,
               path: e.path,
-              value: 'All-' + node.title + '-' + data.title + '-' + e.title,
+              value: 'All-' + ioTierNode.title + '-' + data.title + '-' + e.title,
             };
           });
           sp!.children.push(data);
         }
       }
-      allNode.children.push(node);
+      ioTierAllNode.children.push(ioTierNode);
     }
 
-    allNode.avgDuration = allNode.allDuration / allNode.count;
-    allNode = this.getInitData(allNode);
-    allNode.title = 'All';
-    allNode.path = { tier: null, pid: null, path: null, value: 'All' };
-    this.source = result.length > 0 ? [allNode] : [];
-    let newSource = JSON.parse(JSON.stringify(this.source));
-    if (this.sortType != 0 && result.length > 0) this.sortTable(newSource[0], this.sortKey);
-    this.tbl!.recycleDataSource = newSource;
+    ioTierAllNode.avgDuration = ioTierAllNode.allDuration / ioTierAllNode.count;
+    ioTierAllNode = this.getInitData(ioTierAllNode);
+    ioTierAllNode.title = 'All';
+    ioTierAllNode.path = { tier: null, pid: null, path: null, value: 'All' };
+    this.ioTierStatisticsSource = result.length > 0 ? [ioTierAllNode] : [];
+    let newSource = JSON.parse(JSON.stringify(this.ioTierStatisticsSource));
+    if (this.ioTierStatisticsSortType != 0 && result.length > 0) this.sortTable(newSource[0], this.ioTierStatisticsSortKey);
+    this.ioTierStatisticsTbl!.recycleDataSource = newSource;
   }
 
   sortTable(allNode: any, key: string) {
-    allNode.children.sort((a: any, b: any) => {
-      if (this.sortType == 1) {
-        return a.node[key] - b.node[key];
-      } else if (this.sortType == 2) {
-        return b.node[key] - a.node[key];
+    allNode.children.sort((ioTierStatNodeA: any, ioTierStatNodeB: any) => {
+      if (this.ioTierStatisticsSortType == 1) {
+        return ioTierStatNodeA.node[key] - ioTierStatNodeB.node[key];
+      } else if (this.ioTierStatisticsSortType == 2) {
+        return ioTierStatNodeB.node[key] - ioTierStatNodeA.node[key];
       }
     });
     allNode.children.forEach((item: any) => {
-      item.children.sort((a: any, b: any) => {
-        if (this.sortType == 1) {
-          return a.node[key] - b.node[key];
-        } else if (this.sortType == 2) {
-          return b.node[key] - a.node[key];
+      item.children.sort((ioTierStatItemA: any, ioTierStatItemB: any) => {
+        if (this.ioTierStatisticsSortType == 1) {
+          return ioTierStatItemA.node[key] - ioTierStatItemB.node[key];
+        } else if (this.ioTierStatisticsSortType == 2) {
+          return ioTierStatItemB.node[key] - ioTierStatItemA.node[key];
         }
       });
-      item.children.forEach((i: any) => {
-        i.children.sort((a: any, b: any) => {
-          if (this.sortType == 1) {
-            return a.node[key] - b.node[key];
-          } else if (this.sortType == 2) {
-            return b.node[key] - a.node[key];
+      item.children.forEach((ioTierStatItem: any) => {
+        ioTierStatItem.children.sort((ioTierStatItemA: any, ioTierStatItemB: any) => {
+          if (this.ioTierStatisticsSortType == 1) {
+            return ioTierStatItemA.node[key] - ioTierStatItemB.node[key];
+          } else if (this.ioTierStatisticsSortType == 2) {
+            return ioTierStatItemB.node[key] - ioTierStatItemA.node[key];
           }
         });
       });
@@ -243,14 +239,14 @@ export class TabPaneIOTierStatistics extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .progress{
+        .io-tier-stat-progress{
             bottom: 5px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .io-tier-stat-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -260,22 +256,22 @@ export class TabPaneIOTierStatistics extends BaseElement {
             z-index: 999999;
         }
         </style>
-        <lit-table id="tb-states" style="height: auto" tree>
-            <lit-table-column width="20%" title="Tier/Process/Path" data-index="title" key="title" align="flex-start">
+        <lit-table id="tb-io-tier-statistics" style="height: auto" tree>
+            <lit-table-column class="io-tier-stat-column" width="20%" title="Tier/Process/Path" data-index="title" key="title" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" order>
+            <lit-table-column class="io-tier-stat-column" width="1fr" title="Count" data-index="count" key="count" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Total Latency" data-index="allDuration" key="allDuration" align="flex-start" order>
+            <lit-table-column class="io-tier-stat-column" width="1fr" title="Total Latency" data-index="allDuration" key="allDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min Total Latency" data-index="minDuration" key="minDuration" align="flex-start" order>
+            <lit-table-column class="io-tier-stat-column" width="1fr" title="Min Total Latency" data-index="minDuration" key="minDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Avg Total Latency" data-index="avgDuration" key="avgDuration" align="flex-start" order>
+            <lit-table-column class="io-tier-stat-column" width="1fr" title="Avg Total Latency" data-index="avgDuration" key="avgDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max Total Latency" data-index="maxDuration" key="maxDuration" align="flex-start" order>
+            <lit-table-column class="io-tier-stat-column" width="1fr" title="Max Total Latency" data-index="maxDuration" key="maxDuration" align="flex-start" order>
             </lit-table-column>
         </lit-table>
-        <lit-progress-bar class="progress"></lit-progress-bar>
-        <div class="loading"></div>
+        <lit-progress-bar class="progress io-tier-stat-progress"></lit-progress-bar>
+        <div class="loading io-tier-stat-loading"></div>
         `;
   }
 }
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 35187c859e6bce22989ffdca8a10b00266505347..561d16b99e41dc3cc2eceecc9561deee4a9ba42e 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
@@ -22,9 +22,9 @@ import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressB
 import { Utils } from '../../base/Utils.js';
 import { procedurePool } from '../../../../database/Procedure.js';
 
-@element('tabpane-io-statistics-analysis')
+@element('tabpane-tb-vm-statistics')
 export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
-  private pie: LitChartPie | null | undefined;
+  private iOTierStatisticsAnalysisPie: LitChartPie | null | undefined;
   private currentSelection: SelectionParam | any;
   private processData: any;
   private pidData!: any[];
@@ -39,7 +39,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   private tableFunction: LitTable | null | undefined;
   private sumDur: any;
   private range: HTMLLabelElement | null | undefined;
-  private back: HTMLDivElement | null | undefined;
+  private iOTierStatisticsAnalysisBack: HTMLDivElement | null | undefined;
   private tabName: HTMLDivElement | null | undefined;
   private progressEL: LitProgressBar | null | undefined;
   private processName: string = '';
@@ -54,8 +54,8 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   private threadStatisticsData!: any;
   private libStatisticsData!: any;
   private functionStatisticsData!: any;
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(ioTierStatisticsAnalysisSelection: SelectionParam | any) {
+    if (ioTierStatisticsAnalysisSelection == this.currentSelection) {
       this.pidData.unshift(this.processStatisticsData);
       this.tableProcess!.recycleDataSource = this.pidData;
       // @ts-ignore
@@ -63,15 +63,15 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       return;
     }
     this.clearData();
-    this.currentSelection = val;
+    this.currentSelection = ioTierStatisticsAnalysisSelection;
     this.tableProcess!.style.display = 'grid';
     this.tableType!.style.display = 'none';
     this.tableThread!.style.display = 'none';
     this.tableSo!.style.display = 'none';
     this.tableFunction!.style.display = 'none';
-    this.back!.style.visibility = 'hidden';
+    this.iOTierStatisticsAnalysisBack!.style.visibility = 'hidden';
     this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+      'Selected range: ' + parseFloat(((ioTierStatisticsAnalysisSelection.rightNs - ioTierStatisticsAnalysisSelection.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     this.progressEL!.loading = true;
     this.getDataByWorker(
       [
@@ -81,29 +81,29 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         },
         {
           funcName: 'getCurrentDataFromDb',
-          funcArgs: [{ queryFuncName: 'io', ...val }],
+          funcArgs: [{ queryFuncName: 'io', ...ioTierStatisticsAnalysisSelection }],
         },
       ],
       (results: any[]) => {
-        this.getIOTierProcess(val, results);
+        this.getIOTierProcess(ioTierStatisticsAnalysisSelection, results);
       }
     );
   }
   initElements(): void {
     this.range = this.shadowRoot?.querySelector('#time-range');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.iOTierStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
     this.tableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
     this.tableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
     this.tableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
     this.tableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
     this.tableType = this.shadowRoot!.querySelector<LitTable>('#tb-type-usage');
-    this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
+    this.iOTierStatisticsAnalysisBack = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
     this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.subheading');
     this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
     this.goBack();
   }
   clearData() {
-    this.pie!.dataSource = [];
+    this.iOTierStatisticsAnalysisPie!.dataSource = [];
     this.tableProcess!.recycleDataSource = [];
     this.tableType!.recycleDataSource = [];
     this.tableThread!.recycleDataSource = [];
@@ -111,11 +111,11 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.tableFunction!.recycleDataSource = [];
   }
   goBack() {
-    this.back!.addEventListener('click', () => {
+    this.iOTierStatisticsAnalysisBack!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By type AllDuration') {
         this.tableProcess!.style.display = 'grid';
         this.tableType!.style.display = 'none';
-        this.back!.style.visibility = 'hidden';
+        this.iOTierStatisticsAnalysisBack!.style.visibility = 'hidden';
         this.tableType!.setAttribute('hideDownload', '');
         this.tableProcess?.removeAttribute('hideDownload');
         this.currentLevel = 0;
@@ -146,7 +146,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   }
   processPieChart(val: any) {
     this.sumDur = this.processStatisticsData.allDuration;
-    this.pie!.config = {
+    this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.pidData),
       angleField: 'duration',
@@ -167,7 +167,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         // @ts-ignore
         if (it.tableName != 'other') {
           this.clearData();
-          this.back!.style.visibility = 'visible';
+          this.iOTierStatisticsAnalysisBack!.style.visibility = 'visible';
           this.tableProcess!.style.display = 'none';
           this.tableType!.style.display = 'grid';
           this.tableProcess!.setAttribute('hideDownload', '');
@@ -175,7 +175,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
           this.getIOTierType(it, val);
           // @ts-ignore
           this.processName = it.tableName;
-          this.pie?.hideTip();
+          this.iOTierStatisticsAnalysisPie?.hideTip();
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
         }
       },
@@ -192,24 +192,24 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableProcess!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+    this.tableProcess!.addEventListener('row-hover', (event: any) => {
+      if (event.detail.data) {
+        let processData = event.detail.data;
+        processData.isHover = true;
+        if ((event.detail as any).callBack) {
+          (event.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.iOTierStatisticsAnalysisPie?.showHover();
+      this.iOTierStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
     this.tabName!.textContent = 'Statistic By Process AllDuration';
     this.pidData.unshift(this.processStatisticsData);
     this.tableProcess!.recycleDataSource = this.pidData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.pidData));
     // @ts-ignore
     this.pidData.shift(this.processStatisticsData);
+    this.currentLevelData = this.pidData;
     this.tableProcess?.reMeauseHeight();
     this.tableProcess!.addEventListener('column-click', (evt) => {
       // @ts-ignore
@@ -217,7 +217,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     });
   }
   typePieChart(val: any) {
-    this.pie!.config = {
+    this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
       data: this.typeData,
       angleField: 'duration',
@@ -244,7 +244,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         this.getIOTierThread(it, val);
         // @ts-ignore
         this.typeName = it.tableName;
-        this.pie?.hideTip();
+        this.iOTierStatisticsAnalysisPie?.hideTip();
         this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
           this.processName + ' / ' + this.typeName;
       },
@@ -263,22 +263,22 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     };
     this.tableType!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let tableData = evt.detail.data;
+        tableData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.iOTierStatisticsAnalysisPie?.showHover();
+      this.iOTierStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
     this.tabName!.textContent = 'Statistic By type AllDuration';
     this.typeData.unshift(this.typeStatisticsData);
     this.tableType!.recycleDataSource = this.typeData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.typeData));
     // @ts-ignore
     this.typeData.shift(this.typeStatisticsData);
+    this.currentLevelData = this.typeData;
     this.tableType?.reMeauseHeight();
     this.tableType!.addEventListener('column-click', (evt) => {
       // @ts-ignore
@@ -287,7 +287,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   }
   threadPieChart(val: any) {
     this.sumDur = this.threadStatisticsData.allDuration;
-    this.pie!.config = {
+    this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.threadData),
       angleField: 'duration',
@@ -308,7 +308,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         // @ts-ignore
         if (it.tableName != 'other') {
           this.clearData();
-          this.back!.style.visibility = 'visible';
+          this.iOTierStatisticsAnalysisBack!.style.visibility = 'visible';
           this.tableThread!.style.display = 'none';
           this.tableSo!.style.display = 'grid';
           this.tableThread!.setAttribute('hideDownload', '');
@@ -316,7 +316,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
           this.getIOTierSo(it, val);
           // @ts-ignore
           this.threadName = it.tableName;
-          this.pie?.hideTip();
+          this.iOTierStatisticsAnalysisPie?.hideTip();
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
             this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
         }
@@ -336,22 +336,22 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     };
     this.tableThread!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let threadData = evt.detail.data;
+        threadData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.iOTierStatisticsAnalysisPie?.showHover();
+      this.iOTierStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName + ' / ' + this.typeName;
     this.tabName!.textContent = 'Statistic By Thread AllDuration';
     this.threadData.unshift(this.threadStatisticsData);
     this.tableThread!.recycleDataSource = this.threadData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.threadData));
     // @ts-ignore
     this.threadData.shift(this.threadStatisticsData);
+    this.currentLevelData = this.threadData;
     this.tableThread?.reMeauseHeight();
     this.tableThread!.addEventListener('column-click', (evt) => {
       // @ts-ignore
@@ -360,7 +360,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   }
   libraryPieChart(val: any) {
     this.sumDur = this.libStatisticsData.allDuration;
-    this.pie!.config = {
+    this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.soData),
       angleField: 'duration',
@@ -381,13 +381,13 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         // @ts-ignore
         if (it.tableName != 'other') {
           this.clearData();
-          this.back!.style.visibility = 'visible';
+          this.iOTierStatisticsAnalysisBack!.style.visibility = 'visible';
           this.tableSo!.style.display = 'none';
           this.tableFunction!.style.display = 'grid';
           this.tableSo!.setAttribute('hideDownload', '');
           this.tableFunction?.removeAttribute('hideDownload');
           this.getIOTierFunction(it, val);
-          this.pie?.hideTip();
+          this.iOTierStatisticsAnalysisPie?.hideTip();
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
             // @ts-ignore
             this.processName + ' / ' + this.typeName + ' / ' + this.threadName + ' / ' + it.tableName;
@@ -408,32 +408,32 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     };
     this.tableSo!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let soData = evt.detail.data;
+        soData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.iOTierStatisticsAnalysisPie?.showHover();
+      this.iOTierStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
       this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
     this.tabName!.textContent = 'Statistic By Library AllDuration';
     this.soData.unshift(this.libStatisticsData);
     this.tableSo!.recycleDataSource = this.soData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.soData));
     // @ts-ignore
     this.soData.shift(this.libStatisticsData);
+    this.currentLevelData = this.soData;
     this.tableSo?.reMeauseHeight();
     this.tableSo!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
-  sortByColumn(column: string, sort: number) {
+  sortByColumn(column: string, ioSort: number) {
     this.sortColumn = column;
-    this.sortType = sort;
+    this.sortType = ioSort;
     let currentTable: LitTable | null | undefined;
     switch (this.currentLevel) {
       case 0:
@@ -455,35 +455,31 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     if (!currentTable) {
       return;
     }
-    if (sort == 0) {
-      currentTable!.recycleDataSource = this.currentLevelData;
-    } else {
-      let arr = [...this.currentLevelData];
+    if (ioSort == 0) {
+      let ioArr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          // @ts-ignore
-          arr.shift(this.processStatisticsData);
+          ioArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          // @ts-ignore
-          arr.shift(this.typeStatisticsData);
+          ioArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          // @ts-ignore
-          arr.shift(this.threadStatisticsData);
+          ioArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          // @ts-ignore
-          arr.shift(this.libStatisticsData);
+          ioArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          // @ts-ignore
-          arr.shift(this.functionStatisticsData);
+          ioArr.unshift(this.functionStatisticsData);
           break;
       }
+      currentTable!.recycleDataSource = ioArr;
+    } else {
+      let ioArr = [...this.currentLevelData];
       if (column == 'tableName') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          if (sort == 1) {
+        currentTable!.recycleDataSource = ioArr.sort((a, b) => {
+          if (ioSort == 1) {
             if (a.tableName > b.tableName) {
               return 1;
             } else if (a.tableName == b.tableName) {
@@ -502,53 +498,56 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
           }
         });
       } else if (column == 'durFormat') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.duration - b.duration : b.duration - a.duration;
+        currentTable!.recycleDataSource = ioArr.sort((a, b) => {
+          return ioSort == 1 ? a.duration - b.duration : b.duration - a.duration;
         });
       } else if (column == 'percent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.duration - b.duration : b.duration - a.v;
+        currentTable!.recycleDataSource = ioArr.sort((a, b) => {
+          return ioSort == 1 ? a.duration - b.duration : b.duration - a.v;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          arr.unshift(this.processStatisticsData);
+          ioArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          arr.unshift(this.typeStatisticsData);
+          ioArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          arr.unshift(this.threadStatisticsData);
+          ioArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          arr.unshift(this.libStatisticsData);
+          ioArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          arr.unshift(this.functionStatisticsData);
+          ioArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = arr;
+      currentTable!.recycleDataSource = ioArr;
     }
   }
   getIOTierProcess(val: any, result: Array<any>) {
     this.processData = JSON.parse(JSON.stringify(result));
     if (!this.processData || this.processData.length == 0) {
+      this.pidData = [];
+      this.processStatisticsData = [];
+      this.processPieChart(val);
       return;
     }
     let allDur = 0;
-    let pidMap = new Map<string, Array<any>>();
+    let ioMap = new Map<string, Array<any>>();
     for (let itemData of result) {
       allDur += itemData.dur;
-      if (pidMap.has(itemData.pid)) {
-        pidMap.get(itemData.pid)?.push(itemData);
+      if (ioMap.has(itemData.pid)) {
+        ioMap.get(itemData.pid)?.push(itemData);
       } else {
         let itemArray = new Array<any>();
         itemArray.push(itemData);
-        pidMap.set(itemData.pid, itemArray);
+        ioMap.set(itemData.pid, itemArray);
       }
     }
     this.pidData = [];
-    pidMap.forEach((value: Array<any>, key: string) => {
+    ioMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       let pName = '';
       for (let item of value) {
@@ -581,17 +580,17 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     if (!this.processData || this.processData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid) {
+    for (let processItem of this.processData) {
+      if (processItem.pid !== pid) {
         continue;
       }
-      allDur += itemData.dur;
-      if (typeMap.has(itemData.type)) {
-        typeMap.get(itemData.type)?.push(itemData);
+      allDur += processItem.dur;
+      if (typeMap.has(processItem.type)) {
+        typeMap.get(processItem.type)?.push(processItem);
       } else {
         let itemArray = new Array<any>();
-        itemArray.push(itemData);
-        typeMap.set(itemData.type, itemArray);
+        itemArray.push(processItem);
+        typeMap.set(processItem.type, itemArray);
       }
     }
     this.typeData = [];
@@ -674,17 +673,17 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     if (!this.processData || this.processData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.tid !== tid || itemData.type !== type) {
+    for (let processItemData of this.processData) {
+      if (processItemData.pid !== pid || processItemData.tid !== tid || processItemData.type !== type) {
         continue;
       }
-      allDur += itemData.dur;
-      if (libMap.has(itemData.libId)) {
-        libMap.get(itemData.libId)?.push(itemData);
+      allDur += processItemData.dur;
+      if (libMap.has(processItemData.libId)) {
+        libMap.get(processItemData.libId)?.push(processItemData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(itemData);
-        libMap.set(itemData.libId, dataArray);
+        dataArray.push(processItemData);
+        libMap.set(processItemData.libId, dataArray);
       }
     }
     this.soData = [];
@@ -732,36 +731,36 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     if (!this.processData || this.processData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.tid !== tid || itemData.type !== type || itemData.libId !== libId) {
+    for (let processData of this.processData) {
+      if (processData.pid !== pid || processData.tid !== tid || processData.type !== type || processData.libId !== libId) {
         continue;
       }
-      allDur += itemData.dur;
-      if (symbolMap.has(itemData.symbolId)) {
-        symbolMap.get(itemData.symbolId)?.push(itemData);
+      allDur += processData.dur;
+      if (symbolMap.has(processData.symbolId)) {
+        symbolMap.get(processData.symbolId)?.push(processData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(itemData);
-        symbolMap.set(itemData.symbolId, dataArray);
+        dataArray.push(processData);
+        symbolMap.set(processData.symbolId, dataArray);
       }
     }
     this.functionData = [];
     symbolMap.forEach((symbolItems, key) => {
       let dur = 0;
-      let symbolName = '';
+      let funSymbolName = '';
       for (let symbolItem of symbolItems) {
-        symbolName = symbolItem.symbolName;
+        funSymbolName = symbolItem.symbolName;
         dur += symbolItem.dur;
       }
-      let symbolPath = symbolName?.split('/');
+      let symbolPath = funSymbolName?.split('/');
       if (symbolPath) {
-        symbolName = symbolPath[symbolPath.length - 1];
+        funSymbolName = symbolPath[symbolPath.length - 1];
       }
       const symbolData = {
         pid: item.pid,
         tid: item.tid,
         percent: ((dur / allDur) * 100).toFixed(2),
-        tableName: symbolName,
+        tableName: funSymbolName,
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
@@ -772,7 +771,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.currentLevel = 4;
     this.progressEL!.loading = false;
     this.sumDur = this.functionStatisticsData.allDuration;
-    this.pie!.config = {
+    this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.functionData),
       angleField: 'duration',
@@ -804,21 +803,21 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     };
     this.tableFunction!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let funData = evt.detail.data;
+        funData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.iOTierStatisticsAnalysisPie?.showHover();
+      this.iOTierStatisticsAnalysisPie?.hideTip();
     });
     this.functionData.unshift(this.functionStatisticsData);
     this.tableFunction!.recycleDataSource = this.functionData;
     this.tableFunction?.reMeauseHeight();
-    this.currentLevelData = JSON.parse(JSON.stringify(this.functionData));
     // @ts-ignore
     this.functionData.shift(this.functionStatisticsData);
+    this.currentLevelData = this.functionData;
     this.tableFunction!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
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 369741f5b00a2dd0804531b71deb2668f30f747c..264de8b06858ffc2139c2e8aaf294fb995f8193d 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
@@ -34,90 +34,90 @@ export class TabPaneIoCompletionTimes extends BaseElement {
   // @ts-ignore
   private defaultNativeTypes = ['All', ...Object.values(VM_TYPE_MAP)];
   private native_type: Array<string> = [...this.defaultNativeTypes];
-  private tbl: LitTable | null | undefined;
-  private tblData: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private loadingList: number[] = [];
-  private loadingPage: any;
-  private sortKey: string = 'startTs';
-  private sortType: number = 0;
+  private ioCompletionTimesTbl: LitTable | null | undefined;
+  private ioCompletionTimesTblData: LitTable | null | undefined;
+  private ioCompletionTimesProgressEL: LitProgressBar | null | undefined;
+  private ioCompletionTimesLoadingList: number[] = [];
+  private ioCompletionTimesLoadingPage: any;
+  private ioCompletionTimesSortKey: string = 'startTs';
+  private ioCompletionTimesSortType: number = 0;
   private currentSelection: SelectionParam | undefined | null;
-  private source: Array<IoCompletionTimes> = [];
-  private queryDataSource: Array<IoCompletionTimes> = [];
-  private statsticsSelection: Array<any> = [];
+  private ioCompletionTimesSource: Array<IoCompletionTimes> = [];
+  private ioCompletionTimesQueryDataSource: Array<IoCompletionTimes> = [];
+  private ioCompletionTimesSelection: Array<any> = [];
 
-  set data(val: SelectionParam | null | undefined) {
-    if (val == this.currentSelection) {
+  set data(ioCompletionTimesSelection: SelectionParam | null | undefined) {
+    if (ioCompletionTimesSelection == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
-    this.initFilterTypes(val!).then(() => {
-      this.queryData(val!);
+    this.currentSelection = ioCompletionTimesSelection;
+    this.initFilterTypes(ioCompletionTimesSelection!).then(() => {
+      this.queryData(ioCompletionTimesSelection!);
     });
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.ioCompletionTimesTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
-    this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
-    this.tbl!.recycleDataSource = [];
-    this.tblData!.recycleDataSource = [];
+    this.ioCompletionTimesTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.ioCompletionTimesTbl!.recycleDataSource = [];
+    this.ioCompletionTimesTblData!.recycleDataSource = [];
   }
 
   connectedCallback() {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.ioCompletionTimesTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
+        this.ioCompletionTimesTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
-        this.tblData?.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + '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';
       }
     }).observe(this.parentElement!);
   }
 
   initElements(): void {
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl');
-    this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.ioCompletionTimesLoadingPage = this.shadowRoot?.querySelector('.io-completiontimes-loading');
+    this.ioCompletionTimesProgressEL = this.shadowRoot?.querySelector('.io-completion-progress') as LitProgressBar;
+    this.ioCompletionTimesTbl = this.shadowRoot?.querySelector<LitTable>('#tbl-io-completion-times');
+    this.ioCompletionTimesTblData = this.shadowRoot?.querySelector<LitTable>('#tbr-io-completion-times');
+    this.ioCompletionTimesTbl!.addEventListener('row-click', (e) => {
       // @ts-ignore
-      let data = e.detail.data as FileSysEvent;
+      let ioCompletionTimeData = e.detail.data as FileSysEvent;
       procedurePool.submitWithName(
         'logic0',
         'fileSystem-queryStack',
-        { callchainId: data.callchainId },
+        { callchainId: ioCompletionTimeData.callchainId },
         undefined,
         (res: any) => {
-          this.tblData!.recycleDataSource = res;
+          this.ioCompletionTimesTblData!.recycleDataSource = res;
         }
       );
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.ioCompletionTimesTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.ioCompletionTimesSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.ioCompletionTimesSortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortioCompletionTimesTable(evt.detail.key, evt.detail.sort);
     });
-    this.shadowRoot?.querySelector<TabPaneFilter>('#filter')!.getFilterData((data: FilterData) => {
+    this.shadowRoot?.querySelector<TabPaneFilter>('#io-completion-filter')!.getFilterData((data: FilterData) => {
       let index = parseInt(data.firstSelect || '0');
       if (index > this.defaultNativeTypes.length - 1) {
-        this.filterTypeData(this.statsticsSelection[index - this.defaultNativeTypes.length]);
+        this.filterTypeData(this.ioCompletionTimesSelection[index - this.defaultNativeTypes.length]);
       } else {
         this.filterTypeData(undefined);
       }
-      this.tbl!.recycleDataSource = this.source;
+      this.ioCompletionTimesTbl!.recycleDataSource = this.ioCompletionTimesSource;
     });
   }
 
-  async initFilterTypes(val: SelectionParam) {
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    let typeKeys = await getTabIoCompletionTimesType(val.leftNs, val.rightNs);
+  async initFilterTypes(ioCompletionTimeParam: SelectionParam) {
+    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#io-completion-filter');
+    let typeKeys = await getTabIoCompletionTimesType(ioCompletionTimeParam.leftNs, ioCompletionTimeParam.rightNs);
     this.defaultNativeTypes = ['All'];
-    this.statsticsSelection = [];
+    this.ioCompletionTimesSelection = [];
     typeKeys.forEach((item) => {
       // @ts-ignore
       this.defaultNativeTypes.push(item.tier + '');
@@ -127,74 +127,74 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     filter!.firstSelect = '0';
   }
 
-  async fromStastics(val: SelectionParam | any) {
-    if (val.fileSystemIoData == undefined) {
+  async fromStastics(ioCompletionTimeParam: SelectionParam | any) {
+    if (ioCompletionTimeParam.fileSystemIoData == undefined) {
       return;
     }
-    this.tblData!.recycleDataSource = [];
-    this.tblData?.clearAllSelection(undefined);
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    if (this.currentSelection != val) {
-      await this.initFilterTypes(val);
+    this.ioCompletionTimesTblData!.recycleDataSource = [];
+    this.ioCompletionTimesTblData?.clearAllSelection(undefined);
+    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#io-completion-filter');
+    if (this.currentSelection != ioCompletionTimeParam) {
+      await this.initFilterTypes(ioCompletionTimeParam);
     }
-    let typeIndexOf = this.native_type.indexOf(val.fileSystemIoData.path.value);
+    let typeIndexOf = this.native_type.indexOf(ioCompletionTimeParam.fileSystemIoData.path.value);
     if (typeIndexOf == -1) {
-      this.statsticsSelection.push(val.fileSystemIoData.path);
-      this.native_type.push(val.fileSystemIoData.path.value);
+      this.ioCompletionTimesSelection.push(ioCompletionTimeParam.fileSystemIoData.path);
+      this.native_type.push(ioCompletionTimeParam.fileSystemIoData.path.value);
       typeIndexOf = this.native_type.length - 1;
     }
-    if (this.currentSelection != val) {
-      this.currentSelection = val;
+    if (this.currentSelection != ioCompletionTimeParam) {
+      this.currentSelection = ioCompletionTimeParam;
       filter!.setSelectList(this.native_type, null, 'Tier');
       filter!.firstSelect = typeIndexOf + '';
-      this.queryData(val);
+      this.queryData(ioCompletionTimeParam);
     } else {
       if (typeIndexOf == parseInt(filter!.firstSelect)) {
         return;
       }
       filter!.setSelectList(this.native_type, null, 'Tier');
       filter!.firstSelect = typeIndexOf + '';
-      this.filterTypeData(val?.fileSystemIoData?.path || undefined);
-      val.fileSystemIoData = undefined;
-      this.tbl!.recycleDataSource = this.source;
+      this.filterTypeData(ioCompletionTimeParam?.fileSystemIoData?.path || undefined);
+      ioCompletionTimeParam.fileSystemIoData = undefined;
+      this.ioCompletionTimesTbl!.recycleDataSource = this.ioCompletionTimesSource;
     }
   }
 
-  queryData(val: SelectionParam) {
-    this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    this.source = [];
-    this.queryDataSource = [];
+  queryData(ioCompletionTimeParam: SelectionParam) {
+    this.ioCompletionTimesLoadingList.push(1);
+    this.ioCompletionTimesProgressEL!.loading = true;
+    this.ioCompletionTimesLoadingPage.style.visibility = 'visible';
+    this.ioCompletionTimesSource = [];
+    this.ioCompletionTimesQueryDataSource = [];
     procedurePool.submitWithName(
       'logic0',
       'fileSystem-queryIOEvents',
       {
-        leftNs: val.leftNs,
-        rightNs: val.rightNs,
-        diskIOipids: val.diskIOipids,
+        leftNs: ioCompletionTimeParam.leftNs,
+        rightNs: ioCompletionTimeParam.rightNs,
+        diskIOipids: ioCompletionTimeParam.diskIOipids,
       },
       undefined,
       (res: any) => {
-        this.source = this.source.concat(res.data);
-        this.queryDataSource = this.queryDataSource.concat(res.data);
-        this.filterTypeData(val?.fileSystemIoData?.path || undefined);
-        val.fileSystemIoData = undefined;
+        this.ioCompletionTimesSource = this.ioCompletionTimesSource.concat(res.data);
+        this.ioCompletionTimesQueryDataSource = this.ioCompletionTimesQueryDataSource.concat(res.data);
+        this.filterTypeData(ioCompletionTimeParam?.fileSystemIoData?.path || undefined);
+        ioCompletionTimeParam.fileSystemIoData = undefined;
         res.data = null;
         if (!res.isSending) {
-          this.tbl!.recycleDataSource = this.source;
-          this.loadingList.splice(0, 1);
-          if (this.loadingList.length == 0) {
-            this.progressEL!.loading = false;
-            this.loadingPage.style.visibility = 'hidden';
+          this.ioCompletionTimesTbl!.recycleDataSource = this.ioCompletionTimesSource;
+          this.ioCompletionTimesLoadingList.splice(0, 1);
+          if (this.ioCompletionTimesLoadingList.length == 0) {
+            this.ioCompletionTimesProgressEL!.loading = false;
+            this.ioCompletionTimesLoadingPage.style.visibility = 'hidden';
           }
         }
       }
     );
   }
 
-  filterTypeData(pathData: any) {
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+  filterTypeData(pathTypeData: any) {
+    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#io-completion-filter');
     let firstSelect = filter!.firstSelect;
     let tier = -1;
     let path = '';
@@ -202,97 +202,97 @@ export class TabPaneIoCompletionTimes extends BaseElement {
     if (parseInt(firstSelect) <= this.defaultNativeTypes.length - 1) {
       let index = parseInt(firstSelect);
       tier = index == 0 ? -1 : parseInt(this.defaultNativeTypes[index]);
-    } else if (pathData != undefined) {
-      tier = parseInt(pathData.tier);
-      path = pathData.path || '';
-      pid = pathData.pid || -1;
-    } else if (pathData == undefined) {
+    } else if (pathTypeData != undefined) {
+      tier = parseInt(pathTypeData.tier);
+      path = pathTypeData.path || '';
+      pid = pathTypeData.pid || -1;
+    } else if (pathTypeData == undefined) {
       return;
     }
     let isTierFilter = false;
     let isPidFilter = false;
     let isPathFilter = false;
-    this.source = this.queryDataSource.filter((item) => {
+    this.ioCompletionTimesSource = this.ioCompletionTimesQueryDataSource.filter((ioCompletionTimesQueryData) => {
       if (tier == -1) {
         isTierFilter = true;
       } else {
-        isTierFilter = item.tier == tier;
+        isTierFilter = ioCompletionTimesQueryData.tier == tier;
       }
       if (pid == -1) {
         isPidFilter = true;
       } else {
-        isPidFilter = item.pid == pid;
+        isPidFilter = ioCompletionTimesQueryData.pid == pid;
       }
-      isPathFilter = path == '' || item.path == path;
+      isPathFilter = path == '' || ioCompletionTimesQueryData.path == path;
       return isTierFilter && isPidFilter && isPathFilter;
     });
   }
 
-  sortTable(key: string, type: number) {
+  sortioCompletionTimesTable(ioCompletionTimesKey: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.ioCompletionTimesTbl!.recycleDataSource = this.ioCompletionTimesSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
-        if (key == 'startTsStr') {
+      let arr = Array.from(this.ioCompletionTimesSource);
+      arr.sort((ioCompletionTimesA, ioCompletionTimesB): number => {
+        if (ioCompletionTimesKey == 'startTsStr') {
           if (type == 1) {
-            return a.startTs - b.startTs;
+            return ioCompletionTimesA.startTs - ioCompletionTimesB.startTs;
           } else {
-            return b.startTs - a.startTs;
+            return ioCompletionTimesB.startTs - ioCompletionTimesA.startTs;
           }
-        } else if (key == 'durStr') {
+        } else if (ioCompletionTimesKey == 'durStr') {
           if (type == 1) {
-            return a.dur - b.dur;
+            return ioCompletionTimesA.dur - ioCompletionTimesB.dur;
           } else {
-            return b.dur - a.dur;
+            return ioCompletionTimesB.dur - ioCompletionTimesA.dur;
           }
-        } else if (key == 'process') {
-          if (a.process > b.process) {
+        } else if (ioCompletionTimesKey == 'process') {
+          if (ioCompletionTimesA.process > ioCompletionTimesB.process) {
             return type === 2 ? 1 : -1;
-          } else if (a.process == b.process) {
+          } else if (ioCompletionTimesA.process == ioCompletionTimesB.process) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
-        } else if (key == 'durPer4kStr') {
+        } else if (ioCompletionTimesKey == 'durPer4kStr') {
           if (type == 1) {
-            return a.durPer4k - b.durPer4k;
+            return ioCompletionTimesA.durPer4k - ioCompletionTimesB.durPer4k;
           } else {
-            return b.durPer4k - a.durPer4k;
+            return ioCompletionTimesB.durPer4k - ioCompletionTimesA.durPer4k;
           }
-        } else if (key == 'thread') {
-          if (a.thread > b.thread) {
+        } else if (ioCompletionTimesKey == 'thread') {
+          if (ioCompletionTimesA.thread > ioCompletionTimesB.thread) {
             return type === 2 ? 1 : -1;
-          } else if (a.thread == b.thread) {
+          } else if (ioCompletionTimesA.thread == ioCompletionTimesB.thread) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
-        } else if (key == 'operation') {
-          if (a.operation > b.operation) {
+        } else if (ioCompletionTimesKey == 'operation') {
+          if (ioCompletionTimesA.operation > ioCompletionTimesB.operation) {
             return type === 2 ? 1 : -1;
-          } else if (a.operation == b.operation) {
+          } else if (ioCompletionTimesA.operation == ioCompletionTimesB.operation) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
-        } else if (key == 'sizeStr') {
+        } else if (ioCompletionTimesKey == 'sizeStr') {
           if (type == 1) {
-            return a.size - b.size;
+            return ioCompletionTimesA.size - ioCompletionTimesB.size;
           } else {
-            return b.size - a.size;
+            return ioCompletionTimesB.size - ioCompletionTimesA.size;
           }
-        } else if (key == 'tier') {
+        } else if (ioCompletionTimesKey == 'tier') {
           if (type == 1) {
-            return a.tier - b.tier;
+            return ioCompletionTimesA.tier - ioCompletionTimesB.tier;
           } else {
-            return b.tier - a.tier;
+            return ioCompletionTimesB.tier - ioCompletionTimesA.tier;
           }
         } else {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.ioCompletionTimesTbl!.recycleDataSource = arr;
     }
   }
 
@@ -304,7 +304,7 @@ export class TabPaneIoCompletionTimes extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .loading{
+        .io-completiontimes-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -313,7 +313,7 @@ export class TabPaneIoCompletionTimes extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
-        .progress{
+        .io-completion-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -321,7 +321,7 @@ export class TabPaneIoCompletionTimes extends BaseElement {
             left: 0;
             right: 0;
         }
-        tab-pane-filter {
+        #io-completion-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -329,22 +329,22 @@ export class TabPaneIoCompletionTimes extends BaseElement {
             width: 100%;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="io-completion-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row;">
                 <lit-slicer style="width:100%">
                     <div style="width: 65%">
-                        <lit-table id="tbl" style="height: auto">
-                            <lit-table-column width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="260px" title="Total Latency" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Latency per 4KB" data-index="durPer4kStr" key="durPer4kStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Operation" data-index="operation" key="operation" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="200px" title="Bytes" data-index="sizeStr" key="sizeStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="280px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="200px" title="Block number" data-index="blockNumber" key="blockNumber" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="240px" title="Tier" data-index="tier" key="tier" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
+                        <lit-table id="tbl-io-completion-times" style="height: auto">
+                            <lit-table-column class="io-completion-column" width="200px" title="Start" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="260px" title="Total Latency" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="200px" title="Process" data-index="process" key="process" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="200px" title="Latency per 4KB" data-index="durPer4kStr" key="durPer4kStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="200px" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="200px" title="Operation" data-index="operation" key="operation" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="200px" title="Bytes" data-index="sizeStr" key="sizeStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="280px" title="Path" data-index="path" key="path" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="200px" title="Block number" data-index="blockNumber" key="blockNumber" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="240px" title="Tier" data-index="tier" key="tier" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="io-completion-column" width="600px" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
                                 <template>
                                     <div>
                                         <span>{{backtrace[0]}}</span>
@@ -356,22 +356,22 @@ export class TabPaneIoCompletionTimes extends BaseElement {
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
-                    <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                        <lit-table-column width="60px" title="" data-index="type" key="type"  align="flex-start" >
+                    <lit-table id="tbr-io-completion-times" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
+                        <lit-table-column class="io-completion-column" width="60px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <div v-if=" type == -1 ">Thread:</div>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
                             </template>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
+                        <lit-table-column class="io-completion-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter" first></tab-pane-filter>
-            <div class="loading"></div>
+            <lit-progress-bar class="progress io-completion-progress"></lit-progress-bar>
+            <tab-pane-filter id="io-completion-filter" first></tab-pane-filter>
+            <div class="io-completiontimes-loading"></div>
         </div>
 `;
   }
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 dc321343f569fa8b8e075e0ed2522a0c317e8765..68f57d9951e9556895e1a4ab737532261de94e8d 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
@@ -32,43 +32,43 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
   // @ts-ignore
   private defaultNativeTypes = ['All', ...Object.values(VM_TYPE_MAP)];
   private native_type: Array<string> = [...this.defaultNativeTypes];
-  private tbl: LitTable | null | undefined;
-  private tblData: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
+  private vmEventTbl: LitTable | null | undefined;
+  private vmEventTblData: LitTable | null | undefined;
+  private vmEventProgressEL: LitProgressBar | null | undefined;
   private loadingList: number[] = [];
   private loadingPage: any;
-  private source: Array<VirtualMemoryEvent> = [];
-  private queryDataSource: Array<VirtualMemoryEvent> = [];
-  private sortKey: string = 'startTs';
-  private sortType: number = 0;
+  private vmEventSource: Array<VirtualMemoryEvent> = [];
+  private queryVmEventDataSource: Array<VirtualMemoryEvent> = [];
+  private vmEventSortKey: string = 'startTs';
+  private vmEventSortType: number = 0;
   private currentSelection: SelectionParam | undefined | null;
   private statsticsSelection: Array<any> = [];
 
-  set data(val: SelectionParam | null | undefined) {
-    if (val == this.currentSelection) {
+  set data(vmEventSelection: SelectionParam | null | undefined) {
+    if (vmEventSelection == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
-    this.initFilterTypes(val!).then(() => {
-      this.queryData(val!);
+    this.currentSelection = vmEventSelection;
+    this.initFilterTypes(vmEventSelection!).then(() => {
+      this.queryData(vmEventSelection!);
     });
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.vmEventTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
-    this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
-    this.tbl!.recycleDataSource = [];
-    this.tblData!.recycleDataSource = [];
+    this.vmEventTblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.vmEventTbl!.recycleDataSource = [];
+    this.vmEventTblData!.recycleDataSource = [];
   }
 
   connectedCallback() {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.vmEventTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
+        this.vmEventTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 33 + 'px';
-        this.tblData?.reMeauseHeight();
+        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!);
@@ -76,17 +76,17 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
 
   initElements(): void {
     this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tbl');
-    this.tblData = this.shadowRoot?.querySelector<LitTable>('#tbr');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.vmEventProgressEL = this.shadowRoot?.querySelector('.vm-event-progress') as LitProgressBar;
+    this.vmEventTbl = this.shadowRoot?.querySelector<LitTable>('#vm-event-tbl');
+    this.vmEventTblData = this.shadowRoot?.querySelector<LitTable>('#vm-event-tbr');
+    this.vmEventTbl!.addEventListener('row-click', (vmEventRowClick) => {
       // @ts-ignore
-      let data = e.detail.data;
+      let data = vmEventRowClick.detail.data;
       (data as any).isSelected = true;
       // @ts-ignore
-      if ((e.detail as any).callBack) {
+      if ((vmEventRowClick.detail as any).callBack) {
         // @ts-ignore
-        (e.detail as any).callBack(true);
+        (vmEventRowClick.detail as any).callBack(true);
       }
       procedurePool.submitWithName(
         'logic0',
@@ -94,32 +94,32 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
         { callchainId: data.callchainId },
         undefined,
         (res: any) => {
-          this.tblData!.recycleDataSource = res;
+          this.vmEventTblData!.recycleDataSource = res;
         }
       );
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.vmEventTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.vmEventSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.vmEventSortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortVmEventTable(evt.detail.key, evt.detail.sort);
     });
-    this.shadowRoot?.querySelector<TabPaneFilter>('#filter')!.getFilterData((data: FilterData) => {
+    this.shadowRoot?.querySelector<TabPaneFilter>('#vm-event-filter')!.getFilterData((data: FilterData) => {
       let index = parseInt(data.firstSelect || '0');
       if (index > this.defaultNativeTypes.length - 1) {
         this.filterTypeData(this.statsticsSelection[index - this.defaultNativeTypes.length]);
       } else {
         this.filterTypeData(undefined);
       }
-      this.tbl!.recycleDataSource = this.source;
+      this.vmEventTbl!.recycleDataSource = this.vmEventSource;
     });
   }
 
-  async initFilterTypes(val: SelectionParam) {
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    let typeKeys = await getTabVirtualMemoryType(val.leftNs, val.rightNs);
+  async initFilterTypes(vmEventParam: SelectionParam) {
+    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#vm-event-filter');
+    let typeKeys = await getTabVirtualMemoryType(vmEventParam.leftNs, vmEventParam.rightNs);
     this.defaultNativeTypes = ['All'];
     this.statsticsSelection = [];
     typeKeys.forEach((item) => {
@@ -131,65 +131,65 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
     filter!.firstSelect = '0';
   }
 
-  async fromStastics(val: SelectionParam | any) {
-    if (val.fileSystemVMData == undefined) {
+  async fromStastics(vmEventParam: SelectionParam | any) {
+    if (vmEventParam.fileSystemVMData == undefined) {
       return;
     }
-    this.tblData!.recycleDataSource = [];
-    this.tblData?.clearAllSelection(undefined);
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    if (this.currentSelection != val) {
-      await this.initFilterTypes(val);
+    this.vmEventTblData!.recycleDataSource = [];
+    this.vmEventTblData?.clearAllSelection(undefined);
+    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#vm-event-filter');
+    if (this.currentSelection != vmEventParam) {
+      await this.initFilterTypes(vmEventParam);
     }
-    let typeIndexOf = this.native_type.indexOf(val.fileSystemVMData.path.value);
+    let typeIndexOf = this.native_type.indexOf(vmEventParam.fileSystemVMData.path.value);
     if (typeIndexOf == -1) {
-      this.statsticsSelection.push(val.fileSystemVMData.path);
-      this.native_type.push(val.fileSystemVMData.path.value);
+      this.statsticsSelection.push(vmEventParam.fileSystemVMData.path);
+      this.native_type.push(vmEventParam.fileSystemVMData.path.value);
       typeIndexOf = this.native_type.length - 1;
     }
-    if (this.currentSelection != val) {
-      this.currentSelection = val;
+    if (this.currentSelection != vmEventParam) {
+      this.currentSelection = vmEventParam;
       filter!.setSelectList(this.native_type, null, 'Operation Type');
       filter!.firstSelect = typeIndexOf + '';
-      this.queryData(val);
+      this.queryData(vmEventParam);
     } else {
       if (typeIndexOf == parseInt(filter!.firstSelect)) {
         return;
       }
       filter!.setSelectList(this.native_type, null, 'Operation Type');
       filter!.firstSelect = typeIndexOf + '';
-      this.filterTypeData(val?.fileSystemVMData?.path || undefined);
-      val.fileSystemVMData = undefined;
-      this.tbl!.recycleDataSource = this.source;
+      this.filterTypeData(vmEventParam?.fileSystemVMData?.path || undefined);
+      vmEventParam.fileSystemVMData = undefined;
+      this.vmEventTbl!.recycleDataSource = this.vmEventSource;
     }
   }
 
-  queryData(val: SelectionParam) {
+  queryData(vmEventParam: SelectionParam) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
+    this.vmEventProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
-    this.source = [];
-    this.queryDataSource = [];
+    this.vmEventSource = [];
+    this.queryVmEventDataSource = [];
     procedurePool.submitWithName(
       'logic0',
       'fileSystem-queryVMEvents',
       {
-        leftNs: val.leftNs,
-        rightNs: val.rightNs,
-        typeArr: val.fileSystemType,
+        leftNs: vmEventParam.leftNs,
+        rightNs: vmEventParam.rightNs,
+        typeArr: vmEventParam.fileSystemType,
       },
       undefined,
       (res: any) => {
-        this.source = this.source.concat(res.data);
-        this.queryDataSource = this.queryDataSource.concat(res.data);
-        this.filterTypeData(val?.fileSystemVMData?.path || undefined);
-        val.fileSystemVMData = undefined;
+        this.vmEventSource = this.vmEventSource.concat(res.data);
+        this.queryVmEventDataSource = this.queryVmEventDataSource.concat(res.data);
+        this.filterTypeData(vmEventParam?.fileSystemVMData?.path || undefined);
+        vmEventParam.fileSystemVMData = undefined;
         res.data = null;
         if (!res.isSending) {
-          this.tbl!.recycleDataSource = this.source;
+          this.vmEventTbl!.recycleDataSource = this.vmEventSource;
           this.loadingList.splice(0, 1);
           if (this.loadingList.length == 0) {
-            this.progressEL!.loading = false;
+            this.vmEventProgressEL!.loading = false;
             this.loadingPage.style.visibility = 'hidden';
           }
         }
@@ -198,7 +198,7 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
   }
 
   filterTypeData(pathData: any) {
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#vm-event-filter');
     let firstSelect = filter!.firstSelect;
     let type = -1;
     let tid = -1;
@@ -219,7 +219,7 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
     let isTidFilter = false;
     let isPidFilter = false;
     let isTypeFilter = false;
-    this.source = this.queryDataSource.filter((item) => {
+    this.vmEventSource = this.queryVmEventDataSource.filter((item) => {
       if (tid == -1) {
         isTidFilter = true;
       } else {
@@ -235,43 +235,43 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
     });
   }
 
-  sortTable(key: string, type: number) {
+  sortVmEventTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.vmEventTbl!.recycleDataSource = this.vmEventSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.vmEventSource);
+      arr.sort((vmEventA, vmEventB): number => {
         if (key == 'startTsStr') {
           if (type == 1) {
-            return a.startTs - b.startTs;
+            return vmEventA.startTs - vmEventB.startTs;
           } else {
-            return b.startTs - a.startTs;
+            return vmEventB.startTs - vmEventA.startTs;
           }
         } else if (key == 'durStr') {
           if (type == 1) {
-            return a.dur - b.dur;
+            return vmEventA.dur - vmEventB.dur;
           } else {
-            return b.dur - a.dur;
+            return vmEventB.dur - vmEventA.dur;
           }
         } else if (key == 'thread') {
-          if (a.thread > b.thread) {
+          if (vmEventA.thread > vmEventB.thread) {
             return type === 2 ? 1 : -1;
-          } else if (a.thread == b.thread) {
+          } else if (vmEventA.thread == vmEventB.thread) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
           }
         } else if (key == 'sizeStr') {
           if (type == 1) {
-            return a.size - b.size;
+            return vmEventA.size - vmEventB.size;
           } else {
-            return b.size - a.size;
+            return vmEventB.size - vmEventA.size;
           }
         } else {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.vmEventTbl!.recycleDataSource = arr;
     }
   }
 
@@ -283,7 +283,7 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .loading{
+        .vm-event-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -292,7 +292,7 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
-        .progress{
+        .vm-event-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -300,7 +300,7 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
             left: 0;
             right: 0;
         }
-        tab-pane-filter {
+        #vm-event-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -308,36 +308,36 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
             width: 100%;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="vm-event-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row;">
                 <lit-slicer style="width:100%">
                     <div style="width: 65%">
-                        <lit-table id="tbl" style="height: auto">
-                            <lit-table-column width="1fr" title="Start Time" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="1fr" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="1fr" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column>
-                            <lit-table-column width="1fr" title="Operation" data-index="operation" key="operation" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="1fr" title="Adress" data-index="address" key="address" align="flex-start" ></lit-table-column>
-                            <lit-table-column width="1fr" title="Size" data-index="sizeStr" key="sizeStr" align="flex-start" order></lit-table-column>
+                        <lit-table id="vm-event-tbl" style="height: auto">
+                            <lit-table-column class="vm-event-column" width="1fr" title="Start Time" data-index="startTsStr" key="startTsStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="vm-event-column" width="1fr" title="Duration" data-index="durStr" key="durStr" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="vm-event-column" width="1fr" title="Thread" data-index="thread" key="thread" align="flex-start" order></lit-table-column>
+                            <lit-table-column class="vm-event-column" width="1fr" title="Operation" data-index="operation" key="operation" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="vm-event-column" width="1fr" title="Adress" data-index="address" key="address" align="flex-start" ></lit-table-column>
+                            <lit-table-column class="vm-event-column" width="1fr" title="Size" data-index="sizeStr" key="sizeStr" align="flex-start" order></lit-table-column>
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
-                    <lit-table id="tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                        <lit-table-column width="60px" title="" data-index="type" key="type"  align="flex-start" >
+                    <lit-table id="vm-event-tbr" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
+                        <lit-table-column class="vm-event-column" width="60px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <div v-if=" type == -1 ">Thread:</div>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
                             </template>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
+                        <lit-table-column class="vm-event-column" width="1fr" title="" data-index="symbol" key="symbol"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter" first></tab-pane-filter>
-            <div class="loading"></div>
+            <lit-progress-bar class="progress vm-event-progress"></lit-progress-bar>
+            <tab-pane-filter id="vm-event-filter" first></tab-pane-filter>
+            <div class="loading vm-event-loading"></div>
         </div>
 `;
   }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatistics.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatistics.ts
index 31143b7452ef977f304a277f21256988f0ce7030..c8b6b5334dbc8152c954a739602461cef9e35e11 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatistics.ts
@@ -25,54 +25,51 @@ import { VM_TYPE_MAP } from '../../../../database/logic-worker/ProcedureLogicWor
 
 @element('tabpane-virtual-memory-statistics')
 export class TabPaneVirtualMemoryStatistics extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private loadDataInCache: boolean = true;
-  private selectionParam: SelectionParam | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private filter: TabPaneFilter | null | undefined;
+  private vmStatisticsTbl: LitTable | null | undefined;
+  private vmStatisticsSelectionParam: SelectionParam | null | undefined;
+  private vmStatisticsProgressEL: LitProgressBar | null | undefined;
+  private vmStatisticsFilter: TabPaneFilter | null | undefined;
   private loadingPage: any;
   private loadingList: number[] = [];
-  private source: Array<any> = [];
-  private typeList: Array<string> = ['OPEN', 'CLOSE', 'READ', 'WRITE'];
-  private sortKey: string = '';
-  private sortType: number = 0;
-  private resultData: Array<any> = [];
+  private vmStatisticsSource: Array<any> = [];
+  private vmStatisticsSortKey: string = '';
+  private vmStatisticsSortType: number = 0;
+  private vmStatisticsResultData: Array<any> = [];
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(vmStatisticsSelection: SelectionParam | any) {
+    if (vmStatisticsSelection == this.vmStatisticsSelectionParam) {
       return;
     }
-    this.progressEL!.loading = true;
+    this.vmStatisticsProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
-    this.selectionParam = val;
+    this.vmStatisticsSelectionParam = vmStatisticsSelection;
     // @ts-ignore
-    this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 20 + 'px';
-    this.queryDataByDB(val);
+    this.vmStatisticsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 20 + 'px';
+    this.queryDataByDB(vmStatisticsSelection);
   }
 
   initElements(): void {
-    this.progressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
+    this.vmStatisticsProgressEL = this.shadowRoot!.querySelector<LitProgressBar>('.progress');
     this.loadingPage = this.shadowRoot!.querySelector('.loading');
-    this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.vmStatisticsTbl = this.shadowRoot!.querySelector<LitTable>('#tb-vm-statistics');
+    this.vmStatisticsTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.vmStatisticsSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.vmStatisticsSortType = evt.detail.sort;
 
-      let newSource = JSON.parse(JSON.stringify(this.source));
-      if (this.sortType != 0 && newSource.length > 0) this.sortTable(newSource[0], this.sortKey);
-      this.tbl!.recycleDataSource = newSource;
+      let newSource = JSON.parse(JSON.stringify(this.vmStatisticsSource));
+      if (this.vmStatisticsSortType != 0 && newSource.length > 0) this.sortVmStatisticsTable(newSource[0], this.vmStatisticsSortKey);
+      this.vmStatisticsTbl!.recycleDataSource = newSource;
     });
-    this.filter = this.shadowRoot!.querySelector<TabPaneFilter>('#filter');
-    this.filter!.getStatisticsTypeData((type) => {
+    this.vmStatisticsFilter = this.shadowRoot!.querySelector<TabPaneFilter>('#filter');
+    this.vmStatisticsFilter!.getStatisticsTypeData((type) => {
       if (type == 'operation') {
-        this.sortStatus(this.resultData, 'ipid', 'itid');
+        this.sortStatus(this.vmStatisticsResultData, 'ipid', 'itid');
       } else {
-        this.sortStatus(this.resultData, 'type', 'ipid');
+        this.sortStatus(this.vmStatisticsResultData, 'type', 'ipid');
       }
-      this.tbl!.shadowRoot!.querySelector('div > div.thead > div > div:nth-child(1) > label')!.textContent =
+      this.vmStatisticsTbl!.shadowRoot!.querySelector('div > div.thead > div > div:nth-child(1) > label')!.textContent =
         type == 'operation' ? 'Process/Thread/Operation' : 'Operation/Process/Thread';
     });
   }
@@ -82,48 +79,48 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement!.clientHeight != 0) {
         // @ts-ignore
-        this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 10 - 32 + 'px';
-        this.tbl!.reMeauseHeight();
+        this.vmStatisticsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 10 - 32 + 'px';
+        this.vmStatisticsTbl!.reMeauseHeight();
         this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
 
-  getInitData(item: any, nameTitle: any = 'pname', subtitle: any = null) {
+  getInitData(initVmMemoryStatItem: any, nameTitle: any = 'pname', subtitle: any = null) {
     // @ts-ignore
-    let title = nameTitle == 'type' ? VM_TYPE_MAP[item[nameTitle]] : item[nameTitle];
+    let title = nameTitle == 'type' ? VM_TYPE_MAP[initVmMemoryStatItem[nameTitle]] : initVmMemoryStatItem[nameTitle];
     return {
-      ...item,
-      title: title + (subtitle ? '(' + item[subtitle] + ')' : ''),
-      allDuration: Utils.getProbablyTime(item.allDuration),
-      minDuration: Utils.getProbablyTime(item.minDuration),
-      maxDuration: Utils.getProbablyTime(item.maxDuration),
-      avgDuration: Utils.getProbablyTime(item.avgDuration),
-      node: { ...item, children: [] },
+      ...initVmMemoryStatItem,
+      title: title + (subtitle ? '(' + initVmMemoryStatItem[subtitle] + ')' : ''),
+      allDuration: Utils.getProbablyTime(initVmMemoryStatItem.allDuration),
+      minDuration: Utils.getProbablyTime(initVmMemoryStatItem.minDuration),
+      maxDuration: Utils.getProbablyTime(initVmMemoryStatItem.maxDuration),
+      avgDuration: Utils.getProbablyTime(initVmMemoryStatItem.avgDuration),
+      node: { ...initVmMemoryStatItem, children: [] },
     };
   }
 
-  queryDataByDB(val: SelectionParam | any) {
+  queryDataByDB(vmMemoryStatParam: SelectionParam | any) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
+    this.vmStatisticsProgressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
-    getTabPaneVirtualMemoryStatisticsData(val.leftNs + val.recordStartNs, val.rightNs + val.recordStartNs).then(
+    getTabPaneVirtualMemoryStatisticsData(vmMemoryStatParam.leftNs + vmMemoryStatParam.recordStartNs, vmMemoryStatParam.rightNs + vmMemoryStatParam.recordStartNs).then(
       (result) => {
         this.loadingList.splice(0, 1);
         if (this.loadingList.length == 0) {
-          this.progressEL!.loading = false;
+          this.vmStatisticsProgressEL!.loading = false;
           this.loadingPage.style.visibility = 'hidden';
         }
-        this.resultData = JSON.parse(JSON.stringify(result));
+        this.vmStatisticsResultData = JSON.parse(JSON.stringify(result));
         this.sortStatus(result, 'type', 'ipid');
       }
     );
   }
 
   sortStatus(result: Array<any>, firstLevel: string, secondLevel: string) {
-    let fatherMap = new Map<any, any>();
-    let childMap = new Map<any, any>();
-    let allNode: any = {
+    let vmMemoryStatFatherMap = new Map<any, any>();
+    let vmMemoryStatChildMap = new Map<any, any>();
+    let vmMemoryStatAllNode: any = {
       title: 'All',
       count: 0,
       allDuration: 0,
@@ -133,17 +130,17 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
       children: [],
     };
     result.forEach((item, idx) => {
-      if (childMap.has(item[firstLevel] + '_' + item[secondLevel])) {
-        let obj1 = childMap.get(item[firstLevel] + '_' + item[secondLevel]);
-        obj1.count += item.count;
-        obj1.allDuration += item.allDuration;
-        obj1.minDuration = obj1.minDuration <= item.minDuration ? obj1.minDuration : item.minDuration;
-        obj1.maxDuration = obj1.maxDuration >= item.maxDuration ? obj1.maxDuration : item.maxDuration;
-        obj1.children.push(
+      if (vmMemoryStatChildMap.has(item[firstLevel] + '_' + item[secondLevel])) {
+        let vmMemoryStatChildObj = vmMemoryStatChildMap.get(item[firstLevel] + '_' + item[secondLevel]);
+        vmMemoryStatChildObj.count += item.count;
+        vmMemoryStatChildObj.allDuration += item.allDuration;
+        vmMemoryStatChildObj.minDuration = vmMemoryStatChildObj.minDuration <= item.minDuration ? vmMemoryStatChildObj.minDuration : item.minDuration;
+        vmMemoryStatChildObj.maxDuration = vmMemoryStatChildObj.maxDuration >= item.maxDuration ? vmMemoryStatChildObj.maxDuration : item.maxDuration;
+        vmMemoryStatChildObj.children.push(
           this.getInitData(item, firstLevel == 'type' ? 'tname' : 'type', firstLevel == 'type' ? 'tid' : null)
         );
       } else {
-        childMap.set(item[firstLevel] + '_' + item[secondLevel], {
+        vmMemoryStatChildMap.set(item[firstLevel] + '_' + item[secondLevel], {
           ...item,
           children: [
             this.getInitData(item, firstLevel == 'type' ? 'tname' : 'type', firstLevel == 'type' ? 'tid' : null),
@@ -151,39 +148,39 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
         });
       }
 
-      if (fatherMap.has(item[firstLevel])) {
-        let obj1 = fatherMap.get(item[firstLevel]);
-        obj1.count += item.count;
-        obj1.allDuration += item.allDuration;
-        obj1.minDuration = obj1.minDuration <= item.minDuration ? obj1.minDuration : item.minDuration;
-        obj1.maxDuration = obj1.maxDuration >= item.maxDuration ? obj1.maxDuration : item.maxDuration;
-        obj1.children.push(this.getInitData(item));
+      if (vmMemoryStatFatherMap.has(item[firstLevel])) {
+        let vmMemoryStatFatherObj = vmMemoryStatFatherMap.get(item[firstLevel]);
+        vmMemoryStatFatherObj.count += item.count;
+        vmMemoryStatFatherObj.allDuration += item.allDuration;
+        vmMemoryStatFatherObj.minDuration = vmMemoryStatFatherObj.minDuration <= item.minDuration ? vmMemoryStatFatherObj.minDuration : item.minDuration;
+        vmMemoryStatFatherObj.maxDuration = vmMemoryStatFatherObj.maxDuration >= item.maxDuration ? vmMemoryStatFatherObj.maxDuration : item.maxDuration;
+        vmMemoryStatFatherObj.children.push(this.getInitData(item));
       } else {
-        fatherMap.set(item[firstLevel], {
+        vmMemoryStatFatherMap.set(item[firstLevel], {
           ...item,
           children: [this.getInitData(item)],
         });
       }
       if (idx == 0) {
-        allNode.minDuration = item.minDuration;
+        vmMemoryStatAllNode.minDuration = item.minDuration;
       } else {
-        allNode.minDuration = allNode.minDuration <= item.minDuration ? allNode.minDuration : item.minDuration;
+        vmMemoryStatAllNode.minDuration = vmMemoryStatAllNode.minDuration <= item.minDuration ? vmMemoryStatAllNode.minDuration : item.minDuration;
       }
-      allNode.count += item.count;
-      allNode.allDuration += item.allDuration;
-      allNode.maxDuration = allNode.maxDuration >= item.maxDuration ? allNode.maxDuration : item.maxDuration;
+      vmMemoryStatAllNode.count += item.count;
+      vmMemoryStatAllNode.allDuration += item.allDuration;
+      vmMemoryStatAllNode.maxDuration = vmMemoryStatAllNode.maxDuration >= item.maxDuration ? vmMemoryStatAllNode.maxDuration : item.maxDuration;
     });
 
-    for (let ks of fatherMap.keys()) {
-      let sp = fatherMap.get(ks);
+    for (let ks of vmMemoryStatFatherMap.keys()) {
+      let sp = vmMemoryStatFatherMap.get(ks);
       sp!.children = [];
       sp.avgDuration = sp.allDuration / sp.count;
-      let node = this.getInitData(sp, firstLevel == 'type' ? 'type' : 'pname', firstLevel == 'type' ? null : 'pid');
-      node.path = { type: null, tid: null, pid: null, value: node.title };
-      node.path[firstLevel == 'type' ? 'type' : 'pid'] = node[firstLevel == 'type' ? 'type' : 'pid'];
-      for (let kst of childMap.keys()) {
+      let vmMemoryStatNode = this.getInitData(sp, firstLevel == 'type' ? 'type' : 'pname', firstLevel == 'type' ? null : 'pid');
+      vmMemoryStatNode.path = { type: null, tid: null, pid: null, value: vmMemoryStatNode.title };
+      vmMemoryStatNode.path[firstLevel == 'type' ? 'type' : 'pid'] = vmMemoryStatNode[firstLevel == 'type' ? 'type' : 'pid'];
+      for (let kst of vmMemoryStatChildMap.keys()) {
         if (kst.startsWith(ks + '_')) {
-          let spt = childMap.get(kst);
+          let spt = vmMemoryStatChildMap.get(kst);
           let data = this.getInitData(
             spt!,
             firstLevel == 'type' ? 'pname' : 'tname',
@@ -193,59 +190,59 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
             type: null,
             tid: null,
             pid: null,
-            value: 'All-' + node.title + '-' + data.title,
+            value: 'All-' + vmMemoryStatNode.title + '-' + data.title,
           };
-          data.path[firstLevel == 'type' ? 'type' : 'pid'] = node[firstLevel == 'type' ? 'type' : 'pid'];
+          data.path[firstLevel == 'type' ? 'type' : 'pid'] = vmMemoryStatNode[firstLevel == 'type' ? 'type' : 'pid'];
           data.path[firstLevel == 'type' ? 'pid' : 'tid'] = data[firstLevel == 'type' ? 'pid' : 'tid'];
           data.children.forEach((e: any) => {
             e.path = {
               type: null,
               tid: null,
               pid: null,
-              value: 'All-' + node.title + '-' + data.title + '-' + e.title,
+              value: 'All-' + vmMemoryStatNode.title + '-' + data.title + '-' + e.title,
             };
-            e.path[firstLevel == 'type' ? 'type' : 'pid'] = node[firstLevel == 'type' ? 'type' : 'pid'];
+            e.path[firstLevel == 'type' ? 'type' : 'pid'] = vmMemoryStatNode[firstLevel == 'type' ? 'type' : 'pid'];
             e.path[firstLevel == 'type' ? 'pid' : 'tid'] = data[firstLevel == 'type' ? 'pid' : 'tid'];
             e.path[firstLevel == 'type' ? 'tid' : 'type'] = e[firstLevel == 'type' ? 'tid' : 'type'];
           });
           sp!.children.push(data);
         }
       }
-      allNode.children.push(node);
+      vmMemoryStatAllNode.children.push(vmMemoryStatNode);
     }
 
-    allNode.avgDuration = allNode.allDuration / allNode.count;
-    allNode = this.getInitData(allNode);
-    allNode.title = 'All';
-    allNode.path = { type: null, tid: null, pid: null, value: 'All' };
-    this.source = result.length > 0 ? [allNode] : [];
-    let newSource = JSON.parse(JSON.stringify(this.source));
-    if (this.sortType != 0 && result.length > 0) this.sortTable(newSource[0], this.sortKey);
-    this.tbl!.recycleDataSource = newSource;
+    vmMemoryStatAllNode.avgDuration = vmMemoryStatAllNode.allDuration / vmMemoryStatAllNode.count;
+    vmMemoryStatAllNode = this.getInitData(vmMemoryStatAllNode);
+    vmMemoryStatAllNode.title = 'All';
+    vmMemoryStatAllNode.path = { type: null, tid: null, pid: null, value: 'All' };
+    this.vmStatisticsSource = result.length > 0 ? [vmMemoryStatAllNode] : [];
+    let newSource = JSON.parse(JSON.stringify(this.vmStatisticsSource));
+    if (this.vmStatisticsSortType != 0 && result.length > 0) this.sortVmStatisticsTable(newSource[0], this.vmStatisticsSortKey);
+    this.vmStatisticsTbl!.recycleDataSource = newSource;
   }
 
-  sortTable(allNode: any, key: string) {
-    allNode.children.sort((a: any, b: any) => {
-      if (this.sortType == 1) {
-        return a.node[key] - b.node[key];
-      } else if (this.sortType == 2) {
-        return b.node[key] - a.node[key];
+  sortVmStatisticsTable(allNode: any, key: string) {
+    allNode.children.sort((vmStatNodeA: any, vmStatNodeB: any) => {
+      if (this.vmStatisticsSortType == 1) {
+        return vmStatNodeA.node[key] - vmStatNodeB.node[key];
+      } else if (this.vmStatisticsSortType == 2) {
+        return vmStatNodeB.node[key] - vmStatNodeA.node[key];
       }
     });
     allNode.children.forEach((item: any) => {
-      item.children.sort((a: any, b: any) => {
-        if (this.sortType == 1) {
-          return a.node[key] - b.node[key];
-        } else if (this.sortType == 2) {
-          return b.node[key] - a.node[key];
+      item.children.sort((vmStatNodeA: any, vmStatNodeB: any) => {
+        if (this.vmStatisticsSortType == 1) {
+          return vmStatNodeA.node[key] - vmStatNodeB.node[key];
+        } else if (this.vmStatisticsSortType == 2) {
+          return vmStatNodeB.node[key] - vmStatNodeA.node[key];
         }
       });
-      item.children.forEach((i: any) => {
-        i.children.sort((a: any, b: any) => {
-          if (this.sortType == 1) {
-            return a.node[key] - b.node[key];
-          } else if (this.sortType == 2) {
-            return b.node[key] - a.node[key];
+      item.children.forEach((vmStatItem: any) => {
+        vmStatItem.children.sort((vmStatItemA: any, vmStatItemB: any) => {
+          if (this.vmStatisticsSortType == 1) {
+            return vmStatItemA.node[key] - vmStatItemB.node[key];
+          } else if (this.vmStatisticsSortType == 2) {
+            return vmStatItemB.node[key] - vmStatItemA.node[key];
           }
         });
       });
@@ -260,14 +257,14 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .progress{
+        .vm-stat-progress{
             bottom: 5px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .vm-stat-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -277,23 +274,23 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
             z-index: 999999;
         }
         </style>
-        <lit-table id="tb-states" style="height: auto" tree>
-            <lit-table-column width="20%" title="Operation/Process/Thread" data-index="title" key="title" align="flex-start">
+        <lit-table id="tb-vm-statistics" style="height: auto" tree>
+            <lit-table-column class="vm-memory-stat-column" width="20%" title="Operation/Process/Thread" data-index="title" key="title" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count" align="flex-start" order>
+            <lit-table-column class="vm-memory-stat-column" width="1fr" title="Count" data-index="count" key="count" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration" data-index="allDuration" key="allDuration" align="flex-start" order>
+            <lit-table-column class="vm-memory-stat-column" width="1fr" title="Duration" data-index="allDuration" key="allDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min Duration" data-index="minDuration" key="minDuration" align="flex-start" order>
+            <lit-table-column class="vm-memory-stat-column" width="1fr" title="Min Duration" data-index="minDuration" key="minDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Avg Duration" data-index="avgDuration" key="avgDuration" align="flex-start" order>
+            <lit-table-column class="vm-memory-stat-column" width="1fr" title="Avg Duration" data-index="avgDuration" key="avgDuration" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max Duration" data-index="maxDuration" key="maxDuration" align="flex-start" order>
+            <lit-table-column class="vm-memory-stat-column" width="1fr" title="Max Duration" data-index="maxDuration" key="maxDuration" align="flex-start" order>
             </lit-table-column>
         </lit-table>
-        <lit-progress-bar class="progress"></lit-progress-bar>
+        <lit-progress-bar class="progress vm-stat-progress"></lit-progress-bar>
         <tab-pane-filter id="filter" sort></tab-pane-filter>
-        <div class="loading"></div>
+        <div class="loading vm-stat-loading"></div>
         `;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.ts b/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.ts
index c6e5dbbecbf5413b85ad271ef9f0bbaf7ae30895..7bdf737d195cb5f9529d77d76940172b86d4b69e 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.ts
@@ -24,29 +24,29 @@ import { procedurePool } from '../../../../database/Procedure.js';
 
 @element('tabpane-virtual-memory-statistics-analysis')
 export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
-  private pie: LitChartPie | null | undefined;
-  private currentSelection: SelectionParam | any;
-  private processData: any;
-  private pidData!: any[];
-  private threadData!: any[];
-  private soData!: any[];
-  private functionData!: any[];
-  private typeData!: any[];
-  private tableProcess: LitTable | null | undefined;
-  private tableType: LitTable | null | undefined;
-  private tableThread: LitTable | null | undefined;
-  private tableSo: LitTable | null | undefined;
-  private tableFunction: LitTable | null | undefined;
+  private vmStatisticsAnalysisPie: LitChartPie | null | undefined;
+  private vmStatisticsAnalysisCurrentSelection: SelectionParam | any;
+  private vmStatisticsAnalysisProcessData: any;
+  private vmStatisticsAnalysisPidData!: any[];
+  private vmStatisticsAnalysisThreadData!: any[];
+  private vmStatisticsAnalysisSoData!: any[];
+  private vmStatisticsAnalysisFunctionData!: any[];
+  private vmStatisticsAnalysisTypeData!: any[];
+  private vmStatisticsAnalysisTableProcess: LitTable | null | undefined;
+  private vmStatisticsAnalysisTableType: LitTable | null | undefined;
+  private vmStatisticsAnalysisTableThread: LitTable | null | undefined;
+  private vmStatisticsAnalysisTableSo: LitTable | null | undefined;
+  private vmStatisticsAnalysisTableFunction: LitTable | null | undefined;
   private sumDur: any;
-  private range: HTMLLabelElement | null | undefined;
+  private vmStatisticsAnalysisRange: HTMLLabelElement | null | undefined;
   private back: HTMLDivElement | null | undefined;
   private tabName: HTMLDivElement | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
+  private vmStatisticsAnalysisProgressEL: LitProgressBar | null | undefined;
   private processName: string = '';
   private typeName: string = '';
   private threadName: string = '';
-  private sortColumn: string = '';
-  private sortType: number = 0;
+  private vmStatisticsAnalysisSortColumn: string = '';
+  private vmStatisticsAnalysisSortType: number = 0;
   private currentLevel = -1;
   private currentLevelData!: Array<any>;
   private processStatisticsData!: any;
@@ -54,25 +54,25 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
   private threadStatisticsData!: any;
   private libStatisticsData!: any;
   private functionStatisticsData!: any;
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
-      this.pidData.unshift(this.processStatisticsData);
-      this.tableProcess!.recycleDataSource = this.pidData;
+  set data(vmStatisticsAnalysisSelection: SelectionParam | any) {
+    if (vmStatisticsAnalysisSelection == this.vmStatisticsAnalysisCurrentSelection) {
+      this.vmStatisticsAnalysisPidData.unshift(this.processStatisticsData);
+      this.vmStatisticsAnalysisTableProcess!.recycleDataSource = this.vmStatisticsAnalysisPidData;
       // @ts-ignore
-      this.pidData.shift(this.processStatisticsData);
+      this.vmStatisticsAnalysisPidData.shift(this.processStatisticsData);
       return;
     }
     this.clearData();
-    this.currentSelection = val;
-    this.tableProcess!.style.display = 'grid';
-    this.tableType!.style.display = 'none';
-    this.tableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'none';
-    this.tableFunction!.style.display = 'none';
+    this.vmStatisticsAnalysisCurrentSelection = vmStatisticsAnalysisSelection;
+    this.vmStatisticsAnalysisTableProcess!.style.display = 'grid';
+    this.vmStatisticsAnalysisTableType!.style.display = 'none';
+    this.vmStatisticsAnalysisTableThread!.style.display = 'none';
+    this.vmStatisticsAnalysisTableSo!.style.display = 'none';
+    this.vmStatisticsAnalysisTableFunction!.style.display = 'none';
     this.back!.style.visibility = 'hidden';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    this.progressEL!.loading = true;
+    this.vmStatisticsAnalysisRange!.textContent =
+      'Selected range: ' + parseFloat(((vmStatisticsAnalysisSelection.rightNs - vmStatisticsAnalysisSelection.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    this.vmStatisticsAnalysisProgressEL!.loading = true;
     this.getDataByWorker(
       [
         {
@@ -81,74 +81,74 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         },
         {
           funcName: 'getCurrentDataFromDb',
-          funcArgs: [{ queryFuncName: 'virtualMemory', ...val }],
+          funcArgs: [{ queryFuncName: 'virtualMemory', ...vmStatisticsAnalysisSelection }],
         },
       ],
       (results: any[]) => {
-        this.getVirtualMemoryProcess(val, results);
+        this.getVirtualMemoryProcess(vmStatisticsAnalysisSelection, results);
       }
     );
   }
   initElements(): void {
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
-    this.tableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
-    this.tableType = this.shadowRoot!.querySelector<LitTable>('#tb-type-usage');
-    this.tableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
-    this.tableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
-    this.tableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
+    this.vmStatisticsAnalysisRange = this.shadowRoot?.querySelector('#time-range');
+    this.vmStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.vmStatisticsAnalysisTableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
+    this.vmStatisticsAnalysisTableType = this.shadowRoot!.querySelector<LitTable>('#tb-type-usage');
+    this.vmStatisticsAnalysisTableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
+    this.vmStatisticsAnalysisTableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
+    this.vmStatisticsAnalysisTableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
     this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
     this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.subheading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
+    this.vmStatisticsAnalysisProgressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
     this.goBack();
   }
   clearData() {
-    this.pie!.dataSource = [];
-    this.tableProcess!.recycleDataSource = [];
-    this.tableType!.recycleDataSource = [];
-    this.tableThread!.recycleDataSource = [];
-    this.tableSo!.recycleDataSource = [];
-    this.tableFunction!.recycleDataSource = [];
+    this.vmStatisticsAnalysisPie!.dataSource = [];
+    this.vmStatisticsAnalysisTableProcess!.recycleDataSource = [];
+    this.vmStatisticsAnalysisTableType!.recycleDataSource = [];
+    this.vmStatisticsAnalysisTableThread!.recycleDataSource = [];
+    this.vmStatisticsAnalysisTableSo!.recycleDataSource = [];
+    this.vmStatisticsAnalysisTableFunction!.recycleDataSource = [];
   }
   goBack() {
     this.back!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By type AllDuration') {
-        this.tableProcess!.style.display = 'grid';
-        this.tableType!.style.display = 'none';
+        this.vmStatisticsAnalysisTableProcess!.style.display = 'grid';
+        this.vmStatisticsAnalysisTableType!.style.display = 'none';
         this.back!.style.visibility = 'hidden';
-        this.tableType!.setAttribute('hideDownload', '');
-        this.tableProcess?.removeAttribute('hideDownload');
+        this.vmStatisticsAnalysisTableType!.setAttribute('hideDownload', '');
+        this.vmStatisticsAnalysisTableProcess?.removeAttribute('hideDownload');
         this.currentLevel = 0;
-        this.processPieChart(this.currentSelection);
+        this.processPieChart(this.vmStatisticsAnalysisCurrentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Thread AllDuration') {
-        this.tableType!.style.display = 'grid';
-        this.tableThread!.style.display = 'none';
-        this.tableThread!.setAttribute('hideDownload', '');
-        this.tableType?.removeAttribute('hideDownload');
+        this.vmStatisticsAnalysisTableType!.style.display = 'grid';
+        this.vmStatisticsAnalysisTableThread!.style.display = 'none';
+        this.vmStatisticsAnalysisTableThread!.setAttribute('hideDownload', '');
+        this.vmStatisticsAnalysisTableType?.removeAttribute('hideDownload');
         this.currentLevel = 1;
-        this.typePieChart(this.currentSelection);
+        this.typePieChart(this.vmStatisticsAnalysisCurrentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Library AllDuration') {
-        this.tableThread!.style.display = 'grid';
-        this.tableSo!.style.display = 'none';
-        this.tableSo!.setAttribute('hideDownload', '');
-        this.tableThread?.removeAttribute('hideDownload');
+        this.vmStatisticsAnalysisTableThread!.style.display = 'grid';
+        this.vmStatisticsAnalysisTableSo!.style.display = 'none';
+        this.vmStatisticsAnalysisTableSo!.setAttribute('hideDownload', '');
+        this.vmStatisticsAnalysisTableThread?.removeAttribute('hideDownload');
         this.currentLevel = 2;
-        this.threadPieChart(this.currentSelection);
+        this.threadPieChart(this.vmStatisticsAnalysisCurrentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Function AllDuration') {
-        this.tableSo!.style.display = 'grid';
-        this.tableFunction!.style.display = 'none';
-        this.tableFunction!.setAttribute('hideDownload', '');
-        this.tableSo?.removeAttribute('hideDownload');
+        this.vmStatisticsAnalysisTableSo!.style.display = 'grid';
+        this.vmStatisticsAnalysisTableFunction!.style.display = 'none';
+        this.vmStatisticsAnalysisTableFunction!.setAttribute('hideDownload', '');
+        this.vmStatisticsAnalysisTableSo?.removeAttribute('hideDownload');
         this.currentLevel = 3;
-        this.libraryPieChart(this.currentSelection);
+        this.libraryPieChart(this.vmStatisticsAnalysisCurrentSelection);
       }
     });
   }
   processPieChart(val: any) {
     this.sumDur = this.processStatisticsData.allDuration;
-    this.pie!.config = {
+    this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.pidData),
+      data: this.getPieChartData(this.vmStatisticsAnalysisPidData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -168,22 +168,22 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableProcess!.style.display = 'none';
-          this.tableType!.style.display = 'grid';
-          this.tableProcess!.setAttribute('hideDownload', '');
-          this.tableType?.removeAttribute('hideDownload');
+          this.vmStatisticsAnalysisTableProcess!.style.display = 'none';
+          this.vmStatisticsAnalysisTableType!.style.display = 'grid';
+          this.vmStatisticsAnalysisTableProcess!.setAttribute('hideDownload', '');
+          this.vmStatisticsAnalysisTableType?.removeAttribute('hideDownload');
           this.getVirtualMemoryType(it, val);
           // @ts-ignore
           this.processName = it.tableName;
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
-          this.pie?.hideTip();
+          this.vmStatisticsAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableProcess!.setCurrentHover(data);
+          this.vmStatisticsAnalysisTableProcess!.setCurrentHover(data);
         } else {
-          this.tableProcess!.mouseOut();
+          this.vmStatisticsAnalysisTableProcess!.mouseOut();
         }
       },
       interactions: [
@@ -192,34 +192,34 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableProcess!.addEventListener('row-hover', (evt: any) => {
+    this.vmStatisticsAnalysisTableProcess!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let vmsData = evt.detail.data;
+        vmsData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.vmStatisticsAnalysisPie?.showHover();
+      this.vmStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
     this.tabName!.textContent = 'Statistic By Process AllDuration';
-    this.pidData.unshift(this.processStatisticsData);
-    this.tableProcess!.recycleDataSource = this.pidData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.pidData));
+    this.vmStatisticsAnalysisPidData.unshift(this.processStatisticsData);
+    this.vmStatisticsAnalysisTableProcess!.recycleDataSource = this.vmStatisticsAnalysisPidData;
     // @ts-ignore
-    this.pidData.shift(this.processStatisticsData);
-    this.tableProcess?.reMeauseHeight();
-    this.tableProcess!.addEventListener('column-click', (evt) => {
+    this.vmStatisticsAnalysisPidData.shift(this.processStatisticsData);
+    this.currentLevelData = this.vmStatisticsAnalysisPidData;
+    this.vmStatisticsAnalysisTableProcess?.reMeauseHeight();
+    this.vmStatisticsAnalysisTableProcess!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
   typePieChart(val: any) {
-    this.pie!.config = {
+    this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.typeData,
+      data: this.vmStatisticsAnalysisTypeData,
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -237,22 +237,22 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       angleClick: (it) => {
         // @ts-ignore
         this.clearData();
-        this.tableType!.style.display = 'none';
-        this.tableThread!.style.display = 'grid';
-        this.tableType!.setAttribute('hideDownload', '');
-        this.tableThread?.removeAttribute('hideDownload');
+        this.vmStatisticsAnalysisTableType!.style.display = 'none';
+        this.vmStatisticsAnalysisTableThread!.style.display = 'grid';
+        this.vmStatisticsAnalysisTableType!.setAttribute('hideDownload', '');
+        this.vmStatisticsAnalysisTableThread?.removeAttribute('hideDownload');
         this.getVirtualMemoryThread(it, val);
         // @ts-ignore
         this.typeName = it.tableName;
-        this.pie?.hideTip();
+        this.vmStatisticsAnalysisPie?.hideTip();
         this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
           this.processName + ' / ' + this.typeName;
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableType!.setCurrentHover(data);
+          this.vmStatisticsAnalysisTableType!.setCurrentHover(data);
         } else {
-          this.tableType!.mouseOut();
+          this.vmStatisticsAnalysisTableType!.mouseOut();
         }
       },
       interactions: [
@@ -261,35 +261,35 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableType!.addEventListener('row-hover', (evt: any) => {
+    this.vmStatisticsAnalysisTableType!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let satData = evt.detail.data;
+        satData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.vmStatisticsAnalysisPie?.showHover();
+      this.vmStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
     this.tabName!.textContent = 'Statistic By type AllDuration';
-    this.typeData.unshift(this.typeStatisticsData);
-    this.tableType!.recycleDataSource = this.typeData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.typeData));
+    this.vmStatisticsAnalysisTypeData.unshift(this.typeStatisticsData);
+    this.vmStatisticsAnalysisTableType!.recycleDataSource = this.vmStatisticsAnalysisTypeData;
     // @ts-ignore
-    this.typeData.shift(this.typeStatisticsData);
-    this.tableType?.reMeauseHeight();
-    this.tableType!.addEventListener('column-click', (evt) => {
+    this.vmStatisticsAnalysisTypeData.shift(this.typeStatisticsData);
+    this.currentLevelData = this.vmStatisticsAnalysisTypeData;
+    this.vmStatisticsAnalysisTableType?.reMeauseHeight();
+    this.vmStatisticsAnalysisTableType!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
   threadPieChart(val: any) {
     this.sumDur = this.threadStatisticsData.allDuration;
-    this.pie!.config = {
+    this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.threadData),
+      data: this.getPieChartData(this.vmStatisticsAnalysisThreadData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -309,23 +309,23 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableThread!.style.display = 'none';
-          this.tableSo!.style.display = 'grid';
-          this.tableThread!.setAttribute('hideDownload', '');
-          this.tableSo?.removeAttribute('hideDownload');
+          this.vmStatisticsAnalysisTableThread!.style.display = 'none';
+          this.vmStatisticsAnalysisTableSo!.style.display = 'grid';
+          this.vmStatisticsAnalysisTableThread!.setAttribute('hideDownload', '');
+          this.vmStatisticsAnalysisTableSo?.removeAttribute('hideDownload');
           this.getVirtualMemorySo(it, val);
           // @ts-ignore
           this.threadName = it.tableName;
-          this.pie?.hideTip();
+          this.vmStatisticsAnalysisPie?.hideTip();
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
             this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
         }
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableThread!.setCurrentHover(data);
+          this.vmStatisticsAnalysisTableThread!.setCurrentHover(data);
         } else {
-          this.tableThread!.mouseOut();
+          this.vmStatisticsAnalysisTableThread!.mouseOut();
         }
       },
       interactions: [
@@ -334,35 +334,35 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableThread!.addEventListener('row-hover', (evt: any) => {
+    this.vmStatisticsAnalysisTableThread!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let threadData = evt.detail.data;
+        threadData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.vmStatisticsAnalysisPie?.showHover();
+      this.vmStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName + ' / ' + this.typeName;
     this.tabName!.textContent = 'Statistic By Thread AllDuration';
-    this.threadData.unshift(this.threadStatisticsData);
-    this.tableThread!.recycleDataSource = this.threadData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.threadData));
+    this.vmStatisticsAnalysisThreadData.unshift(this.threadStatisticsData);
+    this.vmStatisticsAnalysisTableThread!.recycleDataSource = this.vmStatisticsAnalysisThreadData;
     // @ts-ignore
-    this.threadData.shift(this.threadStatisticsData);
-    this.tableThread?.reMeauseHeight();
-    this.tableThread!.addEventListener('column-click', (evt) => {
+    this.vmStatisticsAnalysisThreadData.shift(this.threadStatisticsData);
+    this.currentLevelData = this.vmStatisticsAnalysisThreadData;
+    this.vmStatisticsAnalysisTableThread?.reMeauseHeight();
+    this.vmStatisticsAnalysisTableThread!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
   libraryPieChart(val: any) {
     this.sumDur = this.libStatisticsData.allDuration;
-    this.pie!.config = {
+    this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.soData),
+      data: this.getPieChartData(this.vmStatisticsAnalysisSoData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -382,12 +382,12 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableSo!.style.display = 'none';
-          this.tableFunction!.style.display = 'grid';
-          this.tableSo!.setAttribute('hideDownload', '');
-          this.tableFunction?.removeAttribute('hideDownload');
+          this.vmStatisticsAnalysisTableSo!.style.display = 'none';
+          this.vmStatisticsAnalysisTableFunction!.style.display = 'grid';
+          this.vmStatisticsAnalysisTableSo!.setAttribute('hideDownload', '');
+          this.vmStatisticsAnalysisTableFunction?.removeAttribute('hideDownload');
           this.getVirtualMemoryFunction(it, val);
-          this.pie?.hideTip();
+          this.vmStatisticsAnalysisPie?.hideTip();
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
             // @ts-ignore
             this.processName + ' / ' + this.typeName + ' / ' + this.threadName + ' / ' + it.tableName;
@@ -395,9 +395,9 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableSo!.setCurrentHover(data);
+          this.vmStatisticsAnalysisTableSo!.setCurrentHover(data);
         } else {
-          this.tableSo!.mouseOut();
+          this.vmStatisticsAnalysisTableSo!.mouseOut();
         }
       },
       interactions: [
@@ -406,84 +406,80 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableSo!.addEventListener('row-hover', (evt: any) => {
+    this.vmStatisticsAnalysisTableSo!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
-        let data = evt.detail.data;
-        data.isHover = true;
+        let soData = evt.detail.data;
+        soData.isHover = true;
         if ((evt.detail as any).callBack) {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.vmStatisticsAnalysisPie?.showHover();
+      this.vmStatisticsAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
       this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
     this.tabName!.textContent = 'Statistic By Library AllDuration';
-    this.soData.unshift(this.libStatisticsData);
-    this.tableSo!.recycleDataSource = this.soData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.soData));
+    this.vmStatisticsAnalysisSoData.unshift(this.libStatisticsData);
+    this.vmStatisticsAnalysisTableSo!.recycleDataSource = this.vmStatisticsAnalysisSoData;
     // @ts-ignore
-    this.soData.shift(this.libStatisticsData);
-    this.tableSo?.reMeauseHeight();
-    this.tableSo!.addEventListener('column-click', (evt) => {
+    this.vmStatisticsAnalysisSoData.shift(this.libStatisticsData);
+    this.currentLevelData = this.vmStatisticsAnalysisSoData;
+    this.vmStatisticsAnalysisTableSo?.reMeauseHeight();
+    this.vmStatisticsAnalysisTableSo!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
-  sortByColumn(column: string, sort: number) {
-    this.sortColumn = column;
-    this.sortType = sort;
-    let currentTable: LitTable | null | undefined;
+  sortByColumn(column: string, vmsSort: number) {
+    this.vmStatisticsAnalysisSortColumn = column;
+    this.vmStatisticsAnalysisSortType = vmsSort;
+    let vmsCurrentTable: LitTable | null | undefined;
     switch (this.currentLevel) {
       case 0:
-        currentTable = this.tableProcess;
+        vmsCurrentTable = this.vmStatisticsAnalysisTableProcess;
         break;
       case 1:
-        currentTable = this.tableType;
+        vmsCurrentTable = this.vmStatisticsAnalysisTableType;
         break;
       case 2:
-        currentTable = this.tableThread;
+        vmsCurrentTable = this.vmStatisticsAnalysisTableThread;
         break;
       case 3:
-        currentTable = this.tableSo;
+        vmsCurrentTable = this.vmStatisticsAnalysisTableSo;
         break;
       case 4:
-        currentTable = this.tableFunction;
+        vmsCurrentTable = this.vmStatisticsAnalysisTableFunction;
         break;
     }
-    if (!currentTable) {
+    if (!vmsCurrentTable) {
       return;
     }
-    if (sort == 0) {
-      currentTable!.recycleDataSource = this.currentLevelData;
-    } else {
-      let arr = [...this.currentLevelData];
+    if (vmsSort == 0) {
+      let vmsArr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          // @ts-ignore
-          arr.shift(this.processStatisticsData);
+          vmsArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          // @ts-ignore
-          arr.shift(this.typeStatisticsData);
+          vmsArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          // @ts-ignore
-          arr.shift(this.threadStatisticsData);
+          vmsArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          // @ts-ignore
-          arr.shift(this.libStatisticsData);
+          vmsArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          // @ts-ignore
-          arr.shift(this.functionStatisticsData);
+          vmsArr.unshift(this.functionStatisticsData);
           break;
       }
+      vmsCurrentTable!.recycleDataSource = vmsArr;
+    } else {
+      let vmsArr = [...this.currentLevelData];
       if (column == 'tableName') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          if (sort == 1) {
+        vmsCurrentTable!.recycleDataSource = vmsArr.sort((a, b) => {
+          if (vmsSort == 1) {
             if (a.tableName > b.tableName) {
               return 1;
             } else if (a.tableName == b.tableName) {
@@ -502,54 +498,57 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
           }
         });
       } else if (column == 'durFormat') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.duration - b.duration : b.duration - a.duration;
+        vmsCurrentTable!.recycleDataSource = vmsArr.sort((a, b) => {
+          return vmsSort == 1 ? a.duration - b.duration : b.duration - a.duration;
         });
       } else if (column == 'percent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.duration - b.duration : b.duration - a.v;
+        vmsCurrentTable!.recycleDataSource = vmsArr.sort((a, b) => {
+          return vmsSort == 1 ? a.duration - b.duration : b.duration - a.v;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          arr.unshift(this.processStatisticsData);
+          vmsArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          arr.unshift(this.typeStatisticsData);
+          vmsArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          arr.unshift(this.threadStatisticsData);
+          vmsArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          arr.unshift(this.libStatisticsData);
+          vmsArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          arr.unshift(this.functionStatisticsData);
+          vmsArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = arr;
+      vmsCurrentTable!.recycleDataSource = vmsArr;
     }
   }
   getVirtualMemoryProcess(val: any, result: Array<any>) {
-    this.progressEL!.loading = true;
-    this.processData = JSON.parse(JSON.stringify(result));
-    if (!this.processData || this.processData.length == 0) {
+    this.vmStatisticsAnalysisProgressEL!.loading = true;
+    this.vmStatisticsAnalysisProcessData = JSON.parse(JSON.stringify(result));
+    if (!this.vmStatisticsAnalysisProcessData || this.vmStatisticsAnalysisProcessData.length == 0) {
+      this.vmStatisticsAnalysisPidData = [];
+      this.processStatisticsData = [];
+      this.processPieChart(val);
       return;
     }
     let allDur = 0;
-    let pidMap = new Map<string, Array<any>>();
+    let vmMap = new Map<string, Array<any>>();
     for (let itemData of result) {
       allDur += itemData.dur;
-      if (pidMap.has(itemData.pid)) {
-        pidMap.get(itemData.pid)?.push(itemData);
+      if (vmMap.has(itemData.pid)) {
+        vmMap.get(itemData.pid)?.push(itemData);
       } else {
         let itemArray = new Array<any>();
         itemArray.push(itemData);
-        pidMap.set(itemData.pid, itemArray);
+        vmMap.set(itemData.pid, itemArray);
       }
     }
-    this.pidData = [];
-    pidMap.forEach((value: Array<any>, key: string) => {
+    this.vmStatisticsAnalysisPidData = [];
+    vmMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       let pName = '';
       for (let item of value) {
@@ -566,36 +565,36 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.pidData.push(pidData);
+      this.vmStatisticsAnalysisPidData.push(pidData);
     });
-    this.pidData.sort((a, b) => b.duration - a.duration);
+    this.vmStatisticsAnalysisPidData.sort((a, b) => b.duration - a.duration);
     this.processStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 0;
-    this.progressEL!.loading = false;
+    this.vmStatisticsAnalysisProgressEL!.loading = false;
     this.processPieChart(val);
   }
   getVirtualMemoryType(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.vmStatisticsAnalysisProgressEL!.loading = true;
     let typeMap = new Map<string, Array<any>>();
     let pid = item.pid;
     let allDur = 0;
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.vmStatisticsAnalysisProcessData || this.vmStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid) {
+    for (let vmsItem of this.vmStatisticsAnalysisProcessData) {
+      if (vmsItem.pid !== pid) {
         continue;
       }
-      allDur += itemData.dur;
-      if (typeMap.has(itemData.type)) {
-        typeMap.get(itemData.type)?.push(itemData);
+      allDur += vmsItem.dur;
+      if (typeMap.has(vmsItem.type)) {
+        typeMap.get(vmsItem.type)?.push(vmsItem);
       } else {
         let itemArray = new Array<any>();
-        itemArray.push(itemData);
-        typeMap.set(itemData.type, itemArray);
+        itemArray.push(vmsItem);
+        typeMap.set(vmsItem.type, itemArray);
       }
     }
-    this.typeData = [];
+    this.vmStatisticsAnalysisTypeData = [];
     typeMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       for (let item of value) {
@@ -609,37 +608,37 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.typeData.push(typeData);
+      this.vmStatisticsAnalysisTypeData.push(typeData);
     });
-    this.typeData.sort((a, b) => b.duration - a.duration);
+    this.vmStatisticsAnalysisTypeData.sort((a, b) => b.duration - a.duration);
     this.typeStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 1;
     this.typePieChart(val);
-    this.progressEL!.loading = false;
+    this.vmStatisticsAnalysisProgressEL!.loading = false;
   }
   getVirtualMemoryThread(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.vmStatisticsAnalysisProgressEL!.loading = true;
     let threadMap = new Map<string, Array<any>>();
     let pid = item.pid;
     let type = item.type;
     let allDur = 0;
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.vmStatisticsAnalysisProcessData || this.vmStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.type !== type) {
+    for (let vmapItem of this.vmStatisticsAnalysisProcessData) {
+      if (vmapItem.pid !== pid || vmapItem.type !== type) {
         continue;
       }
-      allDur += itemData.dur;
-      if (threadMap.has(itemData.tid)) {
-        threadMap.get(itemData.tid)?.push(itemData);
+      allDur += vmapItem.dur;
+      if (threadMap.has(vmapItem.tid)) {
+        threadMap.get(vmapItem.tid)?.push(vmapItem);
       } else {
         let itemArray = new Array<any>();
-        itemArray.push(itemData);
-        threadMap.set(itemData.tid, itemArray);
+        itemArray.push(vmapItem);
+        threadMap.set(vmapItem.tid, itemArray);
       }
     }
-    this.threadData = [];
+    this.vmStatisticsAnalysisThreadData = [];
     threadMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       let tName = '';
@@ -657,54 +656,54 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.threadData.push(threadData);
+      this.vmStatisticsAnalysisThreadData.push(threadData);
     });
-    this.threadData.sort((a, b) => b.duration - a.duration);
+    this.vmStatisticsAnalysisThreadData.sort((a, b) => b.duration - a.duration);
     this.threadStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 2;
-    this.progressEL!.loading = false;
+    this.vmStatisticsAnalysisProgressEL!.loading = false;
     this.threadPieChart(val);
   }
   getVirtualMemorySo(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.vmStatisticsAnalysisProgressEL!.loading = true;
     let tid = item.tid;
     let pid = item.pid;
     let type = item.type;
     let allDur = 0;
     let libMap = new Map<number, Array<any>>();
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.vmStatisticsAnalysisProcessData || this.vmStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.tid !== tid || itemData.type !== type) {
+    for (let vmItemData of this.vmStatisticsAnalysisProcessData) {
+      if (vmItemData.pid !== pid || vmItemData.tid !== tid || vmItemData.type !== type) {
         continue;
       }
-      allDur += itemData.dur;
-      if (libMap.has(itemData.libId)) {
-        libMap.get(itemData.libId)?.push(itemData);
+      allDur += vmItemData.dur;
+      if (libMap.has(vmItemData.libId)) {
+        libMap.get(vmItemData.libId)?.push(vmItemData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(itemData);
-        libMap.set(itemData.libId, dataArray);
+        dataArray.push(vmItemData);
+        libMap.set(vmItemData.libId, dataArray);
       }
     }
-    this.soData = [];
+    this.vmStatisticsAnalysisSoData = [];
     libMap.forEach((value: any[], key: number) => {
       let dur = 0;
-      let libName = '';
+      let vmLibName = '';
       for (let item of value) {
         dur += item.dur;
         if (key == null) {
           item.libName = 'unkown';
         }
-        libName = item.libName;
+        vmLibName = item.libName;
       }
-      let libPath = libName?.split('/');
+      let libPath = vmLibName?.split('/');
       if (libPath) {
-        libName = libPath[libPath.length - 1];
+        vmLibName = libPath[libPath.length - 1];
       }
       const soData = {
-        tableName: libName,
+        tableName: vmLibName,
         pid: item.pid,
         type: item.type,
         tid: item.tid,
@@ -713,17 +712,17 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.soData.push(soData);
+      this.vmStatisticsAnalysisSoData.push(soData);
     });
-    this.soData.sort((a, b) => b.duration - a.duration);
+    this.vmStatisticsAnalysisSoData.sort((a, b) => b.duration - a.duration);
     this.libStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 3;
-    this.progressEL!.loading = false;
+    this.vmStatisticsAnalysisProgressEL!.loading = false;
     this.libraryPieChart(val);
   }
 
   getVirtualMemoryFunction(item: any, val: any) {
-    this.progressEL!.loading = true;
+    this.vmStatisticsAnalysisProgressEL!.loading = true;
     this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function AllDuration';
     let tid = item.tid;
     let pid = item.pid;
@@ -731,23 +730,23 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     let libId = item.libId;
     let allDur = 0;
     let symbolMap = new Map<number, Array<any>>();
-    if (!this.processData || this.processData.length == 0) {
+    if (!this.vmStatisticsAnalysisProcessData || this.vmStatisticsAnalysisProcessData.length == 0) {
       return;
     }
-    for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.tid !== tid || itemData.type !== type || itemData.libId !== libId) {
+    for (let vmProcessData of this.vmStatisticsAnalysisProcessData) {
+      if (vmProcessData.pid !== pid || vmProcessData.tid !== tid || vmProcessData.type !== type || vmProcessData.libId !== libId) {
         continue;
       }
-      allDur += itemData.dur;
-      if (symbolMap.has(itemData.symbolId)) {
-        symbolMap.get(itemData.symbolId)?.push(itemData);
+      allDur += vmProcessData.dur;
+      if (symbolMap.has(vmProcessData.symbolId)) {
+        symbolMap.get(vmProcessData.symbolId)?.push(vmProcessData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(itemData);
-        symbolMap.set(itemData.symbolId, dataArray);
+        dataArray.push(vmProcessData);
+        symbolMap.set(vmProcessData.symbolId, dataArray);
       }
     }
-    this.functionData = [];
+    this.vmStatisticsAnalysisFunctionData = [];
     symbolMap.forEach((symbolItems, key) => {
       let dur = 0;
       let symbolName = '';
@@ -767,16 +766,16 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.functionData.push(symbolData);
+      this.vmStatisticsAnalysisFunctionData.push(symbolData);
     });
-    this.functionData.sort((a, b) => b.duration - a.duration);
+    this.vmStatisticsAnalysisFunctionData.sort((a, b) => b.duration - a.duration);
     this.functionStatisticsData = this.totalDurationData(allDur);
     this.currentLevel = 4;
     this.sumDur = this.libStatisticsData.allDuration;
-    this.progressEL!.loading = false;
-    this.pie!.config = {
+    this.vmStatisticsAnalysisProgressEL!.loading = false;
+    this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.functionData),
+      data: this.getPieChartData(this.vmStatisticsAnalysisFunctionData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -793,9 +792,9 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableFunction!.setCurrentHover(data);
+          this.vmStatisticsAnalysisTableFunction!.setCurrentHover(data);
         } else {
-          this.tableFunction!.mouseOut();
+          this.vmStatisticsAnalysisTableFunction!.mouseOut();
         }
       },
       interactions: [
@@ -804,7 +803,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableFunction!.addEventListener('row-hover', (evt: any) => {
+    this.vmStatisticsAnalysisTableFunction!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -812,16 +811,16 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.vmStatisticsAnalysisPie?.showHover();
+      this.vmStatisticsAnalysisPie?.hideTip();
     });
-    this.functionData.unshift(this.functionStatisticsData);
-    this.tableFunction!.recycleDataSource = this.functionData;
-    this.tableFunction?.reMeauseHeight();
-    this.currentLevelData = JSON.parse(JSON.stringify(this.functionData));
+    this.vmStatisticsAnalysisFunctionData.unshift(this.functionStatisticsData);
+    this.vmStatisticsAnalysisTableFunction!.recycleDataSource = this.vmStatisticsAnalysisFunctionData;
+    this.vmStatisticsAnalysisTableFunction?.reMeauseHeight();
     // @ts-ignore
-    this.functionData.shift(this.functionStatisticsData);
-    this.tableFunction!.addEventListener('column-click', (evt) => {
+    this.vmStatisticsAnalysisFunctionData.shift(this.functionStatisticsData);
+    this.currentLevelData = this.vmStatisticsAnalysisFunctionData;
+    this.vmStatisticsAnalysisTableFunction!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
@@ -845,8 +844,8 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     };
     return allDuration;
   }
-  getPieChartData(res: any[]) {
-    if (res.length > 20) {
+  getPieChartData(vmRes: any[]) {
+    if (vmRes.length > 20) {
       let pieChartArr: any[] = [];
       let other: any = {
         tableName: 'other',
@@ -854,11 +853,11 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         percent: 0,
         durFormat: 0,
       };
-      for (let i = 0; i < res.length; i++) {
+      for (let i = 0; i < vmRes.length; i++) {
         if (i < 19) {
-          pieChartArr.push(res[i]);
+          pieChartArr.push(vmRes[i]);
         } else {
-          other.duration += res[i].duration;
+          other.duration += vmRes[i].duration;
           other.durFormat = Utils.getProbablyTime(other.duration);
           other.percent = ((other.duration / this.sumDur) * 100).toFixed(2);
         }
@@ -866,7 +865,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       pieChartArr.push(other);
       return pieChartArr;
     }
-    return res;
+    return vmRes;
   }
 
   getDataByWorker(args: any[], handler: Function) {
@@ -877,7 +876,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       undefined,
       (results: any) => {
         handler(results);
-        this.progressEL!.loading = false;
+        this.vmStatisticsAnalysisProgressEL!.loading = false;
       }
     );
   }
diff --git a/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts b/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts
index 4ff9e8afcf066daf4ee0cfd330f56274c777c5f9..6c3816aceb8ba5c22fb121f934953c1a6777f009 100644
--- a/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts
+++ b/ide/src/trace/component/trace/sheet/fps/TabPaneFps.ts
@@ -19,65 +19,63 @@ import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabFps } from '../../../../database/SqlLite.js';
 import { Utils } from '../../base/Utils.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-fps')
 export class TabPaneFps extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
+  private fpsTbl: LitTable | null | undefined;
+  private fpsRange: HTMLLabelElement | null | undefined;
 
-  set data(val: SelectionParam | any) {
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    getTabFps(val.leftNs, val.rightNs).then((result) => {
-      if (result != null && result.length > 0) {
-        log('getTabFps result size : ' + result.length);
+  set data(fpsSelection: SelectionParam | any) {
+    this.fpsRange!.textContent =
+      'Selected range: ' + parseFloat(((fpsSelection.rightNs - fpsSelection.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    getTabFps(fpsSelection.leftNs, fpsSelection.rightNs).then((fpsResult) => {
+      if (fpsResult != null && fpsResult.length > 0) {
+        log('getTabFps result size : ' + fpsResult.length);
 
-        let index = result.findIndex((d) => d.startNS >= val.leftNs);
+        let index = fpsResult.findIndex((d) => d.startNS >= fpsSelection.leftNs);
         if (index != -1) {
-          let arr = result.splice(index > 0 ? index - 1 : index);
+          let arr = fpsResult.splice(index > 0 ? index - 1 : index);
           arr.map((e) => (e.timeStr = Utils.getTimeString(e.startNS)));
-          this.tbl!.recycleDataSource = arr;
+          this.fpsTbl!.recycleDataSource = arr;
         } else {
-          let last = result[result.length - 1];
+          let last = fpsResult[fpsResult.length - 1];
           last.timeStr = Utils.getTimeString(last.startNS);
-          this.tbl!.recycleDataSource = [last];
+          this.fpsTbl!.recycleDataSource = [last];
         }
       } else {
-        this.tbl!.recycleDataSource = [];
+        this.fpsTbl!.recycleDataSource = [];
       }
     });
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-fps');
-    this.range = this.shadowRoot?.querySelector('#time-range');
+    this.fpsTbl = this.shadowRoot?.querySelector<LitTable>('#tb-fps');
+    this.fpsRange = this.shadowRoot?.querySelector('#fps-time-range');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.fpsTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .fps-label{
+            text-align: end;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="fps-time-range" class="fps-label" style="width: 100%;height: 20px;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-fps" style="height: auto">
-            <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start">
+            <lit-table-column class="fps-column" width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="FPS" data-index="fps" key="fps" align="flex-start" >
+            <lit-table-column class="fps-column" width="1fr" title="FPS" data-index="fps" key="fps" align="flex-start" >
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts b/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts
index f28a4b85f39603ebd07a7ee92e44880358643a18..61c46fb6223cf1b0cb22de1dc50408da23cbff0d 100644
--- a/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts
+++ b/ide/src/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.ts
@@ -16,67 +16,59 @@
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
-import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
 import { Utils } from '../../base/Utils.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
 import { CpuFreqLimitsStruct } from '../../../../database/ui-worker/ProcedureWorkerCpuFreqLimits.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-cpu-freq-limits')
 export class TabPaneCpuFreqLimits extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private loadDataInCache: boolean = true;
+  private cpuFreqLimitsTbl: LitTable | null | undefined;
   private selectionParam: SelectionParam | null | undefined;
-  private source: CpuFreqLimit[] = [];
-  private sortKey: string = 'cpu';
-  private sortType: number = 0;
+  private cpuFreqLimitSource: CpuFreqLimit[] = [];
+  private cpuFreqLimitSortKey: string = 'cpu';
+  private cpuFreqLimitSortType: number = 0;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.selectionParam) {
+  set data(cpuFreqLimitSelection: SelectionParam | any) {
+    if (cpuFreqLimitSelection == this.selectionParam) {
       return;
     }
-    this.selectionParam = val;
+    this.selectionParam = cpuFreqLimitSelection;
     // @ts-ignore
-    this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
+    this.cpuFreqLimitsTbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
     let list: any[] = [];
-    val.cpuFreqLimitDatas.forEach((limitRowDatas: any) => {
+    cpuFreqLimitSelection.cpuFreqLimitDatas.forEach((limitRowDatas: any) => {
       for (let i = 0, len = limitRowDatas.length; i < len; i++) {
         let it = limitRowDatas[i];
-        if (it.startNs > val.rightNs) {
+        if (it.startNs > cpuFreqLimitSelection.rightNs) {
           break;
         }
         if (i === limitRowDatas.length - 1) {
-          it.dur = (val.rightNs || 0) - (it.startNs || 0);
+          it.dur = (cpuFreqLimitSelection.rightNs || 0) - (it.startNs || 0);
         } else {
           it.dur = (limitRowDatas[i + 1].startNs || 0) - (it.startNs || 0);
         }
         list.push(it);
       }
     });
-    this.formatData(list, val.leftNs, val.rightNs);
+    this.formatData(list, cpuFreqLimitSelection.leftNs, cpuFreqLimitSelection.rightNs);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot!.querySelector<LitTable>('#tb-states');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.cpuFreqLimitsTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-freq-limit');
+    this.cpuFreqLimitsTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.cpuFreqLimitSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.cpuFreqLimitSortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortCpuFreqLimitTable(evt.detail.key, evt.detail.sort);
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement!.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl!.shadowRoot!.querySelector('.table').style.height = this.parentElement!.clientHeight - 25 + 'px';
-        this.tbl!.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.cpuFreqLimitsTbl!,25)
   }
 
   formatData(list: CpuFreqLimitsStruct[], start: number, end: number) {
@@ -107,44 +99,44 @@ export class TabPaneCpuFreqLimits extends BaseElement {
         groupMapData(min - max, minId, item);
       }
     });
-    this.source = Array.from(limitsMap.values()).map((item) => {
+    this.cpuFreqLimitSource = Array.from(limitsMap.values()).map((item) => {
       item.timeStr = Utils.getProbablyTime(item.time);
       item.valueStr = `${ColorUtils.formatNumberComma(item.value!)} kHz`;
       return item;
     });
-    this.sortTable(this.sortKey, this.sortType);
+    this.sortCpuFreqLimitTable(this.cpuFreqLimitSortKey, this.cpuFreqLimitSortType);
   }
 
-  sortTable(key: string, type: number) {
+  sortCpuFreqLimitTable(key: string, type: number) {
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.cpuFreqLimitsTbl!.recycleDataSource = this.cpuFreqLimitSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
+      let cpuFreqLimitsArr = Array.from(this.cpuFreqLimitSource);
+      cpuFreqLimitsArr.sort((cpuFreqLimitA, cpuFreqLimitB): number => {
         if (key == 'timeStr') {
           if (type == 1) {
-            return a.time - b.time;
+            return cpuFreqLimitA.time - cpuFreqLimitB.time;
           } else {
-            return b.time - a.time;
+            return cpuFreqLimitB.time - cpuFreqLimitA.time;
           }
         } else if (key == 'valueStr') {
           if (type == 1) {
-            return a.value - b.value;
+            return cpuFreqLimitA.value - cpuFreqLimitB.value;
           } else {
-            return b.value - a.value;
+            return cpuFreqLimitB.value - cpuFreqLimitA.value;
           }
         } else if (key == 'cpu') {
-          if (a.cpu > b.cpu) {
+          if (cpuFreqLimitA.cpu > cpuFreqLimitB.cpu) {
             return type === 2 ? -1 : 1;
-          } else if (a.cpu == b.cpu) {
+          } else if (cpuFreqLimitA.cpu == cpuFreqLimitB.cpu) {
             return 0;
           } else {
             return type === 2 ? 1 : -1;
           }
         } else if (key == 'type') {
-          if (a.type > b.type) {
+          if (cpuFreqLimitA.type > cpuFreqLimitB.type) {
             return type === 2 ? 1 : -1;
-          } else if (a.type == b.type) {
+          } else if (cpuFreqLimitA.type == cpuFreqLimitB.type) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
@@ -153,43 +145,30 @@ export class TabPaneCpuFreqLimits extends BaseElement {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.cpuFreqLimitsTbl!.recycleDataSource = cpuFreqLimitsArr;
     }
   }
 
   initHtml(): string {
     return `
         <style>
+        .cpu-freq-limit-tbl {
+            height: auto;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
-        .progress{
-            bottom: 5px;
-            position: absolute;
-            height: 1px;
-            left: 0;
-            right: 0;
-        }
-        .loading{
-            bottom: 0;
-            position: absolute;
-            left: 0;
-            right: 0;
-            width:100%;
-            background:transparent;
-            z-index: 999999;
-        }
         </style>
-        <lit-table id="tb-states" style="height: auto" >
-            <lit-table-column width="20%" title="Cpu" data-index="cpu" key="cpu" align="flex-start" order>
+        <lit-table id="tb-cpu-freq-limit" class="cpu-freq-limit-tbl">
+            <lit-table-column class="cpu-freq-limit-column" width="20%" title="Cpu" data-index="cpu" key="cpu" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Type" data-index="type" key="type" align="flex-start" order>
+            <lit-table-column class="cpu-freq-limit-column" width="1fr" title="Type" data-index="type" key="type" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order>
+            <lit-table-column class="cpu-freq-limit-column" width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="1fr" title="Value" data-index="valueStr" key="valueStr" align="flex-start" order>
+            <lit-table-column class="cpu-freq-limit-column" width="1fr" title="Value" data-index="valueStr" key="valueStr" align="flex-start" order>
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/freq/TabPaneFreq.ts b/ide/src/trace/component/trace/sheet/freq/TabPaneFreq.ts
index 26849f5aaa9fe85ac8145369491d0cbf01d78ad1..bc882783e032c0b2074111d0e8b754d62f89a1c6 100644
--- a/ide/src/trace/component/trace/sheet/freq/TabPaneFreq.ts
+++ b/ide/src/trace/component/trace/sheet/freq/TabPaneFreq.ts
@@ -17,59 +17,57 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-freq')
 export class TabPaneFreq extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private freqTbl: LitTable | null | undefined;
 
-  set data(freq: any) {
-    if (freq) {
-      this.tbl!.dataSource = [
+  set data(freqData: any) {
+    if (freqData) {
+      this.freqTbl!.dataSource = [
         {
-          startNS: Utils.getTimeString(freq.startNS >= 0 ? freq.startNS : 0),
-          absoluteTime: (freq.startNS + (window as any).recordStartNS) / 1000000000,
-          dur: Utils.getProbablyTime(freq.dur),
-          freq: `${ColorUtils.formatNumberComma(freq.value!)} kHz`,
-          cpu: `Cpu ${freq.cpu}`,
+          startNS: Utils.getTimeString(freqData.startNS >= 0 ? freqData.startNS : 0),
+          absoluteTime: (freqData.startNS + (window as any).recordStartNS) / 1000000000,
+          dur: Utils.getProbablyTime(freqData.dur),
+          freq: `${ColorUtils.formatNumberComma(freqData.value!)} kHz`,
+          cpu: `Cpu ${freqData.cpu}`,
         },
       ];
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq');
+    this.freqTbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.freqTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .freq-table{
+            height: auto;
+        }
         :host{
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
         </style>
-        <lit-table id="tb-freq" style="height: auto">
-            <lit-table-column width="1fr" title="StartTime(Relative)" data-index="startNS" key="startNS" align="flex-start">
+        <lit-table id="tb-freq" class="freq-table">
+            <lit-table-column class="freq-column" width="1fr" title="StartTime(Relative)" data-index="startNS" key="startNS" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start">
+            <lit-table-column class="freq-column" width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" >
+            <lit-table-column class="freq-column" width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" >
+            <lit-table-column class="freq-column" width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Freq" data-index="freq" key="freq" align="flex-start" >
+            <lit-table-column class="freq-column" width="1fr" title="Freq" data-index="freq" key="freq" align="flex-start" >
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/freq/TabPaneFreqLimit.ts b/ide/src/trace/component/trace/sheet/freq/TabPaneFreqLimit.ts
index ce59b53a4cf6770269b074ee03e50da26e281b85..56f2bc9c7122a54b6b581be4fbb4fda367cc313a 100644
--- a/ide/src/trace/component/trace/sheet/freq/TabPaneFreqLimit.ts
+++ b/ide/src/trace/component/trace/sheet/freq/TabPaneFreqLimit.ts
@@ -17,62 +17,60 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { ColorUtils } from '../../base/ColorUtils.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-freq-limit')
 export class TabPaneFreqLimit extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private freqLimitTbl: LitTable | null | undefined;
 
-  set data(freq: any) {
-    if (freq) {
-      this.tbl!.dataSource = [
+  set data(freqLimit: any) {
+    if (freqLimit) {
+      this.freqLimitTbl!.dataSource = [
         {
-          startNs: Utils.getTimeString(freq.startNs >= 0 ? freq.startNs : 0),
-          absoluteTime: (freq.startNs + (window as any).recordStartNS) / 1000000000,
-          dur: Utils.getProbablyTime(freq.dur),
-          maxFreq: `${ColorUtils.formatNumberComma(freq.max!)} kHz`,
-          minFreq: `${ColorUtils.formatNumberComma(freq.min!)} kHz`,
-          cpu: `Cpu ${freq.cpu}`,
+          startNs: Utils.getTimeString(freqLimit.startNs >= 0 ? freqLimit.startNs : 0),
+          absoluteTime: (freqLimit.startNs + (window as any).recordStartNS) / 1000000000,
+          dur: Utils.getProbablyTime(freqLimit.dur),
+          maxFreq: `${ColorUtils.formatNumberComma(freqLimit.max!)} kHz`,
+          minFreq: `${ColorUtils.formatNumberComma(freqLimit.min!)} kHz`,
+          cpu: `Cpu ${freqLimit.cpu}`,
         },
       ];
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq');
+    this.freqLimitTbl = this.shadowRoot?.querySelector<LitTable>('#tb-freq-limit');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.freqLimitTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .freq-limit-table{
+            height: auto;
+        }
         :host{
-            display: flex;
             flex-direction: column;
+            display: flex;
             padding: 10px 10px;
         }
         </style>
-        <lit-table id="tb-freq" style="height: auto">
-            <lit-table-column width="1fr" title="StartTime(Relative)" data-index="startNs" key="startNs" align="flex-start">
+        <lit-table id="tb-freq-limit" class="freq-limit-table">
+            <lit-table-column class="freq-limit-column" width="1fr" title="StartTime(Relative)" data-index="startNs" key="startNs" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start">
+            <lit-table-column class="freq-limit-column" width="1fr" title="StartTime(Absolute)" data-index="absoluteTime" key="absoluteTime" align="flex-start">
             </lit-table-column>
-            <lit-table-column width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" >
+            <lit-table-column class="freq-limit-column" width="1fr" title="Duration" data-index="dur" key="dur" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" >
+            <lit-table-column class="freq-limit-column" width="1fr" title="Cpu" data-index="cpu" key="cpu" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Max Frequency" data-index="maxFreq" key="maxFreq" align="flex-start" >
+            <lit-table-column class="freq-limit-column" width="1fr" title="Max Frequency" data-index="maxFreq" key="maxFreq" align="flex-start" >
             </lit-table-column>
-            <lit-table-column width="1fr" title="Min Frequency" data-index="minFreq" key="minFreq" align="flex-start" >
+            <lit-table-column class="freq-limit-column" width="1fr" title="Min Frequency" data-index="minFreq" key="minFreq" align="flex-start" >
             </lit-table-column>
         </lit-table>
         `;
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts
index 66462b19413161ffde973c64c769110870dca154..bd3fa43186fba4b23c14992eb58dd275256a0d63 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts
@@ -15,10 +15,10 @@
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
+import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { LitChartPie } from '../../../../../base-ui/chart/pie/LitChartPie.js';
 import '../../../../../base-ui/chart/pie/LitChartPie.js';
-import { queryHiPerfProcessCount, queryPerfProcess } from '../../../../database/SqlLite.js';
+import { queryPerfProcess } from '../../../../database/SqlLite.js';
 import { PerfThread } from '../../../../bean/PerfProfile.js';
 import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
 import { procedurePool } from '../../../../database/Procedure.js';
@@ -27,20 +27,18 @@ import { Utils } from '../../base/Utils.js';
 @element('tabpane-perf-analysis')
 export class TabPanePerfAnalysis extends BaseElement {
   private currentSelection: SelectionParam | any;
-  private pie: LitChartPie | null | undefined;
+  private perfAnalysisPie: LitChartPie | null | undefined;
   private processData!: Array<any>;
-  private threadDataMap?: Map<number, any>;
   private pidData!: any[];
   private threadData!: any[];
   private soData!: any[];
   private functionData!: any[];
-  private tableThread: LitTable | null | undefined;
+  private perfTableThread: LitTable | null | undefined;
   private tableProcess: LitTable | null | undefined;
   private tableSo: LitTable | null | undefined;
   private tableFunction: LitTable | null | undefined;
   private sumCount: any;
-  private range: HTMLLabelElement | null | undefined;
-  private processMap: Map<number, PerfThread> = new Map<number, PerfThread>();
+  private perfAnalysisRange: HTMLLabelElement | null | undefined;
   private back: HTMLDivElement | null | undefined;
   private tabName: HTMLDivElement | null | undefined;
   private progressEL: LitProgressBar | null | undefined;
@@ -66,30 +64,23 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.clearData();
     this.currentSelection = val;
     this.tableProcess!.style.display = 'grid';
-    this.tableThread!.style.display = 'none';
+    this.perfTableThread!.style.display = 'none';
     this.tableSo!.style.display = 'none';
     this.tableFunction!.style.display = 'none';
     this.back!.style.visibility = 'hidden';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    this.perfAnalysisRange!.textContent =
+        'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     if (!this.callChainMap) {
-      this.getCallChainDataFromWorker();
+      this.getCallChainDataFromWorker(val);
     }
-    queryPerfProcess().then((result) => {
-      let processes = result;
-      for (let process of processes) {
-        this.processMap.set(process.pid, process);
-      }
-    });
-    this.getHiperfProcess(val);
   }
   initElements(): void {
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.perfAnalysisRange = this.shadowRoot?.querySelector('#time-range');
+    this.perfAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
     this.tableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
     this.tableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
     this.tableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
-    this.tableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
+    this.perfTableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
     this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
     this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.subheading');
     this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
@@ -97,9 +88,9 @@ export class TabPanePerfAnalysis extends BaseElement {
   }
 
   clearData() {
-    this.pie!.dataSource = [];
+    this.perfAnalysisPie!.dataSource = [];
     this.tableProcess!.recycleDataSource = [];
-    this.tableThread!.recycleDataSource = [];
+    this.perfTableThread!.recycleDataSource = [];
     this.tableSo!.recycleDataSource = [];
     this.tableFunction!.recycleDataSource = [];
   }
@@ -108,18 +99,18 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.back!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By Thread Count') {
         this.tableProcess!.style.display = 'grid';
-        this.tableThread!.style.display = 'none';
-        this.tableThread!.setAttribute('hideDownload', '');
+        this.perfTableThread!.style.display = 'none';
+        this.perfTableThread!.setAttribute('hideDownload', '');
         this.tableProcess?.removeAttribute('hideDownload');
         this.back!.style.visibility = 'hidden';
         this.currentLevel = 0;
         this.currentLevelData = this.pidData;
         this.processPieChart(this.currentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Library Count') {
-        this.tableThread!.style.display = 'grid';
+        this.perfTableThread!.style.display = 'grid';
         this.tableSo!.style.display = 'none';
         this.tableSo!.setAttribute('hideDownload', '');
-        this.tableThread?.removeAttribute('hideDownload');
+        this.perfTableThread?.removeAttribute('hideDownload');
         this.currentLevel = 1;
         this.currentLevelData = this.threadData;
         this.threadPieChart(this.currentSelection);
@@ -136,7 +127,7 @@ export class TabPanePerfAnalysis extends BaseElement {
   }
   processPieChart(val: any) {
     this.sumCount = this.allProcessCount.allCount;
-    this.pie!.config = {
+    this.perfAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.pidData),
       angleField: 'count',
@@ -147,8 +138,8 @@ export class TabPanePerfAnalysis extends BaseElement {
       },
       tip: (obj) => {
         return `<div>
-                                <div>ProcessName:${obj.obj.tableName}</div>
-                                <div>Count:${obj.obj.countFormat}</div>
+                                <div>Process:${obj.obj.tableName}</div>
+                                <div>Weight:${obj.obj.countFormat}</div>
                                 <div>Percent:${obj.obj.percent}%</div> 
                             </div>
                                 `;
@@ -159,15 +150,15 @@ export class TabPanePerfAnalysis extends BaseElement {
           this.clearData();
           this.back!.style.visibility = 'visible';
           this.tableProcess!.style.display = 'none';
-          this.tableThread!.style.display = 'grid';
+          this.perfTableThread!.style.display = 'grid';
           this.tableProcess!.setAttribute('hideDownload', '');
-          this.tableThread?.removeAttribute('hideDownload');
+          this.perfTableThread?.removeAttribute('hideDownload');
           this.getHiperfThread(it, val);
           // @ts-ignore
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = it.tableName;
           // @ts-ignore
           this.processName = it.tableName;
-          this.pie?.hideTip();
+          this.perfAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
@@ -183,24 +174,24 @@ export class TabPanePerfAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableProcess!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.tableProcess!.addEventListener('row-hover', (tblProcessRowHover: any) => {
+      if (tblProcessRowHover.detail.data) {
+        let data = tblProcessRowHover.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((tblProcessRowHover.detail as any).callBack) {
+          (tblProcessRowHover.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.perfAnalysisPie?.showHover();
+      this.perfAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
     this.tabName!.textContent = 'Statistic By Process Count';
     this.pidData.unshift(this.allProcessCount);
     this.tableProcess!.recycleDataSource = this.pidData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.pidData));
     // @ts-ignore
     this.pidData.shift(this.allProcessCount);
+    this.currentLevelData = this.pidData;
     this.tableProcess?.reMeauseHeight();
     this.tableProcess!.addEventListener('column-click', (evt) => {
       // @ts-ignore
@@ -211,12 +202,12 @@ export class TabPanePerfAnalysis extends BaseElement {
     if (val.perfThread.length > 0 && val.perfProcess.length == 0) {
       this.back!.style.visibility = 'hidden';
       this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
-      this.tableThread!.style.display = 'grid';
+      this.perfTableThread!.style.display = 'grid';
     } else {
       this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName;
     }
     this.sumCount = this.allThreadCount.allCount;
-    this.pie!.config = {
+    this.perfAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.threadData),
       angleField: 'count',
@@ -227,8 +218,8 @@ export class TabPanePerfAnalysis extends BaseElement {
       },
       tip: (obj) => {
         return `<div>
-                                <div>ThreadName:${obj.obj.tableName}</div>
-                                <div>Count:${obj.obj.countFormat}</div>
+                                <div>Thread:${obj.obj.tableName}</div>
+                                <div>Weight:${obj.obj.countFormat}</div>
                                 <div>Percent:${obj.obj.percent}%</div> 
                             </div>
                                 `;
@@ -238,24 +229,24 @@ export class TabPanePerfAnalysis extends BaseElement {
         if (it.tableName != 'other') {
           this.clearData();
           this.back!.style.visibility = 'visible';
-          this.tableThread!.style.display = 'none';
+          this.perfTableThread!.style.display = 'none';
           this.tableSo!.style.display = 'grid';
-          this.tableThread!.setAttribute('hideDownload', '');
+          this.perfTableThread!.setAttribute('hideDownload', '');
           this.tableSo?.removeAttribute('hideDownload');
           this.getHiperfSo(it, val);
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
-            // @ts-ignore
-            this.processName + ' / ' + it.tableName;
+              // @ts-ignore
+              this.processName + ' / ' + it.tableName;
           // @ts-ignore
           this.threadName = it.tableName;
-          this.pie?.hideTip();
+          this.perfAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableThread!.setCurrentHover(data);
+          this.perfTableThread!.setCurrentHover(data);
         } else {
-          this.tableThread!.mouseOut();
+          this.perfTableThread!.mouseOut();
         }
       },
       interactions: [
@@ -264,32 +255,32 @@ export class TabPanePerfAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableThread!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.perfTableThread!.addEventListener('row-hover', (perfTblThreadRowHover: any) => {
+      if (perfTblThreadRowHover.detail.data) {
+        let data = perfTblThreadRowHover.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((perfTblThreadRowHover.detail as any).callBack) {
+          (perfTblThreadRowHover.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.perfAnalysisPie?.showHover();
+      this.perfAnalysisPie?.hideTip();
     });
-    this.tableThread!.addEventListener('column-click', (evt) => {
+    this.perfTableThread!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
     this.tabName!.textContent = 'Statistic By Thread Count';
     this.threadData.unshift(this.allThreadCount);
-    this.tableThread!.recycleDataSource = this.threadData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.threadData));
+    this.perfTableThread!.recycleDataSource = this.threadData;
     // @ts-ignore
     this.threadData.shift(this.allThreadCount);
-    this.tableThread?.reMeauseHeight();
+    this.currentLevelData = this.threadData;
+    this.perfTableThread?.reMeauseHeight();
   }
   libraryPieChart(val: any) {
     this.sumCount = this.allLibCount.allCount;
-    this.pie!.config = {
+    this.perfAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.soData),
       angleField: 'count',
@@ -301,7 +292,7 @@ export class TabPanePerfAnalysis extends BaseElement {
       tip: (obj) => {
         return `<div>
                                 <div>Library:${obj.obj.tableName}</div>
-                                <div>Count:${obj.obj.countFormat}</div>
+                                <div>Weight:${obj.obj.countFormat}</div>
                                 <div>Percent:${obj.obj.percent}%</div> 
                             </div>
                                 `;
@@ -316,9 +307,9 @@ export class TabPanePerfAnalysis extends BaseElement {
           this.tableFunction?.removeAttribute('hideDownload');
           this.getHiperfFunction(it, val);
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
-          // @ts-ignore
-          this.processName + ' / ' + this.threadName + ' / ' + it.tableName;
-          this.pie?.hideTip();
+              // @ts-ignore
+              this.processName + ' / ' + this.threadName + ' / ' + it.tableName;
+          this.perfAnalysisPie?.hideTip();
         }
       },
       hoverHandler: (data) => {
@@ -334,24 +325,24 @@ export class TabPanePerfAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableSo!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.tableSo!.addEventListener('row-hover', (tableSoRowHover: any) => {
+      if (tableSoRowHover.detail.data) {
+        let data = tableSoRowHover.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((tableSoRowHover.detail as any).callBack) {
+          (tableSoRowHover.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.perfAnalysisPie?.showHover();
+      this.perfAnalysisPie?.hideTip();
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.processName + ' / ' + this.threadName;
     this.tabName!.textContent = 'Statistic By Library Count';
     this.soData.unshift(this.allLibCount);
     this.tableSo!.recycleDataSource = this.soData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.soData));
     // @ts-ignore
     this.soData.shift(this.allLibCount);
+    this.currentLevelData = this.soData;
     this.tableSo?.reMeauseHeight();
     this.tableSo!.addEventListener('column-click', (evt) => {
       // @ts-ignore
@@ -367,7 +358,7 @@ export class TabPanePerfAnalysis extends BaseElement {
         currentTable = this.tableProcess;
         break;
       case 1:
-        currentTable = this.tableThread;
+        currentTable = this.perfTableThread;
         break;
       case 2:
         currentTable = this.tableSo;
@@ -380,41 +371,38 @@ export class TabPanePerfAnalysis extends BaseElement {
       return;
     }
     if (sort == 0) {
-      currentTable!.recycleDataSource = this.currentLevelData;
-    } else {
       let arr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          // @ts-ignore
-          arr.shift(this.allProcessCount);
+          arr.unshift(this.allProcessCount);
           break;
         case 1:
-          // @ts-ignore
-          arr.shift(this.allThreadCount);
+          arr.unshift(this.allThreadCount);
           break;
         case 2:
-          // @ts-ignore
-          arr.shift(this.allLibCount);
+          arr.unshift(this.allLibCount);
           break;
         case 3:
-          // @ts-ignore
-          arr.shift(this.allSymbolCount);
+          arr.unshift(this.allSymbolCount);
           break;
       }
+      currentTable!.recycleDataSource = arr;
+    } else {
+      let arr = [...this.currentLevelData];
       if (column == 'tableName') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
+        currentTable!.recycleDataSource = arr.sort((leftA, rightB) => {
           if (sort == 1) {
-            if (a.tableName > b.tableName) {
+            if (leftA.tableName > rightB.tableName) {
               return 1;
-            } else if (a.tableName == b.tableName) {
+            } else if (leftA.tableName == rightB.tableName) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.tableName > a.tableName) {
+            if (rightB.tableName > leftA.tableName) {
               return 1;
-            } else if (a.tableName == b.tableName) {
+            } else if (leftA.tableName == rightB.tableName) {
               return 0;
             } else {
               return -1;
@@ -449,67 +437,62 @@ export class TabPanePerfAnalysis extends BaseElement {
   }
   async getHiperfProcess(val: any) {
     this.progressEL!.loading = true;
-    await queryHiPerfProcessCount(
-      val.leftNs,
-      val.rightNs,
-      val.perfAll ? [] : val.perfCpus,
-      val.perfThread,
-      val.perfProcess
-    ).then((result) => {
-      this.processData = result;
-      this.processData = JSON.parse(JSON.stringify(result));
-      if (!this.processData || this.processData.length == 0) {
-        return;
-      }
-      let allCount = 0;
-      let pidMap = new Map<string, Array<any>>();
+    if (!this.processData || this.processData.length == 0) {
+      this.progressEL!.loading = false;
       if (val.perfThread.length > 0 && val.perfProcess.length == 0) {
+        this.threadData = [];
+        this.allThreadCount = [];
         this.tableProcess!.style.display = 'none';
-        this.getHiperfThread(this.processData[0], val);
+        this.threadPieChart(val);
       } else {
-        for (let itemData of result) {
-          allCount++;
-          if (pidMap.has(itemData.pid)) {
-            pidMap.get(itemData.pid)?.push(itemData);
-          } else {
-            let itemArray = new Array<any>();
-            itemArray.push(itemData);
-            pidMap.set(itemData.pid, itemArray);
-          }
-        }
         this.pidData = [];
-        pidMap.forEach((value: Array<any>, key: string) => {
-          let count = 0;
-          let pName = '';
-          for (let item of value) {
-            let process = this.processMap.get(item.pid);
-            pName = item.processName =
-              process == null || process == undefined
-                ? `Process(${item.pid})`
-                : `${process!.processName || 'Process'}(${item.pid})`;
-            count++;
-          }
-          const pidData = {
-            tableName: pName,
-            pid: key,
-            percent: ((count / allCount) * 100).toFixed(2),
-            countFormat: Utils.timeMsFormat2p(count),
-            count: count,
-          };
-          this.pidData.push(pidData);
-        });
-        this.pidData.sort((a, b) => b.count - a.count);
-        this.allProcessCount = this.totalCountData(allCount);
-        this.currentLevel = 0;
-        this.progressEL!.loading = false;
+        this.allProcessCount = [];
         this.processPieChart(val);
       }
-    });
+      return;
+    }
+    let allCount = 0;
+    let pidMap = new Map<number, Array<any>>();
+    if (val.perfThread.length > 0 && val.perfProcess.length == 0) {
+      this.tableProcess!.style.display = 'none';
+      this.getHiperfThread(this.processData[0], val);
+    } else {
+      for (let itemData of this.processData) {
+        allCount += itemData.count;
+        if (pidMap.has(itemData.pid)) {
+          pidMap.get(itemData.pid)?.push(itemData);
+        } else {
+          let itemArray = new Array<any>();
+          itemArray.push(itemData);
+          pidMap.set(itemData.pid, itemArray);
+        }
+      }
+      this.pidData = [];
+      pidMap.forEach((arr: Array<any>, pid: number) => {
+        let count = 0;
+        for(let item of arr){
+          count += item.count;
+        }
+        let pName = arr[0].processName + '(' + pid + ')';
+        const pidData = {
+          tableName: pName,
+          pid: pid,
+          percent: ((count / allCount) * 100).toFixed(2),
+          countFormat: Utils.timeMsFormat2p(count),
+          count: count,
+        };
+        this.pidData.push(pidData);
+      });
+      this.pidData.sort((a, b) => b.count - a.count);
+      this.allProcessCount = this.totalCountData(allCount);
+      this.currentLevel = 0;
+      this.progressEL!.loading = false;
+      this.processPieChart(val);
+    }
   }
   getHiperfThread(item: any, val: any) {
     this.progressEL!.loading = true;
-    this.threadDataMap = new Map<number, any>();
-    let threadMap = new Map<string, Array<any>>();
+    let threadMap = new Map<number, Array<any>>();
     let pid = item.pid;
     let allCount = 0;
     if (!this.processData || this.processData.length == 0) {
@@ -519,7 +502,7 @@ export class TabPanePerfAnalysis extends BaseElement {
       if (itemData.pid !== pid) {
         continue;
       }
-      allCount++;
+      allCount += itemData.count;
       if (threadMap.has(itemData.tid)) {
         threadMap.get(itemData.tid)?.push(itemData);
       } else {
@@ -529,19 +512,15 @@ export class TabPanePerfAnalysis extends BaseElement {
       }
     }
     this.threadData = [];
-    threadMap.forEach((value: Array<any>, key: string) => {
+    threadMap.forEach((arr: Array<any>, tid: number) => {
       let threadCount = 0;
-      let tName = '';
-      for (let item of value) {
-        threadCount++;
-        tName =
-          item.threadName == null || item.threadName == undefined
-            ? `Thread(${item.tid})`
-            : `${item.threadName}(${item.tid})`;
+      let tName = arr[0].threadName + '(' + tid + ')';
+      for (let item of arr) {
+        threadCount += item.count;
       }
       const threadData = {
         pid: item.pid,
-        tid: key,
+        tid: tid,
         tableName: tName,
         countFormat: Utils.timeMsFormat2p(threadCount),
         count: threadCount,
@@ -569,30 +548,21 @@ export class TabPanePerfAnalysis extends BaseElement {
       if (itemData.pid !== pid || itemData.tid !== tid) {
         continue;
       }
-      let lastLibCallChain = this.callChainMap!.get(itemData.callchain_id);
-      if (!lastLibCallChain) {
-        continue;
-      }
-      allCount++;
-      if (libMap.has(lastLibCallChain.fileId)) {
-        libMap.get(lastLibCallChain.fileId)?.push(lastLibCallChain);
+      allCount += itemData.count;
+      if (libMap.has(itemData.libId)) {
+        libMap.get(itemData.libId)?.push(itemData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(lastLibCallChain);
-        libMap.set(lastLibCallChain.fileId, dataArray);
+        dataArray.push(itemData);
+        libMap.set(itemData.libId, dataArray);
       }
     }
     this.soData = [];
-    libMap.forEach((libItems, libId) => {
+    libMap.forEach((arr :Array<any>, libId: number) => {
       let libCount = 0;
-      let libName = '';
-      for (let libItem of libItems) {
-        libCount++;
-        libName = libItem.path;
-      }
-      let libPath = libName?.split('/');
-      if (libPath) {
-        libName = libPath[libPath.length - 1];
+      let libName = arr[0].libName;
+      for(let item of arr){
+        libCount += item.count;
       }
       const libData = {
         pid: item.pid,
@@ -624,34 +594,25 @@ export class TabPanePerfAnalysis extends BaseElement {
       return;
     }
     for (let itemData of this.processData) {
-      if (itemData.pid !== pid || itemData.tid !== tid) {
-        continue;
-      }
-      let dataCallChain = this.callChainMap!.get(itemData.callchain_id);
-      if (!dataCallChain || dataCallChain.fileId !== libId) {
+      if (itemData.pid !== pid || itemData.tid !== tid || itemData.libId !== libId) {
         continue;
       }
-      allCount++;
-      if (symbolMap.has(dataCallChain.symbolId)) {
-        symbolMap.get(dataCallChain.symbolId)?.push(dataCallChain);
+      allCount += itemData.count;
+      if (symbolMap.has(itemData.symbolId)) {
+        symbolMap.get(itemData.symbolId)?.push(itemData);
       } else {
         let dataArray = new Array<any>();
-        dataArray.push(dataCallChain);
-        symbolMap.set(dataCallChain.symbolId, dataArray);
+        dataArray.push(itemData);
+        symbolMap.set(itemData.symbolId, dataArray);
       }
     }
     this.functionData = [];
-    symbolMap.forEach((symbolItems, symbolId) => {
+    symbolMap.forEach((arr, symbolId) => {
       let symbolCount = 0;
-      let symbolName = '';
-      for (let symbolItem of symbolItems) {
-        symbolCount++;
-        symbolName = symbolItem.name;
-      }
-      let symbolPath = symbolName?.split('/');
-      if (symbolPath) {
-        symbolName = symbolPath[symbolPath.length - 1];
+      for(let item of arr){
+        symbolCount += item.count;
       }
+      let symbolName = arr[0].symbolName;
       const symbolData = {
         pid: item.pid,
         tid: item.tid,
@@ -667,7 +628,7 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.currentLevel = 3;
     this.progressEL!.loading = false;
     this.sumCount = this.allSymbolCount.allCount;
-    this.pie!.config = {
+    this.perfAnalysisPie!.config = {
       appendPadding: 0,
       data: this.getPieChartData(this.functionData),
       angleField: 'count',
@@ -679,7 +640,7 @@ export class TabPanePerfAnalysis extends BaseElement {
       tip: (obj) => {
         return `<div>
                     <div>Function:${obj.obj.tableName}</div>
-                    <div>Count:${obj.obj.countFormat}</div>
+                    <div>Weight:${obj.obj.countFormat}</div>
                     <div>Percent:${obj.obj.percent}%</div>
                 </div>`;
       },
@@ -704,14 +665,14 @@ export class TabPanePerfAnalysis extends BaseElement {
           (evt.detail as any).callBack(true);
         }
       }
-      this.pie?.showHover();
-      this.pie?.hideTip();
+      this.perfAnalysisPie?.showHover();
+      this.perfAnalysisPie?.hideTip();
     });
     this.functionData.unshift(this.allSymbolCount);
     this.tableFunction!.recycleDataSource = this.functionData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.functionData));
     // @ts-ignore
     this.functionData.shift(this.allSymbolCount);
+    this.currentLevelData = this.functionData;
     this.tableFunction?.reMeauseHeight();
     this.tableFunction!.addEventListener('column-click', (evt) => {
       // @ts-ignore
@@ -753,14 +714,29 @@ export class TabPanePerfAnalysis extends BaseElement {
     }
     return res;
   }
-  getCallChainDataFromWorker() {
-    this.getDataByWorker([], (results: any) => {
-      this.callChainMap = results;
+  getCallChainDataFromWorker(val: any) {
+    this.getDataByWorker(val, (results: any) => {
+      this.processData = results;
+      this.getHiperfProcess(val);
     });
   }
-  getDataByWorker(args: any[], handler: Function) {
+  getDataByWorker(val: any, handler: Function) {
     this.progressEL!.loading = true;
-    procedurePool.submitWithName('logic0', 'perf-queryPerfAnalysisCallChain', args, undefined, (results: any) => {
+    const args = [
+      {
+        funcName: 'setCombineCallChain',
+        funcArgs: [''],
+      },
+      {
+        funcName: 'setSearchValue',
+        funcArgs: [''],
+      },
+      {
+        funcName: 'getCurrentDataFromDb',
+        funcArgs: [val],
+      },
+    ];
+    procedurePool.submitWithName('logic0', 'perf-action', args, undefined, (results: any) => {
       handler(results);
       this.progressEL!.loading = false;
     });
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
index 97de60238b8cd91fc906b692fe864291f06b09ac..babfc61edced6264483edfbbc74eeb3c80c92f5a 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
@@ -28,51 +28,50 @@ import { Cmd } from '../../../../../command/Cmd.js';
 import { SpApplication } from '../../../../SpApplication.js';
 import '../../../../../base-ui/slicer/lit-slicer.js';
 import '../../../../../base-ui/progress-bar/LitProgressBar.js';
-import { query, queryPerfSampleIdsByTimeRange } from '../../../../database/SqlLite.js';
 import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
 import { procedurePool } from '../../../../database/Procedure.js';
-import { SpHiPerf } from '../../../chart/SpHiPerf.js';
+import { showButtonMenu } from '../SheetUtils.js';
 
 @element('tabpane-perf-profile')
 export class TabpanePerfProfile extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tbr: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
-  private rightSource: Array<PerfCallChainMerageData> = [];
-  private filter: any;
-  private dataSource: any[] = [];
-  private sortKey = 'weight';
-  private sortType = 0;
+  private perfProfilerTbl: LitTable | null | undefined;
+  private perfProfilerList: LitTable | null | undefined;
+  private perfProfileProgressEL: LitProgressBar | null | undefined;
+  private perfProfilerRightSource: Array<PerfCallChainMerageData> = [];
+  private perfProfilerFilter: any;
+  private perfProfilerDataSource: any[] = [];
+  private perfProfileSortKey = 'weight';
+  private perfProfileSortType = 0;
   private currentSelectedData: any = undefined;
-  private frameChart: FrameChart | null | undefined;
+  private perfProfileFrameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
   private systmeRuleName = '/system/';
   private numRuleName = '/max/min/';
-  private modal: DisassemblingWindow | null | undefined;
+  private perfProfilerModal: DisassemblingWindow | null | undefined;
   private needShowMenu = true;
   private searchValue: string = '';
-  private loadingList: number[] = [];
-  private loadingPage: any;
+  private perfProfileLoadingList: number[] = [];
+  private perfProfileLoadingPage: any;
   private currentSelection: SelectionParam | undefined;
   private isCurrentIsTopDown: boolean = true;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(perfProfilerSelection: SelectionParam | any) {
+    if (perfProfilerSelection == this.currentSelection) {
       return;
     }
     this.searchValue = '';
-    this.currentSelection = val;
-    this.modal!.style.display = 'none';
-    this.tbl!.style.visibility = 'visible';
-    if (this.parentElement!.clientHeight > this.filter!.clientHeight) {
-      this.filter!.style.display = 'flex';
+    this.currentSelection = perfProfilerSelection;
+    this.perfProfilerModal!.style.display = 'none';
+    this.perfProfilerTbl!.style.visibility = 'visible';
+    if (this.parentElement!.clientHeight > this.perfProfilerFilter!.clientHeight) {
+      this.perfProfilerFilter!.style.display = 'flex';
     } else {
-      this.filter!.style.display = 'none';
+      this.perfProfilerFilter!.style.display = 'none';
     }
-    this.filter!.initializeFilterTree(true, true, true);
-    this.filter!.filterValue = '';
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+    this.perfProfilerFilter!.initializeFilterTree(true, true, true);
+    this.perfProfilerFilter!.filterValue = '';
+    this.perfProfileProgressEL!.loading = true;
+    this.perfProfileLoadingPage.style.visibility = 'visible';
     this.isCurrentIsTopDown = true;
     this.getDataByWorker(
       [
@@ -82,32 +81,31 @@ export class TabpanePerfProfile extends BaseElement {
         },
         {
           funcName: 'getCurrentDataFromDb',
-          funcArgs: [val],
+          funcArgs: [perfProfilerSelection],
         },
       ],
       (results: any[]) => {
-        this.setLTableData(results);
-        this.tbr!.recycleDataSource = [];
-        this.frameChart!.mode = ChartMode.Count;
-        this.frameChart!.data = this.dataSource;
-        this.frameChart?.updateCanvas(true, this.clientWidth);
-        this.frameChart?.calculateChartData();
+        this.setPerfProfilerLeftTableData(results);
+        this.perfProfilerList!.recycleDataSource = [];
+        this.perfProfileFrameChart!.mode = ChartMode.Count;
+        this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
+        this.perfProfileFrameChart?.updateCanvas(true, this.clientWidth);
+        this.perfProfileFrameChart?.calculateChartData();
       }
     );
   }
 
-  getParentTree(
-    src: Array<PerfCallChainMerageData>,
+  getParentTree(perfCallSrc: Array<PerfCallChainMerageData>,
     target: PerfCallChainMerageData,
-    parents: Array<PerfCallChainMerageData>
+    parentsData: Array<PerfCallChainMerageData>
   ): boolean {
-    for (let call of src) {
-      if (call.id == target.id) {
-        parents.push(call);
+    for (let perfCall of perfCallSrc) {
+      if (perfCall.id == target.id) {
+        parentsData.push(perfCall);
         return true;
       } else {
-        if (this.getParentTree(call.children as Array<PerfCallChainMerageData>, target, parents)) {
-          parents.push(call);
+        if (this.getParentTree(perfCall.children as Array<PerfCallChainMerageData>, target, parentsData)) {
+          parentsData.push(perfCall);
           return true;
         }
       }
@@ -115,14 +113,14 @@ export class TabpanePerfProfile extends BaseElement {
     return false;
   }
 
-  getChildTree(src: Array<PerfCallChainMerageData>, id: string, children: Array<PerfCallChainMerageData>): boolean {
-    for (let call of src) {
-      if (call.id == id && call.children.length == 0) {
-        children.push(call);
+  getChildTree(perfCallSrc: Array<PerfCallChainMerageData>, id: string, children: Array<PerfCallChainMerageData>): boolean {
+    for (let perfCall of perfCallSrc) {
+      if (perfCall.id == id && perfCall.children.length == 0) {
+        children.push(perfCall);
         return true;
       } else {
-        if (this.getChildTree(call.children as Array<PerfCallChainMerageData>, id, children)) {
-          children.push(call);
+        if (this.getChildTree(perfCall.children as Array<PerfCallChainMerageData>, id, children)) {
+          children.push(perfCall);
           return true;
         }
       }
@@ -130,11 +128,11 @@ export class TabpanePerfProfile extends BaseElement {
     return false;
   }
 
-  setRightTableData(call: PerfCallChainMerageData) {
-    let parents: Array<PerfCallChainMerageData> = [];
-    let children: Array<PerfCallChainMerageData> = [];
-    this.getParentTree(this.dataSource, call, parents);
-    let maxId = call.id;
+  setRightTableData(chainMerageData: PerfCallChainMerageData) {
+    let parentsMerageData: Array<PerfCallChainMerageData> = [];
+    let childrenMerageData: Array<PerfCallChainMerageData> = [];
+    this.getParentTree(this.perfProfilerDataSource, chainMerageData, parentsMerageData);
+    let maxId = chainMerageData.id;
     let maxDur = 0;
 
     function findMaxStack(call: PerfCallChainMerageData) {
@@ -150,71 +148,59 @@ export class TabpanePerfProfile extends BaseElement {
       }
     }
 
-    findMaxStack(call);
-    this.getChildTree(call.children as Array<PerfCallChainMerageData>, maxId, children);
-    let arr = parents.reverse().concat(children.reverse());
-    for (let data of arr) {
+    findMaxStack(chainMerageData);
+    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;
     }
-    let len = arr.length;
-    this.rightSource = arr;
+    let len = perfProfileParentsList.length;
+    this.perfProfilerRightSource = perfProfileParentsList;
     let rightSource: Array<any> = [];
     if (len != 0) {
-      rightSource = this.rightSource.filter((item) => {
+      rightSource = this.perfProfilerRightSource.filter((item) => {
         return item.canCharge;
       });
     }
-    this.tbr!.dataSource = rightSource;
-  }
-
-  showButtomMenu(isShow: boolean) {
-    if (isShow) {
-      this.filter.setAttribute('tree', '');
-      this.filter.setAttribute('input', '');
-      this.filter.setAttribute('inputLeftText', '');
-    } else {
-      this.filter.removeAttribute('tree');
-      this.filter.removeAttribute('input');
-      this.filter.removeAttribute('inputLeftText');
-    }
+    this.perfProfilerList!.dataSource = rightSource;
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-perf-profile');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.frameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
-    this.modal = this.shadowRoot?.querySelector<DisassemblingWindow>('tab-native-data-modal');
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.frameChart!.addChartClickListener((needShowMenu: boolean) => {
+    this.perfProfilerTbl = this.shadowRoot?.querySelector<LitTable>('#tb-perf-profile');
+    this.perfProfileProgressEL = this.shadowRoot?.querySelector('.perf-profile-progress') as LitProgressBar;
+    this.perfProfileFrameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
+    this.perfProfilerModal = this.shadowRoot?.querySelector<DisassemblingWindow>('tab-native-data-modal');
+    this.perfProfileLoadingPage = this.shadowRoot?.querySelector('.perf-profile-loading');
+    this.perfProfileFrameChart!.addChartClickListener((needShowMenu: boolean) => {
       this.parentElement!.scrollTo(0, 0);
-      this.showButtomMenu(needShowMenu);
+      showButtonMenu(this.perfProfilerFilter, needShowMenu);
       this.needShowMenu = needShowMenu;
     });
-    this.tbl!.rememberScrollTop = true;
-    this.filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    this.tbl!.addEventListener('row-click', (evt: any) => {
+    this.perfProfilerTbl!.rememberScrollTop = true;
+    this.perfProfilerFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    this.perfProfilerTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as PerfCallChainMerageData;
       this.setRightTableData(data);
       data.isSelected = true;
       this.currentSelectedData = data;
-      this.tbr?.clearAllSelection(data);
-      this.tbr?.setCurrentSelection(data);
+      this.perfProfilerList?.clearAllSelection(data);
+      this.perfProfilerList?.setCurrentSelection(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
         (evt.detail as any).callBack(true);
       }
     });
-    this.tbr = this.shadowRoot?.querySelector<LitTable>('#tb-perf-list');
+    this.perfProfilerList = this.shadowRoot?.querySelector<LitTable>('#tb-perf-list');
     let lastClikTime = 0;
-    this.tbr!.addEventListener('row-click', (evt: any) => {
+    this.perfProfilerList!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as PerfCallChainMerageData;
-      this.tbl?.clearAllSelection(data);
+      this.perfProfilerTbl?.clearAllSelection(data);
       (data as any).isSelected = true;
-      this.tbl!.scrollToData(data);
+      this.perfProfilerTbl!.scrollToData(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
@@ -222,73 +208,73 @@ export class TabpanePerfProfile extends BaseElement {
       }
       let spApplication = <SpApplication>document.getElementsByTagName('sp-application')[0];
       if (Date.now() - lastClikTime < 200 && spApplication.vs) {
-        this.tbl!.style.visibility = 'hidden';
-        this.filter.style.display = 'none';
+        this.perfProfilerTbl!.style.visibility = 'hidden';
+        this.perfProfilerFilter.style.display = 'none';
         new ResizeObserver((entries) => {
-          this.modal!.style.width = this.tbl!.clientWidth + 'px';
-          this.modal!.style.height = this.tbl!.clientHeight + 'px';
-        }).observe(this.tbl!);
-        this.modal!.showLoading();
+          this.perfProfilerModal!.style.width = this.perfProfilerTbl!.clientWidth + 'px';
+          this.perfProfilerModal!.style.height = this.perfProfilerTbl!.clientHeight + 'px';
+        }).observe(this.perfProfilerTbl!);
+        this.perfProfilerModal!.showLoading();
         // @ts-ignore
         let data = evt.detail.data as PerfCallChainMerageData;
-        let path = data.path;
-        let addr = data.vaddrInFile;
-        let addrHex = addr.toString(16);
-        if (path.trim() === '[kernel.kallsyms]') {
-          this.modal?.showContent(`error : Symbol ${data.symbol} lib is [kernel.kallsyms] ,not support `, addrHex);
-        } else if (path.trim() === '') {
-          this.modal?.showContent(`error : Symbol ${data.symbol} lib is null `, addrHex);
-        } else if (addr < 0) {
-          this.modal?.showContent(`error : Symbol ${data.symbol} current addr is error ` + addrHex, addrHex);
+        let perfProfilerPath = data.path;
+        let perfProfilerAddr = data.vaddrInFile;
+        let perfProfilerAddrHex = perfProfilerAddr.toString(16);
+        if (perfProfilerPath.trim() === '[kernel.kallsyms]') {
+          this.perfProfilerModal?.showContent(`error : Symbol ${data.symbol} lib is [kernel.kallsyms] ,not support `, perfProfilerAddrHex);
+        } else if (perfProfilerPath.trim() === '') {
+          this.perfProfilerModal?.showContent(`error : Symbol ${data.symbol} lib is null `, perfProfilerAddrHex);
+        } else if (perfProfilerAddr < 0) {
+          this.perfProfilerModal?.showContent(`error : Symbol ${data.symbol} current addr is error ` + perfProfilerAddrHex, perfProfilerAddrHex);
         } else {
           const binDir = 'C:/binary_cache';
-          let binPath = binDir + path;
+          let binPath = binDir + perfProfilerPath;
           let cmd = 'C:/binary_cache/llvm-objdump.exe -S ' + binPath;
-          Cmd.execObjDump(cmd, addrHex, (result: any) => {
-            this.modal?.showContent(result, addrHex);
+          Cmd.execObjDump(cmd, perfProfilerAddrHex, (result: any) => {
+            this.perfProfilerModal?.showContent(result, perfProfilerAddrHex);
           });
         }
       }
       lastClikTime = Date.now();
     });
-    this.modal!.setCloseListener(() => {
-      this.modal!.style.display = 'none';
-      this.tbl!.style.visibility = 'visible';
+    this.perfProfilerModal!.setCloseListener(() => {
+      this.perfProfilerModal!.style.display = 'none';
+      this.perfProfilerTbl!.style.visibility = 'visible';
       this.shadowRoot!.querySelector<TabPaneFilter>('#filter')!.style.display = 'flex';
     });
-    this.tbr = this.shadowRoot?.querySelector<LitTable>('#tb-perf-list');
+    this.perfProfilerList = this.shadowRoot?.querySelector<LitTable>('#tb-perf-list');
     let filterFunc = (data: any) => {
-      let args: any[] = [];
+      let perfProfileFuncArgs: any[] = [];
       if (data.type == 'check') {
         if (data.item.checked) {
-          args.push({
+          perfProfileFuncArgs.push({
             funcName: 'splitTree',
             funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
           });
         } else {
-          args.push({
+          perfProfileFuncArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[data.item.name]],
           });
-          args.push({
+          perfProfileFuncArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          perfProfileFuncArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [data.item.name],
           });
         }
       } else if (data.type == 'select') {
-        args.push({
+        perfProfileFuncArgs.push({
           funcName: 'resotreAllNode',
           funcArgs: [[data.item.name]],
         });
-        args.push({
+        perfProfileFuncArgs.push({
           funcName: 'clearSplitMapData',
           funcArgs: [data.item.name],
         });
-        args.push({
+        perfProfileFuncArgs.push({
           funcName: 'splitTree',
           funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
         });
@@ -298,8 +284,8 @@ export class TabpanePerfProfile extends BaseElement {
             return;
           }
           if (this.currentSelectedData != undefined) {
-            this.filter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
-            args.push({
+            this.perfProfilerFilter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
+            perfProfileFuncArgs.push({
               funcName: 'splitTree',
               funcArgs: [this.currentSelectedData.symbolName, false, true],
             });
@@ -311,8 +297,8 @@ export class TabpanePerfProfile extends BaseElement {
             return;
           }
           if (this.currentSelectedData != undefined && this.currentSelectedData.libName != '') {
-            this.filter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
-            args.push({
+            this.perfProfilerFilter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
+            perfProfileFuncArgs.push({
               funcName: 'splitTree',
               funcArgs: [this.currentSelectedData.libName, false, false],
             });
@@ -324,16 +310,16 @@ export class TabpanePerfProfile extends BaseElement {
             let list = data.remove.map((item: any) => {
               return item.name;
             });
-            args.push({
+            perfProfileFuncArgs.push({
               funcName: 'resotreAllNode',
               funcArgs: [list],
             });
-            args.push({
+            perfProfileFuncArgs.push({
               funcName: 'resetAllNode',
               funcArgs: [],
             });
             list.forEach((symbolName: string) => {
-              args.push({
+              perfProfileFuncArgs.push({
                 funcName: 'clearSplitMapData',
                 funcArgs: [symbolName],
               });
@@ -341,61 +327,61 @@ export class TabpanePerfProfile extends BaseElement {
           }
         }
       }
-      this.getDataByWorker(args, (result: any[]) => {
-        this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
-        if (this.isChartShow) this.frameChart?.calculateChartData();
-        this.tbl!.move1px();
+      this.getDataByWorker(perfProfileFuncArgs, (result: any[]) => {
+        this.setPerfProfilerLeftTableData(result);
+        this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
+        if (this.isChartShow) this.perfProfileFrameChart?.calculateChartData();
+        this.perfProfilerTbl!.move1px();
         if (this.currentSelectedData) {
           this.currentSelectedData.isSelected = false;
-          this.tbl?.clearAllSelection(this.currentSelectedData);
-          this.tbr!.recycleDataSource = [];
+          this.perfProfilerTbl?.clearAllSelection(this.currentSelectedData);
+          this.perfProfilerList!.recycleDataSource = [];
           this.currentSelectedData = undefined;
         }
       });
     };
-    this.filter!.getDataLibrary(filterFunc);
-    this.filter!.getDataMining(filterFunc);
-    this.filter!.getCallTreeData((data: any) => {
+    this.perfProfilerFilter!.getDataLibrary(filterFunc);
+    this.perfProfilerFilter!.getDataMining(filterFunc);
+    this.perfProfilerFilter!.getCallTreeData((data: any) => {
       if (data.value == 0) {
         this.refreshAllNode({
-          ...this.filter!.getFilterTreeData(),
+          ...this.perfProfilerFilter!.getFilterTreeData(),
           callTree: data.checks,
         });
       } else {
-        let args: any[] = [];
+        let perfProfileArgs: any[] = [];
         if (data.checks[1]) {
-          args.push({
+          perfProfileArgs.push({
             funcName: 'hideSystemLibrary',
             funcArgs: [],
           });
-          args.push({
+          perfProfileArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
         } else {
-          args.push({
+          perfProfileArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[this.systmeRuleName]],
           });
-          args.push({
+          perfProfileArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          perfProfileArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [this.systmeRuleName],
           });
         }
-        this.getDataByWorker(args, (result: any[]) => {
-          this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
-          if (this.isChartShow) this.frameChart?.calculateChartData();
+        this.getDataByWorker(perfProfileArgs, (result: any[]) => {
+          this.setPerfProfilerLeftTableData(result);
+          this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
+          if (this.isChartShow) this.perfProfileFrameChart?.calculateChartData();
         });
       }
     });
-    this.filter!.getCallTreeConstraintsData((data: any) => {
-      let args: any[] = [
+    this.perfProfilerFilter!.getCallTreeConstraintsData((data: any) => {
+      let perfProfilerConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
           funcArgs: [[this.numRuleName]],
@@ -406,24 +392,24 @@ export class TabpanePerfProfile extends BaseElement {
         },
       ];
       if (data.checked) {
-        args.push({
+        perfProfilerConstraintsArgs.push({
           funcName: 'hideNumMaxAndMin',
           funcArgs: [parseInt(data.min), data.max],
         });
       }
-      args.push({
+      perfProfilerConstraintsArgs.push({
         funcName: 'resetAllNode',
         funcArgs: [],
       });
-      this.getDataByWorker(args, (result: any[]) => {
-        this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
-        if (this.isChartShow) this.frameChart?.calculateChartData();
+      this.getDataByWorker(perfProfilerConstraintsArgs, (result: any[]) => {
+        this.setPerfProfilerLeftTableData(result);
+        this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
+        if (this.isChartShow) this.perfProfileFrameChart?.calculateChartData();
       });
     });
-    this.filter!.getFilterData((data: FilterData) => {
-      if (this.searchValue != this.filter!.filterValue) {
-        this.searchValue = this.filter!.filterValue;
+    this.perfProfilerFilter!.getFilterData((data: FilterData) => {
+      if (this.searchValue != this.perfProfilerFilter!.filterValue) {
+        this.searchValue = this.perfProfilerFilter!.filterValue;
         let args = [
           {
             funcName: 'setSearchValue',
@@ -435,160 +421,160 @@ export class TabpanePerfProfile extends BaseElement {
           },
         ];
         this.getDataByWorker(args, (result: any[]) => {
-          this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
+          this.setPerfProfilerLeftTableData(result);
+          this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
           this.switchFlameChart(data);
         });
       } else {
         this.switchFlameChart(data);
       }
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.perfProfilerTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
-      this.sortKey = evt.detail.key;
+      this.perfProfileSortKey = evt.detail.key;
       // @ts-ignore
-      this.sortType = evt.detail.sort;
+      this.perfProfileSortType = evt.detail.sort;
       // @ts-ignore
-      this.setLTableData(this.dataSource);
-      this.frameChart!.data = this.dataSource;
+      this.setPerfProfilerLeftTableData(this.perfProfilerDataSource);
+      this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.parentElement!.onscroll = () => {
-      this.frameChart!.tabPaneScrollTop = this.parentElement!.scrollTop;
+      this.perfProfileFrameChart!.tabPaneScrollTop = this.parentElement!.scrollTop;
     };
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let perfProfileTabFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
+      if (perfProfileTabFilter.clientHeight > 0) filterHeight = perfProfileTabFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        perfProfileTabFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        perfProfileTabFilter.style.display = 'none';
       }
-      this.modal!.style.height = this.tbl!.clientHeight - 2 + 'px'; //2 is borderWidth
-      if (this.tbl!.style.visibility == 'hidden') {
-        tabPaneFilter.style.display = 'none';
+      this.perfProfilerModal!.style.height = this.perfProfilerTbl!.clientHeight - 2 + 'px'; //2 is borderWidth
+      if (this.perfProfilerTbl!.style.visibility == 'hidden') {
+        perfProfileTabFilter.style.display = 'none';
       }
       if (this.parentElement?.clientHeight != 0) {
         if (this.isChartShow) {
-          this.frameChart?.updateCanvas(false, entries[0].contentRect.width);
-          this.frameChart?.calculateChartData();
+          this.perfProfileFrameChart?.updateCanvas(false, entries[0].contentRect.width);
+          this.perfProfileFrameChart?.calculateChartData();
         }
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.perfProfilerTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
+        this.perfProfilerTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
-        this.tbr?.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
+        this.perfProfilerList?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
+        this.perfProfilerList?.reMeauseHeight();
+        this.perfProfileLoadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
 
   switchFlameChart(data: any) {
-    let pageTab = this.shadowRoot?.querySelector('#show_table');
-    let pageChart = this.shadowRoot?.querySelector('#show_chart');
+    let perfProfilerPageTab = this.shadowRoot?.querySelector('#show_table');
+    let perfProfilerPageChart = this.shadowRoot?.querySelector('#show_chart');
     if (data.icon == 'block') {
-      pageChart?.setAttribute('class', 'show');
-      pageTab?.setAttribute('class', '');
+      perfProfilerPageChart?.setAttribute('class', 'show');
+      perfProfilerPageTab?.setAttribute('class', '');
       this.isChartShow = true;
-      this.filter!.disabledMining = true;
-      this.showButtomMenu(this.needShowMenu);
-      this.frameChart!.data = this.dataSource;
-      this.frameChart?.calculateChartData();
+      this.perfProfilerFilter!.disabledMining = true;
+      showButtonMenu(this.perfProfilerFilter, this.needShowMenu);
+      this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
+      this.perfProfileFrameChart?.calculateChartData();
     } else if (data.icon == 'tree') {
-      pageChart?.setAttribute('class', '');
-      pageTab?.setAttribute('class', 'show');
-      this.showButtomMenu(true);
+      perfProfilerPageChart?.setAttribute('class', '');
+      perfProfilerPageTab?.setAttribute('class', 'show');
+      showButtonMenu(this.perfProfilerFilter, true);
       this.isChartShow = false;
-      this.filter!.disabledMining = false;
-      this.frameChart!.clearCanvas();
-      this.tbl!.reMeauseHeight();
+      this.perfProfilerFilter!.disabledMining = false;
+      this.perfProfileFrameChart!.clearCanvas();
+      this.perfProfilerTbl!.reMeauseHeight();
     }
   }
 
   refreshAllNode(filterData: any) {
-    let args: any[] = [];
+    let perfProfileArgs: any[] = [];
     let isTopDown: boolean = !filterData.callTree[0];
     this.isCurrentIsTopDown = isTopDown;
     let isHideSystemLibrary = filterData.callTree[1];
     let list = filterData.dataMining.concat(filterData.dataLibrary);
-    args.push({
+    perfProfileArgs.push({
       funcName: 'getCallChainsBySampleIds',
       funcArgs: [isTopDown],
     });
-    this.tbr!.recycleDataSource = [];
+    this.perfProfilerList!.recycleDataSource = [];
     if (isHideSystemLibrary) {
-      args.push({
+      perfProfileArgs.push({
         funcName: 'hideSystemLibrary',
         funcArgs: [],
       });
     }
     if (filterData.callTreeConstraints.checked) {
-      args.push({
+      perfProfileArgs.push({
         funcName: 'hideNumMaxAndMin',
         funcArgs: [parseInt(filterData.callTreeConstraints.inputs[0]), filterData.callTreeConstraints.inputs[1]],
       });
     }
-    args.push({
+    perfProfileArgs.push({
       funcName: 'splitAllProcess',
       funcArgs: [list],
     });
-    args.push({
+    perfProfileArgs.push({
       funcName: 'resetAllNode',
       funcArgs: [],
     });
-    this.getDataByWorker(args, (result: any[]) => {
-      this.setLTableData(result);
-      this.frameChart!.data = this.dataSource;
-      if (this.isChartShow) this.frameChart?.calculateChartData();
+    this.getDataByWorker(perfProfileArgs, (result: any[]) => {
+      this.setPerfProfilerLeftTableData(result);
+      this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
+      if (this.isChartShow) this.perfProfileFrameChart?.calculateChartData();
     });
   }
 
-  setLTableData(resultData: any[]) {
-    this.dataSource = this.sortTree(resultData);
-    this.tbl!.recycleDataSource = this.dataSource;
+  setPerfProfilerLeftTableData(resultData: any[]) {
+    this.perfProfilerDataSource = this.sortTree(resultData);
+    this.perfProfilerTbl!.recycleDataSource = this.perfProfilerDataSource;
   }
 
   sortTree(arr: Array<any>): Array<any> {
-    let sortArr = arr.sort((a, b) => {
-      if (this.sortKey == 'self') {
-        if (this.sortType == 0) {
-          return b.dur - a.dur;
-        } else if (this.sortType == 1) {
-          return a.selfDur - b.selfDur;
+    let perfProfileSortArr = arr.sort((perfProfileA, perfProfileB) => {
+      if (this.perfProfileSortKey == 'self') {
+        if (this.perfProfileSortType == 0) {
+          return perfProfileB.dur - perfProfileA.dur;
+        } else if (this.perfProfileSortType == 1) {
+          return perfProfileA.selfDur - perfProfileB.selfDur;
         } else {
-          return b.selfDur - a.selfDur;
+          return perfProfileB.selfDur - perfProfileA.selfDur;
         }
       } else {
-        if (this.sortType == 0) {
-          return b.dur - a.dur;
-        } else if (this.sortType == 1) {
-          return a.dur - b.dur;
+        if (this.perfProfileSortType == 0) {
+          return perfProfileB.dur - perfProfileA.dur;
+        } else if (this.perfProfileSortType == 1) {
+          return perfProfileA.dur - perfProfileB.dur;
         } else {
-          return b.dur - a.dur;
+          return perfProfileB.dur - perfProfileA.dur;
         }
       }
     });
-    sortArr.map((call) => {
+    perfProfileSortArr.map((call) => {
       call.children = this.sortTree(call.children);
     });
-    return sortArr;
+    return perfProfileSortArr;
   }
 
   getDataByWorker(args: any[], handler: Function) {
-    this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+    this.perfProfileLoadingList.push(1);
+    this.perfProfileProgressEL!.loading = true;
+    this.perfProfileLoadingPage.style.visibility = 'visible';
     procedurePool.submitWithName('logic0', 'perf-action', args, undefined, (results: any) => {
       handler(results);
-      this.loadingList.splice(0, 1);
-      if (this.loadingList.length == 0) {
-        this.progressEL!.loading = false;
-        this.loadingPage.style.visibility = 'hidden';
+      this.perfProfileLoadingList.splice(0, 1);
+      if (this.perfProfileLoadingList.length == 0) {
+        this.perfProfileProgressEL!.loading = false;
+        this.perfProfileLoadingPage.style.visibility = 'hidden';
       }
     });
   }
@@ -615,14 +601,14 @@ export class TabpanePerfProfile extends BaseElement {
             display: flex;
             flex: 1;
         }
-        .progress{
+        .perf-profile-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .perf-profile-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -632,7 +618,7 @@ export class TabpanePerfProfile extends BaseElement {
             z-index: 999999;
         }
     </style>
-    <div style="display: flex;flex-direction: row">
+    <div class="perf-profile-content" style="display: flex;flex-direction: row">
     
     <selector id='show_table' class="show">
         <lit-slicer style="width:100%">
@@ -661,11 +647,11 @@ export class TabpanePerfProfile extends BaseElement {
         </lit-slicer>
      </selector>
      <tab-pane-filter id="filter" input inputLeftText icon tree></tab-pane-filter>
-     <lit-progress-bar class="progress"></lit-progress-bar>
+     <lit-progress-bar class="progress perf-profile-progress"></lit-progress-bar>
     <selector id='show_chart'>
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>  
-    <div class="loading"></div>
+    <div class="loading perf-profile-loading"></div>
     </div>`;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
index 1d12aee332ec2da5e70b0fdd3c8c7fe1ada10da2..322933523d0af4a1f51c26becd3237a3c2822f10 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
@@ -33,32 +33,32 @@ import { Cmd } from '../../../../../command/Cmd.js';
 
 @element('tabpane-perf-sample')
 export class TabPanePerfSample extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private perfSampleTbl: LitTable | null | undefined;
   private tblData: LitTable | null | undefined;
-  private source: Array<PerfSample> = [];
+  private perfSampleSource: Array<PerfSample> = [];
   private processMap: Map<number, PerfThread> = new Map<number, PerfThread>();
-  private modal: DisassemblingWindow | null | undefined;
+  private perfSampleListModal: DisassemblingWindow | null | undefined;
   private sortKey: string = 'timeString';
   private sortType: number = 0;
 
-  set data(val: SelectionParam | null | undefined) {
-    this.modal!.style.display = 'none';
-    this.tbl!.style.visibility = 'visible';
+  set data(perfSampleSelection: SelectionParam | null | undefined) {
+    this.perfSampleListModal!.style.display = 'none';
+    this.perfSampleTbl!.style.visibility = 'visible';
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 40 + 'px';
-    this.tbl!.recycleDataSource = [];
+    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!.recycleDataSource = [];
-    if (val) {
+    if (perfSampleSelection) {
       Promise.all([
         queryPerfProcess(),
         queryPerfSampleListByTimeRange(
-          val.leftNs,
-          val.rightNs,
-          val.perfAll ? [] : val.perfCpus,
-          val.perfAll ? [] : val.perfProcess,
-          val.perfAll ? [] : val.perfThread
+          perfSampleSelection.leftNs,
+          perfSampleSelection.rightNs,
+          perfSampleSelection.perfAll ? [] : perfSampleSelection.perfCpus,
+          perfSampleSelection.perfAll ? [] : perfSampleSelection.perfProcess,
+          perfSampleSelection.perfAll ? [] : perfSampleSelection.perfThread
         ),
       ]).then((results) => {
         let processes = results[0] as Array<PerfThread>;
@@ -92,8 +92,8 @@ export class TabPanePerfSample extends BaseElement {
             sample.backtrace.push(`(${sample.depth} other frames)`);
           }
         }
-        this.source = samples;
-        this.sortTable(this.sortKey, this.sortType);
+        this.perfSampleSource = samples;
+        this.sortPerfSampleTable(this.sortKey, this.sortType);
       });
     }
   }
@@ -110,57 +110,57 @@ export class TabPanePerfSample extends BaseElement {
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-perf-sample');
+    this.perfSampleTbl = this.shadowRoot?.querySelector<LitTable>('#tb-perf-sample');
     this.tblData = this.shadowRoot?.querySelector<LitTable>('#tb-stack-data');
-    this.modal = this.shadowRoot?.querySelector<DisassemblingWindow>('tab-native-data-modal');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.perfSampleListModal = this.shadowRoot?.querySelector<DisassemblingWindow>('tab-native-data-modal');
+    this.perfSampleTbl!.addEventListener('row-click', (e) => {
       // @ts-ignore
       let data = e.detail.data as PerfSample;
       this.setRightTableData(data);
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.perfSampleTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortKey = evt.detail.key;
       // @ts-ignore
       this.sortType = evt.detail.sort;
       // @ts-ignore
-      this.sortTable(evt.detail.key, evt.detail.sort);
+      this.sortPerfSampleTable(evt.detail.key, evt.detail.sort);
     });
     let lastClikTime = 0;
     let spApplication = <SpApplication>document.getElementsByTagName('sp-application')[0];
     this.tblData!.addEventListener('row-click', (e) => {
       if (Date.now() - lastClikTime < 200 && spApplication.vs) {
-        this.tbl!.style.visibility = 'hidden';
+        this.perfSampleTbl!.style.visibility = 'hidden';
         new ResizeObserver((entries) => {
-          this.modal!.style.width = this.tbl!.clientWidth + 'px';
-          this.modal!.style.height = this.tbl!.clientHeight + 'px';
-        }).observe(this.tbl!);
-        this.modal!.showLoading();
+          this.perfSampleListModal!.style.width = this.perfSampleTbl!.clientWidth + 'px';
+          this.perfSampleListModal!.style.height = this.perfSampleTbl!.clientHeight + 'px';
+        }).observe(this.perfSampleTbl!);
+        this.perfSampleListModal!.showLoading();
         // @ts-ignore
         let data = e.detail.data as PerfStack;
-        let path = data.path;
-        let addr = data.vaddrInFile;
-        let addrHex = addr.toString(16);
-        if (path.trim() === '[kernel.kallsyms]') {
-          this.modal?.showContent(`error : Symbol ${data.symbol} lib is [kernel.kallsyms] ,not support `, addrHex);
-        } else if (path.trim() === '') {
-          this.modal?.showContent(`error : Symbol ${data.symbol} lib is null `, addrHex);
-        } else if (addr < 0) {
-          this.modal?.showContent(`error : Symbol ${data.symbol} current addr is error ` + addrHex, addrHex);
+        let perfSampleListPath = data.path;
+        let perfSampleListAddr = data.vaddrInFile;
+        let perfSampleListAddrHex = perfSampleListAddr.toString(16);
+        if (perfSampleListPath.trim() === '[kernel.kallsyms]') {
+          this.perfSampleListModal?.showContent(`error : Symbol ${data.symbol} lib is [kernel.kallsyms] ,not support `, perfSampleListAddrHex);
+        } else if (perfSampleListPath.trim() === '') {
+          this.perfSampleListModal?.showContent(`error : Symbol ${data.symbol} lib is null `, perfSampleListAddrHex);
+        } else if (perfSampleListAddr < 0) {
+          this.perfSampleListModal?.showContent(`error : Symbol ${data.symbol} current addr is error ` + perfSampleListAddrHex, perfSampleListAddrHex);
         } else {
           const binDir = 'C:/binary_cache';
-          let binPath = binDir + path;
+          let binPath = binDir + perfSampleListPath;
           let cmd = 'C:/binary_cache/llvm-objdump.exe -S ' + binPath;
-          Cmd.execObjDump(cmd, addrHex, (result: any) => {
-            this.modal?.showContent(result, addrHex);
+          Cmd.execObjDump(cmd, perfSampleListAddrHex, (result: any) => {
+            this.perfSampleListModal?.showContent(result, perfSampleListAddrHex);
           });
         }
       }
       lastClikTime = Date.now();
     });
-    this.modal!.setCloseListener(() => {
-      this.modal!.style.display = 'none';
-      this.tbl!.style.visibility = 'visible';
+    this.perfSampleListModal!.setCloseListener(() => {
+      this.perfSampleListModal!.style.display = 'none';
+      this.perfSampleTbl!.style.visibility = 'visible';
     });
   }
 
@@ -169,37 +169,37 @@ export class TabPanePerfSample extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.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.tbl?.reMeauseHeight();
+        this.perfSampleTbl?.reMeauseHeight();
         this.tblData?.reMeauseHeight();
       }
-      this.modal!.style.height = this.tbl!.clientHeight - 2 + 'px'; //2 is borderWidth
+      this.perfSampleListModal!.style.height = this.perfSampleTbl!.clientHeight - 2 + 'px'; //2 is borderWidth
     }).observe(this.parentElement!);
   }
 
-  sortTable(key: string, type: number) {
-    this.source.sort((a, b): number => {
+  sortPerfSampleTable(key: string, type: number) {
+    this.perfSampleSource.sort((perfSampleA, perfSampleB): number => {
       if (key == 'timeString') {
         if (type == 0) {
-          return a.time - b.time;
+          return perfSampleA.time - perfSampleB.time;
         } else if (type == 1) {
-          return a.time - b.time;
+          return perfSampleA.time - perfSampleB.time;
         } else {
-          return b.time - a.time;
+          return perfSampleB.time - perfSampleA.time;
         }
       } else {
         if (type == 0) {
-          return a.core - b.core;
+          return perfSampleA.core - perfSampleB.core;
         } else if (type == 1) {
-          return a.core - b.core;
+          return perfSampleA.core - perfSampleB.core;
         } else {
-          return b.core - a.core;
+          return perfSampleB.core - perfSampleA.core;
         }
       }
     });
-    this.tbl!.recycleDataSource = this.source;
+    this.perfSampleTbl!.recycleDataSource = this.perfSampleSource;
   }
 
   initHtml(): string {
@@ -211,20 +211,20 @@ export class TabPanePerfSample extends BaseElement {
     padding: 10px 10px;
 }
 </style>
-<div style="display: flex;flex-direction: row">
+<div class="perf-sample-content" style="display: flex;flex-direction: row">
     <lit-slicer style="width:100%">
     <div id="left_table" style="width: 65%">
         <tab-native-data-modal style="display:none;"/></tab-native-data-modal>
         <lit-table id="tb-perf-sample" style="height: auto">
-            <lit-table-column order width="1fr" title="Sample Time" data-index="timeString" key="timeString" align="flex-start" ></lit-table-column>
-            <lit-table-column order width="70px" title="Core" data-index="coreName" key="coreName" align="flex-start" ></lit-table-column>
-            <lit-table-column width="1fr" title="Process" data-index="processName" key="processName" align="flex-start" ></lit-table-column>
-            <lit-table-column width="1fr" title="Thread" data-index="threadName" key="threadName" align="flex-start" ></lit-table-column>
-            <lit-table-column width="1fr" title="State" data-index="state" key="state" align="flex-start" ></lit-table-column>
-            <lit-table-column width="1fr" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
+            <lit-table-column class="perf-sample-column" order width="1fr" title="Sample Time" data-index="timeString" key="timeString" align="flex-start" ></lit-table-column>
+            <lit-table-column class="perf-sample-column" order width="70px" title="Core" data-index="coreName" key="coreName" align="flex-start" ></lit-table-column>
+            <lit-table-column class="perf-sample-column" width="1fr" title="Process" data-index="processName" key="processName" align="flex-start" ></lit-table-column>
+            <lit-table-column class="perf-sample-column" width="1fr" title="Thread" data-index="threadName" key="threadName" align="flex-start" ></lit-table-column>
+            <lit-table-column class="perf-sample-column" width="1fr" title="State" data-index="state" key="state" align="flex-start" ></lit-table-column>
+            <lit-table-column class="perf-sample-column" width="1fr" title="Backtrace" data-index="backtrace" key="backtrace" align="flex-start" >
                 <template>
                     <div>
-                        <span>{{backtrace[0]}}</span>
+                        <span class="title-span">{{backtrace[0]}}</span>
                         <span v-if="backtrace.length > 1">⬅</span>
                         <span v-if="backtrace.length > 1"style="color: #565656"> {{backtrace[1]}}</span>
                     </div>
diff --git a/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts b/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts
index 233f985ba13da9abd39ca66a72673fe5be12835d..3e58acc7ba8399de94d07886a38693f2124bf135 100644
--- a/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts
+++ b/ide/src/trace/component/trace/sheet/irq/TabPaneIrqCounter.ts
@@ -15,66 +15,66 @@
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { Counter, SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
-import { getTabCounters, getTabVirtualCounters } from '../../../../database/SqlLite.js';
+import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-irq-counter')
 export class TabPaneIrqCounter extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private source: Array<SelectionData> = [];
+  private irqCounterTbl: LitTable | null | undefined;
+  private irqRange: HTMLLabelElement | null | undefined;
+  private irqCounterSource: Array<SelectionData> = [];
 
-  set data(val: SelectionParam | any) {
+  set data(irqParam: SelectionParam | any) {
     //@ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    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)) +
+        ' ms';
     let dataSource: Array<SelectionData> = [];
-    let collect = val.irqMapData;
+    let collect = irqParam.irqMapData;
     let sumCount = 0;
     for (let key of collect.keys()) {
       let counters = collect.get(key);
-      let sd = this.createSelectCounterData(key, counters);
-      sumCount += Number.parseInt(sd.count || '0');
-      sd.avgDuration = Utils.getProbablyTime(sd.wallDuration / parseInt(sd.count));
-      dataSource.push(sd);
+      let selectCounterData = this.createSelectCounterData(key, counters);
+      sumCount += Number.parseInt(selectCounterData.count || '0');
+      selectCounterData.avgDuration = Utils.getProbablyTime(selectCounterData.wallDuration / parseInt(selectCounterData.count));
+      dataSource.push(selectCounterData);
     }
-    this.source = dataSource;
-    this.tbl!.recycleDataSource = dataSource;
+    this.irqCounterSource = dataSource;
+    this.irqCounterTbl!.recycleDataSource = dataSource;
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.irqCounterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-irq-counter');
+    this.irqRange = this.shadowRoot?.querySelector('#time-range');
+    this.irqCounterTbl!.addEventListener('column-click', (event) => {
       // @ts-ignore
-      this.sortByColumn(evt.detail);
+      this.sortByColumn(event.detail);
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.irqCounterTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .irq-counter-label{
+            font-size: 10pt;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
-        <lit-table id="tb-counter" style="height: auto">
+        <label id="time-range" class="irq-counter-label" style="width: 100%;height: 20px;text-align: end;margin-bottom: 5px;">Selected range:0.0 ms</label>
+        <lit-table id="tb-irq-counter" style="height: auto">
             <lit-table-column width="30%" title="Name" data-index="name" key="name"  align="flex-start" order>
             </lit-table-column>
             <lit-table-column width="1fr" title="Duration" data-index="wallDurationFormat" key="wallDurationFormat"  align="flex-start" order >
@@ -92,8 +92,8 @@ export class TabPaneIrqCounter extends BaseElement {
     if (list.length > 0) {
       selectData.name = name;
       selectData.count = list.length + '';
-      for (let i = 0; i < list.length; i++) {
-        selectData.wallDuration += list[i].dur;
+      for (let index = 0; index < list.length; index++) {
+        selectData.wallDuration += list[index].dur;
       }
       selectData.wallDurationFormat = Utils.getProbablyTime(selectData.wallDuration);
     }
@@ -104,32 +104,38 @@ export class TabPaneIrqCounter extends BaseElement {
     let type = detail.sort;
     let key = detail.key;
     if (type == 0) {
-      this.tbl!.recycleDataSource = this.source;
+      this.irqCounterTbl!.recycleDataSource = this.irqCounterSource;
     } else {
-      let arr = Array.from(this.source);
-      arr.sort((a, b): number => {
+      let arr = Array.from(this.irqCounterSource);
+      arr.sort((irqCounterLeftData, irqCounterRightData): number => {
         if (key == 'wallDurationFormat') {
           if (type == 1) {
-            return a.wallDuration - b.wallDuration;
+            return irqCounterLeftData.wallDuration - irqCounterRightData.wallDuration;
           } else {
-            return b.wallDuration - a.wallDuration;
+            return irqCounterRightData.wallDuration - irqCounterLeftData.wallDuration;
           }
         } else if (key == 'count') {
           if (type == 1) {
-            return parseInt(a.count) >= parseInt(b.count) ? 1 : -1;
+            return parseInt(irqCounterLeftData.count) >= parseInt(irqCounterRightData.count) ? 1 : -1;
           } else {
-            return parseInt(b.count) >= parseInt(a.count) ? 1 : -1;
+            return parseInt(irqCounterRightData.count) >= parseInt(irqCounterLeftData.count) ? 1 : -1;
           }
         } else if (key == 'avgDuration') {
           if (type == 1) {
-            return a.wallDuration / parseInt(a.count) - b.wallDuration / parseInt(b.count);
+            return (
+                irqCounterLeftData.wallDuration / parseInt(irqCounterLeftData.count) -
+                irqCounterRightData.wallDuration / parseInt(irqCounterRightData.count)
+            );
           } else {
-            return b.wallDuration / parseInt(b.count) - a.wallDuration / parseInt(a.count);
+            return (
+                irqCounterRightData.wallDuration / parseInt(irqCounterRightData.count) -
+                irqCounterLeftData.wallDuration / parseInt(irqCounterLeftData.count)
+            );
           }
         } else if (key == 'name') {
-          if (a.name > b.name) {
+          if (irqCounterLeftData.name > irqCounterRightData.name) {
             return type === 2 ? 1 : -1;
-          } else if (a.name == b.name) {
+          } else if (irqCounterLeftData.name == irqCounterRightData.name) {
             return 0;
           } else {
             return type === 2 ? -1 : 1;
@@ -138,7 +144,7 @@ export class TabPaneIrqCounter extends BaseElement {
           return 0;
         }
       });
-      this.tbl!.recycleDataSource = arr;
+      this.irqCounterTbl!.recycleDataSource = arr;
     }
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts b/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts
index 01de7c4d96d1f9e83d1486dafd49bbceaf3aa224..9efb3d0705671bb9e2ae59c0cebcde9a5b45e587 100644
--- a/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts
+++ b/ide/src/trace/component/trace/sheet/jank/TabPaneFrames.ts
@@ -18,126 +18,101 @@ import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection';
 import { LitTable } from '../../../../../base-ui/table/lit-table';
 import { JankFramesStruct } from '../../../../bean/JankFramesStruct.js';
 import { JanksStruct } from '../../../../bean/JanksStruct.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-frames')
 export class TabPaneFrames extends BaseElement {
-  private litTable: LitTable | null | undefined;
+  private framesTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
-  private source: Array<any> = [];
-  set data(val: SelectionParam | any) {
+  private framesSource: Array<any> = [];
+  set data(framesParam: SelectionParam | any) {
     this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    this.queryDataByDB(val);
+      'Selected range: ' + parseFloat(((framesParam.rightNs - framesParam.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    this.queryDataByDB(framesParam);
   }
 
-  queryDataByDB(val: SelectionParam | any) {
+  queryDataByDB(framesParam: SelectionParam | any) {
     let tablelist = new Array<JankFramesStruct>();
     let sumRes: JankFramesStruct = new JankFramesStruct();
     let appJank: JankFramesStruct = new JankFramesStruct();
     let rsJank: JankFramesStruct = new JankFramesStruct();
     let noJank: JankFramesStruct = new JankFramesStruct();
-    val.jankFramesData.forEach((data: Array<JanksStruct>) => {
+    framesParam.jankFramesData.forEach((data: Array<JanksStruct>) => {
       sumRes.occurrences += data.length;
-      data.forEach((da: JanksStruct) => {
-        if (da.dur == null || da.dur == undefined) {
-          da.dur = 0;
+      data.forEach((structValue: JanksStruct) => {
+        if (structValue.dur == null || structValue.dur == undefined) {
+          structValue.dur = 0;
         }
-        if (da.frame_type == 'app') {
-          if (da.jank_tag) {
-            appJank.flag = da.jank_tag;
+        if (structValue.frame_type == 'app') {
+          if (structValue.jank_tag) {
+            appJank.flag = structValue.jank_tag;
             appJank.jankType = 'APP Deadline Missed';
             appJank.occurrences += 1;
-            appJank.maxDuration = Math.max(da.dur, appJank.maxDuration!);
+            appJank.maxDuration = Math.max(structValue.dur, appJank.maxDuration!);
             if (appJank.minDuration == -1) {
-              appJank.minDuration = da.dur;
+              appJank.minDuration = structValue.dur;
             } else {
-              appJank.minDuration = Math.min(da.dur, appJank.minDuration!);
+              appJank.minDuration = Math.min(structValue.dur, appJank.minDuration!);
             }
             if (appJank.meanDuration == -1) {
-              appJank.meanDuration = da.dur;
+              appJank.meanDuration = structValue.dur;
             } else {
-              appJank.meanDuration = Number(((da.dur + appJank.meanDuration!) / 2).toFixed(2));
+              appJank.meanDuration = Number(((structValue.dur + appJank.meanDuration!) / 2).toFixed(2));
             }
           } else {
-            noJank.flag = da.jank_tag;
-            noJank.jankType = 'None';
-            noJank.occurrences += 1;
-            noJank.maxDuration = Math.max(da.dur, noJank.maxDuration!);
-            if (noJank.minDuration == -1) {
-              noJank.minDuration = da.dur;
-            } else {
-              noJank.minDuration = Math.min(da.dur, noJank.minDuration!);
-            }
-            if (noJank.meanDuration == -1) {
-              noJank.meanDuration = da.dur;
-            } else {
-              noJank.meanDuration = Number(((da.dur + noJank.meanDuration!) / 2).toFixed(2));
-            }
+            this.refreshNoJankData(noJank, structValue);
           }
-        } else if (da.frame_type == 'renderService') {
-          if (da.jank_tag) {
-            rsJank.flag = da.jank_tag;
+        } else if (structValue.frame_type == 'renderService') {
+          if (structValue.jank_tag) {
+            rsJank.flag = structValue.jank_tag;
             rsJank.jankType = 'RenderService Deadline Missed';
             rsJank.occurrences += 1;
-            rsJank.maxDuration = Math.max(da.dur, rsJank.maxDuration!);
+            rsJank.maxDuration = Math.max(structValue.dur, rsJank.maxDuration!);
             if (rsJank.minDuration == -1) {
-              rsJank.minDuration = da.dur;
+              rsJank.minDuration = structValue.dur;
             } else {
-              rsJank.minDuration = Math.min(da.dur, rsJank.minDuration!);
+              rsJank.minDuration = Math.min(structValue.dur, rsJank.minDuration!);
             }
             if (rsJank.meanDuration == -1) {
-              rsJank.meanDuration = da.dur;
+              rsJank.meanDuration = structValue.dur;
             } else {
-              rsJank.meanDuration = Number(((da.dur + rsJank.meanDuration!) / 2).toFixed(2));
+              rsJank.meanDuration = Number(((structValue.dur + rsJank.meanDuration!) / 2).toFixed(2));
             }
           } else {
-            noJank.flag = da.jank_tag;
-            noJank.jankType = 'None';
-            noJank.occurrences += 1;
-            noJank.maxDuration = Math.max(da.dur, noJank.maxDuration);
-            if (noJank.minDuration == -1) {
-              noJank.minDuration = da.dur;
-            } else {
-              noJank.minDuration = Math.min(da.dur, noJank.minDuration!);
-            }
-            if (noJank.meanDuration == -1) {
-              noJank.meanDuration = da.dur;
-            } else {
-              noJank.meanDuration = Number(((da.dur + noJank.meanDuration) / 2).toFixed(2));
-            }
+            this.refreshNoJankData(noJank, structValue);
           }
         } else {
           // frameTime
-          if (da.jank_tag) {
-            appJank.flag = da.jank_tag;
+          if (structValue.jank_tag) {
+            appJank.flag = structValue.jank_tag;
             appJank.jankType = 'Deadline Missed';
             appJank.occurrences += 1;
-            appJank.maxDuration = Math.max(da.dur, appJank.maxDuration);
-            appJank.minDuration = Math.min(da.dur, appJank.minDuration);
+            appJank.maxDuration = Math.max(structValue.dur, appJank.maxDuration);
+            appJank.minDuration = Math.min(structValue.dur, appJank.minDuration);
             if (appJank.minDuration == -1) {
-              appJank.minDuration = da.dur;
+              appJank.minDuration = structValue.dur;
             } else {
-              appJank.minDuration = Math.min(da.dur, appJank.minDuration!);
+              appJank.minDuration = Math.min(structValue.dur, appJank.minDuration!);
             }
             if (appJank.meanDuration == -1) {
-              appJank.meanDuration = da.dur;
+              appJank.meanDuration = structValue.dur;
             } else {
-              appJank.meanDuration = Number(((da.dur + appJank.meanDuration) / 2).toFixed(2));
+              appJank.meanDuration = Number(((structValue.dur + appJank.meanDuration) / 2).toFixed(2));
             }
           } else {
-            noJank.flag = da.jank_tag;
+            noJank.flag = structValue.jank_tag;
             noJank.jankType = 'None';
             noJank.occurrences += 1;
-            noJank.maxDuration = Math.max(da.dur, noJank.maxDuration);
+            noJank.maxDuration = Math.max(structValue.dur, noJank.maxDuration);
             if (noJank.minDuration == -1) {
-              noJank.minDuration = da.dur;
+              noJank.minDuration = structValue.dur;
             } else {
-              noJank.minDuration = Math.min(da.dur, noJank.minDuration!);
+              noJank.minDuration = Math.min(structValue.dur, noJank.minDuration!);
             }
             if (noJank.meanDuration == -1) {
-              noJank.meanDuration = da.dur;
+              noJank.meanDuration = structValue.dur;
             } else {
-              noJank.meanDuration = Number(((da.dur + noJank.meanDuration) / 2).toFixed(2));
+              noJank.meanDuration = Number(((structValue.dur + noJank.meanDuration) / 2).toFixed(2));
             }
           }
         }
@@ -162,14 +137,31 @@ export class TabPaneFrames extends BaseElement {
       noJank.meanDurationStr = noJank.meanDuration + '';
       tablelist.push(noJank);
     }
-    this.source = tablelist;
-    this.litTable!.recycleDataSource = tablelist;
+    this.framesSource = tablelist;
+    this.framesTbl!.recycleDataSource = tablelist;
+  }
+
+  private refreshNoJankData(noJank: JankFramesStruct, structValue: JanksStruct) {
+    noJank.flag = structValue.jank_tag;
+    noJank.jankType = 'None';
+    noJank.occurrences += 1;
+    noJank.maxDuration = Math.max(structValue.dur!, noJank.maxDuration!);
+    if (noJank.minDuration == -1) {
+      noJank.minDuration = structValue.dur!;
+    } else {
+      noJank.minDuration = Math.min(structValue.dur!, noJank.minDuration!);
+    }
+    if (noJank.meanDuration == -1) {
+      noJank.meanDuration = structValue.dur!;
+    } else {
+      noJank.meanDuration = Number(((structValue.dur! + noJank.meanDuration!) / 2).toFixed(2));
+    }
   }
 
   initElements(): void {
-    this.litTable = this.shadowRoot?.querySelector<LitTable>('#tb-frames');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.litTable!.addEventListener('column-click', (evt) => {
+    this.framesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-frames');
+    this.range = this.shadowRoot?.querySelector('#jank-frames-time-range');
+    this.framesTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -177,57 +169,55 @@ export class TabPaneFrames extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.litTable?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.litTable?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.framesTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .frames-label{
+          height: 20px;
+          text-align: end;
+        }
         :host{
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="jank-frames-time-range" class="frames-label" style="width: 100%;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-frames" style="height: auto">
-            <lit-table-column title="Jank Type" width="1fr" data-index="jankType" key="jankType"  align="flex-start" order>
+            <lit-table-column class="jank-frames-column" title="Jank Type" width="1fr" data-index="jankType" key="jankType"  align="flex-start" order>
             </lit-table-column>
-            <lit-table-column title="Min duration" width="1fr" data-index="minDurationStr" key="minDurationStr"  align="flex-start" order >
+            <lit-table-column class="jank-frames-column" title="Min duration" width="1fr" data-index="minDurationStr" key="minDurationStr"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column title="Max duration" width="1fr" data-index="maxDurationStr" key="maxDurationStr"  align="flex-start" order >
+            <lit-table-column class="jank-frames-column" title="Max duration" width="1fr" data-index="maxDurationStr" key="maxDurationStr"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column title="Mean duration" width="1fr" data-index="meanDurationStr" key="meanDurationStr"  align="flex-start" order >
+            <lit-table-column class="jank-frames-column" title="Mean duration" width="1fr" data-index="meanDurationStr" key="meanDurationStr"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column title="Occurrences" width="1fr" data-index="occurrences" key="occurrences"  align="flex-start" order >
+            <lit-table-column class="jank-frames-column" title="Occurrences" width="1fr" data-index="occurrences" key="occurrences"  align="flex-start" order >
             </lit-table-column>
         </lit-table>
         `;
   }
 
-  sortByColumn(detail: any) {
+  sortByColumn(framesDetail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+      return function (framesLeftData: SelectionData, framesRightData: SelectionData) {
+        if (framesLeftData.process == ' ' || framesRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(framesRightData[property]) - parseFloat(framesLeftData[property]) : parseFloat(framesLeftData[property]) - parseFloat(framesRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (framesRightData[property] > framesLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (framesRightData[property] == framesLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -237,11 +227,11 @@ export class TabPaneFrames extends BaseElement {
       };
     }
 
-    if (detail.key === 'jankType') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+    if (framesDetail.key === 'jankType') {
+      this.framesSource.sort(compare(framesDetail.key, framesDetail.sort, 'string'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.framesSource.sort(compare(framesDetail.key, framesDetail.sort, 'number'));
     }
-    this.litTable!.recycleDataSource = this.source;
+    this.framesTbl!.recycleDataSource = this.framesSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallInfo.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallInfo.ts
index 5f51c084bae0ae90d45851332a785cc5379e0d0d..5007beb79149aed5e15a11595f24d02022aa8dbd 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallInfo.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallInfo.ts
@@ -29,12 +29,12 @@ import { procedurePool } from '../../../../database/Procedure.js';
 
 @element('tabpane-native-callinfo')
 export class TabPaneNMCallInfo extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private callInfoTbl: LitTable | null | undefined;
   private tblData: LitTable | null | undefined;
   private progressEL: LitProgressBar | null | undefined;
   private loadingList: number[] = [];
-  private loadingPage: any;
-  private source: Array<NativeHookCallInfo> = [];
+  private callInfoLoadingPage: any;
+  private callInfoSource: Array<NativeHookCallInfo> = [];
   private rightSource: Array<NativeHookCallInfo> = [];
   private queryResult: Array<NativeHookStatistics> = [];
   private native_type: Array<string> = ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'];
@@ -46,77 +46,77 @@ export class TabPaneNMCallInfo extends BaseElement {
   private sortColumn: string = '';
   private sortType: number = 0;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(callInfoParam: SelectionParam | any) {
+    if (callInfoParam == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
+    this.currentSelection = callInfoParam;
     this.initFilterTypes();
     let types: Array<string> = [];
-    if (val.nativeMemory.indexOf(this.native_type[0]) != -1) {
+    if (callInfoParam.nativeMemory.indexOf(this.native_type[0]) != -1) {
       types.push("'AllocEvent'");
       types.push("'MmapEvent'");
     } else {
-      if (val.nativeMemory.indexOf(this.native_type[1]) != -1) {
+      if (callInfoParam.nativeMemory.indexOf(this.native_type[1]) != -1) {
         types.push("'AllocEvent'");
       }
-      if (val.nativeMemory.indexOf(this.native_type[2]) != -1) {
+      if (callInfoParam.nativeMemory.indexOf(this.native_type[2]) != -1) {
         types.push("'MmapEvent'");
       }
     }
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.callInfoTbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
     this.tblData?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight + 'px';
     // @ts-ignore
     this.tblData?.recycleDataSource = [];
     // @ts-ignore
-    this.tbl?.recycleDataSource = [];
+    this.callInfoTbl?.recycleDataSource = [];
     this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    queryNativeHookEventTid(val.leftNs, val.rightNs, types).then((result) => {
+    this.callInfoLoadingPage.style.visibility = 'visible';
+    queryNativeHookEventTid(callInfoParam.leftNs, callInfoParam.rightNs, types).then((result) => {
       this.queryResult = result;
-      this.getDataByNativeMemoryWorker(val);
+      this.getDataByNativeMemoryWorker(callInfoParam);
     });
   }
 
-  getDataByNativeMemoryWorker(val: SelectionParam | any) {
-    let args = new Map<string, any>();
-    args.set('data', this.queryResult);
-    args.set('filterAllocType', this.filterAllocationType);
-    args.set('filterEventType', this.filterNativeType);
-    args.set('leftNs', val.leftNs);
-    args.set('rightNs', val.rightNs);
-    args.set('actionType', 'call-info');
-    this.startWorker(args, (results: any[]) => {
+  getDataByNativeMemoryWorker(callInfoParam: SelectionParam | any) {
+    let callInfoArgs = new Map<string, any>();
+    callInfoArgs.set('data', this.queryResult);
+    callInfoArgs.set('filterAllocType', this.filterAllocationType);
+    callInfoArgs.set('filterEventType', this.filterNativeType);
+    callInfoArgs.set('leftNs', callInfoParam.leftNs);
+    callInfoArgs.set('rightNs', callInfoParam.rightNs);
+    callInfoArgs.set('actionType', 'call-info');
+    this.startWorker(callInfoArgs, (results: any[]) => {
       this.tblData!.recycleDataSource = [];
       this.progressEL!.loading = false;
       if (results.length > 0) {
-        this.source = results;
+        this.callInfoSource = results;
         this.sortTreeByColumn(this.sortColumn, this.sortType);
         this.frameChart!.mode = ChartMode.Byte;
-        this.frameChart!.data = this.source;
+        this.frameChart!.data = this.callInfoSource;
         this.frameChart?.updateCanvas(true, this.clientWidth);
         this.frameChart?.calculateChartData();
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.callInfoSource = [];
+        this.callInfoTbl!.recycleDataSource = [];
         this.frameChart!.data = [];
         this.frameChart!.clearCanvas();
       }
     });
   }
 
-  startWorker(args: Map<string, any>, handler: Function) {
+  startWorker(callInfoArgs: Map<string, any>, handler: Function) {
     this.loadingList.push(1);
     this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    procedurePool.submitWithName('logic1', 'native-memory-action', args, undefined, (res: any) => {
+    this.callInfoLoadingPage.style.visibility = 'visible';
+    procedurePool.submitWithName('logic1', 'native-memory-action', callInfoArgs, undefined, (res: any) => {
       handler(res);
       this.loadingList.splice(0, 1);
       if (this.loadingList.length == 0) {
         this.progressEL!.loading = false;
-        this.loadingPage.style.visibility = 'hidden';
+        this.callInfoLoadingPage.style.visibility = 'hidden';
       }
     });
   }
@@ -158,7 +158,7 @@ export class TabPaneNMCallInfo extends BaseElement {
   setRightTableData(hook: NativeHookCallInfo) {
     let parents: Array<NativeHookCallInfo> = [];
     let children: Array<NativeHookCallInfo> = [];
-    this.getParentTree(this.source, hook, parents);
+    this.getParentTree(this.callInfoSource, hook, parents);
     let maxEventId = hook.eventId;
     let maxHeap = 0;
 
@@ -195,26 +195,26 @@ export class TabPaneNMCallInfo extends BaseElement {
   sortTreeByColumn(column: string, sort: number) {
     this.sortColumn = column;
     this.sortType = sort;
-    this.tbl!.recycleDataSource = this.sortTree(this.source, column, sort);
+    this.callInfoTbl!.recycleDataSource = this.sortTree(this.callInfoSource, column, sort);
   }
 
   sortTree(arr: Array<NativeHookCallInfo>, column: string, sort: number): Array<NativeHookCallInfo> {
-    let sortArr = arr.sort((a, b) => {
+    let sortArr = arr.sort((callInfoLeftData, callInfoRightData) => {
       if (column == 'size') {
         if (sort == 0) {
-          return a.eventId - b.eventId;
+          return callInfoLeftData.eventId - callInfoRightData.eventId;
         } else if (sort == 1) {
-          return a.size - b.size;
+          return callInfoLeftData.size - callInfoRightData.size;
         } else {
-          return b.size - a.size;
+          return callInfoRightData.size - callInfoLeftData.size;
         }
       } else {
         if (sort == 0) {
-          return a.eventId - b.eventId;
+          return callInfoLeftData.eventId - callInfoRightData.eventId;
         } else if (sort == 1) {
-          return a.count - b.count;
+          return callInfoLeftData.count - callInfoRightData.count;
         } else {
-          return b.count - a.count;
+          return callInfoRightData.count - callInfoLeftData.count;
         }
       }
     });
@@ -236,9 +236,9 @@ export class TabPaneNMCallInfo extends BaseElement {
   }
 
   initElements(): void {
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-callinfo');
+    this.callInfoLoadingPage = this.shadowRoot?.querySelector('.nm-call-info-loading');
+    this.progressEL = this.shadowRoot?.querySelector('.nm-call-info-progress') as LitProgressBar;
+    this.callInfoTbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-callinfo');
     this.tblData = this.shadowRoot?.querySelector<LitTable>('#tb-native-data');
     this.frameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
     let pageTab = this.shadowRoot?.querySelector('#show_table');
@@ -248,7 +248,7 @@ export class TabPaneNMCallInfo extends BaseElement {
       this.showButtomMenu(showMenu);
     });
 
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.callInfoTbl!.addEventListener('row-click', (e) => {
       // @ts-ignore
       let data = e.detail.data as NativeHookCallInfo;
       this.setRightTableData(data);
@@ -264,16 +264,16 @@ export class TabPaneNMCallInfo extends BaseElement {
     this.tblData!.addEventListener('row-click', (e) => {
       // @ts-ignore
       let detail = e.detail.data as NativeHookCallInfo;
-      this.tbl?.clearAllSelection(detail);
+      this.callInfoTbl?.clearAllSelection(detail);
       detail.isSelected = true;
-      this.tbl!.scrollToData(detail);
+      this.callInfoTbl!.scrollToData(detail);
       // @ts-ignore
       if ((e.detail as any).callBack) {
         // @ts-ignore
         (e.detail as any).callBack(true);
       }
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.callInfoTbl!.addEventListener('column-click', (evt) => {
       this.sortTreeByColumn(
         // @ts-ignore
         evt.detail.key == 'countValue' || evt.detail.key == 'countPercent' ? 'countValue' : 'size', evt.detail.sort
@@ -288,14 +288,14 @@ export class TabPaneNMCallInfo extends BaseElement {
         pageChart?.setAttribute('class', 'show');
         pageTab?.setAttribute('class', '');
         this.isChartShow = true;
-        this.frameChart!.data = this.source;
+        this.frameChart!.data = this.callInfoSource;
         this.frameChart?.calculateChartData();
       } else if (data.icon == 'tree') {
         pageChart?.setAttribute('class', '');
         pageTab?.setAttribute('class', 'show');
         this.isChartShow = false;
         this.frameChart!.clearCanvas();
-        this.tbl!.reMeauseHeight();
+        this.callInfoTbl!.reMeauseHeight();
       }
     });
     this.initFilterTypes();
@@ -308,30 +308,30 @@ export class TabPaneNMCallInfo extends BaseElement {
     };
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let nmCallInfoTabFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
+      if (nmCallInfoTabFilter.clientHeight > 0) filterHeight = nmCallInfoTabFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        nmCallInfoTabFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        nmCallInfoTabFilter.style.display = 'none';
       }
       if (this.parentElement?.clientHeight != 0) {
         if (!this.isChartShow) {
           // @ts-ignore
-          this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight + 'px';
-          this.tbl?.reMeauseHeight();
+          this.callInfoTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight + 'px';
+          this.callInfoTbl?.reMeauseHeight();
         } else {
           // @ts-ignore
           this.frameChart?.updateCanvas(false, entries[0].contentRect.width);
           this.frameChart?.calculateChartData();
         }
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.callInfoTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
+        this.callInfoTbl?.reMeauseHeight();
         // @ts-ignore
         this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
         this.tblData?.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
+        this.callInfoLoadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
   }
@@ -340,11 +340,11 @@ export class TabPaneNMCallInfo extends BaseElement {
     return `
         <style>
         :host{
+            padding: 10px 10px 0 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px 0 10px;
         }
-        tab-pane-filter {
+        .nm-call-info-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -354,18 +354,18 @@ export class TabPaneNMCallInfo extends BaseElement {
         selector{
             display: none;
         }
-        .progress{
+        .nm-call-info-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         } 
-        .loading{
-            bottom: 0;
+        .nm-call-info-loading{
             position: absolute;
             left: 0;
             right: 0;
+            bottom: 0;
             width:100%;
             background:transparent;
             z-index: 999999;
@@ -375,22 +375,22 @@ export class TabPaneNMCallInfo extends BaseElement {
             flex: 1;
         }
         </style>
-        <div style="display: flex;flex-direction: row">
+        <div class="nm-call-info-content" style="display: flex;flex-direction: row">
             <selector id='show_table' class="show">
             <lit-slicer style="width:100%">
                 <div style="width: 65%">
                     <lit-table id="tb-native-callinfo" style="height: auto" tree>
-                        <lit-table-column width="60%" title="Symbol Name" data-index="symbolName" key="symbolName"  align="flex-start">
+                        <lit-table-column class="nm-call-info-column" width="60%" title="Symbol Name" data-index="symbolName" key="symbolName"  align="flex-start">
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="Size" data-index="heapSizeStr" key="heapSizeStr"  align="flex-start" order>
+                        <lit-table-column class="nm-call-info-column" width="1fr" title="Size" data-index="heapSizeStr" key="heapSizeStr"  align="flex-start" order>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="%" data-index="heapPercent" key="heapPercent" align="flex-start"  order>
+                        <lit-table-column class="nm-call-info-column" width="1fr" title="%" data-index="heapPercent" key="heapPercent" align="flex-start"  order>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="Count" data-index="countValue" key="countValue" align="flex-start" order>
+                        <lit-table-column class="nm-call-info-column" width="1fr" title="Count" data-index="countValue" key="countValue" align="flex-start" order>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="%" data-index="countPercent" key="countPercent" align="flex-start" order>
+                        <lit-table-column class="nm-call-info-column" width="1fr" title="%" data-index="countPercent" key="countPercent" align="flex-start" order>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="  " data-index="type" key="type"  align="flex-start" >
+                        <lit-table-column class="nm-call-info-column" width="1fr" title="  " data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
@@ -401,23 +401,23 @@ export class TabPaneNMCallInfo extends BaseElement {
                 </div>
                 <lit-slicer-track ></lit-slicer-track>
                 <lit-table id="tb-native-data" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                    <lit-table-column width="60px" title="" data-index="type" key="type"  align="flex-start" >
+                    <lit-table-column class="nm-call-info-column" title="" width="60px" data-index="type" key="type"  align="flex-start" >
                         <template>
                             <img src="img/library.png" size="20" v-if=" type == 1 ">
                             <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"  align="flex-start">
+                    <lit-table-column class="nm-call-info-column" width="1fr" title="" data-index="symbolName" key="symbolName"  align="flex-start">
                     </lit-table-column>
                 </lit-table>
                 </lit-slicer>
             </selector>
-            <selector id='show_chart'>
+            <selector class="nm-call-info-selector" id='show_chart'>
                 <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
             </selector>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter" icon first second></tab-pane-filter>
-            <div class="loading"></div>
+            <lit-progress-bar class="progress nm-call-info-progress"></lit-progress-bar>
+            <tab-pane-filter id="filter" class="nm-call-info-filter" icon first second></tab-pane-filter>
+            <div class="loading nm-call-info-loading"></div>
         </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 234db0491c3e7da6538f17b67f5f69dc283ac18c..ecf31594599df22a590451abe9dedc435f7a4ae7 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
@@ -26,17 +26,17 @@ import { FileMerageBean } from '../../../../database/logic-worker/ProcedureLogic
 
 @element('tabpane-nm-calltree')
 export class TabpaneNMCalltree extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private tbr: LitTable | null | undefined;
-  private progressEL: LitProgressBar | null | undefined;
+  private nmCallTreeTbl: LitTable | null | undefined;
+  private filesystemTbr: LitTable | null | undefined;
+  private nmCallTreeProgressEL: LitProgressBar | null | undefined;
   private rightSource: Array<FileMerageBean> = [];
-  private filter: any;
-  private dataSource: any[] = [];
+  private nmCallTreeFilter: any;
+  private nmCallTreeSource: any[] = [];
   private native_type: Array<string> = ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'];
   private sortKey = 'heapSizeStr';
   private sortType = 0;
   private currentSelectedData: any = undefined;
-  private frameChart: FrameChart | null | undefined;
+  private nmCallTreeFrameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
   private systmeRuleName = '/system/';
   private numRuleName = '/max/min/';
@@ -44,7 +44,7 @@ export class TabpaneNMCalltree extends BaseElement {
   private needShowMenu = true;
   private searchValue: string = '';
   private loadingList: number[] = [];
-  private loadingPage: any;
+  private nmCallTreeLoadingPage: any;
   private currentSelection: SelectionParam | undefined;
   private filterAllocationType: string = '0';
   private filterNativeType: string = '0';
@@ -52,46 +52,46 @@ export class TabpaneNMCalltree extends BaseElement {
   private filterResponseSelect: string = '0';
   private responseTypes: any[] = [];
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(nmCallTreeParam: SelectionParam | any) {
+    if (nmCallTreeParam == this.currentSelection) {
       return;
     }
     this.searchValue = '';
-    this.currentSelection = val;
+    this.currentSelection = nmCallTreeParam;
     this.modal!.style.display = 'none';
-    this.tbl!.style.visibility = 'visible';
-    if (this.parentElement!.clientHeight > this.filter!.clientHeight) {
-      this.filter!.style.display = 'flex';
+    this.nmCallTreeTbl!.style.visibility = 'visible';
+    if (this.parentElement!.clientHeight > this.nmCallTreeFilter!.clientHeight) {
+      this.nmCallTreeFilter!.style.display = 'flex';
     } else {
-      this.filter!.style.display = 'none';
+      this.nmCallTreeFilter!.style.display = 'none';
     }
-    this.filter!.initializeFilterTree(true, true, val.nativeMemory.length > 0);
-    this.filter!.filterValue = '';
+    this.nmCallTreeFilter!.initializeFilterTree(true, true, nmCallTreeParam.nativeMemory.length > 0);
+    this.nmCallTreeFilter!.filterValue = '';
     this.initFilterTypes();
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+    this.nmCallTreeProgressEL!.loading = true;
+    this.nmCallTreeLoadingPage.style.visibility = 'visible';
     let types: Array<string | number> = [];
-    if (val.nativeMemory.length > 0) {
-      if (val.nativeMemory.indexOf(this.native_type[0]) != -1) {
+    if (nmCallTreeParam.nativeMemory.length > 0) {
+      if (nmCallTreeParam.nativeMemory.indexOf(this.native_type[0]) != -1) {
         types.push("'AllocEvent'");
         types.push("'MmapEvent'");
       } else {
-        if (val.nativeMemory.indexOf(this.native_type[1]) != -1) {
+        if (nmCallTreeParam.nativeMemory.indexOf(this.native_type[1]) != -1) {
           types.push("'AllocEvent'");
         }
-        if (val.nativeMemory.indexOf(this.native_type[2]) != -1) {
+        if (nmCallTreeParam.nativeMemory.indexOf(this.native_type[2]) != -1) {
           types.push("'MmapEvent'");
         }
       }
     } else {
-      if (val.nativeMemoryStatistic.indexOf(this.native_type[0]) != -1) {
+      if (nmCallTreeParam.nativeMemoryStatistic.indexOf(this.native_type[0]) != -1) {
         types.push(0);
         types.push(1);
       } else {
-        if (val.nativeMemoryStatistic.indexOf(this.native_type[1]) != -1) {
+        if (nmCallTreeParam.nativeMemoryStatistic.indexOf(this.native_type[1]) != -1) {
           types.push(0);
         }
-        if (val.nativeMemoryStatistic.indexOf(this.native_type[2]) != -1) {
+        if (nmCallTreeParam.nativeMemoryStatistic.indexOf(this.native_type[2]) != -1) {
           types.push(1);
         }
       }
@@ -99,29 +99,29 @@ export class TabpaneNMCalltree extends BaseElement {
 
     this.getDataByWorkerQuery(
       {
-        leftNs: val.leftNs,
-        rightNs: val.rightNs,
+        leftNs: nmCallTreeParam.leftNs,
+        rightNs: nmCallTreeParam.rightNs,
         types,
       },
       (results: any[]) => {
         this.setLTableData(results);
-        this.tbr!.recycleDataSource = [];
-        this.frameChart!.mode = ChartMode.Byte;
-        this.frameChart!.data = this.dataSource;
-        this.frameChart?.updateCanvas(true, this.clientWidth);
-        this.frameChart?.calculateChartData();
+        this.filesystemTbr!.recycleDataSource = [];
+        this.nmCallTreeFrameChart!.mode = ChartMode.Byte;
+        this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+        this.nmCallTreeFrameChart?.updateCanvas(true, this.clientWidth);
+        this.nmCallTreeFrameChart?.calculateChartData();
       }
     );
   }
 
-  getParentTree(src: Array<FileMerageBean>, target: FileMerageBean, parents: Array<FileMerageBean>): boolean {
-    for (let call of src) {
-      if (call.id == target.id) {
-        parents.push(call);
+  getParentTree(nmCallTreeSrc: Array<FileMerageBean>, nmCallTreeTarget: FileMerageBean, parents: Array<FileMerageBean>): boolean {
+    for (let nmCallTreeBean of nmCallTreeSrc) {
+      if (nmCallTreeBean.id == nmCallTreeTarget.id) {
+        parents.push(nmCallTreeBean);
         return true;
       } else {
-        if (this.getParentTree(call.children as Array<FileMerageBean>, target, parents)) {
-          parents.push(call);
+        if (this.getParentTree(nmCallTreeBean.children as Array<FileMerageBean>, nmCallTreeTarget, parents)) {
+          parents.push(nmCallTreeBean);
           return true;
         }
       }
@@ -129,14 +129,14 @@ export class TabpaneNMCalltree extends BaseElement {
     return false;
   }
 
-  getChildTree(src: Array<FileMerageBean>, id: string, children: Array<FileMerageBean>): boolean {
-    for (let call of src) {
-      if (call.id == id && call.children.length == 0) {
-        children.push(call);
+  getChildTree(nmCallTreeSrc: Array<FileMerageBean>, id: string, children: Array<FileMerageBean>): boolean {
+    for (let nmCallTreeBean of nmCallTreeSrc) {
+      if (nmCallTreeBean.id == id && nmCallTreeBean.children.length == 0) {
+        children.push(nmCallTreeBean);
         return true;
       } else {
-        if (this.getChildTree(call.children as Array<FileMerageBean>, id, children)) {
-          children.push(call);
+        if (this.getChildTree(nmCallTreeBean.children as Array<FileMerageBean>, id, children)) {
+          children.push(nmCallTreeBean);
           return true;
         }
       }
@@ -144,58 +144,58 @@ export class TabpaneNMCalltree extends BaseElement {
     return false;
   }
 
-  setRightTableData(call: FileMerageBean) {
+  setRightTableData(fileMerageBean: FileMerageBean) {
     let parents: Array<FileMerageBean> = [];
     let children: Array<FileMerageBean> = [];
-    this.getParentTree(this.dataSource, call, parents);
-    let maxId = call.id;
+    this.getParentTree(this.nmCallTreeSource, fileMerageBean, parents);
+    let maxId = fileMerageBean.id;
     let maxDur = 0;
 
-    function findMaxStack(call: any) {
-      if (call.children.length == 0) {
-        if (call.heapSize > maxDur) {
-          maxDur = call.heapSize;
-          maxId = call.id;
+    function findMaxStack(merageBean: any) {
+      if (merageBean.children.length == 0) {
+        if (merageBean.heapSize > maxDur) {
+          maxDur = merageBean.heapSize;
+          maxId = merageBean.id;
         }
       } else {
-        call.children.map((callChild: any) => {
+        merageBean.children.map((callChild: any) => {
           findMaxStack(<FileMerageBean>callChild);
         });
       }
     }
 
-    findMaxStack(call);
-    this.getChildTree(call.children as Array<FileMerageBean>, maxId, children);
-    let arr = parents.reverse().concat(children.reverse());
-    for (let data of arr) {
+    findMaxStack(fileMerageBean);
+    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;
     }
-    let len = arr.length;
-    this.rightSource = arr;
-    this.tbr!.dataSource = len == 0 ? [] : arr;
+    let resultLength = resultValue.length;
+    this.rightSource = resultValue;
+    this.filesystemTbr!.dataSource = resultLength == 0 ? [] : resultValue;
   }
 
   showButtomMenu(isShow: boolean) {
     if (isShow) {
-      this.filter.setAttribute('tree', '');
-      this.filter.setAttribute('input', '');
-      this.filter.setAttribute('inputLeftText', '');
-      this.filter.setAttribute('first', '');
-      this.filter.setAttribute('second', '');
-      this.filter.showThird(true);
+      this.nmCallTreeFilter.showThird(true);
+      this.nmCallTreeFilter.setAttribute('first', '');
+      this.nmCallTreeFilter.setAttribute('second', '');
+      this.nmCallTreeFilter.setAttribute('tree', '');
+      this.nmCallTreeFilter.setAttribute('input', '');
+      this.nmCallTreeFilter.setAttribute('inputLeftText', '');
     } else {
-      this.filter.removeAttribute('tree');
-      this.filter.removeAttribute('input');
-      this.filter.removeAttribute('inputLeftText');
-      this.filter.removeAttribute('first');
-      this.filter.removeAttribute('second');
-      this.filter.showThird(false);
+      this.nmCallTreeFilter.showThird(false);
+      this.nmCallTreeFilter.removeAttribute('first');
+      this.nmCallTreeFilter.removeAttribute('second');
+      this.nmCallTreeFilter.removeAttribute('tree');
+      this.nmCallTreeFilter.removeAttribute('input');
+      this.nmCallTreeFilter.removeAttribute('inputLeftText');
     }
   }
 
   initFilterTypes() {
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    let currentNMCallTreeFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#nm-call-tree-filter');
     if (this.currentSelection!.nativeMemory.length > 0) {
       procedurePool.submitWithName('logic1', 'native-memory-get-responseType', {}, undefined, (res: any) => {
         this.responseTypes = res;
@@ -205,7 +205,7 @@ export class TabpaneNMCalltree extends BaseElement {
         if (nullIndex != -1) {
           this.responseTypes.splice(nullIndex, 1);
         }
-        filter!.setSelectList(
+        currentNMCallTreeFilter!.setSelectList(
           null,
           null,
           'Allocation Lifespan',
@@ -214,62 +214,62 @@ export class TabpaneNMCalltree extends BaseElement {
             return item.value;
           })
         );
-        filter!.setFilterModuleSelect('#first-select', 'width', '150px');
-        filter!.setFilterModuleSelect('#second-select', 'width', '150px');
-        filter!.setFilterModuleSelect('#third-select', 'width', '150px');
-        filter!.firstSelect = '0';
-        filter!.secondSelect = '0';
-        filter!.thirdSelect = '0';
+        currentNMCallTreeFilter!.setFilterModuleSelect('#first-select', 'width', '150px');
+        currentNMCallTreeFilter!.setFilterModuleSelect('#second-select', 'width', '150px');
+        currentNMCallTreeFilter!.setFilterModuleSelect('#third-select', 'width', '150px');
+        currentNMCallTreeFilter!.firstSelect = '0';
+        currentNMCallTreeFilter!.secondSelect = '0';
+        currentNMCallTreeFilter!.thirdSelect = '0';
         this.filterAllocationType = '0';
         this.filterNativeType = '0';
         this.filterResponseSelect = '0';
         this.filterResponseType = -1;
       });
     } else {
-      filter!.setSelectList(null, null, 'Allocation Lifespan', 'Allocation Type', undefined);
-      filter!.setFilterModuleSelect('#first-select', 'width', '150px');
-      filter!.setFilterModuleSelect('#second-select', 'width', '150px');
-      filter!.firstSelect = '0';
-      filter!.secondSelect = '0';
+      currentNMCallTreeFilter!.setSelectList(null, null, 'Allocation Lifespan', 'Allocation Type', undefined);
+      currentNMCallTreeFilter!.setFilterModuleSelect('#first-select', 'width', '150px');
+      currentNMCallTreeFilter!.setFilterModuleSelect('#second-select', 'width', '150px');
+      currentNMCallTreeFilter!.firstSelect = '0';
+      currentNMCallTreeFilter!.secondSelect = '0';
       this.filterAllocationType = '0';
       this.filterNativeType = '0';
     }
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-calltree');
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.frameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
+    this.nmCallTreeTbl = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-calltree');
+    this.nmCallTreeProgressEL = this.shadowRoot?.querySelector('.nm-call-tree-progress') as LitProgressBar;
+    this.nmCallTreeFrameChart = this.shadowRoot?.querySelector<FrameChart>('#framechart');
     this.modal = this.shadowRoot?.querySelector<DisassemblingWindow>('tab-native-data-modal');
-    this.loadingPage = this.shadowRoot?.querySelector('.loading');
-    this.frameChart!.addChartClickListener((needShowMenu: boolean) => {
+    this.nmCallTreeLoadingPage = this.shadowRoot?.querySelector('.nm-call-tree-loading');
+    this.nmCallTreeFrameChart!.addChartClickListener((needShowMenu: boolean) => {
       this.parentElement!.scrollTo(0, 0);
       this.showButtomMenu(needShowMenu);
       this.needShowMenu = needShowMenu;
     });
-    this.tbl!.rememberScrollTop = true;
-    this.filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
-    this.tbl!.addEventListener('row-click', (evt: any) => {
+    this.nmCallTreeTbl!.rememberScrollTop = true;
+    this.nmCallTreeFilter = this.shadowRoot?.querySelector<TabPaneFilter>('#nm-call-tree-filter');
+    this.nmCallTreeTbl!.addEventListener('row-click', (event: any) => {
       // @ts-ignore
-      let data = evt.detail.data as FileMerageBean;
+      let data = event.detail.data as FileMerageBean;
       this.setRightTableData(data);
       data.isSelected = true;
       this.currentSelectedData = data;
-      this.tbr?.clearAllSelection(data);
-      this.tbr?.setCurrentSelection(data);
+      this.filesystemTbr?.clearAllSelection(data);
+      this.filesystemTbr?.setCurrentSelection(data);
       // @ts-ignore
-      if ((evt.detail as any).callBack) {
+      if ((event.detail as any).callBack) {
         // @ts-ignore
-        (evt.detail as any).callBack(true);
+        (event.detail as any).callBack(true);
       }
     });
-    this.tbr = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-list');
-    this.tbr!.addEventListener('row-click', (evt: any) => {
+    this.filesystemTbr = this.shadowRoot?.querySelector<LitTable>('#tb-filesystem-list');
+    this.filesystemTbr!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       let data = evt.detail.data as FileMerageBean;
-      this.tbl?.clearAllSelection(data);
+      this.nmCallTreeTbl?.clearAllSelection(data);
       (data as any).isSelected = true;
-      this.tbl!.scrollToData(data);
+      this.nmCallTreeTbl!.scrollToData(data);
       // @ts-ignore
       if ((evt.detail as any).callBack) {
         // @ts-ignore
@@ -278,86 +278,86 @@ export class TabpaneNMCalltree extends BaseElement {
     });
     this.modal!.setCloseListener(() => {
       this.modal!.style.display = 'none';
-      this.tbl!.style.visibility = 'visible';
-      this.shadowRoot!.querySelector<TabPaneFilter>('#filter')!.style.display = 'flex';
+      this.nmCallTreeTbl!.style.visibility = 'visible';
+      this.shadowRoot!.querySelector<TabPaneFilter>('#nm-call-tree-filter')!.style.display = 'flex';
     });
-    let filterFunc = (data: any) => {
-      let args: any[] = [];
-      if (data.type == 'check') {
-        if (data.item.checked) {
-          args.push({
+    let filterFunc = (nmCallTreeFuncData: any) => {
+      let nmCallTreeFuncArgs: any[] = [];
+      if (nmCallTreeFuncData.type == 'check') {
+        if (nmCallTreeFuncData.item.checked) {
+          nmCallTreeFuncArgs.push({
             funcName: 'splitTree',
-            funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
+            funcArgs: [nmCallTreeFuncData.item.name, nmCallTreeFuncData.item.select == '0', nmCallTreeFuncData.item.type == 'symbol'],
           });
         } else {
-          args.push({
+          nmCallTreeFuncArgs.push({
             funcName: 'resotreAllNode',
-            funcArgs: [[data.item.name]],
+            funcArgs: [[nmCallTreeFuncData.item.name]],
           });
-          args.push({
+          nmCallTreeFuncArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          nmCallTreeFuncArgs.push({
             funcName: 'clearSplitMapData',
-            funcArgs: [data.item.name],
+            funcArgs: [nmCallTreeFuncData.item.name],
           });
         }
-      } else if (data.type == 'select') {
-        args.push({
+      } else if (nmCallTreeFuncData.type == 'select') {
+        nmCallTreeFuncArgs.push({
           funcName: 'resotreAllNode',
-          funcArgs: [[data.item.name]],
+          funcArgs: [[nmCallTreeFuncData.item.name]],
         });
-        args.push({
+        nmCallTreeFuncArgs.push({
           funcName: 'clearSplitMapData',
-          funcArgs: [data.item.name],
+          funcArgs: [nmCallTreeFuncData.item.name],
         });
-        args.push({
+        nmCallTreeFuncArgs.push({
           funcName: 'splitTree',
-          funcArgs: [data.item.name, data.item.select == '0', data.item.type == 'symbol'],
+          funcArgs: [nmCallTreeFuncData.item.name, nmCallTreeFuncData.item.select == '0', nmCallTreeFuncData.item.type == 'symbol'],
         });
-      } else if (data.type == 'button') {
-        if (data.item == 'symbol') {
+      } else if (nmCallTreeFuncData.type == 'button') {
+        if (nmCallTreeFuncData.item == 'symbol') {
           if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
             return;
           }
           if (this.currentSelectedData != undefined) {
-            this.filter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
-            args.push({
+            this.nmCallTreeFilter!.addDataMining({ name: this.currentSelectedData.symbolName }, nmCallTreeFuncData.item);
+            nmCallTreeFuncArgs.push({
               funcName: 'splitTree',
               funcArgs: [this.currentSelectedData.symbolName, false, true],
             });
           } else {
             return;
           }
-        } else if (data.item == 'library') {
+        } else if (nmCallTreeFuncData.item == 'library') {
           if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
             return;
           }
           if (this.currentSelectedData != undefined && this.currentSelectedData.libName != '') {
-            this.filter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
-            args.push({
+            this.nmCallTreeFilter!.addDataMining({ name: this.currentSelectedData.libName }, nmCallTreeFuncData.item);
+            nmCallTreeFuncArgs.push({
               funcName: 'splitTree',
               funcArgs: [this.currentSelectedData.libName, false, false],
             });
           } else {
             return;
           }
-        } else if (data.item == 'restore') {
-          if (data.remove != undefined && data.remove.length > 0) {
-            let list = data.remove.map((item: any) => {
+        } else if (nmCallTreeFuncData.item == 'restore') {
+          if (nmCallTreeFuncData.remove != undefined && nmCallTreeFuncData.remove.length > 0) {
+            let list = nmCallTreeFuncData.remove.map((item: any) => {
               return item.name;
             });
-            args.push({
+            nmCallTreeFuncArgs.push({
               funcName: 'resotreAllNode',
               funcArgs: [list],
             });
-            args.push({
+            nmCallTreeFuncArgs.push({
               funcName: 'resetAllNode',
               funcArgs: [],
             });
             list.forEach((symbolName: string) => {
-              args.push({
+              nmCallTreeFuncArgs.push({
                 funcName: 'clearSplitMapData',
                 funcArgs: [symbolName],
               });
@@ -365,61 +365,61 @@ export class TabpaneNMCalltree extends BaseElement {
           }
         }
       }
-      this.getDataByWorker(args, (result: any[]) => {
+      this.getDataByWorker(nmCallTreeFuncArgs, (result: any[]) => {
         this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
-        if (this.isChartShow) this.frameChart?.calculateChartData();
-        this.tbl!.move1px();
+        this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+        if (this.isChartShow) this.nmCallTreeFrameChart?.calculateChartData();
+        this.nmCallTreeTbl!.move1px();
         if (this.currentSelectedData) {
           this.currentSelectedData.isSelected = false;
-          this.tbl?.clearAllSelection(this.currentSelectedData);
-          this.tbr!.recycleDataSource = [];
+          this.nmCallTreeTbl?.clearAllSelection(this.currentSelectedData);
+          this.filesystemTbr!.recycleDataSource = [];
           this.currentSelectedData = undefined;
         }
       });
     };
-    this.filter!.getDataLibrary(filterFunc);
-    this.filter!.getDataMining(filterFunc);
-    this.filter!.getCallTreeData((data: any) => {
-      if (data.value == 0) {
+    this.nmCallTreeFilter!.getDataLibrary(filterFunc);
+    this.nmCallTreeFilter!.getDataMining(filterFunc);
+    this.nmCallTreeFilter!.getCallTreeData((callTreeData: any) => {
+      if (callTreeData.value == 0) {
         this.refreshAllNode({
-          ...this.filter!.getFilterTreeData(),
-          callTree: data.checks,
+          ...this.nmCallTreeFilter!.getFilterTreeData(),
+          callTree: callTreeData.checks,
         });
       } else {
-        let args: any[] = [];
-        if (data.checks[1]) {
-          args.push({
+        let resultArgs: any[] = [];
+        if (callTreeData.checks[1]) {
+          resultArgs.push({
             funcName: 'hideSystemLibrary',
             funcArgs: [],
           });
-          args.push({
+          resultArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
         } else {
-          args.push({
+          resultArgs.push({
             funcName: 'resotreAllNode',
             funcArgs: [[this.systmeRuleName]],
           });
-          args.push({
+          resultArgs.push({
             funcName: 'resetAllNode',
             funcArgs: [],
           });
-          args.push({
+          resultArgs.push({
             funcName: 'clearSplitMapData',
             funcArgs: [this.systmeRuleName],
           });
         }
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(resultArgs, (result: any[]) => {
           this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
-          if (this.isChartShow) this.frameChart?.calculateChartData();
+          this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+          if (this.isChartShow) this.nmCallTreeFrameChart?.calculateChartData();
         });
       }
     });
-    this.filter!.getCallTreeConstraintsData((data: any) => {
-      let args: any[] = [
+    this.nmCallTreeFilter!.getCallTreeConstraintsData((nmCallTreeConstraintsData: any) => {
+      let nmCallTreeConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
           funcArgs: [[this.numRuleName]],
@@ -429,41 +429,41 @@ export class TabpaneNMCalltree extends BaseElement {
           funcArgs: [this.numRuleName],
         },
       ];
-      if (data.checked) {
-        args.push({
+      if (nmCallTreeConstraintsData.checked) {
+        nmCallTreeConstraintsArgs.push({
           funcName: 'hideNumMaxAndMin',
-          funcArgs: [parseInt(data.min), data.max],
+          funcArgs: [parseInt(nmCallTreeConstraintsData.min), nmCallTreeConstraintsData.max],
         });
       }
-      args.push({
+      nmCallTreeConstraintsArgs.push({
         funcName: 'resetAllNode',
         funcArgs: [],
       });
-      this.getDataByWorker(args, (result: any[]) => {
+      this.getDataByWorker(nmCallTreeConstraintsArgs, (result: any[]) => {
         this.setLTableData(result);
-        this.frameChart!.data = this.dataSource;
-        if (this.isChartShow) this.frameChart?.calculateChartData();
+        this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+        if (this.isChartShow) this.nmCallTreeFrameChart?.calculateChartData();
       });
     });
-    this.filter!.getFilterData((data: FilterData) => {
+    this.nmCallTreeFilter!.getFilterData((nmCallTreeData: FilterData) => {
       if (this.currentSelection!.nativeMemoryStatistic.length > 0) {
         this.filterResponseSelect = '';
       }
       if (
-        this.filterAllocationType != data.firstSelect ||
-        this.filterNativeType != data.secondSelect ||
-        this.filterResponseSelect != data.thirdSelect
+        this.filterAllocationType != nmCallTreeData.firstSelect ||
+        this.filterNativeType != nmCallTreeData.secondSelect ||
+        this.filterResponseSelect != nmCallTreeData.thirdSelect
       ) {
-        this.filterAllocationType = data.firstSelect || '0';
-        this.filterNativeType = data.secondSelect || '0';
-        this.filterResponseSelect = data.thirdSelect || "0'";
-        let thirdIndex = parseInt(data.thirdSelect || '0');
+        this.filterAllocationType = nmCallTreeData.firstSelect || '0';
+        this.filterNativeType = nmCallTreeData.secondSelect || '0';
+        this.filterResponseSelect = nmCallTreeData.thirdSelect || "0'";
+        let thirdIndex = parseInt(nmCallTreeData.thirdSelect || '0');
         if (this.responseTypes.length > thirdIndex) {
           this.filterResponseType = this.responseTypes[thirdIndex].key || -1;
         }
-        this.refreshAllNode(this.filter!.getFilterTreeData());
-      } else if (this.searchValue != this.filter!.filterValue) {
-        this.searchValue = this.filter!.filterValue;
+        this.refreshAllNode(this.nmCallTreeFilter!.getFilterTreeData());
+      } else if (this.searchValue != this.nmCallTreeFilter!.filterValue) {
+        this.searchValue = this.nmCallTreeFilter!.filterValue;
         let args = [
           {
             funcName: 'setSearchValue',
@@ -476,21 +476,21 @@ export class TabpaneNMCalltree extends BaseElement {
         ];
         this.getDataByWorker(args, (result: any[]) => {
           this.setLTableData(result);
-          this.frameChart!.data = this.dataSource;
-          this.switchFlameChart(data);
+          this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+          this.switchFlameChart(nmCallTreeData);
         });
       } else {
-        this.switchFlameChart(data);
+        this.switchFlameChart(nmCallTreeData);
       }
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.nmCallTreeTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortKey = evt.detail.key;
       // @ts-ignore
       this.sortType = evt.detail.sort;
       // @ts-ignore
-      this.setLTableData(this.dataSource, true);
-      this.frameChart!.data = this.dataSource;
+      this.setLTableData(this.nmCallTreeSource, true);
+      this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
     });
   }
 
@@ -498,60 +498,60 @@ export class TabpaneNMCalltree extends BaseElement {
     super.connectedCallback();
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let nmCallTreeTabFilter = this.shadowRoot!.querySelector('#nm-call-tree-filter') as HTMLElement;
+      if (nmCallTreeTabFilter.clientHeight > 0) filterHeight = nmCallTreeTabFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        nmCallTreeTabFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        nmCallTreeTabFilter.style.display = 'none';
       }
-      this.modal!.style.height = this.tbl!.clientHeight - 2 + 'px'; //2 is borderWidth
-      if (this.tbl!.style.visibility == 'hidden') {
-        tabPaneFilter.style.display = 'none';
+      this.modal!.style.height = this.nmCallTreeTbl!.clientHeight - 2 + 'px'; //2 is borderWidth
+      if (this.nmCallTreeTbl!.style.visibility == 'hidden') {
+        nmCallTreeTabFilter.style.display = 'none';
       }
       if (this.parentElement?.clientHeight != 0) {
         if (this.isChartShow) {
-          this.frameChart?.updateCanvas(false, entries[0].contentRect.width);
-          this.frameChart?.calculateChartData();
+          this.nmCallTreeFrameChart?.updateCanvas(false, entries[0].contentRect.width);
+          this.nmCallTreeFrameChart?.calculateChartData();
         }
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.nmCallTreeTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 35 + 'px';
+        this.nmCallTreeTbl?.reMeauseHeight();
         // @ts-ignore
-        this.tbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
-        this.tbr?.reMeauseHeight();
-        this.loadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
+        this.filesystemTbr?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 - 21 + 'px';
+        this.filesystemTbr?.reMeauseHeight();
+        this.nmCallTreeLoadingPage.style.height = this.parentElement!.clientHeight - 24 + 'px';
       }
     }).observe(this.parentElement!);
     this.parentElement!.onscroll = () => {
-      this.frameChart!.tabPaneScrollTop = this.parentElement!.scrollTop;
+      this.nmCallTreeFrameChart!.tabPaneScrollTop = this.parentElement!.scrollTop;
     };
   }
 
-  switchFlameChart(data: any) {
-    let pageTab = this.shadowRoot?.querySelector('#show_table');
-    let pageChart = this.shadowRoot?.querySelector('#show_chart');
-    if (data.icon == 'block') {
-      pageChart?.setAttribute('class', 'show');
-      pageTab?.setAttribute('class', '');
+  switchFlameChart(flameChartData: any) {
+    let nmCallTreePageTab = this.shadowRoot?.querySelector('#show_table');
+    let nmCallTreePageChart = this.shadowRoot?.querySelector('#show_chart');
+    if (flameChartData.icon == 'block') {
+      nmCallTreePageChart?.setAttribute('class', 'show');
+      nmCallTreePageTab?.setAttribute('class', '');
       this.isChartShow = true;
-      this.filter!.disabledMining = true;
+      this.nmCallTreeFilter!.disabledMining = true;
       this.showButtomMenu(this.needShowMenu);
-      this.frameChart!.data = this.dataSource;
-      this.frameChart?.calculateChartData();
-    } else if (data.icon == 'tree') {
-      pageChart?.setAttribute('class', '');
-      pageTab?.setAttribute('class', 'show');
+      this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+      this.nmCallTreeFrameChart?.calculateChartData();
+    } else if (flameChartData.icon == 'tree') {
+      nmCallTreePageChart?.setAttribute('class', '');
+      nmCallTreePageTab?.setAttribute('class', 'show');
       this.showButtomMenu(true);
       this.isChartShow = false;
-      this.filter!.disabledMining = false;
-      this.frameChart!.clearCanvas();
-      this.tbl!.reMeauseHeight();
+      this.nmCallTreeFilter!.disabledMining = false;
+      this.nmCallTreeFrameChart!.clearCanvas();
+      this.nmCallTreeTbl!.reMeauseHeight();
     }
   }
 
   refreshAllNode(filterData: any) {
-    let args: any[] = [];
+    let nmCallTreeArgs: any[] = [];
     let isTopDown: boolean = !filterData.callTree[0];
     let isHideSystemLibrary = filterData.callTree[1];
     let list = filterData.dataMining.concat(filterData.dataLibrary);
@@ -565,7 +565,7 @@ export class TabpaneNMCalltree extends BaseElement {
       'nativeHookType',
       this.currentSelection!.nativeMemory.length > 0 ? 'native-hook' : 'native-hook-statistic'
     );
-    args.push(
+    nmCallTreeArgs.push(
       {
         funcName: 'groupCallchainSample',
         funcArgs: [groupArgs],
@@ -575,94 +575,94 @@ export class TabpaneNMCalltree extends BaseElement {
         funcArgs: [isTopDown],
       }
     );
-    this.tbr!.recycleDataSource = [];
+    this.filesystemTbr!.recycleDataSource = [];
     if (isHideSystemLibrary) {
-      args.push({
+      nmCallTreeArgs.push({
         funcName: 'hideSystemLibrary',
         funcArgs: [],
       });
     }
     if (filterData.callTreeConstraints.checked) {
-      args.push({
+      nmCallTreeArgs.push({
         funcName: 'hideNumMaxAndMin',
         funcArgs: [parseInt(filterData.callTreeConstraints.inputs[0]), filterData.callTreeConstraints.inputs[1]],
       });
     }
-    args.push({
+    nmCallTreeArgs.push({
       funcName: 'splitAllProcess',
       funcArgs: [list],
     });
-    args.push({
+    nmCallTreeArgs.push({
       funcName: 'resetAllNode',
       funcArgs: [],
     });
-    this.getDataByWorker(args, (result: any[]) => {
+    this.getDataByWorker(nmCallTreeArgs, (result: any[]) => {
       this.setLTableData(result);
-      this.frameChart!.data = this.dataSource;
-      if (this.isChartShow) this.frameChart?.calculateChartData();
+      this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
+      if (this.isChartShow) this.nmCallTreeFrameChart?.calculateChartData();
     });
   }
 
   setLTableData(resultData: any[], sort?: boolean) {
     if (sort) {
-      this.dataSource = this.sortTree(resultData);
+      this.nmCallTreeSource = this.sortTree(resultData);
     } else {
       if (resultData && resultData[0]) {
-        this.dataSource =
+        this.nmCallTreeSource =
           this.currentSelection!.nativeMemory.length > 0
             ? this.sortTree(resultData)
             : this.sortTree(resultData[0].children || []);
       } else {
-        this.dataSource = [];
+        this.nmCallTreeSource = [];
       }
     }
-    this.tbl!.recycleDataSource = this.dataSource;
+    this.nmCallTreeTbl!.recycleDataSource = this.nmCallTreeSource;
   }
 
   sortTree(arr: Array<any>): Array<any> {
-    let sortArr = arr.sort((a, b) => {
+    let nmCallTreeSortArr = arr.sort((callTreeLeftData, callTreeRightData) => {
       if (this.sortKey == 'heapSizeStr' || this.sortKey == 'heapPercent') {
         if (this.sortType == 0) {
-          return b.size - a.size;
+          return callTreeRightData.size - callTreeLeftData.size;
         } else if (this.sortType == 1) {
-          return a.size - b.size;
+          return callTreeLeftData.size - callTreeRightData.size;
         } else {
-          return b.size - a.size;
+          return callTreeRightData.size - callTreeLeftData.size;
         }
       } else {
         if (this.sortType == 0) {
-          return b.count - a.count;
+          return callTreeRightData.count - callTreeLeftData.count;
         } else if (this.sortType == 1) {
-          return a.count - b.count;
+          return callTreeLeftData.count - callTreeRightData.count;
         } else {
-          return b.count - a.count;
+          return callTreeRightData.count - callTreeLeftData.count;
         }
       }
     });
-    sortArr.map((call) => {
+    nmCallTreeSortArr.map((call) => {
       call.children = this.sortTree(call.children);
     });
-    return sortArr;
+    return nmCallTreeSortArr;
   }
 
   getDataByWorker(args: any[], handler: Function) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
-    procedurePool.submitWithName('logic1', 'native-memory-calltree-action', args, undefined, (results: any) => {
-      handler(results);
+    this.nmCallTreeProgressEL!.loading = true;
+    this.nmCallTreeLoadingPage.style.visibility = 'visible';
+    procedurePool.submitWithName('logic1', 'native-memory-calltree-action', args, undefined, (callTreeActionResults: any) => {
+      handler(callTreeActionResults);
       this.loadingList.splice(0, 1);
       if (this.loadingList.length == 0) {
-        this.progressEL!.loading = false;
-        this.loadingPage.style.visibility = 'hidden';
+        this.nmCallTreeProgressEL!.loading = false;
+        this.nmCallTreeLoadingPage.style.visibility = 'hidden';
       }
     });
   }
 
   getDataByWorkerQuery(args: any, handler: Function) {
     this.loadingList.push(1);
-    this.progressEL!.loading = true;
-    this.loadingPage.style.visibility = 'visible';
+    this.nmCallTreeProgressEL!.loading = true;
+    this.nmCallTreeLoadingPage.style.visibility = 'visible';
     procedurePool.submitWithName(
       'logic1',
       this.currentSelection!.nativeMemory!.length > 0
@@ -670,12 +670,12 @@ export class TabpaneNMCalltree extends BaseElement {
         : 'native-memory-queryStatisticCallchainsSamples',
       args,
       undefined,
-      (results: any) => {
-        handler(results);
+      (callChainsResults: any) => {
+        handler(callChainsResults);
         this.loadingList.splice(0, 1);
         if (this.loadingList.length == 0) {
-          this.progressEL!.loading = false;
-          this.loadingPage.style.visibility = 'hidden';
+          this.nmCallTreeProgressEL!.loading = false;
+          this.nmCallTreeLoadingPage.style.visibility = 'hidden';
         }
       }
     );
@@ -685,11 +685,15 @@ export class TabpaneNMCalltree extends BaseElement {
     return `
         <style>
         :host{
+            padding: 10px 10px 0 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px 0 10px;
         }
-        tab-pane-filter {
+        .show{
+            display: flex;
+            flex: 1;
+        }
+        #nm-call-tree-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -699,18 +703,14 @@ export class TabpaneNMCalltree extends BaseElement {
         selector{
             display: none;
         }
-        .show{
-            display: flex;
-            flex: 1;
-        }
-        .progress{
+        .nm-call-tree-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        .loading{
+        .nm-call-tree-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -720,24 +720,24 @@ export class TabpaneNMCalltree extends BaseElement {
             z-index: 999999;
         }
     </style>
-    <div style="display: flex;flex-direction: row">
+    <div class="nm-call-tree-content" style="display: flex;flex-direction: row">
     
     <selector id='show_table' class="show">
         <lit-slicer style="width:100%">
         <div id="left_table" style="width: 65%">
             <tab-native-data-modal id="modal"></tab-native-data-modal>
             <lit-table id="tb-filesystem-calltree" style="height: auto" tree>
-                <lit-table-column width="60%" title="Symbol Name" data-index="symbolName" key="symbolName"  align="flex-start">
+                <lit-table-column class="nm-call-tree-column" width="60%" title="Symbol Name" data-index="symbolName" key="symbolName"  align="flex-start">
                 </lit-table-column>
-                <lit-table-column width="1fr" title="Size" data-index="heapSizeStr" key="heapSizeStr"  align="flex-start" order>
+                <lit-table-column class="nm-call-tree-column" width="1fr" title="Size" data-index="heapSizeStr" key="heapSizeStr"  align="flex-start" order>
                 </lit-table-column>
-                <lit-table-column width="1fr" title="%" data-index="heapPercent" key="heapPercent" align="flex-start"  order>
+                <lit-table-column class="nm-call-tree-column" width="1fr" title="%" data-index="heapPercent" key="heapPercent" align="flex-start"  order>
                 </lit-table-column>
-                <lit-table-column width="1fr" title="Count" data-index="countValue" key="countValue" align="flex-start" order>
+                <lit-table-column class="nm-call-tree-column" width="1fr" title="Count" data-index="countValue" key="countValue" align="flex-start" order>
                 </lit-table-column>
-                <lit-table-column width="1fr" title="%" data-index="countPercent" key="countPercent" align="flex-start" order>
+                <lit-table-column class="nm-call-tree-column" width="1fr" title="%" data-index="countPercent" key="countPercent" align="flex-start" order>
                 </lit-table-column>
-                <lit-table-column width="1fr" title="  " data-index="type" key="type"  align="flex-start" >
+                <lit-table-column class="nm-call-tree-column" width="1fr" title="  " data-index="type" key="type"  align="flex-start" >
                     <template>
                         <img src="img/library.png" size="20" v-if=" type == 1 ">
                         <img src="img/function.png" size="20" v-if=" type == 0 ">
@@ -747,26 +747,26 @@ export class TabpaneNMCalltree extends BaseElement {
             </lit-table>
             
         </div>
-        <lit-slicer-track ></lit-slicer-track>
+        <lit-slicer-track class="nm-call-tree-slicer-track" ></lit-slicer-track>
         <lit-table id="tb-filesystem-list" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
             <span slot="head">Heaviest Stack Trace</span>
-            <lit-table-column width="30px" title="" data-index="type" key="type"  align="flex-start" >
+            <lit-table-column class="nm-call-tree-column" width="30px" title="" data-index="type" key="type"  align="flex-start" >
                 <template>
                     <img src="img/library.png" size="20" v-if=" type == 1 ">
                     <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"  align="flex-start"></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>
         </lit-table>
         </div>
         </lit-slicer>
      </selector>
-     <tab-pane-filter id="filter" first second icon ></tab-pane-filter>
-     <lit-progress-bar class="progress"></lit-progress-bar>
-    <selector id='show_chart'>
+     <tab-pane-filter id="nm-call-tree-filter" first second icon ></tab-pane-filter>
+     <lit-progress-bar class="progress nm-call-tree-progress"></lit-progress-bar>
+    <selector class="nm-call-tree-selector" id='show_chart'>
         <tab-framechart id='framechart' style='width: 100%;height: auto'> </tab-framechart>
     </selector>  
-    <div class="loading"></div>
+    <div class="loading nm-call-tree-loading"></div>
     </div>`;
   }
 }
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 60f4e54afa13d5c80cdc2d612a8c708881fd3919..a9725ac762721578acda4f826504ca52e50e197d 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.ts
@@ -35,10 +35,10 @@ import { SpNativeMemoryChart } from '../../../chart/SpNativeMemoryChart.js';
 @element('tabpane-native-sample')
 export class TabPaneNMSampleList extends BaseElement {
   static tblData: LitTable | null | undefined;
-  static tbl: LitTable | null | undefined;
+  static sampleTbl: LitTable | null | undefined;
   static filter: any;
   static filterSelect: string = '0';
-  static source: Array<NativeHookSamplerInfo> = [];
+  static samplerInfoSource: Array<NativeHookSamplerInfo> = [];
   static types: Array<string> = [];
   static native_type: Array<string> = ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'];
   static tableMarkData: Array<NativeMemory> = [];
@@ -46,25 +46,25 @@ export class TabPaneNMSampleList extends BaseElement {
   static sampleTypes: Array<NativeHookSampleQueryInfo> = [];
   static sampleTypesList: any[] = [];
 
-  set data(val: SelectionParam | any) {
-    TabPaneNMSampleList.serSelection(val);
+  set data(sampleParam: SelectionParam | any) {
+    TabPaneNMSampleList.serSelection(sampleParam);
     this.filterAllList();
   }
 
-  static serSelection(val: SelectionParam) {
-    if (this.selectionParam !== val) {
+  static serSelection(sampleParam: SelectionParam) {
+    if (this.selectionParam !== sampleParam) {
       this.clearData();
-      this.selectionParam = val;
+      this.selectionParam = sampleParam;
       this.initTypes();
     }
-    if (val.nativeMemory.indexOf(this.native_type[0]) != -1) {
+    if (sampleParam.nativeMemory.indexOf(this.native_type[0]) != -1) {
       this.types.push("'AllocEvent'");
       this.types.push("'MmapEvent'");
     } else {
-      if (val.nativeMemory.indexOf(this.native_type[1]) != -1) {
+      if (sampleParam.nativeMemory.indexOf(this.native_type[1]) != -1) {
         this.types.push("'AllocEvent'");
       }
-      if (val.nativeMemory.indexOf(this.native_type[2]) != -1) {
+      if (sampleParam.nativeMemory.indexOf(this.native_type[2]) != -1) {
         this.types.push("'MmapEvent'");
       }
     }
@@ -84,7 +84,7 @@ export class TabPaneNMSampleList extends BaseElement {
     }
     TabPaneNMSampleList.tableMarkData.push(data);
     let rootSample = new NativeHookSamplerInfo();
-    rootSample.snapshot = 'Snapshot' + this.numberToWord(this.source.length + 1);
+    rootSample.snapshot = 'Snapshot' + this.numberToWord(this.samplerInfoSource.length + 1);
     rootSample.startTs = data.startTs;
     rootSample.timestamp =
       SpNativeMemoryChart.REAL_TIME_DIF == 0
@@ -133,8 +133,8 @@ export class TabPaneNMSampleList extends BaseElement {
       copyType.subType = type.subType;
       return copyType;
     });
-    queryAllHookData(data.startTs).then((result) => {
-      if (result.length > 0) {
+    queryAllHookData(data.startTs).then((nmSamplerHookResult) => {
+      if (nmSamplerHookResult.length > 0) {
         let nameGroup: any = {};
         copyTypes.forEach((item) => {
           nameGroup[item.eventType] = nameGroup[item.eventType] || [];
@@ -144,7 +144,7 @@ export class TabPaneNMSampleList extends BaseElement {
           TabPaneNMSampleList.tableMarkData.length == 1
             ? 0
             : TabPaneNMSampleList.tableMarkData[TabPaneNMSampleList.tableMarkData.length - 2].startTs;
-        result.forEach((item) => {
+        nmSamplerHookResult.forEach((item) => {
           item.threadId = rootSample.threadId;
           item.threadName = rootSample.threadName;
           if (nameGroup[item.eventType] != undefined) {
@@ -177,7 +177,7 @@ export class TabPaneNMSampleList extends BaseElement {
         this.sampleTypesList.push(copyTypes);
         this.createTree(nameGroup, rootSample);
         rootSample.tempList = [...rootSample.children];
-        this.source.push(rootSample);
+        this.samplerInfoSource.push(rootSample);
       }
     });
   }
@@ -234,9 +234,9 @@ export class TabPaneNMSampleList extends BaseElement {
 
   static clearData() {
     this.types = [];
-    this.source = [];
+    this.samplerInfoSource = [];
     this.tblData!.dataSource = [];
-    this.tbl!.recycleDataSource = [];
+    this.sampleTbl!.recycleDataSource = [];
     this.sampleTypesList = [];
     this.tableMarkData = [];
     TabPaneNMSampleList.filter!.firstSelect = '0';
@@ -259,19 +259,19 @@ export class TabPaneNMSampleList extends BaseElement {
     });
   }
 
-  setRightTableData(sample: NativeHookSamplerInfo) {
-    let args = new Map<string, any>();
-    args.set('eventId', sample.eventId);
-    args.set('actionType', 'memory-stack');
-    this.startWorker(args, (results: any[]) => {
+  setRightTableData(hookSamplerInfo: NativeHookSamplerInfo) {
+    let nmSamplerArgs = new Map<string, any>();
+    nmSamplerArgs.set('eventId', hookSamplerInfo.eventId);
+    nmSamplerArgs.set('actionType', 'memory-stack');
+    this.startWorker(nmSamplerArgs, (results: any[]) => {
       let source = [];
       if (results.length > 0) {
-        let thread = new NativeHookCallInfo();
-        thread.threadId = sample.threadId;
-        thread.threadName = sample.threadName;
-        thread.title = `${sample.threadName ?? ''}【${sample.threadId}】`;
-        thread.type = -1;
-        source.push(thread);
+        let hookCallInfo = new NativeHookCallInfo();
+        hookCallInfo.threadId = hookSamplerInfo.threadId;
+        hookCallInfo.threadName = hookSamplerInfo.threadName;
+        hookCallInfo.title = `${hookSamplerInfo.threadName ?? ''}【${hookSamplerInfo.threadId}】`;
+        hookCallInfo.type = -1;
+        source.push(hookCallInfo);
         source.push(...results);
       }
       // @ts-ignore
@@ -280,8 +280,8 @@ export class TabPaneNMSampleList extends BaseElement {
   }
 
   initElements(): void {
-    TabPaneNMSampleList.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-sample');
-    TabPaneNMSampleList.tbl!.addEventListener('row-click', (evt: any) => {
+    TabPaneNMSampleList.sampleTbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-sample');
+    TabPaneNMSampleList.sampleTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
       this.setRightTableData(evt.detail.data);
     });
@@ -302,8 +302,8 @@ export class TabPaneNMSampleList extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        TabPaneNMSampleList.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        TabPaneNMSampleList.tbl?.reMeauseHeight();
+        TabPaneNMSampleList.sampleTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
+        TabPaneNMSampleList.sampleTbl?.reMeauseHeight();
         // @ts-ignore
         TabPaneNMSampleList.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 + 'px';
         TabPaneNMSampleList.tblData?.reMeauseHeight();
@@ -312,85 +312,88 @@ export class TabPaneNMSampleList extends BaseElement {
   }
 
   filterAllList() {
-    TabPaneNMSampleList.source.forEach((rootSample) => {
-      rootSample.heapSize = 0;
-      rootSample.existing = 0;
-      rootSample.total = 0;
+    TabPaneNMSampleList.samplerInfoSource.forEach((nmRootSample) => {
+      nmRootSample.heapSize = 0;
+      nmRootSample.existing = 0;
+      nmRootSample.total = 0;
       if (TabPaneNMSampleList.filterSelect == '0') {
-        rootSample.children = [...rootSample.tempList];
-        rootSample.tempList.forEach((parentSample) => {
-          rootSample.heapSize += parentSample.heapSize;
-          rootSample.existing += parentSample.existing;
-          rootSample.total += parentSample.total;
+        nmRootSample.children = [...nmRootSample.tempList];
+        nmRootSample.tempList.forEach((parentSample) => {
+          nmRootSample.heapSize += parentSample.heapSize;
+          nmRootSample.existing += parentSample.existing;
+          nmRootSample.total += parentSample.total;
         });
-        rootSample.growth = Utils.getByteWithUnit(rootSample.heapSize);
-        rootSample.totalGrowth = Utils.getByteWithUnit(rootSample.total);
+        nmRootSample.growth = Utils.getByteWithUnit(nmRootSample.heapSize);
+        nmRootSample.totalGrowth = Utils.getByteWithUnit(nmRootSample.total);
       } else if (TabPaneNMSampleList.filterSelect == '2') {
-        if (rootSample.tempList.length > 1) {
-          rootSample.children = [rootSample.tempList[1]];
-          rootSample.heapSize += rootSample.tempList[1].heapSize;
-          rootSample.existing += rootSample.tempList[1].existing;
-          rootSample.growth = Utils.getByteWithUnit(rootSample.heapSize);
-          rootSample.total += rootSample.tempList[1].total;
-          rootSample.totalGrowth = Utils.getByteWithUnit(rootSample.total);
+        if (nmRootSample.tempList.length > 1) {
+          nmRootSample.children = [nmRootSample.tempList[1]];
+          nmRootSample.heapSize += nmRootSample.tempList[1].heapSize;
+          nmRootSample.existing += nmRootSample.tempList[1].existing;
+          nmRootSample.growth = Utils.getByteWithUnit(nmRootSample.heapSize);
+          nmRootSample.total += nmRootSample.tempList[1].total;
+          nmRootSample.totalGrowth = Utils.getByteWithUnit(nmRootSample.total);
         } else {
-          rootSample.children = [];
-          rootSample.growth = '';
-          rootSample.totalGrowth = '';
+          nmRootSample.children = [];
+          nmRootSample.growth = '';
+          nmRootSample.totalGrowth = '';
         }
       } else {
-        if (rootSample.tempList.length > 0) {
-          rootSample.children = [rootSample.tempList[0]];
-          rootSample.heapSize += rootSample.tempList[0].heapSize;
-          rootSample.existing += rootSample.tempList[0].existing;
-          rootSample.growth = Utils.getByteWithUnit(rootSample.heapSize);
-          rootSample.total += rootSample.tempList[0].total;
-          rootSample.totalGrowth = Utils.getByteWithUnit(rootSample.total);
+        if (nmRootSample.tempList.length > 0) {
+          nmRootSample.children = [nmRootSample.tempList[0]];
+          nmRootSample.heapSize += nmRootSample.tempList[0].heapSize;
+          nmRootSample.existing += nmRootSample.tempList[0].existing;
+          nmRootSample.growth = Utils.getByteWithUnit(nmRootSample.heapSize);
+          nmRootSample.total += nmRootSample.tempList[0].total;
+          nmRootSample.totalGrowth = Utils.getByteWithUnit(nmRootSample.total);
         } else {
-          rootSample.children = [];
-          rootSample.growth = '';
-          rootSample.totalGrowth = '';
+          nmRootSample.children = [];
+          nmRootSample.growth = '';
+          nmRootSample.totalGrowth = '';
         }
       }
     });
-    TabPaneNMSampleList.tbl!.recycleDataSource = TabPaneNMSampleList.source;
+    TabPaneNMSampleList.sampleTbl!.recycleDataSource = TabPaneNMSampleList.samplerInfoSource;
   }
 
   initHtml(): string {
     return `
         <style>
+        .nm-sample-tbl {
+            height: auto;
+        }
         :host{
+            padding: 10px 10px 0 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px 0 10px;
         }
         </style>
         <lit-slicer style="width:100%">
-        <div style="width: 65%">
-            <lit-table id="tb-native-sample" style="height: auto" tree>
-                <lit-table-column width="25%" title="Snapshot" data-index="snapshot" key="snapshot"  align="flex-start" >
+        <div class="nm-sample-content" style="width: 65%">
+            <lit-table id="tb-native-sample" class="nm-sample-tbl" tree>
+                <lit-table-column class="nm-sample-column" width="25%" title="Snapshot" data-index="snapshot" key="snapshot"  align="flex-start" >
                 </lit-table-column>
-                <lit-table-column width="1fr" title="Timestamp" data-index="timestamp" key="timestamp"  align="flex-start"  >
+                <lit-table-column class="nm-sample-column" width="1fr" title="Timestamp" data-index="timestamp" key="timestamp"  align="flex-start"  >
                 </lit-table-column>
-                <lit-table-column width="1fr" title="Net Growth" data-index="growth" key="growth"  align="flex-start"  >
+                <lit-table-column class="nm-sample-column" width="1fr" title="Net Growth" data-index="growth" key="growth"  align="flex-start"  >
                 </lit-table-column>
-                <lit-table-column width="1fr" title="Total Growth" data-index="totalGrowth" key="totalGrowth"  align="flex-start"  >
+                <lit-table-column class="nm-sample-column" width="1fr" title="Total Growth" data-index="totalGrowth" key="totalGrowth"  align="flex-start"  >
                 </lit-table-column>
-                <lit-table-column width="1fr" title="# Existing" data-index="existing" key="existing"  align="flex-start"  >
+                <lit-table-column class="nm-sample-column" width="1fr" title="# Existing" data-index="existing" key="existing"  align="flex-start"  >
                 </lit-table-column>
             </lit-table>
             <tab-pane-filter id="filter" first></tab-pane-filter>
         </div>
         <lit-slicer-track ></lit-slicer-track>
         <lit-table id="tb-native-data" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-            <lit-table-column width="80px" title="" data-index="type" key="type"  align="flex-start" >
+            <lit-table-column class="nm-sample-column" width="80px" title="" data-index="type" key="type"  align="flex-start" >
                 <template>
                     <div v-if=" type == -1 ">Thread:</div>
                     <img src="img/library.png" size="20" v-if=" type == 1 ">
                     <img src="img/function.png" size="20" v-if=" type == 0 ">
                 </template>
             </lit-table-column>
-            <lit-table-column width="1fr" title="" data-index="title" key="title"  align="flex-start">
+            <lit-table-column class="nm-sample-column" width="1fr" title="" data-index="title" key="title"  align="flex-start">
             </lit-table-column>
         </lit-table>
         </lit-slicer>
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.ts
index 6548d6bd363f1bfeef94641a8c896af0d8255b39..39ed85417720f7faddff52616bbad4bafd24d242 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.ts
@@ -89,9 +89,9 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
   private soData!: any[];
   private functionData!: any[];
   private tableType: LitTable | null | undefined;
-  private tableThread: LitTable | null | undefined;
-  private tableSo: LitTable | null | undefined;
-  private tableFunction: LitTable | null | undefined;
+  private threadUsageTbl: LitTable | null | undefined;
+  private soUsageTbl: LitTable | null | undefined;
+  private functionUsageTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private back: HTMLDivElement | null | undefined;
   private tabName: HTMLDivElement | null | undefined;
@@ -114,8 +114,8 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
   private libStatisticsData!: {};
   private functionStatisticsData!: {};
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(statisticAnalysisParam: SelectionParam | any) {
+    if (statisticAnalysisParam == this.currentSelection) {
       this.eventTypeData.unshift(this.typeStatisticsData);
       this.tableType!.recycleDataSource = this.eventTypeData;
       // @ts-ignore
@@ -123,29 +123,29 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       return;
     }
     // @ts-ignore
-    this.tableSo?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.soUsageTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
-    this.tableFunction?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.functionUsageTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     this.clearData();
-    this.currentSelection = val;
+    this.currentSelection = statisticAnalysisParam;
     this.tableType!.style.display = 'grid';
-    this.tableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'none';
-    this.tableFunction!.style.display = 'none';
+    this.threadUsageTbl!.style.display = 'none';
+    this.soUsageTbl!.style.display = 'none';
+    this.functionUsageTbl!.style.display = 'none';
     this.back!.style.visibility = 'hidden';
     this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    this.isStatistic = val.nativeMemory.length === 0;
+      'Selected range: ' + parseFloat(((statisticAnalysisParam.rightNs - statisticAnalysisParam.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+    this.isStatistic = statisticAnalysisParam.nativeMemory.length === 0;
 
-    this.getNMEventTypeSize(val);
+    this.getNMEventTypeSize(statisticAnalysisParam);
   }
   initElements(): void {
     this.range = this.shadowRoot?.querySelector('#time-range');
     this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
     this.tableType = this.shadowRoot!.querySelector<LitTable>('#tb-eventtype-usage');
-    this.tableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
-    this.tableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
-    this.tableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
+    this.threadUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
+    this.soUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
+    this.functionUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-function-usage');
     this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
     this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.subheading');
     this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
@@ -154,26 +154,26 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
   clearData() {
     this.pie!.dataSource = [];
     this.tableType!.recycleDataSource = [];
-    this.tableThread!.recycleDataSource = [];
-    this.tableSo!.recycleDataSource = [];
-    this.tableFunction!.recycleDataSource = [];
+    this.threadUsageTbl!.recycleDataSource = [];
+    this.soUsageTbl!.recycleDataSource = [];
+    this.functionUsageTbl!.recycleDataSource = [];
   }
   getBack() {
     this.back!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By Library Existing') {
         this.tableType!.style.display = 'grid';
-        this.tableSo!.style.display = 'none';
+        this.soUsageTbl!.style.display = 'none';
         this.back!.style.visibility = 'hidden';
-        this.tableSo!.setAttribute('hideDownload', '');
+        this.soUsageTbl!.setAttribute('hideDownload', '');
         this.tableType?.removeAttribute('hideDownload');
         this.currentLevel = 0;
         this.currentLevelData = this.eventTypeData;
         this.typePieChart(this.currentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Function Existing') {
-        this.tableSo!.style.display = 'grid';
-        this.tableFunction!.style.display = 'none';
-        this.tableFunction!.setAttribute('hideDownload', '');
-        this.tableSo?.removeAttribute('hideDownload');
+        this.soUsageTbl!.style.display = 'grid';
+        this.functionUsageTbl!.style.display = 'none';
+        this.functionUsageTbl!.setAttribute('hideDownload', '');
+        this.soUsageTbl?.removeAttribute('hideDownload');
         this.currentLevelData = this.soData;
         this.currentLevel = 1;
         this.libraryPieChart(this.currentSelection);
@@ -190,24 +190,24 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       label: {
         type: 'outer',
       },
-      tip: (obj) => {
+      tip: (typeTipValue) => {
         return `<div>   
-                        <div>Memory Type:${obj.obj.tableName}</div>
-                        <div>Existing:${obj.obj.existSizeFormat} (${obj.obj.existSizePercent}%)</div>
-                        <div># Existing:${obj.obj.existCount} (${obj.obj.existCountPercent}%)</div>
-                        <div>Total Bytes:${obj.obj.applySizeFormat} (${obj.obj.applySizePercent}%)</div>
-                        <div># Total:${obj.obj.applyCount} (${obj.obj.applyCountPercent}%)</div>
-                        <div>Transient:${obj.obj.releaseSizeFormat} (${obj.obj.releaseSizePercent}%)</div>
-                        <div># Transient:${obj.obj.releaseCount} (${obj.obj.releaseCountPercent}%)</div>
+                        <div>Memory Type:${typeTipValue.obj.tableName}</div>
+                        <div>Existing:${typeTipValue.obj.existSizeFormat} (${typeTipValue.obj.existSizePercent}%)</div>
+                        <div># Existing:${typeTipValue.obj.existCount} (${typeTipValue.obj.existCountPercent}%)</div>
+                        <div>Total Bytes:${typeTipValue.obj.applySizeFormat} (${typeTipValue.obj.applySizePercent}%)</div>
+                        <div># Total:${typeTipValue.obj.applyCount} (${typeTipValue.obj.applyCountPercent}%)</div>
+                        <div>Transient:${typeTipValue.obj.releaseSizeFormat} (${typeTipValue.obj.releaseSizePercent}%)</div>
+                        <div># Transient:${typeTipValue.obj.releaseCount} (${typeTipValue.obj.releaseCountPercent}%)</div>
                         </div>`;
       },
       angleClick: (it: any) => {
         this.clearData();
         this.back!.style.visibility = 'visible';
         this.tableType!.style.display = 'none';
-        this.tableSo!.style.display = 'grid';
+        this.soUsageTbl!.style.display = 'grid';
         this.tableType!.setAttribute('hideDownload', '');
-        this.tableSo?.removeAttribute('hideDownload');
+        this.soUsageTbl?.removeAttribute('hideDownload');
         this.getLibSize(it, val);
         // @ts-ignore
         this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = it.typeName;
@@ -228,12 +228,12 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableType!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.tableType!.addEventListener('row-hover', (nmStatAnalysisTblRowHover: any) => {
+      if (nmStatAnalysisTblRowHover.detail.data) {
+        let data = nmStatAnalysisTblRowHover.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((nmStatAnalysisTblRowHover.detail as any).callBack) {
+          (nmStatAnalysisTblRowHover.detail as any).callBack(true);
         }
       }
       this.pie?.showHover();
@@ -243,9 +243,9 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.tabName!.textContent = 'Statistic By Event Type Existing';
     this.eventTypeData.unshift(this.typeStatisticsData);
     this.tableType!.recycleDataSource = this.eventTypeData;
-    this.currentLevelData = JSON.parse(JSON.stringify(this.eventTypeData));
     // @ts-ignore
     this.eventTypeData.shift(this.typeStatisticsData);
+    this.currentLevelData = this.eventTypeData;
     this.tableType?.reMeauseHeight();
   }
   threadPieChart(val: any) {
@@ -258,23 +258,23 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       label: {
         type: 'outer',
       },
-      tip: (obj) => {
+      tip: (threadTipValue) => {
         return `<div>
-                        <div>Thread:${obj.obj.tableName}</div>
-                        <div>Existing:${obj.obj.existSizeFormat} (${obj.obj.existSizePercent}%)</div>
-                        <div># Existing:${obj.obj.existCount} (${obj.obj.existCountPercent}%)</div>
-                        <div>Total Bytes:${obj.obj.applySizeFormat} (${obj.obj.applySizePercent}%)</div>
-                        <div># Total:${obj.obj.applyCount} (${obj.obj.applyCountPercent}%)</div>
-                        <div>Transient:${obj.obj.releaseSizeFormat} (${obj.obj.releaseSizePercent}%)</div>
-                        <div># Transient:${obj.obj.releaseCount} (${obj.obj.releaseCountPercent}%)</div>
+                        <div>Thread:${threadTipValue.obj.tableName}</div>
+                        <div>Existing:${threadTipValue.obj.existSizeFormat} (${threadTipValue.obj.existSizePercent}%)</div>
+                        <div># Existing:${threadTipValue.obj.existCount} (${threadTipValue.obj.existCountPercent}%)</div>
+                        <div>Total Bytes:${threadTipValue.obj.applySizeFormat} (${threadTipValue.obj.applySizePercent}%)</div>
+                        <div># Total:${threadTipValue.obj.applyCount} (${threadTipValue.obj.applyCountPercent}%)</div>
+                        <div>Transient:${threadTipValue.obj.releaseSizeFormat} (${threadTipValue.obj.releaseSizePercent}%)</div>
+                        <div># Transient:${threadTipValue.obj.releaseCount} (${threadTipValue.obj.releaseCountPercent}%)</div>
                     </div>`;
       },
       angleClick: (it: any) => {
         // @ts-ignore
         if (it.tid != 'other') {
           this.clearData();
-          this.tableThread!.style.display = 'none';
-          this.tableSo!.style.display = 'grid';
+          this.threadUsageTbl!.style.display = 'none';
+          this.soUsageTbl!.style.display = 'grid';
           this.getLibSize(it, val);
           // @ts-ignore
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = it.type + ' / ' + 'Thread ' + it.tid;
@@ -285,9 +285,9 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableThread!.setCurrentHover(data);
+          this.threadUsageTbl!.setCurrentHover(data);
         } else {
-          this.tableThread!.mouseOut();
+          this.threadUsageTbl!.mouseOut();
         }
       },
       interactions: [
@@ -296,12 +296,12 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableThread!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.threadUsageTbl!.addEventListener('row-hover', (nmStatAnalysisThreadRowHover: any) => {
+      if (nmStatAnalysisThreadRowHover.detail.data) {
+        let data = nmStatAnalysisThreadRowHover.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((nmStatAnalysisThreadRowHover.detail as any).callBack) {
+          (nmStatAnalysisThreadRowHover.detail as any).callBack(true);
         }
       }
       this.pie?.showHover();
@@ -309,8 +309,8 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     });
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.type + '';
     this.tabName!.textContent = 'Statistic By Thread Existing';
-    this.tableThread!.recycleDataSource = this.threadData;
-    this.tableThread?.reMeauseHeight();
+    this.threadUsageTbl!.recycleDataSource = this.threadData;
+    this.threadUsageTbl?.reMeauseHeight();
   }
   libraryPieChart(val: any) {
     this.pie!.config = {
@@ -322,25 +322,25 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       label: {
         type: 'outer',
       },
-      tip: (obj) => {
+      tip: (libraryTipValue) => {
         return `<div>
-                        <div>Library:${obj.obj.libName}</div>
-                        <div>Existing:${obj.obj.existSizeFormat} (${obj.obj.existSizePercent}%)</div>
-                        <div># Existing:${obj.obj.existCount} (${obj.obj.existCountPercent}%)</div>
-                        <div>Total Bytes:${obj.obj.applySizeFormat} (${obj.obj.applySizePercent}%)</div>
-                        <div># Total:${obj.obj.applyCount} (${obj.obj.applyCountPercent}%)</div>
-                        <div>Transient:${obj.obj.releaseSizeFormat} (${obj.obj.releaseSizePercent}%)</div>
-                        <div># Transient:${obj.obj.releaseCount} (${obj.obj.releaseCountPercent}%)</div>
+                        <div>Library:${libraryTipValue.obj.libName}</div>
+                        <div>Existing:${libraryTipValue.obj.existSizeFormat} (${libraryTipValue.obj.existSizePercent}%)</div>
+                        <div># Existing:${libraryTipValue.obj.existCount} (${libraryTipValue.obj.existCountPercent}%)</div>
+                        <div>Total Bytes:${libraryTipValue.obj.applySizeFormat} (${libraryTipValue.obj.applySizePercent}%)</div>
+                        <div># Total:${libraryTipValue.obj.applyCount} (${libraryTipValue.obj.applyCountPercent}%)</div>
+                        <div>Transient:${libraryTipValue.obj.releaseSizeFormat} (${libraryTipValue.obj.releaseSizePercent}%)</div>
+                        <div># Transient:${libraryTipValue.obj.releaseCount} (${libraryTipValue.obj.releaseCountPercent}%)</div>
                     </div>`;
       },
       angleClick: (it: any) => {
         // @ts-ignore
         if (it.tableName != 'other') {
           this.clearData();
-          this.tableSo!.style.display = 'none';
-          this.tableFunction!.style.display = 'grid';
-          this.tableSo!.setAttribute('hideDownload', '');
-          this.tableFunction?.removeAttribute('hideDownload');
+          this.soUsageTbl!.style.display = 'none';
+          this.functionUsageTbl!.style.display = 'grid';
+          this.soUsageTbl!.setAttribute('hideDownload', '');
+          this.functionUsageTbl?.removeAttribute('hideDownload');
           this.getNMFunctionSize(it, val);
           // @ts-ignore
           this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.type + ' / ' + it.libName;
@@ -349,9 +349,9 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableSo!.setCurrentHover(data);
+          this.soUsageTbl!.setCurrentHover(data);
         } else {
-          this.tableSo!.mouseOut();
+          this.soUsageTbl!.mouseOut();
         }
       },
       interactions: [
@@ -361,12 +361,12 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       ],
     };
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.type + '';
-    this.tableSo!.addEventListener('row-hover', (evt: any) => {
-      if (evt.detail.data) {
-        let data = evt.detail.data;
+    this.soUsageTbl!.addEventListener('row-hover', (nmStatAnalysisUsageRowHover: any) => {
+      if (nmStatAnalysisUsageRowHover.detail.data) {
+        let data = nmStatAnalysisUsageRowHover.detail.data;
         data.isHover = true;
-        if ((evt.detail as any).callBack) {
-          (evt.detail as any).callBack(true);
+        if ((nmStatAnalysisUsageRowHover.detail as any).callBack) {
+          (nmStatAnalysisUsageRowHover.detail as any).callBack(true);
         }
       }
       this.pie?.showHover();
@@ -374,12 +374,12 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     });
     this.tabName!.textContent = 'Statistic By Library Existing';
     this.soData.unshift(this.libStatisticsData);
-    this.currentLevelData = JSON.parse(JSON.stringify(this.soData));
-    this.tableSo!.recycleDataSource = this.soData;
+    this.soUsageTbl!.recycleDataSource = this.soData;
     // @ts-ignore
-    this.soData.shift(this.libStatisticsData);
-    this.tableSo?.reMeauseHeight();
-    this.tableSo!.addEventListener('column-click', (evt) => {
+    this.soData.shift(this.libStatisticsData)
+    this.currentLevelData = this.soData;
+    this.soUsageTbl?.reMeauseHeight();
+    this.soUsageTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
@@ -395,22 +395,22 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       label: {
         type: 'outer',
       },
-      tip: (obj) => {
+      tip: (functionTipValue) => {
         return `<div>
-                        <div>Function:${obj.obj.symbolName}</div>
-                        <div>Existing:${obj.obj.existSizeFormat} (${obj.obj.existSizePercent}%)</div>
-                        <div># Existing:${obj.obj.existCount} (${obj.obj.existCountPercent}%)</div>
-                        <div>Total Bytes:${obj.obj.applySizeFormat} (${obj.obj.applySizePercent}%)</div>
-                        <div># Total:${obj.obj.applyCount} (${obj.obj.applyCountPercent}%)</div>
-                        <div>Transient:${obj.obj.releaseSizeFormat} (${obj.obj.releaseSizePercent}%)</div>
-                        <div># Transient:${obj.obj.releaseCount} (${obj.obj.releaseCountPercent}%)</div>
+                        <div>Function:${functionTipValue.obj.symbolName}</div>
+                        <div>Existing:${functionTipValue.obj.existSizeFormat} (${functionTipValue.obj.existSizePercent}%)</div>
+                        <div># Existing:${functionTipValue.obj.existCount} (${functionTipValue.obj.existCountPercent}%)</div>
+                        <div>Total Bytes:${functionTipValue.obj.applySizeFormat} (${functionTipValue.obj.applySizePercent}%)</div>
+                        <div># Total:${functionTipValue.obj.applyCount} (${functionTipValue.obj.applyCountPercent}%)</div>
+                        <div>Transient:${functionTipValue.obj.releaseSizeFormat} (${functionTipValue.obj.releaseSizePercent}%)</div>
+                        <div># Transient:${functionTipValue.obj.releaseCount} (${functionTipValue.obj.releaseCountPercent}%)</div>
                     </div>`;
       },
       hoverHandler: (data) => {
         if (data) {
-          this.tableFunction!.setCurrentHover(data);
+          this.functionUsageTbl!.setCurrentHover(data);
         } else {
-          this.tableFunction!.mouseOut();
+          this.functionUsageTbl!.mouseOut();
         }
       },
       interactions: [
@@ -419,7 +419,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableFunction!.addEventListener('row-hover', (evt: any) => {
+    this.functionUsageTbl!.addEventListener('row-hover', (evt: any) => {
       if (evt.detail.data) {
         let data = evt.detail.data;
         data.isHover = true;
@@ -431,12 +431,12 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       this.pie?.hideTip();
     });
     this.functionData.unshift(this.functionStatisticsData);
-    this.currentLevelData = JSON.parse(JSON.stringify(this.functionData));
-    this.tableFunction!.recycleDataSource = this.functionData;
+    this.functionUsageTbl!.recycleDataSource = this.functionData;
     // @ts-ignore
     this.functionData.shift(this.functionStatisticsData);
-    this.tableFunction?.reMeauseHeight();
-    this.tableFunction!.addEventListener('column-click', (evt) => {
+    this.currentLevelData = this.functionData;
+    this.functionUsageTbl?.reMeauseHeight();
+    this.functionUsageTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
@@ -451,47 +451,46 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
         currentTable = this.tableType;
         break;
       case 1:
-        currentTable = this.tableSo;
+        currentTable = this.soUsageTbl;
         break;
       case 2:
-        currentTable = this.tableFunction;
+        currentTable = this.functionUsageTbl;
         break;
     }
     if (!currentTable) {
       return;
     }
     if (sort == 0) {
-      currentTable!.recycleDataSource = this.currentLevelData;
-    } else {
       let arr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          // @ts-ignore
-          arr.shift(this.typeStatisticsData);
+          arr.unshift(this.typeStatisticsData);
           break;
         case 1:
-          // @ts-ignore
-          arr.shift(this.libStatisticsData);
+          arr.unshift(this.libStatisticsData);
           break;
         case 2:
-          // @ts-ignore
-          arr.shift(this.functionStatisticsData);
+          arr.unshift(this.functionStatisticsData);
           break;
-      }
+          }
+        currentTable!.recycleDataSource = arr;
+
+    } else {
+      let arr = [...this.currentLevelData];
       if (column == 'tableName') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
           if (sort == 1) {
-            if (a.tableName > b.tableName) {
+            if (statisticAnalysisLeftData.tableName > statisticAnalysisRightData.tableName) {
               return 1;
-            } else if (a.tableName == b.tableName) {
+            } else if (statisticAnalysisLeftData.tableName == statisticAnalysisRightData.tableName) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.tableName > a.tableName) {
+            if (statisticAnalysisRightData.tableName > statisticAnalysisLeftData.tableName) {
               return 1;
-            } else if (a.tableName == b.tableName) {
+            } else if (statisticAnalysisLeftData.tableName == statisticAnalysisRightData.tableName) {
               return 0;
             } else {
               return -1;
@@ -499,52 +498,52 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           }
         });
       } else if (column == 'existSizeFormat') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.existSize - b.existSize : b.existSize - a.existSize;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.existSize - statisticAnalysisRightData.existSize : statisticAnalysisRightData.existSize - statisticAnalysisLeftData.existSize;
         });
       } else if (column == 'existSizePercent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.existSize - b.existSize : b.existSize - a.existSize;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.existSize - statisticAnalysisRightData.existSize : statisticAnalysisRightData.existSize - statisticAnalysisLeftData.existSize;
         });
       } else if (column == 'existCount') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.existCount - b.existCount : b.existCount - a.existCount;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.existCount - statisticAnalysisRightData.existCount : statisticAnalysisRightData.existCount - statisticAnalysisLeftData.existCount;
         });
       } else if (column == 'existCountPercent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.existCount - b.existCount : b.existCount - a.existCount;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.existCount - statisticAnalysisRightData.existCount : statisticAnalysisRightData.existCount - statisticAnalysisLeftData.existCount;
         });
       } else if (column == 'releaseSizeFormat') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.releaseSize - b.releaseSize : b.releaseSize - a.releaseSize;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.releaseSize - statisticAnalysisRightData.releaseSize : statisticAnalysisRightData.releaseSize - statisticAnalysisLeftData.releaseSize;
         });
       }else if (column == 'releaseSizePercent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.releaseSize - b.releaseSize : b.releaseSize - a.releaseSize;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.releaseSize - statisticAnalysisRightData.releaseSize : statisticAnalysisRightData.releaseSize - statisticAnalysisLeftData.releaseSize;
         });
       }else if (column == 'releaseCount') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.releaseCount - b.releaseCount : b.releaseCount - a.releaseCount;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.releaseCount - statisticAnalysisRightData.releaseCount : statisticAnalysisRightData.releaseCount - statisticAnalysisLeftData.releaseCount;
         });
       }else if (column == 'releaseCountPercent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.releaseCount - b.releaseCount : b.releaseCount - a.releaseCount;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.releaseCount - statisticAnalysisRightData.releaseCount : statisticAnalysisRightData.releaseCount - statisticAnalysisLeftData.releaseCount;
         });
       }else if (column == 'applySizeFormat') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.applySize - b.applySize : b.applySize - a.applySize;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.applySize - statisticAnalysisRightData.applySize : statisticAnalysisRightData.applySize - statisticAnalysisLeftData.applySize;
         });
       }else if (column == 'applySizePercent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.applySize - b.applySize : b.applySize - a.applySize;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.applySize - statisticAnalysisRightData.applySize : statisticAnalysisRightData.applySize - statisticAnalysisLeftData.applySize;
         });
       }else if (column == 'applyCount') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.applyCount - b.applyCount : b.applyCount - a.applyCount;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.applyCount - statisticAnalysisRightData.applyCount : statisticAnalysisRightData.applyCount - statisticAnalysisLeftData.applyCount;
         });
       }else if (column == 'applyCountPercent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.applyCount - b.applyCount : b.applyCount - a.applyCount;
+        currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          return sort == 1 ? statisticAnalysisLeftData.applyCount - statisticAnalysisRightData.applyCount : statisticAnalysisRightData.applyCount - statisticAnalysisLeftData.applyCount;
         });
       }
       switch (this.currentLevel) {
@@ -661,7 +660,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.currentLevelData = this.threadData;
     this.progressEL!.loading = false;
     this.threadPieChart(val);
-    this.tableThread!.addEventListener('column-click', (evt) => {
+    this.threadUsageTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
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 bd34782e8e4fdebe85aac319c91c1fca15bca62d..49bac8765fda27715e9043cd212497da2b075b14 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.ts
@@ -28,41 +28,42 @@ import { SpSystemTrace } from '../../../SpSystemTrace.js';
 import '../TabProgressBar.js';
 import { SpNativeMemoryChart } from '../../../chart/SpNativeMemoryChart.js';
 import { procedurePool } from '../../../../database/Procedure.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-native-statistics')
 export class TabPaneNMStatstics extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<NativeHookStatisticsTableData> = [];
+  private nativeStatisticsTbl: LitTable | null | undefined;
+  private nativeStatisticsSource: Array<NativeHookStatisticsTableData> = [];
   private native_type: Array<string> = ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'];
   private allMax: number = 0;
   private sortColumn: string = '';
   private sortType: number = 0;
   private currentSelection: SelectionParam | undefined;
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(nativeStatisticsParam: SelectionParam | any) {
+    if (nativeStatisticsParam == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
+    this.currentSelection = nativeStatisticsParam;
     this.allMax = 0;
     SpNativeMemoryChart.EVENT_HEAP.map((heap) => {
       this.allMax += heap.sumHeapSize;
     });
-    this.initResponseTypeList(val);
+    this.initResponseTypeList(nativeStatisticsParam);
     // @ts-ignore
-    this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 + 'px';
+    this.nativeStatisticsTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 + 'px';
     // @ts-ignore
-    this.tbl?.recycleDataSource = [];
+    this.nativeStatisticsTbl?.recycleDataSource = [];
     Promise.all([
-      queryNativeHookStatistics(val.leftNs, val.rightNs),
-      queryNativeHookStatisticsSubType(val.leftNs, val.rightNs),
-      queryNativeHookStatisticsMalloc(val.leftNs, val.rightNs),
+      queryNativeHookStatistics(nativeStatisticsParam.leftNs, nativeStatisticsParam.rightNs),
+      queryNativeHookStatisticsSubType(nativeStatisticsParam.leftNs, nativeStatisticsParam.rightNs),
+      queryNativeHookStatisticsMalloc(nativeStatisticsParam.leftNs, nativeStatisticsParam.rightNs),
     ]).then((values) => {
       let arr: Array<NativeHookStatisticsTableData> = [];
-      let index1 = val.nativeMemory.indexOf(this.native_type[0]);
-      let index2 = val.nativeMemory.indexOf(this.native_type[1]);
-      let index3 = val.nativeMemory.indexOf(this.native_type[2]);
-      this.setMemoryTypeData(val, values[0], arr);
+      let index1 = nativeStatisticsParam.nativeMemory.indexOf(this.native_type[0]);
+      let index2 = nativeStatisticsParam.nativeMemory.indexOf(this.native_type[1]);
+      let index3 = nativeStatisticsParam.nativeMemory.indexOf(this.native_type[2]);
+      this.setMemoryTypeData(nativeStatisticsParam, values[0], arr);
       if (index1 != -1 || index3 != -1) {
         this.setSubTypeTableData(values[1], arr);
       }
@@ -73,7 +74,7 @@ export class TabPaneNMStatstics extends BaseElement {
         type = index2 != -1 ? 1 : 2;
       }
       this.setMallocTableData(values[2], arr, type);
-      this.source = arr;
+      this.nativeStatisticsSource = arr;
       this.sortByColumn(this.sortColumn, this.sortType);
     });
   }
@@ -228,8 +229,8 @@ export class TabPaneNMStatstics extends BaseElement {
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-statstics');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.nativeStatisticsTbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-statstics');
+    this.nativeStatisticsTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
@@ -237,51 +238,45 @@ export class TabPaneNMStatstics extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 20 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.nativeStatisticsTbl!,20)
   }
 
-  sortByColumn(column: string, sort: number) {
-    this.sortColumn = column;
-    this.sortType = sort;
-    if (sort == 0) {
-      this.tbl!.recycleDataSource = this.source;
+  sortByColumn(nmStatColumn: string, nmStatSort: number) {
+    this.sortColumn = nmStatColumn;
+    this.sortType = nmStatSort;
+    if (nmStatSort == 0) {
+      this.nativeStatisticsTbl!.recycleDataSource = this.nativeStatisticsSource;
     } else {
-      let arr = [...this.source];
-      if (column == 'existingString') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.existing - b.existing : b.existing - a.existing;
+      let arr = [...this.nativeStatisticsSource];
+      if (nmStatColumn == 'existingString') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1 ? nativeStatisticsLeftData.existing - nativeStatisticsRightData.existing : nativeStatisticsRightData.existing - nativeStatisticsLeftData.existing;
         });
-      } else if (column == 'allocCount') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.allocCount - b.allocCount : b.allocCount - a.allocCount;
+      } else if (nmStatColumn == 'allocCount') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1 ? nativeStatisticsLeftData.allocCount - nativeStatisticsRightData.allocCount : nativeStatisticsRightData.allocCount - nativeStatisticsLeftData.allocCount;
         });
-      } else if (column == 'freeByteString') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1
-            ? a.totalBytes - a.existing - (b.totalBytes - b.existing)
-            : b.totalBytes - b.existing - (a.totalBytes - a.existing);
+      } else if (nmStatColumn == 'freeByteString') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1
+            ? nativeStatisticsLeftData.totalBytes - nativeStatisticsLeftData.existing - (nativeStatisticsRightData.totalBytes - nativeStatisticsRightData.existing)
+            : nativeStatisticsRightData.totalBytes - nativeStatisticsRightData.existing - (nativeStatisticsLeftData.totalBytes - nativeStatisticsLeftData.existing);
         });
-      } else if (column == 'freeCount') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.freeCount - b.freeCount : b.freeCount - a.freeCount;
+      } else if (nmStatColumn == 'freeCount') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1 ? nativeStatisticsLeftData.freeCount - nativeStatisticsRightData.freeCount : nativeStatisticsRightData.freeCount - nativeStatisticsLeftData.freeCount;
         });
-      } else if (column == 'totalBytesString') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.totalBytes - b.totalBytes : b.totalBytes - a.totalBytes;
+      } else if (nmStatColumn == 'totalBytesString') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1 ? nativeStatisticsLeftData.totalBytes - nativeStatisticsRightData.totalBytes : nativeStatisticsRightData.totalBytes - nativeStatisticsLeftData.totalBytes;
         });
-      } else if (column == 'maxStr') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.max - b.max : b.max - a.max;
+      } else if (nmStatColumn == 'maxStr') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1 ? nativeStatisticsLeftData.max - nativeStatisticsRightData.max : nativeStatisticsRightData.max - nativeStatisticsLeftData.max;
         });
-      } else if (column == 'totalCount') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.totalCount - b.totalCount : b.totalCount - a.totalCount;
+      } else if (nmStatColumn == 'totalCount') {
+        this.nativeStatisticsTbl!.recycleDataSource = arr.sort((nativeStatisticsLeftData, nativeStatisticsRightData) => {
+          return nmStatSort == 1 ? nativeStatisticsLeftData.totalCount - nativeStatisticsRightData.totalCount : nativeStatisticsRightData.totalCount - nativeStatisticsLeftData.totalCount;
         });
       }
     }
@@ -290,22 +285,25 @@ export class TabPaneNMStatstics extends BaseElement {
   initHtml(): string {
     return `
 <style>
+.nm-stat-tbl {
+    height: auto
+}
 :host{
     display: flex;
     flex-direction: column;
     padding: 10px 10px;
 }
 </style>
-<lit-table id="tb-native-statstics" style="height: auto">
-    <lit-table-column width="25%" title="Memory Type" data-index="memoryTap" key="memoryTap"  align="flex-start"></lit-table-column>
-    <lit-table-column width="1fr" title="Existing" data-index="existingString" key="existingString"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="1fr" title="# Existing" data-index="allocCount" key="allocCount"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="1fr" title="Transient" data-index="freeByteString" key="freeByteString"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="1fr" title="# Transient" data-index="freeCount" key="freeCount"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="1fr" title="Total Bytes" data-index="totalBytesString" key="totalBytesString"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="1fr" title="# Total" data-index="totalCount" key="totalCount"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="1fr" title="Peak Value" data-index="maxStr" key="maxStr"  align="flex-start" order></lit-table-column>
-    <lit-table-column width="160px" title="Existing / Total" data-index="existingValue" key="existingValue"  align="flex-start" >
+<lit-table id="tb-native-statstics" class="nm-stat-tbl">
+    <lit-table-column class="nm-stat-column" width="25%" title="Memory Type" data-index="memoryTap" key="memoryTap"  align="flex-start"></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="Existing" data-index="existingString" key="existingString"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="# Existing" data-index="allocCount" key="allocCount"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="Transient" data-index="freeByteString" key="freeByteString"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="# Transient" data-index="freeCount" key="freeCount"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="Total Bytes" data-index="totalBytesString" key="totalBytesString"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="# Total" data-index="totalCount" key="totalCount"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="1fr" title="Peak Value" data-index="maxStr" key="maxStr"  align="flex-start" order></lit-table-column>
+    <lit-table-column class="nm-stat-column" width="160px" title="Existing / Total" data-index="existingValue" key="existingValue"  align="flex-start" >
         <template><tab-progress-bar data="{{existingValue}}"></tab-progress-bar></template>
     </lit-table-column>
 </lit-table>
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 b4ce3ad9600ae9c322ace6800e27ff82f2142d0d..04e71e71cff395f86dd71ed06e854086e57529ae 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
@@ -28,12 +28,12 @@ import { procedurePool } from '../../../../database/Procedure.js';
 @element('tabpane-native-memory')
 export class TabPaneNMemory extends BaseElement {
   private defaultNativeTypes = ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'];
-  private tbl: LitTable | null | undefined;
+  private memoryTbl: LitTable | null | undefined;
   private tblData: LitTable | null | undefined;
   private progressEL: LitProgressBar | null | undefined;
   private loadingList: number[] = [];
   private loadingPage: any;
-  private source: Array<NativeMemory> = [];
+  private memorySource: Array<NativeMemory> = [];
   private native_type: Array<string> = [...this.defaultNativeTypes];
   private statsticsSelection: Array<any> = [];
   private queryResult: Array<NativeHookStatistics> = [];
@@ -49,44 +49,44 @@ export class TabPaneNMemory extends BaseElement {
   private rightNs: number = 0;
   private responseTypes: any[] = [];
 
-  set data(val: SelectionParam | any) {
-    if (val == this.currentSelection) {
+  set data(memoryParam: SelectionParam | any) {
+    if (memoryParam == this.currentSelection) {
       return;
     }
-    this.currentSelection = val;
+    this.currentSelection = memoryParam;
     this.initFilterTypes();
-    this.queryData(val);
+    this.queryData(memoryParam);
   }
 
-  queryData(val: SelectionParam | any) {
+  queryData(memoryParam: SelectionParam | any) {
     let types: Array<string> = [];
-    if (val.nativeMemory.indexOf(this.defaultNativeTypes[0]) != -1) {
+    if (memoryParam.nativeMemory.indexOf(this.defaultNativeTypes[0]) != -1) {
       types.push("'AllocEvent'");
       types.push("'MmapEvent'");
     } else {
-      if (val.nativeMemory.indexOf(this.defaultNativeTypes[1]) != -1) {
+      if (memoryParam.nativeMemory.indexOf(this.defaultNativeTypes[1]) != -1) {
         types.push("'AllocEvent'");
       }
-      if (val.nativeMemory.indexOf(this.defaultNativeTypes[2]) != -1) {
+      if (memoryParam.nativeMemory.indexOf(this.defaultNativeTypes[2]) != -1) {
         types.push("'MmapEvent'");
       }
     }
-    TabPaneNMSampleList.serSelection(val);
+    TabPaneNMSampleList.serSelection(memoryParam);
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
+    this.memoryTbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
     this.tblData?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 20 - 31 + 'px';
     // @ts-ignore
     this.tblData?.recycleDataSource = [];
     // @ts-ignore
-    this.tbl?.recycleDataSource = [];
-    this.leftNs = val.leftNs;
-    this.rightNs = val.rightNs;
+    this.memoryTbl?.recycleDataSource = [];
+    this.leftNs = memoryParam.leftNs;
+    this.rightNs = memoryParam.rightNs;
     this.progressEL!.loading = true;
     this.loadingPage.style.visibility = 'visible';
-    queryNativeHookEventTid(val.leftNs, val.rightNs, types).then((result) => {
+    queryNativeHookEventTid(memoryParam.leftNs, memoryParam.rightNs, types).then((result) => {
       this.queryResult = result;
-      this.getDataByNativeMemoryWorker(val);
+      this.getDataByNativeMemoryWorker(memoryParam);
     });
   }
 
@@ -113,11 +113,11 @@ export class TabPaneNMemory extends BaseElement {
       this.tblData!.recycleDataSource = [];
       this.progressEL!.loading = false;
       if (results.length > 0) {
-        this.source = results;
+        this.memorySource = results;
         this.sortByColumn(this.sortColumn, this.sortType);
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.memorySource = [];
+        this.memoryTbl!.recycleDataSource = [];
       }
     });
   }
@@ -223,9 +223,9 @@ export class TabPaneNMemory extends BaseElement {
   initElements(): void {
     this.loadingPage = this.shadowRoot?.querySelector('.loading');
     this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-memory');
+    this.memoryTbl = this.shadowRoot?.querySelector<LitTable>('#tb-native-memory');
     this.tblData = this.shadowRoot?.querySelector<LitTable>('#tb-native-data');
-    this.tbl!.addEventListener('row-click', (e) => {
+    this.memoryTbl!.addEventListener('row-click', (e) => {
       // @ts-ignore
       let data = e.detail.data as NativeMemory;
       this.rowSelectData = data;
@@ -236,7 +236,7 @@ export class TabPaneNMemory extends BaseElement {
         })
       );
     });
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.memoryTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
@@ -252,7 +252,7 @@ export class TabPaneNMemory extends BaseElement {
               timeCallback: (t: any) => {
                 let minTs = 0;
                 let minItem: any = undefined;
-                let filterTemp = this.source.filter((tempItem) => {
+                let filterTemp = this.memorySource.filter((tempItem) => {
                   if (minTs == 0 || (tempItem.startTs - t != 0 && Math.abs(tempItem.startTs - t) < minTs)) {
                     minTs = Math.abs(tempItem.startTs - t);
                     minItem = tempItem;
@@ -276,7 +276,7 @@ export class TabPaneNMemory extends BaseElement {
                     currentSelection[0].isSelected = true;
                   }
                   TabPaneNMSampleList.addSampleData(this.rowSelectData);
-                  this.tbl!.scrollToData(this.rowSelectData);
+                  this.memoryTbl!.scrollToData(this.rowSelectData);
                 }
               },
             },
@@ -302,8 +302,8 @@ export class TabPaneNMemory extends BaseElement {
     new ResizeObserver((entries) => {
       if (this.parentElement?.clientHeight != 0) {
         // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
-        this.tbl?.reMeauseHeight();
+        this.memoryTbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
+        this.memoryTbl?.reMeauseHeight();
         // @ts-ignore
         this.tblData?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 10 - 31 + 'px';
         this.tblData?.reMeauseHeight();
@@ -312,79 +312,79 @@ export class TabPaneNMemory extends BaseElement {
     }).observe(this.parentElement!);
   }
 
-  sortByColumn(column: string, sort: number) {
-    this.sortColumn = column;
-    this.sortType = sort;
-    if (sort == 0) {
-      this.tbl!.recycleDataSource = this.source;
+  sortByColumn(nmMemoryColumn: string, nmMemorySort: number) {
+    this.sortColumn = nmMemoryColumn;
+    this.sortType = nmMemorySort;
+    if (nmMemorySort == 0) {
+      this.memoryTbl!.recycleDataSource = this.memorySource;
     } else {
-      let arr = [...this.source];
-      if (column == 'index') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.index - b.index : b.index - a.index;
+      let arr = [...this.memorySource];
+      if (nmMemoryColumn == 'index') {
+        this.memoryTbl!.recycleDataSource = arr.sort((memoryLeftData, memoryRightData) => {
+          return nmMemorySort == 1 ? memoryLeftData.index - memoryRightData.index : memoryRightData.index - memoryLeftData.index;
         });
-      } else if (column == 'addr') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          if (sort == 1) {
-            if (a.addr > b.addr) {
+      } else if (nmMemoryColumn == 'addr') {
+        this.memoryTbl!.recycleDataSource = arr.sort((memoryLeftData, memoryRightData) => {
+          if (nmMemorySort == 1) {
+            if (memoryLeftData.addr > memoryRightData.addr) {
               return 1;
-            } else if (a.addr == b.addr) {
+            } else if (memoryLeftData.addr == memoryRightData.addr) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.addr > a.addr) {
+            if (memoryRightData.addr > memoryLeftData.addr) {
               return 1;
-            } else if (a.addr == b.addr) {
+            } else if (memoryLeftData.addr == memoryRightData.addr) {
               return 0;
             } else {
               return -1;
             }
           }
         });
-      } else if (column == 'timestamp') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.startTs - b.startTs : b.startTs - a.startTs;
+      } else if (nmMemoryColumn == 'timestamp') {
+        this.memoryTbl!.recycleDataSource = arr.sort((memoryLeftData, memoryRightData) => {
+          return nmMemorySort == 1 ? memoryLeftData.startTs - memoryRightData.startTs : memoryRightData.startTs - memoryLeftData.startTs;
         });
-      } else if (column == 'heapSizeUnit') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          return sort == 1 ? a.heapSize - b.heapSize : b.heapSize - a.heapSize;
+      } else if (nmMemoryColumn == 'heapSizeUnit') {
+        this.memoryTbl!.recycleDataSource = arr.sort((memoryLeftData, memoryRightData) => {
+          return nmMemorySort == 1 ? memoryLeftData.heapSize - memoryRightData.heapSize : memoryRightData.heapSize - memoryLeftData.heapSize;
         });
-      } else if (column == 'library') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          if (sort == 1) {
-            if (a.library > b.library) {
+      } else if (nmMemoryColumn == 'library') {
+        this.memoryTbl!.recycleDataSource = arr.sort((memoryLeftData, memoryRightData) => {
+          if (nmMemorySort == 1) {
+            if (memoryLeftData.library > memoryRightData.library) {
               return 1;
-            } else if (a.library == b.library) {
+            } else if (memoryLeftData.library == memoryRightData.library) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.library > a.library) {
+            if (memoryRightData.library > memoryLeftData.library) {
               return 1;
-            } else if (a.library == b.library) {
+            } else if (memoryLeftData.library == memoryRightData.library) {
               return 0;
             } else {
               return -1;
             }
           }
         });
-      } else if (column == 'symbol') {
-        this.tbl!.recycleDataSource = arr.sort((a, b) => {
-          if (sort == 1) {
-            if (a.symbol > b.symbol) {
+      } else if (nmMemoryColumn == 'symbol') {
+        this.memoryTbl!.recycleDataSource = arr.sort((memoryLeftData, memoryRightData) => {
+          if (nmMemorySort == 1) {
+            if (memoryLeftData.symbol > memoryRightData.symbol) {
               return 1;
-            } else if (a.symbol == b.symbol) {
+            } else if (memoryLeftData.symbol == memoryRightData.symbol) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.symbol > a.symbol) {
+            if (memoryRightData.symbol > memoryLeftData.symbol) {
               return 1;
-            } else if (a.symbol == b.symbol) {
+            } else if (memoryLeftData.symbol == memoryRightData.symbol) {
               return 0;
             } else {
               return -1;
@@ -395,21 +395,21 @@ export class TabPaneNMemory extends BaseElement {
     }
   }
 
-  setRightTableData(hook: NativeMemory) {
+  setRightTableData(nativeMemoryHook: NativeMemory) {
     let args = new Map<string, any>();
-    args.set('eventId', hook.eventId);
+    args.set('eventId', nativeMemoryHook.eventId);
     args.set('actionType', 'memory-stack');
     this.startWorker(args, (results: any[]) => {
       let thread = new NativeHookCallInfo();
-      thread.threadId = hook.threadId;
-      thread.threadName = hook.threadName;
-      thread.title = `${hook.threadName ?? ''}【${hook.threadId}】`;
+      thread.threadId = nativeMemoryHook.threadId;
+      thread.threadName = nativeMemoryHook.threadName;
+      thread.title = `${nativeMemoryHook.threadName ?? ''}【${nativeMemoryHook.threadId}】`;
       thread.type = -1;
-      let source = [];
-      source.push(thread);
-      source.push(...results);
+      let currentSource = [];
+      currentSource.push(thread);
+      currentSource.push(...results);
       this.progressEL!.loading = false;
-      this.tblData!.dataSource = source;
+      this.tblData!.dataSource = currentSource;
     });
   }
 
@@ -421,7 +421,7 @@ export class TabPaneNMemory extends BaseElement {
             flex-direction: column;
             padding: 10px 10px 0 10px;
         }
-        .loading{
+        .nm-memory-loading{
             bottom: 0;
             position: absolute;
             left: 0;
@@ -430,14 +430,14 @@ export class TabPaneNMemory extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
-        .progress{
+        .nm-memory-progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
             left: 0;
             right: 0;
         }
-        tab-pane-filter {
+        .nm-memory-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
             position: fixed;
@@ -445,46 +445,46 @@ export class TabPaneNMemory extends BaseElement {
             width: 100%;
         }
         </style>
-        <div style="display: flex;flex-direction: column">
+        <div class="nm-memory-content" style="display: flex;flex-direction: column">
             <div style="display: flex;flex-direction: row">
                 <lit-slicer style="width:100%">
                     <div style="width: 65%">
                         <lit-table id="tb-native-memory" style="height: auto">
-                            <lit-table-column width="60px" title="#" data-index="index" key="index"  align="flex-start" order>
+                            <lit-table-column class="nm-memory-column" width="60px" title="#" data-index="index" key="index"  align="flex-start" order>
                             </lit-table-column>
-                            <lit-table-column width="1fr" title="Address" data-index="addr" key="addr"  align="flex-start" order>
+                            <lit-table-column class="nm-memory-column" width="1fr" title="Address" data-index="addr" key="addr"  align="flex-start" order>
                             </lit-table-column>
-                            <lit-table-column width="1fr" title="Memory Type" data-index="eventType" key="eventType"  align="flex-start">
+                            <lit-table-column class="nm-memory-column" width="1fr" title="Memory Type" data-index="eventType" key="eventType"  align="flex-start">
                             </lit-table-column>
-                            <lit-table-column width="1fr" title="Timestamp" data-index="timestamp" key="timestamp"  align="flex-start" order>
+                            <lit-table-column class="nm-memory-column" width="1fr" title="Timestamp" data-index="timestamp" key="timestamp"  align="flex-start" order>
                             </lit-table-column>
-                            <lit-table-column width="1fr" title="State" data-index="state" key="state"  align="flex-start">
+                            <lit-table-column class="nm-memory-column" width="1fr" title="State" data-index="state" key="state"  align="flex-start">
                             </lit-table-column>
-                            <lit-table-column width="1fr" title="Size" data-index="heapSizeUnit" key="heapSizeUnit"  align="flex-start" order>
+                            <lit-table-column class="nm-memory-column" width="1fr" title="Size" data-index="heapSizeUnit" key="heapSizeUnit"  align="flex-start" order>
                             </lit-table-column>
-                            <lit-table-column width="20%" title="Responsible Library" data-index="library" key="library"  align="flex-start" order>
+                            <lit-table-column class="nm-memory-column" width="20%" title="Responsible Library" data-index="library" key="library"  align="flex-start" order>
                             </lit-table-column>
-                            <lit-table-column width="20%" title="Responsible Caller" data-index="symbol" key="symbol"  align="flex-start" order>
+                            <lit-table-column class="nm-memory-column" width="20%" title="Responsible Caller" data-index="symbol" key="symbol"  align="flex-start" order>
                             </lit-table-column>
                         </lit-table>
                     </div>
                     <lit-slicer-track ></lit-slicer-track>
                     <lit-table id="tb-native-data" no-head style="height: auto;border-left: 1px solid var(--dark-border1,#e2e2e2)" hideDownload>
-                        <lit-table-column width="80px" title="" data-index="type" key="type"  align="flex-start" >
+                        <lit-table-column class="nm-memory-column" width="80px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
                                 <div v-if=" type == -1 ">Thread:</div>
                                 <img src="img/library.png" size="20" v-if=" type == 1 ">
                                 <img src="img/function.png" size="20" v-if=" type == 0 ">
                             </template>
                         </lit-table-column>
-                        <lit-table-column width="1fr" title="" data-index="title" key="title"  align="flex-start">
+                        <lit-table-column class="nm-memory-column" width="1fr" title="" data-index="title" key="title"  align="flex-start">
                         </lit-table-column>
                     </lit-table>
                 </lit-slicer>
             </div>
-            <lit-progress-bar class="progress"></lit-progress-bar>
-            <tab-pane-filter id="filter" mark first second></tab-pane-filter>
-            <div class="loading"></div>
+            <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>
         `;
   }
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts b/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts
index f32e1a5965da8cf53574c57fb259c2708e229b71..e7df59fc7e89f3e5fc0ec58dbaaf265488fbd61c 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneCounter.ts
@@ -17,19 +17,20 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { Counter, SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabCounters, getTabVirtualCounters } from '../../../../database/SqlLite.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-counter')
 export class TabPaneCounter extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private source: Array<SelectionData> = [];
+  private counterTbl: LitTable | null | undefined;
+  private counterRange: HTMLLabelElement | null | undefined;
+  private counterSource: Array<SelectionData> = [];
 
-  set data(val: SelectionParam | any) {
+  set data(counterParam: SelectionParam | any) {
     //@ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
-    getTabCounters(val.processTrackIds, val.virtualTrackIds, val.rightNs).then((result) => {
+    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';
+    getTabCounters(counterParam.processTrackIds, counterParam.virtualTrackIds, counterParam.rightNs).then((result) => {
       if (result != null && result.length > 0) {
         let dataSource: Array<SelectionData> = [];
         let collect = this.groupByTrackIdToMap(result);
@@ -37,13 +38,13 @@ export class TabPaneCounter extends BaseElement {
         for (let key of collect.keys()) {
           let counters = collect.get(key);
           let list: Array<Counter> = [];
-          let index = counters!.findIndex((item) => item.startTime >= val.leftNs);
+          let index = counters!.findIndex((item) => item.startTime >= counterParam.leftNs);
           if (index != -1) {
             list = counters!.splice(index > 0 ? index - 1 : index);
           } else {
             list.push(counters![counters!.length - 1]);
           }
-          let sd = this.createSelectCounterData(list, val.leftNs, val.rightNs);
+          let sd = this.createSelectCounterData(list, counterParam.leftNs, counterParam.rightNs);
           sumCount += Number.parseInt(sd.count);
           dataSource.push(sd);
         }
@@ -51,19 +52,19 @@ export class TabPaneCounter extends BaseElement {
         sumData.count = sumCount.toString();
         sumData.process = ' ';
         dataSource.splice(0, 0, sumData);
-        this.source = dataSource;
-        this.tbl!.recycleDataSource = dataSource;
+        this.counterSource = dataSource;
+        this.counterTbl!.recycleDataSource = dataSource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = this.source;
+        this.counterSource = [];
+        this.counterTbl!.recycleDataSource = this.counterSource;
       }
     });
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.counterTbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
+    this.counterRange = this.shadowRoot?.querySelector('#time-range');
+    this.counterTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -71,25 +72,22 @@ export class TabPaneCounter extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.counterTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .counter-label{
+            width: 100%;
+        }
         :host{
-            display: flex;
             flex-direction: column;
+            display: flex;
             padding: 10px 10px;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="time-range" class="counter-label" style="height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-counter" style="height: auto">
             <lit-table-column width="25%" title="Name" data-index="name" key="name"  align="flex-start" order>
             </lit-table-column>
@@ -129,54 +127,54 @@ export class TabPaneCounter extends BaseElement {
   }
 
   createSelectCounterData(list: Array<Counter>, leftNs: number, rightNs: number): SelectionData {
-    let selectData = new SelectionData();
+    let counterData = new SelectionData();
     if (list.length > 0) {
       let range = rightNs - leftNs;
       let first = list[0];
-      selectData.trackId = first.trackId;
-      selectData.name = first.name;
-      selectData.first = first.value + '';
-      selectData.count = list.length + '';
-      selectData.last = list[list.length - 1].value + '';
-      selectData.delta = parseInt(selectData.last) - parseInt(selectData.first) + '';
-      selectData.rate = (parseInt(selectData.delta) / ((range * 1.0) / 1000000000)).toFixed(4);
-      selectData.min = first.value + '';
-      selectData.max = '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.rate = (parseInt(counterData.delta) / ((range * 1.0) / 1000000000)).toFixed(4);
+      counterData.min = first.value + '';
+      counterData.max = '0';
       let weightAvg = 0.0;
       for (let i = 0; i < list.length; i++) {
         let counter = list[i];
-        if (counter.value < parseInt(selectData.min)) {
-          selectData.min = counter.value.toString();
+        if (counter.value < parseInt(counterData.min)) {
+          counterData.min = counter.value.toString();
         }
-        if (counter.value > parseInt(selectData.max)) {
-          selectData.max = counter.value.toString();
+        if (counter.value > parseInt(counterData.max)) {
+          counterData.max = counter.value.toString();
         }
         let start = i == 0 ? leftNs : counter.startTime;
         let end = i == list.length - 1 ? rightNs : list[i + 1].startTime;
         weightAvg += counter.value * (((end - start) * 1.0) / range);
       }
-      selectData.avgWeight = weightAvg.toFixed(2);
+      counterData.avgWeight = weightAvg.toFixed(2);
     }
-    return selectData;
+    return counterData;
   }
 
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+      return function (counterLeftData: SelectionData, counterRightData: SelectionData) {
+        if (counterLeftData.process == ' ' || counterRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(counterRightData[property]) - parseFloat(counterLeftData[property]) : parseFloat(counterLeftData[property]) - parseFloat(counterRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (counterRightData[property] > counterLeftData[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (counterRightData[property] == counterLeftData[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -187,10 +185,10 @@ export class TabPaneCounter extends BaseElement {
     }
 
     if (detail.key === 'name') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.counterSource.sort(compare(detail.key, detail.sort, 'string'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.counterSource.sort(compare(detail.key, detail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.counterTbl!.recycleDataSource = this.counterSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts b/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts
index f3f30d463757c0b517a3a19f085545d1b8017d57..b41536de64518df25a01c8073415bab0c87ca071 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneSlices.ts
@@ -17,54 +17,55 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabSlices, getTabSlicesAsyncFunc } from '../../../../database/SqlLite.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-slices')
 export class TabPaneSlices extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
-  private source: Array<SelectionData> = [];
+  private slicesTbl: LitTable | null | undefined;
+  private slicesRange: HTMLLabelElement | null | undefined;
+  private slicesSource: Array<SelectionData> = [];
 
-  set data(val: SelectionParam | any) {
-    this.range!.textContent =
-      'Selected range: ' + parseFloat(((val.rightNs - val.leftNs) / 1000000.0).toFixed(5)) + ' ms';
+  set data(slicesParam: SelectionParam | any) {
+    this.slicesRange!.textContent =
+      'Selected range: ' + parseFloat(((slicesParam.rightNs - slicesParam.leftNs) / 1000000.0).toFixed(5)) + ' ms';
     let asyncNames: Array<string> = [];
     let asyncPid: Array<number> = [];
-    val.funAsync.forEach((it: any) => {
+    slicesParam.funAsync.forEach((it: any) => {
       asyncNames.push(it.name);
       asyncPid.push(it.pid);
     });
-    getTabSlicesAsyncFunc(asyncNames, asyncPid, val.leftNs, val.rightNs).then((res) => {
-      getTabSlices(val.funTids, val.leftNs, val.rightNs).then((res2) => {
-        let result = (res || []).concat(res2 || []);
-        if (result != null && result.length > 0) {
+    getTabSlicesAsyncFunc(asyncNames, asyncPid, slicesParam.leftNs, slicesParam.rightNs).then((res) => {
+      getTabSlices(slicesParam.funTids, slicesParam.leftNs, slicesParam.rightNs).then((res2) => {
+        let processSlicesResult = (res || []).concat(res2 || []);
+        if (processSlicesResult != null && processSlicesResult.length > 0) {
           let sumWall = 0.0;
           let sumOcc = 0;
-          for (let e of result) {
-            e.name = e.name == null ? '' : e.name;
-            sumWall += e.wallDuration;
-            sumOcc += e.occurrences;
-            e.wallDuration = parseFloat((e.wallDuration / 1000000.0).toFixed(5));
-            e.avgDuration = parseFloat((e.avgDuration / 1000000.0).toFixed(5));
+          for (let processSliceItem of processSlicesResult) {
+            processSliceItem.name = processSliceItem.name == null ? '' : processSliceItem.name;
+            sumWall += processSliceItem.wallDuration;
+            sumOcc += processSliceItem.occurrences;
+            processSliceItem.wallDuration = parseFloat((processSliceItem.wallDuration / 1000000.0).toFixed(5));
+            processSliceItem.avgDuration = parseFloat((processSliceItem.avgDuration / 1000000.0).toFixed(5));
           }
           let count = new SelectionData();
           count.process = ' ';
           count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(5));
           count.occurrences = sumOcc;
-          result.splice(0, 0, count);
-          this.source = result;
-          this.tbl!.recycleDataSource = result;
+          processSlicesResult.splice(0, 0, count);
+          this.slicesSource = processSlicesResult;
+          this.slicesTbl!.recycleDataSource = processSlicesResult;
         } else {
-          this.source = [];
-          this.tbl!.recycleDataSource = this.source;
+          this.slicesSource = [];
+          this.slicesTbl!.recycleDataSource = this.slicesSource;
         }
       });
     });
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-slices');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.slicesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-slices');
+    this.slicesRange = this.shadowRoot?.querySelector('#time-range');
+    this.slicesTbl!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -72,69 +73,66 @@ export class TabPaneSlices extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.slicesTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .slice-label{
+            height: 20px;
+        }
         :host{
             display: flex;
-            flex-direction: column;
             padding: 10px 10px;
+            flex-direction: column;
         }
         </style>
-        <label id="time-range" style="width: 100%;height: 20px;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
+        <label id="time-range" class="slice-label" style="width: 100%;text-align: end;font-size: 10pt;margin-bottom: 5px">Selected range:0.0 ms</label>
         <lit-table id="tb-slices" style="height: auto">
-            <lit-table-column title="Name" width="500px" data-index="name" key="name"  align="flex-start" order>
+            <lit-table-column class="slices-column" title="Name" width="500px" data-index="name" key="name"  align="flex-start" order>
             </lit-table-column>
-            <lit-table-column title="Wall duration(ms)" width="1fr" data-index="wallDuration" key="wallDuration"  align="flex-start" order >
+            <lit-table-column class="slices-column" title="Wall duration(ms)" width="1fr" data-index="wallDuration" key="wallDuration"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column title="Avg Wall duration(ms)" width="1fr" data-index="avgDuration" key="avgDuration"  align="flex-start" order >
+            <lit-table-column class="slices-column" title="Avg Wall duration(ms)" width="1fr" data-index="avgDuration" key="avgDuration"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column title="Occurrences" width="1fr" data-index="occurrences" key="occurrences"  align="flex-start" order >
+            <lit-table-column class="slices-column" title="Occurrences" width="1fr" data-index="occurrences" key="occurrences"  align="flex-start" order >
             </lit-table-column>
         </lit-table>
         `;
   }
 
-  sortByColumn(detail: any) {
+  sortByColumn(slicesDetail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+    function compare(property, slicesSort, type) {
+      return function (slicesLeftData: SelectionData, slicesRightData: SelectionData) {
+        if (slicesLeftData.process == ' ' || slicesRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return slicesSort === 2 ? parseFloat(slicesRightData[property]) - parseFloat(slicesLeftData[property]) : parseFloat(slicesLeftData[property]) - parseFloat(slicesRightData[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
-            return sort === 2 ? 1 : -1;
+          if (slicesRightData[property] > slicesLeftData[property]) {
+            return slicesSort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (slicesRightData[property] == slicesLeftData[property]) {
               return 0;
             } else {
-              return sort === 2 ? -1 : 1;
+              return slicesSort === 2 ? -1 : 1;
             }
           }
         }
       };
     }
 
-    if (detail.key === 'name') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+    if (slicesDetail.key === 'name') {
+      this.slicesSource.sort(compare(slicesDetail.key, slicesDetail.sort, 'string'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.slicesSource.sort(compare(slicesDetail.key, slicesDetail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.slicesTbl!.recycleDataSource = this.slicesSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts b/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
index c65e6718c09f99a5d38b2dddd2b9ebd45f92c06a..5fe29cc26e0991ca6ad1329a2fd9a107aad970e3 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
@@ -21,20 +21,21 @@ import { getTabThreadStates } from '../../../../database/SqlLite.js';
 import { Utils } from '../../base/Utils.js';
 import { StackBar } from '../../../StackBar.js';
 import { log } from '../../../../../log/Log.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-thread-states')
 export class TabPaneThreadStates extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private threadStatesTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private stackBar: StackBar | null | undefined;
-  private source: Array<SelectionData> = [];
+  private threadStatesTblSource: Array<SelectionData> = [];
 
-  set data(val: SelectionParam | any) {
+  set data(threadStatesParam: SelectionParam | any) {
     //@ts-ignore
-    this.tbl?.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: ' + ((val.rightNs - val.leftNs) / 1000000.0).toFixed(5) + ' ms';
-    getTabThreadStates(val.threadIds, val.leftNs, val.rightNs).then((result) => {
+    this.range!.textContent = 'Selected range: ' + ((threadStatesParam.rightNs - threadStatesParam.leftNs) / 1000000.0).toFixed(5) + ' ms';
+    getTabThreadStates(threadStatesParam.threadIds, threadStatesParam.leftNs, threadStatesParam.rightNs).then((result) => {
       if (result != null && result.length > 0) {
         log('getTabThreadStates result size : ' + result.length);
         let sumWall = 0.0;
@@ -57,98 +58,96 @@ export class TabPaneThreadStates extends BaseElement {
         count.wallDuration = parseFloat((sumWall / 1000000.0).toFixed(5));
         count.occurrences = sumOcc;
         result.splice(0, 0, count);
-        this.source = result;
-        this.tbl!.recycleDataSource = result;
+        this.threadStatesTblSource = result;
+        this.threadStatesTbl!.recycleDataSource = result;
         this.stackBar!.data = result;
       } else {
-        this.source = [];
+        this.threadStatesTblSource = [];
         this.stackBar!.data = [];
-        this.tbl!.recycleDataSource = [];
+        this.threadStatesTbl!.recycleDataSource = [];
       }
     });
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-thread-states');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.stackBar = this.shadowRoot?.querySelector('#stack-bar');
-    this.tbl!.addEventListener('column-click', (evt: any) => {
+    this.threadStatesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-thread-states');
+    this.range = this.shadowRoot?.querySelector('#thread-states-time-range');
+    this.stackBar = this.shadowRoot?.querySelector('#thread-states-stack-bar');
+    this.threadStatesTbl!.addEventListener('column-click', (evt: any) => {
       this.sortByColumn(evt.detail);
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.threadStatesTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .tread-states-table{
+            display: flex;
+            height: 20px;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
         </style>
-        <div style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
-            <stack-bar id="stack-bar" style="flex: 1"></stack-bar>
-            <label id="time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
+        <div class="tread-states-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
+            <stack-bar id="thread-states-stack-bar" style="flex: 1"></stack-bar>
+            <label id="thread-states-time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
         </div>
         <lit-table id="tb-thread-states" style="height: auto;overflow-x: auto">
-            <lit-table-column width="240px" title="Process" data-index="process" key="process"  align="flex-start" order>
+            <lit-table-column class="tread-states-column" width="240px" title="Process" data-index="process" key="process"  align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="120px" title="PID" data-index="pid" key="pid"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="120px" title="PID" data-index="pid" key="pid"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column width="240px" title="Thread" data-index="thread" key="thread"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="240px" title="Thread" data-index="thread" key="thread"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column width="120px" title="TID" data-index="tid" key="tid"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="120px" title="TID" data-index="tid" key="tid"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column width="240px" title="State" data-index="state" key="state"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="240px" title="State" data-index="state" key="state"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column width="120px" title="Wall duration(ms)" data-index="wallDuration" key="wallDuration"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="120px" title="Wall duration(ms)" data-index="wallDuration" key="wallDuration"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column width="120px" title="Avg Wall duration(ms)" data-index="avgDuration" key="avgDuration"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="120px" title="Avg Wall duration(ms)" data-index="avgDuration" key="avgDuration"  align="flex-start" order >
             </lit-table-column>
-            <lit-table-column width="120px" title="Occurrences" data-index="occurrences" key="occurrences"  align="flex-start" order >
+            <lit-table-column class="tread-states-column" width="120px" title="Occurrences" data-index="occurrences" key="occurrences"  align="flex-start" order >
             </lit-table-column>
         </lit-table>
         `;
   }
 
-  sortByColumn(detail: any) {
-    function compare(property: any, sort: any, type: any) {
-      return function (a: SelectionData | any, b: SelectionData | any) {
-        if (a.process == ' ' || b.process == ' ') {
+  sortByColumn(treadStatesDetail: any) {
+    function compare(property: any, treadStatesSort: any, type: any) {
+      return function (threadStatesLeftData: SelectionData | any, threadStatesRightData: SelectionData | any) {
+        if (threadStatesLeftData.process == ' ' || threadStatesRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
-          return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+          return treadStatesSort === 2
+            ? parseFloat(threadStatesRightData[property]) - parseFloat(threadStatesLeftData[property])
+            : parseFloat(threadStatesLeftData[property]) - parseFloat(threadStatesRightData[property]);
         } else {
-          if (b[property] > a[property]) {
-            return sort === 2 ? 1 : -1;
-          } else if (b[property] == a[property]) {
+          if (threadStatesRightData[property] > threadStatesLeftData[property]) {
+            return treadStatesSort === 2 ? 1 : -1;
+          } else if (threadStatesRightData[property] == threadStatesLeftData[property]) {
             return 0;
           } else {
-            return sort === 2 ? -1 : 1;
+            return treadStatesSort === 2 ? -1 : 1;
           }
         }
       };
     }
 
-    if (detail.key === 'name' || detail.key === 'thread' || detail.key === 'state') {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+    if (treadStatesDetail.key === 'name' || treadStatesDetail.key === 'thread' || treadStatesDetail.key === 'state') {
+      this.threadStatesTblSource.sort(compare(treadStatesDetail.key, treadStatesDetail.sort, 'string'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'number'));
+      this.threadStatesTblSource.sort(compare(treadStatesDetail.key, treadStatesDetail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.threadStatesTbl!.recycleDataSource = this.threadStatesTblSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts b/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts
index 60b8dc2d432f2bd27f890aa92e071e921012359a..f4f78b712e018474ad8dad7a778313d075f07988 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneThreadUsage.ts
@@ -23,13 +23,14 @@ import { log } from '../../../../../log/Log.js';
 import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon.js';
 import { Utils } from '../../base/Utils.js';
 import { CpuStruct } from '../../../../database/ui-worker/ProcedureWorkerCPU.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-thread-usage')
 export class TabPaneThreadUsage extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private threadUsageTbl: LitTable | null | undefined;
   private range: HTMLLabelElement | null | undefined;
   private stackBar: StackBar | null | undefined;
-  private source: Array<SelectionData> = [];
+  private threadUsageSource: Array<SelectionData> = [];
   private cpuCount = 0;
   private pubColumns = `
             <lit-table-column width="200px" title="Process" data-index="process" key="process"  align="flex-start" order>
@@ -44,105 +45,103 @@ export class TabPaneThreadUsage extends BaseElement {
             </lit-table-column>
     `;
 
-  set data(val: SelectionParam | any) {
+  set data(threadUsageParam: SelectionParam | any) {
     if (this.cpuCount !== CpuStruct.cpuCount) {
       this.cpuCount = CpuStruct.cpuCount;
-      this.tbl!.innerHTML = this.getTableColumns();
+      this.threadUsageTbl!.innerHTML = this.getTableColumns();
     }
     //@ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
+    this.threadUsageTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
     // // @ts-ignore
-    this.range!.textContent = 'Selected range: ' + ((val.rightNs - val.leftNs) / 1000000.0).toFixed(5) + ' ms';
-    getTabThreadStatesCpu(val.threadIds, val.leftNs, val.rightNs).then((result) => {
+    this.range!.textContent = 'Selected range: ' + ((threadUsageParam.rightNs - threadUsageParam.leftNs) / 1000000.0).toFixed(5) + ' ms';
+    getTabThreadStatesCpu(threadUsageParam.threadIds, threadUsageParam.leftNs, threadUsageParam.rightNs).then((result) => {
       if (result != null && result.length > 0) {
         log('getTabThreadStates result size : ' + result.length);
         let map: Map<number, any> = new Map<number, any>();
-        for (let e of result) {
-          if (map.has(e.tid)) {
-            map.get(e.tid)[`cpu${e.cpu}`] = e.wallDuration || 0;
-            map.get(e.tid)[`cpu${e.cpu}TimeStr`] = getProbablyTime(e.wallDuration || 0);
-            map.get(e.tid)[`cpu${e.cpu}Ratio`] = ((100.0 * (e.wallDuration || 0)) / (val.rightNs - val.leftNs)).toFixed(
+        for (let resultEl of result) {
+          if (map.has(resultEl.tid)) {
+            map.get(resultEl.tid)[`cpu${resultEl.cpu}`] = resultEl.wallDuration || 0;
+            map.get(resultEl.tid)[`cpu${resultEl.cpu}TimeStr`] = getProbablyTime(resultEl.wallDuration || 0);
+            map.get(resultEl.tid)[`cpu${resultEl.cpu}Ratio`] = ((100.0 * (resultEl.wallDuration || 0)) / (threadUsageParam.rightNs - threadUsageParam.leftNs)).toFixed(
               2
             );
-            map.get(e.tid)[`wallDuration`] = map.get(e.tid)[`wallDuration`] + (e.wallDuration || 0);
-            map.get(e.tid)[`wallDurationTimeStr`] = getProbablyTime(map.get(e.tid)[`wallDuration`]);
+            map.get(resultEl.tid)[`wallDuration`] = map.get(resultEl.tid)[`wallDuration`] + (resultEl.wallDuration || 0);
+            map.get(resultEl.tid)[`wallDurationTimeStr`] = getProbablyTime(map.get(resultEl.tid)[`wallDuration`]);
           } else {
-            let process = Utils.PROCESS_MAP.get(e.pid);
-            let thread = Utils.THREAD_MAP.get(e.tid);
-            let obj: any = {
-              tid: e.tid,
-              pid: e.pid,
+            let process = Utils.PROCESS_MAP.get(resultEl.pid);
+            let thread = Utils.THREAD_MAP.get(resultEl.tid);
+            let threadStatesStruct: any = {
+              tid: resultEl.tid,
+              pid: resultEl.pid,
               thread: thread || 'null',
               process: process || 'null',
-              wallDuration: e.wallDuration || 0,
-              wallDurationTimeStr: getProbablyTime(e.wallDuration || 0),
+              wallDuration: resultEl.wallDuration || 0,
+              wallDurationTimeStr: getProbablyTime(resultEl.wallDuration || 0),
             };
             for (let i = 0; i < this.cpuCount; i++) {
-              obj[`cpu${i}`] = 0;
-              obj[`cpu${i}TimeStr`] = '0';
-              obj[`cpu${i}Ratio`] = '0';
+              threadStatesStruct[`cpu${i}`] = 0;
+              threadStatesStruct[`cpu${i}TimeStr`] = '0';
+              threadStatesStruct[`cpu${i}Ratio`] = '0';
             }
-            obj[`cpu${e.cpu}`] = e.wallDuration || 0;
-            obj[`cpu${e.cpu}TimeStr`] = getProbablyTime(e.wallDuration || 0);
-            obj[`cpu${e.cpu}Ratio`] = ((100.0 * (e.wallDuration || 0)) / (val.rightNs - val.leftNs)).toFixed(2);
-            map.set(e.tid, obj);
+            threadStatesStruct[`cpu${resultEl.cpu}`] = resultEl.wallDuration || 0;
+            threadStatesStruct[`cpu${resultEl.cpu}TimeStr`] = getProbablyTime(resultEl.wallDuration || 0);
+            threadStatesStruct[`cpu${resultEl.cpu}Ratio`] = ((100.0 * (resultEl.wallDuration || 0)) / (threadUsageParam.rightNs - threadUsageParam.leftNs)).toFixed(2);
+            map.set(resultEl.tid, threadStatesStruct);
           }
         }
-        this.source = Array.from(map.values());
-        this.tbl!.recycleDataSource = this.source;
+        this.threadUsageSource = Array.from(map.values());
+        this.threadUsageTbl!.recycleDataSource = this.threadUsageSource;
       } else {
-        this.source = [];
-        this.tbl!.recycleDataSource = [];
+        this.threadUsageSource = [];
+        this.threadUsageTbl!.recycleDataSource = [];
       }
     });
   }
 
   getTableColumns() {
-    let col = `${this.pubColumns}`;
+    let threadUsageHtml = `${this.pubColumns}`;
     let cpuCount = CpuStruct.cpuCount;
-    for (let i = 0; i < cpuCount; i++) {
-      col = `${col}
-            <lit-table-column width="100px" title="cpu${i}" data-index="cpu${i}TimeStr" key="cpu${i}TimeStr"  align="flex-start" order>
+    for (let index = 0; index < cpuCount; index++) {
+      threadUsageHtml = `${threadUsageHtml}
+            <lit-table-column width="100px" title="cpu${index}" data-index="cpu${index}TimeStr" key="cpu${index}TimeStr"  align="flex-start" order>
             </lit-table-column>
-            <lit-table-column width="100px" title="%" data-index="cpu${i}Ratio" key="cpu${i}Ratio"  align="flex-start" order>
+            <lit-table-column width="100px" title="%" data-index="cpu${index}Ratio" key="cpu${index}Ratio"  align="flex-start" order>
             </lit-table-column>
             `;
     }
-    return col;
+    return threadUsageHtml;
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-thread-states');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.stackBar = this.shadowRoot?.querySelector('#stack-bar');
-    this.tbl!.addEventListener('column-click', (evt: any) => {
+    this.threadUsageTbl = this.shadowRoot?.querySelector<LitTable>('#tb-thread-states');
+    this.range = this.shadowRoot?.querySelector('#thread-usage-time-range');
+    this.stackBar = this.shadowRoot?.querySelector('#thread-usage-stack-bar');
+    this.threadUsageTbl!.addEventListener('column-click', (evt: any) => {
       this.sortByColumn(evt.detail);
     });
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.threadUsageTbl!)
   }
 
   initHtml(): string {
     return `
         <style>
+        .thread-usage-table{
+          flex-direction: row;
+          margin-bottom: 5px;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
         </style>
-        <div style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
-            <stack-bar id="stack-bar" style="flex: 1"></stack-bar>
-            <label id="time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
+        <div class="thread-usage-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
+            <stack-bar id="thread-usage-stack-bar" style="flex: 1"></stack-bar>
+            <label id="thread-usage-time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
         </div>
         <div style="overflow: auto">
             <lit-table id="tb-thread-states" style="height: auto"></lit-table>
@@ -150,33 +149,33 @@ export class TabPaneThreadUsage extends BaseElement {
         `;
   }
 
-  sortByColumn(detail: any) {
-    function compare(property: any, sort: any, type: any) {
-      return function (a: SelectionData | any, b: SelectionData | any) {
-        if (a.process == ' ' || b.process == ' ') {
+  sortByColumn(treadUsageDetail: any) {
+    function compare(property: any, treadUsageSort: any, type: any) {
+      return function (threadUsageLeftData: SelectionData | any, threadUsageRightData: SelectionData | any) {
+        if (threadUsageLeftData.process == ' ' || threadUsageRightData.process == ' ') {
           return 0;
         }
         if (type === 'number') {
-          return sort === 2
-            ? parseFloat(b[property]) - parseFloat(a[property])
-            : parseFloat(a[property]) - parseFloat(b[property]);
+          return treadUsageSort === 2
+            ? parseFloat(threadUsageRightData[property]) - parseFloat(threadUsageLeftData[property])
+            : parseFloat(threadUsageLeftData[property]) - parseFloat(threadUsageRightData[property]);
         } else {
-          if (b[property] > a[property]) {
-            return sort === 2 ? 1 : -1;
-          } else if (b[property] == a[property]) {
+          if (threadUsageRightData[property] > threadUsageLeftData[property]) {
+            return treadUsageSort === 2 ? 1 : -1;
+          } else if (threadUsageRightData[property] == threadUsageLeftData[property]) {
             return 0;
           } else {
-            return sort === 2 ? -1 : 1;
+            return treadUsageSort === 2 ? -1 : 1;
           }
         }
       };
     }
 
-    if (detail.key === 'process' || detail.key === 'thread' || (detail.key as string).includes('Ratio')) {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+    if (treadUsageDetail.key === 'process' || treadUsageDetail.key === 'thread' || (treadUsageDetail.key as string).includes('Ratio')) {
+      this.threadUsageSource.sort(compare(treadUsageDetail.key, treadUsageDetail.sort, 'string'));
     } else {
-      this.source.sort(compare((detail.key as string).replace('TimeStr', ''), detail.sort, 'number'));
+      this.threadUsageSource.sort(compare((treadUsageDetail.key as string).replace('TimeStr', ''), treadUsageDetail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.threadUsageTbl!.recycleDataSource = this.threadUsageSource;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts
index d4821ecc41b4d33295bf83237092343be109a010..6719679e0197dc30cae0a85a1a9cd4b96aa7f415 100644
--- a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts
+++ b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkCounter.ts
@@ -17,29 +17,30 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabSdkCounterData, getTabSdkCounterLeftData, queryStartTime } from '../../../../database/SqlLite.js';
-import '../../../SpFilter.js';
 import { LitTableColumn } from '../../../../../base-ui/table/lit-table-column';
 import { Utils } from '../../base/Utils.js';
 import { SpSystemTrace } from '../../../SpSystemTrace.js';
+import {TabUtil} from "./TabUtil.js";
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-sdk-counter')
 export class TabPaneSdkCounter extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
+  private tblSdkCounter: LitTable | null | undefined;
+  private sdkRange: HTMLLabelElement | null | undefined;
   private keyList: Array<string> | undefined;
   private statDataArray: any = [];
   private columnMap: any = {};
   private sqlMap: Map<number, any> = new Map<number, any>();
 
-  set data(val: SelectionParam | any) {
-    this.range!.textContent = 'Selected range: ' + ((val.rightNs - val.leftNs) / 1000000.0).toFixed(5) + ' ms';
-    this.queryDataByDB(val);
+  set data(valSdkCounter: SelectionParam | any) {
+    this.sdkRange!.textContent = 'Selected range: ' + ((valSdkCounter.rightNs - valSdkCounter.leftNs) / 1000000.0).toFixed(5) + ' ms';
+    this.queryDataByDB(valSdkCounter);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.tblSdkCounter = this.shadowRoot?.querySelector<LitTable>('#tb-counter');
+    this.sdkRange = this.shadowRoot?.querySelector('#sdk-counter-time-range');
+    this.tblSdkCounter!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -47,85 +48,79 @@ export class TabPaneSdkCounter extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.tblSdkCounter!)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
+  queryDataByDB(sdkVal: SelectionParam | any) {
     queryStartTime().then((res) => {
       let startTime = res[0].start_ts;
       this.parseJson(SpSystemTrace.SDK_CONFIG_MAP);
       let counters: Array<string> = [];
       let componentId: number = -1;
-      for (let index = 0; index < val.sdkCounterIds.length; index++) {
-        let values = val.sdkCounterIds[index].split('-');
+      for (let index = 0; index < sdkVal.sdkCounterIds.length; index++) {
+        let values = sdkVal.sdkCounterIds[index].split('-');
         let value = values[0];
         componentId = Number(values[1]);
         counters.push(value);
       }
       let sqlObj = this.sqlMap.get(componentId);
       let sql = sqlObj.TabCounterLeftData;
-      getTabSdkCounterLeftData(sql, val.leftNs + startTime, counters, componentId).then((res) => {
+      getTabSdkCounterLeftData(sql, sdkVal.leftNs + startTime, counters, componentId).then((res) => {
         let leftTime = res[res.length - 1].max_value - startTime;
         let sql = sqlObj.TabCounterData;
-        getTabSdkCounterData(sql, startTime, leftTime, val.rightNs, counters, componentId).then((item) => {
+        getTabSdkCounterData(sql, startTime, leftTime, sdkVal.rightNs, counters, componentId).then((counterItem) => {
           this.keyList = [];
-          this.tbl!.innerHTML = '';
+          this.tblSdkCounter!.innerHTML = '';
           this.statDataArray = [];
-          if (item.length != null && item.length > 0) {
-            for (let index = 0; index < item.length; index++) {
-              const dataResult = item[index];
+          if (counterItem.length != null && counterItem.length > 0) {
+            for (let counterItemIndex = 0; counterItemIndex < counterItem.length; counterItemIndex++) {
+              const dataResult = counterItem[counterItemIndex];
               let keys = Object.keys(dataResult);
               // @ts-ignore
               let values = Object.values(dataResult);
-              let jsonText = '{';
-              for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
-                let key = keys[keyIndex];
-                if (this.keyList.indexOf(key) <= -1) {
-                  this.keyList.push(key);
+              let counterJsonText = '{';
+              for (let counterKeyIndex = 0; counterKeyIndex < keys.length; counterKeyIndex++) {
+                let counterKey = keys[counterKeyIndex];
+                if (this.keyList.indexOf(counterKey) <= -1) {
+                  this.keyList.push(counterKey);
                 }
-                let value = values[keyIndex];
-                if (this.columnMap[key] == 'TimeStamp') {
-                  value = Utils.getTimeString(Number(value));
-                } else if (this.columnMap[key] == 'ClockTime') {
-                  value = Utils.getTimeStampHMS(Number(value));
-                } else if (this.columnMap[key] == 'RangTime') {
-                  value = Utils.getDurString(Number(value));
-                } else if (this.columnMap[key] == 'PercentType') {
-                  value = value + '%';
-                } else if (this.columnMap[key] == 'CurrencyType') {
+                let counterValue = values[counterKeyIndex];
+                if (this.columnMap[counterKey] == 'TimeStamp') {
+                  counterValue = Utils.getTimeString(Number(counterValue));
+                } else if (this.columnMap[counterKey] == 'ClockTime') {
+                  counterValue = Utils.getTimeStampHMS(Number(counterValue));
+                } else if (this.columnMap[counterKey] == 'RangTime') {
+                  counterValue = Utils.getDurString(Number(counterValue));
+                } else if (this.columnMap[counterKey] == 'PercentType') {
+                  counterValue = counterValue + '%';
+                } else if (this.columnMap[counterKey] == 'CurrencyType') {
                   // @ts-ignore
-                  value = value.toString().replace(/\B(?=(\d{3})+$)/g, ',');
+                  counterValue = counterValue.toString().replace(/\B(?=(\d{3})+$)/g, ',');
                 }
-                if (typeof value == 'string') {
-                  value = value.replace(/</gi, '&lt;').replace(/>/gi, '&gt;');
+                if (typeof counterValue == 'string') {
+                  counterValue = counterValue.replace(/</gi, '&lt;').replace(/>/gi, '&gt;');
                 }
-                jsonText += '"' + key + '"' + ': ' + '"' + value + '"';
-                if (keyIndex != keys.length - 1) {
-                  jsonText += ',';
+                counterJsonText += '"' + counterKey + '"' + ': ' + '"' + counterValue + '"';
+                if (counterKeyIndex != keys.length - 1) {
+                  counterJsonText += ',';
                 } else {
-                  jsonText += '}';
+                  counterJsonText += '}';
                 }
               }
-              this.statDataArray.push(JSON.parse(jsonText));
+              this.statDataArray.push(JSON.parse(counterJsonText));
             }
-            this.tbl!.recycleDataSource = this.statDataArray;
+            this.tblSdkCounter!.recycleDataSource = this.statDataArray;
           } else {
-            this.tbl!.recycleDataSource = [];
+            this.tblSdkCounter!.recycleDataSource = [];
           }
           this.initDataElement();
 
           setTimeout(() => {
-            this.tbl!.recycleDataSource = this.statDataArray;
+            this.tblSdkCounter!.recycleDataSource = this.statDataArray;
             new ResizeObserver(() => {
               if (this.parentElement?.clientHeight != 0) {
-                this.tbl!.style.height = '100%';
-                this.tbl!.reMeauseHeight();
+                this.tblSdkCounter!.style.height = '100%';
+                this.tblSdkCounter!.reMeauseHeight();
               }
             }).observe(this.parentElement!);
           }, 200);
@@ -134,28 +129,28 @@ export class TabPaneSdkCounter extends BaseElement {
     });
   }
 
-  parseJson(map: Map<number, string>): string {
-    let keys = map.keys();
+  parseJson(configMap: Map<number, string>): string {
+    let keys = configMap.keys();
     for (let key of keys) {
-      let configObj: any = map.get(key);
-      if (configObj != undefined) {
-        let configStr = configObj.jsonConfig;
-        let json = JSON.parse(configStr);
-        let tableConfig = json.tableConfig;
-        if (tableConfig != null) {
-          let showTypes = tableConfig.showType;
-          for (let i = 0; i < showTypes.length; i++) {
-            let showType = showTypes[i];
-            let type = this.getTableType(showType);
+      let counterConfigObject: any = configMap.get(key);
+      if (counterConfigObject != undefined) {
+        let configStr = counterConfigObject.jsonConfig;
+        let configJson = JSON.parse(configStr);
+        let counterTableConfig = configJson.tableConfig;
+        if (counterTableConfig != null) {
+          let showTypes = counterTableConfig.showType;
+          for (let counterTypesIndex = 0; counterTypesIndex < showTypes.length; counterTypesIndex++) {
+            let showType = showTypes[counterTypesIndex];
+            let type = TabUtil.getTableType(showType);
             if (type == 'counter') {
               let selectSql = 'select ';
-              for (let j = 0; j < showType.columns.length; j++) {
-                this.columnMap[showType.columns[j].column] = showType.columns[j].displayName;
-                if (showType.columns[j].showType.indexOf(3) > -1) {
-                  selectSql += showType.columns[j].column + ',';
+              for (let counterColumnsIndex = 0; counterColumnsIndex < showType.columns.length; counterColumnsIndex++) {
+                this.columnMap[showType.columns[counterColumnsIndex].column] = showType.columns[counterColumnsIndex].displayName;
+                if (showType.columns[counterColumnsIndex].showType.indexOf(3) > -1) {
+                  selectSql += showType.columns[counterColumnsIndex].column + ',';
                 }
               }
-              let leftSql =
+              let counterLeftSql =
                 'select max(ts) as max_value,counter_id from ' +
                 showType.tableName +
                 ' where ts <= $leftNs and counter_id in' +
@@ -167,7 +162,7 @@ export class TabPaneSdkCounter extends BaseElement {
                 ' where counter_id in ($counters) and (ts - $startTime) between $leftNs and $rightNs';
               this.sqlMap.set(key, {
                 TabCounterData: tabCounterDataSql,
-                TabCounterLeftData: leftSql,
+                TabCounterLeftData: counterLeftSql,
               });
             }
           }
@@ -177,34 +172,17 @@ export class TabPaneSdkCounter extends BaseElement {
     return '';
   }
 
-  private getTableType(showType: any) {
-    let columns = showType.columns;
-    for (let i = 0; i < columns.length; i++) {
-      let column = columns[i];
-      let showType = column.showType;
-      if (showType != null) {
-        if (showType.indexOf(1) != -1) {
-          return 'counter';
-        }
-        if (showType.indexOf(2) != -1) {
-          return 'slice';
-        }
-      }
-    }
-    return '';
-  }
-
   initDataElement() {
     if (this.keyList) {
-      this.keyList.forEach((item) => {
-        let htmlElement = document.createElement('lit-table-column') as LitTableColumn;
-        htmlElement.setAttribute('title', item);
-        htmlElement.setAttribute('data-index', item);
-        htmlElement.setAttribute('key', item);
-        htmlElement.setAttribute('align', 'flex-start');
-        htmlElement.setAttribute('width', '1fr');
-        htmlElement.setAttribute('order', '');
-        this.tbl!.appendChild(htmlElement);
+      this.keyList.forEach((sdkCounterItemKey) => {
+        let sdkCounterEl = document.createElement('lit-table-column') as LitTableColumn;
+        sdkCounterEl.setAttribute('title', sdkCounterItemKey);
+        sdkCounterEl.setAttribute('data-index', sdkCounterItemKey);
+        sdkCounterEl.setAttribute('key', sdkCounterItemKey);
+        sdkCounterEl.setAttribute('align', 'flex-start');
+        sdkCounterEl.setAttribute('width', '1fr');
+        sdkCounterEl.setAttribute('order', '');
+        this.tblSdkCounter!.appendChild(sdkCounterEl);
       });
     }
   }
@@ -212,51 +190,55 @@ export class TabPaneSdkCounter extends BaseElement {
   initHtml(): string {
     return `
 <style>
+.sdk-counter-table{
+    display: flex;
+    margin-bottom: 5px;
+}
 :host{
+    padding: 10px 10px;
     display: flex;
     flex-direction: column;
-    padding: 10px 10px;
 }
 </style>
-<div style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
-            <stack-bar id="stack-bar" style="flex: 1"></stack-bar>
-            <label id="time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
+<div class="sdk-counter-table" style="height: 20px;align-items: center;flex-direction: row;">
+            <stack-bar id="sdk-counter-stack-bar" style="flex: 1"></stack-bar>
+            <label id="sdk-counter-time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
         </div>
-<lit-table id="tb-counter" style="height: auto">
+<lit-table id="tb-counter" class="sdk-counter-tbl" style="height: auto">
 </lit-table>
         `;
   }
 
-  sortByColumn(detail: any) {
+  sortByColumn(counterDetail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+    function compare(property, countreSort, type) {
+      return function (aSdkCounter: SelectionData, bSdkCounter: SelectionData) {
+        if (aSdkCounter.process == ' ' || bSdkCounter.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return countreSort === 2 ? parseFloat(bSdkCounter[property]) - parseFloat(aSdkCounter[property]) : parseFloat(aSdkCounter[property]) - parseFloat(bSdkCounter[property]);
         }
         // @ts-ignore
-        if (b[property] > a[property]) {
-          return sort === 2 ? 1 : -1;
+        if (bSdkCounter[property] > aSdkCounter[property]) {
+          return countreSort === 2 ? 1 : -1;
         } else {
           // @ts-ignore
-          if (b[property] == a[property]) {
+          if (bSdkCounter[property] == aSdkCounter[property]) {
             return 0;
           } else {
-            return sort === 2 ? -1 : 1;
+            return countreSort === 2 ? -1 : 1;
           }
         }
       };
     }
 
-    if (detail.key.indexOf('name') != -1) {
-      this.statDataArray.sort(compare(detail.key, detail.sort, 'string'));
+    if (counterDetail.key.indexOf('name') != -1) {
+      this.statDataArray.sort(compare(counterDetail.key, counterDetail.sort, 'string'));
     } else {
-      this.statDataArray.sort(compare(detail.key, detail.sort, 'number'));
+      this.statDataArray.sort(compare(counterDetail.key, counterDetail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.statDataArray;
+    this.tblSdkCounter!.recycleDataSource = this.statDataArray;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts
index 305519d35956c4ebc7accf5e6e3b22c6882e7502..4c609cd200e5e8c44b4802be42d6451a13e82437 100644
--- a/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts
+++ b/ide/src/trace/component/trace/sheet/sdk/TabPaneSdkSlice.ts
@@ -17,29 +17,30 @@ import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionData, SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabSdkSliceData, queryStartTime, queryTotalTime } from '../../../../database/SqlLite.js';
-import '../../../SpFilter.js';
 import { LitTableColumn } from '../../../../../base-ui/table/lit-table-column.js';
 import { Utils } from '../../base/Utils.js';
 import { SpSystemTrace } from '../../../SpSystemTrace.js';
+import {TabUtil} from "./TabUtil.js";
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-sdk-slice')
 export class TabPaneSdkSlice extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private range: HTMLLabelElement | null | undefined;
+  private tblSdkSlice: LitTable | null | undefined;
+  private sdkSliceRange: HTMLLabelElement | null | undefined;
   private keyList: Array<string> | undefined;
   private statDataArray: any = [];
   private columnMap: any = {};
   private sqlMap: Map<number, string> = new Map<number, string>();
 
-  set data(val: SelectionParam | any) {
-    this.range!.textContent = 'Selected range: ' + ((val.rightNs - val.leftNs) / 1000000.0).toFixed(5) + ' ms';
-    this.queryDataByDB(val);
+  set data(valSdkSlice: SelectionParam | any) {
+    this.sdkSliceRange!.textContent = 'Selected range: ' + ((valSdkSlice.rightNs - valSdkSlice.leftNs) / 1000000.0).toFixed(5) + ' ms';
+    this.queryDataByDB(valSdkSlice);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-sdk-slice');
-    this.range = this.shadowRoot?.querySelector('#time-range');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.tblSdkSlice = this.shadowRoot?.querySelector<LitTable>('#tb-sdk-slice');
+    this.sdkSliceRange = this.shadowRoot?.querySelector('#sdk-slice-time-range');
+    this.tblSdkSlice!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -47,23 +48,17 @@ export class TabPaneSdkSlice extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.tblSdkSlice!)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
+  queryDataByDB(sdkSliceVal: SelectionParam | any) {
     queryTotalTime().then((res) => {
       let startTime = res[0].recordStartNS;
       let totalTime = res[0].total;
       let componentId: number = -1;
       let slices: Array<string> = [];
-      for (let index = 0; index < val.sdkSliceIds.length; index++) {
-        let values = val.sdkSliceIds[index].split('-');
+      for (let index = 0; index < sdkSliceVal.sdkSliceIds.length; index++) {
+        let values = sdkSliceVal.sdkSliceIds[index].split('-');
         let value = values[0];
         componentId = Number(values[1]);
         slices.push(value);
@@ -73,67 +68,67 @@ export class TabPaneSdkSlice extends BaseElement {
       if (sql == undefined) {
         return;
       }
-      getTabSdkSliceData(sql, startTime, val.leftNs, val.rightNs, slices, componentId).then((item) => {
+      getTabSdkSliceData(sql, startTime, sdkSliceVal.leftNs, sdkSliceVal.rightNs, slices, componentId).then((sliceItem) => {
         this.keyList = [];
-        this.tbl!.innerHTML = '';
+        this.tblSdkSlice!.innerHTML = '';
         this.statDataArray = [];
-        if (item.length != null && item.length > 0) {
-          for (let index = 0; index < item.length; index++) {
-            const dataResult = item[index];
+        if (sliceItem.length != null && sliceItem.length > 0) {
+          for (let sliceItemIndex = 0; sliceItemIndex < sliceItem.length; sliceItemIndex++) {
+            const dataResult = sliceItem[sliceItemIndex];
             let keys = Object.keys(dataResult);
             // @ts-ignore
             let values = Object.values(dataResult);
-            let jsonText = '{';
-            for (let keyIndex = 0; keyIndex < keys.length; keyIndex++) {
-              let key = keys[keyIndex];
-              if (this.keyList.indexOf(key) <= -1) {
-                this.keyList.push(key);
+            let sliceJsonText = '{';
+            for (let sliceKeyIndex = 0; sliceKeyIndex < keys.length; sliceKeyIndex++) {
+              let sliceKey = keys[sliceKeyIndex];
+              if (this.keyList.indexOf(sliceKey) <= -1) {
+                this.keyList.push(sliceKey);
               }
-              let value = values[keyIndex];
-              if (this.columnMap[key] == 'TimeStamp') {
-                value = Utils.getTimeString(Number(value));
-              } else if (this.columnMap[key] == 'ClockTime') {
-                value = Utils.getTimeStampHMS(Number(value));
-              } else if (this.columnMap[key] == 'RangTime') {
-                value = Utils.getDurString(Number(value));
-              } else if (this.columnMap[key] == 'PercentType') {
-                value = value + '%';
-              } else if (this.columnMap[key] == 'CurrencyType') {
+              let sliceValue = values[sliceKeyIndex];
+              if (this.columnMap[sliceKey] == 'TimeStamp') {
+                sliceValue = Utils.getTimeString(Number(sliceValue));
+              } else if (this.columnMap[sliceKey] == 'ClockTime') {
+                sliceValue = Utils.getTimeStampHMS(Number(sliceValue));
+              } else if (this.columnMap[sliceKey] == 'RangTime') {
+                sliceValue = Utils.getDurString(Number(sliceValue));
+              } else if (this.columnMap[sliceKey] == 'PercentType') {
+                sliceValue = sliceValue + '%';
+              } else if (this.columnMap[sliceKey] == 'CurrencyType') {
                 // @ts-ignore
-                value = value.toString().replace(/\B(?=(\d{3})+$)/g, ',');
-              } else if (this.columnMap[key] == 'FIXED') {
-                value = value.toFixed(2);
+                sliceValue = sliceValue.toString().replace(/\B(?=(\d{3})+$)/g, ',');
+              } else if (this.columnMap[sliceKey] == 'FIXED') {
+                sliceValue = sliceValue.toFixed(2);
               }
-              if (typeof value == 'string') {
-                value = value.replace(/</gi, '&lt;').replace(/>/gi, '&gt;');
+              if (typeof sliceValue == 'string') {
+                sliceValue = sliceValue.replace(/</gi, '&lt;').replace(/>/gi, '&gt;');
               }
-              jsonText += '"' + key + '"' + ': ' + '"' + value + '"';
-              if (keyIndex != keys.length - 1) {
-                jsonText += ',';
+              sliceJsonText += '"' + sliceKey + '"' + ': ' + '"' + sliceValue + '"';
+              if (sliceKeyIndex != keys.length - 1) {
+                sliceJsonText += ',';
               } else {
-                jsonText += '}';
+                sliceJsonText += '}';
               }
             }
-            let data = JSON.parse(jsonText);
-            if (data.start_ts != null && data.end_ts != null && data.start_ts > data.end_ts && data.end_ts == 0) {
-              data.end_ts = totalTime;
+            let sliceParseData = JSON.parse(sliceJsonText);
+            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(val.leftNs, val.rightNs, data.start_ts, data.end_ts)) {
-              this.statDataArray.push(data);
+            if (this.isDateIntersection(sdkSliceVal.leftNs, sdkSliceVal.rightNs, sliceParseData.start_ts, sliceParseData.end_ts)) {
+              this.statDataArray.push(sliceParseData);
             }
           }
-          this.tbl!.recycleDataSource = this.statDataArray;
+          this.tblSdkSlice!.recycleDataSource = this.statDataArray;
         } else {
-          this.tbl!.recycleDataSource = [];
+          this.tblSdkSlice!.recycleDataSource = [];
         }
         this.initDataElement();
 
         setTimeout(() => {
-          this.tbl!.recycleDataSource = this.statDataArray;
+          this.tblSdkSlice!.recycleDataSource = this.statDataArray;
           new ResizeObserver(() => {
             if (this.parentElement?.clientHeight != 0) {
-              this.tbl!.style.height = '100%';
-              this.tbl!.reMeauseHeight();
+              this.tblSdkSlice!.style.height = '100%';
+              this.tblSdkSlice!.reMeauseHeight();
             }
           }).observe(this.parentElement!);
         }, 200);
@@ -157,39 +152,39 @@ export class TabPaneSdkSlice extends BaseElement {
   parseJson(map: Map<number, string>): string {
     let keys = map.keys();
     for (let key of keys) {
-      let configObj: any = map.get(key);
-      if (configObj != undefined) {
-        let configStr = configObj.jsonConfig;
+      let sliceConfigObj: any = map.get(key);
+      if (sliceConfigObj != undefined) {
+        let configStr = sliceConfigObj.jsonConfig;
         let json = JSON.parse(configStr);
-        let tableConfig = json.tableConfig;
-        if (tableConfig != null) {
-          let showTypes = tableConfig.showType;
-          for (let i = 0; i < showTypes.length; i++) {
-            let showType = showTypes[i];
+        let sliceTableConfig = json.tableConfig;
+        if (sliceTableConfig != null) {
+          let showTypes = sliceTableConfig.showType;
+          for (let sliceTypesIndex = 0; sliceTypesIndex < showTypes.length; sliceTypesIndex++) {
+            let showType = showTypes[sliceTypesIndex];
             let innerTableName = this.getInnerTableName(showType);
-            let type = this.getTableType(showType);
+            let type = TabUtil.getTableType(showType);
             if (type == 'slice') {
-              let selectSql = 'select ';
-              for (let j = 0; j < showType.columns.length; j++) {
-                this.columnMap[showType.columns[j].column] = showType.columns[j].displayName;
-                if (showType.columns[j].showType.indexOf(3) > -1) {
-                  switch (showType.columns[j].column) {
+              let sliceSelectSql = 'select ';
+              for (let sliceColumnsIndex = 0; sliceColumnsIndex < showType.columns.length; sliceColumnsIndex++) {
+                this.columnMap[showType.columns[sliceColumnsIndex].column] = showType.columns[sliceColumnsIndex].displayName;
+                if (showType.columns[sliceColumnsIndex].showType.indexOf(3) > -1) {
+                  switch (showType.columns[sliceColumnsIndex].column) {
                     case 'slice_id':
-                      selectSql += 'a.slice_id,b.slice_name,';
+                      sliceSelectSql += 'a.slice_id,b.slice_name,';
                       break;
                     case 'start_ts':
-                      selectSql += '(a.start_ts - $startTime) as start_ts,';
+                      sliceSelectSql += '(a.start_ts - $startTime) as start_ts,';
                       break;
                     case 'end_ts':
-                      selectSql += '(a.end_ts - $startTime) as end_ts,';
+                      sliceSelectSql += '(a.end_ts - $startTime) as end_ts,';
                       break;
                     default:
-                      selectSql += 'a.' + showType.columns[j].column + ',';
+                      sliceSelectSql += 'a.' + showType.columns[sliceColumnsIndex].column + ',';
                   }
                 }
               }
-              let sql =
-                selectSql.substring(0, selectSql.length - 1) +
+              let sliceSql =
+                sliceSelectSql.substring(0, sliceSelectSql.length - 1) +
                 ' from ' +
                 showType.tableName +
                 '   as a,' +
@@ -200,7 +195,7 @@ export class TabPaneSdkSlice extends BaseElement {
                 '  and ((a.start_ts - $startTime) >= $leftNs and (a.end_ts - $startTime) <= $rightNs ' +
                 'or (a.start_ts - $startTime) <= $leftNs and $leftNs <= (a.end_ts - $startTime) ' +
                 'or (a.start_ts - $startTime) <= $rightNs and $rightNs <= (a.end_ts - $startTime))';
-              this.sqlMap.set(key, sql);
+              this.sqlMap.set(key, sliceSql);
             }
           }
         }
@@ -211,19 +206,19 @@ export class TabPaneSdkSlice extends BaseElement {
 
   initDataElement() {
     if (this.keyList) {
-      this.keyList.forEach((item) => {
-        let htmlElement = document.createElement('lit-table-column') as LitTableColumn;
-        htmlElement.setAttribute('title', item);
-        htmlElement.setAttribute('data-index', item);
-        htmlElement.setAttribute('key', item);
-        htmlElement.setAttribute('align', 'flex-start');
-        if (item == 'slice_id') {
-          htmlElement.setAttribute('width', '0.5fr');
+      this.keyList.forEach((sdkSliceItemKey) => {
+        let sdkSliceEl = document.createElement('lit-table-column') as LitTableColumn;
+        sdkSliceEl.setAttribute('title', sdkSliceItemKey);
+        sdkSliceEl.setAttribute('data-index', sdkSliceItemKey);
+        sdkSliceEl.setAttribute('key', sdkSliceItemKey);
+        sdkSliceEl.setAttribute('align', 'flex-start');
+        if (sdkSliceItemKey == 'slice_id') {
+          sdkSliceEl.setAttribute('width', '0.5fr');
         } else {
-          htmlElement.setAttribute('width', '1fr');
+          sdkSliceEl.setAttribute('width', '1fr');
         }
-        htmlElement.setAttribute('order', '');
-        this.tbl!.appendChild(htmlElement);
+        sdkSliceEl.setAttribute('order', '');
+        this.tblSdkSlice!.appendChild(sdkSliceEl);
       });
     }
   }
@@ -231,51 +226,55 @@ export class TabPaneSdkSlice extends BaseElement {
   initHtml(): string {
     return `
 <style>
+.sdk-slice-table{
+    height: 20px;
+    margin-bottom: 5px;
+}
 :host{
-    display: flex;
-    flex-direction: column;
     padding: 10px 10px;
+    flex-direction: column;
+    display: flex;
 }
 </style>
-<div style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
-            <stack-bar id="stack-bar" style="flex: 1"></stack-bar>
-            <label id="time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
+<div class="sdk-slice-content" class="sdk-slice-table" style="display: flex;align-items: center;flex-direction: row;">
+            <stack-bar id="sdk-slice-stack-bar" style="flex: 1"></stack-bar>
+            <label id="sdk-slice-time-range"  style="width: auto;text-align: end;font-size: 10pt;">Selected range:0.0 ms</label>
         </div>
-<lit-table id="tb-sdk-slice" style="height: auto">
+<lit-table id="tb-sdk-slice" class="sdk-slice-tbl" style="height: auto">
 </lit-table>
         `;
   }
 
-  sortByColumn(detail: any) {
+  sortByColumn(sliceDetail: any) {
     // @ts-ignore
-    function compare(property, sort, type) {
-      return function (a: SelectionData, b: SelectionData) {
-        if (a.process == ' ' || b.process == ' ') {
+    function compare(property, sliceSort, type) {
+      return function (aSdkSlice: SelectionData, bSdkSlice: SelectionData) {
+        if (aSdkSlice.process == ' ' || bSdkSlice.process == ' ') {
           return 0;
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sliceSort === 2 ? parseFloat(bSdkSlice[property]) - parseFloat(aSdkSlice[property]) : parseFloat(aSdkSlice[property]) - parseFloat(bSdkSlice[property]);
         }
         // @ts-ignore
-        if (b[property] > a[property]) {
-          return sort === 2 ? 1 : -1;
+        if (bSdkSlice[property] > aSdkSlice[property]) {
+          return sliceSort === 2 ? 1 : -1;
         } else {
           // @ts-ignore
-          if (b[property] == a[property]) {
+          if (bSdkSlice[property] == aSdkSlice[property]) {
             return 0;
           } else {
-            return sort === 2 ? -1 : 1;
+            return sliceSort === 2 ? -1 : 1;
           }
         }
       };
     }
-    if (detail.key.indexOf('name') != -1) {
-      this.statDataArray.sort(compare(detail.key, detail.sort, 'string'));
+    if (sliceDetail.key.indexOf('name') != -1) {
+      this.statDataArray.sort(compare(sliceDetail.key, sliceDetail.sort, 'string'));
     } else {
-      this.statDataArray.sort(compare(detail.key, detail.sort, 'number'));
+      this.statDataArray.sort(compare(sliceDetail.key, sliceDetail.sort, 'number'));
     }
-    this.tbl!.recycleDataSource = this.statDataArray;
+    this.tblSdkSlice!.recycleDataSource = this.statDataArray;
   }
 
   private getInnerTableName(showType: any) {
@@ -285,20 +284,4 @@ export class TabPaneSdkSlice extends BaseElement {
     }
     return '';
   }
-  private getTableType(showType: any) {
-    let columns = showType.columns;
-    for (let i = 0; i < columns.length; i++) {
-      let column = columns[i];
-      let showType = column.showType;
-      if (showType != null) {
-        if (showType.indexOf(1) != -1) {
-          return 'counter';
-        }
-        if (showType.indexOf(2) != -1) {
-          return 'slice';
-        }
-      }
-    }
-    return '';
-  }
 }
diff --git a/ide/src/trace/bean/SmapsShowStruct.ts b/ide/src/trace/component/trace/sheet/sdk/TabUtil.ts
similarity index 58%
rename from ide/src/trace/bean/SmapsShowStruct.ts
rename to ide/src/trace/component/trace/sheet/sdk/TabUtil.ts
index f7882fef3faf1edffc8ec3fc2983d85e560868ca..969916df60b7b899922df623b5d945bfb1681c9c 100644
--- a/ide/src/trace/bean/SmapsShowStruct.ts
+++ b/ide/src/trace/component/trace/sheet/sdk/TabUtil.ts
@@ -13,12 +13,22 @@
  * limitations under the License.
  */
 
-import { BaseStruct } from './BaseStruct.js';
+export class TabUtil  {
 
-export class SmapsShowStruct extends BaseStruct {
-  static hoverStruct: SmapsShowStruct | undefined;
-  static selectStruct: SmapsShowStruct | undefined;
-  value: number | undefined;
-  startNS: number | undefined;
-  dur: number | undefined;
+  static getTableType(showType: any) {
+    let columns = showType.columns;
+    for (let i = 0; i < columns.length; i++) {
+      let column = columns[i];
+      let showType = column.showType;
+      if (showType != null) {
+        if (showType.indexOf(1) != -1) {
+          return 'counter';
+        }
+        if (showType.indexOf(2) != -1) {
+          return 'slice';
+        }
+      }
+    }
+    return '';
+  }
 }
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
index 728a8e7a83cd5ddd4e00e5afd010c440e0c6862c..046112202c0a8072e1b0c1e906e28a3b0030e3ad 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
@@ -20,22 +20,23 @@ import { getTabSmapsData } from '../../../../database/SqlLite.js';
 import { Utils } from '../../base/Utils.js';
 import { log } from '../../../../../log/Log.js';
 import { Smaps } from '../../../../bean/SmapsStruct.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-smaps-record')
 export class TabPaneSmapsRecord extends BaseElement {
-  private tbl: LitTable | null | undefined;
-  private source: Array<Smaps> = [];
-  private queryResult: Array<Smaps> = [];
+  private tblSmapsRecord: LitTable | null | undefined;
+  private sourceSmapsRecord: Array<Smaps> = [];
+  private querySmapsRecordResult: Array<Smaps> = [];
 
-  set data(val: SelectionParam | any) {
+  set data(valSmapsRecord: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.tblSmapsRecord ?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(valSmapsRecord);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-smaps-record');
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.tblSmapsRecord  = this.shadowRoot?.querySelector<LitTable>('#tb-smaps-record');
+    this.tblSmapsRecord !.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail);
     });
@@ -43,17 +44,11 @@ export class TabPaneSmapsRecord extends BaseElement {
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!,this.tblSmapsRecord!)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
-    getTabSmapsData(val.leftNs, val.rightNs).then((result) => {
+  queryDataByDB(srVal: SelectionParam | any) {
+    getTabSmapsData(srVal.leftNs, srVal.rightNs).then((result) => {
       log('getTabSmapsData size :' + result.length);
       if (result.length != null && result.length > 0) {
         for (const smaps of result) {
@@ -84,13 +79,13 @@ export class TabPaneSmapsRecord extends BaseElement {
             smaps.resideStr = resideS + '%';
           }
         }
-        this.source = result;
-        this.queryResult = result;
-        this.tbl!.recycleDataSource = this.source;
+        this.sourceSmapsRecord = result;
+        this.querySmapsRecordResult = result;
+        this.tblSmapsRecord !.recycleDataSource = this.sourceSmapsRecord;
       } else {
-        this.source = [];
-        this.queryResult = [];
-        this.tbl!.recycleDataSource = [];
+        this.sourceSmapsRecord = [];
+        this.querySmapsRecordResult = [];
+        this.tblSmapsRecord !.recycleDataSource = [];
       }
     });
   }
@@ -98,14 +93,16 @@ export class TabPaneSmapsRecord extends BaseElement {
   initHtml(): string {
     return `
         <style>
+        .smaps-record-label{
+            height: auto;
+        }
         :host{
+            padding: 10px 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px;
         }
-
         </style>
-        <lit-table id="tb-smaps-record" style="height: auto">
+        <lit-table id="tb-smaps-record" class="smaps-record-label">
             <lit-table-column order width="80px" title="Type" data-index="type" key="type" align="flex-start" >
             </lit-table-column>
             <lit-table-column order width="250px" title="Address Range" data-index="address" key="address" align="flex-start" >
@@ -133,17 +130,17 @@ export class TabPaneSmapsRecord extends BaseElement {
   sortByColumn(detail: any) {
     // @ts-ignore
     function compare(property, sort, type) {
-      return function (a: Smaps, b: Smaps) {
+      return function (aSmapsRecord: Smaps, bSmapsRecord: Smaps) {
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[property]) - parseFloat(a[property]) : parseFloat(a[property]) - parseFloat(b[property]);
+          return sort === 2 ? parseFloat(bSmapsRecord[property]) - parseFloat(aSmapsRecord[property]) : parseFloat(aSmapsRecord[property]) - parseFloat(bSmapsRecord[property]);
         } else {
           // @ts-ignore
-          if (b[property] > a[property]) {
+          if (bSmapsRecord[property] > aSmapsRecord[property]) {
             return sort === 2 ? 1 : -1;
           } else {
             // @ts-ignore
-            if (b[property] == a[property]) {
+            if (bSmapsRecord[property] == aSmapsRecord[property]) {
               return 0;
             } else {
               return sort === 2 ? -1 : 1;
@@ -161,10 +158,10 @@ export class TabPaneSmapsRecord extends BaseElement {
       detail.key === 'resideStr'
     ) {
       let key = detail.key.substring(0, detail.key.indexOf('Str'));
-      this.source.sort(compare(key, detail.sort, 'number'));
+      this.sourceSmapsRecord.sort(compare(key, detail.sort, 'number'));
     } else {
-      this.source.sort(compare(detail.key, detail.sort, 'string'));
+      this.sourceSmapsRecord.sort(compare(detail.key, detail.sort, 'string'));
     }
-    this.tbl!.recycleDataSource = this.source;
+    this.tblSmapsRecord !.recycleDataSource = this.sourceSmapsRecord;
   }
 }
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
index bab8b756a3a9a8afe9a6df1b0fecb8b1b826f8c1..21badd39a95afc967cbbdb7a20b5e6ac04b7a930 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
@@ -19,41 +19,36 @@ import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { getTabSmapsData, getTabSmapsMaxRss } from '../../../../database/SqlLite.js';
 import { Smaps, SmapsTreeObj } from '../../../../bean/SmapsStruct.js';
 import { Utils } from '../../base/Utils.js';
+import { resizeObserver } from "../SheetUtils.js";
 
 @element('tabpane-smaps-statistics')
 export class TabPaneSmapsStatistics extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private tblSmapsStatistics: LitTable | null | undefined;
 
-  set data(val: SelectionParam | any) {
+  set data(valSmapsStatistics: SelectionParam | any) {
     // @ts-ignore
-    this.tbl?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-    this.queryDataByDB(val);
+    this.tblSmapsStatistics?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
+    this.queryDataByDB(valSmapsStatistics);
   }
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#tb-smaps-statistics');
+    this.tblSmapsStatistics = this.shadowRoot?.querySelector<LitTable>('#tb-smaps-statistics');
   }
 
   connectedCallback() {
     super.connectedCallback();
-    new ResizeObserver((entries) => {
-      if (this.parentElement?.clientHeight != 0) {
-        // @ts-ignore
-        this.tbl?.shadowRoot.querySelector('.table').style.height = this.parentElement.clientHeight - 45 + 'px';
-        this.tbl?.reMeauseHeight();
-      }
-    }).observe(this.parentElement!);
+    resizeObserver(this.parentElement!, this.tblSmapsStatistics!)
   }
 
-  queryDataByDB(val: SelectionParam | any) {
-    getTabSmapsMaxRss(val.leftNs, val.rightNs).then((maxRes) => {
+  queryDataByDB(smapsVal: SelectionParam | any) {
+    getTabSmapsMaxRss(smapsVal.leftNs, smapsVal.rightNs).then((maxRes) => {
       let sumRss = maxRes[0].max_value;
       let allTree: SmapsTreeObj = new SmapsTreeObj('All', '', '*All*');
       let dataTree: SmapsTreeObj = new SmapsTreeObj('DATA', '', 'DATA');
       let textTree: SmapsTreeObj = new SmapsTreeObj('TEXT', '', 'TEXT');
       let constTree: SmapsTreeObj = new SmapsTreeObj('CONST', '', 'CONST');
       let otherTree: SmapsTreeObj = new SmapsTreeObj('OTHER', '', 'OTHER');
-      getTabSmapsData(val.leftNs, val.rightNs).then((result) => {
+      getTabSmapsData(smapsVal.leftNs, smapsVal.rightNs).then((result) => {
         if (result.length != null && result.length > 0) {
           for (let id = 0; id < result.length; id++) {
             let smaps = result[id];
@@ -84,9 +79,9 @@ export class TabPaneSmapsStatistics extends BaseElement {
               this.handleSmapsTreeObj(allTree, sumRss);
             }
           }
-          this.tbl!.recycleDataSource = [allTree, dataTree, textTree, constTree, otherTree];
+          this.tblSmapsStatistics!.recycleDataSource = [allTree, dataTree, textTree, constTree, otherTree];
         } else {
-          this.tbl!.recycleDataSource = [];
+          this.tblSmapsStatistics!.recycleDataSource = [];
         }
       });
     });
@@ -115,22 +110,22 @@ export class TabPaneSmapsStatistics extends BaseElement {
 
   private handleAllDataTree(smaps: Smaps, id: number, parentId: string, dataTree: SmapsTreeObj, sumRss: number) {
     let type = smaps.type;
-    let obj = new SmapsTreeObj(id + '', parentId, type);
-    obj.path = smaps.path;
-    obj.rss = smaps.rss;
-    obj.rsspro = this.calculatePercentage(smaps.rss, sumRss);
-    obj.rssproStr = obj.rsspro.toFixed(2) + '%';
-    obj.rssStr = Utils.getBinaryByteWithUnit(smaps.rss * 1024);
-    obj.dirty = smaps.dirty;
-    obj.dirtyStr = Utils.getBinaryByteWithUnit(smaps.dirty * 1024);
-    obj.swapper = smaps.swapper;
-    obj.swapperStr = Utils.getBinaryByteWithUnit(smaps.swapper * 1024);
-    obj.size = smaps.size;
-    obj.sizeStr = Utils.getBinaryByteWithUnit(smaps.size * 1024);
-    obj.pss = smaps.pss;
-    obj.pssStr = Utils.getBinaryByteWithUnit(smaps.pss * 1024);
-    obj.respro = smaps.reside;
-    obj.resproStr = smaps.reside.toFixed(2) + '%';
+    let objTree = new SmapsTreeObj(id + '', parentId, type);
+    objTree.path = smaps.path;
+    objTree.rss = smaps.rss;
+    objTree.rsspro = this.calculatePercentage(smaps.rss, sumRss);
+    objTree.rssproStr = objTree.rsspro.toFixed(2) + '%';
+    objTree.rssStr = Utils.getBinaryByteWithUnit(smaps.rss * 1024);
+    objTree.dirty = smaps.dirty;
+    objTree.dirtyStr = Utils.getBinaryByteWithUnit(smaps.dirty * 1024);
+    objTree.swapper = smaps.swapper;
+    objTree.swapperStr = Utils.getBinaryByteWithUnit(smaps.swapper * 1024);
+    objTree.size = smaps.size;
+    objTree.sizeStr = Utils.getBinaryByteWithUnit(smaps.size * 1024);
+    objTree.pss = smaps.pss;
+    objTree.pssStr = Utils.getBinaryByteWithUnit(smaps.pss * 1024);
+    objTree.respro = smaps.reside;
+    objTree.resproStr = smaps.reside.toFixed(2) + '%';
     dataTree.reg += 1;
     if (dataTree.children.length > 1 && dataTree.path != '< multiple >') {
       dataTree.path = '< multiple >';
@@ -141,27 +136,27 @@ export class TabPaneSmapsStatistics extends BaseElement {
     dataTree.size += smaps.size;
     dataTree.respro += smaps.reside;
     dataTree.pss += smaps.pss;
-    dataTree.children.push(obj);
+    dataTree.children.push(objTree);
   }
 
   private handleTree(smaps: Smaps, id: number, parentId: string, dataTree: SmapsTreeObj, sumRss: number) {
     let type = smaps.start_addr + ' (' + smaps.size / 4 + ' pages)';
-    let obj = new SmapsTreeObj(id + '', parentId, type);
-    obj.path = smaps.path;
-    obj.rss = smaps.rss;
-    obj.rsspro = this.calculatePercentage(smaps.rss, sumRss);
-    obj.rssproStr = obj.rsspro.toFixed(2) + '%';
-    obj.rssStr = Utils.getBinaryByteWithUnit(smaps.rss * 1024);
-    obj.dirty = smaps.dirty;
-    obj.dirtyStr = Utils.getBinaryByteWithUnit(smaps.dirty * 1024);
-    obj.swapper = smaps.swapper;
-    obj.swapperStr = Utils.getBinaryByteWithUnit(smaps.swapper * 1024);
-    obj.size = smaps.size;
-    obj.sizeStr = Utils.getBinaryByteWithUnit(smaps.size * 1024);
-    obj.pss = smaps.pss;
-    obj.pssStr = Utils.getBinaryByteWithUnit(smaps.pss * 1024);
-    obj.respro = smaps.reside;
-    obj.resproStr = smaps.reside.toFixed(2) + '%';
+    let treeObj = new SmapsTreeObj(id + '', parentId, type);
+    treeObj.path = smaps.path;
+    treeObj.rss = smaps.rss;
+    treeObj.rsspro = this.calculatePercentage(smaps.rss, sumRss);
+    treeObj.rssproStr = treeObj.rsspro.toFixed(2) + '%';
+    treeObj.rssStr = Utils.getBinaryByteWithUnit(smaps.rss * 1024);
+    treeObj.dirty = smaps.dirty;
+    treeObj.dirtyStr = Utils.getBinaryByteWithUnit(smaps.dirty * 1024);
+    treeObj.swapper = smaps.swapper;
+    treeObj.swapperStr = Utils.getBinaryByteWithUnit(smaps.swapper * 1024);
+    treeObj.size = smaps.size;
+    treeObj.sizeStr = Utils.getBinaryByteWithUnit(smaps.size * 1024);
+    treeObj.pss = smaps.pss;
+    treeObj.pssStr = Utils.getBinaryByteWithUnit(smaps.pss * 1024);
+    treeObj.respro = smaps.reside;
+    treeObj.resproStr = smaps.reside.toFixed(2) + '%';
     dataTree.reg += 1;
     if (dataTree.children.length > 1 && dataTree.path != '< multiple >') {
       dataTree.path = '< multiple >';
@@ -171,19 +166,22 @@ export class TabPaneSmapsStatistics extends BaseElement {
     dataTree.swapper += smaps.swapper;
     dataTree.size += smaps.size;
     dataTree.pss += smaps.pss;
-    dataTree.children.push(obj);
+    dataTree.children.push(treeObj);
   }
 
   initHtml(): string {
     return `
         <style>
+        .smaps-statistics-table{
+            height: auto;
+        }
         :host{
             display: flex;
             flex-direction: column;
             padding: 10px 10px;
         }
         </style>
-        <lit-table id="tb-smaps-statistics" style="height: auto" tree>
+        <lit-table id="tb-smaps-statistics" class="smaps-statistics-table" tree>
             <lit-table-column width="250px" title="Type" data-index="type" key="type" align="flex-start" >
             </lit-table-column> 
              <lit-table-column width="0.3fr" title="% of Res." data-index="rssproStr" key="rssproStr" align="flex-start" >
diff --git a/ide/src/trace/component/trace/sheet/snapshot/TabPaneComparison.ts b/ide/src/trace/component/trace/sheet/snapshot/TabPaneComparison.ts
index 7b1bc4048b6041a82156c51adf954ce13ded7ec4..0147ae702824860dc0a04dfc4bb084e6db4cfb46 100644
--- a/ide/src/trace/component/trace/sheet/snapshot/TabPaneComparison.ts
+++ b/ide/src/trace/component/trace/sheet/snapshot/TabPaneComparison.ts
@@ -47,6 +47,7 @@ export class TabPaneComparison extends BaseElement {
   private rightArray: Array<any> = [];
   private rightTheadTable: HTMLDivElement | undefined | null;
   private leftTheadTable: HTMLDivElement | undefined | null;
+  private comparisonTable: HTMLDivElement | undefined | null;
 
   initElements(): void {
     this.comparisonTableEl = this.shadowRoot!.querySelector<LitTable>('#tb-comparison') as LitTable;
@@ -56,6 +57,7 @@ export class TabPaneComparison extends BaseElement {
     this.search = this.filterEl?.shadowRoot?.querySelector('#filter-input') as HTMLInputElement;
     this.rightTheadTable = this.retainerTableEl!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
     this.leftTheadTable = this.comparisonTableEl!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
+    this.comparisonTable = this.comparisonTableEl.shadowRoot?.querySelector('.table') as HTMLDivElement;
     this.comparisonTableEl!.addEventListener('icon-click', (e) => {
       // @ts-ignore
       this.clickRow = e.detail.data;
@@ -139,6 +141,7 @@ export class TabPaneComparison extends BaseElement {
                   i++;
                   if (i < that.retainsData[0].distance - 1 && list[0].distance != '-') {
                     list[0].getChildren();
+                    list[0].expanded = false;
                     if (row.hasNext) {
                       getList(row.children);
                     }
@@ -182,39 +185,41 @@ export class TabPaneComparison extends BaseElement {
       (item as any).isSelected = true;
       this.retainsData = HeapDataInterface.getInstance().getRetains(item);
       if (this.retainsData && this.retainsData.length > 0) {
-        this.retainsData.forEach((element: any) => {
-          let shallow = Math.round((element.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
-          let retained = Math.round((element.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
-          element.shallowPercent = shallow;
-          element.retainedPercent = retained;
-          if (element.distance >= 100000000 || element.distance === -5) {
-            element.distance = '-';
+        this.retainsData.forEach((comparisonRetainEl: any) => {
+          let shallow = Math.round((comparisonRetainEl.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
+          let retained = Math.round((comparisonRetainEl.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
+          comparisonRetainEl.shallowPercent = shallow;
+          comparisonRetainEl.retainedPercent = retained;
+          if (comparisonRetainEl.distance >= 100000000 || comparisonRetainEl.distance === -5) {
+            comparisonRetainEl.distance = '-';
           }
-          let nodeId = element.nodeName + ` @${element.id}`;
-          element.objectName = element.edgeName + '\xa0' + 'in' + '\xa0' + nodeId;
+          let nodeId = comparisonRetainEl.nodeName + ` @${comparisonRetainEl.id}`;
+          comparisonRetainEl.objectName = comparisonRetainEl.edgeName + '\xa0' + 'in' + '\xa0' + nodeId;
         });
         let i = 0;
         let that = this;
         if (this.retainsData[0].distance > 1) {
           this.retainsData[0].getChildren();
+          this.retainsData[0].expanded = false;
         }
         let retainsTable = function () {
           const getList = function (list: any) {
-            list.forEach(function (row: any) {
-              let shallow = Math.round((row.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
-              let retained = Math.round((row.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
-              row.shallowPercent = shallow;
-              row.retainedPercent = retained;
-              let nodeId = row.nodeName.concat(` @${row.id}`);
-              row.objectName = row.edgeName + '\xa0' + 'in' + '\xa0' + nodeId;
-              if (row.distance >= 100000000 || row.distance === -5) {
-                row.distance = '-';
+            list.forEach(function (structRow: any) {
+              let shallow = Math.round((structRow.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
+              let retained = Math.round((structRow.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
+              structRow.shallowPercent = shallow;
+              structRow.retainedPercent = retained;
+              let nodeId = structRow.nodeName.concat(` @${structRow.id}`);
+              structRow.objectName = structRow.edgeName + '\xa0' + 'in' + '\xa0' + nodeId;
+              if (structRow.distance >= 100000000 || structRow.distance === -5) {
+                structRow.distance = '-';
               }
               i++;
               if (i < that.retainsData[0].distance - 1 && list[0].distance != '-') {
                 list[0].getChildren();
-                if (row.hasNext) {
-                  getList(row.children);
+                list[0].expanded = false;
+                if (structRow.hasNext) {
+                  getList(structRow.children);
                 }
               } else {
                 return;
@@ -307,6 +312,7 @@ export class TabPaneComparison extends BaseElement {
     this.selectEl!.dataSource = fileArr;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e: any) => {
+        this.comparisonTable!.scrollTop = 0;
         for (let f of fileArr) {
           if (input.value == f.file_name) {
             that.updateComparisonData(fileId, f.id);
@@ -393,13 +399,13 @@ export class TabPaneComparison extends BaseElement {
             });
             this.rightArray.forEach((list) => {
               let retainsTable = function () {
-                const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
+                const getList = function (currentList: any) {
+                  currentList.sort((a: any, b: any) => {
                     return sort === 1 ? a.distance - b.distance : b.distance - a.distance;
                   });
-                  list.forEach(function (row: any) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
+                  currentList.forEach(function (currentRow: any) {
+                    if (currentRow.children.length > 0) {
+                      getList(currentRow.children);
                     }
                   });
                 };
@@ -410,18 +416,22 @@ export class TabPaneComparison extends BaseElement {
             this.retainerTableEl!.snapshotDataSource = this.rightArray;
             break;
           case 'shallowSize':
-            this.retainerTableEl!.snapshotDataSource = this.rightArray.sort((a, b) => {
-              return sort === 1 ? a.shallowSize - b.shallowSize : b.shallowSize - a.shallowSize;
+            this.retainerTableEl!.snapshotDataSource = this.rightArray.sort((rightArrA, rightArrB) => {
+              return sort === 1
+                ? rightArrA.shallowSize - rightArrB.shallowSize
+                : rightArrB.shallowSize - rightArrA.shallowSize;
             });
             this.rightArray.forEach((list) => {
               let retainsTable = function () {
-                const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
-                    return sort === 1 ? a.shallowSize - b.shallowSize : b.shallowSize - a.shallowSize;
+                const getList = function (listArr: any) {
+                  listArr.sort((listArrA: any, listArrB: any) => {
+                    return sort === 1
+                      ? listArrA.shallowSize - listArrB.shallowSize
+                      : listArrB.shallowSize - listArrA.shallowSize;
                   });
-                  list.forEach(function (row: any) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
+                  listArr.forEach(function (rowEl: any) {
+                    if (rowEl.children.length > 0) {
+                      getList(rowEl.children);
                     }
                   });
                 };
@@ -432,16 +442,20 @@ export class TabPaneComparison extends BaseElement {
             this.retainerTableEl!.snapshotDataSource = this.rightArray;
             break;
           case 'retainedSize':
-            this.retainerTableEl!.snapshotDataSource = this.rightArray.sort((a, b) => {
-              return sort === 1 ? a.retainedSize - b.retainedSize : b.retainedSize - a.retainedSize;
+            this.retainerTableEl!.snapshotDataSource = this.rightArray.sort((rightArrA, rightArrB) => {
+              return sort === 1
+                ? rightArrA.retainedSize - rightArrB.retainedSize
+                : rightArrB.retainedSize - rightArrA.retainedSize;
             });
             this.rightArray.forEach((list) => {
               let retainsTable = function () {
-                const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
-                    return sort === 1 ? a.retainedSize - b.retainedSize : b.retainedSize - a.retainedSize;
+                const getList = function (listArr: any) {
+                  listArr.sort((listArrA: any, listArrB: any) => {
+                    return sort === 1
+                      ? listArrA.retainedSize - listArrB.retainedSize
+                      : listArrB.retainedSize - listArrA.retainedSize;
                   });
-                  list.forEach(function (row: any) {
+                  listArr.forEach(function (row: any) {
                     if (row.children.length > 0) {
                       getList(row.children);
                     }
@@ -454,22 +468,22 @@ export class TabPaneComparison extends BaseElement {
             this.retainerTableEl!.snapshotDataSource = this.rightArray;
             break;
           case 'objectName':
-            this.retainerTableEl!.snapshotDataSource = this.rightArray.sort((a, b) => {
+            this.retainerTableEl!.snapshotDataSource = this.rightArray.sort((rightArrA, rightArrB) => {
               return sort === 1
-                ? (a.objectName + '').localeCompare(b.objectName + '')
-                : (b.objectName + '').localeCompare(a.objectName + '');
+                ? (rightArrA.objectName + '').localeCompare(rightArrB.objectName + '')
+                : (rightArrB.objectName + '').localeCompare(rightArrA.objectName + '');
             });
             this.rightArray.forEach((list) => {
               let retainsTable = function () {
-                const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
+                const getList = function (listArr: any) {
+                  listArr.sort((listArrA: any, listArrB: any) => {
                     return sort === 1
-                      ? (a.objectName + '').localeCompare(b.objectName + '')
-                      : (b.objectName + '').localeCompare(a.objectName + '');
+                      ? (listArrA.objectName + '').localeCompare(listArrB.objectName + '')
+                      : (listArrB.objectName + '').localeCompare(listArrA.objectName + '');
                   });
-                  list.forEach(function (row: any) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
+                  listArr.forEach(function (currentRow: any) {
+                    if (currentRow.children.length > 0) {
+                      getList(currentRow.children);
                     }
                   });
                 };
@@ -503,18 +517,19 @@ export class TabPaneComparison extends BaseElement {
     this.search!.value = '';
     this.rightTheadTable!.removeAttribute('sort');
     this.leftTheadTable!.removeAttribute('sort');
+    this.comparisonTable!.scrollTop = 0;
   }
 
   connectedCallback() {
     super.connectedCallback();
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let comparisonPanelFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
+      if (comparisonPanelFilter.clientHeight > 0) filterHeight = comparisonPanelFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        comparisonPanelFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        comparisonPanelFilter.style.display = 'none';
       }
     }).observe(this.parentElement!);
   }
diff --git a/ide/src/trace/component/trace/sheet/snapshot/TabPaneSummary.ts b/ide/src/trace/component/trace/sheet/snapshot/TabPaneSummary.ts
index 285e7e06244e4e04a348ea89008c2cbb62c2cedb..38273a89a80c8c6965da0b839bbb06426f344bfc 100644
--- a/ide/src/trace/component/trace/sheet/snapshot/TabPaneSummary.ts
+++ b/ide/src/trace/component/trace/sheet/snapshot/TabPaneSummary.ts
@@ -31,7 +31,7 @@ import { HeapSnapshotStruct } from '../../../../database/ui-worker/ProcedureWork
 
 @element('tabpane-summary')
 export class TabPaneSummary extends BaseElement {
-  private tbl: LitTable | null | undefined;
+  private tblSummary: LitTable | null | undefined;
   private tbs: LitTable | null | undefined;
   private stackTable: LitTable | null | undefined;
   private summary: Array<ConstructorItem> = [];
@@ -53,10 +53,10 @@ export class TabPaneSummary extends BaseElement {
   private stack: HTMLLIElement | null | undefined;
   private retainers: HTMLLIElement | null | undefined;
 
-  set data(val: SelectionParam | any) {}
+  set data(valSummary: SelectionParam | any) {}
 
   initElements(): void {
-    this.tbl = this.shadowRoot?.querySelector<LitTable>('#left');
+    this.tblSummary = this.shadowRoot?.querySelector<LitTable>('#left');
     this.tbs = this.shadowRoot?.querySelector<LitTable>('#right');
     this.stackTable = this.shadowRoot?.querySelector<LitTable>('#stackTable');
     this.stackText = this.shadowRoot?.querySelector('.stackText') as HTMLElement;
@@ -65,10 +65,10 @@ export class TabPaneSummary extends BaseElement {
     this.search = this.tabFilter?.shadowRoot?.querySelector('#filter-input') as HTMLInputElement;
     this.stack = this.shadowRoot?.querySelector('#stack') as HTMLLIElement;
     this.retainers = this.shadowRoot?.querySelector('#retainers') as HTMLLIElement;
-    this.tblTable = this.tbl!.shadowRoot?.querySelector('.table') as HTMLDivElement;
+    this.tblTable = this.tblSummary!.shadowRoot?.querySelector('.table') as HTMLDivElement;
     this.rightTheadTable = this.tbs!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
-    this.leftTheadTable = this.tbl!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
-    this.tbl!.addEventListener('row-click', (evt: any) => {
+    this.leftTheadTable = this.tblSummary!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
+    this.tblSummary!.addEventListener('row-click', (evt: any) => {
       this.rightTheadTable!.removeAttribute('sort');
       this.tbsTable = this.tbs!.shadowRoot?.querySelector('.table') as HTMLDivElement;
       this.tbsTable!.scrollTop = 0;
@@ -90,6 +90,7 @@ export class TabPaneSummary extends BaseElement {
       if (this.retainsData.length > 0) {
         if (this.retainsData[0].distance > 1) {
           this.retainsData[0].getChildren();
+          this.retainsData[0].expanded = false;
         }
         let i = 0;
         let that = this;
@@ -108,6 +109,7 @@ export class TabPaneSummary extends BaseElement {
               i++;
               if (i < that.retainsData[0].distance - 1 && list[0].distance != '-') {
                 list[0].getChildren();
+                list[0].expanded = false;
                 if (row.hasNext) {
                   getList(row.children);
                 }
@@ -169,24 +171,24 @@ export class TabPaneSummary extends BaseElement {
       }
     });
 
-    this.tbl!.addEventListener('icon-click', (evt: any) => {
+    this.tblSummary!.addEventListener('icon-click', (evt: any) => {
       if (evt.detail.data.status) {
         evt.detail.data.getChildren();
         evt.detail.data.children.sort(function (a: ConstructorItem, b: ConstructorItem) {
           return b.retainedSize - a.retainedSize;
         });
-        evt.detail.data.children.forEach((element: any) => {
-          let shallow = Math.round((element.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
-          let retained = Math.round((element.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
-          element.shallowPercent = shallow;
-          element.retainedPercent = retained;
-          if (element.distance >= 100000000 || element.distance === -5) {
-            element.distance = '-';
+        evt.detail.data.children.forEach((summaryDataEl: any) => {
+          let shallow = Math.round((summaryDataEl.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
+          let retained = Math.round((summaryDataEl.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
+          summaryDataEl.shallowPercent = shallow;
+          summaryDataEl.retainedPercent = retained;
+          if (summaryDataEl.distance >= 100000000 || summaryDataEl.distance === -5) {
+            summaryDataEl.distance = '-';
           }
-          let nodeId = element.nodeName.concat(` @${element.id}`);
-          element.objectName = nodeId;
-          if (element.edgeName != '') {
-            element.objectName = element.edgeName + '\xa0' + '::' + '\xa0' + nodeId;
+          let nodeId = summaryDataEl.nodeName.concat(` @${summaryDataEl.id}`);
+          summaryDataEl.objectName = nodeId;
+          if (summaryDataEl.edgeName != '') {
+            summaryDataEl.objectName = summaryDataEl.edgeName + '\xa0' + '::' + '\xa0' + nodeId;
           }
         });
       } else {
@@ -194,21 +196,21 @@ export class TabPaneSummary extends BaseElement {
       }
       if (this.search!.value != '') {
         if (this.leftTheadTable!.hasAttribute('sort')) {
-          this.tbl!.snapshotDataSource = this.leftArray;
+          this.tblSummary!.snapshotDataSource = this.leftArray;
         } else {
-          this.tbl!.snapshotDataSource = this.summaryFilter;
+          this.tblSummary!.snapshotDataSource = this.summaryFilter;
         }
       } else {
         if (this.leftTheadTable!.hasAttribute('sort')) {
-          this.tbl!.snapshotDataSource = this.leftArray;
+          this.tblSummary!.snapshotDataSource = this.leftArray;
         } else {
-          this.tbl!.snapshotDataSource = this.summary;
+          this.tblSummary!.snapshotDataSource = this.summary;
         }
       }
       new ResizeObserver(() => {
         if (this.parentElement?.clientHeight !== 0) {
-          this.tbl!.style.height = '100%';
-          this.tbl!.reMeauseHeight();
+          this.tblSummary!.style.height = '100%';
+          this.tblSummary!.reMeauseHeight();
         }
       }).observe(this.parentElement!);
     });
@@ -219,21 +221,22 @@ export class TabPaneSummary extends BaseElement {
         let i = 0;
         let retainsTable = function () {
           const getList = function (list: any) {
-            list.forEach(function (row: any) {
-              let shallow = Math.round((row.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
-              let retained = Math.round((row.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
-              row.shallowPercent = shallow;
-              row.retainedPercent = retained;
-              let nodeId = row.nodeName.concat(` @${row.id}`);
-              row.objectName = row.edgeName + '\xa0' + 'in' + '\xa0' + nodeId;
-              if (row.distance >= 100000000 || row.distance === -5) {
-                row.distance = '-';
+            list.forEach(function (currentRow: any) {
+              let shallow = Math.round((currentRow.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
+              let retained = Math.round((currentRow.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
+              currentRow.shallowPercent = shallow;
+              currentRow.retainedPercent = retained;
+              let nodeId = currentRow.nodeName.concat(` @${currentRow.id}`);
+              currentRow.objectName = currentRow.edgeName + '\xa0' + 'in' + '\xa0' + nodeId;
+              if (currentRow.distance >= 100000000 || currentRow.distance === -5) {
+                currentRow.distance = '-';
               }
               i++;
               if (i < evt.detail.data.distance - 1 && list[0].distance != '-') {
                 list[0].getChildren();
-                if (row.hasNext) {
-                  getList(row.children);
+                list[0].expanded = false;
+                if (currentRow.hasNext) {
+                  getList(currentRow.children);
                 }
               } else {
                 return;
@@ -259,7 +262,7 @@ export class TabPaneSummary extends BaseElement {
       }).observe(this.parentElement!);
     });
 
-    this.tbl!.addEventListener('column-click', (evt) => {
+    this.tblSummary!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByLeftTable(evt.detail.key, evt.detail.sort);
     });
@@ -282,40 +285,40 @@ export class TabPaneSummary extends BaseElement {
     this.initSummaryData(data.id);
   }
 
-  initSummaryData(fileId: number, maxNodeId?: number, minNodeId?: number) {
+  initSummaryData(fileId: number, minNodeId?: number, maxNodeId?: number) {
     this.clear();
     this.summary = [];
     this.progressEL!.loading = true;
     this.summary = HeapDataInterface.getInstance().getClassesListForSummary(fileId, minNodeId, maxNodeId);
     let dataList = HeapDataInterface.getInstance().getClassesListForSummary(SpJsMemoryChart.file.id);
     TabPaneSummary.fileSize = dataList.reduce((sum, e) => sum + e.shallowSize, 0);
-    this.summary.forEach((element: any) => {
-      if (element.childCount > 1) {
-        let count = element.nodeName + ` ×${element.childCount}`;
-        element.objectName = count;
+    this.summary.forEach((summaryEl: any) => {
+      if (summaryEl.childCount > 1) {
+        let count = summaryEl.nodeName + ` ×${summaryEl.childCount}`;
+        summaryEl.objectName = count;
       } else {
-        element.objectName = element.nodeName;
+        summaryEl.objectName = summaryEl.nodeName;
       }
-      let shallow = Math.round((element.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
-      let retained = Math.round((element.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
-      element.shallowPercent = shallow;
-      element.retainedPercent = retained;
-      if (element.distance >= 100000000 || element.distance === -5) {
-        element.distance = '-';
+      let shallow = Math.round((summaryEl.shallowSize / TabPaneSummary.fileSize) * 100) + '%';
+      let retained = Math.round((summaryEl.retainedSize / TabPaneSummary.fileSize) * 100) + '%';
+      summaryEl.shallowPercent = shallow;
+      summaryEl.retainedPercent = retained;
+      if (summaryEl.distance >= 100000000 || summaryEl.distance === -5) {
+        summaryEl.distance = '-';
       }
     });
     if (this.summary.length > 0) {
       this.summaryData = this.summary;
-      this.tbl!.snapshotDataSource = this.summary;
+      this.tblSummary!.snapshotDataSource = this.summary;
       this.progressEL!.loading = false;
     } else {
-      this.tbl!.snapshotDataSource = [];
+      this.tblSummary!.snapshotDataSource = [];
       this.progressEL!.loading = false;
     }
     new ResizeObserver(() => {
       if (this.parentElement?.clientHeight !== 0) {
-        this.tbl!.style.height = '100%';
-        this.tbl!.reMeauseHeight();
+        this.tblSummary!.style.height = '100%';
+        this.tblSummary!.reMeauseHeight();
       }
     }).observe(this.parentElement!);
     if (SpJsMemoryChart.file.file_name.includes('Timeline')) {
@@ -334,9 +337,9 @@ export class TabPaneSummary extends BaseElement {
     switch (sort) {
       case 0:
         if (this.search!.value === '') {
-          this.tbl!.snapshotDataSource = this.summary;
+          this.tblSummary!.snapshotDataSource = this.summary;
         } else {
-          this.tbl!.snapshotDataSource = this.summaryFilter;
+          this.tblSummary!.snapshotDataSource = this.summaryFilter;
         }
         break;
       default:
@@ -347,14 +350,14 @@ export class TabPaneSummary extends BaseElement {
         }
         switch (column) {
           case 'distance':
-            this.tbl!.snapshotDataSource = this.leftArray.sort((a, b) => {
-              return sort === 1 ? a.distance - b.distance : b.distance - a.distance;
+            this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
+              return sort === 1 ? leftData.distance - rightData.distance : rightData.distance - leftData.distance;
             });
-            this.leftArray.forEach((list) => {
+            this.leftArray.forEach((currentLeftItem) => {
               let retainsTable = function () {
                 const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
-                    return sort === 1 ? a.distance - b.distance : b.distance - a.distance;
+                  list.sort((leftA: any, rightB: any) => {
+                    return sort === 1 ? leftA.distance - rightB.distance : rightB.distance - leftA.distance;
                   });
                   list.forEach(function (row: any) {
                     if (row.children.length > 0) {
@@ -362,21 +365,21 @@ export class TabPaneSummary extends BaseElement {
                     }
                   });
                 };
-                getList(list.children);
+                getList(currentLeftItem.children);
               };
               retainsTable();
             });
-            this.tbl!.snapshotDataSource = this.leftArray;
+            this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
           case 'shallowSize':
-            this.tbl!.snapshotDataSource = this.leftArray.sort((a, b) => {
-              return sort === 1 ? a.shallowSize - b.shallowSize : b.shallowSize - a.shallowSize;
+            this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
+              return sort === 1 ? leftData.shallowSize - rightData.shallowSize : rightData.shallowSize - leftData.shallowSize;
             });
-            this.leftArray.forEach((list) => {
+            this.leftArray.forEach((currentLeftItem) => {
               let retainsTable = function () {
                 const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
-                    return sort === 1 ? a.shallowSize - b.shallowSize : b.shallowSize - a.shallowSize;
+                  list.sort((leftA: any, rightB: any) => {
+                    return sort === 1 ? leftA.shallowSize - rightB.shallowSize : rightB.shallowSize - leftA.shallowSize;
                   });
                   list.forEach(function (row: any) {
                     if (row.children.length > 0) {
@@ -384,21 +387,21 @@ export class TabPaneSummary extends BaseElement {
                     }
                   });
                 };
-                getList(list.children);
+                getList(currentLeftItem.children);
               };
               retainsTable();
             });
-            this.tbl!.snapshotDataSource = this.leftArray;
+            this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
           case 'retainedSize':
-            this.tbl!.snapshotDataSource = this.leftArray.sort((a, b) => {
-              return sort === 1 ? a.retainedSize - b.retainedSize : b.retainedSize - a.retainedSize;
+            this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
+              return sort === 1 ? leftData.retainedSize - rightData.retainedSize : rightData.retainedSize - leftData.retainedSize;
             });
-            this.leftArray.forEach((list) => {
+            this.leftArray.forEach((currentLeftItem) => {
               let retainsTable = function () {
                 const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
-                    return sort === 1 ? a.retainedSize - b.retainedSize : b.retainedSize - a.retainedSize;
+                  list.sort((leftA: any, rightB: any) => {
+                    return sort === 1 ? leftA.retainedSize - rightB.retainedSize : rightB.retainedSize - leftA.retainedSize;
                   });
                   list.forEach(function (row: any) {
                     if (row.children.length > 0) {
@@ -406,25 +409,25 @@ export class TabPaneSummary extends BaseElement {
                     }
                   });
                 };
-                getList(list.children);
+                getList(currentLeftItem.children);
               };
               retainsTable();
             });
-            this.tbl!.snapshotDataSource = this.leftArray;
+            this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
           case 'objectName':
-            this.tbl!.snapshotDataSource = this.leftArray.sort((a, b) => {
+            this.tblSummary!.snapshotDataSource = this.leftArray.sort((leftData, rightData) => {
               return sort === 1
-                ? (a.objectName + '').localeCompare(b.objectName + '')
-                : (b.objectName + '').localeCompare(a.objectName + '');
+                ? (leftData.objectName + '').localeCompare(rightData.objectName + '')
+                : (rightData.objectName + '').localeCompare(leftData.objectName + '');
             });
-            this.leftArray.forEach((list) => {
+            this.leftArray.forEach((currentLeftItem) => {
               let retainsTable = function () {
                 const getList = function (list: any) {
-                  list.sort((a: any, b: any) => {
+                  list.sort((leftA: any, rightB: any) => {
                     return sort === 1
-                      ? (a.objectName + '').localeCompare(b.objectName + '')
-                      : (b.objectName + '').localeCompare(a.objectName + '');
+                      ? (leftA.objectName + '').localeCompare(rightB.objectName + '')
+                      : (rightB.objectName + '').localeCompare(leftA.objectName + '');
                   });
                   list.forEach(function (row: any) {
                     if (row.children.length > 0) {
@@ -432,11 +435,11 @@ export class TabPaneSummary extends BaseElement {
                     }
                   });
                 };
-                getList(list.children);
+                getList(currentLeftItem.children);
               };
               retainsTable();
             });
-            this.tbl!.snapshotDataSource = this.leftArray;
+            this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
         }
         break;
@@ -594,8 +597,8 @@ export class TabPaneSummary extends BaseElement {
         } else {
         }
       });
-      this.tbl!.snapshotDataSource = this.summaryFilter;
-      let summaryTable = this.tbl!.shadowRoot?.querySelector('.table') as HTMLDivElement;
+      this.tblSummary!.snapshotDataSource = this.summaryFilter;
+      let summaryTable = this.tblSummary!.shadowRoot?.querySelector('.table') as HTMLDivElement;
       summaryTable.scrollTop = 0;
     });
   }
@@ -619,12 +622,12 @@ export class TabPaneSummary extends BaseElement {
     super.connectedCallback();
     let filterHeight = 0;
     new ResizeObserver((entries) => {
-      let tabPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
-      if (tabPaneFilter.clientHeight > 0) filterHeight = tabPaneFilter.clientHeight;
+      let summaryPaneFilter = this.shadowRoot!.querySelector('#filter') as HTMLElement;
+      if (summaryPaneFilter.clientHeight > 0) filterHeight = summaryPaneFilter.clientHeight;
       if (this.parentElement!.clientHeight > filterHeight) {
-        tabPaneFilter.style.display = 'flex';
+        summaryPaneFilter.style.display = 'flex';
       } else {
-        tabPaneFilter.style.display = 'none';
+        summaryPaneFilter.style.display = 'none';
       }
     }).observe(this.parentElement!);
   }
diff --git a/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts b/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
index 3ab8d76ba73468a5a145115803ef27a70b590eb0..018bbf9f0ad3529b752776ba098af61414f0447d 100644
--- a/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
@@ -19,7 +19,7 @@ import { ns2s, TimerShaftElement } from '../TimerShaftElement.js';
 import { ColorUtils } from '../base/ColorUtils.js';
 import { CpuStruct } from '../../../database/ui-worker/ProcedureWorkerCPU.js';
 
-const markPadding = 5;
+const MarkPadding = 5;
 
 export class Mark extends Graph {
   name: string | undefined;
@@ -29,7 +29,7 @@ export class Mark extends Graph {
   constructor(canvas: HTMLCanvasElement | undefined | null, name: string, c: CanvasRenderingContext2D, frame: Rect) {
     super(canvas, c, frame);
     this.name = name;
-    this.inspectionFrame = new Rect(frame.x - markPadding, frame.y, frame.width + markPadding * 2, frame.height);
+    this.inspectionFrame = new Rect(frame.x - MarkPadding, frame.y, frame.width + MarkPadding * 2, frame.height);
   }
 
   get isHover(): boolean {
@@ -47,13 +47,13 @@ export class Mark extends Graph {
 
   draw(): void {
     this.c.beginPath();
-    this.c.lineWidth = 7;
     this.c.strokeStyle = '#999999';
+    this.c.lineWidth = 7;
     this.c.moveTo(this.frame.x, this.frame.y);
     this.c.lineTo(this.frame.x, this.frame.y + this.frame.height / 3);
     this.c.stroke();
-    this.c.lineWidth = 1;
     this.c.strokeStyle = '#999999';
+    this.c.lineWidth = 1;
     this.c.moveTo(this.frame.x, this.frame.y);
     this.c.lineTo(this.frame.x, this.frame.y + this.frame.height);
     this.c.stroke();
@@ -80,8 +80,8 @@ export interface TimeRange {
 
 export class RangeRuler extends Graph {
   public rangeRect: Rect;
-  public markA: Mark;
-  public markB: Mark;
+  public markAObj: Mark;
+  public markBObj: Mark;
   public range: TimeRange;
   private pressedKeys: Array<string> = [];
   mouseDownOffsetX = 0;
@@ -125,13 +125,13 @@ export class RangeRuler extends Graph {
     super(timerShaftEL.canvas, timerShaftEL.ctx!, frame);
     this.range = range;
     this.notifyHandler = notifyHandler;
-    this.markA = new Mark(
+    this.markAObj = new Mark(
       timerShaftEL.canvas,
       'A',
       timerShaftEL.ctx!,
       new Rect(range.startX, frame.y, 1, frame.height)
     );
-    this.markB = new Mark(timerShaftEL.canvas, 'B', timerShaftEL.ctx!, new Rect(range.endX, frame.y, 1, frame.height));
+    this.markBObj = new Mark(timerShaftEL.canvas, 'B', timerShaftEL.ctx!, new Rect(range.endX, frame.y, 1, frame.height));
     this.rangeRect = new Rect(range.startX, frame.y, range.endX - range.startX, frame.height);
   }
 
@@ -141,19 +141,18 @@ export class RangeRuler extends Graph {
   }
 
   drawCpuUsage() {
-    let maxNum = Math.round(this._cpuUsage.length / 100);
     let miniHeight = Math.round(this.frame.height / CpuStruct.cpuCount); //每格高度
     let miniWidth = Math.ceil(this.frame.width / 100); //每格宽度
-    for (let i = 0; i < this._cpuUsage.length; i++) {
-      let it = this._cpuUsage[i];
-      this.c.fillStyle = ColorUtils.MD_PALETTE[it.cpu];
-      this.c.globalAlpha = it.rate;
-      this.c.fillRect(this.frame.x + miniWidth * it.ro, this.frame.y + it.cpu * miniHeight, miniWidth, miniHeight);
-    }
+    for (let index = 0; index < this._cpuUsage.length; index++) {
+      let cpuUsageItem = this._cpuUsage[index];
+      this.c.fillStyle = ColorUtils.MD_PALETTE[cpuUsageItem.cpu];
+      this.c.globalAlpha = cpuUsageItem.rate;
+      this.c.fillRect(this.frame.x + miniWidth * cpuUsageItem.ro, this.frame.y + cpuUsageItem.cpu * miniHeight, miniWidth, miniHeight);
+    }``
   }
 
   draw(discardNotify: boolean = false): void {
-    this.c.clearRect(this.frame.x - markPadding, this.frame.y, this.frame.width + markPadding * 2, this.frame.height);
+    this.c.clearRect(this.frame.x - MarkPadding, this.frame.y, this.frame.width + MarkPadding * 2, this.frame.height);
     this.c.beginPath();
     if (this._cpuUsage.length > 0) {
       this.drawCpuUsage();
@@ -162,9 +161,9 @@ export class RangeRuler extends Graph {
       this.c.globalAlpha = 1;
     }
     //绘制选中区域
-    this.c.fillStyle = window.getComputedStyle(this.canvas!, null).getPropertyValue('background-color'); //"#ffffff"
-    this.rangeRect.x = this.markA.frame.x < this.markB.frame.x ? this.markA.frame.x : this.markB.frame.x;
-    this.rangeRect.width = Math.abs(this.markB.frame.x - this.markA.frame.x);
+    this.c.fillStyle = window.getComputedStyle(this.canvas!, null).getPropertyValue('background-color');
+    this.rangeRect.x = this.markAObj.frame.x < this.markBObj.frame.x ? this.markAObj.frame.x : this.markBObj.frame.x;
+    this.rangeRect.width = Math.abs(this.markBObj.frame.x - this.markAObj.frame.x);
     this.c.fillRect(this.rangeRect.x, this.rangeRect.y, this.rangeRect.width, this.rangeRect.height);
     this.c.globalAlpha = 1;
     this.c.globalAlpha = 0.5;
@@ -178,8 +177,8 @@ export class RangeRuler extends Graph {
     );
     this.c.globalAlpha = 1;
     this.c.closePath();
-    this.markA.draw();
-    this.markB.draw();
+    this.markAObj.draw();
+    this.markBObj.draw();
     if (this.notifyHandler) {
       this.range.startX = this.rangeRect.x;
       this.range.endX = this.rangeRect.x + this.rangeRect.width;
@@ -189,14 +188,14 @@ export class RangeRuler extends Graph {
       let min = 0;
       let max = 0;
       let weight = 0;
-      for (let index = 0; index < this.scales.length; index++) {
-        if (this.scales[index] > l20) {
-          if (index > 0) {
-            min = this.scales[index - 1];
+      for (let scalesIndex = 0; scalesIndex < this.scales.length; scalesIndex++) {
+        if (this.scales[scalesIndex] > l20) {
+          if (scalesIndex > 0) {
+            min = this.scales[scalesIndex - 1];
           } else {
             min = 0;
           }
-          max = this.scales[index];
+          max = this.scales[scalesIndex];
           weight = ((l20 - min) * 1.0) / (max - min);
           if (weight > 0.243) {
             this.scale = max;
@@ -209,7 +208,7 @@ export class RangeRuler extends Graph {
       if (this.scale == 0) {
         this.scale = this.scales[0];
       }
-      let tmpNs = 0;
+      let tempNs = 0;
       let yu = this.range.startNS % this.scale;
       let realW = (this.scale * this.frame.width) / (this.range.endNS - this.range.startNS);
       let startX = 0;
@@ -225,17 +224,17 @@ export class RangeRuler extends Graph {
       }
       this.range.scale = this.scale;
       if (yu != 0) {
-        let firstNodeWidth = ((this.scale - yu) / this.scale) * realW;
-        startX += firstNodeWidth;
-        tmpNs += yu;
+        let first_NodeWidth = ((this.scale - yu) / this.scale) * realW;
+        startX += first_NodeWidth;
+        tempNs += yu;
         this.range.xs.push(startX);
-        this.range.xsTxt.push(ns2s(tmpNs));
+        this.range.xsTxt.push(ns2s(tempNs));
       }
-      while (tmpNs < this.range.endNS - this.range.startNS) {
+      while (tempNs < this.range.endNS - this.range.startNS) {
         startX += realW;
-        tmpNs += this.scale;
+        tempNs += this.scale;
         this.range.xs.push(startX);
-        this.range.xsTxt.push(ns2s(tmpNs));
+        this.range.xsTxt.push(ns2s(tempNs));
       }
 
       if (!discardNotify) {
@@ -244,28 +243,28 @@ export class RangeRuler extends Graph {
     }
   }
 
-  mouseDown(ev: MouseEvent) {
-    let x = ev.offsetX - (this.canvas?.offsetLeft || 0);
-    let y = ev.offsetY - (this.canvas?.offsetTop || 0);
+  mouseDown(mouseEventDown: MouseEvent) {
+    let down_x = mouseEventDown.offsetX - (this.canvas?.offsetLeft || 0);
+    let down_y = mouseEventDown.offsetY - (this.canvas?.offsetTop || 0);
     this.isMouseDown = true;
-    this.mouseDownOffsetX = x;
-    if (this.markA.isHover) {
-      this.movingMark = this.markA;
+    this.mouseDownOffsetX = down_x;
+    if (this.markAObj.isHover) {
+      this.movingMark = this.markAObj;
       this.mouseDownMovingMarkX = this.movingMark.frame.x || 0;
-    } else if (this.markB.isHover) {
-      this.movingMark = this.markB;
+    } else if (this.markBObj.isHover) {
+      this.movingMark = this.markBObj;
       this.mouseDownMovingMarkX = this.movingMark.frame.x || 0;
     } else {
       this.movingMark = null;
     }
-    if (this.rangeRect.containsWithPadding(x, y, 5, 0)) {
+    if (this.rangeRect.containsWithPadding(down_x, down_y, 5, 0)) {
       this.isMovingRange = true;
-      this.markAX = this.markA.frame.x;
-      this.markBX = this.markB.frame.x;
+      this.markAX = this.markAObj.frame.x;
+      this.markBX = this.markBObj.frame.x;
       document.body.style.cursor = 'move';
     } else if (
-      this.frame.containsWithMargin(x, y, 20, 0, 0, 0) &&
-      !this.rangeRect.containsWithMargin(x, y, 0, markPadding, 0, markPadding)
+      this.frame.containsWithMargin(down_x, down_y, 20, 0, 0, 0) &&
+      !this.rangeRect.containsWithMargin(down_x, down_y, 0, MarkPadding, 0, MarkPadding)
     ) {
       this.isNewRange = true;
     }
@@ -280,25 +279,25 @@ export class RangeRuler extends Graph {
 
   mouseMove(ev: MouseEvent) {
     this.range.refresh = false;
-    let x = ev.offsetX - (this.canvas?.offsetLeft || 0);
-    let y = ev.offsetY - (this.canvas?.offsetTop || 0);
-    this.centerXPercentage = x / (this.canvas?.clientWidth || 0);
+    let move_x = ev.offsetX - (this.canvas?.offsetLeft || 0);
+    let move_y = ev.offsetY - (this.canvas?.offsetTop || 0);
+    this.centerXPercentage = move_x / (this.canvas?.clientWidth || 0);
     if (this.centerXPercentage <= 0) {
       this.centerXPercentage = 0;
     } else if (this.centerXPercentage >= 1) {
       this.centerXPercentage = 1;
     }
     let maxX = this.canvas?.clientWidth || 0;
-    if (this.markA.inspectionFrame.contains(x, y)) {
-      this.markA.isHover = true;
-    } else if (this.markB.inspectionFrame.contains(x, y)) {
-      this.markB.isHover = true;
+    if (this.markAObj.inspectionFrame.contains(move_x, move_y)) {
+      this.markAObj.isHover = true;
+    } else if (this.markBObj.inspectionFrame.contains(move_x, move_y)) {
+      this.markBObj.isHover = true;
     } else {
-      this.markA.isHover = false;
-      this.markB.isHover = false;
+      this.markAObj.isHover = false;
+      this.markBObj.isHover = false;
     }
     if (this.movingMark) {
-      let result = x - this.mouseDownOffsetX + this.mouseDownMovingMarkX;
+      let result = move_x - this.mouseDownOffsetX + this.mouseDownMovingMarkX;
       if (result >= 0 && result <= maxX) {
         this.movingMark.frame.x = result;
       } else if (result < 0) {
@@ -306,41 +305,41 @@ export class RangeRuler extends Graph {
       } else {
         this.movingMark.frame.x = maxX;
       }
-      this.movingMark.inspectionFrame.x = this.movingMark.frame.x - markPadding;
+      this.movingMark.inspectionFrame.x = this.movingMark.frame.x - MarkPadding;
       this.recordMovingS();
       requestAnimationFrame(() => {
         this.draw();
         this.range.refresh = false;
         this.delayDraw();
       });
-    } else if (this.rangeRect.containsWithPadding(x, y, markPadding, 0)) {
+    } else if (this.rangeRect.containsWithPadding(move_x, move_y, MarkPadding, 0)) {
       document.body.style.cursor = 'move';
     } else if (
-      this.frame.containsWithMargin(x, y, 20, 0, 0, 0) &&
-      !this.rangeRect.containsWithMargin(x, y, 0, markPadding, 0, markPadding)
+      this.frame.containsWithMargin(move_x, move_y, 20, 0, 0, 0) &&
+      !this.rangeRect.containsWithMargin(move_x, move_y, 0, MarkPadding, 0, MarkPadding)
     ) {
       document.body.style.cursor = 'crosshair';
     }
     if (this.isMovingRange && this.isMouseDown) {
-      let result = x - this.mouseDownOffsetX;
+      let result = move_x - this.mouseDownOffsetX;
       let mA = result + this.markAX;
       let mB = result + this.markBX;
       if (mA >= 0 && mA <= maxX) {
-        this.markA.frame.x = mA;
+        this.markAObj.frame.x = mA;
       } else if (mA < 0) {
-        this.markA.frame.x = 0;
+        this.markAObj.frame.x = 0;
       } else {
-        this.markA.frame.x = maxX;
+        this.markAObj.frame.x = maxX;
       }
-      this.markA.inspectionFrame.x = this.markA.frame.x - markPadding;
+      this.markAObj.inspectionFrame.x = this.markAObj.frame.x - MarkPadding;
       if (mB >= 0 && mB <= maxX) {
-        this.markB.frame.x = mB;
+        this.markBObj.frame.x = mB;
       } else if (mB < 0) {
-        this.markB.frame.x = 0;
+        this.markBObj.frame.x = 0;
       } else {
-        this.markB.frame.x = maxX;
+        this.markBObj.frame.x = maxX;
       }
-      this.markB.inspectionFrame.x = this.markB.frame.x - markPadding;
+      this.markBObj.inspectionFrame.x = this.markBObj.frame.x - MarkPadding;
       this.recordMovingS();
       requestAnimationFrame(() => {
         this.draw();
@@ -348,16 +347,16 @@ export class RangeRuler extends Graph {
         this.delayDraw();
       });
     } else if (this.isNewRange) {
-      this.markA.frame.x = this.mouseDownOffsetX;
-      this.markA.inspectionFrame.x = this.mouseDownOffsetX - markPadding;
-      if (x >= 0 && x <= maxX) {
-        this.markB.frame.x = x;
-      } else if (x < 0) {
-        this.markB.frame.x = 0;
+      this.markAObj.frame.x = this.mouseDownOffsetX;
+      this.markAObj.inspectionFrame.x = this.mouseDownOffsetX - MarkPadding;
+      if (move_x >= 0 && move_x <= maxX) {
+        this.markBObj.frame.x = move_x;
+      } else if (move_x < 0) {
+        this.markBObj.frame.x = 0;
       } else {
-        this.markB.frame.x = maxX;
+        this.markBObj.frame.x = maxX;
       }
-      this.markB.inspectionFrame.x = this.markB.frame.x - markPadding;
+      this.markBObj.inspectionFrame.x = this.markBObj.frame.x - MarkPadding;
       this.recordMovingS();
       requestAnimationFrame(() => {
         this.draw();
@@ -374,13 +373,17 @@ export class RangeRuler extends Graph {
       this.animaStartTime = dat.getTime();
     }
     this.currentDuration = new Date().getTime() - this.animaStartTime;
+    this.setCacheInterval();
+    this.range.refresh = this.cacheInterval.flag;
+  }
+
+  setCacheInterval(){
     if (Math.trunc(this.currentDuration / this.cacheInterval.interval) != this.cacheInterval.value) {
       this.cacheInterval.flag = true;
       this.cacheInterval.value = Math.trunc(this.currentDuration / this.cacheInterval.interval);
     } else {
       this.cacheInterval.flag = false;
     }
-    this.range.refresh = this.cacheInterval.flag;
   }
 
   delayDraw() {
@@ -400,16 +403,16 @@ export class RangeRuler extends Graph {
   }
 
   fillX() {
-    if (this.range.startNS < 0) this.range.startNS = 0;
     if (this.range.endNS < 0) this.range.endNS = 0;
+    if (this.range.startNS < 0) this.range.startNS = 0;
     if (this.range.endNS > this.range.totalNS) this.range.endNS = this.range.totalNS;
     if (this.range.startNS > this.range.totalNS) this.range.startNS = this.range.totalNS;
     this.range.startX = (this.range.startNS * (this.canvas?.clientWidth || 0)) / this.range.totalNS;
     this.range.endX = (this.range.endNS * (this.canvas?.clientWidth || 0)) / this.range.totalNS;
-    this.markA.frame.x = this.range.startX;
-    this.markA.inspectionFrame.x = this.markA.frame.x - markPadding;
-    this.markB.frame.x = this.range.endX;
-    this.markB.inspectionFrame.x = this.markB.frame.x - markPadding;
+    this.markAObj.frame.x = this.range.startX;
+    this.markAObj.inspectionFrame.x = this.markAObj.frame.x - MarkPadding;
+    this.markBObj.frame.x = this.range.endX;
+    this.markBObj.inspectionFrame.x = this.markBObj.frame.x - MarkPadding;
   }
 
   setRangeNS(startNS: number, endNS: number) {
@@ -439,37 +442,32 @@ export class RangeRuler extends Graph {
 
   cancelTimeOut: any = undefined;
 
-  keyPress(ev: KeyboardEvent) {
+  keyPress(keyboardEvent: KeyboardEvent) {
     if (
       this.animaStartTime == undefined ||
-      (this.pressedKeys.length > 0 && this.pressedKeys[this.pressedKeys.length - 1] != ev.key.toLocaleLowerCase())
+      (this.pressedKeys.length > 0 && this.pressedKeys[this.pressedKeys.length - 1] != keyboardEvent.key.toLocaleLowerCase())
     ) {
       let dat = new Date();
       dat.setTime(dat.getTime() - 400);
       this.animaStartTime = dat.getTime();
     }
     this.currentDuration = new Date().getTime() - this.animaStartTime;
-    if (Math.trunc(this.currentDuration / this.cacheInterval.interval) != this.cacheInterval.value) {
-      this.cacheInterval.flag = true;
-      this.cacheInterval.value = Math.trunc(this.currentDuration / this.cacheInterval.interval);
-    } else {
-      this.cacheInterval.flag = false;
-    }
+    this.setCacheInterval();
     this.range.refresh = this.cacheInterval.flag;
     if (this.pressedKeys.length > 0) {
-      if (this.pressedKeys[this.pressedKeys.length - 1] != ev.key.toLocaleLowerCase()) {
+      if (this.pressedKeys[this.pressedKeys.length - 1] != keyboardEvent.key.toLocaleLowerCase()) {
         this.cancelPressFrame();
         this.cancelUpFrame();
-        this.pressedKeys.push(ev.key.toLocaleLowerCase());
-        let dat = new Date();
-        dat.setTime(dat.getTime() - 400);
-        this.animaStartTime = dat.getTime();
+        this.pressedKeys.push(keyboardEvent.key.toLocaleLowerCase());
+        let date = new Date();
+        date.setTime(date.getTime() - 400);
+        this.animaStartTime = date.getTime();
         this.keyboardKeyPressMap[this.pressedKeys[this.pressedKeys.length - 1]]?.bind(this)();
       }
     } else {
       this.cancelPressFrame();
       this.cancelUpFrame();
-      this.pressedKeys.push(ev.key.toLocaleLowerCase());
+      this.pressedKeys.push(keyboardEvent.key.toLocaleLowerCase());
       let dat = new Date();
       dat.setTime(dat.getTime() - 400);
       this.animaStartTime = dat.getTime();
@@ -480,7 +478,7 @@ export class RangeRuler extends Graph {
       clearTimeout(this.cancelTimeOut);
     }
     this.cancelTimeOut = setTimeout(() => {
-      this.keyUp({ key: ev.key } as KeyboardEvent);
+      this.keyUp({ key: keyboardEvent.key } as KeyboardEvent);
     }, 1000);
   }
 
@@ -528,7 +526,7 @@ export class RangeRuler extends Graph {
         this.range.refresh = false;
         return;
       }
-      let s = (this.scale / this.p) * this.currentDuration * 0.4;
+      let s = (this.scale / this.p) * this.currentDuration * 1.2;
       this.range.startNS -= s;
       this.range.endNS -= s;
       this.fillX();
@@ -547,7 +545,7 @@ export class RangeRuler extends Graph {
         this.range.refresh = false;
         return;
       }
-      let s = (this.scale / this.p) * this.currentDuration * 0.4;
+      let s = (this.scale / this.p) * this.currentDuration * 1.2;
       this.range.startNS += s;
       this.range.endNS += s;
       this.fillX();
@@ -603,7 +601,7 @@ export class RangeRuler extends Graph {
       this.fillX();
       this.draw();
       this.range.refresh = false;
-      if (dur < 200) {
+      if (dur < 100) {
         this.upFrameIdW = requestAnimationFrame(animW);
       } else {
         this.range.refresh = true;
@@ -629,7 +627,7 @@ export class RangeRuler extends Graph {
       this.fillX();
       this.draw();
       this.range.refresh = false;
-      if (dur < 200) {
+      if (dur < 100) {
         this.upFrameIdS = requestAnimationFrame(animS);
       } else {
         this.range.refresh = true;
@@ -656,7 +654,7 @@ export class RangeRuler extends Graph {
       this.fillX();
       this.draw();
       this.range.refresh = false;
-      if (dur < 200) {
+      if (dur < 100) {
         this.upFrameIdA = requestAnimationFrame(animA);
       } else {
         this.range.refresh = true;
@@ -683,7 +681,7 @@ export class RangeRuler extends Graph {
       this.fillX();
       this.draw();
       this.range.refresh = false;
-      if (dur < 200) {
+      if (dur < 100) {
         this.upFrameIdD = requestAnimationFrame(animD);
       } else {
         this.range.refresh = true;
diff --git a/ide/src/trace/component/trace/timer-shaft/Rect.ts b/ide/src/trace/component/trace/timer-shaft/Rect.ts
index d80bc81ed8d12aff2da3b88534367b8d363d3deb..a0fb8ca1520109b704197e5198428d6095b76348 100644
--- a/ide/src/trace/component/trace/timer-shaft/Rect.ts
+++ b/ide/src/trace/component/trace/timer-shaft/Rect.ts
@@ -16,56 +16,57 @@
 export class Rect {
   x: number = 0;
   y: number = 0;
-  width: number = 0;
   height: number = 0;
+  width: number = 0;
+
 
   constructor(x: number, y: number, width: number, height: number) {
     this.x = x;
     this.y = y;
-    this.width = width;
     this.height = height;
+    this.width = width;
   }
 
-  static contains(rect: Rect, x: number, y: number): boolean {
-    return rect.x <= x && x <= rect.x + rect.width && rect.y <= y && y <= rect.y + rect.height;
+  static contains(rectObj: Rect, x: number, y: number): boolean {
+    return rectObj.x <= x && x <= rectObj.x + rectObj.width && rectObj.y <= y && y <= rectObj.y + rectObj.height;
   }
 
   static containsWithPadding(
-    rect: Rect,
+    rectObj: Rect,
     x: number,
     y: number,
     paddingLeftRight: number,
     paddingTopBottom: number
   ): boolean {
     return (
-      rect.x + paddingLeftRight <= x &&
-      x <= rect.x + rect.width - paddingLeftRight &&
-      rect.y + paddingTopBottom <= y &&
-      y <= rect.y + rect.height - paddingTopBottom
+      rectObj.x + paddingLeftRight <= x &&
+      x <= rectObj.x + rectObj.width - paddingLeftRight &&
+      rectObj.y + paddingTopBottom <= y &&
+      y <= rectObj.y + rectObj.height - paddingTopBottom
     );
   }
 
-  static containsWithMargin(rect: Rect, x: number, y: number, t: number, r: number, b: number, l: number): boolean {
-    return rect.x - l <= x && x <= rect.x + rect.width + r && rect.y - t <= y && y <= rect.y + rect.height + b;
+  static containsWithMargin(rectObj: Rect, x: number, y: number, t: number, r: number, b: number, l: number): boolean {
+    return rectObj.x - l <= x && x <= rectObj.x + rectObj.width + r && rectObj.y - t <= y && y <= rectObj.y + rectObj.height + b;
   }
 
-  static intersect(r1: Rect, rect: Rect): boolean {
-    let maxX = r1.x + r1.width > rect.x + rect.width ? r1.x + r1.width : rect.x + rect.width;
-    let maxY = r1.y + r1.height > rect.y + rect.height ? r1.y + r1.height : rect.y + rect.height;
-    let minX = r1.x < rect.x ? r1.x : rect.x;
-    let minY = r1.y < rect.y ? r1.y : rect.y;
-    if (maxX - minX < rect.width + r1.width && maxY - minY < r1.height + rect.height) {
+  static intersect(rectA: Rect, rectB: Rect): boolean {
+    let maxX = rectA.x + rectA.width > rectB.x + rectB.width ? rectA.x + rectA.width : rectB.x + rectB.width;
+    let maxY = rectA.y + rectA.height > rectB.y + rectB.height ? rectA.y + rectA.height : rectB.y + rectB.height;
+    let minX = rectA.x < rectB.x ? rectA.x : rectB.x;
+    let minY = rectA.y < rectB.y ? rectA.y : rectB.y;
+    if (maxX - minX < rectB.width + rectA.width && maxY - minY < rectA.height + rectB.height) {
       return true;
     } else {
       return false;
     }
   }
 
-  static getIntersect(r1: DOMRect | Rect, rect: DOMRect | Rect): Rect {
-    let maxX = Math.max(r1.x, rect.x);
-    let maxY = Math.max(r1.y, rect.y);
-    let width = Math.abs(Math.min(r1.x + r1.width, rect.x + rect.width) - Math.max(r1.x, rect.x));
-    let height = Math.abs(Math.min(r1.y + r1.height, rect.y + rect.height) - Math.max(r1.y, rect.y));
+  static getIntersect(rectA: DOMRect | Rect, rectB: DOMRect | Rect): Rect {
+    let maxX = Math.max(rectA.x, rectB.x);
+    let maxY = Math.max(rectA.y, rectB.y);
+    let width = Math.abs(Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
+    let height = Math.abs(Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
     return new Rect(maxX, maxY, width, height);
   }
 
@@ -73,12 +74,12 @@ export class Rect {
     return this.x <= x && x <= this.x + this.width && this.y <= y && y <= this.y + this.height;
   }
 
-  containsWithPadding(x: number, y: number, paddingLeftRight: number, paddingTopBottom: number): boolean {
+  containsWithPadding(x: number, y: number, paddingLeftOrRight: number, paddingTopOrBottom: number): boolean {
     return (
-      this.x + paddingLeftRight <= x &&
-      x <= this.x + this.width - paddingLeftRight &&
-      this.y + paddingTopBottom <= y &&
-      y <= this.y + this.height - paddingTopBottom
+      this.x + paddingLeftOrRight <= x &&
+      x <= this.x + this.width - paddingLeftOrRight &&
+      this.y + paddingTopOrBottom <= y &&
+      y <= this.y + this.height - paddingTopOrBottom
     );
   }
 
@@ -88,14 +89,14 @@ export class Rect {
 
   /**
    * 判断是否相交
-   * @param rect
+   * @param rectObj
    */
-  intersect(rect: Rect): boolean {
-    let maxX = this.x + this.width >= rect.x + rect.width ? this.x + this.width : rect.x + rect.width;
-    let maxY = this.y + this.height >= rect.y + rect.height ? this.y + this.height : rect.y + rect.height;
-    let minX = this.x <= rect.x ? this.x : rect.x;
-    let minY = this.y <= rect.y ? this.y : rect.y;
-    if (maxX - minX <= rect.width + this.width && maxY - minY <= this.height + rect.height) {
+  intersect(rectObj: Rect): boolean {
+    let maxX = this.x + this.width >= rectObj.x + rectObj.width ? this.x + this.width : rectObj.x + rectObj.width;
+    let maxY = this.y + this.height >= rectObj.y + rectObj.height ? this.y + this.height : rectObj.y + rectObj.height;
+    let minX = this.x <= rectObj.x ? this.x : rectObj.x;
+    let minY = this.y <= rectObj.y ? this.y : rectObj.y;
+    if (maxX - minX <= rectObj.width + this.width && maxY - minY <= this.height + rectObj.height) {
       return true;
     } else {
       return false;
diff --git a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
index 4a6001ce957bca6846fbac114eff920ffec38637..4a99b542b3fd82ef64ce88b6872686b1545aa6cb 100644
--- a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
@@ -85,28 +85,28 @@ export class SportRuler extends Graph {
     this.c.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height + 1);
     this.c.beginPath();
     this.lineColor = window.getComputedStyle(this.canvas!, null).getPropertyValue('color');
-    this.c.strokeStyle = this.lineColor; //"#dadada"
     this.c.lineWidth = 1;
+    this.c.strokeStyle = this.lineColor; //"#dadada"
     this.c.moveTo(this.frame.x, this.frame.y);
     this.c.lineTo(this.frame.x + this.frame.width, this.frame.y);
     this.c.stroke();
     this.c.closePath();
     this.c.beginPath();
-    this.c.lineWidth = 3;
     this.c.strokeStyle = '#999999';
+    this.c.lineWidth = 3;
     this.c.moveTo(this.frame.x, this.frame.y);
     this.c.lineTo(this.frame.x, this.frame.y + this.frame.height);
     this.c.stroke();
     this.c.closePath();
     this.c.beginPath();
-    this.c.lineWidth = 1;
     this.c.strokeStyle = this.lineColor; //"#999999"
+    this.c.lineWidth = 1;
     this.c.fillStyle = '#999999';
     this.c.font = '8px sans-serif';
-    this.range.xs?.forEach((it, i) => {
-      this.c.moveTo(it, this.frame.y);
-      this.c.lineTo(it, this.frame.y + this.frame.height);
-      this.c.fillText(`+${this.range.xsTxt[i]}`, it + 3, this.frame.y + 12);
+    this.range.xs?.forEach((item, index) => {
+      this.c.moveTo(item, this.frame.y);
+      this.c.lineTo(item, this.frame.y + this.frame.height);
+      this.c.fillText(`+${this.range.xsTxt[index]}`, item + 3, this.frame.y + 12);
     });
     this.c.stroke();
     this.c.closePath();
@@ -131,22 +131,22 @@ export class SportRuler extends Graph {
         this.c.strokeStyle = '#000';
         this.c.fillStyle = '#000';
       }
-      let startX = ns2x(range?.startNS || 0, this.range.startNS, this.range.endNS, this.range.totalNS, this.frame);
+      let start_X = ns2x(range?.startNS || 0, this.range.startNS, this.range.endNS, this.range.totalNS, this.frame);
       let endX = ns2x(range?.endNS || 0, this.range.startNS, this.range.endNS, this.range.totalNS, this.frame);
-      let lineWidth = endX - startX;
+      let lineWidth = endX - start_X;
       let txt = ns2s((range?.endNS || 0) - (range?.startNS || 0));
-      this.c.moveTo(startX, this.frame.y + 22);
+      this.c.moveTo(start_X, this.frame.y + 22);
       this.c.lineTo(endX, this.frame.y + 22);
-      this.c.moveTo(startX, this.frame.y + 22 - 5);
-      this.c.lineTo(startX, this.frame.y + 22 + 5);
+      this.c.moveTo(start_X, this.frame.y + 22 - 5);
+      this.c.lineTo(start_X, this.frame.y + 22 + 5);
       this.c.moveTo(endX, this.frame.y + 22 - 5);
       this.c.lineTo(endX, this.frame.y + 22 + 5);
-      let txtWidth = this.c.measureText(txt).width;
-      if (lineWidth > txtWidth) {
-        this.c.fillText(`${txt}`, startX + (lineWidth - txtWidth) / 2, this.frame.y + 20);
+      let textWidth = this.c.measureText(txt).width;
+      if (lineWidth > textWidth) {
+        this.c.fillText(`${txt}`, start_X + (lineWidth - textWidth) / 2, this.frame.y + 20);
       } else {
-        if (endX + txtWidth >= this.frame.width) {
-          this.c.fillText(`${txt}`, startX - 5 - txtWidth, this.frame.y + 20);
+        if (endX + textWidth >= this.frame.width) {
+          this.c.fillText(`${txt}`, start_X - 5 - textWidth, this.frame.y + 20);
         } else {
           this.c.fillText(`${txt}`, endX + 5, this.frame.y + 20);
         }
@@ -325,7 +325,7 @@ export class SportRuler extends Graph {
   }
 
   //绘制旗子
-  drawFlag(x: number, color: string = '#999999', isFill: boolean = false, text: string = '', type: string = '') {
+  drawFlag(x: number, color: string = '#999999', isFill: boolean = false, textStr: string = '', type: string = '') {
     if (x < 0) return;
     this.c.beginPath();
     this.c.fillStyle = color;
@@ -347,13 +347,13 @@ export class SportRuler extends Graph {
     this.c.closePath();
     isFill && this.c.fill();
     this.c.stroke();
-    if (text !== '') {
+    if (textStr !== '') {
       this.c.font = '10px Microsoft YaHei';
-      const { width } = this.c.measureText(text);
+      const { width } = this.c.measureText(textStr);
       this.c.fillStyle = 'rgba(255, 255, 255, 0.8)'; //
       this.c.fillRect(x + 21, 132, width + 4, 12);
       this.c.fillStyle = 'black';
-      this.c.fillText(text, x + 23, 142);
+      this.c.fillText(textStr, x + 23, 142);
       this.c.stroke();
     }
   }
diff --git a/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts b/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts
index 172ad525549f97f3272a8be871fecf6b733db90d..ef7ed2a0d55407b890704653a68b236d641dfc38 100644
--- a/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts
@@ -32,24 +32,24 @@ export class TimeRuler extends Graph {
   }
 
   draw() {
-    this.step = this.frame.width / 10;
     this.stepSmall = this.frame.width / 100;
+    this.step = this.frame.width / 10;
     this.stepNS = this.totalNS / 10;
     this.c.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height);
     this.c.beginPath();
-    this.c.strokeStyle = '#999';
     this.c.lineWidth = 1;
-    for (let i = 0; i <= 10; i++) {
-      let x = Math.floor(i * this.step) + this.frame.x;
+    this.c.strokeStyle = '#999';
+    for (let index = 0; index <= 10; index++) {
+      let x = Math.floor(index * this.step) + this.frame.x;
       this.c.moveTo(x, 0);
       this.c.lineTo(x, this.frame.height);
-      if (i == 10) break;
-      for (let j = 1; j < 10; j++) {
-        this.c.moveTo(x + Math.floor(j * this.stepSmall), 0);
-        this.c.lineTo(x + Math.floor(j * this.stepSmall), this.frame.height / 4);
+      if (index == 10) break;
+      for (let inner_index = 1; inner_index < 10; inner_index++) {
+        this.c.moveTo(x + Math.floor(inner_index * this.stepSmall), 0);
+        this.c.lineTo(x + Math.floor(inner_index * this.stepSmall), this.frame.height / 4);
       }
       this.c.fillStyle = '#999';
-      this.c.fillText(`${ns2s(i * this.stepNS)}`, x + 5, this.frame.height - 1);
+      this.c.fillText(`${ns2s(index * this.stepNS)}`, x + 5, this.frame.height - 1);
     }
     this.c.stroke();
     this.c.closePath();
diff --git a/ide/src/trace/database/Procedure.ts b/ide/src/trace/database/Procedure.ts
index 9f222287d58c80f8db74a639225e82c0a5d0a140..493e983080f790c7415ad3a91c21f6e9cab40846 100644
--- a/ide/src/trace/database/Procedure.ts
+++ b/ide/src/trace/database/Procedure.ts
@@ -94,36 +94,36 @@ class ProcedurePool {
   }
 
   newThread() {
-    let thread: ProcedureThread = new ProcedureThread('trace/database/ui-worker/ProcedureWorker.js', {
+    let newThread: ProcedureThread = new ProcedureThread('trace/database/ui-worker/ProcedureWorker.js', {
       type: 'module',
     });
-    thread.name = this.names[this.works.length];
-    thread.onmessage = (event: MessageEvent) => {
-      thread.busy = false;
+    newThread.name = this.names[this.works.length];
+    newThread.onmessage = (event: MessageEvent) => {
+      newThread.busy = false;
       if ((event.data.type as string) == 'timeline-range-changed') {
         this.timelineChange && this.timelineChange(event.data.results);
-        thread.busy = false;
+        newThread.busy = false;
         return;
       }
-      if (Reflect.has(thread.taskMap, event.data.id)) {
+      if (Reflect.has(newThread.taskMap, event.data.id)) {
         if (event.data) {
-          let fun = thread.taskMap[event.data.id];
+          let fun = newThread.taskMap[event.data.id];
           if (fun) {
             fun(event.data.results, event.data.hover);
           }
-          Reflect.deleteProperty(thread.taskMap, event.data.id);
+          Reflect.deleteProperty(newThread.taskMap, event.data.id);
         }
       }
       if (this.isIdle() && this.onComplete) {
         this.onComplete();
       }
     };
-    thread.onmessageerror = (e) => {};
-    thread.onerror = (e) => {};
-    thread.id = this.works.length;
-    thread.busy = false;
-    this.works?.push(thread);
-    return thread;
+    newThread.onmessageerror = (e) => {};
+    newThread.onerror = (e) => {};
+    newThread.id = this.works.length;
+    newThread.busy = false;
+    this.works?.push(newThread);
+    return newThread;
   }
 
   logicDataThread() {
diff --git a/ide/src/trace/database/SqlLite.ts b/ide/src/trace/database/SqlLite.ts
index b7af023dd260112a58569e4c37e2ddeca9142c64..78c0fd1dc45dd81561f9f29820a369939f679410 100644
--- a/ide/src/trace/database/SqlLite.ts
+++ b/ide/src/trace/database/SqlLite.ts
@@ -16,7 +16,6 @@
 import './sql-wasm.js';
 
 import { Counter, Fps, SelectionData } from '../bean/BoxSelection.js';
-import { WakeUpTimeBean } from '../bean/WakeUpTimeBean.js';
 import { WakeupBean } from '../bean/WakeupBean.js';
 import { BinderArgBean } from '../bean/BinderArgBean.js';
 import { SPT, SPTChild } from '../bean/StateProcessThread.js';
@@ -635,14 +634,14 @@ export const getTabCpuFreq = (cpus: Array<number>, leftNs: number, rightNs: numb
     select
       cpu,
       value,
-      (ts - tb.start_ts) as startNs
+      (ts - tr.start_ts) as startNs
     from
-      measure c,
-      trace_range tb
+      measure m,
+      trace_range tr
     inner join
       cpu_measure_filter t
     on
-      c.filter_id = t.id
+      m.filter_id = t.id
     where
       (name = 'cpufreq' or name='cpu_frequency')
     and
@@ -723,18 +722,18 @@ export const getTabVirtualCounters = (virtualFilterIds: Array<number>, startTime
     'getTabVirtualCounters',
     `
     select
-      t1.filter_id as trackId,
-      t2.name,
+      table1.filter_id as trackId,
+      table2.name,
       value,
-      t1.ts - t3.start_ts as startTime
+      table1.ts - table3.start_ts as startTime
     from
-      sys_mem_measure t1
+      sys_mem_measure table1
     left join
-      sys_event_filter t2
+      sys_event_filter table2
     on
-      t1.filter_id = t2.id
+      table1.filter_id = table2.id
     left join
-      trace_range t3
+      trace_range table3
     where
       filter_id in (${virtualFilterIds.join(',')})
     and
@@ -772,23 +771,23 @@ export const getTabCpuByThread = (cpus: Array<number>, leftNS: number, rightNS:
     'getTabCpuByThread',
     `
     select
-      B.pid as pid,
-      B.tid as tid,
-      B.cpu,
-      sum( min(${rightNS},(B.ts - TR.start_ts + B.dur)) - max(${leftNS},B.ts - TR.start_ts)) wallDuration,
-      count(B.tid) as occurrences
+      TS.pid as pid,
+      TS.tid as tid,
+      TS.cpu,
+      sum( min(${rightNS},(TS.ts - TR.start_ts + TS.dur)) - max(${leftNS},TS.ts - TR.start_ts)) wallDuration,
+      count(TS.tid) as occurrences
     from
-      thread_state AS B
+      thread_state AS TS
     left join
       trace_range AS TR
     where
-      B.cpu in (${cpus.join(',')})
+      TS.cpu in (${cpus.join(',')})
     and
-      not ((B.ts - TR.start_ts + B.dur < $leftNS) or (B.ts - TR.start_ts > $rightNS))
+      not ((TS.ts - TR.start_ts + TS.dur < $leftNS) or (TS.ts - TR.start_ts > $rightNS))
     group by
-      B.cpu,
-      B.pid,
-      B.tid
+      TS.cpu,
+      TS.pid,
+      TS.tid
     order by
       wallDuration desc;`,
     { $rightNS: rightNS, $leftNS: leftNS }
@@ -804,17 +803,17 @@ export const getTabSlices = (funTids: Array<number>, leftNS: number, rightNS: nu
       avg(c.dur) as avgDuration,
       count(c.name) as occurrences
     from
-      thread A, trace_range D
+      thread T, trace_range TR
     left join
       callstack C
     on
-      A.id = C.callid
+      T.id = C.callid
     where
       C.ts not null
     and
       c.dur >= 0
     and
-      A.tid in (${funTids.join(',')})
+      T.tid in (${funTids.join(',')})
     and
       c.name != 'binder transaction async'
     and
@@ -822,7 +821,7 @@ export const getTabSlices = (funTids: Array<number>, leftNS: number, rightNS: nu
     and
       c.cookie is null
     and
-      not ((C.ts - D.start_ts + C.dur < $leftNS) or (C.ts - D.start_ts > $rightNS))
+      not ((C.ts - TR.start_ts + C.dur < $leftNS) or (C.ts - TR.start_ts > $rightNS))
     group by
       c.name
     order by
@@ -1405,15 +1404,15 @@ export const queryNativeHookStatisticsSubType = (leftNs: number, rightNs: number
       event_type as eventType,
       sub_type_id as subTypeId,
       max(heap_size) as max,
-      sum(case when ((A.start_ts - B.start_ts) between ${leftNs} and ${rightNs}) then heap_size else 0 end) as allocByte,
-      sum(case when ((A.start_ts - B.start_ts) between ${leftNs} and ${rightNs}) then 1 else 0 end) as allocCount,
-      sum(case when ((A.end_ts - B.start_ts) between ${leftNs} and ${rightNs} ) then heap_size else 0 end) as freeByte,
-      sum(case when ((A.end_ts - B.start_ts) between ${leftNs} and ${rightNs} ) then 1 else 0 end) as freeCount
+      sum(case when ((NH.start_ts - TR.start_ts) between ${leftNs} and ${rightNs}) then heap_size else 0 end) as allocByte,
+      sum(case when ((NH.start_ts - TR.start_ts) between ${leftNs} and ${rightNs}) then 1 else 0 end) as allocCount,
+      sum(case when ((NH.end_ts - TR.start_ts) between ${leftNs} and ${rightNs} ) then heap_size else 0 end) as freeByte,
+      sum(case when ((NH.end_ts - TR.start_ts) between ${leftNs} and ${rightNs} ) then 1 else 0 end) as freeCount
     from
-      native_hook A,
-      trace_range B
+      native_hook NH,
+      trace_range TR
     where
-      (A.start_ts - B.start_ts) between ${leftNs} and ${rightNs}
+      (NH.start_ts - TR.start_ts) between ${leftNs} and ${rightNs}
     and
       (event_type = 'MmapEvent')
     group by
@@ -1811,18 +1810,18 @@ export const queryTraceMemoryTop = (): Promise<
         max(value) as maxNum,
         min(value) as minNum,
         avg(value) as avgNum,
-        filter.name as name,
+        f.name as name,
         p.name as processName
         from process_measure
-        left join process_measure_filter as filter on filter.id= filter_id
-        left join process as p on p.id = filter.ipid
-    where 
-    filter_id > 0 
-    and 
-    filter.name = 'mem.rss.anon' 
-    group by 
-    filter_id 
-    order by 
+        left join process_measure_filter as f on f.id= filter_id
+        left join process as p on p.id = f.ipid
+    where
+    filter_id > 0
+    and
+    f.name = 'mem.rss.anon'
+    group by
+    filter_id
+    order by
     avgNum desc limit 10`
   );
 
@@ -2613,20 +2612,21 @@ export const getTabPaneFilesystemStatisticsFather = (leftNs: number, rightNs: nu
   query(
     'getTabPaneFilesystemStatisticsFather',
     `
-        select SUM(dur)    as allDuration,
-        count(f.type) as count,
-        min(dur)    as minDuration,
-        max(dur)    as maxDuration,
-        round(avg(dur),2)    as avgDuration,
-        p.name,
-        f.type,
-        p.pid,
-        sum(ifnull(size,0))    as size
-        from file_system_sample as f left join process as p on f.ipid=p.ipid
-        where f.start_ts >= $leftNs
-        and end_ts <= $rightNs
-        group by f.type;
-`,
+    select SUM(dur) as allDuration,
+    count(f.type) as count,
+    min(dur) as minDuration,
+    max(dur) as maxDuration,
+    round(avg(dur),2) as avgDuration,
+    p.name,
+    f.type,
+    p.pid,
+    sum(ifnull(size,0)) as size
+    from file_system_sample as f
+    left join process as p on f.ipid=p.ipid
+    where f.start_ts >= $leftNs
+    and end_ts <= $rightNs
+    group by f.type;
+    `,
     { $leftNs: leftNs, $rightNs: rightNs }
   );
 
@@ -3059,19 +3059,20 @@ export const querySystemDetailsData = (rightNs: number, eventName: string): Prom
         ( S.ts - TR.start_ts ) AS ts,
         D.data AS eventName,
         D2.data AS appKey,
-        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS appValue 
-        FROM
+        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS appValue
+    FROM
         trace_range AS TR,
         hisys_event_measure AS S
         LEFT JOIN data_dict AS D ON D.id = S.name_id
         LEFT JOIN app_name AS APP ON APP.id = S.key_id
-        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key 
-        WHERE
-        D.data in ($eventName) 
-        and 
+        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key
+    WHERE
+        D.data in ($eventName)
+    AND
         D2.data in ('UID', 'TYPE', 'WORKID', 'NAME', 'INTERVAL', 'TAG', 'STATE', 'STACK', 'APPNAME', 'MESSAGE', 'PID', 'LOG_LEVEL')
-        and (S.ts - TR.start_ts) <= $rightNS
-        GROUP BY
+    AND
+        (S.ts - TR.start_ts) <= $rightNS
+    GROUP BY
         S.serial,
         APP.app_key,
         D.data,
@@ -3086,16 +3087,19 @@ export const querySystemWorkData = (rightNs: number): Promise<Array<SystemDetail
         ( S.ts - TR.start_ts ) AS ts,
         D.data AS eventName,
         D2.data AS appKey,
-        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS appValue 
+        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS appValue
         FROM
         trace_range AS TR,
         hisys_event_measure AS S
-        LEFT JOIN data_dict AS D ON D.id = S.name_id
-        LEFT JOIN app_name AS APP ON APP.id = S.key_id
-        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key 
+        LEFT JOIN data_dict AS D
+        ON D.id = S.name_id
+        LEFT JOIN app_name AS APP
+        ON APP.id = S.key_id
+        LEFT JOIN data_dict AS D2
+        ON D2.id = APP.app_key
         WHERE
-        D.data in ("WORK_REMOVE", "WORK_STOP", "WORK_ADD", "WORK_START") 
-        and 
+        D.data in ("WORK_REMOVE", "WORK_STOP", "WORK_ADD", "WORK_START")
+        and
         D2.data in ('UID', 'TYPE', 'WORKID', 'NAME', 'INTERVAL', 'TAG', 'STATE', 'STACK', 'APPNAME', 'MESSAGE', 'PID', 'LOG_LEVEL')
         and (S.ts - TR.start_ts) <= $rightNS
         GROUP BY
@@ -3144,22 +3148,25 @@ export const queryPowerData = (): Promise<
         ( S.ts - TR.start_ts ) AS startNS,
         D.data AS eventName,
         D2.data AS appKey,
-        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS eventValue 
+        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS eventValue
         FROM
         trace_range AS TR,
         hisys_event_measure AS S
-        LEFT JOIN data_dict AS D ON D.id = S.name_id
-        LEFT JOIN app_name AS APP ON APP.id = S.key_id
-        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key 
-        where 
+        LEFT JOIN data_dict AS D
+        ON D.id = S.name_id
+        LEFT JOIN app_name AS APP
+        ON APP.id = S.key_id
+        LEFT JOIN data_dict AS D2
+        ON D2.id = APP.app_key
+        where
         D.data in ('POWER_IDE_CPU','POWER_IDE_LOCATION','POWER_IDE_GPU','POWER_IDE_DISPLAY','POWER_IDE_CAMERA','POWER_IDE_BLUETOOTH','POWER_IDE_FLASHLIGHT','POWER_IDE_AUDIO','POWER_IDE_WIFISCAN')
-        and 
+        and
         D2.data in ('BACKGROUND_ENERGY','FOREGROUND_ENERGY','SCREEN_ON_ENERGY','SCREEN_OFF_ENERGY','ENERGY','APPNAME')
         GROUP BY
         S.serial,
         APP.app_key,
         D.data,
-        D2.data 
+        D2.data
         ORDER BY
         eventName;`,
     {}
@@ -3182,16 +3189,16 @@ export const getTabPowerDetailsData = (
         ( S.ts - TR.start_ts ) AS startNS,
         D.data AS eventName,
         D2.data AS appKey,
-        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS eventValue 
+        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS eventValue
         FROM
         trace_range AS TR,
         hisys_event_measure AS S
         LEFT JOIN data_dict AS D ON D.id = S.name_id
         LEFT JOIN app_name AS APP ON APP.id = S.key_id
-        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key 
-        where 
+        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key
+        where
         D.data in ('POWER_IDE_CPU','POWER_IDE_LOCATION','POWER_IDE_GPU','POWER_IDE_DISPLAY','POWER_IDE_CAMERA','POWER_IDE_BLUETOOTH','POWER_IDE_FLASHLIGHT','POWER_IDE_AUDIO','POWER_IDE_WIFISCAN')
-        and 
+        and
         D2.data in ('APPNAME')
         GROUP BY
         S.serial,
@@ -3201,30 +3208,30 @@ export const getTabPowerDetailsData = (
         UNION
         SELECT
         ( S.ts - TR.start_ts ) AS startNS,
-        D.data AS eventName,
+        D1.data AS eventName,
         D2.data AS appKey,
-        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS eventValue 
+        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS eventValue
         FROM
         trace_range AS TR,
         hisys_event_measure AS S
-        LEFT JOIN data_dict AS D ON D.id = S.name_id
+        LEFT JOIN data_dict AS D1 ON D1.id = S.name_id
         LEFT JOIN app_name AS APP ON APP.id = S.key_id
-        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key 
-        where 
-        D.data in ('POWER_IDE_CPU','POWER_IDE_LOCATION','POWER_IDE_GPU','POWER_IDE_DISPLAY','POWER_IDE_CAMERA','POWER_IDE_BLUETOOTH','POWER_IDE_FLASHLIGHT','POWER_IDE_AUDIO','POWER_IDE_WIFISCAN')
-        and 
-        D2.data in ('CHARGE','BACKGROUND_TIME','SCREEN_ON_TIME','SCREEN_OFF_TIME','LOAD','USAGE','DURATION','CAMERA_ID', 
+        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key
+        where
+        D1.data in ('POWER_IDE_CPU','POWER_IDE_LOCATION','POWER_IDE_GPU','POWER_IDE_DISPLAY','POWER_IDE_CAMERA','POWER_IDE_BLUETOOTH','POWER_IDE_FLASHLIGHT','POWER_IDE_AUDIO','POWER_IDE_WIFISCAN')
+        and
+        D2.data in ('CHARGE','BACKGROUND_TIME','SCREEN_ON_TIME','SCREEN_OFF_TIME','LOAD','USAGE','DURATION','CAMERA_ID',
         'FOREGROUND_COUNT','BACKGROUND_COUNT','SCREEN_ON_COUNT','SCREEN_OFF_COUNT','COUNT','UID','FOREGROUND_DURATION',
         'FOREGROUND_ENERGY','BACKGROUND_DURATION','BACKGROUND_ENERGY','SCREEN_ON_DURATION','SCREEN_ON_ENERGY',
         'SCREEN_OFF_DURATION','SCREEN_OFF_ENERGY','ENERGY')
-        and 
+        and
         (S.ts - TR.start_ts) >= $leftNS
         and (S.ts - TR.start_ts) <= $rightNS
         GROUP BY
         S.serial,
         APP.app_key,
-        D.data,
-        D2.data 
+        D1.data,
+        D2.data
         ORDER BY
         eventName;`,
     { $leftNS: leftNs, $rightNS: rightNs }
@@ -3333,44 +3340,44 @@ export const queryAnomalyDetailedData = (leftNs: number, rightNs: number): Promi
     `select
   S.ts,
   D.data as eventName,
-  D2.data as appKey, 
-  group_concat((case when S.type==1 then S.string_value else S.int_value end), ',') as Value 
-  from trace_range AS TR,hisys_event_measure as S 
-  left join data_dict as D on D.id=S.name_id 
-  left join app_name as APP on APP.id=S.key_id 
+  D2.data as appKey,
+  group_concat((case when S.type==1 then S.string_value else S.int_value end), ',') as Value
+  from trace_range AS TR,hisys_event_measure as S
+  left join data_dict as D on D.id=S.name_id
+  left join app_name as APP on APP.id=S.key_id
   left join data_dict as D2 on D2.id=APP.app_key
   where D.data in ('ANOMALY_SCREEN_OFF_ENERGY','ANOMALY_ALARM_WAKEUP','ANOMALY_KERNEL_WAKELOCK',
   'ANOMALY_RUNNINGLOCK','ANORMALY_APP_ENERGY','ANOMALY_GNSS_ENERGY','ANOMALY_CPU_HIGH_FREQUENCY','ANOMALY_CPU_ENERGY','ANOMALY_WAKEUP')
   and D2.data in ('APPNAME')
   and (S.ts - TR.start_ts) >= $leftNS
-   and (S.ts - TR.start_ts) <= $rightNS 
+   and (S.ts - TR.start_ts) <= $rightNS
   group by S.serial,APP.app_key,D.data,D2.data
-  union 
+  union
   select
   S.ts,
   D.data as eventName,
-  D2.data as appKey, 
-  group_concat((case when S.type==1 then S.string_value else S.int_value end), ',') as Value 
-  from trace_range AS TR,hisys_event_measure as S 
-  left join data_dict as D on D.id=S.name_id 
-  left join app_name as APP on APP.id=S.key_id 
-  left join data_dict as D2 on D2.id=APP.app_key
-  where D.data in ('ANOMALY_SCREEN_OFF_ENERGY','ANOMALY_ALARM_WAKEUP','ANOMALY_KERNEL_WAKELOCK',
-  'ANOMALY_RUNNINGLOCK','ANORMALY_APP_ENERGY','ANOMALY_GNSS_ENERGY','ANOMALY_CPU_HIGH_FREQUENCY','ANOMALY_CPU_ENERGY','ANOMALY_WAKEUP')
-  and D2.data not in ('pid_','tid_','type_','tz_','uid_','domain_', 'id_', 'level_', 'info_', 'tag_', 'APPNAME')
+  D2.data as appKey,
+  group_concat((case when S.type == 1 then S.string_value else S.int_value end), ',') as Value
+  from trace_range AS TR,hisys_event_measure as S
+  left join data_dict as D on D.id = S.name_id
+  left join app_name as APP on APP.id = S.key_id
+  left join data_dict as D2 on D2.id = APP.app_key
+  where D.data in ('ANOMALY_SCREEN_OFF_ENERGY', 'ANOMALY_ALARM_WAKEUP', 'ANOMALY_KERNEL_WAKELOCK',
+  'ANOMALY_RUNNINGLOCK', 'ANORMALY_APP_ENERGY', 'ANOMALY_GNSS_ENERGY', 'ANOMALY_CPU_HIGH_FREQUENCY', 'ANOMALY_CPU_ENERGY', 'ANOMALY_WAKEUP')
+  and D2.data not in ('pid_', 'tid_', 'type_', 'tz_', 'uid_', 'domain_', 'id_', 'level_', 'info_', 'tag_', 'APPNAME')
   and (S.ts - TR.start_ts) >= $leftNS
-   and (S.ts - TR.start_ts) <= $rightNS 
-  group by S.serial,APP.app_key,D.data,D2.data;`,
+  and (S.ts - TR.start_ts) <= $rightNS
+  group by S.serial, APP.app_key, D.data, D2.data;`,
     { $leftNS: leftNs, $rightNS: rightNs }
   );
 
 export const querySmapsExits = (): Promise<Array<any>> =>
   query(
     'querySmapsExits',
-    `select 
-      event_name 
-      from stat s 
-      where s.event_name = 'trace_smaps' 
+    `select
+      event_name
+      from stat s
+      where s.event_name = 'trace_smaps'
       and s.stat_type ='received' and s.count > 0`
   );
 
@@ -3498,23 +3505,21 @@ export const querySysLockDetailsData = (rightNs: number, eventName: string): Pro
         ( S.ts - TR.start_ts ) AS ts,
         D.data AS eventName,
         D2.data AS appKey,
-        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS appValue 
-        FROM
+        group_concat( ( CASE WHEN S.type == 1 THEN S.string_value ELSE S.int_value END ), ',' ) AS appValue
+    FROM
         trace_range AS TR,
         hisys_event_measure AS S
         LEFT JOIN data_dict AS D ON D.id = S.name_id
         LEFT JOIN app_name AS APP ON APP.id = S.key_id
-        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key 
-        WHERE
-        D.data in ($eventName) 
-        and 
+        LEFT JOIN data_dict AS D2 ON D2.id = APP.app_key
+    WHERE
+        D.data in ($eventName)
+    AND
         D2.data in ('UID', 'TYPE', 'WORKID', 'NAME', 'INTERVAL', 'TAG', 'STATE', 'STACK', 'APPNAME', 'MESSAGE', 'PID', 'LOG_LEVEL')
-        and (S.ts - TR.start_ts) <= $rightNS
-        GROUP BY
-        S.serial,
-        APP.app_key,
-        D.data,
-        D2.data;`,
+    AND
+        (S.ts - TR.start_ts) <= $rightNS
+    GROUP BY
+        S.serial, APP.app_key, D.data, D2.data;`,
     { $rightNS: rightNs, $eventName: eventName }
   );
 
@@ -3598,23 +3603,18 @@ export const queryClockData = (): Promise<
   query(
     'queryClockData',
     `
-    with freq as(
-    select measure.filter_id, measure.ts, measure.type, measure.value , clock_event_filter.name from clock_event_filter
-    left join measure
-    where  clock_event_filter.type = 'clock_set_rate' and clock_event_filter.id = measure.filter_id
-    order by measure.ts
-),state as (
-    select filter_id, ts, endts, endts-ts as dur, type, value,name from
-    (select measure.filter_id, measure.ts, lead(ts, 1, null) over( order by measure.ts) endts, measure.type, measure.value,clock_event_filter.name from clock_event_filter,trace_range
-    left join measure
-    where clock_event_filter.type != 'clock_set_rate' and clock_event_filter.id = measure.filter_id
-    order by measure.ts)
-),count_freq as (
-    select COUNT(*) num,name srcname from freq group by name
-),count_state as (
-    select COUNT(*) num,name srcname from state group by name
-)
-select count_freq.srcname||' Frequency' as name,* from count_freq union select count_state.srcname||' State' as name,* from count_state order by name`
+    select name || ' Frequency' name, COUNT(*) num, name srcname
+from (select id, name
+      from clock_event_filter
+      where type = 'clock_set_rate')
+group by name
+union
+select name || ' State' name, COUNT(*) num, name srcname
+from (select id, name
+      from clock_event_filter
+      where type != 'clock_set_rate')
+group by name;
+`
   );
 
 export const queryClockFrequency = (clockName: string): Promise<Array<ClockStruct>> =>
@@ -3787,71 +3787,71 @@ export const queryExpectedFrameDate = (): Promise<Array<any>> =>
   query(
     'queryExpectedFrameDate',
     `
-        SELECT
-               sf.id,
-               'frameTime' as frame_type,
-               fs.ipid,
-               fs.vsync as name,
-               fs.dur as app_dur,
-               (sf.ts + sf.dur - fs.ts) as dur,
-               (fs.ts - TR.start_ts) AS ts,
-               fs.type,
-               fs.flag,
-               pro.pid,
-               pro.name as cmdline,
-               (sf.ts - TR.start_ts) AS rs_ts,
-               sf.vsync AS rs_vsync,
-               sf.dur AS rs_dur,
-               sf.ipid AS rs_ipid,
-               proc.pid AS rs_pid,
-               proc.name AS rs_name
-        FROM frame_slice AS fs
-                 LEFT JOIN process AS pro ON pro.id = fs.ipid
-                 LEFT JOIN frame_slice AS sf ON fs.dst = sf.id
-                 LEFT JOIN process AS proc ON proc.id = sf.ipid
-                 LEFT JOIN trace_range TR
-        WHERE fs.dst IS NOT NULL
-          AND fs.type = 1
-        UNION
-        SELECT
-                -1 as id,
-               'frameTime' as frame_type,
-               fs.ipid,
-               fs.vsync  as name,
-               fs.dur as app_dur,
-               fs.dur,
-               (fs.ts - TR.start_ts) AS ts,
-               fs.type,
-               fs.flag,
-               pro.pid,
-               pro.name as cmdline,
-               NULL AS rs_ts,
-               NULL AS rs_vsync,
-               NULL AS rs_dur,
-               NULL AS rs_ipid,
-               NULL AS rs_pid,
-               NULL AS rs_name
-        FROM frame_slice AS fs
-                 LEFT JOIN process AS pro ON pro.id = fs.ipid
-                 LEFT JOIN trace_range TR
-        WHERE fs.dst IS NULL
-          AND pro.name NOT LIKE '%render_service%'
-          AND fs.type = 1
-        ORDER BY ts;`
+    SELECT
+        sf.id,
+        'frameTime' as frame_type,
+        fs.ipid,
+        fs.vsync as name,
+        fs.dur as app_dur,
+        (sf.ts + sf.dur - fs.ts) as dur,
+        (fs.ts - TR.start_ts) AS ts,
+        fs.type,
+        fs.flag,
+        pro.pid,
+        pro.name as cmdline,
+        (sf.ts - TR.start_ts) AS rs_ts,
+        sf.vsync AS rs_vsync,
+        sf.dur AS rs_dur,
+        sf.ipid AS rs_ipid,
+        proc.pid AS rs_pid,
+        proc.name AS rs_name
+    FROM frame_slice AS fs
+    LEFT JOIN process AS pro ON pro.id = fs.ipid
+    LEFT JOIN frame_slice AS sf ON fs.dst = sf.id
+    LEFT JOIN process AS proc ON proc.id = sf.ipid
+    LEFT JOIN trace_range TR
+    WHERE fs.dst IS NOT NULL
+        AND fs.type = 1
+    UNION
+    SELECT
+        -1 as id,
+        'frameTime' as frame_type,
+        fs.ipid,
+        fs.vsync  as name,
+        fs.dur as app_dur,
+        fs.dur,
+        (fs.ts - TR.start_ts) AS ts,
+        fs.type,
+        fs.flag,
+        pro.pid,
+        pro.name as cmdline,
+        NULL AS rs_ts,
+        NULL AS rs_vsync,
+        NULL AS rs_dur,
+        NULL AS rs_ipid,
+        NULL AS rs_pid,
+        NULL AS rs_name
+    FROM frame_slice AS fs
+    LEFT JOIN process AS pro ON pro.id = fs.ipid
+    LEFT JOIN trace_range TR
+    WHERE fs.dst IS NULL
+    AND pro.name NOT LIKE '%render_service%'
+    AND fs.type = 1
+    ORDER BY ts;`
   );
 
 export const queryFlowsData = (src_slice: Array<string>): Promise<Array<any>> =>
   query(
     'queryFlowsData',
     `
-        SELECT a.vsync AS name,
-               p.pid,
-               p.name  AS cmdline,
-               a.type
-        FROM frame_slice AS a
-                 LEFT JOIN process AS p ON a.ipid = p.ipid
-        WHERE a.type = 0
-          AND a.id IN (${src_slice.join(',')});`
+    SELECT fs.vsync AS name,
+        p.pid,
+        p.name  AS cmdline,
+        fs.type
+    FROM frame_slice AS fs
+    LEFT JOIN process AS p ON fs.ipid = p.ipid
+    WHERE fs.type = 0
+        AND fs.id IN (${src_slice.join(',')});`
   );
 
 export const queryPrecedingData = (dst_slice: string): Promise<Array<any>> =>
@@ -3884,16 +3884,19 @@ export const queryGpuDur = (id: number): Promise<any> =>
     'queryGpuDur',
     `
         SELECT dur AS gpu_dur
-        FROM gpu_slice 
+        FROM gpu_slice
         WHERE frame_row = $id;`,
     { $id: id }
   );
 
-  export const queryHeapFile = (): Promise<Array<any>> =>
-  query('queryHeapFile',
-        `SELECT f.id, f.file_name, f.start_time, f.end_time, f.pid, t.start_ts, t.end_ts
+export const queryHeapFile = (): Promise<Array<any>> =>
+  query(
+    'queryHeapFile',
+    `SELECT f.id, f.file_name, f.start_time, f.end_time, f.pid, t.start_ts, t.end_ts
         FROM js_heap_files f,trace_range t
-        where t.end_ts >= f.end_time`);
+        where (t.end_ts >= f.end_time and f.file_name != 'Timeline')
+        OR f.file_name = 'Timeline'`
+  );
 
 export const queryHeapInfo = (fileId: number): Promise<Array<any>> =>
   query(
@@ -3996,9 +3999,6 @@ export const queryHiPerfProcessCount = (
   processes: Array<number>
 ): Promise<Array<any>> => {
   let str = '';
-  if (cpus.length > 0) {
-    str = ` and A.cpu_id in (${cpus.join(',')})`;
-  }
   if (processes.length > 0) {
     str = ` and C.process_id in (${processes.join(',')})`;
   }
@@ -4008,6 +4008,12 @@ export const queryHiPerfProcessCount = (
   if (processes.length > 0 && threads.length > 0) {
     str = ` and (C.process_id in (${processes.join(',')}) or A.thread_id in (${threads.join(',')}))`;
   }
+  if (cpus.length > 0) {
+    str = ` and A.cpu_id in (${cpus.join(',')})`;
+  }
+  if (cpus.length > 0 && processes.length > 0) {
+    str = ` and (C.process_id in (${processes.join(',')}) or A.cpu_id in (${cpus.join(',')}))`;
+  }
   return query(
     'queryHiPerfProcessCount',
     `
diff --git a/ide/src/trace/database/SqlLiteWorker.ts b/ide/src/trace/database/SqlLiteWorker.ts
index a3362f9245794ef01ba367751a8a373ead80d51f..25e3d663cd47c835c91face9a380f8e0bcd1ba40 100644
--- a/ide/src/trace/database/SqlLiteWorker.ts
+++ b/ide/src/trace/database/SqlLiteWorker.ts
@@ -62,14 +62,14 @@ function deleteConnection(store: IDBObjectStore, id: number) {
   });
 }
 
-let mergedUnitArray = (bufferSlice: Array<Uint8Array>) => {
+let mergedUnitArray = (bufferSliceUint8: Array<Uint8Array>) => {
   let length = 0;
-  bufferSlice.forEach((item) => {
+  bufferSliceUint8.forEach((item) => {
     length += item.length;
   });
   let mergedArray = new Uint8Array(length);
   let offset = 0;
-  bufferSlice.forEach((item) => {
+  bufferSliceUint8.forEach((item) => {
     mergedArray.set(item, offset);
     offset += item.length;
   });
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
index f3b23a14fefe153b8f38ae8008511b43e57ab225..d5a446c8820cf7b17e51be94e974ffc757a470ad 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
@@ -113,26 +113,6 @@ class MerageBeanDataSplit {
     }
   }
 
-  //symbol lib charge
-  recursionChargeTree(node: MerageBean, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      node.currentTreeParentNode &&
-        node.currentTreeParentNode.children.splice(
-          node.currentTreeParentNode.children.indexOf(node),
-          1,
-          ...node.children
-        );
-      node.children.forEach((child) => {
-        child.currentTreeParentNode = node.currentTreeParentNode;
-      });
-    }
-    if (node.children.length > 0) {
-      node.children.forEach((child) => {
-        this.recursionChargeTree(child, symbolName, isSymbol);
-      });
-    }
-  }
-
   recursionPruneInitTree(splitMapData: any, node: MerageBean, symbolName: string, isSymbol: boolean) {
     if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
       (splitMapData[symbolName] = splitMapData[symbolName] || []).push(node);
@@ -293,6 +273,15 @@ export let merageBeanDataSplit = new MerageBeanDataSplit();
 
 export abstract class LogicHandler {
   abstract handle(data: any): void;
+  queryData(eventId: string, queryName: string, sql: string, args: any) {
+    self.postMessage({
+      id: eventId,
+      type: queryName,
+      isQuery: true,
+      args: args,
+      sql: sql,
+    });
+  }
 }
 
 let dec = new TextDecoder();
@@ -357,27 +346,27 @@ let translateJsonString = (str: string): string => {
     .replace(/[\t|\r|\n]/g, '')
     .replace(/\\/g, '\\\\');
 };
-export let convertJSON = (arr: ArrayBuffer | Array<any>) => {
-  if (arr instanceof ArrayBuffer) {
-    let str = dec.decode(arr);
+export let convertJSON = (arrBuf: ArrayBuffer | Array<any>) => {
+  if (arrBuf instanceof ArrayBuffer) {
+    let string = dec.decode(arrBuf);
     let jsonArray = [];
-    str = str.substring(str.indexOf('\n') + 1);
-    if (!str) {
+    string = string.substring(string.indexOf('\n') + 1);
+    if (!string) {
     } else {
-      let parse = JSON.parse(translateJsonString(str));
+      let parse = JSON.parse(translateJsonString(string));
       let columns = parse.columns;
       let values = parse.values;
       for (let i = 0; i < values.length; i++) {
-        let obj: any = {};
+        let object: any = {};
         for (let j = 0; j < columns.length; j++) {
-          obj[columns[j]] = values[i][j];
+          object[columns[j]] = values[i][j];
         }
-        jsonArray.push(obj);
+        jsonArray.push(object);
       }
     }
     return jsonArray;
   } else {
-    return arr;
+    return arrBuf;
   }
 };
 
@@ -387,13 +376,13 @@ export let getByteWithUnit = (bytes: number): string => {
   }
   let currentBytes = bytes;
   let kb1 = 1 << 10;
-  let mb1 = (1 << 10) << 10;
-  let gb1 = ((1 << 10) << 10) << 10; // 1 gb
+  let mb = (1 << 10) << 10;
+  let gb = ((1 << 10) << 10) << 10; // 1 gb
   let res = '';
-  if (currentBytes > gb1) {
-    res += (currentBytes / gb1).toFixed(2) + ' Gb';
-  } else if (currentBytes > mb1) {
-    res += (currentBytes / mb1).toFixed(2) + ' Mb';
+  if (currentBytes > gb) {
+    res += (currentBytes / gb).toFixed(2) + ' Gb';
+  } else if (currentBytes > mb) {
+    res += (currentBytes / mb).toFixed(2) + ' Mb';
   } else if (currentBytes > kb1) {
     res += (currentBytes / kb1).toFixed(2) + ' Kb';
   } else {
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCpuState.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCpuState.ts
index 2470a17a12dc58d6bae59a23a425fcad2e67c94d..54b60f45f8f74599376f5159373824c263e27f6d 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCpuState.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCpuState.ts
@@ -39,18 +39,9 @@ export class ProcedureLogicWorkerCpuState extends LogicHandler {
     }
   }
 
-  queryData(queryName: string, sql: string, args: any) {
-    self.postMessage({
-      id: this.currentEventId,
-      type: queryName,
-      isQuery: true,
-      args: args,
-      sql: sql,
-    });
-  }
-
   getCpuState(cpu: number) {
     this.queryData(
+      this.currentEventId,
       'CpuState-getCpuState',
       `
             select (A.ts - B.start_ts) as startTs,
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
index 887280fbdce34e8ccbb605bcb7275b518d531215..94744f1301956f9fea7ff984ac3626b0a7808d57 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
@@ -66,6 +66,9 @@ export class ProcedureLogicWorkerFileSystem extends LogicHandler {
   handle(data: any): void {
     if (data.id) {
       this.currentEventId = data.id;
+      for(let handle of this.handlerMap.values()){
+        handle.setEventId(this.currentEventId)
+      }
     }
     if (data && data.type) {
       switch (data.type) {
@@ -276,7 +279,7 @@ export class ProcedureLogicWorkerFileSystem extends LogicHandler {
             where startTs not null and TB.fd not null and TA.closeTs < TA.openTs
             order by TB.end_ts;  `;
     }
-    this.queryData('fileSystem-queryFileSysEvents', sql, {
+    this.queryData(this.currentEventId, 'fileSystem-queryFileSysEvents', sql, {
       $leftNS: leftNs,
       $rightNS: rightNs,
     });
@@ -301,7 +304,7 @@ export class ProcedureLogicWorkerFileSystem extends LogicHandler {
             where (
                 (A.end_ts - B.start_ts) between $leftNS and $rightNS
             );`;
-    this.queryData('fileSystem-queryVMEvents', sql, {
+    this.queryData(this.currentEventId, 'fileSystem-queryVMEvents', sql, {
       $leftNS: leftNs,
       $rightNS: rightNs,
     });
@@ -332,7 +335,7 @@ export class ProcedureLogicWorkerFileSystem extends LogicHandler {
             where (
                 (A.end_ts - B.start_ts) between $leftNS and $rightNS
             ) ${ipidsSql};`;
-    this.queryData('fileSystem-queryIOEvents', sql, {
+    this.queryData(this.currentEventId, 'fileSystem-queryIOEvents', sql, {
       $leftNS: leftNs,
       $rightNS: rightNs,
     });
@@ -434,9 +437,13 @@ export class ProcedureLogicWorkerFileSystem extends LogicHandler {
     }
     this.handlerMap.set('fileSystem', new FileSystemCallTreeHandler('fileSystem', this.queryData));
     this.handlerMap.set('io', new FileSystemCallTreeHandler('io', this.queryData));
-    this.handlerMap.set('virtualMemory', new FileSystemCallTreeHandler('virtualMemory', this.queryData));
+    this.handlerMap.set(
+      'virtualMemory',
+      new FileSystemCallTreeHandler('virtualMemory', this.queryData)
+    );
     ProcedureLogicWorkerFileSystem.callChainsMap.clear();
     this.queryData(
+      this.currentEventId,
       'fileSystem-queryCallchains',
       `select callchain_id as callChainId,depth,symbols_id as symbolsId,file_path_id as pathId,ip from ebpf_callstack`,
       {}
@@ -453,16 +460,6 @@ export class ProcedureLogicWorkerFileSystem extends LogicHandler {
     });
   }
 
-  queryData(queryName: string, sql: string, args: any) {
-    self.postMessage({
-      id: this.currentEventId,
-      type: queryName,
-      isQuery: true,
-      args: args,
-      sql: sql,
-    });
-  }
-
   fileSystemAnalysis(type: number, samplesList: Array<FileSample>): Array<FileAnalysisSample> {
     let analysisSampleList = new Array<FileAnalysisSample>();
     for (let sample of samplesList) {
@@ -524,14 +521,18 @@ class FileSystemCallTreeHandler {
   samplesList: FileSample[] = [];
   splitMapData: any = {};
   searchValue: string = '';
-  queryData = (action: string, sql: string, args: any) => {};
+  currentEventId: string = '';
+  queryData = (eventId: string, action: string, sql: string, args: any) => {};
 
   constructor(type: string, queryData: any) {
     this.currentDataType = type;
     this.queryData = queryData;
   }
 
-  queryCallchainsSamples(selectionParam: any) {
+  setEventId(eventId: string){
+    this.currentEventId = eventId; 
+  }
+  queryCallChainsSamples(selectionParam: any) {
     switch (this.currentDataType) {
       case 'fileSystem':
         this.queryFileSamples(selectionParam);
@@ -540,7 +541,7 @@ class FileSystemCallTreeHandler {
         this.queryIOSamples(selectionParam);
         break;
       case 'virtualMemory':
-        this.queryEpbfSamples(selectionParam);
+        this.queryPageFaultSamples(selectionParam);
         break;
     }
   }
@@ -560,6 +561,7 @@ class FileSystemCallTreeHandler {
       sql += ` and s.ipid in (${selectionParam.diskIOipids.join(',')})`;
     }
     this.queryData(
+      this.currentEventId,
       'fileSystem-queryFileSamples',
       `select s.callchain_id as callChainId,h.tid,h.name as threadName,s.dur,s.type,p.pid,p.name as processName from file_system_sample s,trace_range t 
 left join process p on p.id = s.ipid  
@@ -584,6 +586,7 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
       sql += `or (s.ipid in (${selectionParam.diskIOWriteIds.join(',')}) and s.type in (2,4)) `;
     }
     this.queryData(
+      this.currentEventId,
       'fileSystem-queryIoSamples',
       `select s.callchain_id as callChainId,h.tid,h.name as threadName,s.latency_dur as dur,s.type,p.pid,p.name as processName from bio_latency_sample s,trace_range t
 left join process p on p.id = s.ipid
@@ -596,7 +599,7 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
     );
   }
 
-  queryEpbfSamples(selectionParam: any) {
+  queryPageFaultSamples(selectionParam: any) {
     let sql = '';
     if (
       selectionParam.diskIOipids.length > 0 &&
@@ -606,6 +609,7 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
       sql += ` and s.ipid in (${selectionParam.diskIOipids.join(',')})`;
     }
     this.queryData(
+      this.currentEventId,
       'fileSystem-queryVirtualMemorySamples',
       `select s.callchain_id as callChainId,h.tid,h.name as threadName,s.dur,s.type,p.pid,p.name as processName from paged_memory_sample s,trace_range t 
 left join process p on p.id = s.ipid  
@@ -618,7 +622,7 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
     );
   }
 
-  freshCurrentCallchains(samples: FileSample[], isTopDown: boolean) {
+  freshCurrentCallChains(samples: FileSample[], isTopDown: boolean) {
     this.currentTreeMapData = {};
     this.currentTreeList = [];
     this.allProcess = [];
@@ -689,8 +693,8 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
   }
 
   createThreadAndType(sample: FileSample) {
-    let typeCallchain = new FileCallChain();
-    typeCallchain.callChainId = sample.callChainId;
+    let typeCallChain = new FileCallChain();
+    typeCallChain.callChainId = sample.callChainId;
     let map: any = {};
     if (this.currentDataType == 'fileSystem') {
       map = FILE_TYPE_MAP;
@@ -700,16 +704,16 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
       map = VM_TYPE_MAP;
     }
     // @ts-ignore
-    typeCallchain.ip = map[sample.type.toString()] || 'UNKNOW';
-    typeCallchain.symbolsId = sample.type;
-    typeCallchain.pathId = -1;
+    typeCallChain.ip = map[sample.type.toString()] || 'UNKNOW';
+    typeCallChain.symbolsId = sample.type;
+    typeCallChain.pathId = -1;
     let threadCallChain = new FileCallChain();
     threadCallChain.callChainId = sample.callChainId;
     threadCallChain.ip = (sample.threadName || 'Thread') + `-${sample.tid}`;
     threadCallChain.symbolsId = sample.tid;
     threadCallChain.pathId = -1;
     return [
-      typeCallchain,
+      typeCallChain,
       threadCallChain,
       ...(ProcedureLogicWorkerFileSystem.callChainsMap.get(sample.callChainId) || []),
     ];
@@ -771,10 +775,10 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
         if (item.funcName && item.funcArgs) {
           switch (item.funcName) {
             case 'getCallChainsBySampleIds':
-              this.freshCurrentCallchains(this.samplesList, item.funcArgs[0]);
+              this.freshCurrentCallChains(this.samplesList, item.funcArgs[0]);
               break;
             case 'getCurrentDataFromDb':
-              this.queryCallchainsSamples(item.funcArgs[0]);
+              this.queryCallChainsSamples(item.funcArgs[0]);
               break;
             case 'hideSystemLibrary':
               merageBeanDataSplit.hideSystemLibrary(this.allProcess, this.splitMapData);
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
index ddf4297b48409369a1e7cda7b150ed8ce433481c..d69830fd8b229b16751817b6c0e3cc7faf9efe6f 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
@@ -197,20 +197,13 @@ export class ProcedureLogicWorkerNativeMemory extends LogicHandler {
       }
     }
   }
-  queryData(queryName: string, sql: string, args: any) {
-    self.postMessage({
-      id: this.currentEventId,
-      type: queryName,
-      isQuery: true,
-      args: args,
-      sql: sql,
-    });
-  }
+
   initDataDict() {
-    this.queryData('native-memory-queryDataDICT', `select * from data_dict;`, {});
+    this.queryData(this.currentEventId, 'native-memory-queryDataDICT', `select * from data_dict;`, {});
   }
   initNMChartData() {
     this.queryData(
+      this.currentEventId,
       'native-memory-queryNMChartData',
       `
             select * from (
@@ -249,11 +242,11 @@ select callchain_id callchainId,
 from native_hook_statistic,trace_range
 where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
         `;
-    this.queryData('native-memory-queryNativeHookStatistic', sql, {});
+    this.queryData(this.currentEventId, 'native-memory-queryNativeHookStatistic', sql, {});
   }
 
   statisticDataHandler(arr: Array<any>) {
-    let callGroupMap : Map<number,any[]> = new Map<number, any[]>();
+    let callGroupMap: Map<number, any[]> = new Map<number, any[]>();
     let obj = {};
     for (let hook of arr) {
       if ((obj as any)[hook.ts]) {
@@ -263,13 +256,13 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
         if (callGroupMap.has(hook.callchainId)) {
           let calls = callGroupMap.get(hook.callchainId);
           let last = calls![calls!.length - 1];
-          data.heapsize += ((hook.applySize - last.applySize) - (hook.releaseSize - last.releaseSize));
-          data.density += ((hook.applyCount - last.applyCount) - (hook.releaseCount - last.releaseCount));
+          data.heapsize += hook.applySize - last.applySize - (hook.releaseSize - last.releaseSize);
+          data.density += hook.applyCount - last.applyCount - (hook.releaseCount - last.releaseCount);
           calls!.push(hook);
         } else {
-          data.heapsize += (hook.applySize - hook.releaseSize);
-          data.density += (hook.applyCount - hook.releaseCount);
-          callGroupMap.set(hook.callchainId,[hook]);
+          data.heapsize += hook.applySize - hook.releaseSize;
+          data.density += hook.applyCount - hook.releaseCount;
+          callGroupMap.set(hook.callchainId, [hook]);
         }
       } else {
         let data: any = {};
@@ -278,13 +271,13 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
         if (callGroupMap.has(hook.callchainId)) {
           let calls = callGroupMap.get(hook.callchainId);
           let last = calls![calls!.length - 1];
-          data.heapsize = (hook.applySize - last.applySize) - (hook.releaseSize - last.releaseSize);
-          data.density = (hook.applyCount - last.applyCount) - (hook.releaseCount - last.releaseCount);
+          data.heapsize = hook.applySize - last.applySize - (hook.releaseSize - last.releaseSize);
+          data.density = hook.applyCount - last.applyCount - (hook.releaseCount - last.releaseCount);
           calls!.push(hook);
         } else {
           data.heapsize = hook.applySize - hook.releaseSize;
           data.density = hook.applyCount - hook.releaseCount;
-          callGroupMap.set(hook.callchainId,[hook]);
+          callGroupMap.set(hook.callchainId, [hook]);
         }
         (obj as any)[hook.ts] = data;
       }
@@ -353,6 +346,7 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
   }
   initNMFrameData() {
     this.queryData(
+      this.currentEventId,
       'native-memory-queryNMFrameData',
       `
             select h.symbol_id as symbolId, h.file_id as fileId, h.depth, h.callchain_id as eventId, h.vaddr as addr
@@ -720,6 +714,7 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
   }
   queryCallchainsSamples(action: string, leftNs: number, rightNs: number, types: Array<string>) {
     this.queryData(
+      this.currentEventId,
       action,
       `select A.id,
                 callchain_id as eventId,
@@ -730,7 +725,8 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
                 tid,
                 ifnull(last_lib_id,0) as lastLibId,
                 t.name as threadName,
-                A.addr
+                A.addr,
+                A.sub_type_id as subTypeId
             from
                 native_hook A,
                 trace_range B
@@ -747,6 +743,7 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
   }
   queryStatisticCallchainsSamples(action: string, leftNs: number, rightNs: number, types: Array<number>) {
     this.queryData(
+      this.currentEventId,
       action,
       `select A.id,
                 0 as tid,
@@ -774,7 +771,7 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
     let analysisSampleList = new Array<AnalysisSample>();
     samples.forEach((sample, idx, _) => {
       let applySample = sample;
-	  // @ts-ignore
+      // @ts-ignore
       if (['FreeEvent', 'MunmapEvent'].includes(sample.eventType)) {
         applySample = this.releaseSetApplyCallChain(idx, samples);
         if (!applySample) return;
@@ -810,18 +807,23 @@ where ts between start_ts and end_ts ${type === -1 ? '' : `and type = ${type}`};
         libName = path[path.length - 1];
       }
       let count = this.isStatistic ? sample.count : 1;
-      let symbolName = this.DATA_DICT.get(lastFilterCallChain.symbolId) || libName + ' (' + sample.addr + ')';
+      const symbolName = this.DATA_DICT.get(lastFilterCallChain.symbolId) || libName + ' (' + sample.addr + ')';
+      let subType = undefined;
+      if (sample.subTypeId) {
+        subType = this.DATA_DICT.get(sample.subTypeId);
+      }
+
       let analysisSample = new AnalysisSample(
         sample.id,
         count,
         sample.heapSize,
         sample.eventId,
-        1,
         sample.eventType,
         lastFilterCallChain.fileId,
         libName,
         lastFilterCallChain.symbolId,
-        symbolName
+        symbolName,
+        subType
       );
       analysisSample.startTs = sample.startTs;
       analysisSample.endTs = sample.endTs;
@@ -1241,6 +1243,7 @@ class AnalysisSample {
   callChainId: number = 0;
   pid: number = 0;
   type: number;
+  subType?: string;
 
   releaseCount?: number;
   releaseSize?: number;
@@ -1259,18 +1262,17 @@ class AnalysisSample {
     count: number,
     size: number,
     callChainId: number,
-    pid: number,
     type: number | string,
     libId: number,
     libName: string,
     symbolId: number,
-    symbolName: string
+    symbolName: string,
+    subType: string | undefined
   ) {
     this.id = id;
     this.count = count;
     this.size = size;
     this.callChainId = callChainId;
-    this.pid = pid;
     switch (type) {
       case 'AllocEvent':
       case '0':
@@ -1293,5 +1295,6 @@ class AnalysisSample {
     this.libName = libName;
     this.symbolId = symbolId;
     this.symbolName = symbolName;
+    this.subType = subType;
   }
 }
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
index a2c2b5aded65fccf487358ae339848dbda08aaa3..52ca1b338a1336976159c0acb9385253bfc72224 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
@@ -33,6 +33,7 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
   isActualQuery: boolean = false;
   static cmdLineResult: any = undefined;
   currentEventId: string = '';
+  isAnalysis: boolean = false;
 
   handle(data: any): void {
     this.currentEventId = data.id;
@@ -69,7 +70,7 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
           break;
         case 'perf-queryPerfCallchains':
           let arr = convertJSON(data.params.list) || [];
-          this.initCallChainTopDown(arr);
+          this.initPerfCallChainTopDown(arr);
           // @ts-ignore
           self.postMessage({
             id: data.id,
@@ -79,15 +80,27 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
           break;
         case 'perf-queryCallchainsGroupSample':
           this.samplesData = convertJSON(data.params.list) || [];
-          self.postMessage({
-            id: data.id,
-            action: data.action,
-            results: this.resolvingAction([
+
+          let result;
+          if (this.isAnalysis) {
+            result = this.resolvingAction([
+              {
+                funcName: 'combineAnalysisCallChain',
+                funcArgs: [true],
+              },
+            ]);
+          } else {
+            result = this.resolvingAction([
               {
                 funcName: 'getCallChainsBySampleIds',
                 funcArgs: [true],
               },
-            ]),
+            ]);
+          }
+          self.postMessage({
+            id: data.id,
+            action: data.action,
+            results: result,
           });
           break;
         case 'perf-action':
@@ -105,35 +118,23 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
             }
           }
           break;
-        case 'perf-queryPerfAnalysisCallChain':
-          // @ts-ignore
-          self.postMessage({
-            id: data.id,
-            action: data.action,
-            results: this.perfAnalysisCallChain(),
-          });
-          break;
       }
     }
   }
 
-  queryData(queryName: string, sql: string, args: any) {
-    self.postMessage({
-      id: this.currentEventId,
-      type: queryName,
-      isQuery: true,
-      args: args,
-      sql: sql,
-    });
-  }
-
   initPerfFiles() {
     this.clearAll();
-    this.queryData('perf-queryPerfFiles', `select file_id as fileId,symbol,path from perf_files`, {});
+    this.queryData(
+      this.currentEventId,
+      'perf-queryPerfFiles',
+      `select file_id as fileId,symbol,path from perf_files`,
+      {}
+    );
   }
 
   initPerfThreads() {
     this.queryData(
+      this.currentEventId,
       'perf-queryPerfThread',
       `select a.thread_id as tid,a.thread_name as threadName,a.process_id as pid,b.thread_name as processName from perf_thread a left join (select * from perf_thread where thread_id = process_id) b on a.process_id = b.thread_id`,
       {}
@@ -142,6 +143,7 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
 
   initPerfCalls() {
     this.queryData(
+      this.currentEventId,
       'perf-queryPerfCalls',
       `select count(callchain_id) as depth,callchain_id as sampleId,name 
 from perf_callchain 
@@ -153,6 +155,7 @@ group by callchain_id`,
 
   initPerfCallchains() {
     this.queryData(
+      this.currentEventId,
       'perf-queryPerfCallchains',
       `select c.name,c.callchain_id as sampleId,c.vaddr_in_file as vaddrInFile,c.file_id as fileId,c.symbol_id as symbolId  
 from perf_callchain c
@@ -174,10 +177,11 @@ where callchain_id != -1;`,
       sql = ` and (${arg})`;
     }
     this.queryData(
+      this.currentEventId,
       'perf-queryCallchainsGroupSample',
       `
-select p.callchain_id as sampleId, p.thread_state as threadState, p.thread_id as tid, p.count, p.process_id as pid
-from (select callchain_id, s.thread_id, thread_state, process_id, count(callchain_id) as count
+select p.callchain_id as sampleId, p.thread_state as threadState, p.thread_id as tid, p.count, p.process_id as pid,p.event_count as eventCount
+from (select callchain_id, s.thread_id, thread_state, process_id, count(callchain_id) as count,event_count
       from perf_sample s,
            trace_range t
                left join perf_thread thread on s.thread_id = thread.thread_id
@@ -208,13 +212,13 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     this.callChainMap = new Map<number, PerfCall>();
   }
 
-  initCallChainBottomUp(callChains: PerfCallChain[]) {
+  initPerfCallChainBottomUp(callChains: PerfCallChain[]) {
     callChains.forEach((callChain, index) => {
       if (this.threadData[callChain.tid] == undefined) {
         return;
       }
-      this.setCallChainName(callChain);
-      this.addGroupData(callChain);
+      this.setPerfCallChainFrameName(callChain);
+      this.addPerfGroupData(callChain);
       if (index + 1 < callChains.length && callChains[index + 1].sampleId == callChain.sampleId) {
         PerfCallChain.setPreviousNode(callChain, callChains[index + 1]);
       }
@@ -224,11 +228,11 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     });
   }
 
-  initCallChainTopDown(callChains: PerfCallChain[]) {
+  initPerfCallChainTopDown(callChains: PerfCallChain[]) {
     this.callChainData = {};
     callChains.forEach((callChain, index) => {
-      this.setCallChainName(callChain);
-      this.addGroupData(callChain);
+      this.setPerfCallChainFrameName(callChain);
+      this.addPerfGroupData(callChain);
       let callChainDatum = this.callChainData[callChain.sampleId];
       if (callChainDatum.length > 1) {
         PerfCallChain.setNextNode(callChainDatum[callChainDatum.length - 2], callChainDatum[callChainDatum.length - 1]);
@@ -236,7 +240,7 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     });
   }
 
-  setCallChainName(callChain: PerfCallChain) {
+  setPerfCallChainFrameName(callChain: PerfCallChain) {
     //设置调用栈的名称
     callChain.canCharge = true;
     if (callChain.symbolId == -1) {
@@ -269,8 +273,8 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     threadStateCallChain.name = callChain.threadState || 'Unkown State';
     threadStateCallChain.fileName = threadStateCallChain.name == '-' ? 'Unkown Thead State' : '';
     threadStateCallChain.canCharge = false;
-    this.addGroupData(threadCallChain);
-    this.addGroupData(threadStateCallChain);
+    this.addPerfGroupData(threadCallChain);
+    this.addPerfGroupData(threadStateCallChain);
     PerfCallChain.setNextNode(threadCallChain, threadStateCallChain);
     PerfCallChain.setNextNode(threadStateCallChain, callChain);
   }
@@ -283,17 +287,17 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     this.callChainMap.set(callChain.sampleId, perfCall);
   }
 
-  addGroupData(callChain: PerfCallChain) {
+  addPerfGroupData(callChain: PerfCallChain) {
     this.callChainData[callChain.sampleId] = this.callChainData[callChain.sampleId] || [];
     this.callChainData[callChain.sampleId].push(callChain);
   }
 
-  getCallChainsBySampleIds(sampleIds: string[], isTopDown: boolean) {
+  getPerfCallChainsBySampleIds(sampleIds: string[], isTopDown: boolean) {
     this.allProcess = this.groupNewTreeNoId(sampleIds, isTopDown);
     return this.allProcess;
   }
 
-  addOtherCallchainData(countSample: PerfCountSample, list: any[]) {
+  addOtherCallchainsData(countSample: PerfCountSample, list: any[]) {
     let threadCallChain = new PerfCallChain(); //新增的线程数据
     threadCallChain.tid = countSample.tid;
     threadCallChain.canCharge = false;
@@ -306,24 +310,26 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     list.unshift(threadCallChain, threadStateCallChain);
   }
 
-  freshCurrentCallchains(samples: PerfCountSample[], isTopDown: boolean) {
+  freshPerfCallchains(samples: PerfCountSample[], isTopDown: boolean) {
     this.currentTreeMapData = {};
     this.currentTreeList = [];
     let totalCount = 0;
     samples.forEach((sample) => {
       totalCount += sample.count;
-      let callChains = [...this.callChainData[sample.sampleId]];
-      this.addOtherCallchainData(sample, callChains);
-      let topIndex = isTopDown ? 0 : callChains.length - 1;
-      if (callChains.length > 0) {
-        let root = this.currentTreeMapData[callChains[topIndex].name + sample.pid];
-        if (root == undefined) {
-          root = new PerfCallChainMerageData();
-          this.currentTreeMapData[callChains[topIndex].name + sample.pid] = root;
-          this.currentTreeList.push(root);
+      if (this.callChainData[sample.sampleId] && this.callChainData[sample.sampleId].length > 0) {
+        let callChains = [...this.callChainData[sample.sampleId]];
+        this.addOtherCallchainsData(sample, callChains);
+        let topIndex = isTopDown ? 0 : callChains.length - 1;
+        if (callChains.length > 0) {
+          let root = this.currentTreeMapData[callChains[topIndex].name + sample.pid];
+          if (root == undefined) {
+            root = new PerfCallChainMerageData();
+            this.currentTreeMapData[callChains[topIndex].name + sample.pid] = root;
+            this.currentTreeList.push(root);
+          }
+          PerfCallChainMerageData.merageCallChainSample(root, callChains[topIndex], sample, false);
+          this.mergeChildrenByIndex(root, callChains, topIndex, sample, isTopDown);
         }
-        PerfCallChainMerageData.merageCallChainSample(root, callChains[topIndex], sample, false);
-        this.merageChildrenByIndex(root, callChains, topIndex, sample, isTopDown);
       }
     });
     let rootMerageMap: any = {};
@@ -369,7 +375,7 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     this.allProcess = Object.values(rootMerageMap);
   }
 
-  merageChildrenByIndex(
+  mergeChildrenByIndex(
     currentNode: PerfCallChainMerageData,
     callChainDataList: any[],
     index: number,
@@ -396,7 +402,7 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
       this.currentTreeList.push(node);
       node.parentNode = currentNode;
     }
-    if (node && !isEnd) this.merageChildrenByIndex(node, callChainDataList, index, sample, isTopDown);
+    if (node && !isEnd) this.mergeChildrenByIndex(node, callChainDataList, index, sample, isTopDown);
   }
 
   groupNewTreeNoId(sampleIds: string[], isTopDown: boolean): any[] {
@@ -485,81 +491,61 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
   }
 
   //所有的操作都是针对整个树结构的 不区分特定的数据
-  splitTree(data: PerfCallChainMerageData[], name: string, isCharge: boolean, isSymbol: boolean) {
-    data.forEach((process) => {
+  splitPerfTree(samples: PerfCallChainMerageData[], name: string, isCharge: boolean, isSymbol: boolean) {
+    samples.forEach((process) => {
       process.children = [];
       if (isCharge) {
-        this.recursionChargeInitTree(process, name, isSymbol);
+        this.recursionPerfChargeInitTree(process, name, isSymbol);
       } else {
-        this.recursionPruneInitTree(process, name, isSymbol);
+        this.recursionPerfPruneInitTree(process, name, isSymbol);
       }
     });
-    this.resetAllNode(data);
-  }
-
-  recursionChargeInitTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(node);
-      node.isStore++;
-    }
-    if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
-        this.recursionChargeInitTree(child, symbolName, isSymbol);
-      });
-    }
+    this.resetAllNode(samples);
   }
 
-  //symbol lib charge
-  recursionChargeTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      node.currentTreeParentNode &&
-        node.currentTreeParentNode.children.splice(
-          node.currentTreeParentNode.children.indexOf(node),
-          1,
-          ...node.children
-        );
-      node.children.forEach((child) => {
-        child.currentTreeParentNode = node.currentTreeParentNode;
-      });
+  recursionPerfChargeInitTree(sample: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
+    if ((isSymbol && sample.symbolName == symbolName) || (!isSymbol && sample.libName == symbolName)) {
+      (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(sample);
+      sample.isStore++;
     }
-    if (node.children.length > 0) {
-      node.children.forEach((child) => {
-        this.recursionChargeTree(child, symbolName, isSymbol);
+    if (sample.initChildren.length > 0) {
+      sample.initChildren.forEach((child) => {
+        this.recursionPerfChargeInitTree(child, symbolName, isSymbol);
       });
     }
   }
 
-  recursionPruneInitTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
+  recursionPerfPruneInitTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
     if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
       (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(node);
       node.isStore++;
       this.pruneChildren(node, symbolName);
     } else if (node.initChildren.length > 0) {
       node.initChildren.forEach((child) => {
-        this.recursionPruneInitTree(child, symbolName, isSymbol);
+        this.recursionPerfPruneInitTree(child, symbolName, isSymbol);
       });
     }
   }
 
   //symbol lib prune
-  recursionPruneTree(node: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
-    if ((isSymbol && node.symbolName == symbolName) || (!isSymbol && node.libName == symbolName)) {
-      node.currentTreeParentNode &&
-        node.currentTreeParentNode.children.splice(node.currentTreeParentNode.children.indexOf(node), 1);
+  recursionPruneTree(sample: PerfCallChainMerageData, symbolName: string, isSymbol: boolean) {
+    if ((isSymbol && sample.symbolName == symbolName) || (!isSymbol && sample.libName == symbolName)) {
+      sample.currentTreeParentNode &&
+        sample.currentTreeParentNode.children.splice(sample.currentTreeParentNode.children.indexOf(sample), 1);
     } else {
-      node.children.forEach((child) => {
+      sample.children.forEach((child) => {
         this.recursionPruneTree(child, symbolName, isSymbol);
       });
     }
   }
 
   recursionChargeByRule(
-    node: PerfCallChainMerageData,
+    sample: PerfCallChainMerageData,
     ruleName: string,
     rule: (node: PerfCallChainMerageData) => boolean
   ) {
-    if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
+    if (sample.initChildren.length > 0) {
+      sample.initChildren.forEach((child) => {
         if (rule(child)) {
           (this.splitMapData[ruleName] = this.splitMapData[ruleName] || []).push(child);
           child.isStore++;
@@ -569,9 +555,9 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     }
   }
 
-  pruneChildren(node: PerfCallChainMerageData, symbolName: string) {
-    if (node.initChildren.length > 0) {
-      node.initChildren.forEach((child) => {
+  pruneChildren(sample: PerfCallChainMerageData, symbolName: string) {
+    if (sample.initChildren.length > 0) {
+      sample.initChildren.forEach((child) => {
         child.isStore++;
         (this.splitMapData[symbolName] = this.splitMapData[symbolName] || []).push(child);
         this.pruneChildren(child, symbolName);
@@ -602,7 +588,7 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     delete this.splitMapData[symbolName];
   }
 
-  resotreAllNode(symbols: string[]) {
+  resetAllSymbol(symbols: string[]) {
     symbols.forEach((symbol) => {
       let list = this.splitMapData[symbol];
       if (list != undefined) {
@@ -613,92 +599,92 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     });
   }
 
-  resetAllNode(data: PerfCallChainMerageData[]) {
+  resetAllNode(sample: PerfCallChainMerageData[]) {
     this.clearSearchNode();
-    data.forEach((process) => {
+    sample.forEach((process) => {
       process.searchShow = true;
       process.isSearch = false;
     });
-    this.resetNewAllNode(data);
+    this.resetNewAllNode(sample);
     if (this.searchValue != '') {
-      this.findSearchNode(data, this.searchValue, false);
-      this.resetNewAllNode(data);
+      this.findSearchNode(sample, this.searchValue, false);
+      this.resetNewAllNode(sample);
     }
   }
 
-  resetNewAllNode(data: PerfCallChainMerageData[]) {
-    data.forEach((process) => {
+  resetNewAllNode(sampleArray: PerfCallChainMerageData[]) {
+    sampleArray.forEach((process) => {
       process.children = [];
     });
     let values = this.currentTreeList.map((item: any) => {
       item.children = [];
       return item;
     });
-    values.forEach((item: any) => {
-      if (item.parentNode != undefined) {
-        if (item.isStore == 0 && item.searchShow) {
-          let parentNode = item.parentNode;
+    values.forEach((sample: any) => {
+      if (sample.parentNode != undefined) {
+        if (sample.isStore == 0 && sample.searchShow) {
+          let parentNode = sample.parentNode;
           while (parentNode != undefined && !(parentNode.isStore == 0 && parentNode.searchShow)) {
             parentNode = parentNode.parentNode;
           }
           if (parentNode) {
-            item.currentTreeParentNode = parentNode;
-            parentNode.children.push(item);
+            sample.currentTreeParentNode = parentNode;
+            parentNode.children.push(sample);
           }
         }
       }
     });
   }
 
-  findSearchNode(data: PerfCallChainMerageData[], search: string, parentSearch: boolean) {
-    data.forEach((node) => {
-      if ((node.symbol && node.symbol.includes(search)) || parentSearch) {
-        node.searchShow = true;
-        let parentNode = node.currentTreeParentNode;
-        node.isSearch = node.symbol != undefined && node.symbol.includes(search);
+  findSearchNode(sampleArray: PerfCallChainMerageData[], search: string, parentSearch: boolean) {
+    sampleArray.forEach((sample) => {
+      if ((sample.symbol && sample.symbol.includes(search)) || parentSearch) {
+        sample.searchShow = true;
+        let parentNode = sample.currentTreeParentNode;
+        sample.isSearch = sample.symbol != undefined && sample.symbol.includes(search);
         while (parentNode != undefined && !parentNode.searchShow) {
           parentNode.searchShow = true;
           parentNode = parentNode.currentTreeParentNode;
         }
       } else {
-        node.searchShow = false;
-        node.isSearch = false;
+        sample.searchShow = false;
+        sample.isSearch = false;
       }
-      if (node.children.length > 0) {
-        this.findSearchNode(node.children, search, node.searchShow);
+      if (sample.children.length > 0) {
+        this.findSearchNode(sample.children, search, sample.searchShow);
       }
     });
   }
 
   clearSearchNode() {
-    this.currentTreeList.forEach((node) => {
-      node.searchShow = true;
-      node.isSearch = false;
+    this.currentTreeList.forEach((sample) => {
+      sample.searchShow = true;
+      sample.isSearch = false;
     });
   }
 
-  splitAllProcess(list: any[]) {
-    list.forEach((item: any) => {
+  splitAllProcess(processArray: any[]) {
+    processArray.forEach((item: any) => {
       this.allProcess.forEach((process) => {
         if (item.select == '0') {
-          this.recursionChargeInitTree(process, item.name, item.type == 'symbol');
+          this.recursionPerfChargeInitTree(process, item.name, item.type == 'symbol');
         } else {
-          this.recursionPruneInitTree(process, item.name, item.type == 'symbol');
+          this.recursionPerfPruneInitTree(process, item.name, item.type == 'symbol');
         }
       });
       if (!item.checked) {
-        this.resotreAllNode([item.name]);
+        this.resetAllSymbol([item.name]);
       }
     });
   }
 
   resolvingAction(params: any[]) {
     if (params.length > 0) {
-      params.forEach((item) => {
+      for (let item of params) {
         if (item.funcName && item.funcArgs) {
           switch (item.funcName) {
             case 'getCallChainsBySampleIds':
-              this.freshCurrentCallchains(this.samplesData, item.funcArgs[0]);
+              this.freshPerfCallchains(this.samplesData, item.funcArgs[0]);
               break;
             case 'getCurrentDataFromDb':
               this.getCurrentDataFromDb(item.funcArgs[0]);
@@ -716,20 +702,25 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
               this.resetAllNode(this.allProcess);
               break;
             case 'resotreAllNode':
-              this.resotreAllNode(item.funcArgs[0]);
+              this.resetAllSymbol(item.funcArgs[0]);
               break;
             case 'clearSplitMapData':
               this.clearSplitMapData(item.funcArgs[0]);
               break;
             case 'splitTree':
-              this.splitTree(this.allProcess, item.funcArgs[0], item.funcArgs[1], item.funcArgs[2]);
+              this.splitPerfTree(this.allProcess, item.funcArgs[0], item.funcArgs[1], item.funcArgs[2]);
               break;
             case 'setSearchValue':
               this.searchValue = item.funcArgs[0];
               break;
+            case 'setCombineCallChain':
+              this.isAnalysis = true;
+              break;
+            case 'combineAnalysisCallChain':
+              return this.combineCallChainForAnalysis();
           }
         }
-      });
+      }
       this.dataSource = this.allProcess.filter((process) => {
         return process.children && process.children.length > 0;
       });
@@ -737,16 +728,32 @@ from (select callchain_id, s.thread_id, thread_state, process_id, count(callchai
     return this.dataSource;
   }
 
-  perfAnalysisCallChain() {
-    let sampleCallChainMap = new Map<number, any>();
-	// @ts-ignore
-    for (const [sampleIdStr, callChains] of Object.entries(this.callChainData)) {
-      const sampleId = parseInt(sampleIdStr);
-      // @ts-ignore
+  combineCallChainForAnalysis() {
+    let sampleCallChainList = new Array<PerfAnalysisSample>();
+    for (let sample of this.samplesData) {
+      let callChains = [...this.callChainData[sample.sampleId]];
       const lastCallChain = callChains[callChains.length - 1];
-      sampleCallChainMap.set(sampleId, lastCallChain);
+      const threadName = this.threadData[sample.tid].threadName || 'Thead' + '(' + sample.tid + ')';
+      const processName = this.threadData[sample.pid].threadName || 'Process' + '(' + sample.pid + ')';
+      let analysisSample = new PerfAnalysisSample(
+        threadName,
+        processName,
+        lastCallChain.fileId,
+        lastCallChain.fileName,
+        lastCallChain.symbolId,
+        lastCallChain.name
+      );
+      analysisSample.tid = sample.tid;
+      analysisSample.pid = sample.pid;
+      analysisSample.count = sample.count;
+      analysisSample.threadState = sample.threadState;
+      analysisSample.eventCount = sample.eventCount;
+      sampleCallChainList.push(analysisSample);
+    }
+    if (this.isAnalysis) {
+      this.isAnalysis = false;
     }
-    return sampleCallChainMap;
+    return sampleCallChainList;
   }
 }
 
@@ -931,6 +938,7 @@ export class PerfCountSample {
   count: number = 0;
   threadState: string = '';
   pid: number = 0;
+  eventCount: number = 0;
 }
 
 export class PerfStack {
@@ -951,6 +959,32 @@ export class PerfCall {
   name: string = '';
 }
 
+class PerfAnalysisSample extends PerfCountSample {
+  threadName: string;
+  processName: string;
+  libId: number;
+  libName: string;
+  symbolId: number;
+  symbolName: string;
+
+  constructor(
+    threadName: string,
+    processName: string,
+    libId: number,
+    libName: string,
+    symbolId: number,
+    symbolName: string
+  ) {
+    super();
+    this.threadName = threadName;
+    this.processName = processName;
+    this.libId = libId;
+    this.libName = libName;
+    this.symbolId = symbolId;
+    this.symbolName = symbolName;
+  }
+}
+
 export function timeMsFormat2p(ns: number) {
   let currentNs = ns;
   let hour1 = 3600_000;
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts
index 6d6f551637a455af5a47c6c181dd016a4d85d5f0..766404f9423ff1bd19820a71811fde9657b07d0b 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts
@@ -256,18 +256,9 @@ export class ProcedureLogicWorkerSchedulingAnalysis extends LogicHandler {
     }
   }
 
-  queryData(queryName: string, sql: string, args: any) {
-    self.postMessage({
-      id: this.currentEventId,
-      type: queryName,
-      isQuery: true,
-      args: args,
-      sql: sql,
-    });
-  }
-
   getProcessAndThread() {
     this.queryData(
+      this.currentEventId,
       'scheduling-getProcessAndThread',
       `
 select tid id,ifnull(name,'null') name,'t' type from thread
@@ -280,6 +271,7 @@ select pid id,ifnull(name,'null') name,'p' type from process;
 
   getCpuUsage() {
     this.queryData(
+      this.currentEventId,
       'scheduling-getCpuUsage',
       `
 select cpu,
@@ -307,6 +299,7 @@ order by cpu;
 
   getCpuFrequency(name: string) {
     this.queryData(
+      this.currentEventId,
       name,
       `
 select cpu,value,ts,dur
@@ -331,11 +324,12 @@ where cpu not null
   and ts + st.dur < tr.end_ts
   and cpu = ${cpu}
 order by ts;`;
-    this.queryData('scheduling-CPU Frequency Thread', sql, {});
+    this.queryData(this.currentEventId, 'scheduling-CPU Frequency Thread', sql, {});
   }
 
   getCpuIdle0() {
     this.queryData(
+      this.currentEventId,
       'scheduling-getCpuIdle0',
       `
 select cpu,value,ts,dur
@@ -348,6 +342,7 @@ where cmf.name = 'cpu_idle' and value = 0
 
   getCpuIdle() {
     this.queryData(
+      this.currentEventId,
       'scheduling-CPU Idle',
       `
 select cpu,value,ts,dur
@@ -360,6 +355,7 @@ where cmf.name = 'cpu_idle' and value != 0
 
   getCpuIrq() {
     this.queryData(
+      this.currentEventId,
       'scheduling-CPU Irq',
       `
         SELECT callid AS cpu,
@@ -390,7 +386,7 @@ where cmf.name = 'cpu_idle' and value != 0
 from thread_state A
 where cpu not null
 group by A.pid, A.tid,A.cpu`;
-    this.queryData('scheduling-Thread CpuUsage', sql, {});
+    this.queryData(this.currentEventId, 'scheduling-Thread CpuUsage', sql, {});
   }
 
   queryThreadRunTime(cpuMax: number) {
@@ -401,11 +397,12 @@ group by A.pid, A.tid,A.cpu`;
     group by A.tid, A.pid
     order by maxDuration desc
     limit 20`;
-    this.queryData('scheduling-Thread RunTime', sql, {});
+    this.queryData(this.currentEventId, 'scheduling-Thread RunTime', sql, {});
   }
 
   queryProcessThreadCount() {
     this.queryData(
+      this.currentEventId,
       'scheduling-Process ThreadCount',
       `
 select row_number() over (order by count(tid) desc) NO,count(tid) threadNumber,p.pid,ifnull(p.name,'null') pName
@@ -419,6 +416,7 @@ order by threadNumber desc limit 20;`,
 
   queryProcessSwitchCount() {
     this.queryData(
+      this.currentEventId,
       'scheduling-Process SwitchCount',
       `
 select row_number() over (order by count(a.tid) desc) NO,
@@ -442,7 +440,7 @@ where cpu not null
   and ts > tr.start_ts
   and ts + st.dur < tr.end_ts
   order by cpu,ts;`;
-    this.queryData('scheduling-Thread Freq', sql, {});
+    this.queryData(this.currentEventId, 'scheduling-Thread Freq', sql, {});
   }
 
   groupIrgDataByCpu(arr: Irq[]) {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorker.ts b/ide/src/trace/database/ui-worker/ProcedureWorker.ts
index 14614a7d100d2dc4664b8879c4b6bf28b0b2a642..aaf88b3a5d9bf63494ec3bd848d555998237cbb1 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorker.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorker.ts
@@ -110,23 +110,23 @@ function match(type: string, req: RequestMessage) {
 let dec = new TextDecoder();
 let convertJSON = (arr: any) => {
   if (arr instanceof ArrayBuffer) {
-    let jsonArray = [];
+    let jsonArr = [];
     let str = dec.decode(new Uint8Array(arr));
     str = str.substring(str.indexOf('\n') + 1);
     if (!str) {
     } else {
-      let parse = JSON.parse(translateJsonString(str));
-      let columns = parse.columns;
-      let values = parse.values;
+      let parsed = JSON.parse(translateJsonString(str));
+      let columns = parsed.columns;
+      let values = parsed.values;
       for (let i = 0; i < values.length; i++) {
         let obj: any = {};
         for (let j = 0; j < columns.length; j++) {
           obj[columns[j]] = values[i][j];
         }
-        jsonArray.push(obj);
+        jsonArr.push(obj);
       }
     }
-    return jsonArray;
+    return jsonArr;
   } else {
     return arr;
   }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts
index f4bbb893d6d176f430a32b6c656d647ffdcb9c48..9b78750f311395a5ca5e0b63c304ab52244e3588 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts
@@ -32,29 +32,29 @@ export class EmptyRender extends Render {
     req.context.beginPath();
     req.context.closePath();
   }
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+  render(cpuReq: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (cpuReq.canvas) {
+      cpuReq.context.clearRect(0, 0, cpuReq.frame.width, cpuReq.frame.height);
+      cpuReq.context.beginPath();
+      drawLines(cpuReq.context, cpuReq.xs, cpuReq.frame.height, cpuReq.lineColor);
+      drawSelection(cpuReq.context, cpuReq.params);
+      cpuReq.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        cpuReq.context,
+        cpuReq.flagMoveInfo,
+        cpuReq.flagSelectedInfo,
+        cpuReq.startNS,
+        cpuReq.endNS,
+        cpuReq.totalNS,
+        cpuReq.frame,
+        cpuReq.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: cpuReq.id,
+      type: cpuReq.type,
+      results: cpuReq.canvas ? undefined : filter,
       hover: null,
     });
   }
@@ -70,9 +70,9 @@ export class CpuRender {
     },
     row: TraceRow<CpuStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let cpuList = row.dataList;
+    let cpuFilter = row.dataListCache;
+    dataFilterHandler(cpuList, cpuFilter, {
       startKey: 'startTime',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -84,7 +84,7 @@ export class CpuRender {
     });
     req.context.beginPath();
     req.context.font = '11px sans-serif';
-    filter.forEach((re) => {
+    cpuFilter.forEach((re) => {
       re.translateY = req.translateY;
       CpuStruct.draw(req.context, re, req.translateY);
     });
@@ -98,111 +98,112 @@ export class CpuRender {
       TraceRow.range!.totalNS,
       row.frame,
       req.type == `cpu-data-${CpuStruct.selectCpuStruct?.cpu || 0}` ? CpuStruct.selectCpuStruct : undefined,
-      currentCpu
+      currentCpu,
+      true
     );
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, translateY: number) {
-    if (req.lazyRefresh) {
-      this.cpu(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(cpuReq: RequestMessage, list: Array<any>, filter: Array<any>, translateY: number) {
+    if (cpuReq.lazyRefresh) {
+      this.cpu(list, filter, cpuReq.startNS, cpuReq.endNS, cpuReq.totalNS, cpuReq.frame, cpuReq.useCache || !cpuReq.range.refresh);
     } else {
-      if (!req.useCache) {
-        this.cpu(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!cpuReq.useCache) {
+        this.cpu(list, filter, cpuReq.startNS, cpuReq.endNS, cpuReq.totalNS, cpuReq.frame, false);
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (cpuReq.canvas) {
+      cpuReq.context.clearRect(0, 0, cpuReq.frame.width, cpuReq.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (arr.length > 0 && !cpuReq.range.refresh && !cpuReq.useCache && cpuReq.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          cpuReq.context,
+          cpuReq.startNS,
+          cpuReq.endNS,
+          cpuReq.totalNS,
+          cpuReq.frame,
           arr[0].startTime,
           arr[arr.length - 1].startTime + arr[arr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      cpuReq.context.beginPath();
+      drawLines(cpuReq.context, cpuReq.xs, cpuReq.frame.height, cpuReq.lineColor);
       CpuStruct.hoverCpuStruct = undefined;
-      if (req.isHover) {
+      if (cpuReq.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            cpuReq.hoverX >= re.frame.x &&
+            cpuReq.hoverX <= re.frame.x + re.frame.width &&
+            cpuReq.hoverY >= re.frame.y &&
+            cpuReq.hoverY <= re.frame.y + re.frame.height
           ) {
             CpuStruct.hoverCpuStruct = re;
             break;
           }
         }
       } else {
-        CpuStruct.hoverCpuStruct = req.params.hoverCpuStruct;
+        CpuStruct.hoverCpuStruct = cpuReq.params.hoverCpuStruct;
       }
-      CpuStruct.selectCpuStruct = req.params.selectCpuStruct;
-      req.context.font = '11px sans-serif';
+      CpuStruct.selectCpuStruct = cpuReq.params.selectCpuStruct;
+      cpuReq.context.font = '11px sans-serif';
       for (let re of filter) {
-        CpuStruct.draw(req.context, re, translateY);
+        CpuStruct.draw(cpuReq.context, re, translateY);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(cpuReq.context, cpuReq.params);
+      cpuReq.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        cpuReq.context,
+        cpuReq.flagMoveInfo,
+        cpuReq.flagSelectedInfo,
+        cpuReq.startNS,
+        cpuReq.endNS,
+        cpuReq.totalNS,
+        cpuReq.frame,
+        cpuReq.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: cpuReq.id,
+      type: cpuReq.type,
+      results: cpuReq.canvas ? undefined : filter,
       hover: CpuStruct.hoverCpuStruct,
     });
   }
 
-  cpu(list: Array<any>, res: Array<any>, startNS: number, endNS: number, totalNS: number, frame: any, use: boolean) {
-    if (use && res.length > 0) {
+  cpu(cpuList: Array<any>, cpuRes: Array<any>, startNS: number, endNS: number, totalNS: number, frame: any, use: boolean) {
+    if (use && cpuRes.length > 0) {
       let pns = (endNS - startNS) / frame.width;
       let y = frame.y + 5;
       let height = frame.height - 10;
-      for (let i = 0, len = res.length; i < len; i++) {
-        let it = res[i];
+      for (let i = 0, len = cpuRes.length; i < len; i++) {
+        let it = cpuRes[i];
         if ((it.startTime || 0) + (it.dur || 0) > startNS && (it.startTime || 0) < endNS) {
-          if (!res[i].frame) {
-            res[i].frame = {};
-            res[i].frame.y = y;
-            res[i].frame.height = height;
+          if (!cpuRes[i].frame) {
+            cpuRes[i].frame = {};
+            cpuRes[i].frame.y = y;
+            cpuRes[i].frame.height = height;
           }
-          CpuStruct.setCpuFrame(res[i], pns, startNS, endNS, frame);
+          CpuStruct.setCpuFrame(cpuRes[i], pns, startNS, endNS, frame);
         } else {
-          res[i].frame = null;
+          cpuRes[i].frame = null;
         }
       }
       return;
     }
-    if (list) {
-      res.length = 0;
+    if (cpuList) {
+      cpuRes.length = 0;
       let pns = (endNS - startNS) / frame.width; //每个像素多少ns
       let y = frame.y + 5;
       let height = frame.height - 10;
       let left = 0,
         right = 0;
-      for (let i = 0, j = list.length - 1, ib = true, jb = true; i < list.length, j >= 0; i++, j--) {
-        if (list[j].startTime <= endNS && jb) {
+      for (let i = 0, j = cpuList.length - 1, ib = true, jb = true; i < cpuList.length, j >= 0; i++, j--) {
+        if (cpuList[j].startTime <= endNS && jb) {
           right = j;
           jb = false;
         }
-        if (list[i].startTime + list[i].dur >= startNS && ib) {
+        if (cpuList[i].startTime + cpuList[i].dur >= startNS && ib) {
           left = i;
           ib = false;
         }
@@ -210,7 +211,7 @@ export class CpuRender {
           break;
         }
       }
-      let slice = list.slice(left, right + 1);
+      let slice = cpuList.slice(left, right + 1);
       let sum = 0;
       for (let i = 0; i < slice.length; i++) {
         if (!slice[i].frame) {
@@ -235,7 +236,7 @@ export class CpuRender {
           }
         }
       }
-      res.push(...slice.filter((it) => it.v));
+      cpuRes.push(...slice.filter((it) => it.v));
     }
   }
 }
@@ -249,6 +250,7 @@ export class CpuStruct extends BaseStruct {
   dur: number | undefined;
   end_state: string | undefined;
   id: number | undefined;
+  tid: number | undefined;
   name: string | undefined;
   priority: number | undefined;
   processCmdLine: string | undefined;
@@ -259,7 +261,6 @@ export class CpuStruct extends BaseStruct {
   measurePWidth: number = 0;
   measureTWidth: number = 0;
   startTime: number | undefined;
-  tid: number | undefined;
   argSetID: number | undefined;
   type: string | undefined;
   v: boolean = false;
@@ -350,19 +351,19 @@ export class CpuStruct extends BaseStruct {
     }
   }
 
-  static setCpuFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startTime || 0) < startNS) {
-      node.frame.x = 0;
+  static setCpuFrame(cpuNode: any, pns: number, startNS: number, endNS: number, frame: any) {
+    if ((cpuNode.startTime || 0) < startNS) {
+      cpuNode.frame.x = 0;
     } else {
-      node.frame.x = Math.floor(((node.startTime || 0) - startNS) / pns);
+      cpuNode.frame.x = Math.floor(((cpuNode.startTime || 0) - startNS) / pns);
     }
-    if ((node.startTime || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
+    if ((cpuNode.startTime || 0) + (cpuNode.dur || 0) > endNS) {
+      cpuNode.frame.width = frame.width - cpuNode.frame.x;
     } else {
-      node.frame.width = Math.ceil(((node.startTime || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
+      cpuNode.frame.width = Math.ceil(((cpuNode.startTime || 0) + (cpuNode.dur || 0) - startNS) / pns - cpuNode.frame.x);
     }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
+    if (cpuNode.frame.width < 1) {
+      cpuNode.frame.width = 1;
     }
   }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts
index 485a4f3d3567c88f5e40f3aa3541039b50471c0d..b8243146aec94a11a120d12536be547f82c17de9 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerClock.ts
@@ -19,7 +19,7 @@ import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 
 export class ClockRender extends Render {
   renderMainThread(
-    req: {
+    clockReq: {
       context: CanvasRenderingContext2D;
       useCache: boolean;
       type: string;
@@ -29,10 +29,10 @@ export class ClockRender extends Render {
     },
     row: TraceRow<ClockStruct>
   ) {
-    ClockStruct.index = req.index;
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    ClockStruct.index = clockReq.index;
+    let clockList = row.dataList;
+    let clockFilter = row.dataListCache;
+    dataFilterHandler(clockList, clockFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -40,28 +40,28 @@ export class ClockRender extends Render {
       totalNS: TraceRow.range?.totalNS ?? 0,
       frame: row.frame,
       paddingTop: 5,
-      useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
+      useCache: clockReq.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
+    clockReq.context.beginPath();
     let find = false;
-    for (let re of filter) {
-      ClockStruct.draw(req.context, re, req.maxValue);
+    for (let re of clockFilter) {
+      ClockStruct.draw(clockReq.context, re, clockReq.maxValue);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         ClockStruct.hoverClockStruct = re;
         find = true;
       }
     }
     if (!find && row.isHover) ClockStruct.hoverClockStruct = undefined;
-    req.context.closePath();
-    let s = req.maxName;
-    let textMetrics = req.context.measureText(s);
-    req.context.globalAlpha = 0.8;
-    req.context.fillStyle = '#f0f0f0';
-    req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-    req.context.globalAlpha = 1;
-    req.context.fillStyle = '#333';
-    req.context.textBaseline = 'middle';
-    req.context.fillText(s, 4, 5 + 9);
+    clockReq.context.closePath();
+    let s = clockReq.maxName;
+    let textMetrics = clockReq.context.measureText(s);
+    clockReq.context.globalAlpha = 0.8;
+    clockReq.context.fillStyle = '#f0f0f0';
+    clockReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
+    clockReq.context.globalAlpha = 1;
+    clockReq.context.fillStyle = '#333';
+    clockReq.context.textBaseline = 'middle';
+    clockReq.context.fillText(s, 4, 5 + 9);
   }
 }
 
@@ -77,37 +77,37 @@ export class ClockStruct extends BaseStruct {
   dur: number | undefined; //自补充，数据库没有返回
   delta: number | undefined; //自补充，数据库没有返回
 
-  static draw(ctx: CanvasRenderingContext2D, data: ClockStruct, maxValue: number) {
+  static draw(clockContext: CanvasRenderingContext2D, data: ClockStruct, maxValue: number) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      ctx.fillStyle = ColorUtils.colorForTid(ClockStruct.index);
-      ctx.strokeStyle = ColorUtils.colorForTid(ClockStruct.index);
+      clockContext.fillStyle = ColorUtils.colorForTid(ClockStruct.index);
+      clockContext.strokeStyle = ColorUtils.colorForTid(ClockStruct.index);
       let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxValue);
       if (drawHeight === 0) {
         drawHeight = 1;
       }
       if (ClockStruct.isHover(data)) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        clockContext.lineWidth = 1;
+        clockContext.globalAlpha = 0.6;
+        clockContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        clockContext.beginPath();
+        clockContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        clockContext.fill();
+        clockContext.globalAlpha = 1.0;
+        clockContext.stroke();
+        clockContext.beginPath();
+        clockContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
+        clockContext.lineWidth = 3;
+        clockContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
+        clockContext.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        clockContext.globalAlpha = 0.6;
+        clockContext.lineWidth = 1;
+        clockContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    clockContext.globalAlpha = 1.0;
+    clockContext.lineWidth = 1;
   }
 
   static isHover(clock: ClockStruct) {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
index ef2d50b75e996007af680ca6a70cf0083bbb8e70..cbbd201508d87a9f3e1ace264e94cbcbb7e72adc 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
@@ -72,15 +72,14 @@ export class RequestMessage {
 
 export function ns2s(ns: number): string {
   let second1 = 1_000_000_000; // 1 second
-  let millisecond1 = 1_000_000; // 1 millisecond
-  let microsecond1 = 1_000; // 1 microsecond
-  let nanosecond1 = 1000.0;
+  let millisecond = 1_000_000; // 1 millisecond
+  let microsecond = 1_000; // 1 microsecond
   let res;
   if (ns >= second1) {
     res = (ns / 1000 / 1000 / 1000).toFixed(1) + ' s';
-  } else if (ns >= millisecond1) {
+  } else if (ns >= millisecond) {
     res = (ns / 1000 / 1000).toFixed(1) + ' ms';
-  } else if (ns >= microsecond1) {
+  } else if (ns >= microsecond) {
     res = (ns / 1000).toFixed(1) + ' μs';
   } else if (ns > 0) {
     res = ns.toFixed(1) + ' ns';
@@ -280,7 +279,6 @@ export class Rect {
   y: number = 0;
   width: number = 0;
   height: number = 0;
-
   constructor(x: number, y: number, width: number, height: number) {
     this.x = x;
     this.y = y;
@@ -288,10 +286,26 @@ export class Rect {
     this.height = height;
   }
 
+  static intersect(r1: Rect, rect: Rect): boolean {
+    let minX = r1.x <= rect.x ? r1.x : rect.x;
+    let minY = r1.y <= rect.y ? r1.y : rect.y;
+    let maxX = r1.x + r1.width >= rect.x + rect.width ? r1.x + r1.width : rect.x + rect.width;
+    let maxY = r1.y + r1.height >= rect.y + rect.height ? r1.y + r1.height : rect.y + rect.height;
+    if (maxX - minX <= rect.width + r1.width && maxY - minY <= r1.height + rect.height) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   static contains(rect: Rect, x: number, y: number): boolean {
     return rect.x <= x && x <= rect.x + rect.width && rect.y <= y && y <= rect.y + rect.height;
   }
 
+  static containsWithMargin(rect: Rect, x: number, y: number, t: number, r: number, b: number, l: number): boolean {
+    return rect.x - l <= x && x <= rect.x + rect.width + r && rect.y - t <= y && y <= rect.y + rect.height + b;
+  }
+
   static containsWithPadding(
     rect: Rect,
     x: number,
@@ -301,22 +315,22 @@ export class Rect {
   ): boolean {
     return (
       rect.x + paddingLeftRight <= x &&
-      x <= rect.x + rect.width - paddingLeftRight &&
       rect.y + paddingTopBottom <= y &&
+      x <= rect.x + rect.width - paddingLeftRight &&
       y <= rect.y + rect.height - paddingTopBottom
     );
   }
 
-  static containsWithMargin(rect: Rect, x: number, y: number, t: number, r: number, b: number, l: number): boolean {
-    return rect.x - l <= x && x <= rect.x + rect.width + r && rect.y - t <= y && y <= rect.y + rect.height + b;
-  }
-
-  static intersect(r1: Rect, rect: Rect): boolean {
-    let maxX = r1.x + r1.width >= rect.x + rect.width ? r1.x + r1.width : rect.x + rect.width;
-    let maxY = r1.y + r1.height >= rect.y + rect.height ? r1.y + r1.height : rect.y + rect.height;
-    let minX = r1.x <= rect.x ? r1.x : rect.x;
-    let minY = r1.y <= rect.y ? r1.y : rect.y;
-    if (maxX - minX <= rect.width + r1.width && maxY - minY <= r1.height + rect.height) {
+  /**
+   * 判断是否相交
+   * @param rect
+   */
+  intersect(rect: Rect): boolean {
+    let minX = this.x <= rect.x ? this.x : rect.x;
+    let minY = this.y <= rect.y ? this.y : rect.y;
+    let maxX = this.x + this.width >= rect.x + rect.width ? this.x + this.width : rect.x + rect.width;
+    let maxY = this.y + this.height >= rect.y + rect.height ? this.y + this.height : rect.y + rect.height;
+    if (maxX - minX <= rect.width + this.width && maxY - minY <= this.height + rect.height) {
       return true;
     } else {
       return false;
@@ -327,6 +341,10 @@ export class Rect {
     return this.x <= x && x <= this.x + this.width && this.y <= y && y <= this.y + this.height;
   }
 
+  containsWithMargin(x: number, y: number, t: number, r: number, b: number, l: number): boolean {
+    return this.x - l <= x && x <= this.x + this.width + r && this.y - t <= y && y <= this.y + this.height + b;
+  }
+
   containsWithPadding(x: number, y: number, paddingLeftRight: number, paddingTopBottom: number): boolean {
     return (
       this.x + paddingLeftRight <= x &&
@@ -335,26 +353,6 @@ export class Rect {
       y <= this.y + this.height - paddingTopBottom
     );
   }
-
-  containsWithMargin(x: number, y: number, t: number, r: number, b: number, l: number): boolean {
-    return this.x - l <= x && x <= this.x + this.width + r && this.y - t <= y && y <= this.y + this.height + b;
-  }
-
-  /**
-   * 判断是否相交
-   * @param rect
-   */
-  intersect(rect: Rect): boolean {
-    let maxX = this.x + this.width >= rect.x + rect.width ? this.x + this.width : rect.x + rect.width;
-    let maxY = this.y + this.height >= rect.y + rect.height ? this.y + this.height : rect.y + rect.height;
-    let minX = this.x <= rect.x ? this.x : rect.x;
-    let minY = this.y <= rect.y ? this.y : rect.y;
-    if (maxX - minX <= rect.width + this.width && maxY - minY <= this.height + rect.height) {
-      return true;
-    } else {
-      return false;
-    }
-  }
 }
 
 export class Point {
@@ -408,7 +406,7 @@ export function drawLines(ctx: CanvasRenderingContext2D, xs: Array<any>, height:
 }
 
 export function drawFlagLine(
-  ctx: any,
+  commonCtx: any,
   hoverFlag: any,
   selectFlag: any,
   startNS: number,
@@ -423,38 +421,38 @@ export function drawFlagLine(
       }
     | undefined
 ) {
-  if (ctx) {
+  if (commonCtx) {
     if (hoverFlag) {
-      ctx.beginPath();
-      ctx.lineWidth = 2;
-      ctx.strokeStyle = hoverFlag?.color || '#dadada';
-      ctx.moveTo(Math.floor(hoverFlag.x), 0);
-      ctx.lineTo(Math.floor(hoverFlag.x), frame.height);
-      ctx.stroke();
-      ctx.closePath();
+      commonCtx.beginPath();
+      commonCtx.lineWidth = 2;
+      commonCtx.strokeStyle = hoverFlag?.color || '#dadada';
+      commonCtx.moveTo(Math.floor(hoverFlag.x), 0);
+      commonCtx.lineTo(Math.floor(hoverFlag.x), frame.height);
+      commonCtx.stroke();
+      commonCtx.closePath();
     }
     if (selectFlag) {
-      ctx.beginPath();
-      ctx.lineWidth = 2;
-      ctx.strokeStyle = selectFlag?.color || '#dadada';
+      commonCtx.beginPath();
+      commonCtx.lineWidth = 2;
+      commonCtx.strokeStyle = selectFlag?.color || '#dadada';
       selectFlag.x = ns2x(selectFlag.time, startNS, endNS, totalNS, frame);
-      ctx.moveTo(Math.floor(selectFlag.x), 0);
-      ctx.lineTo(Math.floor(selectFlag.x), frame.height);
-      ctx.stroke();
-      ctx.closePath();
+      commonCtx.moveTo(Math.floor(selectFlag.x), 0);
+      commonCtx.lineTo(Math.floor(selectFlag.x), frame.height);
+      commonCtx.stroke();
+      commonCtx.closePath();
     }
     if (slicesTime && slicesTime.startTime && slicesTime.endTime) {
-      ctx.beginPath();
-      ctx.lineWidth = 1;
-      ctx.strokeStyle = slicesTime.color || '#dadada';
+      commonCtx.beginPath();
+      commonCtx.lineWidth = 1;
+      commonCtx.strokeStyle = slicesTime.color || '#dadada';
       let x1 = ns2x(slicesTime.startTime, startNS, endNS, totalNS, frame);
       let x2 = ns2x(slicesTime.endTime, startNS, endNS, totalNS, frame);
-      ctx.moveTo(Math.floor(x1), 0);
-      ctx.lineTo(Math.floor(x1), frame.height);
-      ctx.moveTo(Math.floor(x2), 0);
-      ctx.lineTo(Math.floor(x2), frame.height);
-      ctx.stroke();
-      ctx.closePath();
+      commonCtx.moveTo(Math.floor(x1), 0);
+      commonCtx.lineTo(Math.floor(x1), frame.height);
+      commonCtx.moveTo(Math.floor(x2), 0);
+      commonCtx.lineTo(Math.floor(x2), frame.height);
+      commonCtx.stroke();
+      commonCtx.closePath();
     }
   }
 }
@@ -579,7 +577,8 @@ export function drawWakeUp(
   totalNS: number,
   frame: Rect,
   selectCpuStruct: CpuStruct | undefined = undefined,
-  currentCpu: number | undefined = undefined
+  currentCpu: number | undefined = undefined,
+  noVerticalLine = false
 ) {
   if (wake) {
     let x1 = Math.floor(ns2x(wake.wakeupTime || 0, startNS, endNS, totalNS, frame));
@@ -587,8 +586,10 @@ export function drawWakeUp(
     context.lineWidth = 2;
     context.fillStyle = '#000000';
     if (x1 > 0 && x1 < frame.x + frame.width) {
-      context.moveTo(x1, frame.y);
-      context.lineTo(x1, frame.y + frame.height);
+      if (!noVerticalLine) {
+        context.moveTo(x1, frame.y);
+        context.lineTo(x1, frame.y + frame.height);
+      }
       if (currentCpu == wake.cpu) {
         let centerY = Math.floor(frame.y + frame.height / 2);
         context.moveTo(x1, centerY - 6);
@@ -735,3 +736,249 @@ export function drawLoading(
   left: number,
   right: number
 ) {}
+
+export function drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect, data: any) {
+  if (data.textMetricsWidth === undefined) {
+    data.textMetricsWidth = ctx.measureText(str).width;
+  }
+  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);
+  } 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);
+      } else {
+        ctx.fillText(str.substring(0, chatNum - 1) + '...', x1, Math.floor(frame.y + frame.height / 2), fillTextWidth);
+      }
+    }
+  }
+}
+
+export function hiPerf(
+  arr: Array<any>,
+  arr2: Array<any>,
+  res: Array<any>,
+  startNS: number,
+  endNS: number,
+  frame: any,
+  groupBy10MS: boolean,
+  use: boolean
+) {
+  if (use && res.length > 0) {
+    let pns = (endNS - startNS) / frame.width;
+    let y = frame.y;
+    for (let i = 0; i < res.length; i++) {
+      let it = res[i];
+      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
+        if (!it.frame) {
+          it.frame = {};
+          it.frame.y = y;
+        }
+        it.frame.height = it.height;
+        HiPerfStruct.setFrame(it, pns, startNS, endNS, frame);
+      } else {
+        it.frame = null;
+      }
+    }
+    return;
+  }
+  res.length = 0;
+  if (arr) {
+    let list = groupBy10MS ? arr2 : arr;
+    let pns = (endNS - startNS) / frame.width;
+    let y = frame.y;
+    for (let i = 0, len = list.length; i < len; i++) {
+      let it = list[i];
+      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
+        if (!list[i].frame) {
+          list[i].frame = {};
+          list[i].frame.y = y;
+        }
+        list[i].frame.height = it.height;
+        HiPerfStruct.setFrame(list[i], pns, startNS, endNS, frame);
+        if (groupBy10MS) {
+          if (
+            i > 0 &&
+            (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
+            (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0) &&
+            (list[i - 1].frame?.height || 0) == (list[i].frame?.height || 0)
+          ) {
+          } else {
+            res.push(list[i]);
+          }
+        } else {
+          if (i > 0 && Math.abs((list[i - 1].frame?.x || 0) - (list[i].frame?.x || 0)) < 4) {
+          } else {
+            res.push(list[i]);
+          }
+        }
+      }
+    }
+  }
+}
+
+export class HiPerfStruct extends BaseStruct {
+  static hoverStruct: HiPerfStruct | undefined;
+  static selectStruct: HiPerfStruct | undefined;
+  id: number | undefined;
+  callchain_id: number | undefined;
+  timestamp: number | undefined;
+  thread_id: number | undefined;
+  event_count: number | undefined;
+  event_type_id: number | undefined;
+  cpu_id: number | undefined;
+  thread_state: string | undefined;
+  startNS: number | undefined;
+  endNS: number | undefined;
+  dur: number | undefined;
+  height: number | undefined;
+
+  static drawRoundRectPath(cxt: Path2D, x: number, y: number, width: number, height: number, radius: number) {
+    cxt.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
+    cxt.lineTo(x + radius, y + height);
+    cxt.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
+    cxt.lineTo(x + 0, y + radius);
+    cxt.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
+    cxt.lineTo(x + width - radius, y + 0);
+    cxt.arc(x + width - radius, y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
+    cxt.lineTo(x + width, y + height - radius);
+    cxt.moveTo(x + width / 3, y + height / 5);
+    cxt.lineTo(x + width / 3, y + (height / 5) * 4);
+    cxt.moveTo(x + width / 3, y + height / 5);
+    cxt.bezierCurveTo(
+      x + width / 3 + 7,
+      y + height / 5 - 2,
+      x + width / 3 + 7,
+      y + height / 5 + 6,
+      x + width / 3,
+      y + height / 5 + 4
+    );
+  }
+
+  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: any, groupBy10MS: boolean) {
+    if (data.frame) {
+      if (groupBy10MS) {
+        let width = data.frame.width;
+        path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
+      } else {
+        path.moveTo(data.frame.x + 7, 20);
+        HiPerfStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3);
+        path.moveTo(data.frame.x, 27);
+        path.lineTo(data.frame.x, 33);
+      }
+    }
+  }
+
+  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
+    if ((node.startNS || 0) < startNS) {
+      node.frame.x = 0;
+    } else {
+      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
+    }
+    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
+      node.frame.width = frame.width - node.frame.x;
+    } else {
+      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
+    }
+    if (node.frame.width < 1) {
+      node.frame.width = 1;
+    }
+  }
+
+  static groupBy10MS(array: Array<any>, intervalPerf: number, maxCpu?: number | undefined): Array<any> {
+    let obj = array
+      .map((it) => {
+        it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
+        return it;
+      })
+      .reduce((pre, current) => {
+        (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
+        return pre;
+      }, {});
+    let arr = [];
+    for (let aKey in obj) {
+      let ns = parseInt(aKey);
+      let height: number = 0;
+      if (maxCpu != undefined) {
+        height = Math.floor((obj[aKey].length / (10 / intervalPerf) / maxCpu) * 40);
+      } else {
+        height = Math.floor((obj[aKey].length / (10 / intervalPerf)) * 40);
+      }
+      arr.push({
+        startNS: ns,
+        dur: 1_000_000_0,
+        height: height,
+      });
+    }
+    return arr;
+  }
+}
+
+function setMemFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  let x1: number;
+  let x2: number;
+  if ((node.startTime || 0) <= startNS) {
+    x1 = 0;
+  } else {
+    x1 = ns2x(node.startTime || 0, startNS, endNS, totalNS, frame);
+  }
+  if ((node.startTime || 0) + (node.duration || 0) >= endNS) {
+    x2 = frame.width;
+  } else {
+    x2 = ns2x((node.startTime || 0) + (node.duration || 0), startNS, endNS, totalNS, frame);
+  }
+  let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
+  if (!node.frame) {
+    node.frame = {};
+  }
+  node.frame.x = Math.floor(x1);
+  node.frame.y = Math.floor(frame.y + padding);
+  node.frame.width = Math.ceil(getV);
+  node.frame.height = Math.floor(frame.height - padding * 2);
+}
+
+export function mem(
+  list: Array<any>,
+  memFilter: Array<any>,
+  startNS: number,
+  endNS: number,
+  totalNS: number,
+  frame: any,
+  use: boolean
+) {
+  if (use && memFilter.length > 0) {
+    for (let i = 0, len = memFilter.length; i < len; i++) {
+      if (
+        (memFilter[i].startTime || 0) + (memFilter[i].duration || 0) > startNS &&
+        (memFilter[i].startTime || 0) < endNS
+      ) {
+        setMemFrame(memFilter[i], 5, startNS, endNS, totalNS, frame);
+      } else {
+        memFilter[i].frame = null;
+      }
+    }
+    return;
+  }
+  memFilter.length = 0;
+  if (list) {
+    for (let i = 0, len = list.length; i < len; i++) {
+      let it = list[i];
+      if ((it.startTime || 0) + (it.duration || 0) > startNS && (it.startTime || 0) < endNS) {
+        setMemFrame(list[i], 5, startNS, endNS, totalNS, frame);
+        if (
+          i > 0 &&
+          (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
+          (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0)
+        ) {
+        } else {
+          memFilter.push(list[i]);
+        }
+      }
+    }
+  }
+}
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts
index 2cdced3a0a54057eeb3b62dfd53921ffa2ac0ff7..6feada87acec280581e28bccfa8b3996affa2ce1 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts
@@ -17,15 +17,10 @@ import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
   BaseStruct,
   dataFilterHandler,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
-  drawSelection,
-  drawWakeUp,
   isFrameContainPoint,
   ns2x,
-  Render,
   RequestMessage,
+  Render,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 import { DiskAbilityMonitorStruct } from './ProcedureWorkerDiskIoAbility.js';
@@ -41,9 +36,9 @@ export class CpuAbilityRender extends Render {
     },
     row: TraceRow<CpuAbilityMonitorStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let cpuAbilityList = row.dataList;
+    let cpuAbilityFilter = row.dataListCache;
+    dataFilterHandler(cpuAbilityList, cpuAbilityFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -55,7 +50,7 @@ export class CpuAbilityRender extends Render {
     });
     req.context.beginPath();
     let find = false;
-    for (let re of filter) {
+    for (let re of cpuAbilityFilter) {
       CpuAbilityMonitorStruct.draw(req.context, re, req.maxCpuUtilization, row.isHover);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         CpuAbilityMonitorStruct.hoverCpuAbilityStruct = re;
@@ -78,7 +73,7 @@ export class CpuAbilityRender extends Render {
 }
 
 export function cpuAbility(
-  list: Array<any>,
+  cpuAbilityList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -98,20 +93,27 @@ export function cpuAbility(
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let index = 0; index < list.length; index++) {
-      let item = list[index];
-      if (index === list.length - 1) {
+  if (cpuAbilityList) {
+    for (let cpuAbilityIndex = 0; cpuAbilityIndex < cpuAbilityList.length; cpuAbilityIndex++) {
+      let item = cpuAbilityList[cpuAbilityIndex];
+      if (cpuAbilityIndex === cpuAbilityList.length - 1) {
         item.dur = (endNS || 0) - (item.startNS || 0);
       } else {
-        item.dur = (list[index + 1].startNS || 0) - (item.startNS || 0);
+        item.dur = (cpuAbilityList[cpuAbilityIndex + 1].startNS || 0) - (item.startNS || 0);
       }
       if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        CpuAbilityMonitorStruct.setCpuAbilityFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        CpuAbilityMonitorStruct.setCpuAbilityFrame(
+          cpuAbilityList[cpuAbilityIndex],
+          5,
+          startNS || 0,
+          endNS || 0,
+          totalNS || 0,
+          frame
+        );
         if (
-          index > 0 &&
-          (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-          (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+          cpuAbilityIndex > 0 &&
+          (cpuAbilityList[cpuAbilityIndex - 1].frame?.x || 0) == (cpuAbilityList[cpuAbilityIndex].frame?.x || 0) &&
+          (cpuAbilityList[cpuAbilityIndex - 1].frame?.width || 0) == (cpuAbilityList[cpuAbilityIndex].frame?.width || 0)
         ) {
         } else {
           res.push(item);
@@ -133,7 +135,7 @@ export class CpuAbilityMonitorStruct extends BaseStruct {
   dur: number | undefined; //自补充，数据库没有返回
 
   static draw(
-    context2D: CanvasRenderingContext2D,
+    cpuAbilityContext2D: CanvasRenderingContext2D,
     data: CpuAbilityMonitorStruct,
     maxCpuUtilization: number,
     isHover: boolean
@@ -141,55 +143,56 @@ export class CpuAbilityMonitorStruct extends BaseStruct {
     if (data.frame) {
       let width = data.frame.width || 0;
       let index = 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
+      cpuAbilityContext2D.fillStyle = ColorUtils.colorForTid(index);
+      cpuAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index);
       if (data.startNS === CpuAbilityMonitorStruct.hoverCpuAbilityStruct?.startNS && isHover) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
+        cpuAbilityContext2D.lineWidth = 1;
+        cpuAbilityContext2D.globalAlpha = 0.6;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxCpuUtilization);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.stroke();
+        cpuAbilityContext2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        cpuAbilityContext2D.beginPath();
+        cpuAbilityContext2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
+        cpuAbilityContext2D.fill();
+        cpuAbilityContext2D.globalAlpha = 1.0;
+        cpuAbilityContext2D.stroke();
+        cpuAbilityContext2D.beginPath();
+        cpuAbilityContext2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        cpuAbilityContext2D.lineWidth = 3;
+        cpuAbilityContext2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        cpuAbilityContext2D.stroke();
       } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
+        cpuAbilityContext2D.globalAlpha = 0.6;
+        cpuAbilityContext2D.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxCpuUtilization);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        cpuAbilityContext2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    cpuAbilityContext2D.globalAlpha = 1.0;
+    cpuAbilityContext2D.lineWidth = 1;
   }
 
-  static setCpuAbilityFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setCpuAbilityFrame(cpuAbilityNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let cpuAbilityStartPointX: number, cpuAbilityEndPointX: number;
 
-    if ((node.startNS || 0) < startNS) {
-      startPointX = 0;
+    if ((cpuAbilityNode.startNS || 0) < startNS) {
+      cpuAbilityStartPointX = 0;
     } else {
-      startPointX = ns2x(node.startNS || 0, startNS, endNS, totalNS, frame);
+      cpuAbilityStartPointX = ns2x(cpuAbilityNode.startNS || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((cpuAbilityNode.startNS || 0) + (cpuAbilityNode.dur || 0) > endNS) {
+      cpuAbilityEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      cpuAbilityEndPointX = ns2x((cpuAbilityNode.startNS || 0) + (cpuAbilityNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number =
+      cpuAbilityEndPointX - cpuAbilityStartPointX <= 1 ? 1 : cpuAbilityEndPointX - cpuAbilityStartPointX;
+    if (!cpuAbilityNode.frame) {
+      cpuAbilityNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    cpuAbilityNode.frame.x = Math.floor(cpuAbilityStartPointX);
+    cpuAbilityNode.frame.y = frame.y + padding;
+    cpuAbilityNode.frame.width = Math.ceil(frameWidth);
+    cpuAbilityNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.ts
index 34e89f7efef8a5002ac9c02ecd92949bc5634e64..f4e46ac9182d3d972e68d3a01c7a407001b913f5 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.ts
@@ -16,15 +16,14 @@
 import {
   BaseStruct,
   dataFilterHandler,
-  drawFlagLine,
-  drawLines,
   drawLoading,
-  drawSelection,
-  drawWakeUp,
   isFrameContainPoint,
   ns2x,
+  drawLines,
   Render,
+  drawFlagLine,
   RequestMessage,
+  drawSelection,
 } from './ProcedureWorkerCommon.js';
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
@@ -32,7 +31,7 @@ import { convertJSON } from '../logic-worker/ProcedureLogicWorkerCommon.js';
 
 export class CpuFreqLimitRender extends Render {
   renderMainThread(
-    req: {
+    cpuFreqLimitReq: {
       useCache: boolean;
       context: CanvasRenderingContext2D;
       cpu: number;
@@ -52,11 +51,11 @@ export class CpuFreqLimitRender extends Render {
       totalNS: TraceRow.range?.totalNS ?? 0,
       frame: row.frame,
       paddingTop: 5,
-      useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
+      useCache: cpuFreqLimitReq.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
-    let maxFreq = req.maxFreq;
-    let maxFreqName = req.maxFreqName;
+    cpuFreqLimitReq.context.beginPath();
+    let maxFreq = cpuFreqLimitReq.maxFreq;
+    let maxFreqName = cpuFreqLimitReq.maxFreqName;
     if (row.isHover) {
       for (let re of filter) {
         if (re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
@@ -66,101 +65,117 @@ export class CpuFreqLimitRender extends Render {
       }
     }
     for (let re of filter) {
-      CpuFreqLimitsStruct.draw(req.context, re, maxFreq);
+      CpuFreqLimitsStruct.draw(cpuFreqLimitReq.context, re, maxFreq);
     }
-    req.context.closePath();
+    cpuFreqLimitReq.context.closePath();
     let s = maxFreqName;
-    let textMetrics = req.context.measureText(s);
-    req.context.globalAlpha = 0.8;
-    req.context.fillStyle = '#f0f0f0';
-    req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-    req.context.globalAlpha = 1;
-    req.context.fillStyle = '#333';
-    req.context.textBaseline = 'middle';
-    req.context.fillText(s, 4, 5 + 9);
+    let textMetrics = cpuFreqLimitReq.context.measureText(s);
+    cpuFreqLimitReq.context.globalAlpha = 0.8;
+    cpuFreqLimitReq.context.fillStyle = '#f0f0f0';
+    cpuFreqLimitReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
+    cpuFreqLimitReq.context.globalAlpha = 1;
+    cpuFreqLimitReq.context.fillStyle = '#333';
+    cpuFreqLimitReq.context.textBaseline = 'middle';
+    cpuFreqLimitReq.context.fillText(s, 4, 5 + 9);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      freqLimits(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(freqLimitsReq: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (freqLimitsReq.lazyRefresh) {
+      freqLimits(
+        list,
+        filter,
+        freqLimitsReq.startNS,
+        freqLimitsReq.endNS,
+        freqLimitsReq.totalNS,
+        freqLimitsReq.frame,
+        freqLimitsReq.useCache || !freqLimitsReq.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        freqLimits(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!freqLimitsReq.useCache) {
+        freqLimits(
+          list,
+          filter,
+          freqLimitsReq.startNS,
+          freqLimitsReq.endNS,
+          freqLimitsReq.totalNS,
+          freqLimitsReq.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (freqLimitsReq.canvas) {
+      freqLimitsReq.context.clearRect(0, 0, freqLimitsReq.frame.width, freqLimitsReq.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (arr.length > 0 && !freqLimitsReq.range.refresh && !freqLimitsReq.useCache && freqLimitsReq.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          freqLimitsReq.context,
+          freqLimitsReq.startNS,
+          freqLimitsReq.endNS,
+          freqLimitsReq.totalNS,
+          freqLimitsReq.frame,
           arr[0].startNs,
           arr[arr.length - 1].startNs + arr[arr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      let maxFreq = req.params.maxFreq;
-      let maxFreqName = req.params.maxFreqName;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      freqLimitsReq.context.beginPath();
+      let maxFreq = freqLimitsReq.params.maxFreq;
+      let maxFreqName = freqLimitsReq.params.maxFreqName;
+      drawLines(freqLimitsReq.context, freqLimitsReq.xs, freqLimitsReq.frame.height, freqLimitsReq.lineColor);
       CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct = undefined;
-      if (req.isHover) {
+      if (freqLimitsReq.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            freqLimitsReq.hoverX >= re.frame.x &&
+            freqLimitsReq.hoverX <= re.frame.x + re.frame.width &&
+            freqLimitsReq.hoverY >= re.frame.y &&
+            freqLimitsReq.hoverY <= re.frame.y + re.frame.height
           ) {
             CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct = re;
             break;
           }
         }
       } else {
-        CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct = req.params.hoverCpuFreqLimitsStruct;
+        CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct = freqLimitsReq.params.hoverCpuFreqLimitsStruct;
       }
-      CpuFreqLimitsStruct.selectCpuFreqLimitsStruct = req.params.selectCpuFreqLimitsStruct;
+      CpuFreqLimitsStruct.selectCpuFreqLimitsStruct = freqLimitsReq.params.selectCpuFreqLimitsStruct;
       for (let re of filter) {
-        CpuFreqLimitsStruct.draw(req.context, re, maxFreq);
+        CpuFreqLimitsStruct.draw(freqLimitsReq.context, re, maxFreq);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(freqLimitsReq.context, freqLimitsReq.params);
+      freqLimitsReq.context.closePath();
       let s = maxFreqName;
-      let textMetrics = req.context.measureText(s);
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(s, 4, 5 + 9);
+      let textMetrics = freqLimitsReq.context.measureText(s);
+      freqLimitsReq.context.globalAlpha = 0.8;
+      freqLimitsReq.context.fillStyle = '#f0f0f0';
+      freqLimitsReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
+      freqLimitsReq.context.globalAlpha = 1;
+      freqLimitsReq.context.fillStyle = '#333';
+      freqLimitsReq.context.textBaseline = 'middle';
+      freqLimitsReq.context.fillText(s, 4, 5 + 9);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        freqLimitsReq.context,
+        freqLimitsReq.flagMoveInfo,
+        freqLimitsReq.flagSelectedInfo,
+        freqLimitsReq.startNS,
+        freqLimitsReq.endNS,
+        freqLimitsReq.totalNS,
+        freqLimitsReq.frame,
+        freqLimitsReq.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: freqLimitsReq.id,
+      type: freqLimitsReq.type,
+      results: freqLimitsReq.canvas ? undefined : filter,
       hover: CpuFreqLimitsStruct.hoverCpuFreqLimitsStruct,
     });
   }
 }
 
 export function freqLimits(
-  list: Array<any>,
+  freqLimitsList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -173,20 +188,20 @@ export function freqLimits(
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let i = 0, len = list.length; i < len; i++) {
-      let it = list[i];
-      if (i === list.length - 1) {
+  if (freqLimitsList) {
+    for (let i = 0, len = freqLimitsList.length; i < len; i++) {
+      let it = freqLimitsList[i];
+      if (i === freqLimitsList.length - 1) {
         it.dur = (endNS || 0) - (it.startNs || 0);
       } else {
-        it.dur = (list[i + 1].startNs || 0) - (it.startNs || 0);
+        it.dur = (freqLimitsList[i + 1].startNs || 0) - (it.startNs || 0);
       }
       if ((it.startNs || 0) + (it.dur || 0) > (startNS || 0) && (it.startNs || 0) < (endNS || 0)) {
-        CpuFreqLimitsStruct.setFreqLimitFrame(list[i], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        CpuFreqLimitsStruct.setFreqLimitFrame(freqLimitsList[i], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         if (
           i > 0 &&
-          (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
-          (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0)
+          (freqLimitsList[i - 1].frame?.x || 0) == (freqLimitsList[i].frame?.x || 0) &&
+          (freqLimitsList[i - 1].frame?.width || 0) == (freqLimitsList[i].frame?.width || 0)
         ) {
         } else {
           res.push(it);
@@ -264,25 +279,32 @@ export class CpuFreqLimitsStruct extends BaseStruct {
     }
   }
 
-  static setFreqLimitFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  static setFreqLimitFrame(
+    freqLimitNode: any,
+    padding: number,
+    startNS: number,
+    endNS: number,
+    totalNS: number,
+    frame: any
+  ) {
     let x1: number, x2: number;
-    if ((node.startNs || 0) < startNS) {
+    if ((freqLimitNode.startNs || 0) < startNS) {
       x1 = 0;
     } else {
-      x1 = ns2x(node.startNs || 0, startNS, endNS, totalNS, frame);
+      x1 = ns2x(freqLimitNode.startNs || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNs || 0) + (node.dur || 0) > endNS) {
+    if ((freqLimitNode.startNs || 0) + (freqLimitNode.dur || 0) > endNS) {
       x2 = frame.width;
     } else {
-      x2 = ns2x((node.startNs || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      x2 = ns2x((freqLimitNode.startNs || 0) + (freqLimitNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
-    if (!node.frame) {
-      node.frame = {};
+    let cpuFreqLimitsGetV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
+    if (!freqLimitNode.frame) {
+      freqLimitNode.frame = {};
     }
-    node.frame.x = Math.floor(x1);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(getV);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    freqLimitNode.frame.x = Math.floor(x1);
+    freqLimitNode.frame.y = frame.y + padding;
+    freqLimitNode.frame.width = Math.ceil(cpuFreqLimitsGetV);
+    freqLimitNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts
index e9b60ca66053ecee32a51a9fdb638b861732bf68..6c52a321c3b33d539b625ea70637b5fc6b628b59 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts
@@ -76,87 +76,91 @@ export class CpuStateRender extends PerfRender {
     req.context.fill(path);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    if (req.lazyRefresh) {
+  render(cpuStateReq: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    if (cpuStateReq.lazyRefresh) {
       this.cpuState(
         list,
         dataList2,
-        req.type!,
+        cpuStateReq.type!,
         filter,
-        req.params.cpu,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.useCache || !req.range.refresh
+        cpuStateReq.params.cpu,
+        cpuStateReq.startNS,
+        cpuStateReq.endNS,
+        cpuStateReq.totalNS,
+        cpuStateReq.frame,
+        cpuStateReq.useCache || !cpuStateReq.range.refresh
       );
     } else {
-      if (!req.useCache) {
+      if (!cpuStateReq.useCache) {
         this.cpuState(
           list,
           dataList2,
-          req.type!,
+          cpuStateReq.type!,
           filter,
-          req.params.cpu,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          cpuStateReq.params.cpu,
+          cpuStateReq.startNS,
+          cpuStateReq.endNS,
+          cpuStateReq.totalNS,
+          cpuStateReq.frame,
           false
         );
       }
     }
     CpuStateStruct.hoverStateStruct = undefined;
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      if (filter.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (cpuStateReq.canvas) {
+      cpuStateReq.context.clearRect(0, 0, cpuStateReq.frame.width, cpuStateReq.frame.height);
+      if (filter.length > 0 && !cpuStateReq.range.refresh && !cpuStateReq.useCache && cpuStateReq.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          cpuStateReq.context,
+          cpuStateReq.startNS,
+          cpuStateReq.endNS,
+          cpuStateReq.totalNS,
+          cpuStateReq.frame,
           filter[0].startTs,
           filter[filter.length - 1].startTs + filter[filter.length - 1].dur
         );
       }
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      if (req.isHover) {
+      cpuStateReq.context.beginPath();
+      drawLines(cpuStateReq.context, cpuStateReq.xs, cpuStateReq.frame.height, cpuStateReq.lineColor);
+      if (cpuStateReq.isHover) {
         let offset = 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            cpuStateReq.hoverX >= re.frame.x - offset &&
+            cpuStateReq.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             CpuStateStruct.hoverStateStruct = re;
             break;
           }
         }
       }
-      CpuStateStruct.selectStateStruct = req.params.selectStateStruct;
-      req.context.font = '11px sans-serif';
-      req.context.fillStyle = req.chartColor;
-      req.context.strokeStyle = req.chartColor;
-      req.context.globalAlpha = 0.6;
+      CpuStateStruct.selectStateStruct = cpuStateReq.params.selectStateStruct;
+      cpuStateReq.context.font = '11px sans-serif';
+      cpuStateReq.context.fillStyle = cpuStateReq.chartColor;
+      cpuStateReq.context.strokeStyle = cpuStateReq.chartColor;
+      cpuStateReq.context.globalAlpha = 0.6;
       let path = new Path2D();
       for (let re of filter) {
-        CpuStateStruct.draw(req.context, path, re);
+        CpuStateStruct.draw(cpuStateReq.context, path, re);
       }
-      req.context.fill(path);
-      drawSelection(req.context, req.params);
+      cpuStateReq.context.fill(path);
+      drawSelection(cpuStateReq.context, cpuStateReq.params);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        cpuStateReq.context,
+        cpuStateReq.flagMoveInfo,
+        cpuStateReq.flagSelectedInfo,
+        cpuStateReq.startNS,
+        cpuStateReq.endNS,
+        cpuStateReq.totalNS,
+        cpuStateReq.frame,
+        cpuStateReq.slicesTime
       );
     }
     let msg = {
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: cpuStateReq.id,
+      type: cpuStateReq.type,
+      results: cpuStateReq.canvas ? undefined : filter,
       hover: CpuStateStruct.hoverStateStruct,
     };
     self.postMessage(msg);
@@ -166,7 +170,7 @@ export class CpuStateRender extends PerfRender {
     arr: Array<any>,
     arr2: Array<any>,
     type: string,
-    res: Array<any>,
+    cpuStateRes: Array<any>,
     cpu: number,
     startNS: number,
     endNS: number,
@@ -174,25 +178,24 @@ export class CpuStateRender extends PerfRender {
     frame: any,
     use: boolean
   ) {
-    if (use && res.length > 0) {
-      for (let i = 0, len = res.length; i < len; i++) {
-        if ((res[i].startTs || 0) + (res[i].dur || 0) >= startNS && (res[i].startTs || 0) <= endNS) {
-          CpuStateStruct.setFrame(res[i], 5, startNS, endNS, totalNS, frame);
+    if (use && cpuStateRes.length > 0) {
+      for (let i = 0, len = cpuStateRes.length; i < len; i++) {
+        if ((cpuStateRes[i].startTs || 0) + (cpuStateRes[i].dur || 0) >= startNS && (cpuStateRes[i].startTs || 0) <= endNS) {
+          CpuStateStruct.setFrame(cpuStateRes[i], 5, startNS, endNS, totalNS, frame);
         } else {
-          res[i].frame = null;
+          cpuStateRes[i].frame = null;
         }
       }
       return;
     }
-    res.length = 0;
+    cpuStateRes.length = 0;
     if (arr) {
       let list: Array<any> = arr2;
-      res.length = 0;
+      cpuStateRes.length = 0;
       let pns = (endNS - startNS) / frame.width; //每个像素多少ns
       let y = frame.y + 5;
-      let height = frame.height - 10;
-      let left = 0,
-        right = 0;
+      let frameHeight = frame.height - 10;
+      let left = 0, right = 0;
       for (let i = 0, j = list.length - 1, ib = true, jb = true; i < list.length, j >= 0; i++, j--) {
         if (list[j].startTs <= endNS && jb) {
           right = j;
@@ -212,7 +215,7 @@ export class CpuStateRender extends PerfRender {
         if (!slice[i].frame) {
           slice[i].frame = {};
           slice[i].frame.y = y;
-          slice[i].frame.height = height;
+          slice[i].frame.height = frameHeight;
         }
         if (slice[i].dur >= pns) {
           slice[i].v = true;
@@ -231,7 +234,7 @@ export class CpuStateRender extends PerfRender {
           }
         }
       }
-      res.push(...slice.filter((it) => it.v));
+      cpuStateRes.push(...slice.filter((it) => it.v));
     }
   }
 }
@@ -269,40 +272,42 @@ export class CpuStateStruct extends BaseStruct {
     }
   }
 
-  static setCpuFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startTime || 0) < startNS) {
-      node.frame.x = 0;
+  static setCpuFrame(cpuStateNode: any, pns: number, startNS: number, endNS: number, frame: any) {
+    if ((cpuStateNode.startTime || 0) < startNS) {
+      cpuStateNode.frame.x = 0;
     } else {
-      node.frame.x = Math.floor(((node.startTs || 0) - startNS) / pns);
+      cpuStateNode.frame.x = Math.floor(((cpuStateNode.startTs || 0) - startNS) / pns);
     }
-    if ((node.startTime || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
+    if ((cpuStateNode.startTime || 0) + (cpuStateNode.dur || 0) > endNS) {
+      cpuStateNode.frame.width = frame.width - cpuStateNode.frame.x;
     } else {
-      node.frame.width = Math.ceil(((node.startTs || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
+      cpuStateNode.frame.width = Math.ceil(
+        ((cpuStateNode.startTs || 0) + (cpuStateNode.dur || 0) - startNS) / pns - cpuStateNode.frame.x
+      );
     }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
+    if (cpuStateNode.frame.width < 1) {
+      cpuStateNode.frame.width = 1;
     }
   }
-  static setFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  static setFrame(cpuStateNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
     let x1: number, x2: number;
-    if ((node.startTs || 0) < startNS) {
+    if ((cpuStateNode.startTs || 0) < startNS) {
       x1 = 0;
     } else {
-      x1 = ns2x(node.startTs || 0, startNS, endNS, totalNS, frame);
+      x1 = ns2x(cpuStateNode.startTs || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startTs || 0) + (node.dur || 0) > endNS) {
+    if ((cpuStateNode.startTs || 0) + (cpuStateNode.dur || 0) > endNS) {
       x2 = frame.width;
     } else {
-      x2 = ns2x((node.startTs || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      x2 = ns2x((cpuStateNode.startTs || 0) + (cpuStateNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
-    if (!node.frame) {
-      node.frame = {};
+    let cpuStateGetV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
+    if (!cpuStateNode.frame) {
+      cpuStateNode.frame = {};
     }
-    node.frame.x = Math.ceil(x1);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.floor(getV);
-    node.frame.height = node.height;
+    cpuStateNode.frame.x = Math.ceil(x1);
+    cpuStateNode.frame.y = frame.y + padding;
+    cpuStateNode.frame.width = Math.floor(cpuStateGetV);
+    cpuStateNode.frame.height = cpuStateNode.height;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts
index 6174066e0c8698937bda8ecf55ad864419d17ad2..7984a5eadb643a6a1cc10ae80811611d76fde354 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts
@@ -16,16 +16,15 @@
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
   BaseStruct,
-  dataFilterHandler,
-  drawFlagLine,
   drawLines,
   drawLoading,
   drawSelection,
-  drawWakeUp,
   isFrameContainPoint,
   ns2x,
   Render,
+  drawFlagLine,
   RequestMessage,
+  dataFilterHandler,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
@@ -40,9 +39,9 @@ export class DiskIoAbilityRender extends Render {
     },
     row: TraceRow<DiskAbilityMonitorStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let diskIoAbilityList = row.dataList;
+    let diskIoFilter = row.dataListCache;
+    dataFilterHandler(diskIoAbilityList, diskIoFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -54,7 +53,7 @@ export class DiskIoAbilityRender extends Render {
     });
     req.context.beginPath();
     let find = false;
-    for (let re of filter) {
+    for (let re of diskIoFilter) {
       DiskAbilityMonitorStruct.draw(req.context, re, req.maxDiskRate, row.isHover);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         DiskAbilityMonitorStruct.hoverDiskAbilityStruct = re;
@@ -73,84 +72,110 @@ export class DiskIoAbilityRender extends Render {
     req.context.fillText(req.maxDiskRateName, 4, 5 + 9);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      diskIoAbility(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(diskAbilityRequest: RequestMessage, diskIoAbilityList: Array<any>, filter: Array<any>) {
+    if (diskAbilityRequest.lazyRefresh) {
+      diskIoAbility(
+        diskIoAbilityList,
+        filter,
+        diskAbilityRequest.startNS,
+        diskAbilityRequest.endNS,
+        diskAbilityRequest.totalNS,
+        diskAbilityRequest.frame,
+        diskAbilityRequest.useCache || !diskAbilityRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        diskIoAbility(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!diskAbilityRequest.useCache) {
+        diskIoAbility(
+          diskIoAbilityList,
+          filter,
+          diskAbilityRequest.startNS,
+          diskAbilityRequest.endNS,
+          diskAbilityRequest.totalNS,
+          diskAbilityRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (diskAbilityRequest.canvas) {
+      diskAbilityRequest.context.clearRect(0, 0, diskAbilityRequest.frame.width, diskAbilityRequest.frame.height);
+      let diskIoArr = filter;
+      if (
+        diskIoArr.length > 0 &&
+        !diskAbilityRequest.range.refresh &&
+        !diskAbilityRequest.useCache &&
+        diskAbilityRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          diskAbilityRequest.context,
+          diskAbilityRequest.startNS,
+          diskAbilityRequest.endNS,
+          diskAbilityRequest.totalNS,
+          diskAbilityRequest.frame,
+          diskIoArr[0].startNS,
+          diskIoArr[diskIoArr.length - 1].startNS + diskIoArr[diskIoArr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      let maxDiskRate = req.params.maxDiskRate;
-      let maxDiskRateName = req.params.maxDiskRateName;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      diskAbilityRequest.context.beginPath();
+      let maxDiskRate = diskAbilityRequest.params.maxDiskRate;
+      let maxDiskRateName = diskAbilityRequest.params.maxDiskRateName;
+      drawLines(
+        diskAbilityRequest.context,
+        diskAbilityRequest.xs,
+        diskAbilityRequest.frame.height,
+        diskAbilityRequest.lineColor
+      );
       DiskAbilityMonitorStruct.hoverDiskAbilityStruct = undefined;
-      if (req.isHover) {
+      if (diskAbilityRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            diskAbilityRequest.hoverX >= re.frame.x &&
+            diskAbilityRequest.hoverX <= re.frame.x + re.frame.width &&
+            diskAbilityRequest.hoverY >= re.frame.y &&
+            diskAbilityRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             DiskAbilityMonitorStruct.hoverDiskAbilityStruct = re;
             break;
           }
         }
       }
-      DiskAbilityMonitorStruct.selectDiskAbilityStruct = req.params.selectDiskAbilityStruct;
+      DiskAbilityMonitorStruct.selectDiskAbilityStruct = diskAbilityRequest.params.selectDiskAbilityStruct;
       for (let re of filter) {
-        DiskAbilityMonitorStruct.draw(req.context, re, maxDiskRate, true);
+        DiskAbilityMonitorStruct.draw(diskAbilityRequest.context, re, maxDiskRate, true);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
-      let textMetrics = req.context.measureText(maxDiskRateName);
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(maxDiskRateName, 4, 5 + 9);
+      drawSelection(diskAbilityRequest.context, diskAbilityRequest.params);
+      diskAbilityRequest.context.closePath();
+      let textMetrics = diskAbilityRequest.context.measureText(maxDiskRateName);
+      diskAbilityRequest.context.globalAlpha = 0.8;
+      diskAbilityRequest.context.fillStyle = '#f0f0f0';
+      diskAbilityRequest.context.fillRect(0, 5, textMetrics.width + 8, 18);
+      diskAbilityRequest.context.globalAlpha = 1;
+      diskAbilityRequest.context.fillStyle = '#333';
+      diskAbilityRequest.context.textBaseline = 'middle';
+      diskAbilityRequest.context.fillText(maxDiskRateName, 4, 5 + 9);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        diskAbilityRequest.context,
+        diskAbilityRequest.flagMoveInfo,
+        diskAbilityRequest.flagSelectedInfo,
+        diskAbilityRequest.startNS,
+        diskAbilityRequest.endNS,
+        diskAbilityRequest.totalNS,
+        diskAbilityRequest.frame,
+        diskAbilityRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: diskAbilityRequest.id,
+      type: diskAbilityRequest.type,
+      results: diskAbilityRequest.canvas ? undefined : filter,
       hover: DiskAbilityMonitorStruct.hoverDiskAbilityStruct,
     });
   }
 }
 
 export function diskIoAbility(
-  list: Array<any>,
+  diskIoAbilityList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -160,30 +185,30 @@ export function diskIoAbility(
 ) {
   if (use && res.length > 0) {
     for (let i = 0; i < res.length; i++) {
-      let item = res[i];
-      if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        DiskAbilityMonitorStruct.setDiskIOFrame(item, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+      let diskIoAbilityItem = res[i];
+      if ((diskIoAbilityItem.startNS || 0) + (diskIoAbilityItem.dur || 0) > (startNS || 0) && (diskIoAbilityItem.startNS || 0) < (endNS || 0)) {
+        DiskAbilityMonitorStruct.setDiskIOFrame(diskIoAbilityItem, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
       } else {
-        item.frame = null;
+        diskIoAbilityItem.frame = null;
       }
     }
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let index = 0; index < list.length; index++) {
-      let item = list[index];
-      if (index === list.length - 1) {
+  if (diskIoAbilityList) {
+    for (let index = 0; index < diskIoAbilityList.length; index++) {
+      let item = diskIoAbilityList[index];
+      if (index === diskIoAbilityList.length - 1) {
         item.dur = (endNS || 0) - (item.startNS || 0);
       } else {
-        item.dur = (list[index + 1].startNS || 0) - (item.startNS || 0);
+        item.dur = (diskIoAbilityList[index + 1].startNS || 0) - (item.startNS || 0);
       }
       if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        DiskAbilityMonitorStruct.setDiskIOFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        DiskAbilityMonitorStruct.setDiskIOFrame(diskIoAbilityList[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         if (
           index > 0 &&
-          (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-          (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+          (diskIoAbilityList[index - 1].frame?.x || 0) == (diskIoAbilityList[index].frame?.x || 0) &&
+          (diskIoAbilityList[index - 1].frame?.width || 0) == (diskIoAbilityList[index].frame?.width || 0)
         ) {
         } else {
           res.push(item);
@@ -203,7 +228,7 @@ export class DiskAbilityMonitorStruct extends BaseStruct {
   dur: number | undefined; //自补充，数据库没有返回
 
   static draw(
-    context2D: CanvasRenderingContext2D,
+    diskIoAbilityContext: CanvasRenderingContext2D,
     data: DiskAbilityMonitorStruct,
     maxDiskRate: number,
     isHover: boolean
@@ -211,54 +236,54 @@ export class DiskAbilityMonitorStruct extends BaseStruct {
     if (data.frame) {
       let width = data.frame.width || 0;
       let index = 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
+      diskIoAbilityContext.fillStyle = ColorUtils.colorForTid(index);
+      diskIoAbilityContext.strokeStyle = ColorUtils.colorForTid(index);
       if (data.startNS === DiskAbilityMonitorStruct.hoverDiskAbilityStruct?.startNS && isHover) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
+        diskIoAbilityContext.lineWidth = 1;
+        diskIoAbilityContext.globalAlpha = 0.6;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxDiskRate);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.stroke();
+        diskIoAbilityContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        diskIoAbilityContext.beginPath();
+        diskIoAbilityContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
+        diskIoAbilityContext.fill();
+        diskIoAbilityContext.globalAlpha = 1.0;
+        diskIoAbilityContext.stroke();
+        diskIoAbilityContext.beginPath();
+        diskIoAbilityContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        diskIoAbilityContext.lineWidth = 3;
+        diskIoAbilityContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        diskIoAbilityContext.stroke();
       } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
+        diskIoAbilityContext.globalAlpha = 0.6;
+        diskIoAbilityContext.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxDiskRate);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        diskIoAbilityContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    diskIoAbilityContext.globalAlpha = 1.0;
+    diskIoAbilityContext.lineWidth = 1;
   }
 
-  static setDiskIOFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setDiskIOFrame(diskIONode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let diskIOStartPointX: number, diskIOEndPointX: number;
 
-    if ((node.startNS || 0) < startNS) {
-      startPointX = 0;
+    if ((diskIONode.startNS || 0) < startNS) {
+      diskIOStartPointX = 0;
     } else {
-      startPointX = ns2x(node.startNS || 0, startNS, endNS, totalNS, frame);
+      diskIOStartPointX = ns2x(diskIONode.startNS || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((diskIONode.startNS || 0) + (diskIONode.dur || 0) > endNS) {
+      diskIOEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      diskIOEndPointX = ns2x((diskIONode.startNS || 0) + (diskIONode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number = diskIOEndPointX - diskIOStartPointX <= 1 ? 1 : diskIOEndPointX - diskIOStartPointX;
+    if (!diskIONode.frame) {
+      diskIONode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    diskIONode.frame.x = Math.floor(diskIOStartPointX);
+    diskIONode.frame.y = frame.y + padding;
+    diskIONode.frame.width = Math.ceil(frameWidth);
+    diskIONode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.ts
index fd1a27a820f3c7d2832c6de96d3417bc4c58b1a5..7771350e4118bc140ab6401def3880e94d1d5bba 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.ts
@@ -67,77 +67,105 @@ export class EnergyAnomalyRender extends PerfRender {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    if (req.lazyRefresh) {
+  render(energyAnomalyRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    if (energyAnomalyRequest.lazyRefresh) {
       anomaly(
         list,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.params.appName,
-        req.useCache || !req.range.refresh
+        energyAnomalyRequest.startNS,
+        energyAnomalyRequest.endNS,
+        energyAnomalyRequest.totalNS,
+        energyAnomalyRequest.frame,
+        energyAnomalyRequest.params.appName,
+        energyAnomalyRequest.useCache || !energyAnomalyRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
-        anomaly(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.params.appName, false);
+      if (!energyAnomalyRequest.useCache) {
+        anomaly(
+          list,
+          filter,
+          energyAnomalyRequest.startNS,
+          energyAnomalyRequest.endNS,
+          energyAnomalyRequest.totalNS,
+          energyAnomalyRequest.frame,
+          energyAnomalyRequest.params.appName,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.canvas.width, req.canvas.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (energyAnomalyRequest.canvas) {
+      energyAnomalyRequest.context.clearRect(
+        0,
+        0,
+        energyAnomalyRequest.canvas.width,
+        energyAnomalyRequest.canvas.height
+      );
+      let energyAnomlyArr = filter;
+      if (
+        energyAnomlyArr.length > 0 &&
+        !energyAnomalyRequest.range.refresh &&
+        !energyAnomalyRequest.useCache &&
+        energyAnomalyRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS
+          energyAnomalyRequest.context,
+          energyAnomalyRequest.startNS,
+          energyAnomalyRequest.endNS,
+          energyAnomalyRequest.totalNS,
+          energyAnomalyRequest.frame,
+          energyAnomlyArr[0].startNS,
+          energyAnomlyArr[energyAnomlyArr.length - 1].startNS
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
+      drawLines(
+        energyAnomalyRequest.context,
+        energyAnomalyRequest.xs,
+        energyAnomalyRequest.frame.height,
+        energyAnomalyRequest.lineColor
+      );
+      energyAnomalyRequest.context.stroke();
+      energyAnomalyRequest.context.beginPath();
       EnergyAnomalyStruct.hoverEnergyAnomalyStruct = undefined;
-      if (req.isHover) {
+      if (energyAnomalyRequest.isHover) {
         let offset = 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            energyAnomalyRequest.hoverX >= re.frame.x - offset &&
+            energyAnomalyRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             EnergyAnomalyStruct.hoverEnergyAnomalyStruct = re;
             break;
           }
         }
       } else {
-        EnergyAnomalyStruct.hoverEnergyAnomalyStruct = req.params.hoverStruct;
+        EnergyAnomalyStruct.hoverEnergyAnomalyStruct = energyAnomalyRequest.params.hoverStruct;
       }
-      EnergyAnomalyStruct.selectEnergyAnomalyStruct = req.params.selectEnergyAnomalyStruct;
-      req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-      req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+      EnergyAnomalyStruct.selectEnergyAnomalyStruct = energyAnomalyRequest.params.selectEnergyAnomalyStruct;
+      energyAnomalyRequest.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+      energyAnomalyRequest.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
       for (let re of filter) {
-        EnergyAnomalyStruct.draw(req.context, re);
+        EnergyAnomalyStruct.draw(energyAnomalyRequest.context, re);
       }
-      drawLegend(req);
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawLegend(energyAnomalyRequest);
+      drawSelection(energyAnomalyRequest.context, energyAnomalyRequest.params);
+      energyAnomalyRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        energyAnomalyRequest.context,
+        energyAnomalyRequest.flagMoveInfo,
+        energyAnomalyRequest.flagSelectedInfo,
+        energyAnomalyRequest.startNS,
+        energyAnomalyRequest.endNS,
+        energyAnomalyRequest.totalNS,
+        energyAnomalyRequest.frame,
+        energyAnomalyRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: energyAnomalyRequest.id,
+      type: energyAnomalyRequest.type,
+      results: energyAnomalyRequest.canvas ? undefined : filter,
       hover: EnergyAnomalyStruct.hoverEnergyAnomalyStruct,
     });
   }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyPower.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyPower.ts
index 66f63ea1e1e8ac2043c4801f30663c3f8cd9ea15..5d491b9c1fcdb4abc3b0e8e6929b4e7ff1ff2f0b 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyPower.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyPower.ts
@@ -18,22 +18,17 @@ import {
   drawFlagLine,
   drawLines,
   drawLoading,
-  drawSelection,
-  isFrameContainPoint,
   ns2x,
   Render,
   RequestMessage,
+  drawSelection,
+  isFrameContainPoint,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class EnergyPowerRender extends Render {
   renderMainThread(
-    req: {
-      useCache: boolean;
-      context: CanvasRenderingContext2D;
-      type: string;
-      appName: string;
-    },
+    powerReq: { useCache: boolean; context: CanvasRenderingContext2D; type: string; appName: string },
     row: TraceRow<EnergyPowerStruct>
   ) {
     let list = row.dataList;
@@ -45,14 +40,14 @@ export class EnergyPowerRender extends Render {
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
       row.frame,
-      req.useCache || !TraceRow.range!.refresh,
-      req.appName
+      powerReq.useCache || !TraceRow.range!.refresh,
+      powerReq.appName
     );
-    req.context.beginPath();
+    powerReq.context.beginPath();
     let find = false;
     for (let i = 0; i < filter.length; i++) {
       let re = filter[i];
-      EnergyPowerStruct.draw(req, i, re, row);
+      EnergyPowerStruct.draw(powerReq, i, re, row);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         EnergyPowerStruct.hoverEnergyPowerStruct = re;
         find = true;
@@ -62,102 +57,121 @@ export class EnergyPowerRender extends Render {
     TraceRow.range!.refresh = true;
     if (EnergyPowerStruct.maxPower != 0) {
       let s = EnergyPowerStruct.maxPower + 'mAs';
-      let textMetrics = req.context.measureText(s);
-      req.context.globalAlpha = 1.0;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(s, 4, 5 + 9);
+      let textMetrics = powerReq.context.measureText(s);
+      powerReq.context.globalAlpha = 1.0;
+      powerReq.context.fillStyle = '#f0f0f0';
+      powerReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
+      powerReq.context.globalAlpha = 1;
+      powerReq.context.fillStyle = '#333';
+      powerReq.context.textBaseline = 'middle';
+      powerReq.context.fillText(s, 4, 5 + 9);
     }
-    req.context.closePath();
+    powerReq.context.closePath();
     let spApplication = document.getElementsByTagName('sp-application')[0];
     let isDark = spApplication.hasAttribute('dark');
-    drawLegend(req, isDark);
+    drawLegend(powerReq, isDark);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
+  render(energyPowerRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (energyPowerRequest.lazyRefresh) {
       power(
         list,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.useCache || !req.range.refresh,
-        req.params.maxPowerName
+        energyPowerRequest.startNS,
+        energyPowerRequest.endNS,
+        energyPowerRequest.totalNS,
+        energyPowerRequest.frame,
+        energyPowerRequest.useCache || !energyPowerRequest.range.refresh,
+        energyPowerRequest.params.maxPowerName
       );
     } else {
-      if (!req.useCache) {
-        power(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false, req.params.maxPowerName);
+      if (!energyPowerRequest.useCache) {
+        power(
+          list,
+          filter,
+          energyPowerRequest.startNS,
+          energyPowerRequest.endNS,
+          energyPowerRequest.totalNS,
+          energyPowerRequest.frame,
+          false,
+          energyPowerRequest.params.maxPowerName
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.canvas.width, EnergyPowerStruct.rowHeight);
+    if (energyPowerRequest.canvas) {
+      energyPowerRequest.context.clearRect(0, 0, energyPowerRequest.canvas.width, EnergyPowerStruct.rowHeight);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !energyPowerRequest.range.refresh &&
+        !energyPowerRequest.useCache &&
+        energyPowerRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          energyPowerRequest.context,
+          energyPowerRequest.startNS,
+          energyPowerRequest.endNS,
+          energyPowerRequest.totalNS,
+          energyPowerRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.beginPath();
+      drawLines(
+        energyPowerRequest.context,
+        energyPowerRequest.xs,
+        energyPowerRequest.frame.height,
+        energyPowerRequest.lineColor
+      );
+      energyPowerRequest.context.beginPath();
       EnergyPowerStruct.hoverEnergyPowerStruct = undefined;
-      if (req.isHover) {
+      if (energyPowerRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            energyPowerRequest.hoverX >= re.frame.x &&
+            energyPowerRequest.hoverX <= re.frame.x + re.frame.width &&
+            energyPowerRequest.hoverY >= re.frame.y &&
+            energyPowerRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             EnergyPowerStruct.hoverEnergyPowerStruct = re;
             break;
           }
         }
       }
-      EnergyPowerStruct.selectEnergyPowerStruct = req.params.selectEnergyPowerStruct;
+      EnergyPowerStruct.selectEnergyPowerStruct = energyPowerRequest.params.selectEnergyPowerStruct;
       for (let index = 0; index < filter.length; index++) {}
-      req.context.stroke();
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      energyPowerRequest.context.stroke();
+      drawSelection(energyPowerRequest.context, energyPowerRequest.params);
+      energyPowerRequest.context.closePath();
       if (EnergyPowerStruct.maxPower != 0) {
         let s = EnergyPowerStruct.maxPower + 'mAs';
-        let textMetrics = req.context.measureText(s);
-        req.context.globalAlpha = 1.0;
-        req.context.fillStyle = '#f0f0f0';
-        req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-        req.context.globalAlpha = 1;
-        req.context.fillStyle = '#333';
-        req.context.textBaseline = 'middle';
-        req.context.fillText(s, 4, 5 + 9);
+        let textMetrics = energyPowerRequest.context.measureText(s);
+        energyPowerRequest.context.globalAlpha = 1.0;
+        energyPowerRequest.context.fillStyle = '#f0f0f0';
+        energyPowerRequest.context.fillRect(0, 5, textMetrics.width + 8, 18);
+        energyPowerRequest.context.globalAlpha = 1;
+        energyPowerRequest.context.fillStyle = '#333';
+        energyPowerRequest.context.textBaseline = 'middle';
+        energyPowerRequest.context.fillText(s, 4, 5 + 9);
       }
-      drawLegend(req);
+      drawLegend(energyPowerRequest);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        energyPowerRequest.context,
+        energyPowerRequest.flagMoveInfo,
+        energyPowerRequest.flagSelectedInfo,
+        energyPowerRequest.startNS,
+        energyPowerRequest.endNS,
+        energyPowerRequest.totalNS,
+        energyPowerRequest.frame,
+        energyPowerRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: energyPowerRequest.id,
+      type: energyPowerRequest.type,
+      results: energyPowerRequest.canvas ? undefined : filter,
       hover: EnergyPowerStruct.hoverEnergyPowerStruct,
     });
   }
@@ -461,27 +475,27 @@ export class EnergyPowerStruct extends BaseStruct {
     return totalHeight;
   }
 
-  static setPowerFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  static setPowerFrame(powerNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
     let startPointX: number;
     let endPointX: number;
-    if ((node.ts || 0) < startNS) {
+    if ((powerNode.ts || 0) < startNS) {
       startPointX = 0;
     } else {
-      startPointX = ns2x((node.ts || 0) - 500000000, startNS, endNS, totalNS, frame);
+      startPointX = ns2x((powerNode.ts || 0) - 500000000, startNS, endNS, totalNS, frame);
     }
-    if (node.ts + 500000000 > endNS) {
+    if (powerNode.ts + 500000000 > endNS) {
       endPointX = frame.width;
     } else {
-      endPointX = ns2x(node.ts + 500000000, startNS, endNS, totalNS, frame);
+      endPointX = ns2x(powerNode.ts + 500000000, startNS, endNS, totalNS, frame);
     }
     let frameWidth = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    if (!powerNode.frame) {
+      powerNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    powerNode.frame.x = Math.floor(startPointX);
+    powerNode.frame.y = frame.y + padding;
+    powerNode.frame.width = Math.ceil(frameWidth);
+    powerNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 
   static getHistogramColor(textItem: string): string {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyState.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyState.ts
index bf2d457f70cabecbf916277e58cb9bf60e6eb616..0868eb70074ccd3bab485ac3ed77c833a064883d 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyState.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergyState.ts
@@ -15,9 +15,9 @@
 
 import {
   BaseStruct,
-  drawFlagLine,
   drawLines,
   drawLoading,
+  drawFlagLine,
   drawSelection,
   isFrameContainPoint,
   ns2x,
@@ -37,11 +37,11 @@ export class EnergyStateRender extends Render {
     },
     row: TraceRow<EnergyStateStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let stateList = row.dataList;
+    let stateFilter = row.dataListCache;
     state(
-      list,
-      filter,
+      stateList,
+      stateFilter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
@@ -50,8 +50,8 @@ export class EnergyStateRender extends Render {
     );
     req.context.beginPath();
     let find = false;
-    for (let i = 0; i < filter.length; i++) {
-      let re = filter[i];
+    for (let i = 0; i < stateFilter.length; i++) {
+      let re = stateFilter[i];
       EnergyStateStruct.draw(req.context, re, req.maxState, req.maxStateName);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         EnergyStateStruct.hoverEnergyStateStruct = re;
@@ -72,91 +72,122 @@ export class EnergyStateRender extends Render {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      state(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(energyStateRequest: RequestMessage, stateList: Array<any>, filter: Array<any>) {
+    if (energyStateRequest.lazyRefresh) {
+      state(
+        stateList,
+        filter,
+        energyStateRequest.startNS,
+        energyStateRequest.endNS,
+        energyStateRequest.totalNS,
+        energyStateRequest.frame,
+        energyStateRequest.useCache || !energyStateRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        state(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!energyStateRequest.useCache) {
+        state(
+          stateList,
+          filter,
+          energyStateRequest.startNS,
+          energyStateRequest.endNS,
+          energyStateRequest.totalNS,
+          energyStateRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.canvas.width, req.canvas.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (energyStateRequest.canvas) {
+      energyStateRequest.context.clearRect(0, 0, energyStateRequest.canvas.width, energyStateRequest.canvas.height);
+      let energyStateArr = filter;
+      if (
+        energyStateArr.length > 0 &&
+        !energyStateRequest.range.refresh &&
+        !energyStateRequest.useCache &&
+        energyStateRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          energyStateRequest.context,
+          energyStateRequest.startNS,
+          energyStateRequest.endNS,
+          energyStateRequest.totalNS,
+          energyStateRequest.frame,
+          energyStateArr[0].startNS,
+          energyStateArr[energyStateArr.length - 1].startNS + energyStateArr[energyStateArr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.beginPath();
-      EnergyStateStruct.maxState = req.params.maxState;
-      EnergyStateStruct.maxStateName = req.params.maxStateName;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      drawLines(
+        energyStateRequest.context,
+        energyStateRequest.xs,
+        energyStateRequest.frame.height,
+        energyStateRequest.lineColor
+      );
+      energyStateRequest.context.beginPath();
+      EnergyStateStruct.maxState = energyStateRequest.params.maxState;
+      EnergyStateStruct.maxStateName = energyStateRequest.params.maxStateName;
+      drawLines(
+        energyStateRequest.context,
+        energyStateRequest.xs,
+        energyStateRequest.frame.height,
+        energyStateRequest.lineColor
+      );
       EnergyStateStruct.hoverEnergyStateStruct = undefined;
-      if (req.isHover) {
+      if (energyStateRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            energyStateRequest.hoverX >= re.frame.x &&
+            energyStateRequest.hoverX <= re.frame.x + re.frame.width &&
+            energyStateRequest.hoverY >= re.frame.y &&
+            energyStateRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             EnergyStateStruct.hoverEnergyStateStruct = re;
             break;
           }
         }
       }
-      EnergyStateStruct.selectEnergyStateStruct = req.params.selectEnergyStateStruct;
+      EnergyStateStruct.selectEnergyStateStruct = energyStateRequest.params.selectEnergyStateStruct;
       for (let re of filter) {
-        EnergyStateStruct.draw(req.context, re, 0, '');
+        EnergyStateStruct.draw(energyStateRequest.context, re, 0, '');
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(energyStateRequest.context, energyStateRequest.params);
+      energyStateRequest.context.closePath();
       if (
         EnergyStateStruct.maxStateName != 'enable' &&
         EnergyStateStruct.maxStateName != 'disable' &&
         EnergyStateStruct.maxStateName != '-1'
       ) {
         let s = EnergyStateStruct.maxStateName;
-        let textMetrics = req.context.measureText(s);
-        req.context.globalAlpha = 1.0;
-        req.context.fillStyle = '#f0f0f0';
-        req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-        req.context.fillStyle = '#333';
-        req.context.textBaseline = 'middle';
-        req.context.fillText(s, 4, 5 + 9);
+        let textMetrics = energyStateRequest.context.measureText(s);
+        energyStateRequest.context.globalAlpha = 1.0;
+        energyStateRequest.context.fillStyle = '#f0f0f0';
+        energyStateRequest.context.fillRect(0, 5, textMetrics.width + 8, 18);
+        energyStateRequest.context.fillStyle = '#333';
+        energyStateRequest.context.textBaseline = 'middle';
+        energyStateRequest.context.fillText(s, 4, 5 + 9);
       }
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        energyStateRequest.context,
+        energyStateRequest.flagMoveInfo,
+        energyStateRequest.flagSelectedInfo,
+        energyStateRequest.startNS,
+        energyStateRequest.endNS,
+        energyStateRequest.totalNS,
+        energyStateRequest.frame,
+        energyStateRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: energyStateRequest.id,
+      type: energyStateRequest.type,
+      results: energyStateRequest.canvas ? undefined : filter,
       hover: EnergyStateStruct.hoverEnergyStateStruct,
     });
   }
 }
 
 export function state(
-  list: Array<any>,
+  stateList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -166,30 +197,30 @@ export function state(
 ) {
   if (use && res.length > 0) {
     for (let i = 0; i < res.length; i++) {
-      let item = res[i];
-      if ((item.startNs || 0) + (item.dur || 0) > (startNS || 0) && (item.startNs || 0) < (endNS || 0)) {
-        EnergyStateStruct.setStateFrame(item, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+      let stateItem = res[i];
+      if ((stateItem.startNs || 0) + (stateItem.dur || 0) > (startNS || 0) && (stateItem.startNs || 0) < (endNS || 0)) {
+        EnergyStateStruct.setStateFrame(stateItem, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
       } else {
-        item.frame = null;
+        stateItem.frame = null;
       }
     }
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let index = 0; index < list.length; index++) {
-      let item = list[index];
-      if (index === list.length - 1) {
+  if (stateList) {
+    for (let index = 0; index < stateList.length; index++) {
+      let item = stateList[index];
+      if (index === stateList.length - 1) {
         item.dur = (endNS || 0) - (item.startNs || 0);
       } else {
-        item.dur = (list[index + 1].startNs || 0) - (item.startNs || 0);
+        item.dur = (stateList[index + 1].startNs || 0) - (item.startNs || 0);
       }
       if ((item.startNs || 0) + (item.dur || 0) > (startNS || 0) && (item.startNs || 0) < (endNS || 0)) {
-        EnergyStateStruct.setStateFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        EnergyStateStruct.setStateFrame(stateList[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         if (
           index > 0 &&
-          (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-          (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+          (stateList[index - 1].frame?.x || 0) == (stateList[index].frame?.x || 0) &&
+          (stateList[index - 1].frame?.width || 0) == (stateList[index].frame?.width || 0)
         ) {
         } else {
           res.push(item);
@@ -214,65 +245,70 @@ export class EnergyStateStruct extends BaseStruct {
   deviceState: number | undefined;
   deviceType: number | undefined;
 
-  static draw(context2D: CanvasRenderingContext2D, data: EnergyStateStruct, maxState: number, maxStateName: string) {
+  static draw(
+    energyStateContext: CanvasRenderingContext2D,
+    data: EnergyStateStruct,
+    maxState: number,
+    maxStateName: string
+  ) {
     if (data.frame) {
       let width = data.frame.width || 0;
       let drawColor = this.setDrawColor(data.type!);
-      context2D.fillStyle = drawColor;
-      context2D.strokeStyle = drawColor;
-      context2D.globalAlpha = 1.0;
-      context2D.lineWidth = 1;
+      energyStateContext.fillStyle = drawColor;
+      energyStateContext.strokeStyle = drawColor;
+      energyStateContext.globalAlpha = 1.0;
+      energyStateContext.lineWidth = 1;
       let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxState);
       if (maxStateName === 'enable' || maxStateName === 'disable') {
         if (data.value == 0) {
           drawHeight = data.frame.height;
-          context2D.fillRect(data.frame.x, data.frame.y + 4, width, data.frame.height);
+          energyStateContext.fillRect(data.frame.x, data.frame.y + 4, width, data.frame.height);
         }
       } else {
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        energyStateContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
       }
       if (data.startNs === EnergyStateStruct.hoverEnergyStateStruct?.startNs) {
         let pointy = data.frame.y + data.frame.height + 4;
         if (data.value == 0) {
           pointy -= drawHeight;
         }
-        context2D.beginPath();
-        context2D.arc(data.frame.x, pointy, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, pointy);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, pointy);
-        context2D.stroke();
+        energyStateContext.beginPath();
+        energyStateContext.arc(data.frame.x, pointy, 3, 0, 2 * Math.PI, true);
+        energyStateContext.fill();
+        energyStateContext.globalAlpha = 1.0;
+        energyStateContext.stroke();
+        energyStateContext.beginPath();
+        energyStateContext.moveTo(data.frame.x + 3, pointy);
+        energyStateContext.lineWidth = 3;
+        energyStateContext.lineTo(data.frame.x + width, pointy);
+        energyStateContext.stroke();
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    energyStateContext.globalAlpha = 1.0;
+    energyStateContext.lineWidth = 1;
   }
 
-  static setStateFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setStateFrame(stateNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let stateStartPointX: number, stateEndPointX: number;
 
-    if ((node.startNs || 0) < startNS) {
-      startPointX = 0;
+    if ((stateNode.startNs || 0) < startNS) {
+      stateStartPointX = 0;
     } else {
-      startPointX = ns2x(node.startNs || 0, startNS, endNS, totalNS, frame);
+      stateStartPointX = ns2x(stateNode.startNs || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNs || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((stateNode.startNs || 0) + (stateNode.dur || 0) > endNS) {
+      stateEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.startNs || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      stateEndPointX = ns2x((stateNode.startNs || 0) + (stateNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number = stateEndPointX - stateStartPointX <= 1 ? 1 : stateEndPointX - stateStartPointX;
+    if (!stateNode.frame) {
+      stateNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    stateNode.frame.x = Math.floor(stateStartPointX);
+    stateNode.frame.y = frame.y + padding;
+    stateNode.frame.width = Math.ceil(frameWidth);
+    stateNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 
   static setDrawColor(eventType: string): string {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts
index 386a3c9ceeda03b8097dfccc0ba4bd498bedade5..762b4961d4c8087beef259a614f77cb4feff7c61 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts
@@ -35,11 +35,11 @@ export class EnergySystemRender extends Render {
     },
     row: TraceRow<EnergySystemStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let systemList = row.dataList;
+    let systemFilter = row.dataListCache;
     system(
-      list,
-      filter,
+      systemList,
+      systemFilter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
@@ -49,8 +49,8 @@ export class EnergySystemRender extends Render {
     req.context.beginPath();
     let find = false;
     let a: any = {};
-    for (let i = 0; i < filter.length; i++) {
-      let re = filter[i];
+    for (let i = 0; i < systemFilter.length; i++) {
+      let re = systemFilter[i];
 
       EnergySystemStruct.draw(req.context, re);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
@@ -92,35 +92,65 @@ export class EnergySystemRender extends Render {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      system(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(energySysRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (energySysRequest.lazyRefresh) {
+      system(
+        list,
+        filter,
+        energySysRequest.startNS,
+        energySysRequest.endNS,
+        energySysRequest.totalNS,
+        energySysRequest.frame,
+        energySysRequest.useCache || !energySysRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        system(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!energySysRequest.useCache) {
+        system(
+          list,
+          filter,
+          energySysRequest.startNS,
+          energySysRequest.endNS,
+          energySysRequest.totalNS,
+          energySysRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.canvas.width, req.canvas.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (energySysRequest.canvas) {
+      energySysRequest.context.clearRect(0, 0, energySysRequest.canvas.width, energySysRequest.canvas.height);
+      let energySystemArr = filter;
+      if (
+        energySystemArr.length > 0 &&
+        !energySysRequest.range.refresh &&
+        !energySysRequest.useCache &&
+        energySysRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          energySysRequest.context,
+          energySysRequest.startNS,
+          energySysRequest.endNS,
+          energySysRequest.totalNS,
+          energySysRequest.frame,
+          energySystemArr[0].startNS,
+          energySystemArr[energySystemArr.length - 1].startNS + energySystemArr[energySystemArr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.beginPath();
+      drawLines(
+        energySysRequest.context,
+        energySysRequest.xs,
+        energySysRequest.frame.height,
+        energySysRequest.lineColor
+      );
+      energySysRequest.context.beginPath();
       EnergySystemStruct.hoverEnergySystemStruct = undefined;
-      if (req.isHover) {
+      if (energySysRequest.isHover) {
         let a: any = {};
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x && req.hoverX <= re.frame.x + re.frame.width) {
+          if (
+            re.frame &&
+            energySysRequest.hoverX >= re.frame.x &&
+            energySysRequest.hoverX <= re.frame.x + re.frame.width
+          ) {
             EnergySystemStruct.hoverEnergySystemStruct = re;
             if (re.type == 0) {
               if (re.count != undefined) {
@@ -153,29 +183,29 @@ export class EnergySystemRender extends Render {
           EnergySystemStruct.hoverEnergySystemStruct!.location = a.location == undefined ? '0' : a.location;
         }
       }
-      EnergySystemStruct.selectEnergySystemStruct = req.params.selectEnergySystemStruct;
+      EnergySystemStruct.selectEnergySystemStruct = energySysRequest.params.selectEnergySystemStruct;
       for (let re of filter) {
-        EnergySystemStruct.draw(req.context, re);
+        EnergySystemStruct.draw(energySysRequest.context, re);
       }
-      drawLegend(req);
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawLegend(energySysRequest);
+      drawSelection(energySysRequest.context, energySysRequest.params);
+      energySysRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        energySysRequest.context,
+        energySysRequest.flagMoveInfo,
+        energySysRequest.flagSelectedInfo,
+        energySysRequest.startNS,
+        energySysRequest.endNS,
+        energySysRequest.totalNS,
+        energySysRequest.frame,
+        energySysRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: energySysRequest.id,
+      type: energySysRequest.type,
+      results: energySysRequest.canvas ? undefined : filter,
       hover: EnergySystemStruct.hoverEnergySystemStruct,
     });
   }
@@ -208,7 +238,7 @@ export function drawLegend(req: RequestMessage | any, isDark?: boolean) {
 }
 
 export function system(
-  list: Array<any>,
+  systemList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -218,19 +248,22 @@ export function system(
 ) {
   if (use && res.length > 0) {
     for (let i = 0; i < res.length; i++) {
-      let item = res[i];
-      if ((item.startNs || 0) + (item.dur || 0) > (startNS || 0) && (item.startNs || 0) < (endNS || 0)) {
-        EnergySystemStruct.setSystemFrame(item, 10, startNS || 0, endNS || 0, totalNS || 0, frame);
+      let systemItem = res[i];
+      if (
+        (systemItem.startNs || 0) + (systemItem.dur || 0) > (startNS || 0) &&
+        (systemItem.startNs || 0) < (endNS || 0)
+      ) {
+        EnergySystemStruct.setSystemFrame(systemItem, 10, startNS || 0, endNS || 0, totalNS || 0, frame);
       } else {
-        item.frame = null;
+        systemItem.frame = null;
       }
     }
     return;
   }
   res.length = 0;
-  if (list) {
+  if (systemList) {
     for (let i = 0; i < 3; i++) {
-      let arr = list[i];
+      let arr = systemList[i];
       if (arr) {
         for (let index = 0; index < arr.length; index++) {
           let item = arr[index];
@@ -266,46 +299,46 @@ export class EnergySystemStruct extends BaseStruct {
   power: string | undefined;
   location: string | undefined;
 
-  static draw(context2D: CanvasRenderingContext2D, data: EnergySystemStruct) {
+  static draw(energySystemContext: CanvasRenderingContext2D, data: EnergySystemStruct) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      context2D.globalAlpha = 1.0;
-      context2D.lineWidth = 1;
-      context2D.fillStyle = this.getColor(data.type!);
-      context2D.strokeStyle = this.getColor(data.type!);
-      context2D.fillRect(data.frame.x, data.frame.y + 4, width, data.frame.height);
+      energySystemContext.globalAlpha = 1.0;
+      energySystemContext.lineWidth = 1;
+      energySystemContext.fillStyle = this.getColor(data.type!);
+      energySystemContext.strokeStyle = this.getColor(data.type!);
+      energySystemContext.fillRect(data.frame.x, data.frame.y + 4, width, data.frame.height);
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    energySystemContext.globalAlpha = 1.0;
+    energySystemContext.lineWidth = 1;
   }
 
-  static setSystemFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number;
-    let endPointX: number;
-    if ((node.startNs || 0) < startNS) {
-      startPointX = 0;
+  static setSystemFrame(systemNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let systemStartPointX: number;
+    let systemEndPointX: number;
+    if ((systemNode.startNs || 0) < startNS) {
+      systemStartPointX = 0;
     } else {
-      startPointX = ns2x(node.startNs || 0, startNS, endNS, totalNS, frame);
+      systemStartPointX = ns2x(systemNode.startNs || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNs || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((systemNode.startNs || 0) + (systemNode.dur || 0) > endNS) {
+      systemEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.startNs || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      systemEndPointX = ns2x((systemNode.startNs || 0) + (systemNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number = systemEndPointX - systemStartPointX <= 1 ? 1 : systemEndPointX - systemStartPointX;
+    if (!systemNode.frame) {
+      systemNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    if (node.type === 0) {
-      node.frame.y = frame.y + padding * 2.5;
-    } else if (node.type === 1) {
-      node.frame.y = frame.y + padding * 4.5;
-    } else if (node.type === 2) {
-      node.frame.y = frame.y + padding * 6.5;
+    systemNode.frame.x = Math.floor(systemStartPointX);
+    if (systemNode.type === 0) {
+      systemNode.frame.y = frame.y + padding * 2.5;
+    } else if (systemNode.type === 1) {
+      systemNode.frame.y = frame.y + padding * 4.5;
+    } else if (systemNode.type === 2) {
+      systemNode.frame.y = frame.y + padding * 6.5;
     }
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(padding);
+    systemNode.frame.width = Math.ceil(frameWidth);
+    systemNode.frame.height = Math.floor(padding);
   }
 
   static getColor(textItem: number): string {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts
index 7dfb664eeb0d46efa94e920b4100b5ee2ff6be96..1dd59832b38aabfe9ba7317b87b16b7ddbeb111d 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts
@@ -16,11 +16,11 @@
 import {
   BaseStruct,
   drawFlagLine,
-  drawLines,
   drawLoading,
   drawSelection,
   isFrameContainPoint,
   ns2x,
+  drawLines,
   Rect,
   Render,
   RequestMessage,
@@ -36,11 +36,11 @@ export class FpsRender extends Render {
     },
     row: TraceRow<FpsStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let fpsList = row.dataList;
+    let fpsFilter = row.dataListCache;
     fps(
-      list,
-      filter,
+      fpsList,
+      fpsFilter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
@@ -48,15 +48,15 @@ export class FpsRender extends Render {
       req.useCache || !TraceRow.range!.refresh
     );
     req.context.beginPath();
-    let find = false;
-    for (let re of filter) {
+    let fpsFind = false;
+    for (let re of fpsFilter) {
       FpsStruct.draw(req.context, re);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         FpsStruct.hoverFpsStruct = re;
-        find = true;
+        fpsFind = true;
       }
     }
-    if (!find && row.isHover) FpsStruct.hoverFpsStruct = undefined;
+    if (!fpsFind && row.isHover) FpsStruct.hoverFpsStruct = undefined;
     req.context.closePath();
     let maxFps = FpsStruct.maxFps + 'FPS';
     let textMetrics = req.context.measureText(maxFps);
@@ -69,77 +69,85 @@ export class FpsRender extends Render {
     req.context.fillText(maxFps, 4, 5 + 9);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      fps(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(fpsRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (fpsRequest.lazyRefresh) {
+      fps(
+        list,
+        filter,
+        fpsRequest.startNS,
+        fpsRequest.endNS,
+        fpsRequest.totalNS,
+        fpsRequest.frame,
+        fpsRequest.useCache || !fpsRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        fps(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!fpsRequest.useCache) {
+        fps(list, filter, fpsRequest.startNS, fpsRequest.endNS, fpsRequest.totalNS, fpsRequest.frame, false);
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (fpsRequest.canvas) {
+      fpsRequest.context.clearRect(0, 0, fpsRequest.frame.width, fpsRequest.frame.height);
+      let fpsArr = filter;
+      if (fpsArr.length > 0 && !fpsRequest.range.refresh && !fpsRequest.useCache && fpsRequest.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          fpsRequest.context,
+          fpsRequest.startNS,
+          fpsRequest.endNS,
+          fpsRequest.totalNS,
+          fpsRequest.frame,
+          fpsArr[0].startNS,
+          fpsArr[fpsArr.length - 1].startNS + fpsArr[fpsArr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      fpsRequest.context.beginPath();
+      drawLines(fpsRequest.context, fpsRequest.xs, fpsRequest.frame.height, fpsRequest.lineColor);
       FpsStruct.hoverFpsStruct = undefined;
-      if (req.isHover) {
+      if (fpsRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            fpsRequest.hoverX >= re.frame.x &&
+            fpsRequest.hoverX <= re.frame.x + re.frame.width &&
+            fpsRequest.hoverY >= re.frame.y &&
+            fpsRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             FpsStruct.hoverFpsStruct = re;
             break;
           }
         }
       } else {
-        FpsStruct.hoverFpsStruct = req.params.hoverFpsStruct;
+        FpsStruct.hoverFpsStruct = fpsRequest.params.hoverFpsStruct;
       }
       for (let re of filter) {
-        FpsStruct.draw(req.context, re);
+        FpsStruct.draw(fpsRequest.context, re);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(fpsRequest.context, fpsRequest.params);
+      fpsRequest.context.closePath();
       let maxFps = FpsStruct.maxFps + 'FPS';
-      let textMetrics = req.context.measureText(maxFps);
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(maxFps, 4, 5 + 9);
+      let fpsTextMetrics = fpsRequest.context.measureText(maxFps);
+      fpsRequest.context.globalAlpha = 0.8;
+      fpsRequest.context.fillStyle = '#f0f0f0';
+      fpsRequest.context.fillRect(0, 5, fpsTextMetrics.width + 8, 18);
+      fpsRequest.context.globalAlpha = 1;
+      fpsRequest.context.fillStyle = '#333';
+      fpsRequest.context.textBaseline = 'middle';
+      fpsRequest.context.fillText(maxFps, 4, 5 + 9);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        fpsRequest.context,
+        fpsRequest.flagMoveInfo,
+        fpsRequest.flagSelectedInfo,
+        fpsRequest.startNS,
+        fpsRequest.endNS,
+        fpsRequest.totalNS,
+        fpsRequest.frame,
+        fpsRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: fpsRequest.id,
+      type: fpsRequest.type,
+      results: fpsRequest.canvas ? undefined : filter,
       hover: FpsStruct.hoverFpsStruct,
     });
   }
@@ -195,48 +203,48 @@ export class FpsStruct extends BaseStruct {
   startNS: number | undefined = 0;
   dur: number | undefined; //自补充，数据库没有返回
 
-  static draw(ctx: CanvasRenderingContext2D, data: FpsStruct) {
+  static draw(fpsContext: CanvasRenderingContext2D, data: FpsStruct) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      ctx.fillStyle = '#535da6';
-      ctx.strokeStyle = '#535da6';
+      fpsContext.fillStyle = '#535da6';
+      fpsContext.strokeStyle = '#535da6';
       if (data === FpsStruct.hoverFpsStruct) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
+        fpsContext.lineWidth = 1;
+        fpsContext.globalAlpha = 0.6;
         let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        fpsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        fpsContext.beginPath();
+        fpsContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        fpsContext.fill();
+        fpsContext.globalAlpha = 1.0;
+        fpsContext.stroke();
+        fpsContext.beginPath();
+        fpsContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
+        fpsContext.lineWidth = 3;
+        fpsContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
+        fpsContext.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
+        fpsContext.globalAlpha = 0.6;
+        fpsContext.lineWidth = 1;
         let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        fpsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    fpsContext.globalAlpha = 1.0;
+    fpsContext.lineWidth = 1;
   }
 
-  static setFrame(node: FpsStruct, padding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) {
+  static setFrame(fpsNode: FpsStruct, padding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) {
     let x1: number, x2: number;
-    if ((node.startNS || 0) < startNS) {
+    if ((fpsNode.startNS || 0) < startNS) {
       x1 = 0;
     } else {
-      x1 = ns2x(node.startNS || 0, startNS, endNS, totalNS, frame);
+      x1 = ns2x(fpsNode.startNS || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
+    if ((fpsNode.startNS || 0) + (fpsNode.dur || 0) > endNS) {
       x2 = frame.width;
     } else {
-      x2 = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      x2 = ns2x((fpsNode.startNS || 0) + (fpsNode.dur || 0), startNS, endNS, totalNS, frame);
     }
     let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
     let rectangle: Rect = new Rect(
@@ -245,7 +253,7 @@ export class FpsStruct extends BaseStruct {
       Math.ceil(getV),
       Math.floor(frame.height - padding * 2)
     );
-    node.frame = rectangle;
+    fpsNode.frame = rectangle;
   }
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts
index d4a21881eccf2b7e14b41aff15c7590997db3c99..859789efcd04ee0ff5d0150396b93b15bc59d2af 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts
@@ -80,37 +80,37 @@ export class FileSystemRender extends PerfRender {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    let groupBy10MS = req.scale > 20_000_000;
-    let isDiskIO: boolean = req.type!.includes('disk-io');
+  render(fileSysRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    let groupBy10MS = fileSysRequest.scale > 20_000_000;
+    let isDiskIO: boolean = fileSysRequest.type!.includes('disk-io');
     if (isDiskIO) {
       groupBy10MS = true;
     }
-    if (req.lazyRefresh) {
+    if (fileSysRequest.lazyRefresh) {
       fileSysChart(
         list,
         dataList2,
-        req.type!,
+        fileSysRequest.type!,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
+        fileSysRequest.startNS,
+        fileSysRequest.endNS,
+        fileSysRequest.totalNS,
+        fileSysRequest.frame,
         groupBy10MS,
         isDiskIO,
-        req.useCache || !req.range.refresh
+        fileSysRequest.useCache || !fileSysRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
+      if (!fileSysRequest.useCache) {
         fileSysChart(
           list,
           dataList2,
-          req.type!,
+          fileSysRequest.type!,
           filter,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          fileSysRequest.startNS,
+          fileSysRequest.endNS,
+          fileSysRequest.totalNS,
+          fileSysRequest.frame,
           groupBy10MS,
           isDiskIO,
           false
@@ -118,52 +118,56 @@ export class FileSystemRender extends PerfRender {
       }
     }
     let hoverStruct: FileSysChartStruct | undefined;
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (fileSysRequest.canvas) {
+      fileSysRequest.context.clearRect(0, 0, fileSysRequest.frame.width, fileSysRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (arr.length > 0 && !fileSysRequest.range.refresh && !fileSysRequest.useCache && fileSysRequest.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          fileSysRequest.context,
+          fileSysRequest.startNS,
+          fileSysRequest.endNS,
+          fileSysRequest.totalNS,
+          fileSysRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
-      if (req.isHover) {
+      drawLines(fileSysRequest.context, fileSysRequest.xs, fileSysRequest.frame.height, fileSysRequest.lineColor);
+      fileSysRequest.context.stroke();
+      fileSysRequest.context.beginPath();
+      if (fileSysRequest.isHover) {
         let offset = groupBy10MS ? 0 : 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            fileSysRequest.hoverX >= re.frame.x - offset &&
+            fileSysRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             hoverStruct = re;
             break;
           }
         }
       }
       for (let re of filter) {
-        FileSysChartStruct.draw(req.context, re, req.chartColor);
+        FileSysChartStruct.draw(fileSysRequest.context, re, fileSysRequest.chartColor);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(fileSysRequest.context, fileSysRequest.params);
+      fileSysRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        fileSysRequest.context,
+        fileSysRequest.flagMoveInfo,
+        fileSysRequest.flagSelectedInfo,
+        fileSysRequest.startNS,
+        fileSysRequest.endNS,
+        fileSysRequest.totalNS,
+        fileSysRequest.frame,
+        fileSysRequest.slicesTime
       );
     }
     let msg = {
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: fileSysRequest.id,
+      type: fileSysRequest.type,
+      results: fileSysRequest.canvas ? undefined : filter,
       hover: hoverStruct,
     };
     self.postMessage(msg);
@@ -261,19 +265,19 @@ export class FileSysChartStruct extends BaseStruct {
     }
   }
 
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startNS || 0) < startNS) {
-      node.frame.x = 0;
+  static setFrame(fileSystemNode: any, pns: number, startNS: number, endNS: number, frame: any) {
+    if ((fileSystemNode.startNS || 0) < startNS) {
+      fileSystemNode.frame.x = 0;
     } else {
-      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
+      fileSystemNode.frame.x = Math.floor(((fileSystemNode.startNS || 0) - startNS) / pns);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
+    if ((fileSystemNode.startNS || 0) + (fileSystemNode.dur || 0) > endNS) {
+      fileSystemNode.frame.width = frame.width - fileSystemNode.frame.x;
     } else {
-      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
+      fileSystemNode.frame.width = Math.ceil(((fileSystemNode.startNS || 0) + (fileSystemNode.dur || 0) - startNS) / pns - fileSystemNode.frame.x);
     }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
+    if (fileSystemNode.frame.width < 1) {
+      fileSystemNode.frame.width = 1;
     }
   }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts
index bf7693dc180a92a8e716d81cf05c0d9e7b9f38d3..3e7744f839c47ab8b668fb16f3ded4aef898a04e 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFreq.ts
@@ -19,16 +19,16 @@ import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class FreqRender extends Render {
   renderMainThread(
-    req: {
+    freqReq: {
       context: CanvasRenderingContext2D;
       useCache: boolean;
       type: string;
     },
     row: TraceRow<CpuFreqStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let freqList = row.dataList;
+    let freqFilter = row.dataListCache;
+    dataFilterHandler(freqList, freqFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -36,28 +36,28 @@ export class FreqRender extends Render {
       totalNS: TraceRow.range?.totalNS ?? 0,
       frame: row.frame,
       paddingTop: 5,
-      useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
+      useCache: freqReq.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
+    freqReq.context.beginPath();
     let find = false;
-    for (let re of filter) {
+    for (let re of freqFilter) {
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         CpuFreqStruct.hoverCpuFreqStruct = re;
         find = true;
       }
-      CpuFreqStruct.draw(req.context, re);
+      CpuFreqStruct.draw(freqReq.context, re);
     }
     if (!find && row.isHover) CpuFreqStruct.hoverCpuFreqStruct = undefined;
-    req.context.closePath();
+    freqReq.context.closePath();
     let s = CpuFreqStruct.maxFreqName;
-    let textMetrics = req.context.measureText(s);
-    req.context.globalAlpha = 0.8;
-    req.context.fillStyle = '#f0f0f0';
-    req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-    req.context.globalAlpha = 1;
-    req.context.fillStyle = '#333';
-    req.context.textBaseline = 'middle';
-    req.context.fillText(s, 4, 5 + 9);
+    let textMetrics = freqReq.context.measureText(s);
+    freqReq.context.globalAlpha = 0.8;
+    freqReq.context.fillStyle = '#f0f0f0';
+    freqReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
+    freqReq.context.globalAlpha = 1;
+    freqReq.context.fillStyle = '#333';
+    freqReq.context.textBaseline = 'middle';
+    freqReq.context.fillText(s, 4, 5 + 9);
   }
 }
 
@@ -71,39 +71,39 @@ export class CpuFreqStruct extends BaseStruct {
   startNS: number | undefined;
   dur: number | undefined; //自补充，数据库没有返回
 
-  static draw(ctx: CanvasRenderingContext2D, data: CpuFreqStruct) {
+  static draw(freqContext: CanvasRenderingContext2D, data: CpuFreqStruct) {
     if (data.frame) {
       let width = data.frame.width || 0;
       let index = data.cpu || 0;
       index += 2;
-      ctx.fillStyle = ColorUtils.colorForTid(index);
-      ctx.strokeStyle = ColorUtils.colorForTid(index);
+      freqContext.fillStyle = ColorUtils.colorForTid(index);
+      freqContext.strokeStyle = ColorUtils.colorForTid(index);
       if (data === CpuFreqStruct.hoverCpuFreqStruct || data === CpuFreqStruct.selectCpuFreqStruct) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
+        freqContext.lineWidth = 1;
+        freqContext.globalAlpha = 0.6;
         let drawHeight: number = Math.floor(
           ((data.value || 0) * (data.frame.height || 0) * 1.0) / CpuFreqStruct.maxFreq
         );
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        freqContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        freqContext.beginPath();
+        freqContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        freqContext.fill();
+        freqContext.globalAlpha = 1.0;
+        freqContext.stroke();
+        freqContext.beginPath();
+        freqContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
+        freqContext.lineWidth = 3;
+        freqContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
+        freqContext.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
+        freqContext.globalAlpha = 0.6;
+        freqContext.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / CpuFreqStruct.maxFreq);
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        freqContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    freqContext.globalAlpha = 1.0;
+    freqContext.lineWidth = 1;
   }
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts
index 72f1a9f95b1ca03ce1f47f72f1ec2aed886d3615..a3c0bd126c6399c09dd5a8bdb02cc5cc6dd873d8 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts
@@ -15,8 +15,16 @@
 
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
-import { BaseStruct, isFrameContainPoint, ns2x, Rect, Render, RequestMessage } from './ProcedureWorkerCommon.js';
-
+import {
+  BaseStruct,
+  isFrameContainPoint,
+  ns2x,
+  Rect,
+  Render,
+  RequestMessage,
+  drawString,
+} from './ProcedureWorkerCommon.js';
+import { FuncStruct as BaseFuncStruct } from '../../bean/FuncStruct.js';
 export class FuncRender extends Render {
   renderMainThread(
     req: {
@@ -26,11 +34,11 @@ export class FuncRender extends Render {
     },
     row: TraceRow<FuncStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let funcList = row.dataList;
+    let funcFilter = row.dataListCache;
     func(
-      list,
-      filter,
+      funcList,
+      funcFilter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
@@ -38,8 +46,8 @@ export class FuncRender extends Render {
       req.useCache || !TraceRow.range!.refresh
     );
     req.context.beginPath();
-    let find = false;
-    for (let re of filter) {
+    let funcFind = false;
+    for (let re of funcFilter) {
       FuncStruct.draw(req.context, re);
       if (row.isHover) {
         if (re.dur == 0 || re.dur == null || re.dur == undefined) {
@@ -51,17 +59,17 @@ export class FuncRender extends Render {
             row.hoverY <= re.frame.y + re.frame.height
           ) {
             FuncStruct.hoverFuncStruct = re;
-            find = true;
+            funcFind = true;
           }
         } else {
           if (re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
             FuncStruct.hoverFuncStruct = re;
-            find = true;
+            funcFind = true;
           }
         }
       }
     }
-    if (!find && row.isHover) FuncStruct.hoverFuncStruct = undefined;
+    if (!funcFind && row.isHover) FuncStruct.hoverFuncStruct = undefined;
     req.context.closePath();
   }
 
@@ -69,27 +77,27 @@ export class FuncRender extends Render {
 }
 
 export function func(
-  list: Array<any>,
-  res: Array<any>,
+  funcList: Array<any>,
+  funcFilter: Array<any>,
   startNS: number,
   endNS: number,
   totalNS: number,
   frame: any,
   use: boolean
 ) {
-  if (use && res.length > 0) {
-    for (let i = 0, len = res.length; i < len; i++) {
-      if ((res[i].startTs || 0) + (res[i].dur || 0) >= startNS && (res[i].startTs || 0) <= endNS) {
-        FuncStruct.setFuncFrame(res[i], 0, startNS, endNS, totalNS, frame);
+  if (use && funcFilter.length > 0) {
+    for (let i = 0, len = funcFilter.length; i < len; i++) {
+      if ((funcFilter[i].startTs || 0) + (funcFilter[i].dur || 0) >= startNS && (funcFilter[i].startTs || 0) <= endNS) {
+        FuncStruct.setFuncFrame(funcFilter[i], 0, startNS, endNS, totalNS, frame);
       } else {
-        res[i].frame = null;
+        funcFilter[i].frame = null;
       }
     }
     return;
   }
-  res.length = 0;
-  if (list) {
-    let groups = list
+  funcFilter.length = 0;
+  if (funcList) {
+    let groups = funcList
       .filter((it) => (it.startTs ?? 0) + (it.dur ?? 0) >= startNS && (it.startTs ?? 0) <= endNS)
       .map((it) => {
         FuncStruct.setFuncFrame(it, 0, startNS, endNS, totalNS, frame);
@@ -101,49 +109,40 @@ export function func(
       }, {});
     Reflect.ownKeys(groups).map((kv) => {
       let arr = groups[kv].sort((a: any, b: any) => b.dur - a.dur);
-      res.push(arr[0]);
+      funcFilter.push(arr[0]);
     });
   }
 }
 
-export class FuncStruct extends BaseStruct {
+export class FuncStruct extends BaseFuncStruct {
   static hoverFuncStruct: FuncStruct | undefined;
   static selectFuncStruct: FuncStruct | undefined;
-  argsetid: number | undefined; // 53161
-  depth: number | undefined; // 0
-  dur: number | undefined; // 570000
   flag: string | undefined; // 570000
-  funName: string | undefined; //"binder transaction"
-  id: number | undefined; // 92749
-  is_main_thread: number | undefined; // 0
-  parent_id: number | undefined; // null
-  startTs: number | undefined; // 9729867000
-  threadName: string | undefined; // "Thread-15"
-  tid: number | undefined; // 2785
-  identify: number | undefined;
-  track_id: number | undefined; // 414
   textMetricsWidth: number | undefined;
 
-  static setFuncFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  static setFuncFrame(funcNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
     let x1: number, x2: number;
-    if ((node.startTs || 0) > startNS && (node.startTs || 0) < endNS) {
-      x1 = ns2x(node.startTs || 0, startNS, endNS, totalNS, frame);
+    if ((funcNode.startTs || 0) > startNS && (funcNode.startTs || 0) < endNS) {
+      x1 = ns2x(funcNode.startTs || 0, startNS, endNS, totalNS, frame);
     } else {
       x1 = 0;
     }
-    if ((node.startTs || 0) + (node.dur || 0) > startNS && (node.startTs || 0) + (node.dur || 0) < endNS) {
-      x2 = ns2x((node.startTs || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+    if (
+      (funcNode.startTs || 0) + (funcNode.dur || 0) > startNS &&
+      (funcNode.startTs || 0) + (funcNode.dur || 0) < endNS
+    ) {
+      x2 = ns2x((funcNode.startTs || 0) + (funcNode.dur || 0), startNS, endNS, totalNS, frame);
     } else {
       x2 = frame.width;
     }
-    if (!node.frame) {
-      node.frame = {};
+    if (!funcNode.frame) {
+      funcNode.frame = {};
     }
     let getV: number = x2 - x1 < 1 ? 1 : x2 - x1;
-    node.frame.x = Math.floor(x1);
-    node.frame.y = node.depth * 20;
-    node.frame.width = Math.ceil(getV);
-    node.frame.height = 20;
+    funcNode.frame.x = Math.floor(x1);
+    funcNode.frame.y = funcNode.depth * 20;
+    funcNode.frame.width = Math.ceil(getV);
+    funcNode.frame.height = 20;
   }
 
   static draw(ctx: CanvasRenderingContext2D, data: FuncStruct) {
@@ -164,9 +163,9 @@ export class FuncStruct extends BaseStruct {
           ctx.lineWidth = 1;
           ctx.strokeRect(data.frame.x, data.frame.y, data.frame.width, miniHeight - padding * 2);
           ctx.fillStyle = ColorUtils.funcTextColor(textColor);
-          FuncStruct.drawString(ctx, `${data.funName || ''}`, 5, data.frame, data);
+          drawString(ctx, `${data.funName || ''}`, 5, data.frame, data);
         }
-        if (FuncStruct.isSelected(data)) {
+        if (data === FuncStruct.selectFuncStruct) {
           ctx.strokeStyle = '#000';
           ctx.lineWidth = 2;
           ctx.strokeRect(data.frame.x, data.frame.y + 1, data.frame.width, miniHeight - padding * 2 - 2);
@@ -175,42 +174,6 @@ export class FuncStruct extends BaseStruct {
     }
   }
 
-  static drawString(
-    ctx: CanvasRenderingContext2D,
-    str: string,
-    textPadding: number,
-    frame: Rect,
-    func: FuncStruct
-  ): boolean {
-    if (func.textMetricsWidth === undefined) {
-      func.textMetricsWidth = ctx.measureText(str).width;
-    }
-    let charWidth = Math.round(func.textMetricsWidth / str.length);
-    let fillTextWidth = frame.width - textPadding * 2;
-    if (func.textMetricsWidth < fillTextWidth) {
-      let x2 = Math.floor(frame.width / 2 - func.textMetricsWidth / 2 + frame.x + textPadding);
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2 + 2), fillTextWidth);
-      return true;
-    } 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 + 2), fillTextWidth);
-        } else {
-          ctx.fillText(
-            str.substring(0, chatNum - 1) + '...',
-            x1,
-            Math.floor(frame.y + frame.height / 2 + 2),
-            fillTextWidth
-          );
-        }
-        return true;
-      }
-    }
-    return false;
-  }
-
   static isSelected(data: FuncStruct): boolean {
     return (
       FuncStruct.selectFuncStruct != undefined &&
@@ -218,27 +181,6 @@ export class FuncStruct extends BaseStruct {
       FuncStruct.selectFuncStruct.depth == data.depth
     );
   }
-
-  static isBinder(data: FuncStruct): boolean {
-    if (
-      data.funName != null &&
-      (data.funName.toLowerCase().startsWith('binder transaction') ||
-        data.funName.toLowerCase().startsWith('binder async') ||
-        data.funName.toLowerCase().startsWith('binder reply'))
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  static isBinderAsync(data: FuncStruct): boolean {
-    if (data.funName != null && data.funName.toLowerCase().includes('async')) {
-      return true;
-    } else {
-      return false;
-    }
-  }
 }
 
 const padding = 1;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts
index 7ee15780b55c30b8e9bb860759afdd8cee4064d9..ea6546aeb48db095191f41b255fe03cb3ae5bbc3 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHeap.ts
@@ -21,13 +21,14 @@ import {
   drawLoading,
   drawSelection,
   drawWakeUp,
-  isFrameContainPoint,
-  ns2x,
   Rect,
   Render,
   RequestMessage,
+  isFrameContainPoint,
+  ns2x,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
+import { HeapStruct as BaseHeapStruct } from '../../bean/HeapStruct.js';
 export class NativeMemoryRender extends Render {
   renderMainThread(req: any, row: TraceRow<any>) {}
 }
@@ -40,11 +41,11 @@ export class HeapRender {
     },
     row: TraceRow<HeapStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let heapList = row.dataList;
+    let heapFilter = row.dataListCache;
     heap(
-      list,
-      filter,
+      heapList,
+      heapFilter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
       TraceRow.range?.totalNS ?? 0,
@@ -53,87 +54,95 @@ export class HeapRender {
     );
     req.context.beginPath();
     let find = false;
-    for (let re of filter) {
+    for (let re of heapFilter) {
       if (row.isHover && re.frame && !find && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         HeapStruct.hoverHeapStruct = re;
         find = true;
       }
     }
-    for (let re of filter) {
-      HeapStruct.draw(req.context, re, row.drawType);
+    for (let re of heapFilter) {
+      HeapStruct.drawHeap(req.context, re, row.drawType);
     }
     if (!find && row.isHover) HeapStruct.hoverHeapStruct = undefined;
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      heap(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(heapRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (heapRequest.lazyRefresh) {
+      heap(
+        list,
+        filter,
+        heapRequest.startNS,
+        heapRequest.endNS,
+        heapRequest.totalNS,
+        heapRequest.frame,
+        heapRequest.useCache || !heapRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        heap(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!heapRequest.useCache) {
+        heap(list, filter, heapRequest.startNS, heapRequest.endNS, heapRequest.totalNS, heapRequest.frame, false);
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.canvas.width, req.canvas.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (heapRequest.canvas) {
+      heapRequest.context.clearRect(0, 0, heapRequest.canvas.width, heapRequest.canvas.height);
+      let heapArr = filter;
+      if (heapArr.length > 0 && !heapRequest.range.refresh && !heapRequest.useCache && heapRequest.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startTime,
-          arr[arr.length - 1].startTime + arr[arr.length - 1].dur
+          heapRequest.context,
+          heapRequest.startNS,
+          heapRequest.endNS,
+          heapRequest.totalNS,
+          heapRequest.frame,
+          heapArr[0].startTime,
+          heapArr[heapArr.length - 1].startTime + heapArr[heapArr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      heapRequest.context.beginPath();
+      drawLines(heapRequest.context, heapRequest.xs, heapRequest.frame.height, heapRequest.lineColor);
       HeapStruct.hoverHeapStruct = undefined;
-      if (req.isHover) {
+      if (heapRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            heapRequest.hoverX >= re.frame.x &&
+            heapRequest.hoverX <= re.frame.x + re.frame.width &&
+            heapRequest.hoverY >= re.frame.y &&
+            heapRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             HeapStruct.hoverHeapStruct = re;
             break;
           }
         }
       } else {
-        HeapStruct.hoverHeapStruct = req.params.hoverHeapStruct;
+        HeapStruct.hoverHeapStruct = heapRequest.params.hoverHeapStruct;
       }
       for (let re of filter) {
-        HeapStruct.draw(req.context, re, req.params.drawType);
+        HeapStruct.drawHeap(heapRequest.context, re, heapRequest.params.drawType);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(heapRequest.context, heapRequest.params);
+      heapRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        heapRequest.context,
+        heapRequest.flagMoveInfo,
+        heapRequest.flagSelectedInfo,
+        heapRequest.startNS,
+        heapRequest.endNS,
+        heapRequest.totalNS,
+        heapRequest.frame,
+        heapRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: heapRequest.id,
+      type: heapRequest.type,
+      results: heapRequest.canvas ? undefined : filter,
       hover: HeapStruct.hoverHeapStruct,
     });
   }
 }
 export function heap(
-  list: Array<any>,
+  heapList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -153,12 +162,12 @@ export function heap(
     return;
   }
   res.length = 0;
-  for (let i = 0, len = list.length; i < len; i++) {
-    let it = list[i];
+  for (let i = 0, len = heapList.length; i < len; i++) {
+    let it = heapList[i];
     if ((it.startTime || 0) + (it.dur || 0) > (startNS || 0) && (it.startTime || 0) < (endNS || 0)) {
       HeapStruct.setFrame(it, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
       if (i > 0) {
-        let last = list[i - 1];
+        let last = heapList[i - 1];
         if (last.frame?.x != it.frame.x || last.frame.width != it.frame.width) {
           res.push(it);
         }
@@ -169,16 +178,9 @@ export function heap(
   }
 }
 
-export class HeapStruct extends BaseStruct {
+export class HeapStruct extends BaseHeapStruct {
   static hoverHeapStruct: HeapStruct | undefined;
   static selectHeapStruct: HeapStruct | undefined;
-  startTime: number | undefined;
-  endTime: number | undefined;
-  dur: number | undefined;
-  heapsize: number | undefined;
-  density: number | undefined;
-  maxHeapSize: number = 0;
-  minHeapSize: number = 0;
   maxDensity: number = 0;
   minDensity: number = 0;
 
@@ -211,11 +213,11 @@ export class HeapStruct extends BaseStruct {
     node.frame = rectangle;
   }
 
-  static draw(ctx: CanvasRenderingContext2D, data: HeapStruct, drawType: number) {
+  static drawHeap(heapContext: CanvasRenderingContext2D, data: HeapStruct, drawType: number) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      ctx.fillStyle = '#2db3aa';
-      ctx.strokeStyle = '#2db3aa';
+      heapContext.fillStyle = '#2db3aa';
+      heapContext.strokeStyle = '#2db3aa';
       let drawHeight: number = 0;
       if (drawType == 0) {
         if (data.minHeapSize < 0) {
@@ -236,26 +238,26 @@ export class HeapStruct extends BaseStruct {
         }
       }
       if (data == HeapStruct.hoverHeapStruct || data == HeapStruct.selectHeapStruct) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        heapContext.lineWidth = 1;
+        heapContext.globalAlpha = 0.6;
+        heapContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        heapContext.beginPath();
+        heapContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
+        heapContext.fill();
+        heapContext.globalAlpha = 1.0;
+        heapContext.stroke();
+        heapContext.beginPath();
+        heapContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
+        heapContext.lineWidth = 3;
+        heapContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
+        heapContext.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        heapContext.globalAlpha = 0.6;
+        heapContext.lineWidth = 1;
+        heapContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    heapContext.globalAlpha = 1.0;
+    heapContext.lineWidth = 1;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts
index 76257b79bb2cf7dc095401da32a32d9bf4985641..2c2edfefa22171263476a5f0b9df726bce7d371e 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.ts
@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BaseStruct, Rect, Render, isFrameContainPoint } from './ProcedureWorkerCommon.js';
+import { BaseStruct, Rect, Render, isFrameContainPoint, drawString} from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 export class HeapSnapshotRender extends Render {
   renderMainThread(
@@ -106,7 +106,9 @@ export class HeapSnapshotStruct extends BaseStruct {
         ctx.globalAlpha = 1.0;
         ctx.lineWidth = 1;
         ctx.fillStyle = '#fff';
-        HeapSnapshotStruct.drawString(ctx, data.file_name || '', 2, data.frame!, data);
+      ctx.textBaseline = 'middle';
+      ctx.font = '12px sans-serif'
+        drawString(ctx, data.file_name || '', 2, data.frame!,data);
       }
       if (
         HeapSnapshotStruct.selectSnapshotStruct &&
@@ -119,43 +121,6 @@ export class HeapSnapshotStruct extends BaseStruct {
     }
   }
 
-  static drawString(
-    ctx: CanvasRenderingContext2D,
-    str: string,
-    textPadding: number,
-    frame: Rect,
-    data: HeapSnapshotStruct
-  ) {
-    if (data.textMetricsWidth === undefined) {
-      data.textMetricsWidth = ctx.measureText(str).width;
-    }
-    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.textBaseline = 'middle';
-      ctx.font = '12px sans-serif';
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2), fillTextWidth);
-    } else {
-      if (fillTextWidth >= charWidth) {
-        let chatNum = fillTextWidth / charWidth;
-        let x1 = frame.x + textPadding;
-        ctx.textBaseline = 'middle';
-        ctx.font = '12px sans-serif';
-        if (chatNum < 2) {
-          ctx.fillText(str.substring(0, 1), x1, Math.floor(frame.y + frame.height / 2), fillTextWidth);
-        } else {
-          ctx.fillText(
-            str.substring(0, chatNum - 1) + '...',
-            x1,
-            Math.floor(frame.y + frame.height / 2),
-            fillTextWidth
-          );
-        }
-      }
-    }
-  }
-
   static equals(d1: HeapSnapshotStruct, d2: HeapSnapshotStruct): boolean {
     return (
       d1 &&
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts
index e4fd4fb927ddb5817d61e1b2a75c06b749068c27..48b6219e0432295cc765ee9ab8cc85a39a9fcbd1 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts
@@ -20,6 +20,8 @@ import {
   drawLines,
   drawLoading,
   drawSelection,
+  HiPerfStruct,
+  hiPerf,
   PerfRender,
   RequestMessage,
 } from './ProcedureWorkerCommon.js';
@@ -32,20 +34,16 @@ export class HiperfCpuRender extends PerfRender {
     let filter = row.dataListCache;
     let groupBy10MS = req.scale > 30_000_000;
     if (list && row.dataList2.length == 0) {
-      row.dataList2 = HiPerfCpuStruct.groupBy10MS(list, req.maxCpu, req.intervalPerf);
+      row.dataList2 = HiPerfCpuStruct.groupBy10MS(list, req.intervalPerf, req.maxCpu);
     }
-    hiPerfCpu(
+    hiPerf(
       list,
       row.dataList2,
-      req.type!,
       filter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
-      TraceRow.range?.totalNS ?? 0,
       row.frame,
       groupBy10MS,
-      req.maxCpu,
-      req.intervalPerf,
       req.useCache || (TraceRow.range?.refresh ?? false)
     );
     req.context.beginPath();
@@ -75,279 +73,117 @@ export class HiperfCpuRender extends PerfRender {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    let groupBy10MS = req.scale > 100_000_000;
+  render(hiPerfCpuRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    let groupBy10MS = hiPerfCpuRequest.scale > 100_000_000;
     if (list && dataList2.length == 0) {
-      dataList2 = HiPerfCpuStruct.groupBy10MS(list, req.params.maxCpu, req.intervalPerf);
+      dataList2 = HiPerfCpuStruct.groupBy10MS(list, hiPerfCpuRequest.intervalPerf, hiPerfCpuRequest.params.maxCpu);
     }
-    if (req.lazyRefresh) {
-      hiPerfCpu(
+    if (hiPerfCpuRequest.lazyRefresh) {
+      hiPerf(
         list,
         dataList2,
-        req.type!,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
+        hiPerfCpuRequest.startNS,
+        hiPerfCpuRequest.endNS,
+        hiPerfCpuRequest.frame,
         groupBy10MS,
-        req.params.maxCpu,
-        req.intervalPerf,
-        req.useCache || !req.range.refresh
+        hiPerfCpuRequest.useCache || !hiPerfCpuRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
-        hiPerfCpu(
+      if (!hiPerfCpuRequest.useCache) {
+        hiPerf(
           list,
           dataList2,
-          req.type!,
           filter,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfCpuRequest.startNS,
+          hiPerfCpuRequest.endNS,
+          hiPerfCpuRequest.frame,
           groupBy10MS,
-          req.params.maxCpu,
-          req.intervalPerf,
           false
         );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (hiPerfCpuRequest.canvas) {
+      hiPerfCpuRequest.context.clearRect(0, 0, hiPerfCpuRequest.frame.width, hiPerfCpuRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !hiPerfCpuRequest.range.refresh &&
+        !hiPerfCpuRequest.useCache &&
+        hiPerfCpuRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfCpuRequest.context,
+          hiPerfCpuRequest.startNS,
+          hiPerfCpuRequest.endNS,
+          hiPerfCpuRequest.totalNS,
+          hiPerfCpuRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
+      drawLines(
+        hiPerfCpuRequest.context,
+        hiPerfCpuRequest.xs,
+        hiPerfCpuRequest.frame.height,
+        hiPerfCpuRequest.lineColor
+      );
+      hiPerfCpuRequest.context.stroke();
+      hiPerfCpuRequest.context.beginPath();
       HiPerfCpuStruct.hoverStruct = undefined;
-      if (req.isHover) {
+      if (hiPerfCpuRequest.isHover) {
         let offset = groupBy10MS ? 0 : 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            hiPerfCpuRequest.hoverX >= re.frame.x - offset &&
+            hiPerfCpuRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             HiPerfCpuStruct.hoverStruct = re;
             break;
           }
         }
       } else {
-        HiPerfCpuStruct.hoverStruct = req.params.hoverStruct;
+        HiPerfCpuStruct.hoverStruct = hiPerfCpuRequest.params.hoverStruct;
       }
-      HiPerfCpuStruct.selectStruct = req.params.selectStruct;
-      req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-      req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+      HiPerfCpuStruct.selectStruct = hiPerfCpuRequest.params.selectStruct;
+      hiPerfCpuRequest.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+      hiPerfCpuRequest.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
       let path = new Path2D();
       for (let re of filter) {
-        HiPerfCpuStruct.draw(req.context, path, re, groupBy10MS);
+        HiPerfCpuStruct.draw(hiPerfCpuRequest.context, path, re, groupBy10MS);
       }
       if (groupBy10MS) {
-        req.context.fill(path);
+        hiPerfCpuRequest.context.fill(path);
       } else {
-        req.context.stroke(path);
+        hiPerfCpuRequest.context.stroke(path);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(hiPerfCpuRequest.context, hiPerfCpuRequest.params);
+      hiPerfCpuRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        hiPerfCpuRequest.context,
+        hiPerfCpuRequest.flagMoveInfo,
+        hiPerfCpuRequest.flagSelectedInfo,
+        hiPerfCpuRequest.startNS,
+        hiPerfCpuRequest.endNS,
+        hiPerfCpuRequest.totalNS,
+        hiPerfCpuRequest.frame,
+        hiPerfCpuRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: hiPerfCpuRequest.id,
+      type: hiPerfCpuRequest.type,
+      results: hiPerfCpuRequest.canvas ? undefined : filter,
       hover: HiPerfCpuStruct.hoverStruct,
     });
   }
 }
 
-export function hiPerfCpu(
-  arr: Array<any>,
-  arr2: any,
-  type: string,
-  res: Array<any>,
-  startNS: number,
-  endNS: number,
-  totalNS: number,
-  frame: any,
-  groupBy10MS: boolean,
-  maxCpu: number | undefined,
-  intervalPerf: number,
-  use: boolean
-) {
-  if (use && res.length > 0) {
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    for (let i = 0; i < res.length; i++) {
-      let it = res[i];
-      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
-        if (!it.frame) {
-          it.frame = {};
-          it.frame.y = y;
-        }
-        it.frame.height = it.height;
-        HiPerfCpuStruct.setFrame(it, pns, startNS, endNS, frame);
-      } else {
-        it.frame = null;
-      }
-    }
-    return;
-  }
-  res.length = 0;
-  if (arr) {
-    let list: Array<any> = groupBy10MS ? arr2 : arr;
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    let filter = list.filter((it) => (it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS);
-    if (groupBy10MS) {
-      filter.map((it) => {
-        if (!it.frame) {
-          it.frame = {};
-          it.frame.y = y;
-        }
-        it.frame.height = it.height;
-        HiPerfCpuStruct.setFrame(it, pns, startNS, endNS, frame);
-        res.push(it);
-      });
-    } else {
-      filter
-        .map((it) => {
-          if (!it.frame) {
-            it.frame = {};
-            it.frame.y = y;
-          }
-          it.frame.height = it.height;
-          HiPerfCpuStruct.setFrame(it, pns, startNS, endNS, frame);
-          return it;
-        })
-        .reduce((pre, current) => {
-          if (!pre[`${current.frame.x}`]) {
-            pre[`${current.frame.x}`] = [];
-            pre[`${current.frame.x}`].push(current);
-            if (res.length == 0) {
-              res.push(current);
-            }
-            if (res[res.length - 1] && Math.abs(current.frame.x - res[res.length - 1].frame.x) > 4) {
-              res.push(current);
-            }
-          }
-          return pre;
-        }, {});
-    }
-  }
-}
-
-export class HiPerfCpuStruct extends BaseStruct {
+export class HiPerfCpuStruct extends HiPerfStruct {
   static hoverStruct: HiPerfCpuStruct | undefined;
   static selectStruct: HiPerfCpuStruct | undefined;
-  static path = new Path2D('M 100,100 h 50 v 50 h 50');
-  id: number | undefined;
-  callchain_id: number | undefined;
-  timestamp: number | undefined;
-  thread_id: number | undefined;
-  event_count: number | undefined;
-  event_type_id: number | undefined;
-  cpu_id: number | undefined;
-  thread_state: string | undefined;
-  startNS: number | undefined;
-  endNS: number | undefined;
-  dur: number | undefined;
-  height: number | undefined;
-  cpu: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: HiPerfCpuStruct, groupBy10MS: boolean) {
-    if (data.frame) {
-      if (groupBy10MS) {
-        let width = data.frame.width;
-        path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
-      } else {
-        path.moveTo(data.frame.x + 7, 20);
-        HiPerfCpuStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3);
-        path.moveTo(data.frame.x, 27);
-        path.lineTo(data.frame.x, 33);
-      }
-    }
-  }
-
-  static drawRoundRectPath(cxt: Path2D, x: number, y: number, width: number, height: number, radius: number) {
-    cxt.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
-    cxt.lineTo(x + radius, y + height);
-    cxt.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
-    cxt.lineTo(x + 0, y + radius);
-    cxt.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
-    cxt.lineTo(x + width - radius, y + 0);
-    cxt.arc(x + width - radius, y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
-    cxt.lineTo(x + width, y + height - radius);
-    cxt.moveTo(x + width / 3, y + height / 5);
-    cxt.lineTo(x + width / 3, y + (height / 5) * 4);
-    cxt.moveTo(x + width / 3, y + height / 5);
-    cxt.bezierCurveTo(
-      x + width / 3 + 7,
-      y + height / 5 - 2,
-      x + width / 3 + 7,
-      y + height / 5 + 6,
-      x + width / 3,
-      y + height / 5 + 4
-    );
-  }
-
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startNS || 0) < startNS) {
-      node.frame.x = 0;
-    } else {
-      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
-    }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
-    } else {
-      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
-    }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
-    }
-  }
-
-  static groupBy10MS(array: Array<any>, maxCpu: number | undefined, intervalPerf: number): Array<any> {
-    let obj = array
-      .map((it) => {
-        it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
-        return it;
-      })
-      .reduce((pre, current) => {
-        (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
-        return pre;
-      }, {});
-    let arr: any[] = [];
-    for (let aKey in obj) {
-      let ns = parseInt(aKey);
-      let height: number = 0;
-      if (maxCpu != undefined) {
-        height = Math.floor((obj[aKey].length / (10 / intervalPerf) / maxCpu) * 40);
-      } else {
-        height = Math.floor((obj[aKey].length / (10 / intervalPerf)) * 40);
-      }
-      arr.push({
-        startNS: ns,
-        dur: 1_000_000_0,
-        height: height,
-      });
-    }
-    return arr;
-  }
+  cpu: number | undefined;
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts
index 8ece0d179e9fc201562ce841db6295b087dfac57..4f3adb1c7999791e9d1bfc582810b46a7520c7ed 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts
@@ -20,41 +20,40 @@ import {
   drawLines,
   drawLoading,
   drawSelection,
+  hiPerf,
+  HiPerfStruct,
   PerfRender,
   RequestMessage,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfEventRender extends PerfRender {
-  renderMainThread(req: any, row: TraceRow<HiPerfEventStruct>) {
+  renderMainThread(hiPerfEventReq: any, row: TraceRow<HiPerfEventStruct>) {
     let list = row.dataList;
     let list2 = row.dataList2;
     let filter = row.dataListCache;
-    let groupBy10MS = req.scale > 30_000_000;
+    let groupBy10MS = hiPerfEventReq.scale > 30_000_000;
     if (list && row.dataList2.length == 0) {
-      row.dataList2 = HiPerfEventStruct.groupBy10MS(list, req.intervalPerf, req.type);
+      row.dataList2 = HiPerfEventStruct.eventGroupBy10MS(list, hiPerfEventReq.intervalPerf, hiPerfEventReq.type);
     }
-    HiPerfEvent(
+    hiPerf(
       list,
       list2,
-      req.type!,
       filter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
-      TraceRow.range?.totalNS ?? 0,
       row.frame,
       groupBy10MS,
-      req.intervalPerf,
-      req.useCache || (TraceRow.range?.refresh ?? false)
+      hiPerfEventReq.useCache || (TraceRow.range?.refresh ?? false)
     );
-    req.context.beginPath();
-    req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-    req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfEventReq.context.beginPath();
+    hiPerfEventReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfEventReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
     let offset = groupBy10MS ? 0 : 3;
     let path = new Path2D();
     let find = false;
     for (let re of filter) {
-      HiPerfEventStruct.draw(req.context, path, re, groupBy10MS);
+      HiPerfEventStruct.draw(hiPerfEventReq.context, path, re, groupBy10MS);
       if (row.isHover) {
         if (re.frame && row.hoverX >= re.frame.x - offset && row.hoverX <= re.frame.x + re.frame.width + offset) {
           HiPerfEventStruct.hoverStruct = re;
@@ -63,271 +62,140 @@ export class HiperfEventRender extends PerfRender {
       }
     }
     if (!find && row.isHover) HiPerfEventStruct.hoverStruct = undefined;
-    groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-    let maxEvent = HiPerfEventStruct.maxEvent!.get(req.type!) || 0;
-    let textMetrics = req.context.measureText(maxEvent);
-    req.context.globalAlpha = 0.8;
-    req.context.fillStyle = '#f0f0f0';
-    req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-    req.context.globalAlpha = 1;
-    req.context.fillStyle = '#333';
-    req.context.textBaseline = 'middle';
-    req.context.fillText(maxEvent, 4, 5 + 9);
-    req.context.stroke();
-    req.context.closePath();
+    groupBy10MS ? hiPerfEventReq.context.fill(path) : hiPerfEventReq.context.stroke(path);
+    let maxEvent = HiPerfEventStruct.maxEvent!.get(hiPerfEventReq.type!) || 0;
+    let textMetrics = hiPerfEventReq.context.measureText(maxEvent);
+    hiPerfEventReq.context.globalAlpha = 0.8;
+    hiPerfEventReq.context.fillStyle = '#f0f0f0';
+    hiPerfEventReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
+    hiPerfEventReq.context.globalAlpha = 1;
+    hiPerfEventReq.context.fillStyle = '#333';
+    hiPerfEventReq.context.textBaseline = 'middle';
+    hiPerfEventReq.context.fillText(maxEvent, 4, 5 + 9);
+    hiPerfEventReq.context.stroke();
+    hiPerfEventReq.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    let groupBy10MS = req.scale > 100_000_000;
-    if (req.lazyRefresh) {
-      HiPerfEvent(
+  render(hiPerfEventRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    let groupBy10MS = hiPerfEventRequest.scale > 100_000_000;
+    if (hiPerfEventRequest.lazyRefresh) {
+      hiPerf(
         list,
         dataList2,
-        req.type!,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
+        hiPerfEventRequest.startNS,
+        hiPerfEventRequest.endNS,
+        hiPerfEventRequest.frame,
         groupBy10MS,
-        req.intervalPerf,
-        req.useCache || !req.range.refresh
+        hiPerfEventRequest.useCache || !hiPerfEventRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
-        HiPerfEvent(
+      if (!hiPerfEventRequest.useCache) {
+        hiPerf(
           list,
           dataList2,
-          req.type!,
           filter,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfEventRequest.startNS,
+          hiPerfEventRequest.endNS,
+          hiPerfEventRequest.frame,
           groupBy10MS,
-          req.intervalPerf,
           false
         );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (hiPerfEventRequest.canvas) {
+      hiPerfEventRequest.context.clearRect(0, 0, hiPerfEventRequest.frame.width, hiPerfEventRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !hiPerfEventRequest.range.refresh &&
+        !hiPerfEventRequest.useCache &&
+        hiPerfEventRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfEventRequest.context,
+          hiPerfEventRequest.startNS,
+          hiPerfEventRequest.endNS,
+          hiPerfEventRequest.totalNS,
+          hiPerfEventRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
+      drawLines(
+        hiPerfEventRequest.context,
+        hiPerfEventRequest.xs,
+        hiPerfEventRequest.frame.height,
+        hiPerfEventRequest.lineColor
+      );
+      hiPerfEventRequest.context.stroke();
+      hiPerfEventRequest.context.beginPath();
       HiPerfEventStruct.hoverStruct = undefined;
-      req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-      req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-      if (req.isHover) {
+      hiPerfEventRequest.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+      hiPerfEventRequest.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+      if (hiPerfEventRequest.isHover) {
         let offset = groupBy10MS ? 0 : 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            hiPerfEventRequest.hoverX >= re.frame.x - offset &&
+            hiPerfEventRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             HiPerfEventStruct.hoverStruct = re;
             break;
           }
         }
       } else {
-        HiPerfEventStruct.hoverStruct = req.params.hoverStruct;
+        HiPerfEventStruct.hoverStruct = hiPerfEventRequest.params.hoverStruct;
       }
-      HiPerfEventStruct.selectStruct = req.params.selectStruct;
+      HiPerfEventStruct.selectStruct = hiPerfEventRequest.params.selectStruct;
       let path = new Path2D();
       for (let re of filter) {
-        HiPerfEventStruct.draw(req.context, path, re, groupBy10MS);
+        HiPerfEventStruct.draw(hiPerfEventRequest.context, path, re, groupBy10MS);
       }
-      groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-      drawSelection(req.context, req.params);
-      let maxEvent = HiPerfEventStruct.maxEvent!.get(req.type!) || 0;
-      let textMetrics = req.context.measureText(maxEvent);
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(maxEvent, 4, 5 + 9);
-      req.context.stroke();
-      req.context.closePath();
+      groupBy10MS ? hiPerfEventRequest.context.fill(path) : hiPerfEventRequest.context.stroke(path);
+      drawSelection(hiPerfEventRequest.context, hiPerfEventRequest.params);
+      let maxEvent = HiPerfEventStruct.maxEvent!.get(hiPerfEventRequest.type!) || 0;
+      let textMetrics = hiPerfEventRequest.context.measureText(maxEvent);
+      hiPerfEventRequest.context.globalAlpha = 0.8;
+      hiPerfEventRequest.context.fillStyle = '#f0f0f0';
+      hiPerfEventRequest.context.fillRect(0, 5, textMetrics.width + 8, 18);
+      hiPerfEventRequest.context.globalAlpha = 1;
+      hiPerfEventRequest.context.fillStyle = '#333';
+      hiPerfEventRequest.context.textBaseline = 'middle';
+      hiPerfEventRequest.context.fillText(maxEvent, 4, 5 + 9);
+      hiPerfEventRequest.context.stroke();
+      hiPerfEventRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        hiPerfEventRequest.context,
+        hiPerfEventRequest.flagMoveInfo,
+        hiPerfEventRequest.flagSelectedInfo,
+        hiPerfEventRequest.startNS,
+        hiPerfEventRequest.endNS,
+        hiPerfEventRequest.totalNS,
+        hiPerfEventRequest.frame,
+        hiPerfEventRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: hiPerfEventRequest.id,
+      type: hiPerfEventRequest.type,
+      results: hiPerfEventRequest.canvas ? undefined : filter,
       hover: HiPerfEventStruct.hoverStruct,
     });
   }
 }
-export function HiPerfEvent(
-  arr: Array<any>,
-  arr2: any,
-  type: string,
-  res: Array<any>,
-  startNS: number,
-  endNS: number,
-  totalNS: number,
-  frame: any,
-  groupBy10MS: boolean,
-  intervalPerf: number,
-  use: boolean
-) {
-  if (use && res.length > 0) {
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    for (let i = 0; i < res.length; i++) {
-      let it = res[i];
-      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
-        if (!it.frame) {
-          it.frame = {};
-          it.frame.y = y;
-        }
-        it.frame.height = it.height;
-        HiPerfEventStruct.setFrame(it, pns, startNS, endNS, frame);
-      } else {
-        it.frame = null;
-      }
-    }
-    return;
-  }
-  res.length = 0;
-  if (arr) {
-    let list: Array<any> = groupBy10MS ? arr2 : arr;
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    let filter = list.filter((it) => (it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS);
-    if (groupBy10MS) {
-      filter.map((it) => {
-        if (!it.frame) {
-          it.frame = {};
-          it.frame.y = y;
-        }
-        it.frame.height = it.height;
-        HiPerfEventStruct.setFrame(it, pns, startNS, endNS, frame);
-        res.push(it);
-      });
-    } else {
-      filter
-        .map((it) => {
-          if (!it.frame) {
-            it.frame = {};
-            it.frame.y = y;
-          }
-          it.frame.height = it.height;
-          HiPerfEventStruct.setFrame(it, pns, startNS, endNS, frame);
-          return it;
-        })
-        .reduce((pre, current) => {
-          if (!pre[`${current.frame.x}`]) {
-            pre[`${current.frame.x}`] = [];
-            pre[`${current.frame.x}`].push(current);
-            if (res.length == 0) {
-              res.push(current);
-            }
-            if (res[res.length - 1] && Math.abs(current.frame.x - res[res.length - 1].frame.x) > 4) {
-              res.push(current);
-            }
-          }
-          return pre;
-        }, {});
-    }
-  }
-}
 
-export class HiPerfEventStruct extends BaseStruct {
+export class HiPerfEventStruct extends HiPerfStruct {
   static hoverStruct: HiPerfEventStruct | undefined;
   static selectStruct: HiPerfEventStruct | undefined;
-  static path = new Path2D('M 100,100 h 50 v 50 h 50');
-  id: number | undefined;
-  callchain_id: number | undefined;
-  timestamp: number | undefined;
-  thread_id: number | undefined;
-  event_count: number | undefined;
-  event_type_id: number | undefined;
-  cpu_id: number | undefined;
-  thread_state: string | undefined;
-  startNS: number | undefined;
-  endNS: number | undefined;
-  dur: number | undefined;
-  height: number | undefined;
-  cpu: number | undefined;
+
   static maxEvent: Map<string, number> | undefined = new Map();
   sum: number | undefined;
   max: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: HiPerfEventStruct, groupBy10MS: boolean) {
-    if (data.frame) {
-      if (groupBy10MS) {
-        let width = data.frame.width;
-        path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
-      } else {
-        path.moveTo(data.frame.x + 7, 20);
-        HiPerfEventStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3);
-        path.moveTo(data.frame.x, 27);
-        path.lineTo(data.frame.x, 33);
-      }
-    }
-  }
-
-  static drawRoundRectPath(cxt: Path2D, x: number, y: number, width: number, height: number, radius: number) {
-    cxt.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
-    cxt.lineTo(x + radius, y + height);
-    cxt.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
-    cxt.lineTo(x + 0, y + radius);
-    cxt.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
-    cxt.lineTo(x + width - radius, y + 0);
-    cxt.arc(x + width - radius, y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
-    cxt.lineTo(x + width, y + height - radius);
-    cxt.moveTo(x + width / 3, y + height / 5);
-    cxt.lineTo(x + width / 3, y + (height / 5) * 4);
-    cxt.moveTo(x + width / 3, y + height / 5);
-    cxt.bezierCurveTo(
-      x + width / 3 + 7,
-      y + height / 5 - 2,
-      x + width / 3 + 7,
-      y + height / 5 + 6,
-      x + width / 3,
-      y + height / 5 + 4
-    );
-  }
-
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startNS || 0) < startNS) {
-      node.frame.x = 0;
-    } else {
-      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
-    }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
-    } else {
-      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
-    }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
-    }
-  }
-
-  static groupBy10MS(array: Array<any>, intervalPerf: number, type: string): Array<any> {
+  static eventGroupBy10MS(array: Array<any>, intervalPerf: number, type: string): Array<any> {
     let obj = array
       .map((it) => {
         it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
@@ -337,7 +205,7 @@ export class HiPerfEventStruct extends BaseStruct {
         (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
         return pre;
       }, {});
-    let arr: any[] = [];
+    let eventArr: any[] = [];
     let max = 0;
     for (let aKey in obj) {
       let sum = obj[aKey].reduce((pre: any, cur: any) => {
@@ -345,7 +213,7 @@ export class HiPerfEventStruct extends BaseStruct {
       }, 0);
       if (sum > max) max = sum;
       let ns = parseInt(aKey);
-      arr.push({
+      eventArr.push({
         startNS: ns,
         dur: 1_000_000_0,
         height: 0,
@@ -355,11 +223,11 @@ export class HiPerfEventStruct extends BaseStruct {
     if (typeof HiPerfEventStruct.maxEvent!.get(type) === 'undefined') {
       HiPerfEventStruct.maxEvent!.set(type, max);
     }
-    arr.map((it) => {
+    eventArr.map((it) => {
       it.height = Math.floor((40 * it.sum) / max);
       it.max = max;
       return it;
     });
-    return arr;
+    return eventArr;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts
index 2fc2a35316b59e1b3924eecf521e5982c865f741..f78c0fb727271b3773b224161e93fe2e2243934e 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts
@@ -20,40 +20,39 @@ import {
   drawLines,
   drawLoading,
   drawSelection,
+  hiPerf,
+  HiPerfStruct,
   PerfRender,
   RequestMessage,
 } from './ProcedureWorkerCommon.js';
-import { HiPerfCpuStruct } from './ProcedureWorkerHiPerfCPU.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfProcessRender extends PerfRender {
-  renderMainThread(req: any, row: TraceRow<HiPerfProcessStruct>) {
+  renderMainThread(hiPerfProcessReq: any, row: TraceRow<HiPerfProcessStruct>) {
     let list = row.dataList;
     let filter = row.dataListCache;
-    let groupBy10MS = req.scale > 30_000_000;
+    let groupBy10MS = hiPerfProcessReq.scale > 30_000_000;
     if (list && row.dataList2.length == 0) {
-      row.dataList2 = HiPerfProcessStruct.groupBy10MS(list, req.intervalPerf);
+      row.dataList2 = HiPerfProcessStruct.groupBy10MS(list, hiPerfProcessReq.intervalPerf);
     }
-    hiPerfProcess(
+    hiPerf(
       list,
       row.dataList2,
       filter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
-      TraceRow.range?.totalNS ?? 0,
       row.frame,
       groupBy10MS,
-      req.intervalPerf,
-      req.useCache || (TraceRow.range?.refresh ?? false)
+      hiPerfProcessReq.useCache || (TraceRow.range?.refresh ?? false)
     );
-    req.context.beginPath();
-    req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-    req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfProcessReq.context.beginPath();
+    hiPerfProcessReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfProcessReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
     let path = new Path2D();
     let offset = groupBy10MS ? 0 : 3;
     let find = false;
     for (let re of filter) {
-      HiPerfProcessStruct.draw(req.context, path, re, groupBy10MS);
+      HiPerfProcessStruct.draw(hiPerfProcessReq.context, path, re, groupBy10MS);
       if (row.isHover) {
         if (re.frame && row.hoverX >= re.frame.x - offset && row.hoverX <= re.frame.x + re.frame.width + offset) {
           HiPerfProcessStruct.hoverStruct = re;
@@ -62,235 +61,112 @@ export class HiperfProcessRender extends PerfRender {
       }
     }
     if (!find && row.isHover) HiPerfProcessStruct.hoverStruct = undefined;
-    groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-    req.context.closePath();
+    groupBy10MS ? hiPerfProcessReq.context.fill(path) : hiPerfProcessReq.context.stroke(path);
+    hiPerfProcessReq.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    let groupBy10MS = req.scale > 100_000_000;
-    if (req.lazyRefresh) {
-      hiPerfProcess(
+  render(hiPerfProcessRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    let groupBy10MS = hiPerfProcessRequest.scale > 100_000_000;
+    if (hiPerfProcessRequest.lazyRefresh) {
+      hiPerf(
         list,
         dataList2,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
+        hiPerfProcessRequest.startNS,
+        hiPerfProcessRequest.endNS,
+        hiPerfProcessRequest.frame,
         groupBy10MS,
-        req.intervalPerf,
-        req.useCache || !req.range.refresh
+        hiPerfProcessRequest.useCache || !hiPerfProcessRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
-        hiPerfProcess(
+      if (!hiPerfProcessRequest.useCache) {
+        hiPerf(
           list,
           dataList2,
           filter,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfProcessRequest.startNS,
+          hiPerfProcessRequest.endNS,
+          hiPerfProcessRequest.frame,
           groupBy10MS,
-          req.intervalPerf,
           false
         );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (hiPerfProcessRequest.canvas) {
+      hiPerfProcessRequest.context.clearRect(0, 0, hiPerfProcessRequest.frame.width, hiPerfProcessRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !hiPerfProcessRequest.range.refresh &&
+        !hiPerfProcessRequest.useCache &&
+        hiPerfProcessRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfProcessRequest.context,
+          hiPerfProcessRequest.startNS,
+          hiPerfProcessRequest.endNS,
+          hiPerfProcessRequest.totalNS,
+          hiPerfProcessRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
+      drawLines(
+        hiPerfProcessRequest.context,
+        hiPerfProcessRequest.xs,
+        hiPerfProcessRequest.frame.height,
+        hiPerfProcessRequest.lineColor
+      );
+      hiPerfProcessRequest.context.stroke();
+      hiPerfProcessRequest.context.beginPath();
       HiPerfProcessStruct.hoverStruct = undefined;
-      req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-      req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-      if (req.isHover) {
+      hiPerfProcessRequest.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+      hiPerfProcessRequest.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+      if (hiPerfProcessRequest.isHover) {
         let offset = groupBy10MS ? 0 : 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            hiPerfProcessRequest.hoverX >= re.frame.x - offset &&
+            hiPerfProcessRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             HiPerfProcessStruct.hoverStruct = re;
             break;
           }
         }
       } else {
-        HiPerfProcessStruct.hoverStruct = req.params.hoverStruct;
+        HiPerfProcessStruct.hoverStruct = hiPerfProcessRequest.params.hoverStruct;
       }
-      HiPerfProcessStruct.selectStruct = req.params.selectStruct;
+      HiPerfProcessStruct.selectStruct = hiPerfProcessRequest.params.selectStruct;
       let path = new Path2D();
       for (let re of filter) {
-        HiPerfProcessStruct.draw(req.context, path, re, groupBy10MS);
+        HiPerfProcessStruct.draw(hiPerfProcessRequest.context, path, re, groupBy10MS);
       }
-      groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-      req.context.closePath();
-      drawSelection(req.context, req.params);
+      groupBy10MS ? hiPerfProcessRequest.context.fill(path) : hiPerfProcessRequest.context.stroke(path);
+      hiPerfProcessRequest.context.closePath();
+      drawSelection(hiPerfProcessRequest.context, hiPerfProcessRequest.params);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        hiPerfProcessRequest.context,
+        hiPerfProcessRequest.flagMoveInfo,
+        hiPerfProcessRequest.flagSelectedInfo,
+        hiPerfProcessRequest.startNS,
+        hiPerfProcessRequest.endNS,
+        hiPerfProcessRequest.totalNS,
+        hiPerfProcessRequest.frame,
+        hiPerfProcessRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: hiPerfProcessRequest.id,
+      type: hiPerfProcessRequest.type,
+      results: hiPerfProcessRequest.canvas ? undefined : filter,
       hover: HiPerfProcessStruct.hoverStruct,
     });
   }
 }
 
-export function hiPerfProcess(
-  arr: Array<any>,
-  arr2: Array<any>,
-  res: Array<any>,
-  startNS: number,
-  endNS: number,
-  totalNS: number,
-  frame: any,
-  groupBy10MS: boolean,
-  intervalPerf: number,
-  use: boolean
-) {
-  if (use && res.length > 0) {
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    for (let i = 0; i < res.length; i++) {
-      let it = res[i];
-      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
-        if (!it.frame) {
-          it.frame = {};
-          it.frame.y = y;
-        }
-        it.frame.height = it.height;
-        HiPerfProcessStruct.setFrame(it, pns, startNS, endNS, frame);
-      } else {
-        it.frame = null;
-      }
-    }
-    return;
-  }
-  res.length = 0;
-  if (arr) {
-    let list = groupBy10MS ? arr2 : arr;
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    for (let i = 0, len = list.length; i < len; i++) {
-      let it = list[i];
-      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
-        if (!list[i].frame) {
-          list[i].frame = {};
-          list[i].frame.y = y;
-        }
-        list[i].frame.height = it.height;
-        HiPerfProcessStruct.setFrame(list[i], pns, startNS, endNS, frame);
-        if (groupBy10MS) {
-          if (
-            i > 0 &&
-            (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
-            (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0) &&
-            (list[i - 1].frame?.height || 0) == (list[i].frame?.height || 0)
-          ) {
-          } else {
-            res.push(list[i]);
-          }
-        } else {
-          if (i > 0 && Math.abs((list[i - 1].frame?.x || 0) - (list[i].frame?.x || 0)) < 4) {
-          } else {
-            res.push(list[i]);
-          }
-        }
-      }
-    }
-  }
-}
-
-export class HiPerfProcessStruct extends BaseStruct {
+export class HiPerfProcessStruct extends HiPerfStruct {
   static hoverStruct: HiPerfProcessStruct | undefined;
   static selectStruct: HiPerfProcessStruct | undefined;
-  id: number | undefined;
-  callchain_id: number | undefined;
-  timestamp: number | undefined;
-  thread_id: number | undefined;
-  event_count: number | undefined;
-  event_type_id: number | undefined;
-  cpu_id: number | undefined;
-  thread_state: string | undefined;
-  startNS: number | undefined;
-  endNS: number | undefined;
-  dur: number | undefined;
-  height: number | undefined;
-  cpu: number | undefined;
-  group: number | undefined;
-
-  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: HiPerfProcessStruct, groupBy10MS: boolean) {
-    if (data.frame) {
-      if (groupBy10MS) {
-        let width = data.frame.width;
-        path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
-      } else {
-        path.moveTo(data.frame.x + 7, 20);
-        HiPerfCpuStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3);
-        path.moveTo(data.frame.x, 27);
-        path.lineTo(data.frame.x, 33);
-      }
-    }
-  }
-
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startNS || 0) < startNS) {
-      node.frame.x = 0;
-    } else {
-      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
-    }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
-    } else {
-      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
-    }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
-    }
-  }
-
-  static groupBy10MS(array: Array<any>, intervalPerf: number): Array<any> {
-    let obj = array
-      .map((it) => {
-        it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
-        return it;
-      })
-      .reduce((pre, current) => {
-        (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
-        return pre;
-      }, {});
-    let arr: any[] = [];
-    for (let aKey in obj) {
-      let ns = parseInt(aKey);
-      let height: number = 0;
-      height = Math.floor((obj[aKey].length / (10 / intervalPerf)) * 40);
-      arr.push({
-        startNS: ns,
-        height: height,
-        dur: 1_000_000_0,
-      });
-    }
-    return arr;
-  }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts
index c5a069d42a91b51b0462ce8a6b5e1c122e956a1f..778f029a4f3b635ae108462bfee4c426209e4c67 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts
@@ -20,6 +20,7 @@ import {
   drawLines,
   drawLoading,
   drawSelection,
+  HiPerfStruct,
   PerfRender,
   RequestMessage,
 } from './ProcedureWorkerCommon.js';
@@ -27,34 +28,34 @@ import {
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfReportRender extends PerfRender {
-  renderMainThread(req: any, row: TraceRow<HiPerfReportStruct>) {
+  renderMainThread(hiPerfReportReq: any, row: TraceRow<HiPerfReportStruct>) {
     let list = row.dataList;
     let filter = row.dataListCache;
-    let groupBy10MS = req.scale > 30_000_000;
+    let groupBy10MS = hiPerfReportReq.scale > 30_000_000;
     if (list && row.dataList2.length == 0) {
-      row.dataList2 = HiPerfReportStruct.groupBy10MS(list, req.intervalPerf);
+      row.dataList2 = HiPerfReportStruct.reportGroupBy10MS(list, hiPerfReportReq.intervalPerf);
     }
     HiPerfReport(
       list,
       row.dataList2,
-      req.type!,
+      hiPerfReportReq.type!,
       filter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
       TraceRow.range?.totalNS ?? 0,
       row.frame,
       groupBy10MS,
-      req.intervalPerf,
-      req.useCache || (TraceRow.range?.refresh ?? false)
+      hiPerfReportReq.intervalPerf,
+      hiPerfReportReq.useCache || (TraceRow.range?.refresh ?? false)
     );
-    req.context.beginPath();
-    req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-    req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfReportReq.context.beginPath();
+    hiPerfReportReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfReportReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
     let path = new Path2D();
     let offset = groupBy10MS ? 0 : 3;
     let find = false;
     for (let re of filter) {
-      HiPerfReportStruct.draw(req.context, path, re, groupBy10MS);
+      HiPerfReportStruct.draw(hiPerfReportReq.context, path, re, groupBy10MS);
       if (row.isHover) {
         if (re.frame && row.hoverX >= re.frame.x - offset && row.hoverX <= re.frame.x + re.frame.width + offset) {
           HiPerfReportStruct.hoverStruct = re;
@@ -63,98 +64,112 @@ export class HiperfReportRender extends PerfRender {
       }
     }
     if (!find && row.isHover) HiPerfReportStruct.hoverStruct = undefined;
-    groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-    req.context.closePath();
+    groupBy10MS ? hiPerfReportReq.context.fill(path) : hiPerfReportReq.context.stroke(path);
+    hiPerfReportReq.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    let groupBy10MS = req.scale > 100_000_000;
-    if (req.lazyRefresh) {
+  render(hiPerfReportRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    let groupBy10MS = hiPerfReportRequest.scale > 100_000_000;
+    if (hiPerfReportRequest.lazyRefresh) {
       HiPerfReport(
         list,
         dataList2,
-        req.type!,
+        hiPerfReportRequest.type!,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
+        hiPerfReportRequest.startNS,
+        hiPerfReportRequest.endNS,
+        hiPerfReportRequest.totalNS,
+        hiPerfReportRequest.frame,
         groupBy10MS,
-        req.intervalPerf,
-        req.useCache || !req.range.refresh
+        hiPerfReportRequest.intervalPerf,
+        hiPerfReportRequest.useCache || !hiPerfReportRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
+      if (!hiPerfReportRequest.useCache) {
         HiPerfReport(
           list,
           dataList2,
-          req.type!,
+          hiPerfReportRequest.type!,
           filter,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfReportRequest.startNS,
+          hiPerfReportRequest.endNS,
+          hiPerfReportRequest.totalNS,
+          hiPerfReportRequest.frame,
           groupBy10MS,
-          req.intervalPerf,
+          hiPerfReportRequest.intervalPerf,
           false
         );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (hiPerfReportRequest.canvas) {
+      hiPerfReportRequest.context.clearRect(0, 0, hiPerfReportRequest.frame.width, hiPerfReportRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !hiPerfReportRequest.range.refresh &&
+        !hiPerfReportRequest.useCache &&
+        hiPerfReportRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfReportRequest.context,
+          hiPerfReportRequest.startNS,
+          hiPerfReportRequest.endNS,
+          hiPerfReportRequest.totalNS,
+          hiPerfReportRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
+      drawLines(
+        hiPerfReportRequest.context,
+        hiPerfReportRequest.xs,
+        hiPerfReportRequest.frame.height,
+        hiPerfReportRequest.lineColor
+      );
+      hiPerfReportRequest.context.stroke();
+      hiPerfReportRequest.context.beginPath();
       HiPerfReportStruct.hoverStruct = undefined;
-      req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-      req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-      if (req.isHover) {
+      hiPerfReportRequest.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+      hiPerfReportRequest.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+      if (hiPerfReportRequest.isHover) {
         let offset = groupBy10MS ? 0 : 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            hiPerfReportRequest.hoverX >= re.frame.x - offset &&
+            hiPerfReportRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             HiPerfReportStruct.hoverStruct = re;
             break;
           }
         }
       } else {
-        HiPerfReportStruct.hoverStruct = req.params.hoverStruct;
+        HiPerfReportStruct.hoverStruct = hiPerfReportRequest.params.hoverStruct;
       }
-      HiPerfReportStruct.selectStruct = req.params.selectStruct;
+      HiPerfReportStruct.selectStruct = hiPerfReportRequest.params.selectStruct;
       let path = new Path2D();
       for (let re of filter) {
-        HiPerfReportStruct.draw(req.context, path, re, groupBy10MS);
+        HiPerfReportStruct.draw(hiPerfReportRequest.context, path, re, groupBy10MS);
       }
-      groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-      req.context.closePath();
-      drawSelection(req.context, req.params);
+      groupBy10MS ? hiPerfReportRequest.context.fill(path) : hiPerfReportRequest.context.stroke(path);
+      hiPerfReportRequest.context.closePath();
+      drawSelection(hiPerfReportRequest.context, hiPerfReportRequest.params);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        hiPerfReportRequest.context,
+        hiPerfReportRequest.flagMoveInfo,
+        hiPerfReportRequest.flagSelectedInfo,
+        hiPerfReportRequest.startNS,
+        hiPerfReportRequest.endNS,
+        hiPerfReportRequest.totalNS,
+        hiPerfReportRequest.frame,
+        hiPerfReportRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: hiPerfReportRequest.id,
+      type: hiPerfReportRequest.type,
+      results: hiPerfReportRequest.canvas ? undefined : filter,
       hover: HiPerfReportStruct.hoverStruct,
     });
   }
@@ -227,77 +242,11 @@ export function HiPerfReport(
   }
 }
 
-export class HiPerfReportStruct extends BaseStruct {
+export class HiPerfReportStruct extends HiPerfStruct {
   static hoverStruct: HiPerfReportStruct | undefined;
   static selectStruct: HiPerfReportStruct | undefined;
-  static path = new Path2D('M 100,100 h 50 v 50 h 50');
-  id: number | undefined;
-  callchain_id: number | undefined;
-  timestamp: number | undefined;
-  thread_id: number | undefined;
-  event_count: number | undefined;
-  event_type_id: number | undefined;
-  cpu_id: number | undefined;
-  thread_state: string | undefined;
-  startNS: number | undefined;
-  endNS: number | undefined;
-  dur: number | undefined;
-  height: number | undefined;
-  cpu: number | undefined;
-
-  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: HiPerfReportStruct, groupBy10MS: boolean) {
-    if (data.frame) {
-      if (groupBy10MS) {
-        let width = data.frame.width;
-        path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
-      } else {
-        path.moveTo(data.frame.x + 7, 20);
-        HiPerfReportStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3);
-        path.moveTo(data.frame.x, 27);
-        path.lineTo(data.frame.x, 33);
-      }
-    }
-  }
-
-  static drawRoundRectPath(cxt: Path2D, x: number, y: number, width: number, height: number, radius: number) {
-    cxt.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
-    cxt.lineTo(x + radius, y + height);
-    cxt.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
-    cxt.lineTo(x + 0, y + radius);
-    cxt.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
-    cxt.lineTo(x + width - radius, y + 0);
-    cxt.arc(x + width - radius, y + radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
-    cxt.lineTo(x + width, y + height - radius);
-    cxt.moveTo(x + width / 3, y + height / 5);
-    cxt.lineTo(x + width / 3, y + (height / 5) * 4);
-    cxt.moveTo(x + width / 3, y + height / 5);
-    cxt.bezierCurveTo(
-      x + width / 3 + 7,
-      y + height / 5 - 2,
-      x + width / 3 + 7,
-      y + height / 5 + 6,
-      x + width / 3,
-      y + height / 5 + 4
-    );
-  }
-
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startNS || 0) < startNS) {
-      node.frame.x = 0;
-    } else {
-      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
-    }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
-    } else {
-      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
-    }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
-    }
-  }
 
-  static groupBy10MS(array: Array<any>, intervalPerf: number): Array<any> {
+  static reportGroupBy10MS(array: Array<any>, intervalPerf: number): Array<any> {
     let obj = array
       .map((it) => {
         it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
@@ -307,7 +256,7 @@ export class HiPerfReportStruct extends BaseStruct {
         (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
         return pre;
       }, {});
-    let arr: any[] = [];
+    let reportArr: any[] = [];
     let max = 0;
     for (let aKey in obj) {
       let sum = obj[aKey].reduce((pre: any, cur: any) => {
@@ -315,17 +264,17 @@ export class HiPerfReportStruct extends BaseStruct {
       }, 0);
       if (sum > max) max = sum;
       let ns = parseInt(aKey);
-      arr.push({
+      reportArr.push({
         startNS: ns,
         dur: 1_000_000_0,
         height: 0,
         sum: sum,
       });
     }
-    arr.map((it) => {
+    reportArr.map((it) => {
       it.height = Math.floor((40 * it.sum) / max);
       return it;
     });
-    return arr;
+    return reportArr;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts
index 0cb8b2c136e509c4cc3f86238b32b0e74ee102ba..6166b05cdb33623c18ec2dc4badda64d7874deb0 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts
@@ -20,40 +20,39 @@ import {
   drawLines,
   drawLoading,
   drawSelection,
+  hiPerf,
+  HiPerfStruct,
   PerfRender,
   RequestMessage,
 } from './ProcedureWorkerCommon.js';
-import { HiPerfCpuStruct } from './ProcedureWorkerHiPerfCPU.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfThreadRender extends PerfRender {
-  renderMainThread(req: any, row: TraceRow<HiPerfThreadStruct>) {
+  renderMainThread(hiPerfThreadReq: any, row: TraceRow<HiPerfThreadStruct>) {
     let list = row.dataList;
     let filter = row.dataListCache;
-    let groupBy10MS = req.scale > 30_000_000;
+    let groupBy10MS = hiPerfThreadReq.scale > 30_000_000;
     if (list && row.dataList2.length == 0) {
-      row.dataList2 = HiPerfThreadStruct.groupBy10MS(list, req.intervalPerf);
+      row.dataList2 = HiPerfThreadStruct.groupBy10MS(list, hiPerfThreadReq.intervalPerf);
     }
-    hiPerfThread(
+    hiPerf(
       list,
       row.dataList2,
       filter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
-      TraceRow.range?.totalNS ?? 0,
       row.frame,
       groupBy10MS,
-      req.intervalPerf,
-      req.useCache || (TraceRow.range?.refresh ?? false)
+      hiPerfThreadReq.useCache || (TraceRow.range?.refresh ?? false)
     );
-    req.context.beginPath();
-    req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-    req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfThreadReq.context.beginPath();
+    hiPerfThreadReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+    hiPerfThreadReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
     let path = new Path2D();
     let offset = groupBy10MS ? 0 : 3;
     let find = false;
     for (let re of filter) {
-      HiPerfThreadStruct.draw(req.context, path, re, groupBy10MS);
+      HiPerfThreadStruct.draw(hiPerfThreadReq.context, path, re, groupBy10MS);
       if (row.isHover) {
         if (re.frame && row.hoverX >= re.frame.x - offset && row.hoverX <= re.frame.x + re.frame.width + offset) {
           HiPerfThreadStruct.hoverStruct = re;
@@ -62,235 +61,113 @@ export class HiperfThreadRender extends PerfRender {
       }
     }
     if (!find && row.isHover) HiPerfThreadStruct.hoverStruct = undefined;
-    groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-    req.context.closePath();
+    groupBy10MS ? hiPerfThreadReq.context.fill(path) : hiPerfThreadReq.context.stroke(path);
+    hiPerfThreadReq.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    let groupBy10MS = req.scale > 100_000_000;
-    if (req.lazyRefresh) {
-      hiPerfThread(
+  render(hiPerfThreadRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+    let groupBy10MS = hiPerfThreadRequest.scale > 100_000_000;
+    if (hiPerfThreadRequest.lazyRefresh) {
+      hiPerf(
         list,
         dataList2,
         filter,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
+        hiPerfThreadRequest.startNS,
+        hiPerfThreadRequest.endNS,
+        hiPerfThreadRequest.frame,
         groupBy10MS,
-        req.intervalPerf,
-        req.useCache || !req.range.refresh
+        hiPerfThreadRequest.useCache || !hiPerfThreadRequest.range.refresh
       );
     } else {
-      if (!req.useCache) {
-        hiPerfThread(
+      if (!hiPerfThreadRequest.useCache) {
+        hiPerf(
           list,
           dataList2,
           filter,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfThreadRequest.startNS,
+          hiPerfThreadRequest.endNS,
+          hiPerfThreadRequest.frame,
           groupBy10MS,
-          req.intervalPerf,
           false
         );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (hiPerfThreadRequest.canvas) {
+      hiPerfThreadRequest.context.clearRect(0, 0, hiPerfThreadRequest.frame.width, hiPerfThreadRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !hiPerfThreadRequest.range.refresh &&
+        !hiPerfThreadRequest.useCache &&
+        hiPerfThreadRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          hiPerfThreadRequest.context,
+          hiPerfThreadRequest.startNS,
+          hiPerfThreadRequest.endNS,
+          hiPerfThreadRequest.totalNS,
+          hiPerfThreadRequest.frame,
           arr[0].startNS,
           arr[arr.length - 1].startNS + arr[arr.length - 1].dur
         );
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
-      req.context.stroke();
-      req.context.beginPath();
+      drawLines(
+        hiPerfThreadRequest.context,
+        hiPerfThreadRequest.xs,
+        hiPerfThreadRequest.frame.height,
+        hiPerfThreadRequest.lineColor
+      );
+      hiPerfThreadRequest.context.stroke();
+      hiPerfThreadRequest.context.beginPath();
       HiPerfThreadStruct.hoverStruct = undefined;
-      req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
-      req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-      if (req.isHover) {
+      hiPerfThreadRequest.context.fillStyle = ColorUtils.FUNC_COLOR[0];
+      hiPerfThreadRequest.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
+      if (hiPerfThreadRequest.isHover) {
         let offset = groupBy10MS ? 0 : 3;
         for (let re of filter) {
-          if (re.frame && req.hoverX >= re.frame.x - offset && req.hoverX <= re.frame.x + re.frame.width + offset) {
+          if (
+            re.frame &&
+            hiPerfThreadRequest.hoverX >= re.frame.x - offset &&
+            hiPerfThreadRequest.hoverX <= re.frame.x + re.frame.width + offset
+          ) {
             HiPerfThreadStruct.hoverStruct = re;
             break;
           }
         }
       } else {
-        HiPerfThreadStruct.hoverStruct = req.params.hoverStruct;
+        HiPerfThreadStruct.hoverStruct = hiPerfThreadRequest.params.hoverStruct;
       }
-      HiPerfThreadStruct.selectStruct = req.params.selectStruct;
+      HiPerfThreadStruct.selectStruct = hiPerfThreadRequest.params.selectStruct;
       let path = new Path2D();
       for (let re of filter) {
-        HiPerfThreadStruct.draw(req.context, path, re, groupBy10MS);
+        HiPerfThreadStruct.draw(hiPerfThreadRequest.context, path, re, groupBy10MS);
       }
-      groupBy10MS ? req.context.fill(path) : req.context.stroke(path);
-      req.context.stroke();
-      req.context.closePath();
-      drawSelection(req.context, req.params);
+      groupBy10MS ? hiPerfThreadRequest.context.fill(path) : hiPerfThreadRequest.context.stroke(path);
+      hiPerfThreadRequest.context.stroke();
+      hiPerfThreadRequest.context.closePath();
+      drawSelection(hiPerfThreadRequest.context, hiPerfThreadRequest.params);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        hiPerfThreadRequest.context,
+        hiPerfThreadRequest.flagMoveInfo,
+        hiPerfThreadRequest.flagSelectedInfo,
+        hiPerfThreadRequest.startNS,
+        hiPerfThreadRequest.endNS,
+        hiPerfThreadRequest.totalNS,
+        hiPerfThreadRequest.frame,
+        hiPerfThreadRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: hiPerfThreadRequest.id,
+      type: hiPerfThreadRequest.type,
+      results: hiPerfThreadRequest.canvas ? undefined : filter,
       hover: HiPerfThreadStruct.hoverStruct,
     });
   }
 }
 
-export function hiPerfThread(
-  arr: Array<any>,
-  arr2: Array<any>,
-  res: Array<any>,
-  startNS: number,
-  endNS: number,
-  totalNS: number,
-  frame: any,
-  groupBy10MS: boolean,
-  intervalPerf: number,
-  use: boolean
-) {
-  if (use && res.length > 0) {
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    for (let i = 0; i < res.length; i++) {
-      let it = res[i];
-      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
-        if (!it.frame) {
-          it.frame = {};
-          it.frame.y = y;
-        }
-        it.frame.height = it.height;
-        HiPerfThreadStruct.setFrame(it, pns, startNS, endNS, frame);
-      } else {
-        it.frame = null;
-      }
-    }
-    return;
-  }
-  res.length = 0;
-  if (arr) {
-    let list = groupBy10MS ? arr2 : arr;
-    let pns = (endNS - startNS) / frame.width;
-    let y = frame.y;
-    for (let i = 0, len = list.length; i < len; i++) {
-      let it = list[i];
-      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
-        if (!list[i].frame) {
-          list[i].frame = {};
-          list[i].frame.y = y;
-        }
-        list[i].frame.height = it.height;
-        HiPerfThreadStruct.setFrame(list[i], pns, startNS, endNS, frame);
-        if (groupBy10MS) {
-          if (
-            i > 0 &&
-            (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
-            (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0) &&
-            (list[i - 1].frame?.height || 0) == (list[i].frame?.height || 0)
-          ) {
-          } else {
-            res.push(list[i]);
-          }
-        } else {
-          if (i > 0 && Math.abs((list[i - 1].frame?.x || 0) - (list[i].frame?.x || 0)) < 4) {
-          } else {
-            res.push(list[i]);
-          }
-        }
-      }
-    }
-  }
-}
-
-export class HiPerfThreadStruct extends BaseStruct {
+export class HiPerfThreadStruct extends HiPerfStruct {
   static hoverStruct: HiPerfThreadStruct | undefined;
   static selectStruct: HiPerfThreadStruct | undefined;
-  id: number | undefined;
-  callchain_id: number | undefined;
-  timestamp: number | undefined;
-  thread_id: number | undefined;
-  event_count: number | undefined;
-  event_type_id: number | undefined;
-  cpu_id: number | undefined;
-  thread_state: string | undefined;
-  startNS: number | undefined;
-  endNS: number | undefined;
-  dur: number | undefined;
-  height: number | undefined;
-  cpu: number | undefined;
-
-  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: HiPerfThreadStruct, groupBy10MS: boolean) {
-    if (data.frame) {
-      if (groupBy10MS) {
-        let width = data.frame.width;
-        path.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
-      } else {
-        path.moveTo(data.frame.x + 7, 20);
-        HiPerfCpuStruct.drawRoundRectPath(path, data.frame.x - 7, 20 - 7, 14, 14, 3);
-        path.moveTo(data.frame.x, 27);
-        path.lineTo(data.frame.x, 33);
-      }
-    }
-  }
-
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startNS || 0) < startNS) {
-      node.frame.x = 0;
-    } else {
-      node.frame.x = Math.floor(((node.startNS || 0) - startNS) / pns);
-    }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
-    } else {
-      node.frame.width = Math.ceil(((node.startNS || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
-    }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
-    }
-  }
-
-  static groupBy10MS(array: Array<any>, intervalPerf: number): Array<any> {
-    let obj = array
-      .map((it) => {
-        it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
-        return it;
-      })
-      .reduce((pre, current) => {
-        (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
-        return pre;
-      }, {});
-    let arr: any[] = [];
-    for (let aKey in obj) {
-      let ns = parseInt(aKey);
-      let height: number = 0;
-      height = Math.floor((obj[aKey].length / (10 / intervalPerf)) * 40);
-      arr.push({
-        startNS: ns,
-        height: height,
-        dur: 1_000_000_0,
-      });
-    }
-    return arr;
-  }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts
index b5195f7f5a4cdd5be66d203e497d44e00d995bc7..f27b1c0ab699745e3630fa6859ee9834ab496ffe 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerIrq.ts
@@ -13,13 +13,20 @@
  * limitations under the License.
  */
 
-import { BaseStruct, dataFilterHandler, isFrameContainPoint, Rect, Render } from './ProcedureWorkerCommon.js';
+import {
+  BaseStruct,
+  dataFilterHandler,
+  isFrameContainPoint,
+  Rect,
+  Render,
+  drawString,
+} from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 
 export class IrqRender extends Render {
   renderMainThread(
-    req: {
+    irqReq: {
       context: CanvasRenderingContext2D;
       useCache: boolean;
       type: string;
@@ -27,10 +34,10 @@ export class IrqRender extends Render {
     },
     row: TraceRow<IrqStruct>
   ) {
-    IrqStruct.index = req.index;
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    IrqStruct.index = irqReq.index;
+    let irqList = row.dataList;
+    let irqFilter = row.dataListCache;
+    dataFilterHandler(irqList, irqFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -38,24 +45,24 @@ export class IrqRender extends Render {
       totalNS: TraceRow.range?.totalNS ?? 0,
       frame: row.frame,
       paddingTop: 5,
-      useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
+      useCache: irqReq.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
+    irqReq.context.beginPath();
     let find = false;
-    for (let re of filter) {
-      IrqStruct.draw(req.context, re, row.isHover);
+    for (let re of irqFilter) {
+      IrqStruct.draw(irqReq.context, re, row.isHover);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         IrqStruct.hoverIrqStruct = re;
         find = true;
       }
     }
     if (!find && row.isHover) IrqStruct.hoverIrqStruct = undefined;
-    req.context.closePath();
-    req.context.globalAlpha = 0.8;
-    req.context.fillStyle = '#f0f0f0';
-    req.context.globalAlpha = 1;
-    req.context.fillStyle = '#333';
-    req.context.textBaseline = 'middle';
+    irqReq.context.closePath();
+    irqReq.context.globalAlpha = 0.8;
+    irqReq.context.fillStyle = '#f0f0f0';
+    irqReq.context.globalAlpha = 1;
+    irqReq.context.fillStyle = '#333';
+    irqReq.context.textBaseline = 'middle';
   }
 }
 
@@ -91,38 +98,9 @@ export class IrqStruct extends BaseStruct {
       ctx.globalAlpha = 1.0;
       ctx.lineWidth = 1;
       ctx.fillStyle = '#fff';
-      data.frame.width > 7 && IrqStruct.drawString(ctx, data.name || '', 2, data.frame, data);
-    }
-  }
-
-  static drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect, data: IrqStruct) {
-    if (data.textMetricsWidth === undefined) {
-      data.textMetricsWidth = ctx.measureText(str).width;
-    }
-    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.textBaseline = 'middle';
       ctx.font = '8px sans-serif';
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2), fillTextWidth);
-    } else {
-      if (fillTextWidth >= charWidth) {
-        let chatNum = fillTextWidth / charWidth;
-        let x1 = frame.x + textPadding;
-        ctx.textBaseline = 'middle';
-        ctx.font = '8px sans-serif';
-        if (chatNum < 2) {
-          ctx.fillText(str.substring(0, 1), x1, Math.floor(frame.y + frame.height / 2), fillTextWidth);
-        } else {
-          ctx.fillText(
-            str.substring(0, chatNum - 1) + '...',
-            x1,
-            Math.floor(frame.y + frame.height / 2),
-            fillTextWidth
-          );
-        }
-      }
+      data.frame.width > 7 && drawString(ctx, data.name || '', 2, data.frame, data);
     }
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts
index e773180cc5a2e211bca7fc995b5d8d6df2fc8db6..10aa77ff3311a684e79f3155a77082402fac1915 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerJank.ts
@@ -13,9 +13,18 @@
  * limitations under the License.
  */
 
+import { JanksStruct } from '../../bean/JanksStruct.js';
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
-import { BaseStruct, isFrameContainPoint, ns2x, Rect, Render, RequestMessage } from './ProcedureWorkerCommon.js';
+import {
+  BaseStruct,
+  isFrameContainPoint,
+  ns2x,
+  Rect,
+  Render,
+  RequestMessage,
+  drawString,
+} from './ProcedureWorkerCommon.js';
 
 export class JankRender extends Render {
   renderMainThread(
@@ -26,11 +35,11 @@ export class JankRender extends Render {
     },
     row: TraceRow<JankStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let jankList = row.dataList;
+    let jankFilter = row.dataListCache;
     jank(
-      list,
-      filter,
+      jankList,
+      jankFilter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
@@ -40,7 +49,7 @@ export class JankRender extends Render {
     req.context.beginPath();
     let find = false;
     let nsScale = ((TraceRow.range!.endNS || 0) - (TraceRow.range!.startNS || 0)) / (TraceRow.range!.totalNS * 9);
-    for (let re of filter) {
+    for (let re of jankFilter) {
       JankStruct.draw(req.context, re, nsScale);
       if (row.isHover) {
         if (re.dur == 0 || re.dur == null || re.dur == undefined) {
@@ -70,27 +79,27 @@ export class JankRender extends Render {
 }
 
 export function jank(
-  list: Array<any>,
-  res: Array<any>,
+  jankList: Array<any>,
+  jankFilter: Array<any>,
   startNS: number,
   endNS: number,
   totalNS: number,
   frame: any,
   use: boolean
 ) {
-  if (use && res.length > 0) {
-    for (let i = 0, len = res.length; i < len; i++) {
-      if ((res[i].ts || 0) + (res[i].dur || 0) >= startNS && (res[i].ts || 0) <= endNS) {
-        JankStruct.setJankFrame(res[i], 0, startNS, endNS, totalNS, frame);
+  if (use && jankFilter.length > 0) {
+    for (let i = 0, len = jankFilter.length; i < len; i++) {
+      if ((jankFilter[i].ts || 0) + (jankFilter[i].dur || 0) >= startNS && (jankFilter[i].ts || 0) <= endNS) {
+        JankStruct.setJankFrame(jankFilter[i], 0, startNS, endNS, totalNS, frame);
       } else {
-        res[i].frame = null;
+        jankFilter[i].frame = null;
       }
     }
     return;
   }
-  res.length = 0;
-  if (list) {
-    let groups = list
+  jankFilter.length = 0;
+  if (jankList) {
+    let groups = jankList
       .filter((it) => (it.ts ?? 0) + (it.dur ?? 0) >= startNS && (it.ts ?? 0) <= endNS)
       .map((it) => {
         JankStruct.setJankFrame(it, 0, startNS, endNS, totalNS, frame);
@@ -102,57 +111,36 @@ export function jank(
       }, {});
     Reflect.ownKeys(groups).map((kv) => {
       let arr = groups[kv].sort((a: any, b: any) => b.dur - a.dur);
-      res.push(arr[0]);
+      jankFilter.push(arr[0]);
     });
   }
 }
 
-export class JankStruct extends BaseStruct {
+export class JankStruct extends JanksStruct {
   static hoverJankStruct: JankStruct | undefined;
   static selectJankStruct: JankStruct | undefined;
   static selectJankStructList: Array<JankStruct> = new Array<JankStruct>();
-  static delJankLineFlag: boolean = true;
-  id: number | undefined; // sliceid
-  ts: number | undefined;
-  dur: number | undefined;
-  name: string | undefined;
-  depth: number | undefined;
-  jank_tag: boolean = false;
-  cmdline: string | undefined; // process
-  jank_type: string | undefined;
-  type: string | undefined;
-  pid: number | undefined;
-  frame_type: string | undefined; // app、renderService、frameTime
-  app_dur: number | undefined;
-  src_slice: string | undefined;
-  dst_slice: string | undefined;
-  rs_ts: number | undefined;
-  rs_vsync: string | undefined;
-  rs_dur: number | undefined;
-  rs_pid: number | undefined;
-  rs_name: string | undefined;
-  gpu_dur: number | undefined;
 
-  static setJankFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  static setJankFrame(jankNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
     let x1: number, x2: number;
-    if ((node.ts || 0) > startNS && (node.ts || 0) < endNS) {
-      x1 = ns2x(node.ts || 0, startNS, endNS, totalNS, frame);
+    if ((jankNode.ts || 0) > startNS && (jankNode.ts || 0) < endNS) {
+      x1 = ns2x(jankNode.ts || 0, startNS, endNS, totalNS, frame);
     } else {
       x1 = 0;
     }
-    if ((node.ts || 0) + (node.dur || 0) > startNS && (node.ts || 0) + (node.dur || 0) < endNS) {
-      x2 = ns2x((node.ts || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+    if ((jankNode.ts || 0) + (jankNode.dur || 0) > startNS && (jankNode.ts || 0) + (jankNode.dur || 0) < endNS) {
+      x2 = ns2x((jankNode.ts || 0) + (jankNode.dur || 0), startNS, endNS, totalNS, frame);
     } else {
       x2 = frame.width;
     }
-    if (!node.frame) {
-      node.frame = {};
+    if (!jankNode.frame) {
+      jankNode.frame = {};
     }
     let getV: number = x2 - x1 < 1 ? 1 : x2 - x1;
-    node.frame.x = Math.floor(x1);
-    node.frame.y = node.depth * 20;
-    node.frame.width = Math.ceil(getV);
-    node.frame.height = 20;
+    jankNode.frame.x = Math.floor(x1);
+    jankNode.frame.y = jankNode.depth * 20;
+    jankNode.frame.width = Math.ceil(getV);
+    jankNode.frame.height = 20;
   }
 
   static draw(ctx: CanvasRenderingContext2D, data: JankStruct, nsScale: number) {
@@ -212,7 +200,7 @@ export class JankStruct extends BaseStruct {
 
         if (data.frame.width > 10) {
           ctx.fillStyle = '#fff';
-          JankStruct.drawString(ctx, `${data.name || ''}`, 5, data.frame);
+          drawString(ctx, `${data.name || ''}`, 5, data.frame, data);
         }
         if (JankStruct.isSelected(data)) {
           ctx.strokeStyle = '#000';
@@ -223,28 +211,6 @@ export class JankStruct extends BaseStruct {
     }
   }
 
-  static drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect): boolean {
-    let textMetrics = ctx.measureText(str);
-    let charWidth = Math.round(textMetrics.width / str.length);
-    if (textMetrics.width < frame.width - textPadding * 2) {
-      let x2 = Math.floor(frame.width / 2 - textMetrics.width / 2 + frame.x + textPadding);
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2 + 2), frame.width - textPadding * 2);
-      return true;
-    }
-    if (frame.width - textPadding * 2 > charWidth * 4) {
-      let chatNum = (frame.width - textPadding * 2) / charWidth;
-      let x1 = frame.x + textPadding;
-      ctx.fillText(
-        str.substring(0, chatNum - 4) + '...',
-        x1,
-        Math.floor(frame.y + frame.height / 2 + 2),
-        frame.width - textPadding * 2
-      );
-      return true;
-    }
-    return false;
-  }
-
   static isSelected(data: JankStruct): boolean {
     return (
       JankStruct.selectJankStruct != undefined &&
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerMem.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerMem.ts
index 57da3bae72d1caa40e144ee5e968a1e78ce61914..40ec2f80232a785552c9cc9be333ed752279e4a4 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerMem.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerMem.ts
@@ -27,9 +27,10 @@ import {
   PerfRender,
   Render,
   RequestMessage,
+  mem,
 } from './ProcedureWorkerCommon.js';
 import { CpuStruct } from './ProcedureWorkerCPU.js';
-
+import { ProcessMemStruct as BaseProcessMemStruct } from '../../bean/ProcessMemStruct.js';
 export class MemRender extends Render {
   renderMainThread(
     req: {
@@ -39,11 +40,11 @@ export class MemRender extends Render {
     },
     row: TraceRow<ProcessMemStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let memList = row.dataList;
+    let memFilter = row.dataListCache;
     mem(
-      list,
-      filter,
+      memList,
+      memFilter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
@@ -51,198 +52,130 @@ export class MemRender extends Render {
       req.useCache || !TraceRow.range!.refresh
     );
     req.context.beginPath();
-    let find = false;
-    for (let re of filter) {
+    let memFind = false;
+    for (let re of memFilter) {
       ProcessMemStruct.draw(req.context, re);
       if (row.isHover) {
         if (re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
           ProcessMemStruct.hoverProcessMemStruct = re;
-          find = true;
+          memFind = true;
         }
       }
     }
-    if (!find && row.isHover) ProcessMemStruct.hoverProcessMemStruct = undefined;
+    if (!memFind && row.isHover) ProcessMemStruct.hoverProcessMemStruct = undefined;
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      mem(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(memRequest: RequestMessage, memList: Array<any>, filter: Array<any>) {
+    if (memRequest.lazyRefresh) {
+      mem(
+        memList,
+        filter,
+        memRequest.startNS,
+        memRequest.endNS,
+        memRequest.totalNS,
+        memRequest.frame,
+        memRequest.useCache || !memRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        mem(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!memRequest.useCache) {
+        mem(memList, filter, memRequest.startNS, memRequest.endNS, memRequest.totalNS, memRequest.frame, false);
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (memRequest.canvas) {
+      memRequest.context.clearRect(0, 0, memRequest.frame.width, memRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (arr.length > 0 && !memRequest.range.refresh && !memRequest.useCache && memRequest.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          memRequest.context,
+          memRequest.startNS,
+          memRequest.endNS,
+          memRequest.totalNS,
+          memRequest.frame,
           arr[0].startTime,
           arr[arr.length - 1].startTime + arr[arr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      memRequest.context.beginPath();
+      drawLines(memRequest.context, memRequest.xs, memRequest.frame.height, memRequest.lineColor);
       ProcessMemStruct.hoverProcessMemStruct = undefined;
-      if (req.isHover) {
+      if (memRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            memRequest.hoverX >= re.frame.x &&
+            memRequest.hoverX <= re.frame.x + re.frame.width &&
+            memRequest.hoverY >= re.frame.y &&
+            memRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             ProcessMemStruct.hoverProcessMemStruct = re;
             break;
           }
         }
       } else {
-        ProcessMemStruct.hoverProcessMemStruct = req.params.hoverProcessMemStruct;
+        ProcessMemStruct.hoverProcessMemStruct = memRequest.params.hoverProcessMemStruct;
       }
       for (let re of filter) {
-        ProcessMemStruct.draw(req.context, re);
+        ProcessMemStruct.draw(memRequest.context, re);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(memRequest.context, memRequest.params);
+      memRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        memRequest.context,
+        memRequest.flagMoveInfo,
+        memRequest.flagSelectedInfo,
+        memRequest.startNS,
+        memRequest.endNS,
+        memRequest.totalNS,
+        memRequest.frame,
+        memRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: memRequest.id,
+      type: memRequest.type,
+      results: memRequest.canvas ? undefined : filter,
       hover: ProcessMemStruct.hoverProcessMemStruct,
     });
   }
 }
 
-function setMemFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-  let x1: number;
-  let x2: number;
-  if ((node.startTime || 0) <= startNS) {
-    x1 = 0;
-  } else {
-    x1 = ns2x(node.startTime || 0, startNS, endNS, totalNS, frame);
-  }
-  if ((node.startTime || 0) + (node.duration || 0) >= endNS) {
-    x2 = frame.width;
-  } else {
-    x2 = ns2x((node.startTime || 0) + (node.duration || 0), startNS, endNS, totalNS, frame);
-  }
-  let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
-  if (!node.frame) {
-    node.frame = {};
-  }
-  node.frame.x = Math.floor(x1);
-  node.frame.y = Math.floor(frame.y + padding);
-  node.frame.width = Math.ceil(getV);
-  node.frame.height = Math.floor(frame.height - padding * 2);
-}
-
-export function mem(
-  list: Array<any>,
-  res: Array<any>,
-  startNS: number,
-  endNS: number,
-  totalNS: number,
-  frame: any,
-  use: boolean
-) {
-  if (use && res.length > 0) {
-    for (let i = 0, len = res.length; i < len; i++) {
-      if ((res[i].startTime || 0) + (res[i].duration || 0) > startNS && (res[i].startTime || 0) < endNS) {
-        setMemFrame(res[i], 5, startNS, endNS, totalNS, frame);
-      } else {
-        res[i].frame = null;
-      }
-    }
-    return;
-  }
-  res.length = 0;
-  if (list) {
-    for (let i = 0, len = list.length; i < len; i++) {
-      let it = list[i];
-      if ((it.startTime || 0) + (it.duration || 0) > startNS && (it.startTime || 0) < endNS) {
-        setMemFrame(list[i], 5, startNS, endNS, totalNS, frame);
-        if (
-          i > 0 &&
-          (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
-          (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0)
-        ) {
-        } else {
-          res.push(list[i]);
-        }
-      }
-    }
-  }
-}
-
-export class ProcessMemStruct extends BaseStruct {
-  static hoverProcessMemStruct: ProcessMemStruct | undefined;
-  trackId: number | undefined;
-  processName: string | undefined;
-  pid: number | undefined;
-  upid: number | undefined;
-  trackName: string | undefined;
-  type: string | undefined;
-  track_id: string | undefined;
-  value: number | undefined;
-  startTime: number | undefined;
-  duration: number | undefined;
-  maxValue: number | undefined;
-  delta: number | undefined;
-
-  static draw(ctx: CanvasRenderingContext2D, data: ProcessMemStruct) {
+export class ProcessMemStruct extends BaseProcessMemStruct {
+  static draw(memContext: CanvasRenderingContext2D, data: ProcessMemStruct) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      ctx.fillStyle = ColorUtils.colorForTid(data.maxValue || 0);
-      ctx.strokeStyle = ColorUtils.colorForTid(data.maxValue || 0);
+      memContext.fillStyle = ColorUtils.colorForTid(data.maxValue || 0);
+      memContext.strokeStyle = ColorUtils.colorForTid(data.maxValue || 0);
       if (
-        data.track_id === ProcessMemStruct.hoverProcessMemStruct?.track_id &&
-        data.startTime === ProcessMemStruct.hoverProcessMemStruct?.startTime
+        data === ProcessMemStruct.hoverProcessMemStruct
       ) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(
+        memContext.lineWidth = 1;
+        memContext.globalAlpha = 0.6;
+        let memDrawHeight: number = Math.floor(
           ((data.value || 0) * (data.frame.height || 0) * 1.0) / (data.maxValue || 1)
         );
-        drawHeight = drawHeight > 0 ? drawHeight : 1;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        memDrawHeight = memDrawHeight > 0 ? memDrawHeight : 1;
+        memContext.fillRect(data.frame.x, data.frame.y + data.frame.height - memDrawHeight, width, memDrawHeight);
+        memContext.beginPath();
+        memContext.arc(data.frame.x, data.frame.y + data.frame.height - memDrawHeight, 3, 0, 2 * Math.PI, true);
+        memContext.fill();
+        memContext.globalAlpha = 1.0;
+        memContext.stroke();
+        memContext.beginPath();
+        memContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - memDrawHeight);
+        memContext.lineWidth = 3;
+        memContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - memDrawHeight);
+        memContext.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
+        memContext.globalAlpha = 0.6;
+        memContext.lineWidth = 1;
         let drawHeight: number = ((data.value || 0) * (data.frame.height || 0) * 1.0) / (data.maxValue || 1);
         drawHeight = drawHeight > 0 ? drawHeight : 1;
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        memContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    memContext.globalAlpha = 1.0;
+    memContext.lineWidth = 1;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts
index c8fccbb4e348214fd29c79dbb6d29f12f8a55722..443efa546d2ba5885d7387950f6141019897a3d5 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts
@@ -21,11 +21,10 @@ import {
   drawLines,
   drawLoading,
   drawSelection,
-  drawWakeUp,
-  isFrameContainPoint,
-  ns2x,
   Render,
   RequestMessage,
+  isFrameContainPoint,
+  ns2x,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
@@ -40,9 +39,9 @@ export class MemoryAbilityRender extends Render {
     },
     row: TraceRow<MemoryAbilityMonitorStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let memoryAbilityList = row.dataList;
+    let memoryAbilityFilter = row.dataListCache;
+    dataFilterHandler(memoryAbilityList, memoryAbilityFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -54,7 +53,7 @@ export class MemoryAbilityRender extends Render {
     });
     req.context.beginPath();
     let find = false;
-    for (let re of filter) {
+    for (let re of memoryAbilityFilter) {
       MemoryAbilityMonitorStruct.draw(req.context, re, req.maxMemoryByte, row.isHover);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct = re;
@@ -73,85 +72,116 @@ export class MemoryAbilityRender extends Render {
     req.context.fillText(req.maxMemoryByteName, 4, 5 + 9);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      memoryAbility(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(memoryAbilityRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (memoryAbilityRequest.lazyRefresh) {
+      memoryAbility(
+        list,
+        filter,
+        memoryAbilityRequest.startNS,
+        memoryAbilityRequest.endNS,
+        memoryAbilityRequest.totalNS,
+        memoryAbilityRequest.frame,
+        memoryAbilityRequest.useCache || !memoryAbilityRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        memoryAbility(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!memoryAbilityRequest.useCache) {
+        memoryAbility(
+          list,
+          filter,
+          memoryAbilityRequest.startNS,
+          memoryAbilityRequest.endNS,
+          memoryAbilityRequest.totalNS,
+          memoryAbilityRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (memoryAbilityRequest.canvas) {
+      memoryAbilityRequest.context.clearRect(0, 0, memoryAbilityRequest.frame.width, memoryAbilityRequest.frame.height);
+      let memoryAbilityArr = filter;
+      if (
+        memoryAbilityArr.length > 0 &&
+        !memoryAbilityRequest.range.refresh &&
+        !memoryAbilityRequest.useCache &&
+        memoryAbilityRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          memoryAbilityRequest.context,
+          memoryAbilityRequest.startNS,
+          memoryAbilityRequest.endNS,
+          memoryAbilityRequest.totalNS,
+          memoryAbilityRequest.frame,
+          memoryAbilityArr[0].startNS,
+          memoryAbilityArr[memoryAbilityArr.length - 1].startNS + memoryAbilityArr[memoryAbilityArr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      MemoryAbilityMonitorStruct.maxMemoryByte = req.params.maxMemoryByte;
-      MemoryAbilityMonitorStruct.maxMemoryByteName = req.params.maxMemoryByteName;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      memoryAbilityRequest.context.beginPath();
+      MemoryAbilityMonitorStruct.maxMemoryByte = memoryAbilityRequest.params.maxMemoryByte;
+      MemoryAbilityMonitorStruct.maxMemoryByteName = memoryAbilityRequest.params.maxMemoryByteName;
+      drawLines(
+        memoryAbilityRequest.context,
+        memoryAbilityRequest.xs,
+        memoryAbilityRequest.frame.height,
+        memoryAbilityRequest.lineColor
+      );
       MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct = undefined;
-      if (req.isHover) {
+      if (memoryAbilityRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            memoryAbilityRequest.hoverX >= re.frame.x &&
+            memoryAbilityRequest.hoverX <= re.frame.x + re.frame.width &&
+            memoryAbilityRequest.hoverY >= re.frame.y &&
+            memoryAbilityRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct = re;
             break;
           }
         }
       }
-      MemoryAbilityMonitorStruct.selectMemoryAbilityStruct = req.params.selectMemoryAbilityStruct;
+      MemoryAbilityMonitorStruct.selectMemoryAbilityStruct = memoryAbilityRequest.params.selectMemoryAbilityStruct;
       for (let re of filter) {
-        MemoryAbilityMonitorStruct.draw(req.context, re, MemoryAbilityMonitorStruct.maxMemoryByte, true);
+        MemoryAbilityMonitorStruct.draw(
+          memoryAbilityRequest.context,
+          re,
+          MemoryAbilityMonitorStruct.maxMemoryByte,
+          true
+        );
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(memoryAbilityRequest.context, memoryAbilityRequest.params);
+      memoryAbilityRequest.context.closePath();
       let s = MemoryAbilityMonitorStruct.maxMemoryByteName;
-      let textMetrics = req.context.measureText(s);
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(s, 4, 5 + 9);
+      let textMetrics = memoryAbilityRequest.context.measureText(s);
+      memoryAbilityRequest.context.globalAlpha = 0.8;
+      memoryAbilityRequest.context.fillStyle = '#f0f0f0';
+      memoryAbilityRequest.context.fillRect(0, 5, textMetrics.width + 8, 18);
+      memoryAbilityRequest.context.globalAlpha = 1;
+      memoryAbilityRequest.context.fillStyle = '#333';
+      memoryAbilityRequest.context.textBaseline = 'middle';
+      memoryAbilityRequest.context.fillText(s, 4, 5 + 9);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        memoryAbilityRequest.context,
+        memoryAbilityRequest.flagMoveInfo,
+        memoryAbilityRequest.flagSelectedInfo,
+        memoryAbilityRequest.startNS,
+        memoryAbilityRequest.endNS,
+        memoryAbilityRequest.totalNS,
+        memoryAbilityRequest.frame,
+        memoryAbilityRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: memoryAbilityRequest.id,
+      type: memoryAbilityRequest.type,
+      results: memoryAbilityRequest.canvas ? undefined : filter,
       hover: MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct,
     });
   }
 }
 
 export function memoryAbility(
-  list: Array<any>,
+  memoryAbilityList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -161,30 +191,30 @@ export function memoryAbility(
 ) {
   if (use && res.length > 0) {
     for (let i = 0; i < res.length; i++) {
-      let item = res[i];
-      if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        MemoryAbilityMonitorStruct.setMemoryFrame(item, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+      let memoryAbilityItem = res[i];
+      if ((memoryAbilityItem.startNS || 0) + (memoryAbilityItem.dur || 0) > (startNS || 0) && (memoryAbilityItem.startNS || 0) < (endNS || 0)) {
+        MemoryAbilityMonitorStruct.setMemoryFrame(memoryAbilityItem, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
       } else {
-        item.frame = null;
+        memoryAbilityItem.frame = null;
       }
     }
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let index = 0; index < list.length; index++) {
-      let item = list[index];
-      if (index === list.length - 1) {
+  if (memoryAbilityList) {
+    for (let memoryAbilityIndex = 0; memoryAbilityIndex < memoryAbilityList.length; memoryAbilityIndex++) {
+      let item = memoryAbilityList[memoryAbilityIndex];
+      if (memoryAbilityIndex === memoryAbilityList.length - 1) {
         item.dur = (endNS || 0) - (item.startNS || 0);
       } else {
-        item.dur = (list[index + 1].startNS || 0) - (item.startNS || 0);
+        item.dur = (memoryAbilityList[memoryAbilityIndex + 1].startNS || 0) - (item.startNS || 0);
       }
       if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        MemoryAbilityMonitorStruct.setMemoryFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        MemoryAbilityMonitorStruct.setMemoryFrame(memoryAbilityList[memoryAbilityIndex], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         if (
-          index > 0 &&
-          (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-          (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+            memoryAbilityIndex > 0 &&
+          (memoryAbilityList[memoryAbilityIndex - 1].frame?.x || 0) == (memoryAbilityList[memoryAbilityIndex].frame?.x || 0) &&
+          (memoryAbilityList[memoryAbilityIndex - 1].frame?.width || 0) == (memoryAbilityList[memoryAbilityIndex].frame?.width || 0)
         ) {
         } else {
           res.push(item);
@@ -205,7 +235,7 @@ export class MemoryAbilityMonitorStruct extends BaseStruct {
   dur: number | undefined;
 
   static draw(
-    context2D: CanvasRenderingContext2D,
+    memoryAbilityContext2D: CanvasRenderingContext2D,
     data: MemoryAbilityMonitorStruct,
     maxMemoryByte: number,
     isHover: boolean
@@ -213,55 +243,55 @@ export class MemoryAbilityMonitorStruct extends BaseStruct {
     if (data.frame) {
       let width = data.frame.width || 0;
       let index = 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
+      memoryAbilityContext2D.fillStyle = ColorUtils.colorForTid(index);
+      memoryAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index);
       if (data.startNS === MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct?.startNS && isHover) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
+        memoryAbilityContext2D.lineWidth = 1;
+        memoryAbilityContext2D.globalAlpha = 0.6;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxMemoryByte);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.stroke();
+        memoryAbilityContext2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        memoryAbilityContext2D.beginPath();
+        memoryAbilityContext2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
+        memoryAbilityContext2D.fill();
+        memoryAbilityContext2D.globalAlpha = 1.0;
+        memoryAbilityContext2D.stroke();
+        memoryAbilityContext2D.beginPath();
+        memoryAbilityContext2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        memoryAbilityContext2D.lineWidth = 3;
+        memoryAbilityContext2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        memoryAbilityContext2D.stroke();
       } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
+        memoryAbilityContext2D.globalAlpha = 0.6;
+        memoryAbilityContext2D.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxMemoryByte);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        memoryAbilityContext2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    memoryAbilityContext2D.globalAlpha = 1.0;
+    memoryAbilityContext2D.lineWidth = 1;
   }
 
-  static setMemoryFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setMemoryFrame(memoryNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let memoryStartPointX: number, memoryEndPointX: number;
 
-    if ((node.startNS || 0) < startNS) {
-      startPointX = 0;
+    if ((memoryNode.startNS || 0) < startNS) {
+      memoryStartPointX = 0;
     } else {
-      startPointX = ns2x(node.startNS || 0, startNS, endNS, totalNS, frame);
+      memoryStartPointX = ns2x(memoryNode.startNS || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((memoryNode.startNS || 0) + (memoryNode.dur || 0) > endNS) {
+      memoryEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      memoryEndPointX = ns2x((memoryNode.startNS || 0) + (memoryNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number = memoryEndPointX - memoryStartPointX <= 1 ? 1 : memoryEndPointX - memoryStartPointX;
+    if (!memoryNode.frame) {
+      memoryNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    memoryNode.frame.x = Math.floor(memoryStartPointX);
+    memoryNode.frame.y = frame.y + padding;
+    memoryNode.frame.width = Math.ceil(frameWidth);
+    memoryNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts
index f16e05dade6bfad283b43d18ce1755f562dfe997..811e51a54e576359035fdd8c6aba7da55d88195b 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts
@@ -15,17 +15,11 @@
 
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
-  BaseStruct,
   dataFilterHandler,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
-  drawSelection,
-  drawWakeUp,
   isFrameContainPoint,
-  ns2x,
   Render,
   RequestMessage,
+  BaseStruct,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 export class NetworkAbilityRender extends Render {
@@ -39,9 +33,9 @@ export class NetworkAbilityRender extends Render {
     },
     row: TraceRow<NetworkAbilityMonitorStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let networkAbilityList = row.dataList;
+    let networkAbilityFilter = row.dataListCache;
+    dataFilterHandler(networkAbilityList, networkAbilityFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -53,7 +47,7 @@ export class NetworkAbilityRender extends Render {
     });
     req.context.beginPath();
     let find = false;
-    for (let re of filter) {
+    for (let re of networkAbilityFilter) {
       NetworkAbilityMonitorStruct.draw(req.context, re, req.maxNetworkRate, row.isHover);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = re;
@@ -84,7 +78,7 @@ export class NetworkAbilityMonitorStruct extends BaseStruct {
   startNS: number | undefined;
 
   static draw(
-    context2D: CanvasRenderingContext2D,
+    networkAbilityContext2D: CanvasRenderingContext2D,
     data: NetworkAbilityMonitorStruct,
     maxNetworkRate: number,
     isHover: boolean
@@ -92,31 +86,31 @@ export class NetworkAbilityMonitorStruct extends BaseStruct {
     if (data.frame) {
       let width = data.frame.width || 0;
       let index = 2;
-      context2D.fillStyle = ColorUtils.colorForTid(index);
-      context2D.strokeStyle = ColorUtils.colorForTid(index);
+      networkAbilityContext2D.fillStyle = ColorUtils.colorForTid(index);
+      networkAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index);
       if (data.startNS === NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct?.startNS && isHover) {
-        context2D.lineWidth = 1;
-        context2D.globalAlpha = 0.6;
+        networkAbilityContext2D.lineWidth = 1;
+        networkAbilityContext2D.globalAlpha = 0.6;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxNetworkRate);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.stroke();
+        networkAbilityContext2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        networkAbilityContext2D.beginPath();
+        networkAbilityContext2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
+        networkAbilityContext2D.fill();
+        networkAbilityContext2D.globalAlpha = 1.0;
+        networkAbilityContext2D.stroke();
+        networkAbilityContext2D.beginPath();
+        networkAbilityContext2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        networkAbilityContext2D.lineWidth = 3;
+        networkAbilityContext2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        networkAbilityContext2D.stroke();
       } else {
-        context2D.globalAlpha = 0.6;
-        context2D.lineWidth = 1;
+        networkAbilityContext2D.globalAlpha = 0.6;
+        networkAbilityContext2D.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxNetworkRate);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        networkAbilityContext2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    networkAbilityContext2D.globalAlpha = 1.0;
+    networkAbilityContext2D.lineWidth = 1;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerProcess.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerProcess.ts
index cf5a4366ff29842ea8191668850308e84d686fbd..3ca809adb9655ed53201beb80f244c7ba6493d30 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerProcess.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerProcess.ts
@@ -53,63 +53,71 @@ export class ProcessRender extends Render {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      proc(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(processReq: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (processReq.lazyRefresh) {
+      proc(
+        list,
+        filter,
+        processReq.startNS,
+        processReq.endNS,
+        processReq.totalNS,
+        processReq.frame,
+        processReq.useCache || !processReq.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        proc(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!processReq.useCache) {
+        proc(list, filter, processReq.startNS, processReq.endNS, processReq.totalNS, processReq.frame, false);
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (processReq.canvas) {
+      processReq.context.clearRect(0, 0, processReq.frame.width, processReq.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (arr.length > 0 && !processReq.range.refresh && !processReq.useCache && processReq.lazyRefresh) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          processReq.context,
+          processReq.startNS,
+          processReq.endNS,
+          processReq.totalNS,
+          processReq.frame,
           arr[0].startTime,
           arr[arr.length - 1].startTime + arr[arr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      CpuStruct.cpuCount = req.params.cpuCount;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      processReq.context.beginPath();
+      CpuStruct.cpuCount = processReq.params.cpuCount;
+      drawLines(processReq.context, processReq.xs, processReq.frame.height, processReq.lineColor);
       let path = new Path2D();
       let miniHeight: number = 0;
-      miniHeight = Math.round((req.frame.height - CpuStruct.cpuCount * 2) / CpuStruct.cpuCount);
-      req.context.fillStyle = ColorUtils.colorForTid(req.params.pid || 0);
+      miniHeight = Math.round((processReq.frame.height - CpuStruct.cpuCount * 2) / CpuStruct.cpuCount);
+      processReq.context.fillStyle = ColorUtils.colorForTid(processReq.params.pid || 0);
       for (let re of filter) {
-        ProcessStruct.draw(req.context, path, re, miniHeight);
+        ProcessStruct.draw(processReq.context, path, re, miniHeight);
       }
-      req.context.fill(path);
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      processReq.context.fill(path);
+      drawSelection(processReq.context, processReq.params);
+      processReq.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        processReq.context,
+        processReq.flagMoveInfo,
+        processReq.flagSelectedInfo,
+        processReq.startNS,
+        processReq.endNS,
+        processReq.totalNS,
+        processReq.frame,
+        processReq.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: processReq.id,
+      type: processReq.type,
+      results: processReq.canvas ? undefined : filter,
       hover: undefined,
     });
   }
 }
 export function proc(
-  list: Array<any>,
+  processList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -122,18 +130,18 @@ export function proc(
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let i = 0, len = list.length; i < len; i++) {
-      let it = list[i];
+  if (processList) {
+    for (let i = 0, len = processList.length; i < len; i++) {
+      let it = processList[i];
       if ((it.startTime || 0) + (it.dur || 0) > (startNS || 0) && (it.startTime || 0) < (endNS || 0)) {
-        ProcessStruct.setProcessFrame(list[i], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        ProcessStruct.setProcessFrame(processList[i], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         if (
           i > 0 &&
-          (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
-          (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0)
+          (processList[i - 1].frame?.x || 0) == (processList[i].frame?.x || 0) &&
+          (processList[i - 1].frame?.width || 0) == (processList[i].frame?.width || 0)
         ) {
         } else {
-          res.push(list[i]);
+          res.push(processList[i]);
         }
       }
     }
@@ -162,42 +170,49 @@ export class ProcessStruct extends BaseStruct {
     }
   }
 
-  static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
-    if ((node.startTime || 0) < startNS) {
-      node.frame.x = 0;
+  static setFrame(processNode: any, pns: number, startNS: number, endNS: number, frame: any) {
+    if ((processNode.startTime || 0) < startNS) {
+      processNode.frame.x = 0;
     } else {
-      node.frame.x = Math.floor(((node.startTime || 0) - startNS) / pns);
+      processNode.frame.x = Math.floor(((processNode.startTime || 0) - startNS) / pns);
     }
-    if ((node.startTime || 0) + (node.dur || 0) > endNS) {
-      node.frame.width = frame.width - node.frame.x;
+    if ((processNode.startTime || 0) + (processNode.dur || 0) > endNS) {
+      processNode.frame.width = frame.width - processNode.frame.x;
     } else {
-      node.frame.width = Math.ceil(((node.startTime || 0) + (node.dur || 0) - startNS) / pns - node.frame.x);
+      processNode.frame.width = Math.ceil(((processNode.startTime || 0) + (processNode.dur || 0) - startNS) / pns - processNode.frame.x);
     }
-    if (node.frame.width < 1) {
-      node.frame.width = 1;
+    if (processNode.frame.width < 1) {
+      processNode.frame.width = 1;
     }
   }
 
-  static setProcessFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+  static setProcessFrame(
+    processNode: any,
+    padding: number,
+    startNS: number,
+    endNS: number,
+    totalNS: number,
+    frame: any
+  ) {
     let x1: number;
     let x2: number;
-    if ((node.startTime || 0) < startNS) {
+    if ((processNode.startTime || 0) < startNS) {
       x1 = 0;
     } else {
-      x1 = ns2x(node.startTime || 0, startNS, endNS, totalNS, frame);
+      x1 = ns2x(processNode.startTime || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startTime || 0) + (node.dur || 0) > endNS) {
+    if ((processNode.startTime || 0) + (processNode.dur || 0) > endNS) {
       x2 = frame.width;
     } else {
-      x2 = ns2x((node.startTime || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      x2 = ns2x((processNode.startTime || 0) + (processNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
-    if (!node.frame) {
-      node.frame = {};
+    let processGetV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
+    if (!processNode.frame) {
+      processNode.frame = {};
     }
-    node.frame.x = Math.floor(x1);
-    node.frame.y = Math.floor(frame.y + 2);
-    node.frame.width = Math.ceil(getV);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    processNode.frame.x = Math.floor(x1);
+    processNode.frame.y = Math.floor(frame.y + 2);
+    processNode.frame.width = Math.ceil(processGetV);
+    processNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerSmaps.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerSmaps.ts
index 040a451ddae9861fb4b905502c7f290cf775ca40..9de3a31fee54ef63ecc361b94713702bbada843f 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerSmaps.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerSmaps.ts
@@ -38,9 +38,9 @@ export class SmapsRender extends Render {
     },
     row: TraceRow<SmapsStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let smapsList = row.dataList;
+    let smapsFilter = row.dataListCache;
+    dataFilterHandler(smapsList, smapsFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -66,7 +66,7 @@ export class SmapsRender extends Render {
       }
     }
     let find = false;
-    for (let re of filter) {
+    for (let re of smapsFilter) {
       SmapsStruct.draw(req.context, re, req.maxValue, drawColor, row.isHover);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         SmapsStruct.hoverSmapsStruct = re;
@@ -78,33 +78,33 @@ export class SmapsRender extends Render {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      smaps(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(smapsReq: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (smapsReq.lazyRefresh) {
+      smaps(list, filter, smapsReq.startNS, smapsReq.endNS, smapsReq.totalNS, smapsReq.frame, smapsReq.useCache || !smapsReq.range.refresh);
     } else {
-      if (!req.useCache) {
-        smaps(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!smapsReq.useCache) {
+        smaps(list, filter, smapsReq.startNS, smapsReq.endNS, smapsReq.totalNS, smapsReq.frame, false);
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      req.context.beginPath();
+    if (smapsReq.canvas) {
+      smapsReq.context.clearRect(0, 0, smapsReq.frame.width, smapsReq.frame.height);
+      smapsReq.context.beginPath();
       let maxValue = 0;
       let maxValueName = '';
-      if (req.params.maxValue != undefined || req.params.maxValueName != undefined) {
-        maxValue = req.params.maxValue;
-        maxValueName = req.params.maxValueName;
+      if (smapsReq.params.maxValue != undefined || smapsReq.params.maxValueName != undefined) {
+        maxValue = smapsReq.params.maxValue;
+        maxValueName = smapsReq.params.maxValueName;
       }
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      drawLines(smapsReq.context, smapsReq.xs, smapsReq.frame.height, smapsReq.lineColor);
       SmapsStruct.hoverSmapsStruct = undefined;
-      if (req.isHover) {
+      if (smapsReq.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            smapsReq.hoverX >= re.frame.x &&
+            smapsReq.hoverX <= re.frame.x + re.frame.width &&
+            smapsReq.hoverY >= re.frame.y &&
+            smapsReq.hoverY <= re.frame.y + re.frame.height
           ) {
             SmapsStruct.hoverSmapsStruct = re;
             break;
@@ -112,8 +112,8 @@ export class SmapsRender extends Render {
         }
       }
       let drawColor = '#0A59F7';
-      if (req.params.rowName != undefined) {
-        switch (req.params.rowName) {
+      if (smapsReq.params.rowName != undefined) {
+        switch (smapsReq.params.rowName) {
           case 'dirty':
             drawColor = '#0A59F7';
             break;
@@ -125,35 +125,35 @@ export class SmapsRender extends Render {
             break;
         }
       }
-      SmapsStruct.selectSmapsStruct = req.params.selectSmapsStruct;
+      SmapsStruct.selectSmapsStruct = smapsReq.params.selectSmapsStruct;
       for (let re of filter) {
-        SmapsStruct.draw(req.context, re, maxValue, drawColor, true);
+        SmapsStruct.draw(smapsReq.context, re, maxValue, drawColor, true);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(smapsReq.context, smapsReq.params);
+      smapsReq.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        smapsReq.context,
+        smapsReq.flagMoveInfo,
+        smapsReq.flagSelectedInfo,
+        smapsReq.startNS,
+        smapsReq.endNS,
+        smapsReq.totalNS,
+        smapsReq.frame,
+        smapsReq.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: smapsReq.id,
+      type: smapsReq.type,
+      results: smapsReq.canvas ? undefined : filter,
       hover: SmapsStruct.hoverSmapsStruct,
     });
   }
 }
 
 export function smaps(
-  list: Array<any>,
+  smapsList: Array<any>,
   res: Array<any>,
   startNS: number,
   endNS: number,
@@ -163,30 +163,30 @@ export function smaps(
 ) {
   if (use && res.length > 0) {
     for (let i = 0; i < res.length; i++) {
-      let item = res[i];
-      if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        SmapsStruct.setSmapsFrame(item, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+      let smapsItem = res[i];
+      if ((smapsItem.startNS || 0) + (smapsItem.dur || 0) > (startNS || 0) && (smapsItem.startNS || 0) < (endNS || 0)) {
+        SmapsStruct.setSmapsFrame(smapsItem, 5, startNS || 0, endNS || 0, totalNS || 0, frame);
       } else {
-        item.frame = null;
+        smapsItem.frame = null;
       }
     }
     return;
   }
   res.length = 0;
-  if (list) {
-    for (let index = 0; index < list.length; index++) {
-      let item = list[index];
-      if (index === list.length - 1) {
+  if (smapsList) {
+    for (let smapsIndex = 0; smapsIndex < smapsList.length; smapsIndex++) {
+      let item = smapsList[smapsIndex];
+      if (smapsIndex === smapsList.length - 1) {
         item.dur = (endNS || 0) - (item.startNS || 0);
       } else {
-        item.dur = (list[index + 1].startNS || 0) - (item.startNS || 0);
+        item.dur = (smapsList[smapsIndex + 1].startNS || 0) - (item.startNS || 0);
       }
       if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        SmapsStruct.setSmapsFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        SmapsStruct.setSmapsFrame(smapsList[smapsIndex], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         if (
-          index > 0 &&
-          (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-          (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+          smapsIndex > 0 &&
+          (smapsList[smapsIndex - 1].frame?.x || 0) == (smapsList[smapsIndex].frame?.x || 0) &&
+          (smapsList[smapsIndex - 1].frame?.width || 0) == (smapsList[smapsIndex].frame?.width || 0)
         ) {
         } else {
           res.push(item);
@@ -206,7 +206,7 @@ export class SmapsStruct extends BaseStruct {
   dur: number | undefined;
 
   static draw(
-    context2D: CanvasRenderingContext2D,
+    smapsContext: CanvasRenderingContext2D,
     data: SmapsStruct,
     maxValue: number,
     drawColor: string,
@@ -214,52 +214,52 @@ export class SmapsStruct extends BaseStruct {
   ) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      context2D.fillStyle = drawColor;
-      context2D.strokeStyle = drawColor;
+      smapsContext.fillStyle = drawColor;
+      smapsContext.strokeStyle = drawColor;
       if (data.startNS === SmapsStruct.hoverSmapsStruct?.startNS && isHover) {
-        context2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxValue);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.stroke();
+        smapsContext.lineWidth = 1;
+        let smapsDrawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxValue);
+        smapsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - smapsDrawHeight + 4, width, smapsDrawHeight);
+        smapsContext.beginPath();
+        smapsContext.arc(data.frame.x, data.frame.y + data.frame.height - smapsDrawHeight + 4, 3, 0, 2 * Math.PI, true);
+        smapsContext.fill();
+        smapsContext.globalAlpha = 1.0;
+        smapsContext.stroke();
+        smapsContext.beginPath();
+        smapsContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - smapsDrawHeight + 4);
+        smapsContext.lineWidth = 3;
+        smapsContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - smapsDrawHeight + 4);
+        smapsContext.stroke();
       } else {
-        context2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxValue);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        smapsContext.lineWidth = 1;
+        let smapsDrawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxValue);
+        smapsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - smapsDrawHeight + 4, width, smapsDrawHeight);
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    smapsContext.globalAlpha = 1.0;
+    smapsContext.lineWidth = 1;
   }
 
-  static setSmapsFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setSmapsFrame(smapsNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let smapsStartPointX: number, smapsEndPointX: number;
 
-    if ((node.startNS || 0) < startNS) {
-      startPointX = 0;
+    if ((smapsNode.startNS || 0) < startNS) {
+      smapsStartPointX = 0;
     } else {
-      startPointX = ns2x(node.startNS || 0, startNS, endNS, totalNS, frame);
+      smapsStartPointX = ns2x(smapsNode.startNS || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.startNS || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((smapsNode.startNS || 0) + (smapsNode.dur || 0) > endNS) {
+      smapsEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.startNS || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      smapsEndPointX = ns2x((smapsNode.startNS || 0) + (smapsNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number = smapsEndPointX - smapsStartPointX <= 1 ? 1 : smapsEndPointX - smapsStartPointX;
+    if (!smapsNode.frame) {
+      smapsNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    smapsNode.frame.x = Math.floor(smapsStartPointX);
+    smapsNode.frame.y = frame.y + padding;
+    smapsNode.frame.width = Math.ceil(frameWidth);
+    smapsNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
index 3e61d73776b37e8a6037d27369980dcb49308643..4ee78865dacf2c0bcd015fc791fee7b1ae253ac0 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
@@ -20,13 +20,14 @@ import {
   Rect,
   Render,
   RequestMessage,
+  drawString,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 import { Utils } from '../../component/trace/base/Utils.js';
-
+import { ThreadStruct as  BaseThreadStruct} from '../../bean/ThreadStruct.js';
 export class ThreadRender extends Render {
   renderMainThread(
-    req: {
+    threadReq: {
       context: CanvasRenderingContext2D;
       useCache: boolean;
       type: string;
@@ -34,9 +35,9 @@ export class ThreadRender extends Render {
     },
     row: TraceRow<ThreadStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    dataFilterHandler(list, filter, {
+    let threadList = row.dataList;
+    let threadFilter = row.dataListCache;
+    dataFilterHandler(threadList, threadFilter, {
       startKey: 'startTime',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
@@ -44,27 +45,25 @@ export class ThreadRender extends Render {
       totalNS: TraceRow.range?.totalNS ?? 0,
       frame: row.frame,
       paddingTop: 5,
-      useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
+      useCache: threadReq.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
-    for (let re of filter) {
-      re.translateY = req.translateY;
-      ThreadStruct.draw(req.context, re);
+    threadReq.context.beginPath();
+    for (let re of threadFilter) {
+      re.translateY = threadReq.translateY;
+      ThreadStruct.drawThread(threadReq.context, re);
       if (row.isHover && re.frame && isFrameContainPoint(re.frame!, row.hoverX, row.hoverY)) {
         ThreadStruct.hoverThreadStruct = re;
       }
     }
-    req.context.closePath();
+    threadReq.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {}
+  render(threadReq: RequestMessage, threadList: Array<any>, threadFilter: Array<any>) {}
 }
 
 const padding = 3;
 
-export class ThreadStruct extends BaseStruct {
-  static runningColor: string = '#467b3b';
-  static rColor = '#a0b84d';
+export class ThreadStruct extends BaseThreadStruct {
   static otherColor = '#673ab7';
   static uninterruptibleSleepColor = '#f19d38';
   static uninterruptibleSleepNonIOColor = '#795548';
@@ -72,108 +71,34 @@ export class ThreadStruct extends BaseStruct {
   static sColor = '#FBFBFB';
   static hoverThreadStruct: ThreadStruct | undefined;
   static selectThreadStruct: ThreadStruct | undefined;
-
-  hasSched: number | undefined; // 14724852000
-  pid: number | undefined; // 2519
-  processName: string | undefined; //null
-  threadName: string | undefined; //"ACCS0"
-  tid: number | undefined; //2716
-  upid: number | undefined; // 1
-  utid: number | undefined; // 1
-  cpu: number | undefined; // null
-  dur: number | undefined; // 405000
-  argSetID: number | undefined; // 405000
-  end_ts: number | undefined; // null
-  id: number | undefined; // 1
-  is_main_thread: number | undefined; // 0
-  name: string | undefined; // "ACCS0"
-  startTime: number | undefined; // 58000
-  start_ts: number | undefined; // null
-  state: string | undefined; // "S"
-  type: string | undefined; // "thread"
+  argSetID: number | undefined;
+  translateY: number | undefined;
   textMetricsWidth: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: ThreadStruct) {
+  static drawThread(threadContext: CanvasRenderingContext2D, data: ThreadStruct) {
     if (data.frame) {
-      ctx.globalAlpha = 1;
+      threadContext.globalAlpha = 1;
       let stateText = ThreadStruct.getEndState(data.state || '');
-      ctx.fillStyle = Utils.getStateColor(data.state || '');
+      threadContext.fillStyle = Utils.getStateColor(data.state || '');
       if ('S' === data.state) {
-        ctx.globalAlpha = 0.2;
+        threadContext.globalAlpha = 0.2;
       }
-      ctx.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
-      ctx.fillStyle = '#fff';
+      threadContext.fillRect(data.frame.x, data.frame.y + padding, data.frame.width, data.frame.height - padding * 2);
+      threadContext.fillStyle = '#fff';
+      threadContext.textBaseline = 'middle';
+      threadContext.font = '8px sans-serif';
       if ('S' !== data.state) {
-        data.frame.width > 7 && ThreadStruct.drawString(ctx, stateText, 2, data.frame, data);
+        data.frame.width > 7 && drawString(threadContext, stateText, 2, data.frame, data);
       }
       if (
         ThreadStruct.selectThreadStruct &&
         ThreadStruct.equals(ThreadStruct.selectThreadStruct, data) &&
         ThreadStruct.selectThreadStruct.state != 'S'
       ) {
-        ctx.strokeStyle = '#232c5d';
-        ctx.lineWidth = 2;
-        ctx.strokeRect(data.frame.x, data.frame.y + padding, data.frame.width - 2, data.frame.height - padding * 2);
-      }
-    }
-  }
-
-  static drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect, data: ThreadStruct) {
-    if (data.textMetricsWidth === undefined) {
-      data.textMetricsWidth = ctx.measureText(str).width;
-    }
-    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.textBaseline = 'middle';
-      ctx.font = '8px sans-serif';
-      ctx.fillText(str, x2, Math.floor(frame.y + frame.height / 2), fillTextWidth);
-    } else {
-      if (fillTextWidth >= charWidth) {
-        let chatNum = (frame.width - textPadding * 2) / charWidth;
-        let x1 = frame.x + textPadding;
-        ctx.textBaseline = 'middle';
-        ctx.font = '8px sans-serif';
-        if (chatNum < 2) {
-          ctx.fillText(str.substring(0, 1), x1, Math.floor(frame.y + frame.height / 2), fillTextWidth);
-        } else {
-          ctx.fillText(
-            str.substring(0, chatNum - 1) + '...',
-            x1,
-            Math.floor(frame.y + frame.height / 2),
-            fillTextWidth
-          );
-        }
+        threadContext.strokeStyle = '#232c5d';
+        threadContext.lineWidth = 2;
+        threadContext.strokeRect(data.frame.x, data.frame.y + padding, data.frame.width - 2, data.frame.height - padding * 2);
       }
     }
   }
-
-  static getEndState(state: string): string {
-    let statusMapElement = Utils.getEndState(state);
-    if (statusMapElement) {
-      return statusMapElement;
-    } else {
-      if ('' == statusMapElement || statusMapElement == null) {
-        return '';
-      }
-      return 'Unknown State';
-    }
-  }
-
-  static equals(d1: ThreadStruct, d2: ThreadStruct): boolean {
-    if (
-      d1 &&
-      d2 &&
-      d1.cpu == d2.cpu &&
-      d1.tid == d2.tid &&
-      d1.state == d2.state &&
-      d1.startTime == d2.startTime &&
-      d1.dur == d2.dur
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerVirtualMemory.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerVirtualMemory.ts
index c5f11276c1fac947316be9bf2b6af5e840a8aa60..3174188e29bd428e00143ef45afcd5885dbad734 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerVirtualMemory.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerVirtualMemory.ts
@@ -16,15 +16,14 @@
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
   BaseStruct,
-  drawFlagLine,
   drawLines,
   drawLoading,
-  drawSelection,
-  drawWakeUp,
-  isFrameContainPoint,
-  ns2x,
   Render,
   RequestMessage,
+  mem,
+  drawFlagLine,
+  drawSelection,
+  isFrameContainPoint,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
@@ -59,134 +58,99 @@ export class VirtualMemoryRender extends Render {
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      mem(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(virtualMemoryRequest: RequestMessage, virtualMemoryList: Array<any>, filter: Array<any>) {
+    if (virtualMemoryRequest.lazyRefresh) {
+      mem(
+        virtualMemoryList,
+        filter,
+        virtualMemoryRequest.startNS,
+        virtualMemoryRequest.endNS,
+        virtualMemoryRequest.totalNS,
+        virtualMemoryRequest.frame,
+        virtualMemoryRequest.useCache || !virtualMemoryRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        mem(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!virtualMemoryRequest.useCache) {
+        mem(
+          virtualMemoryList,
+          filter,
+          virtualMemoryRequest.startNS,
+          virtualMemoryRequest.endNS,
+          virtualMemoryRequest.totalNS,
+          virtualMemoryRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
+    if (virtualMemoryRequest.canvas) {
+      virtualMemoryRequest.context.clearRect(0, 0, virtualMemoryRequest.frame.width, virtualMemoryRequest.frame.height);
       let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+      if (
+        arr.length > 0 &&
+        !virtualMemoryRequest.range.refresh &&
+        !virtualMemoryRequest.useCache &&
+        virtualMemoryRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
+          virtualMemoryRequest.context,
+          virtualMemoryRequest.startNS,
+          virtualMemoryRequest.endNS,
+          virtualMemoryRequest.totalNS,
+          virtualMemoryRequest.frame,
           arr[0].startTime,
           arr[arr.length - 1].startTime + arr[arr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      virtualMemoryRequest.context.beginPath();
+      drawLines(
+        virtualMemoryRequest.context,
+        virtualMemoryRequest.xs,
+        virtualMemoryRequest.frame.height,
+        virtualMemoryRequest.lineColor
+      );
       VirtualMemoryStruct.hoverStruct = undefined;
-      if (req.isHover) {
+      if (virtualMemoryRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            virtualMemoryRequest.hoverX >= re.frame.x &&
+            virtualMemoryRequest.hoverX <= re.frame.x + re.frame.width &&
+            virtualMemoryRequest.hoverY >= re.frame.y &&
+            virtualMemoryRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             VirtualMemoryStruct.hoverStruct = re;
             break;
           }
         }
       } else {
-        VirtualMemoryStruct.hoverStruct = req.params.hoverStruct;
+        VirtualMemoryStruct.hoverStruct = virtualMemoryRequest.params.hoverStruct;
       }
       for (let re of filter) {
-        VirtualMemoryStruct.draw(req.context, re);
+        VirtualMemoryStruct.draw(virtualMemoryRequest.context, re);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
+      drawSelection(virtualMemoryRequest.context, virtualMemoryRequest.params);
+      virtualMemoryRequest.context.closePath();
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        virtualMemoryRequest.context,
+        virtualMemoryRequest.flagMoveInfo,
+        virtualMemoryRequest.flagSelectedInfo,
+        virtualMemoryRequest.startNS,
+        virtualMemoryRequest.endNS,
+        virtualMemoryRequest.totalNS,
+        virtualMemoryRequest.frame,
+        virtualMemoryRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: virtualMemoryRequest.id,
+      type: virtualMemoryRequest.type,
+      results: virtualMemoryRequest.canvas ? undefined : filter,
       hover: VirtualMemoryStruct.hoverStruct,
     });
   }
 }
 
-function setMemFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-  let x1: number;
-  let x2: number;
-  if ((node.startTime || 0) <= startNS) {
-    x1 = 0;
-  } else {
-    x1 = ns2x(node.startTime || 0, startNS, endNS, totalNS, frame);
-  }
-  if ((node.startTime || 0) + (node.duration || 0) >= endNS) {
-    x2 = frame.width;
-  } else {
-    x2 = ns2x((node.startTime || 0) + (node.duration || 0), startNS, endNS, totalNS, frame);
-  }
-  let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
-  if (!node.frame) {
-    node.frame = {};
-  }
-  node.frame.x = Math.floor(x1);
-  node.frame.y = Math.floor(frame.y + padding);
-  node.frame.width = Math.ceil(getV);
-  node.frame.height = Math.floor(frame.height - padding * 2);
-}
-
-export function mem(
-  list: Array<any>,
-  res: Array<any>,
-  startNS: number,
-  endNS: number,
-  totalNS: number,
-  frame: any,
-  use: boolean
-) {
-  if (use && res.length > 0) {
-    for (let i = 0, len = res.length; i < len; i++) {
-      if ((res[i].startTime || 0) + (res[i].duration || 0) > startNS && (res[i].startTime || 0) < endNS) {
-        setMemFrame(res[i], 5, startNS, endNS, totalNS, frame);
-      } else {
-        res[i].frame = null;
-      }
-    }
-    return;
-  }
-  res.length = 0;
-  if (list) {
-    for (let i = 0, len = list.length; i < len; i++) {
-      let it = list[i];
-      if ((it.startTime || 0) + (it.duration || 0) > startNS && (it.startTime || 0) < endNS) {
-        setMemFrame(list[i], 5, startNS, endNS, totalNS, frame);
-        if (
-          i > 0 &&
-          (list[i - 1].frame?.x || 0) == (list[i].frame?.x || 0) &&
-          (list[i - 1].frame?.width || 0) == (list[i].frame?.width || 0)
-        ) {
-        } else {
-          res.push(list[i]);
-        }
-      }
-    }
-  }
-}
-
 export class VirtualMemoryStruct extends BaseStruct {
   static hoverStruct: VirtualMemoryStruct | undefined;
   filterID: number | undefined;
@@ -196,36 +160,36 @@ export class VirtualMemoryStruct extends BaseStruct {
   maxValue: number | undefined;
   delta: number | undefined;
 
-  static draw(ctx: CanvasRenderingContext2D, data: VirtualMemoryStruct) {
+  static draw(virtualMemoryContext: CanvasRenderingContext2D, data: VirtualMemoryStruct) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      ctx.fillStyle = ColorUtils.colorForTid(data.maxValue || 0);
-      ctx.strokeStyle = ColorUtils.colorForTid(data.maxValue || 0);
+      virtualMemoryContext.fillStyle = ColorUtils.colorForTid(data.maxValue || 0);
+      virtualMemoryContext.strokeStyle = ColorUtils.colorForTid(data.maxValue || 0);
       if (data === VirtualMemoryStruct.hoverStruct) {
-        ctx.lineWidth = 1;
-        ctx.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(
+        virtualMemoryContext.lineWidth = 1;
+        virtualMemoryContext.globalAlpha = 0.6;
+        let virtualMemoryDrawHeight: number = Math.floor(
           ((data.value || 0) * (data.frame.height || 0) * 1.0) / (data.maxValue || 1)
         );
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
-        ctx.beginPath();
-        ctx.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
-        ctx.lineWidth = 3;
-        ctx.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
-        ctx.stroke();
+        virtualMemoryContext.fillRect(data.frame.x, data.frame.y + data.frame.height - virtualMemoryDrawHeight, width, virtualMemoryDrawHeight);
+        virtualMemoryContext.beginPath();
+        virtualMemoryContext.arc(data.frame.x, data.frame.y + data.frame.height - virtualMemoryDrawHeight, 3, 0, 2 * Math.PI, true);
+        virtualMemoryContext.fill();
+        virtualMemoryContext.globalAlpha = 1.0;
+        virtualMemoryContext.stroke();
+        virtualMemoryContext.beginPath();
+        virtualMemoryContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - virtualMemoryDrawHeight);
+        virtualMemoryContext.lineWidth = 3;
+        virtualMemoryContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - virtualMemoryDrawHeight);
+        virtualMemoryContext.stroke();
       } else {
-        ctx.globalAlpha = 0.6;
-        ctx.lineWidth = 1;
+        virtualMemoryContext.globalAlpha = 0.6;
+        virtualMemoryContext.lineWidth = 1;
         let drawHeight: number = ((data.value || 0) * (data.frame.height || 0) * 1.0) / (data.maxValue || 1);
-        ctx.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
+        virtualMemoryContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
       }
     }
-    ctx.globalAlpha = 1.0;
-    ctx.lineWidth = 1;
+    virtualMemoryContext.globalAlpha = 1.0;
+    virtualMemoryContext.lineWidth = 1;
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts b/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts
index 5aa449c5654a1bc404b61caf25e7211946abb1a6..235d9f154a8043f67e654aae5de4aca3ddcb8c97 100644
--- a/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts
+++ b/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts
@@ -15,15 +15,14 @@
 
 import {
   BaseStruct,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
   drawSelection,
-  drawWakeUp,
   isFrameContainPoint,
   ns2x,
   Render,
+  drawFlagLine,
   RequestMessage,
+  drawLines,
+  drawLoading,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
@@ -38,13 +37,13 @@ export class SdkCounterRender extends Render {
     },
     row: TraceRow<CounterStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let counterList = row.dataList;
+    let counterFilter = row.dataListCache;
     let maxCounter = req.maxValue;
     let maxCounterName = req.maxName;
     this.counter(
-      list,
-      filter,
+      counterList,
+      counterFilter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
       TraceRow.range?.totalNS ?? 0,
@@ -52,15 +51,15 @@ export class SdkCounterRender extends Render {
       req.useCache || (TraceRow.range?.refresh ?? false)
     );
     req.context.beginPath();
-    let find = false;
-    for (let re of filter) {
+    let sdkCounterFind = false;
+    for (let re of counterFilter) {
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         CounterStruct.hoverCounterStruct = re;
-        find = true;
+        sdkCounterFind = true;
       }
       CounterStruct.draw(req.context, re, maxCounter);
     }
-    if (!find && row.isHover) CounterStruct.hoverCounterStruct = undefined;
+    if (!sdkCounterFind && row.isHover) CounterStruct.hoverCounterStruct = undefined;
     req.context.closePath();
     let textMetrics = req.context.measureText(maxCounterName);
     req.context.globalAlpha = 0.8;
@@ -72,83 +71,109 @@ export class SdkCounterRender extends Render {
     req.context.fillText(maxCounterName, 4, 5 + 9);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      this.counter(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(sdkCounterRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (sdkCounterRequest.lazyRefresh) {
+      this.counter(
+        list,
+        filter,
+        sdkCounterRequest.startNS,
+        sdkCounterRequest.endNS,
+        sdkCounterRequest.totalNS,
+        sdkCounterRequest.frame,
+        sdkCounterRequest.useCache || !sdkCounterRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        this.counter(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!sdkCounterRequest.useCache) {
+        this.counter(
+          list,
+          filter,
+          sdkCounterRequest.startNS,
+          sdkCounterRequest.endNS,
+          sdkCounterRequest.totalNS,
+          sdkCounterRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.frame.width, req.frame.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (sdkCounterRequest.canvas) {
+      sdkCounterRequest.context.clearRect(0, 0, sdkCounterRequest.frame.width, sdkCounterRequest.frame.height);
+      let sdkCounterArr = filter;
+      if (
+        sdkCounterArr.length > 0 &&
+        !sdkCounterRequest.range.refresh &&
+        !sdkCounterRequest.useCache &&
+        sdkCounterRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          sdkCounterRequest.context,
+          sdkCounterRequest.startNS,
+          sdkCounterRequest.endNS,
+          sdkCounterRequest.totalNS,
+          sdkCounterRequest.frame,
+          sdkCounterArr[0].startNS,
+          sdkCounterArr[sdkCounterArr.length - 1].startNS + sdkCounterArr[sdkCounterArr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      let maxCounter = req.params.maxCounter;
-      let maxCounterName = req.params.maxCounterName;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      sdkCounterRequest.context.beginPath();
+      let maxCounter = sdkCounterRequest.params.maxCounter;
+      let maxCounterName = sdkCounterRequest.params.maxCounterName;
+      drawLines(
+        sdkCounterRequest.context,
+        sdkCounterRequest.xs,
+        sdkCounterRequest.frame.height,
+        sdkCounterRequest.lineColor
+      );
       CounterStruct.hoverCounterStruct = undefined;
-      if (req.isHover) {
+      if (sdkCounterRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            sdkCounterRequest.hoverX >= re.frame.x &&
+            sdkCounterRequest.hoverX <= re.frame.x + re.frame.width &&
+            sdkCounterRequest.hoverY >= re.frame.y &&
+            sdkCounterRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             CounterStruct.hoverCounterStruct = re;
             break;
           }
         }
       }
-      CounterStruct.selectCounterStruct = req.params.selectCounterStruct;
+      CounterStruct.selectCounterStruct = sdkCounterRequest.params.selectCounterStruct;
       for (let re of filter) {
-        CounterStruct.draw(req.context, re, maxCounter);
+        CounterStruct.draw(sdkCounterRequest.context, re, maxCounter);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
-      let textMetrics = req.context.measureText(maxCounterName);
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.fillRect(0, 5, textMetrics.width + 8, 18);
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
-      req.context.fillText(maxCounterName, 4, 5 + 9);
+      drawSelection(sdkCounterRequest.context, sdkCounterRequest.params);
+      sdkCounterRequest.context.closePath();
+      let textMetrics = sdkCounterRequest.context.measureText(maxCounterName);
+      sdkCounterRequest.context.globalAlpha = 0.8;
+      sdkCounterRequest.context.fillStyle = '#f0f0f0';
+      sdkCounterRequest.context.fillRect(0, 5, textMetrics.width + 8, 18);
+      sdkCounterRequest.context.globalAlpha = 1;
+      sdkCounterRequest.context.fillStyle = '#333';
+      sdkCounterRequest.context.textBaseline = 'middle';
+      sdkCounterRequest.context.fillText(maxCounterName, 4, 5 + 9);
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        sdkCounterRequest.context,
+        sdkCounterRequest.flagMoveInfo,
+        sdkCounterRequest.flagSelectedInfo,
+        sdkCounterRequest.startNS,
+        sdkCounterRequest.endNS,
+        sdkCounterRequest.totalNS,
+        sdkCounterRequest.frame,
+        sdkCounterRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: sdkCounterRequest.id,
+      type: sdkCounterRequest.type,
+      results: sdkCounterRequest.canvas ? undefined : filter,
       hover: CounterStruct.hoverCounterStruct,
     });
   }
 
   counter(
-    list: Array<any>,
+    sdkCounteraList: Array<any>,
     res: Array<any>,
     startNS: number,
     endNS: number,
@@ -168,20 +193,20 @@ export class SdkCounterRender extends Render {
       return;
     }
     res.length = 0;
-    if (list) {
-      for (let index = 0; index < list.length; index++) {
-        let item = list[index];
-        if (index === list.length - 1) {
+    if (sdkCounteraList) {
+      for (let index = 0; index < sdkCounteraList.length; index++) {
+        let item = sdkCounteraList[index];
+        if (index === sdkCounteraList.length - 1) {
           item.dur = (endNS || 0) - (item.ts || 0);
         } else {
-          item.dur = (list[index + 1].ts || 0) - (item.ts || 0);
+          item.dur = (sdkCounteraList[index + 1].ts || 0) - (item.ts || 0);
         }
         if ((item.ts || 0) + (item.dur || 0) > (startNS || 0) && (item.ts || 0) < (endNS || 0)) {
-          CounterStruct.setCounterFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+          CounterStruct.setCounterFrame(sdkCounteraList[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
           if (
             index > 0 &&
-            (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-            (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+            (sdkCounteraList[index - 1].frame?.x || 0) == (sdkCounteraList[index].frame?.x || 0) &&
+            (sdkCounteraList[index - 1].frame?.width || 0) == (sdkCounteraList[index].frame?.width || 0)
           ) {
           } else {
             res.push(item);
@@ -202,55 +227,63 @@ export class CounterStruct extends BaseStruct {
   ts: number | undefined;
   counter_id: number | undefined;
 
-  static draw(context2D: CanvasRenderingContext2D, data: CounterStruct, maxCounter: number) {
+  static draw(sdkCounterContext: CanvasRenderingContext2D, data: CounterStruct, maxCounter: number) {
     if (data.frame) {
       let width = data.frame.width || 0;
-      context2D.fillStyle = '#67B0FC';
-      context2D.strokeStyle = '#67B0FC';
+      sdkCounterContext.fillStyle = '#67B0FC';
+      sdkCounterContext.strokeStyle = '#67B0FC';
       if (data.ts === CounterStruct.hoverCounterStruct?.ts) {
-        context2D.lineWidth = 1;
+        sdkCounterContext.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxCounter);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
-        context2D.beginPath();
-        context2D.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
-        context2D.fill();
-        context2D.globalAlpha = 1.0;
-        context2D.stroke();
-        context2D.beginPath();
-        context2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.lineWidth = 3;
-        context2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
-        context2D.stroke();
+        sdkCounterContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        sdkCounterContext.beginPath();
+        sdkCounterContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true);
+        sdkCounterContext.fill();
+        sdkCounterContext.globalAlpha = 1.0;
+        sdkCounterContext.stroke();
+        sdkCounterContext.beginPath();
+        sdkCounterContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        sdkCounterContext.lineWidth = 3;
+        sdkCounterContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        sdkCounterContext.stroke();
       } else {
-        context2D.lineWidth = 1;
+        sdkCounterContext.lineWidth = 1;
         let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxCounter);
-        context2D.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
+        sdkCounterContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight);
       }
     }
-    context2D.globalAlpha = 1.0;
-    context2D.lineWidth = 1;
+    sdkCounterContext.globalAlpha = 1.0;
+    sdkCounterContext.lineWidth = 1;
   }
 
-  static setCounterFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setCounterFrame(
+    counterNode: any,
+    padding: number,
+    startNS: number,
+    endNS: number,
+    totalNS: number,
+    frame: any
+  ) {
+    let sdkCounterStartPointX: number, sdkCountEndPointX: number;
 
-    if ((node.ts || 0) < startNS) {
-      startPointX = 0;
+    if ((counterNode.ts || 0) < startNS) {
+      sdkCounterStartPointX = 0;
     } else {
-      startPointX = ns2x(node.ts || 0, startNS, endNS, totalNS, frame);
+      sdkCounterStartPointX = ns2x(counterNode.ts || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.ts || 0) + (node.dur || 0) > endNS) {
-      endPointX = frame.width;
+    if ((counterNode.ts || 0) + (counterNode.dur || 0) > endNS) {
+      sdkCountEndPointX = frame.width;
     } else {
-      endPointX = ns2x((node.ts || 0) + (node.dur || 0), startNS, endNS, totalNS, frame);
+      sdkCountEndPointX = ns2x((counterNode.ts || 0) + (counterNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number =
+      sdkCountEndPointX - sdkCounterStartPointX <= 1 ? 1 : sdkCountEndPointX - sdkCounterStartPointX;
+    if (!counterNode.frame) {
+      counterNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    counterNode.frame.x = Math.floor(sdkCounterStartPointX);
+    counterNode.frame.y = frame.y + padding;
+    counterNode.frame.width = Math.ceil(frameWidth);
+    counterNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts b/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts
index fec22a0d98b2ae9456d1ef613f91fb8e796e7b52..5d0ac9926932c59654ce61df3734adaa4925a778 100644
--- a/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts
+++ b/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts
@@ -14,16 +14,16 @@
  */
 
 import {
-  BaseStruct,
   drawFlagLine,
   drawLines,
   drawLoading,
-  drawSelection,
   drawWakeUp,
-  isFrameContainPoint,
-  ns2x,
   Render,
   RequestMessage,
+  BaseStruct,
+  isFrameContainPoint,
+  ns2x,
+  drawSelection,
 } from './ProcedureWorkerCommon.js';
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 import { CounterStruct } from './ProduceWorkerSdkCounter.js';
@@ -39,13 +39,13 @@ export class SdkSliceRender extends Render {
     },
     row: TraceRow<SdkSliceStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let sdkList = row.dataList;
+    let sdkFilter = row.dataListCache;
     SdkSliceStruct.maxSdkSlice = req.maxValue;
     SdkSliceStruct.maxSdkSliceName = req.maxName;
     this.sdkSlice(
-      list,
-      filter,
+      sdkList,
+      sdkFilter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
       TraceRow.range?.totalNS ?? 0,
@@ -53,92 +53,113 @@ export class SdkSliceRender extends Render {
       req.useCache || (TraceRow.range?.refresh ?? false)
     );
     req.context.beginPath();
-    let find = false;
-    for (let re of filter) {
+    let sdkSliceFind = false;
+    for (let re of sdkFilter) {
       if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
         SdkSliceStruct.hoverSdkSliceStruct = re;
-        find = true;
+        sdkSliceFind = true;
       }
       SdkSliceStruct.draw(req.context, re);
     }
-    if (!find && row.isHover) SdkSliceStruct.hoverSdkSliceStruct = undefined;
+    if (!sdkSliceFind && row.isHover) SdkSliceStruct.hoverSdkSliceStruct = undefined;
     req.context.closePath();
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {
-    if (req.lazyRefresh) {
-      this.sdkSlice(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh);
+  render(sdkSliceRequest: RequestMessage, sdkList: Array<any>, filter: Array<any>) {
+    if (sdkSliceRequest.lazyRefresh) {
+      this.sdkSlice(
+        sdkList,
+        filter,
+        sdkSliceRequest.startNS,
+        sdkSliceRequest.endNS,
+        sdkSliceRequest.totalNS,
+        sdkSliceRequest.frame,
+        sdkSliceRequest.useCache || !sdkSliceRequest.range.refresh
+      );
     } else {
-      if (!req.useCache) {
-        this.sdkSlice(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false);
+      if (!sdkSliceRequest.useCache) {
+        this.sdkSlice(
+          sdkList,
+          filter,
+          sdkSliceRequest.startNS,
+          sdkSliceRequest.endNS,
+          sdkSliceRequest.totalNS,
+          sdkSliceRequest.frame,
+          false
+        );
       }
     }
-    if (req.canvas) {
-      req.context.clearRect(0, 0, req.canvas.width, req.canvas.height);
-      let arr = filter;
-      if (arr.length > 0 && !req.range.refresh && !req.useCache && req.lazyRefresh) {
+    if (sdkSliceRequest.canvas) {
+      sdkSliceRequest.context.clearRect(0, 0, sdkSliceRequest.canvas.width, sdkSliceRequest.canvas.height);
+      let sdkSliceArr = filter;
+      if (
+        sdkSliceArr.length > 0 &&
+        !sdkSliceRequest.range.refresh &&
+        !sdkSliceRequest.useCache &&
+        sdkSliceRequest.lazyRefresh
+      ) {
         drawLoading(
-          req.context,
-          req.startNS,
-          req.endNS,
-          req.totalNS,
-          req.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
+          sdkSliceRequest.context,
+          sdkSliceRequest.startNS,
+          sdkSliceRequest.endNS,
+          sdkSliceRequest.totalNS,
+          sdkSliceRequest.frame,
+          sdkSliceArr[0].startNS,
+          sdkSliceArr[sdkSliceArr.length - 1].startNS + sdkSliceArr[sdkSliceArr.length - 1].dur
         );
       }
-      req.context.beginPath();
-      SdkSliceStruct.maxSdkSlice = req.params.maxSdkSlice;
-      SdkSliceStruct.maxSdkSliceName = req.params.maxSdkSliceName;
-      drawLines(req.context, req.xs, req.frame.height, req.lineColor);
+      sdkSliceRequest.context.beginPath();
+      SdkSliceStruct.maxSdkSlice = sdkSliceRequest.params.maxSdkSlice;
+      SdkSliceStruct.maxSdkSliceName = sdkSliceRequest.params.maxSdkSliceName;
+      drawLines(sdkSliceRequest.context, sdkSliceRequest.xs, sdkSliceRequest.frame.height, sdkSliceRequest.lineColor);
       SdkSliceStruct.hoverSdkSliceStruct = undefined;
-      if (req.isHover) {
+      if (sdkSliceRequest.isHover) {
         for (let re of filter) {
           if (
             re.frame &&
-            req.hoverX >= re.frame.x &&
-            req.hoverX <= re.frame.x + re.frame.width &&
-            req.hoverY >= re.frame.y &&
-            req.hoverY <= re.frame.y + re.frame.height
+            sdkSliceRequest.hoverX >= re.frame.x &&
+            sdkSliceRequest.hoverX <= re.frame.x + re.frame.width &&
+            sdkSliceRequest.hoverY >= re.frame.y &&
+            sdkSliceRequest.hoverY <= re.frame.y + re.frame.height
           ) {
             SdkSliceStruct.hoverSdkSliceStruct = re;
             break;
           }
         }
       }
-      SdkSliceStruct.selectSdkSliceStruct = req.params.selectSdkSliceStruct;
+      SdkSliceStruct.selectSdkSliceStruct = sdkSliceRequest.params.selectSdkSliceStruct;
       for (let re of filter) {
-        SdkSliceStruct.draw(req.context, re);
+        SdkSliceStruct.draw(sdkSliceRequest.context, re);
       }
-      drawSelection(req.context, req.params);
-      req.context.closePath();
-      req.context.globalAlpha = 0.8;
-      req.context.fillStyle = '#f0f0f0';
-      req.context.globalAlpha = 1;
-      req.context.fillStyle = '#333';
-      req.context.textBaseline = 'middle';
+      drawSelection(sdkSliceRequest.context, sdkSliceRequest.params);
+      sdkSliceRequest.context.closePath();
+      sdkSliceRequest.context.globalAlpha = 0.8;
+      sdkSliceRequest.context.fillStyle = '#f0f0f0';
+      sdkSliceRequest.context.globalAlpha = 1;
+      sdkSliceRequest.context.fillStyle = '#333';
+      sdkSliceRequest.context.textBaseline = 'middle';
       drawFlagLine(
-        req.context,
-        req.flagMoveInfo,
-        req.flagSelectedInfo,
-        req.startNS,
-        req.endNS,
-        req.totalNS,
-        req.frame,
-        req.slicesTime
+        sdkSliceRequest.context,
+        sdkSliceRequest.flagMoveInfo,
+        sdkSliceRequest.flagSelectedInfo,
+        sdkSliceRequest.startNS,
+        sdkSliceRequest.endNS,
+        sdkSliceRequest.totalNS,
+        sdkSliceRequest.frame,
+        sdkSliceRequest.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: req.id,
-      type: req.type,
-      results: req.canvas ? undefined : filter,
+      id: sdkSliceRequest.id,
+      type: sdkSliceRequest.type,
+      results: sdkSliceRequest.canvas ? undefined : filter,
       hover: SdkSliceStruct.hoverSdkSliceStruct,
     });
   }
 
   sdkSlice(
-    list: Array<any>,
+    sdkList: Array<any>,
     res: Array<any>,
     startNS: number,
     endNS: number,
@@ -158,18 +179,18 @@ export class SdkSliceRender extends Render {
       return;
     }
     res.length = 0;
-    if (list) {
-      for (let index = 0; index < list.length; index++) {
-        let item = list[index];
+    if (sdkList) {
+      for (let index = 0; index < sdkList.length; index++) {
+        let item = sdkList[index];
         if (item.start_ts >= startNS && item.end_ts == 0) {
           item.end_ts = endNS;
         }
         if ((item.end_ts || 0) > (startNS || 0) && (item.start_ts || 0) < (endNS || 0)) {
-          SdkSliceStruct.setSdkSliceFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+          SdkSliceStruct.setSdkSliceFrame(sdkList[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
           if (
             index > 0 &&
-            (list[index - 1].frame?.x || 0) == (list[index].frame?.x || 0) &&
-            (list[index - 1].frame?.width || 0) == (list[index].frame?.width || 0)
+            (sdkList[index - 1].frame?.x || 0) == (sdkList[index].frame?.x || 0) &&
+            (sdkList[index - 1].frame?.width || 0) == (sdkList[index].frame?.width || 0)
           ) {
           } else {
             res.push(item);
@@ -218,26 +239,26 @@ export class SdkSliceStruct extends BaseStruct {
     }
   }
 
-  static setSdkSliceFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
-    let startPointX: number, endPointX: number;
+  static setSdkSliceFrame(SdkSliceNode: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) {
+    let sdkSliceStartPointX: number, sdkSliceEndPointX: number;
 
-    if ((node.start_ts || 0) < startNS) {
-      startPointX = 0;
+    if ((SdkSliceNode.start_ts || 0) < startNS) {
+      sdkSliceStartPointX = 0;
     } else {
-      startPointX = ns2x(node.start_ts || 0, startNS, endNS, totalNS, frame);
+      sdkSliceStartPointX = ns2x(SdkSliceNode.start_ts || 0, startNS, endNS, totalNS, frame);
     }
-    if ((node.end_ts || 0) > endNS) {
-      endPointX = frame.width;
+    if ((SdkSliceNode.end_ts || 0) > endNS) {
+      sdkSliceEndPointX = frame.width;
     } else {
-      endPointX = ns2x(node.end_ts || 0, startNS, endNS, totalNS, frame);
+      sdkSliceEndPointX = ns2x(SdkSliceNode.end_ts || 0, startNS, endNS, totalNS, frame);
     }
-    let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX;
-    if (!node.frame) {
-      node.frame = {};
+    let frameWidth: number = sdkSliceEndPointX - sdkSliceStartPointX <= 1 ? 1 : sdkSliceEndPointX - sdkSliceStartPointX;
+    if (!SdkSliceNode.frame) {
+      SdkSliceNode.frame = {};
     }
-    node.frame.x = Math.floor(startPointX);
-    node.frame.y = frame.y + padding;
-    node.frame.width = Math.ceil(frameWidth);
-    node.frame.height = Math.floor(frame.height - padding * 2);
+    SdkSliceNode.frame.x = Math.floor(sdkSliceStartPointX);
+    SdkSliceNode.frame.y = frame.y + padding;
+    SdkSliceNode.frame.width = Math.ceil(frameWidth);
+    SdkSliceNode.frame.height = Math.floor(frame.height - padding * 2);
   }
 }
diff --git a/trace_streamer/BUILD.gn b/trace_streamer/BUILD.gn
index 0f1ea928889a39a530c803056af9caf3855ae0f3..6297d87915cb658373d9ec4fbfd7eb8b309e0425 100644
--- a/trace_streamer/BUILD.gn
+++ b/trace_streamer/BUILD.gn
@@ -10,7 +10,7 @@
 # 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("src/ts.gni")
 group("trace_streamer") {
   if (is_test) {
     deps = [ "test:unittest" ]
@@ -19,7 +19,7 @@ group("trace_streamer") {
     deps = [ "test:fuzztest" ]
     testonly = true
   } else if (is_protoc) {
-    deps = [ "//third_party/protobuf:protoc" ]
+    deps = [ "${THIRD_PARTY}/protobuf:protoc" ]
   } else if (is_spb) {
     deps = [ "src/proto_reader/protoc_plugin:protoreader_plugin" ]
   } else if (is_sdkdemo) {
diff --git a/trace_streamer/doc/cloc.md b/trace_streamer/doc/cloc.md
new file mode 100644
index 0000000000000000000000000000000000000000..d26aedcf3469397652a4d0d570f2e08b77d939de
--- /dev/null
+++ b/trace_streamer/doc/cloc.md
@@ -0,0 +1,5 @@
+# 关于本目录下自研代码统计
+可以使用下面的命令命令统计本目录下的代码。  
+```
+cloc . --exclude-dir=protos,dubai_sdk,third_party,emsdk,prebuilts,out,tmp
+```
\ No newline at end of file
diff --git a/trace_streamer/doc/compiler_ut.md b/trace_streamer/doc/compiler_ut.md
index b971434b35677923e506e0ad03db7acbee0286f5..8f935e70207bf368b753fd5501c3eda7b4192aa4 100644
--- a/trace_streamer/doc/compiler_ut.md
+++ b/trace_streamer/doc/compiler_ut.md
@@ -11,9 +11,7 @@ v412.pb.h 大约第36行，添加如下内容：
 #undef minor
 #endif
 ```
-js_heap_result.pb.cc文件中schemas替换成resultSchemas。
-js_heap_result.pb.cc文件中file_default_instances替换成result_file_default_instances。
-gtest-port.h 第286行。
+
 ```
 #include <sstream>
 ```
diff --git a/trace_streamer/doc/symbol_file_import.md b/trace_streamer/doc/symbol_file_import.md
index bd441cf964a0c7f49d0b24cf0314f976cbfaa1d1..441dcde18466e1282515cc5c4dd12da33647c12a 100644
--- a/trace_streamer/doc/symbol_file_import.md
+++ b/trace_streamer/doc/symbol_file_import.md
@@ -2,7 +2,7 @@
 trace_streamer支持导入符号文件（so文件）来对各种调用栈中涉及的地址进行二次符号化。  
 由于抓取的trace文件中初始会携带程序所依赖的符号文件的全路径，因此，在做符号文件导入时，需按如下规则进行符号文件的识别和导入：  
 - 1 一个函数地址是否被符号化，不仅取决于其地址范围是否和符号文件的符号地址相匹配，还取决于其符号所在的符号文件全路径，是否和被导入文件的全路径一致；  
-- 2 对于Perf数据而言，额外检查了被导入文件的buildId，而ebpf和nativehook由于原始数据未携带buildId，对buildId不做检查。  
+- 2 对于Perf数据而言，额外检查了被导入文件的buildId，而ebpf和nativehook由于原始数据未携带buildId，对buildId不做检查。也就是说，对于perf来说，导入的so必须来自于抓取trace的同样系统版本，否则无效。  
 
 基于以上条件，在导入符号文件时，宜对被导入的文件还原其在设备中的原始目录结构，例如，文件目录结构可能如下所示：
 ```
diff --git a/trace_streamer/pare_third_party.sh b/trace_streamer/pare_third_party.sh
index eb237cd6fedfa6a3eff87ef4e023287aeca22317..6d1fb283761890e83b2f66eda3eb493a71575b75 100755
--- a/trace_streamer/pare_third_party.sh
+++ b/trace_streamer/pare_third_party.sh
@@ -16,7 +16,6 @@ patch='patch'
 sed='sed'
 cp='cp'
 rm='rm'
-
 case "$OSTYPE" in
   darwin*)  sed="gsed" ;;
 esac
diff --git a/trace_streamer/prebuilts/patch_hiperf/BUILD.gn b/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
index 496e27205fa62e4d81a7c1498c240438f767e789..78093882d10590c892d148bd1bc15025b8581d9a 100644
--- a/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
+++ b/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
@@ -57,19 +57,19 @@ ohos_source_set("hiperf_src") {
     "include/nonlinux/linux",
   ]
   include_dirs += [
-    "//third_party/perf_include/libbpf",
-    "//third_party/perf_include/musl",
-    "//third_party/libunwind/include",
-    "//third_party/libunwind/src",
-    "//third_party/libunwind/include/tdep-x86_64",
+    "${THIRD_PARTY}/perf_include/libbpf",
+    "${THIRD_PARTY}/perf_include/musl",
+    "${THIRD_PARTY}/libunwind/include",
+    "${THIRD_PARTY}/libunwind/src",
+    "${THIRD_PARTY}/libunwind/include/tdep-x86_64",
   ]
 }
 
 group("hiperf") {
   deps = [
     ":hiperf_src",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
   ]
   if (target != "test" && !is_openharmony) {
     deps += [ "//prebuilts/protos:ts_proto_data_cpp" ]
diff --git a/trace_streamer/prebuilts/protos/BUILD.gn b/trace_streamer/prebuilts/protos/BUILD.gn
index 2f12454ebccce8aba84042edfd30c85fbd756fc7..9c9c5a9d27aab77aaf7b0cf23b068e72149c426b 100755
--- a/trace_streamer/prebuilts/protos/BUILD.gn
+++ b/trace_streamer/prebuilts/protos/BUILD.gn
@@ -13,8 +13,8 @@
 
 import("//build/ohos.gni")
 import("../../src/ts.gni")
-OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR = "//third_party/protobuf"
-proto_dir = "//third_party/protogen"
+OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR = "${THIRD_PARTY}/protobuf"
+proto_dir = "${THIRD_PARTY}/protogen"
 services_dir = "$proto_dir/services"
 ftrace_data_dir = "$proto_dir/types/plugins/ftrace_data/${kernel_version}"
 memory_data_dir = "$proto_dir/types/plugins/memory_data"
diff --git a/trace_streamer/sdk/demo_sdk/BUILD.gn b/trace_streamer/sdk/demo_sdk/BUILD.gn
index 9100051f2184d2f5a0c642b4a911660a99f58b7b..35fdba9f8bab4c15c524dd04d78eace62bfec39b 100755
--- a/trace_streamer/sdk/demo_sdk/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/BUILD.gn
@@ -32,9 +32,9 @@ ohos_source_set("lib") {
   sources = [ "main.cpp" ]
   deps = [
     ":trace_streamer_sdk",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
     "protos:ts_proto_data_cpp",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
   ]
   include_dirs = [
     "base",
@@ -49,10 +49,10 @@ ohos_source_set("lib") {
     "./",
     "parser",
     "cfg",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/mock_data",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
   if (with_perf) {
     include_dirs += []
@@ -118,17 +118,17 @@ ohos_source_set("trace_streamer_sdk") {
     "./",
     "parser",
     "cfg",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}",
     "${OHOS_PROTO_GEN}/types/plugins/mock_data",
-    "//third_party/protobuf/src",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
   ]
   if (!use_wasm) {
     include_dirs += [
-      "//third_party/libunwind/include",
-      "//third_party/libunwind/src",
+      "${THIRD_PARTY}/libunwind/include",
+      "${THIRD_PARTY}/libunwind/src",
     ]
   }
   if (with_perf) {
@@ -136,12 +136,12 @@ ohos_source_set("trace_streamer_sdk") {
     include_dirs += []
   }
   deps = [
+    "${THIRD_PARTY}/sqlite:sqlite",
     "base:base",
     "ext:sqliteext",
     "include:ibase",
     "plugin:sdk_plugin",
     "protos:ts_proto_data_cpp",
-    "//third_party/sqlite:sqlite",
   ]
   if (with_perf) {
   }
diff --git a/trace_streamer/sdk/demo_sdk/ext/BUILD.gn b/trace_streamer/sdk/demo_sdk/ext/BUILD.gn
index a2212ebeb58dd199eb0c456701a8925f95e277c4..e77bc9765b0d979f0fcaa2a63053a45eaa3efce2 100755
--- a/trace_streamer/sdk/demo_sdk/ext/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/ext/BUILD.gn
@@ -14,7 +14,7 @@
 import("//build/ohos.gni")
 config("sqlite_config") {
   include_dirs = [
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "../include",
   ]
   cflags = [ "-Wno-writable-strings" ]
diff --git a/trace_streamer/sdk/demo_sdk/filter/clock_filter.h b/trace_streamer/sdk/demo_sdk/filter/clock_filter.h
index df2b0a5026430572a9dd4542faa403a4bf5f9482..73ea3f2fe3974565c4f4fc76fab10e8363e50808 100644
--- a/trace_streamer/sdk/demo_sdk/filter/clock_filter.h
+++ b/trace_streamer/sdk/demo_sdk/filter/clock_filter.h
@@ -58,7 +58,7 @@ public:
     {
         primaryClock_ = primary;
     }
-    ClockId GetPrimaryClock()
+    ClockId GetPrimaryClock() const
     {
         return primaryClock_;
     }
diff --git a/trace_streamer/sdk/demo_sdk/plugin/BUILD.gn b/trace_streamer/sdk/demo_sdk/plugin/BUILD.gn
index 41e5b6834248509d711c75c0df0bb2de959ba532..3c1bb03d120684794fe8739a5d313d2c38fbace8 100644
--- a/trace_streamer/sdk/demo_sdk/plugin/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/plugin/BUILD.gn
@@ -12,7 +12,7 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-OHOS_PROTO_GEN = "//third_party/protogen"
+OHOS_PROTO_GEN = "${THIRD_PARTY}/protogen"
 ohos_source_set("sdk_plugin") {
   subsystem_name = "trace_streamer"
   part_name = "sdk_sdk_plugin"
@@ -27,9 +27,9 @@ ohos_source_set("sdk_plugin") {
     "../filter",
     "../trace_data",
     "../base",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/mock_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   public_deps = []
diff --git a/trace_streamer/sdk/demo_sdk/protos/BUILD.gn b/trace_streamer/sdk/demo_sdk/protos/BUILD.gn
index 0916cd9b338379bc7a3a56b1ce6e8164b66c958f..dc99863f79dd47d78bc86f86a0ea4eb1b6e3f481 100644
--- a/trace_streamer/sdk/demo_sdk/protos/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/protos/BUILD.gn
@@ -12,8 +12,8 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR = "//third_party/protobuf"
-proto_dir = "//third_party/protogen"
+OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR = "${THIRD_PARTY}/protobuf"
+proto_dir = "${THIRD_PARTY}/protogen"
 mock_dir = "$proto_dir/types/plugins/mock_data"
 config("ts_proto_include_config") {
   include_dirs = []
diff --git a/trace_streamer/sdk/demo_sdk/test/BUILD.gn b/trace_streamer/sdk/demo_sdk/test/BUILD.gn
index 4b84cf161ea209c830e14d1f99ef5045859cfe0c..f15fdc2848f5844a3a8b3153c177a555652834f5 100755
--- a/trace_streamer/sdk/demo_sdk/test/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/test/BUILD.gn
@@ -19,13 +19,13 @@ if (target == "sdkdemotest") {
   ohos_unittest("trace_streamer_sdk_ut") {
     sources = [ "unittest/sdk_api_test.cpp" ]
     deps = [
+      "${PREBUILTS}/protos:ts_proto_data_cpp",
+      "${THIRD_PARTY}/googletest:gtest",
+      "${THIRD_PARTY}/googletest:gtest_main",
+      "${THIRD_PARTY}/protobuf:protobuf",
+      "${THIRD_PARTY}/protobuf:protobuf_lite",
+      "${THIRD_PARTY}/sqlite:sqlite",
       "../:trace_streamer_sdk",
-      "//prebuilts/protos:ts_proto_data_cpp",
-      "//third_party/googletest:gtest",
-      "//third_party/googletest:gtest_main",
-      "//third_party/protobuf:protobuf",
-      "//third_party/protobuf:protobuf_lite",
-      "//third_party/sqlite:sqlite",
     ]
     include_dirs = [
       "../base",
@@ -41,14 +41,14 @@ if (target == "sdkdemotest") {
       "./",
       "../parser",
       "../cfg",
-      "//prebuilts/emsdk/emsdk/emscripten/system/include",
-      "//third_party/sqlite/include",
+      "${PREBUILTS}/emsdk/emsdk/emscripten/system/include",
+      "${THIRD_PARTY}/sqlite/include",
       "${OHOS_PROTO_GEN}",
       "${OHOS_PROTO_GEN}/types/plugins/mock_data",
-      "//third_party/googletest/googletest/include/gtest",
-      "//third_party/protobuf/src",
-      "//third_party/json-master/include",
-      "//third_party/json-master/include/nlohmann",
+      "${THIRD_PARTY}/googletest/googletest/include/gtest",
+      "${THIRD_PARTY}/protobuf/src",
+      "${THIRD_PARTY}/json-master/include",
+      "${THIRD_PARTY}/json-master/include/nlohmann",
     ]
     cflags = [
       "-Wno-inconsistent-missing-override",
diff --git a/trace_streamer/sdk/dubai_sdk/BUILD.gn b/trace_streamer/sdk/dubai_sdk/BUILD.gn
index 965ce97e682a472e9fea2903ef970b6635b7fa73..fd57b470a440fb71f1d1a574ec9b324ef4e6bb9f 100755
--- a/trace_streamer/sdk/dubai_sdk/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/BUILD.gn
@@ -33,8 +33,8 @@ ohos_source_set("lib") {
   deps = [
     ":trace_streamer_sdk",
     "protos:ts_proto_data_cpp",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
   ]
   include_dirs = [
     "base",
@@ -49,10 +49,10 @@ ohos_source_set("lib") {
     "./",
     "parser",
     "cfg",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/mock_data",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
   if (with_perf) {
     include_dirs += []
@@ -116,17 +116,17 @@ source_set("trace_streamer_sdk") {
     "./",
     "parser",
     "cfg",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}",
     "${OHOS_PROTO_GEN}/types/plugins/mock_data",
-    "//third_party/protobuf/src",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
   ]
   if (!use_wasm) {
     include_dirs += [
-      "//third_party/libunwind/include",
-      "//third_party/libunwind/src",
+      "${THIRD_PARTY}/libunwind/include",
+      "${THIRD_PARTY}/libunwind/src",
     ]
   }
   if (with_perf) {
@@ -139,7 +139,7 @@ source_set("trace_streamer_sdk") {
     "include:ibase",
     "plugin:sdk_plugin",
     "protos:ts_proto_data_cpp",
-    "//third_party/sqlite:sqlite",
+    "${THIRD_PARTY}/sqlite:sqlite",
   ]
   if (with_perf) {
   }
diff --git a/trace_streamer/sdk/dubai_sdk/ext/BUILD.gn b/trace_streamer/sdk/dubai_sdk/ext/BUILD.gn
index a2212ebeb58dd199eb0c456701a8925f95e277c4..e77bc9765b0d979f0fcaa2a63053a45eaa3efce2 100755
--- a/trace_streamer/sdk/dubai_sdk/ext/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/ext/BUILD.gn
@@ -14,7 +14,7 @@
 import("//build/ohos.gni")
 config("sqlite_config") {
   include_dirs = [
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "../include",
   ]
   cflags = [ "-Wno-writable-strings" ]
diff --git a/trace_streamer/sdk/dubai_sdk/plugin/BUILD.gn b/trace_streamer/sdk/dubai_sdk/plugin/BUILD.gn
index 415be52063943441ddbd8bb38b4593cfecc4241c..5c7a5dc45107e7b48dbc49bad4c600021f231c0b 100755
--- a/trace_streamer/sdk/dubai_sdk/plugin/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/plugin/BUILD.gn
@@ -12,7 +12,7 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-OHOS_PROTO_GEN = "//third_party/protogen"
+OHOS_PROTO_GEN = "${THIRD_PARTY}/protogen"
 ohos_source_set("sdk_plugin") {
   subsystem_name = "trace_streamer"
   part_name = "sdk_plugin"
@@ -27,9 +27,9 @@ ohos_source_set("sdk_plugin") {
     "../filter",
     "../trace_data",
     "../base",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/mock_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   public_deps = []
diff --git a/trace_streamer/sdk/dubai_sdk/protos/BUILD.gn b/trace_streamer/sdk/dubai_sdk/protos/BUILD.gn
index 0916cd9b338379bc7a3a56b1ce6e8164b66c958f..dc99863f79dd47d78bc86f86a0ea4eb1b6e3f481 100755
--- a/trace_streamer/sdk/dubai_sdk/protos/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/protos/BUILD.gn
@@ -12,8 +12,8 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR = "//third_party/protobuf"
-proto_dir = "//third_party/protogen"
+OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR = "${THIRD_PARTY}/protobuf"
+proto_dir = "${THIRD_PARTY}/protogen"
 mock_dir = "$proto_dir/types/plugins/mock_data"
 config("ts_proto_include_config") {
   include_dirs = []
diff --git a/trace_streamer/sdk/dubai_sdk/test/BUILD.gn b/trace_streamer/sdk/dubai_sdk/test/BUILD.gn
index cdf2e8732ec8aa61d1e58f3df8735d621c3487f5..000f498b7c21cf9facd773b7640a6ca5b5be3466 100755
--- a/trace_streamer/sdk/dubai_sdk/test/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/test/BUILD.gn
@@ -20,12 +20,12 @@ if (target == "sdkdemotest") {
     sources = [ "unittest/sdk_api_test.cpp" ]
     deps = [
       "../:trace_streamer_sdk",
-      "//prebuilts/protos:ts_proto_data_cpp",
-      "//third_party/googletest:gtest",
-      "//third_party/googletest:gtest_main",
-      "//third_party/protobuf:protobuf",
-      "//third_party/protobuf:protobuf_lite",
-      "//third_party/sqlite:sqlite",
+      "${PREBUILTS}/protos:ts_proto_data_cpp",
+      "${THIRD_PARTY}/googletest:gtest",
+      "${THIRD_PARTY}/googletest:gtest_main",
+      "${THIRD_PARTY}/protobuf:protobuf",
+      "${THIRD_PARTY}/protobuf:protobuf_lite",
+      "${THIRD_PARTY}/sqlite:sqlite",
     ]
     include_dirs = [
       "../base",
@@ -41,14 +41,14 @@ if (target == "sdkdemotest") {
       "./",
       "../parser",
       "../cfg",
-      "//prebuilts/emsdk/emsdk/emscripten/system/include",
-      "//third_party/sqlite/include",
+      "${PREBUILTS}/emsdk/emsdk/emscripten/system/include",
+      "${THIRD_PARTY}/sqlite/include",
       "${OHOS_PROTO_GEN}",
       "${OHOS_PROTO_GEN}/types/plugins/mock_data",
-      "//third_party/googletest/googletest/include/gtest",
-      "//third_party/protobuf/src",
-      "//third_party/json-master/include",
-      "//third_party/json-master/include/nlohmann",
+      "${THIRD_PARTY}/googletest/googletest/include/gtest",
+      "${THIRD_PARTY}/protobuf/src",
+      "${THIRD_PARTY}/json-master/include",
+      "${THIRD_PARTY}/json-master/include/nlohmann",
     ]
     cflags = [
       "-Wno-inconsistent-missing-override",
diff --git a/trace_streamer/sdk/dubai_sdk/trace_data/trace_stdtype.h b/trace_streamer/sdk/dubai_sdk/trace_data/trace_stdtype.h
index 86fb1bbf25d786aa5a4fb704989b33e6af0dc55f..1b124c8c72509dc5011d248616f99f20e736b73e 100644
--- a/trace_streamer/sdk/dubai_sdk/trace_data/trace_stdtype.h
+++ b/trace_streamer/sdk/dubai_sdk/trace_data/trace_stdtype.h
@@ -134,7 +134,7 @@ public:
     void SetParserToolPublishDateTime(const std::string& datetime);
     const std::string& Value(uint64_t row) const;
     const std::string& Name(uint64_t row) const;
-    virtual void Clear() override
+    void Clear() override
     {
         columnNames_.clear();
         values_.clear();
diff --git a/trace_streamer/src/BUILD.gn b/trace_streamer/src/BUILD.gn
index 1549f1abcf81e7c20b615b63884f3108bbf3d7f1..665e02cebc37ac78a0cf747393980b758bef55c7 100644
--- a/trace_streamer/src/BUILD.gn
+++ b/trace_streamer/src/BUILD.gn
@@ -11,7 +11,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../build/ohos.gni")
 import("ts.gni")
 if (use_wasm) {
   import("//gn/wasm.gni")
@@ -47,9 +47,9 @@ ohos_source_set("lib") {
     "parser",
     "cfg",
     "proto_reader/include",
-    "//third_party/sqlite/include",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/sqlite/include",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
     "${OHOS_PROTO_GEN}/types/plugins/ftrace_data/${kernel_version}",
     "${OHOS_PROTO_GEN}/types/plugins/hilog_data",
@@ -62,8 +62,8 @@ ohos_source_set("lib") {
     "${OHOS_PROTO_GEN}/types/plugins/hisysevent_data",
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
-    "//third_party/hiperf/include",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/hiperf/include",
   ]
   if (!is_pbdecoder) {
     include_dirs += [
@@ -81,10 +81,10 @@ ohos_source_set("lib") {
   if (with_perf) {
     include_dirs += [
       "parser/hiperf_parser",
-      "//third_party/hiperf/include",
-      "//third_party/hiperf/include/nonlinux",
-      "//third_party/hiperf/include/nonlinux/linux",
-      "//third_party/perf_include/musl",
+      "${THIRD_PARTY}/hiperf/include",
+      "${THIRD_PARTY}/hiperf/include/nonlinux",
+      "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+      "${THIRD_PARTY}/perf_include/musl",
     ]
   }
   public_deps = []
@@ -117,7 +117,7 @@ ohos_source_set("trace_streamer_source") {
     "cfg",
     "proto_reader/include",
     "parser/ebpf_parser",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
     "${OHOS_PROTO_GEN}/types/plugins/ftrace_data/${kernel_version}",
     "${OHOS_PROTO_GEN}/types/plugins/hilog_data",
@@ -130,7 +130,7 @@ ohos_source_set("trace_streamer_source") {
     "${OHOS_PROTO_GEN}/types/plugins/hisysevent_data",
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
   if (use_wasm) {
     include_dirs +=
@@ -156,23 +156,24 @@ ohos_source_set("trace_streamer_source") {
     ]
   }
   include_dirs += [
-    "//third_party/libunwind/include",
-    "//third_party/libunwind/src",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/libunwind/include",
+    "${THIRD_PARTY}/libunwind/src",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
   ]
 
   if (with_perf) {
     include_dirs += [
       "parser/hiperf_parser",
-      "//third_party/hiperf/include",
-      "//third_party/hiperf/include/nonlinux",
-      "//third_party/hiperf/include/nonlinux/linux",
-      "//third_party/perf_include/libbpf",
-      "//third_party/perf_include/musl",
+      "${THIRD_PARTY}/hiperf/include",
+      "${THIRD_PARTY}/hiperf/include/nonlinux",
+      "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+      "${THIRD_PARTY}/perf_include/libbpf",
+      "${THIRD_PARTY}/perf_include/musl",
     ]
   }
   deps = [
+    "${THIRD_PARTY}/sqlite:sqlite",
     "base:base",
     "ext:sqliteext",
     "filter:filter",
@@ -180,7 +181,6 @@ ohos_source_set("trace_streamer_source") {
     "parser:parser",
     "table:table",
     "trace_data:trace_data",
-    "//third_party/sqlite:sqlite",
   ]
   if (with_perf) {
     deps += [ "parser/hiperf_parser:hiperf_parser" ]
diff --git a/trace_streamer/src/base/string_help.cpp b/trace_streamer/src/base/string_help.cpp
index 07f83c3e425ac9b92a9b7af86cd6747439b7c46d..7bfdfa72b3e783307645a0a99249ecd6d300f52f 100644
--- a/trace_streamer/src/base/string_help.cpp
+++ b/trace_streamer/src/base/string_help.cpp
@@ -86,11 +86,11 @@ const char* GetDemangleSymbolIndex(const char* mangled)
         return demangle;
     }
 }
-int GetProcessorNumFromString(char *str)
+int GetProcessorNumFromString(char* str)
 {
     int processorNum = 0;
     int lastNum = -1;
-    char *s = str;
+    char* s = str;
     while (*s != '\0') {
         if (isdigit(*s)) {
             int currentNum = strtol(s, &s, 10);
diff --git a/trace_streamer/src/base/string_help.h b/trace_streamer/src/base/string_help.h
index 75ac88638858ef7ee8bdd553e442597ab8189954..0f5f0cef140c27be6c1a10175b9ef5847866d151 100644
--- a/trace_streamer/src/base/string_help.h
+++ b/trace_streamer/src/base/string_help.h
@@ -27,5 +27,5 @@ int32_t sprintf_s(char* strDest, size_t destMax, const char* format, ...);
 void* memset_s(void* dest, size_t destSize, int32_t ch, size_t n);
 int32_t snprintf_s(char* strDest, size_t destMax, size_t count, const char* format, ...);
 const char* GetDemangleSymbolIndex(const char* mangled);
-int GetProcessorNumFromString(char *str);
+int GetProcessorNumFromString(char* str);
 #endif // SRC_TRACE_BASE_STRINGHELP_H
diff --git a/trace_streamer/src/cfg/trace_streamer_config.cpp b/trace_streamer/src/cfg/trace_streamer_config.cpp
index 9931296ad6555691898056c8062bec52ffe78e7f..5c6608740388df0df94782f968ef5b0e671ed04b 100644
--- a/trace_streamer/src/cfg/trace_streamer_config.cpp
+++ b/trace_streamer/src/cfg/trace_streamer_config.cpp
@@ -90,11 +90,6 @@ void TraceStreamerConfig::PrintInfo() const
     printf("\n");
 }
 
-uint32_t TraceStreamerConfig::GetStateValue(uint32_t state) const
-{
-    return (state > CPU_IDEL_INVALID_VALUE ? 0 : (state + 1));
-}
-
 void TraceStreamerConfig::InitEventNameMap()
 {
     eventNameMap_ = {{TRACE_EVENT_BINDER_TRANSACTION, TRACE_ACTION_BINDER_TRANSACTION},
diff --git a/trace_streamer/src/cfg/trace_streamer_config.h b/trace_streamer/src/cfg/trace_streamer_config.h
index f9bca25a4d186a7bf77368023b1d11d2e5bcde8d..63fe44b2c3bac5358e5f946e6b102007b1688864 100644
--- a/trace_streamer/src/cfg/trace_streamer_config.h
+++ b/trace_streamer/src/cfg/trace_streamer_config.h
@@ -165,7 +165,10 @@ public:
     TraceStreamerConfig();
     ~TraceStreamerConfig() = default;
     void PrintInfo() const;
-    uint32_t GetStateValue(uint32_t state) const;
+    static uint32_t GetStateValue(uint32_t state)
+    {
+        return (state > CPU_IDEL_INVALID_VALUE ? 0 : (state + 1));
+    }
 
 public:
     std::map<SupportedTraceEventType, std::string> eventNameMap_ = {};
diff --git a/trace_streamer/src/ext/sqlite_ext_funcs.cpp b/trace_streamer/src/ext/sqlite_ext_funcs.cpp
index 9c35955063fa48b30ce0dfd026887a0660e7b3b8..b337f38075e1ce78637a12bcee9b49f55acef6ef 100644
--- a/trace_streamer/src/ext/sqlite_ext_funcs.cpp
+++ b/trace_streamer/src/ext/sqlite_ext_funcs.cpp
@@ -38,15 +38,12 @@ static void sqliteExtStdevFinalize(sqlite3_context* context)
 */
 static void sqliteExtStdevNextStep(sqlite3_context* context, int32_t argc, sqlite3_value** argv)
 {
-    double deltaValue;
-    double x;
-
     TS_ASSERT(argc == 1);
     StdevCtx* ptr = static_cast<StdevCtx*>(sqlite3_aggregate_context(context, sizeof(StdevCtx)));
     if (SQLITE_NULL != sqlite3_value_numeric_type(argv[0])) {
         ptr->cntValue++;
-        x = sqlite3_value_double(argv[0]);
-        deltaValue = (x - ptr->rMValue);
+        double x = sqlite3_value_double(argv[0]);
+        double deltaValue = (x - ptr->rMValue);
         ptr->rMValue += deltaValue / ptr->cntValue;
         ptr->rSValue += deltaValue * (x - ptr->rMValue);
     }
@@ -199,7 +196,7 @@ public:
     {
         body_.pop_back();
     }
-    const std::string& Body()
+    const std::string& Body() const
     {
         return body_;
     }
diff --git a/trace_streamer/src/filter/BUILD.gn b/trace_streamer/src/filter/BUILD.gn
index 63a7177b8bf594f1ccd56a2655ccd22fd57a82dc..c45a7c8f152663acd96a914209851bb367a39638 100644
--- a/trace_streamer/src/filter/BUILD.gn
+++ b/trace_streamer/src/filter/BUILD.gn
@@ -11,8 +11,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
-import("//src/ts.gni")
+import("../../build/ohos.gni")
+import("../ts.gni")
 
 ohos_source_set("filter") {
   subsystem_name = "trace_streamer"
@@ -64,16 +64,16 @@ ohos_source_set("filter") {
   }
   deps = []
   include_dirs = [
-    "//src/base",
-    "//src/trace_streamer",
-    "//src/trace_data",
-    "//src/include",
-    "//src/filter",
-    "//src/cfg",
+    "${SRC}/base",
+    "${SRC}/trace_streamer",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}/filter",
+    "${SRC}/cfg",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//src",
-    "//third_party/protobuf/src",
-    "//third_party/sqlite/include",
+    "${SRC}",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/sqlite/include",
     ".",
   ]
 
@@ -87,7 +87,7 @@ ohos_source_set("filter") {
     include_dirs += [
       "../proto_reader/include",
       "${OHOS_PROTO_GEN}/types/plugins/native_hook",
-      "//third_party/perf_include/musl",
+      "${THIRD_PARTY}/perf_include/musl",
     ]
   }
 
diff --git a/trace_streamer/src/filter/binder_filter.h b/trace_streamer/src/filter/binder_filter.h
index e475cc78f5c6288b3fcd89b9d0d8f831e76dae24..d50d391df3f356877ba5a9022c579eea0fbbf3f5 100644
--- a/trace_streamer/src/filter/binder_filter.h
+++ b/trace_streamer/src/filter/binder_filter.h
@@ -49,7 +49,7 @@ public:
 
 private:
     std::string GetBinderFlagsDesc(uint32_t flag);
-    bool IsValidUint32(uint32_t value) const
+    static bool IsValidUint32(uint32_t value)
     {
         return (value != INVALID_UINT32);
     }
diff --git a/trace_streamer/src/filter/process_filter.cpp b/trace_streamer/src/filter/process_filter.cpp
index 33ce2cf2bd148c60a749c9fee021ff6467f9463f..934605b23609a96756c2da75160924b27d05bcf6 100644
--- a/trace_streamer/src/filter/process_filter.cpp
+++ b/trace_streamer/src/filter/process_filter.cpp
@@ -130,6 +130,9 @@ uint32_t ProcessFilter::UpdateOrCreateThreadWithNameIndex(uint64_t timeStamp, ui
         }
     } else {
         std::tie(internalTid, thread) = NewThread(tid);
+        if (!thread) {
+            return INVALID_ID;
+        }
         if (threadNameIndex != thread->nameIndex_) {
             thread->nameIndex_ = threadNameIndex;
         }
diff --git a/trace_streamer/src/parser/BUILD.gn b/trace_streamer/src/parser/BUILD.gn
index 43a2477d7d3e1afaeebb08c02a021bd2512f559b..9029c49ec7e7d45243bf667cecdfa780b0597ce1 100644
--- a/trace_streamer/src/parser/BUILD.gn
+++ b/trace_streamer/src/parser/BUILD.gn
@@ -12,7 +12,7 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-import("//src/ts.gni")
+import("../ts.gni")
 
 ohos_source_set("parser") {
   subsystem_name = "trace_streamer"
@@ -37,7 +37,7 @@ ohos_source_set("parser") {
     deps += [ "htrace_pbreader_parser:htrace_pbreader_parser" ]
   }
   include_dirs = [
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
     "${OHOS_PROTO_GEN}/types/plugins/ftrace_data/${kernel_version}",
     "${OHOS_PROTO_GEN}/types/plugins/hilog_data",
@@ -51,17 +51,17 @@ ohos_source_set("parser") {
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
     "${OHOS_PROTO_GEN}/types/plugins/",
     "${OHOS_PROTO_GEN}",
-    "//third_party/sqlite/include",
-    "//src/base",
-    "//src/cfg",
-    "//src/trace_streamer",
-    "//src/trace_data",
-    "//src/include",
-    "//src/filter",
-    "//src",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
+    "${SRC}/cfg",
+    "${SRC}/trace_streamer",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}/filter",
+    "${SRC}",
     ".",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
   ]
   if (is_pbdecoder) {
     include_dirs += [ "htrace_parser" ]
diff --git a/trace_streamer/src/parser/ebpf_parser/BUILD.gn b/trace_streamer/src/parser/ebpf_parser/BUILD.gn
index e8284fe9f265b0c5c0d76b0f455c41bb24812e52..6d19ea76998075ca283e7cc3c6ca4bd17b007099 100644
--- a/trace_streamer/src/parser/ebpf_parser/BUILD.gn
+++ b/trace_streamer/src/parser/ebpf_parser/BUILD.gn
@@ -54,13 +54,13 @@ ohos_source_set("ebpf_parser_src") {
     "${OHOS_PROTO_GEN}/types/plugins/process_data",
     "${OHOS_PROTO_GEN}/types/plugins/hisysevent_data",
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
-    "//third_party/protobuf/src",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/sqlite/include",
   ]
   if (is_win || is_macx) {
     include_dirs += [
-      "//third_party/perf_include/linux",
-      "//third_party/perf_include/musl",
+      "${THIRD_PARTY}/perf_include/linux",
+      "${THIRD_PARTY}/perf_include/musl",
     ]
   }
 
@@ -83,7 +83,7 @@ ohos_source_set("ebpf_parser_src") {
 group("ebpf_parser") {
   deps = [
     ":ebpf_parser_src",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
   ]
 }
diff --git a/trace_streamer/src/parser/ebpf_parser/bio_latency_data_parser.cpp b/trace_streamer/src/parser/ebpf_parser/bio_latency_data_parser.cpp
index ac7dd1e37a34be33faaa4d245ce226cd083d0e40..94e027818e43d6a6d0f59d00596841bf6d50549e 100644
--- a/trace_streamer/src/parser/ebpf_parser/bio_latency_data_parser.cpp
+++ b/trace_streamer/src/parser/ebpf_parser/bio_latency_data_parser.cpp
@@ -80,7 +80,7 @@ void BioLatencyDataParser::ParseBioLatencyEvent()
         auto size = bioFixedHeadrAddr->size;
         const int32_t FOUR_KB = 1024 * 4;
         uint32_t durPer4K = INVALID_UINT32;
-        if (size > 0) {
+        if (size) {
             durPer4K = duration / (size / FOUR_KB);
         }
 
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.cpp b/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.cpp
index ca33adec6a126a43dca48b7f32b0ac10b3c520d6..42e5d6ba1e8e681ad0700659f20aa5a149172e15 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.cpp
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.cpp
@@ -23,7 +23,7 @@ EbpfDataParser::EbpfDataParser(TraceDataCache* dataCache, const TraceStreamerFil
       FileSystemDataParser(dataCache, ctx),
       PagedMemoryDataParser(dataCache, ctx),
       BioLatencyDataParser(dataCache, ctx),
-      reader_(std::make_unique<EbpfDataReader>(dataCache, ctx))
+      ebpfDataReader_(std::make_unique<EbpfDataReader>(dataCache, ctx))
 {
 }
 EbpfDataParser::~EbpfDataParser()
@@ -35,12 +35,12 @@ EbpfDataParser::~EbpfDataParser()
 bool EbpfDataParser::Init(const std::deque<uint8_t> dequeBuffer, uint64_t size)
 {
     streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_EBPF, STAT_EVENT_RECEIVED);
-    if (!reader_->InitEbpfData(dequeBuffer, size)) {
+    if (!ebpfDataReader_->InitEbpfData(dequeBuffer, size)) {
         streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_EBPF, STAT_EVENT_NOTSUPPORTED);
         TS_LOGE("InitEbpfData failed!");
         return false;
     }
-    if (!InitEbpfDataParser(reader_.get())) {
+    if (!InitEbpfDataParser(ebpfDataReader_.get())) {
         streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_EBPF, STAT_EVENT_NOTSUPPORTED);
         return false;
     }
@@ -52,13 +52,13 @@ void EbpfDataParser::InitAndParseEbpfData(const std::deque<uint8_t>& dequeBuffer
     if (!Init(dequeBuffer, size)) {
         return;
     }
-    if (reader_->GetFileSystemEventMap().size()) {
+    if (ebpfDataReader_->GetFileSystemEventMap().size()) {
         ParseFileSystemEvent();
     }
-    if (reader_->GetPagedMemoryMap().size()) {
+    if (ebpfDataReader_->GetPagedMemoryMap().size()) {
         ParsePagedMemoryEvent();
     }
-    if (reader_->GetBIOSampleMap().size()) {
+    if (ebpfDataReader_->GetBIOSampleMap().size()) {
         ParseBioLatencyEvent();
     }
 }
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 0143f4b5c0d3cf12a8c051fac28524b5911c795f..d03d3c223e496ae94cf71aba9258cb375a5ca6fc 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.h
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_data_parser.h
@@ -32,12 +32,12 @@ public:
     void Finish();
     bool SupportImportSymbolTable()
     {
-        return reader_ ? true : false;
+        return ebpfDataReader_ ? true : false;
     }
 
 private:
     bool Init(const std::deque<uint8_t> dequeBuffer, uint64_t size);
-    std::unique_ptr<EbpfDataReader> reader_;
+    std::unique_ptr<EbpfDataReader> ebpfDataReader_;
     uint64_t ebpfAllEventStartTime_ = std::numeric_limits<uint64_t>::max();
     uint64_t ebpfAllEventEndTime_ = 0;
 };
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_stdtype.h b/trace_streamer/src/parser/ebpf_parser/ebpf_stdtype.h
index fd80bb6fa6ed18c6333be38bceaafec51bdc261f..2913e25aaf1900048fd3034fd606b8d701248210 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_stdtype.h
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_stdtype.h
@@ -166,7 +166,7 @@ const std::map<uint32_t, uint32_t> ebpfToTSClockType_ = {
 
 struct SymbolAndFilePathIndex {
     SymbolAndFilePathIndex() {}
-    SymbolAndFilePathIndex(bool invalidValue) : flag(invalidValue) {}
+    explicit SymbolAndFilePathIndex(bool invalidValue) : flag(invalidValue) {}
     bool flag = false;
     DataIndex symbolIndex = INVALID_UINT64;
     DataIndex filePathIndex = INVALID_UINT64;
diff --git a/trace_streamer/src/parser/hiperf_parser/BUILD.gn b/trace_streamer/src/parser/hiperf_parser/BUILD.gn
index 1bafb365cb695529a3d312c106a1a394cfa1aa02..0388d6f7f4e5f4d1860793e5d2968aa5df6ca5c4 100644
--- a/trace_streamer/src/parser/hiperf_parser/BUILD.gn
+++ b/trace_streamer/src/parser/hiperf_parser/BUILD.gn
@@ -18,12 +18,12 @@ ohos_source_set("hiperf_parser_src") {
   part_name = "hiperf_parser_src"
   sources = [ "perf_data_parser.cpp" ]
   include_dirs = [
-    "//third_party/hiperf/include/nonlinux/linux",
+    "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
     ".",
     "../../base",
     "../../cfg",
-    "//third_party/hiperf/include/nonlinux",
-    "//third_party/hiperf/include",
+    "${THIRD_PARTY}/hiperf/include/nonlinux",
+    "${THIRD_PARTY}/hiperf/include",
     "../../include",
     "../../",
     "../../filter",
@@ -31,13 +31,13 @@ ohos_source_set("hiperf_parser_src") {
     "..",
     "../htrace_parser",
     "../../trace_streamer",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
-    "//third_party/perf_include",
-    "//third_party/perf_include/libbpf",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/perf_include",
+    "${THIRD_PARTY}/perf_include/libbpf",
   ]
-  include_dirs += [ "//third_party/libunwind/include" ]
+  include_dirs += [ "${THIRD_PARTY}/libunwind/include" ]
 
   if (enable_ts_utest && !use_wasm) {
     cflags = [
@@ -58,11 +58,11 @@ ohos_source_set("hiperf_parser_src") {
 group("hiperf_parser") {
   deps = [
     ":hiperf_parser_src",
-    "//third_party/hiperf:hiperf",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/hiperf:hiperf",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
   ]
   if (target != "test" && !is_openharmony) {
-    deps += [ "//prebuilts/protos:ts_proto_data_cpp" ]
+    deps += [ "${PREBUILTS}/protos:ts_proto_data_cpp" ]
   }
 }
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 d9901047074058eef5eb1f1aa17b62e53a3e6c89..2bdb4585e4b36b087c11271968faf2d1e4eed4b4 100644
--- a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
+++ b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
@@ -243,7 +243,7 @@ bool PerfDataParser::RecordCallBack(std::unique_ptr<PerfEventRecord> record)
     return true;
 }
 
-uint32_t PerfDataParser::UpdatePerfCallChainData(std::unique_ptr<PerfRecordSample>& sample)
+uint32_t PerfDataParser::UpdatePerfCallChainData(const std::unique_ptr<PerfRecordSample>& sample)
 {
     uint64_t depth = 0;
     bool callStackNotExist = false;
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 306fc8dbb7630e73fd75c1a71b18a3e3e6b3c2c6..43aaef1b60bcf5f67ccf57771386de473a7528a3 100644
--- a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
+++ b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
@@ -51,7 +51,7 @@ private:
     void UpdateClockType();
     bool RecordCallBack(std::unique_ptr<PerfEventRecord> record);
     void UpdatePerfSampleData(uint32_t callChainId, std::unique_ptr<PerfRecordSample>& sample);
-    uint32_t UpdatePerfCallChainData(std::unique_ptr<PerfRecordSample>& sample);
+    uint32_t UpdatePerfCallChainData(const std::unique_ptr<PerfRecordSample>& sample);
 
     class CallStackTemp {
     public:
diff --git a/trace_streamer/src/parser/htrace_parser/BUILD.gn b/trace_streamer/src/parser/htrace_parser/BUILD.gn
index e689eb8834a33924872ba01e1a0640f92614d9e4..20a7a55bdec34a92ee8dfce6c2675f1b6bbae77e 100755
--- a/trace_streamer/src/parser/htrace_parser/BUILD.gn
+++ b/trace_streamer/src/parser/htrace_parser/BUILD.gn
@@ -70,28 +70,28 @@ ohos_source_set("htrace_parser_src") {
     "../../trace_data",
     "../../cfg",
     "../../trace_streamer",
-    "//third_party/protobuf/src",
-    "//third_party/sqlite/include",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/sqlite/include",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
     "../../filter",
     "../../base",
     "../ebpf_parser",
   ]
   include_dirs += [
-    "//third_party/libunwind/include",
-    "//third_party/libunwind/src",
+    "${THIRD_PARTY}/libunwind/include",
+    "${THIRD_PARTY}/libunwind/src",
   ]
   if (with_perf) {
     include_dirs += [
-      "//third_party/perf_include/musl",
-      "//third_party/hiperf/include",
-      "//third_party/hiperf/include/nonlinux",
-      "//third_party/hiperf/include/nonlinux/linux",
-      "//third_party/perf_include/libbpf",
-      "//third_party/perf_include/include",
-      "//third_party/perf_include",
-      "//third_party/perf_include/linux",
+      "${THIRD_PARTY}/perf_include/musl",
+      "${THIRD_PARTY}/hiperf/include",
+      "${THIRD_PARTY}/hiperf/include/nonlinux",
+      "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+      "${THIRD_PARTY}/perf_include/libbpf",
+      "${THIRD_PARTY}/perf_include/include",
+      "${THIRD_PARTY}/perf_include",
+      "${THIRD_PARTY}/perf_include/linux",
       "../hiperf_parser",
       "../hiperf_parser/include",
     ]
@@ -113,13 +113,13 @@ ohos_source_set("htrace_parser_src") {
 group("htrace_parser") {
   deps = [
     ":htrace_parser_src",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
   ]
   if (!use_wasm && !is_win && !is_macx && !is_test) {
-    deps += [ "//third_party/libunwind:libunwind" ]
+    deps += [ "${THIRD_PARTY}/libunwind:libunwind" ]
   }
   if (target != "test" && !is_openharmony) {
-    deps += [ "//prebuilts/protos:ts_proto_data_cpp" ]
+    deps += [ "${PREBUILTS}/protos:ts_proto_data_cpp" ]
   }
 }
diff --git a/trace_streamer/src/parser/htrace_parser/htrace_parser.cpp b/trace_streamer/src/parser/htrace_parser/htrace_parser.cpp
index fa019290f66e8fdcee4558f5dbec1fc83d7c8f96..746ef3dfbaf79204fee774d87ba6e4541f98ff2d 100644
--- a/trace_streamer/src/parser/htrace_parser/htrace_parser.cpp
+++ b/trace_streamer/src/parser/htrace_parser/htrace_parser.cpp
@@ -42,7 +42,6 @@ HtraceParser::HtraceParser(TraceDataCache* dataCache, const TraceStreamerFilters
       networkParser_(std::make_unique<HtraceNetworkParser>(dataCache, filters)),
       diskIOParser_(std::make_unique<HtraceDiskIOParser>(dataCache, filters)),
       processParser_(std::make_unique<HtraceProcessParser>(dataCache, filters)),
-      ebpfDataParser_(std::make_unique<EbpfDataParser>(dataCache, filters)),
       hisyseventParser_(std::make_unique<HtraceHisyseventParser>(dataCache, filters)),
 #if WITH_PERF
       perfDataParser_(std::make_unique<PerfDataParser>(dataCache, filters)),
@@ -51,6 +50,7 @@ HtraceParser::HtraceParser(TraceDataCache* dataCache, const TraceStreamerFilters
       dataSegArray_(std::make_unique<HtraceDataSegment[]>(MAX_SEG_ARRAY_SIZE)),
       supportThread_(true),
 #else
+      ebpfDataParser_(std::make_unique<EbpfDataParser>(dataCache, filters)),
       dataSegArray_(std::make_unique<HtraceDataSegment[]>(1))
 #endif
 {
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn b/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn
index b6dbe327c85a631d4a21eed36488805c1574e9b7..d98e91a2b8dc5859a581f7790d84fab2105019e3 100755
--- a/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn
@@ -73,28 +73,28 @@ ohos_source_set("htrace_pbreader_parser_src") {
     "../../trace_data",
     "../../cfg",
     "../../trace_streamer",
-    "//third_party/protobuf/src",
-    "//third_party/sqlite/include",
-    "//third_party/json-master/include",
-    "//third_party/json-master/include/nlohmann",
+    "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/sqlite/include",
+    "${THIRD_PARTY}/json-master/include",
+    "${THIRD_PARTY}/json-master/include/nlohmann",
     "../../filter",
     "../../base",
     "../ebpf_parser",
   ]
   include_dirs += [
-    "//third_party/libunwind/include",
-    "//third_party/libunwind/src",
+    "${THIRD_PARTY}/libunwind/include",
+    "${THIRD_PARTY}/libunwind/src",
   ]
   if (with_perf) {
     include_dirs += [
-      "//third_party/perf_include/musl",
-      "//third_party/hiperf/include",
-      "//third_party/hiperf/include/nonlinux",
-      "//third_party/hiperf/include/nonlinux/linux",
-      "//third_party/perf_include/libbpf",
-      "//third_party/perf_include/include",
-      "//third_party/perf_include",
-      "//third_party/perf_include/linux",
+      "${THIRD_PARTY}/perf_include/musl",
+      "${THIRD_PARTY}/hiperf/include",
+      "${THIRD_PARTY}/hiperf/include/nonlinux",
+      "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+      "${THIRD_PARTY}/perf_include/libbpf",
+      "${THIRD_PARTY}/perf_include/include",
+      "${THIRD_PARTY}/perf_include",
+      "${THIRD_PARTY}/perf_include/linux",
       "../hiperf_parser",
       "../hiperf_parser/include",
     ]
@@ -116,13 +116,13 @@ ohos_source_set("htrace_pbreader_parser_src") {
 group("htrace_pbreader_parser") {
   deps = [
     ":htrace_pbreader_parser_src",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
   ]
   if (!use_wasm && !is_win && !is_macx && !is_test) {
-    deps += [ "//third_party/libunwind:libunwind" ]
+    deps += [ "${THIRD_PARTY}/libunwind:libunwind" ]
   }
   if (target != "test" && !is_openharmony) {
-    deps += [ "//prebuilts/protos:ts_proto_data_cpp" ]
+    deps += [ "${PREBUILTS}/protos:ts_proto_data_cpp" ]
   }
 }
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_js_memory_parser.cpp b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_js_memory_parser.cpp
index 9fb6ebe075c6b04783dcde35171e06485a6ab9d6..88b57755a059fdf6bd73c60f251b77074fcf912f 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_js_memory_parser.cpp
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_js_memory_parser.cpp
@@ -12,10 +12,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+#include "htrace_js_memory_parser.h"
 #include <dirent.h>
 #include <memory>
 #include <regex>
-#include "htrace_js_memory_parser.h"
 #include "clock_filter.h"
 #include "fcntl.h"
 #include "file.h"
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.cpp b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.cpp
index 1e49f7a09e5ee568b3723041c6e807ad561b3303..79137c59225116776ecb558ee7416702cc4ca6fb 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.cpp
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.cpp
@@ -43,7 +43,6 @@ HtraceParser::HtraceParser(TraceDataCache* dataCache, const TraceStreamerFilters
       networkParser_(std::make_unique<HtraceNetworkParser>(dataCache, filters)),
       diskIOParser_(std::make_unique<HtraceDiskIOParser>(dataCache, filters)),
       processParser_(std::make_unique<HtraceProcessParser>(dataCache, filters)),
-      ebpfDataParser_(std::make_unique<EbpfDataParser>(dataCache, filters)),
       hisyseventParser_(std::make_unique<HtraceHisyseventParser>(dataCache, filters)),
       jsMemoryParser_(std::make_unique<HtraceJSMemoryParser>(dataCache, filters)),
 #if WITH_PERF
@@ -53,6 +52,7 @@ HtraceParser::HtraceParser(TraceDataCache* dataCache, const TraceStreamerFilters
       supportThread_(true),
       dataSegArray_(std::make_unique<HtraceDataSegment[]>(MAX_SEG_ARRAY_SIZE))
 #else
+      ebpfDataParser_(std::make_unique<EbpfDataParser>(dataCache, filters)),
       dataSegArray_(std::make_unique<HtraceDataSegment[]>(1))
 #endif
 {
@@ -171,7 +171,6 @@ void HtraceParser::WaitForParserEnd()
     htraceCpuDetailParser_->FilterAllEvents();
     htraceNativeHookParser_->FinishParseNativeHookData();
     htraceHiLogParser_->Finish();
-    htraceNativeHookParser_->Finish();
     htraceHidumpParser_->Finish();
     cpuUsageParser_->Finish();
     networkParser_->Finish();
@@ -184,6 +183,7 @@ void HtraceParser::WaitForParserEnd()
 #if WITH_PERF
     perfDataParser_->Finish();
 #endif
+    htraceNativeHookParser_->Finish();
     htraceMemParser_->Finish();
     traceDataCache_->GetDataSourceClockIdData()->SetDataSourceClockId(DATA_SOURCE_TYPE_TRACE,
                                                                       dataSourceTypeTraceClockid_);
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_process_parser.h b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_process_parser.h
index 88587eee5bdccce80e2d2b83c1731989fdcd2623..c64f105cd9b3c301e53d95089c13a182a20e730f 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_process_parser.h
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_process_parser.h
@@ -55,7 +55,7 @@ public:
         uint64_t cancelled_wbytes_;
     };
     struct PssInfo {
-        PssInfo(int32_t pss_info) : pss_info_(pss_info) {}
+        explicit PssInfo(int32_t pss_info) : pss_info_(pss_info) {}
         int32_t pss_info_;
     };
     struct CpuInfo {
diff --git a/trace_streamer/src/parser/print_event_parser.cpp b/trace_streamer/src/parser/print_event_parser.cpp
index bf3a55046a6a57d6c263f23280878fa968c67ad6..6dc3c6902ec5bbbdfdbdb18fa161601a3defba04 100644
--- a/trace_streamer/src/parser/print_event_parser.cpp
+++ b/trace_streamer/src/parser/print_event_parser.cpp
@@ -177,7 +177,7 @@ ParseResult PrintEventParser::HandlerB(std::string_view pointStr, TracePoint& ou
         if (space != std::string::npos) {
             outPoint.funcPrefix_ = outPoint.name_.substr(0, space);
             outPoint.funcPrefixId_ = traceDataCache_->GetDataIndex(outPoint.funcPrefix_);
-            outPoint.funcArgs_ = outPoint.name_.substr(space + 1, -1);
+            outPoint.funcArgs_ = outPoint.name_.substr(space + 1);
         } else {
             outPoint.funcPrefixId_ = traceDataCache_->GetDataIndex(outPoint.name_);
         }
diff --git a/trace_streamer/src/proto_reader/BUILD.gn b/trace_streamer/src/proto_reader/BUILD.gn
index 81d1eabca399089bfbc0a98bf15d2850723e5a62..673d652d01399d8becf0029c90426dbd1a64c485 100755
--- a/trace_streamer/src/proto_reader/BUILD.gn
+++ b/trace_streamer/src/proto_reader/BUILD.gn
@@ -11,8 +11,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
-import("//src/ts.gni")
+import("../../build/ohos.gni")
+import("../ts.gni")
 ohos_source_set("proto_reader") {
   subsystem_name = "trace_streamer"
   part_name = "proto_reader"
diff --git a/trace_streamer/src/proto_reader/include/proto_reader.h b/trace_streamer/src/proto_reader/include/proto_reader.h
index 30703e555752c563e3ded8535c2644b2cd204d4f..68bf3003f1911b583a7cca558df25862d04c792c 100644
--- a/trace_streamer/src/proto_reader/include/proto_reader.h
+++ b/trace_streamer/src/proto_reader/include/proto_reader.h
@@ -188,7 +188,7 @@ struct ParseDataAreaResult {
 
 class ProtoReaderBase {
 public:
-    ProtoReaderBase() : startAddr_(0), endAddr_(0) {}
+    ProtoReaderBase() : startAddr_(0), endAddr_(0), dataAreas_(nullptr), dataAreasCount_(0), size_(0), volume_(0) {}
     ProtoReaderBase(DataArea* storage, uint32_t dataAreasCount, const uint8_t* buffer, size_t length);
     const uint8_t* GetStartAddr() const
     {
diff --git a/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn b/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn
index e967af6e1cd86d367e8f7fc7ae38a437eaef6427..ba55d052047593b84c9930a70ac3a5cf72a09eb3 100755
--- a/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn
+++ b/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn
@@ -10,13 +10,14 @@
 # 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("../../ts.gni")
 if (target != "wasm") {
   executable("protoreader_plugin") {
     sources = [ "proto_reader_plugin.cpp" ]
     deps = [
-      "//third_party/protobuf:protoc",
-      "//third_party/protobuf:protoc_lib",
+      "${THIRD_PARTY}/protobuf:protoc",
+      "${THIRD_PARTY}/protobuf:protoc_lib",
     ]
-    include_dirs = [ "//third_party/protobuf/src" ]
+    include_dirs = [ "${THIRD_PARTY}/protobuf/src" ]
   }
 }
diff --git a/trace_streamer/src/protos/types/plugins/js_memory/js_heap_config.proto b/trace_streamer/src/protos/types/plugins/js_memory/js_heap_config.proto
index 2a9442e2a574ab15a2e74064684f081e6bfed161..1ddc9e1ba769c8041ab757dfb34677816c9df533 100755
--- a/trace_streamer/src/protos/types/plugins/js_memory/js_heap_config.proto
+++ b/trace_streamer/src/protos/types/plugins/js_memory/js_heap_config.proto
@@ -12,6 +12,8 @@
 // limitations under the License.
 
 syntax = "proto3";
+option java_package = "ohos.devtools.datasources.transport.grpc.service";
+option optimize_for = LITE_RUNTIME;
 
 message JsHeapConfig {
     enum HeapType {
diff --git a/trace_streamer/src/protos/types/plugins/js_memory/js_heap_result.proto b/trace_streamer/src/protos/types/plugins/js_memory/js_heap_result.proto
index 4291e6b1fafd7870ded81946dc011bfba81df988..a0f63f8853ed88a916182346de5960f9e636ad65 100755
--- a/trace_streamer/src/protos/types/plugins/js_memory/js_heap_result.proto
+++ b/trace_streamer/src/protos/types/plugins/js_memory/js_heap_result.proto
@@ -12,6 +12,9 @@
 // limitations under the License.
 
 syntax = "proto3";
+option java_package = "ohos.devtools.datasources.transport.grpc.service";
+option optimize_for = LITE_RUNTIME;
+
 message JsHeapResult {
     bytes result = 1;
 }
diff --git a/trace_streamer/src/protos/types/plugins/test_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/test_data/BUILD.gn
index 2befc06544c23f958a1e19c7c75410f383d67bb2..e1f149c9b70b1d599dc0d9cfa4dbc7807707c2eb 100644
--- a/trace_streamer/src/protos/types/plugins/test_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/test_data/BUILD.gn
@@ -11,7 +11,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../../../build/ohos.gni")
 import("../../../protos.gni")
 
 test_data_sources = [ "./test.proto" ]
diff --git a/trace_streamer/src/rpc/http_server.h b/trace_streamer/src/rpc/http_server.h
index 5ff2fc12f551929c481d39283abf4c577d7ea5db..c90b1c2800eca06db098182c0ad18b59bbff6e0e 100644
--- a/trace_streamer/src/rpc/http_server.h
+++ b/trace_streamer/src/rpc/http_server.h
@@ -53,7 +53,7 @@ private:
     void ProcessClient(HttpSocket& client);
     void ProcessRequest(HttpSocket& client, RequestST& request);
     static void HttpResponse(HttpSocket& client, const std::string& status, bool hasBody = false);
-    void ParseRequest(const uint8_t* requst, size_t& len, RequestST& httpReq);
+    static void ParseRequest(const uint8_t* requst, size_t& len, RequestST& httpReq);
     void ClearDeadClientThread();
     static std::vector<std::string_view> StringSplit(std::string_view source, std::string_view split);
 
diff --git a/trace_streamer/src/rpc/rpc_server.cpp b/trace_streamer/src/rpc/rpc_server.cpp
index 72e087f4fdbb33ba68e190379cf366315625e28f..bfd179cb8c4c774b9f458d3dee35425c15248be8 100644
--- a/trace_streamer/src/rpc/rpc_server.cpp
+++ b/trace_streamer/src/rpc/rpc_server.cpp
@@ -197,7 +197,7 @@ int32_t RpcServer::WasmExportDatabase(ResultCallBack resultCallBack)
 }
 
 #if IS_WASM
-int32_t RpcServer::DownloadELFCallback(const std::string fileName,
+int32_t RpcServer::DownloadELFCallback(const std::string& fileName,
                                        size_t totalLen,
                                        const uint8_t* data,
                                        size_t len,
@@ -220,7 +220,6 @@ int32_t RpcServer::DownloadELFCallback(const std::string fileName,
         fd = fopen(fileName.c_str(), "a+");
         if (fd == nullptr) {
             TS_LOGE("wasm file create failed");
-            fclose(fd);
             return false;
         }
         int32_t writeLength = fwrite(data, len, 1, fd);
@@ -235,17 +234,16 @@ int32_t RpcServer::DownloadELFCallback(const std::string fileName,
     g_fileLen = 0;
     fd = fopen(fileName.c_str(), "a+");
     if (fd == nullptr) {
-        fclose(fd);
         TS_LOGE("wasm file open failed");
         return false;
     }
 
     int32_t writeLength = fwrite(data, len, 1, fd);
+    (void)fclose(fd);
     if (!writeLength) {
         TS_LOGE("wasm write file failed");
         return false;
     }
-    (void)fclose(fd);
     TS_LOGI("symbolsPath = %s, fileName = %s", symbolsPath.c_str(), fileName.c_str());
     symbolsPathFiles_.emplace_back(fileName);
     parseELFFile("file send over\r\n", SEND_FINISH);
diff --git a/trace_streamer/src/rpc/rpc_server.h b/trace_streamer/src/rpc/rpc_server.h
index 58ebd9b0c0c6098c3b2cef1029933526039d6079..3431e1f168c1328b68da636c34e82d8ce43a1635 100644
--- a/trace_streamer/src/rpc/rpc_server.h
+++ b/trace_streamer/src/rpc/rpc_server.h
@@ -41,7 +41,7 @@ public:
     int32_t TraceStreamer_Init_ThirdParty_Config(const uint8_t* data, int32_t len);
     int32_t WasmExportDatabase(ResultCallBack resultCallBack);
 #if IS_WASM
-    int32_t DownloadELFCallback(const std::string fileName,
+    int32_t DownloadELFCallback(const std::string& fileName,
                                 size_t totalLen,
                                 const uint8_t* data,
                                 size_t len,
diff --git a/trace_streamer/src/table/BUILD.gn b/trace_streamer/src/table/BUILD.gn
index 9b7f6f438af9930926dc42a4047e4dc854499ab0..17b65ef815da1a014e1a1d5150c73e03e684dd9d 100644
--- a/trace_streamer/src/table/BUILD.gn
+++ b/trace_streamer/src/table/BUILD.gn
@@ -11,22 +11,22 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../ts.gni")
 ohos_source_set("table") {
   subsystem_name = "trace_streamer"
   part_name = "table"
   include_dirs = [
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../parser",
     "base",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/base/BUILD.gn b/trace_streamer/src/table/base/BUILD.gn
index a2571577b85a47866e5bfa6ee21855e100b70087..774a7d6b21e5174921e60326332289fac49cac14 100644
--- a/trace_streamer/src/table/base/BUILD.gn
+++ b/trace_streamer/src/table/base/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../..//ts.gni")
 ohos_source_set("base_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -46,14 +46,14 @@ ohos_source_set("base_tables") {
     "trace_config_table.h",
   ]
   include_dirs = [
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/base/index_map.cpp b/trace_streamer/src/table/base/index_map.cpp
index dff042838a8cf20edf10b5c27fd71f0404db8c92..5d6adb719e46bfb742a2b12cd83c19a3b4e85417 100644
--- a/trace_streamer/src/table/base/index_map.cpp
+++ b/trace_streamer/src/table/base/index_map.cpp
@@ -54,7 +54,7 @@ void IndexMap::Init()
 {
     intersectEable_ = HasData();
 }
-bool IndexMap::HasData()
+bool IndexMap::HasData() const
 {
     return !empty_;
 }
@@ -91,9 +91,6 @@ void IndexMap::Next()
 {
     if (desc_) {
         if (current_ > start_ - 1) {
-            if (current_ == 0) {
-                current_ = 0;
-            }
             current_--;
         }
     } else {
diff --git a/trace_streamer/src/table/base/index_map.h b/trace_streamer/src/table/base/index_map.h
index 1433ef2c31c1ae67246346cae0724a775a4bfcf6..28169a851dac8d74ff75f862a83c1393d8c5c128 100644
--- a/trace_streamer/src/table/base/index_map.h
+++ b/trace_streamer/src/table/base/index_map.h
@@ -32,7 +32,7 @@ public:
 
     IndexMap(TableRowId start, TableRowId end);
     void CovertToIndexMap();
-    void Sort();
+    static void Sort();
     void Print();
     void Init();
     void Merge(IndexMap* other);
@@ -341,7 +341,7 @@ public:
         FixSize();
         return;
     }
-    bool HasData();
+    bool HasData() const;
     std::vector<TableRowId> rowIndex_ = {};
     std::vector<TableRowId> rowIndexBak_ = {};
 
diff --git a/trace_streamer/src/table/base/span_join.cpp b/trace_streamer/src/table/base/span_join.cpp
index 5c7fa738bb23d98caae88cdda570bd67289c94d0..4e82fd1b9a388334ca76f7b7539b66ab94b81d57 100644
--- a/trace_streamer/src/table/base/span_join.cpp
+++ b/trace_streamer/src/table/base/span_join.cpp
@@ -33,6 +33,8 @@ SpanJoin::SpanJoin(const TraceDataCache* dataCache) : TableBase(dataCache)
 {
     tableColumn_ = {};
     tablePriKey_ = {};
+    tableFirstDesc_ = {};
+    tableSecondDesc_ = {};
 }
 
 void SpanJoin::Init(int32_t argc, const char* const* argv)
@@ -134,7 +136,7 @@ bool SpanJoin::IsTsOrDurCol(const std::string& name)
     return false;
 }
 
-void SpanJoin::GetTableField(TableParse& tableParse, TableDesc& tableDesc)
+void SpanJoin::GetTableField(const TableParse& tableParse, TableDesc& tableDesc)
 {
     std::vector<TableBase::ColumnInfo> cols;
     GetColumns(dataCache_, tableParse.name, cols);
diff --git a/trace_streamer/src/table/base/span_join.h b/trace_streamer/src/table/base/span_join.h
index 74a87ede1567724a006a9292a13977bf1d810885..9f6e309be7aca9345a7a2001015a883f305bd8b9 100644
--- a/trace_streamer/src/table/base/span_join.h
+++ b/trace_streamer/src/table/base/span_join.h
@@ -51,7 +51,7 @@ public:
     ~SpanJoin() override{};
     void Parse(const std::string& tablePartition, TableParse& tableParse);
     std::vector<std::string> TableNameSplitToVec(std::string& str, const std::string& pat);
-    void GetTableField(TableParse& tableParse, TableDesc& tableDesc);
+    void GetTableField(const TableParse& tableParse, TableDesc& tableDesc);
     void GetColumns(const TraceDataCache* dataCache,
                     const std::string& tableName,
                     std::vector<TableBase::ColumnInfo>& columns);
diff --git a/trace_streamer/src/table/ebpf/BUILD.gn b/trace_streamer/src/table/ebpf/BUILD.gn
index 1712e2890f6d603ef891ff28f1792dad84e2fd7b..c811175492d325dc42b3aca8aad1a8889294e0c5 100644
--- a/trace_streamer/src/table/ebpf/BUILD.gn
+++ b/trace_streamer/src/table/ebpf/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("ebpf_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -38,14 +38,14 @@ ohos_source_set("ebpf_tables") {
   }
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/ftrace/BUILD.gn b/trace_streamer/src/table/ftrace/BUILD.gn
index 60c8f711b47c281386214cd7de7395d6219167ef..c6c964a784606f97914092ee7deb91b20c02b218 100644
--- a/trace_streamer/src/table/ftrace/BUILD.gn
+++ b/trace_streamer/src/table/ftrace/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("ftrace_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -68,14 +68,14 @@ ohos_source_set("ftrace_tables") {
 
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/hi_sysevent/BUILD.gn b/trace_streamer/src/table/hi_sysevent/BUILD.gn
index 11c4a69f66988592419e924f16de235965582394..308089f6e064d959f730cd959cf295994ba48737 100644
--- a/trace_streamer/src/table/hi_sysevent/BUILD.gn
+++ b/trace_streamer/src/table/hi_sysevent/BUILD.gn
@@ -13,7 +13,7 @@
 
 import("//build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("hi_sysevent_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -25,14 +25,14 @@ ohos_source_set("hi_sysevent_tables") {
   ]
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/hiperf/BUILD.gn b/trace_streamer/src/table/hiperf/BUILD.gn
index 4f26399d62744684cf47d8669b50fee854b8da3a..59b86e390efb5051368d645ecca39f09fdc08975 100644
--- a/trace_streamer/src/table/hiperf/BUILD.gn
+++ b/trace_streamer/src/table/hiperf/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("hiperf_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -32,14 +32,14 @@ ohos_source_set("hiperf_tables") {
 
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/js_memory/BUILD.gn b/trace_streamer/src/table/js_memory/BUILD.gn
index e289343b9eb26c93407280d521d991ec48181ea7..b9229d398a9c3c36071a6535d45f64c60cfa5971 100644
--- a/trace_streamer/src/table/js_memory/BUILD.gn
+++ b/trace_streamer/src/table/js_memory/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("js_memory_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -41,14 +41,14 @@ ohos_source_set("js_memory_tables") {
   ]
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/monitor/BUILD.gn b/trace_streamer/src/table/monitor/BUILD.gn
index 3e7b883da101e724b8939429c4b50052a393f02f..22a63ea24ddffed9e278cf6a871905196cfa1a1f 100644
--- a/trace_streamer/src/table/monitor/BUILD.gn
+++ b/trace_streamer/src/table/monitor/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("monitor_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -37,14 +37,14 @@ ohos_source_set("monitor_tables") {
   ]
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/table/native_hook/BUILD.gn b/trace_streamer/src/table/native_hook/BUILD.gn
index 3fcc9b666e588b0a18de16c7b564bbf19e3b5a1a..dbcea68a65757685dca98295a12d55a30bf317ef 100644
--- a/trace_streamer/src/table/native_hook/BUILD.gn
+++ b/trace_streamer/src/table/native_hook/BUILD.gn
@@ -11,9 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
+import("../../../build/ohos.gni")
 
-import("//src/ts.gni")
+import("../../ts.gni")
 ohos_source_set("native_hook_tables") {
   subsystem_name = "trace_streamer"
   part_name = "table"
@@ -28,14 +28,14 @@ ohos_source_set("native_hook_tables") {
 
   include_dirs = [
     "../base",
-    "//third_party/sqlite/include",
-    "//src/base",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}/base",
     "../../parser",
-    "//src/trace_data",
-    "//src/include",
-    "//src",
+    "${SRC}/trace_data",
+    "${SRC}/include",
+    "${SRC}",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 
   if (enable_ts_utest && !use_wasm) {
diff --git a/trace_streamer/src/trace_data/BUILD.gn b/trace_streamer/src/trace_data/BUILD.gn
index 88e22be0d10ea3efcf2d273d21b117c2b1894610..38e0cdf595a201fa885ddd83b531d49985c569d9 100644
--- a/trace_streamer/src/trace_data/BUILD.gn
+++ b/trace_streamer/src/trace_data/BUILD.gn
@@ -12,7 +12,7 @@
 # limitations under the License.
 
 import("//build/ohos.gni")
-import("//src/ts.gni")
+import("../ts.gni")
 
 ohos_source_set("trace_data") {
   subsystem_name = "trace_streamer"
@@ -47,21 +47,21 @@ ohos_source_set("trace_data") {
     }
   }
   include_dirs = [
-    "//third_party/sqlite/include",
-    "//src",
-    "//src/base",
-    "//src/include",
-    "//src/table",
-    "//src/table/base",
-    "//src/table/ebpf",
-    "//src/table/ftrace",
-    "//src/table/hiperf",
-    "//src/table/hi_sysevent",
-    "//src/table/js_memory",
-    "//src/table/monitor",
-    "//src/table/native_hook",
+    "${THIRD_PARTY}/sqlite/include",
+    "${SRC}",
+    "${SRC}/base",
+    "${SRC}/include",
+    "${SRC}/table",
+    "${SRC}/table/base",
+    "${SRC}/table/ebpf",
+    "${SRC}/table/ftrace",
+    "${SRC}/table/hiperf",
+    "${SRC}/table/hi_sysevent",
+    "${SRC}/table/js_memory",
+    "${SRC}/table/monitor",
+    "${SRC}/table/native_hook",
     ".",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
 }
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 907138ff465cc7a499ede9b795f6a4a453f03f65..cc72c8a0283289048fcd97a5975a99902e5e8cfa 100644
--- a/trace_streamer/src/trace_data/trace_data_cache_writer.cpp
+++ b/trace_streamer/src/trace_data/trace_data_cache_writer.cpp
@@ -65,6 +65,10 @@ void TraceDataCacheWriter::MixTraceTime(uint64_t timestampMin, uint64_t timestam
     if (timestampMin == std::numeric_limits<uint64_t>::max() || timestampMax == 0 || timestampMin == timestampMax) {
         return;
     }
+    if ((timestampMin == timestampMax - 1) && traceStartTime_ != std::numeric_limits<uint64_t>::max() &&
+        traceEndTime_) {
+        return;
+    }
     if (traceStartTime_ != std::numeric_limits<uint64_t>::max()) {
         traceStartTime_ = std::max(traceStartTime_, timestampMin);
     } else {
diff --git a/trace_streamer/src/trace_data/trace_data_db.cpp b/trace_streamer/src/trace_data/trace_data_db.cpp
index 79cc2cbfbcd952b90a413bdcc8c6cd11ded828c0..d28109eae1407cb53f15b14adf8de92b5a3e62e4 100644
--- a/trace_streamer/src/trace_data/trace_data_db.cpp
+++ b/trace_streamer/src/trace_data/trace_data_db.cpp
@@ -218,10 +218,10 @@ std::vector<std::string> TraceDataDB::SearchData()
         size_t pos = std::string::npos;
         if ((pos = line.find(" ")) != std::string::npos) {
             option = line.substr(0, pos);
-            auto left = line.substr(pos + 1, -1);
+            auto left = line.substr(pos + 1);
             while ((pos = left.find(",")) != std::string::npos) {
                 values.push_back(left.substr(0, pos + 1));
-                left = left.substr(pos + 1, -1);
+                left = left.substr(pos + 1);
             }
             values.push_back(left);
         }
@@ -248,7 +248,7 @@ std::vector<std::string> TraceDataDB::SearchData()
             std::cout << "will not print result of query" << std::endl;
             printResult = false;
             continue;
-        } else if (line.find("-c:") == 0) {
+        } else if (line.find("-c:") != std::string::npos) {
             line = line.substr(strlen("-c:"));
             if (OperateDatabase(line) == SQLITE_OK) {
                 printf("operate SQL success\n");
diff --git a/trace_streamer/src/trace_data/trace_stdtype.cpp b/trace_streamer/src/trace_data/trace_stdtype.cpp
index 31b18a4932fda45d8b9adda0a1aad7782e75fef2..aff04294c9672e8a413fb1e8c1ee297cdec4a1fd 100644
--- a/trace_streamer/src/trace_data/trace_stdtype.cpp
+++ b/trace_streamer/src/trace_data/trace_stdtype.cpp
@@ -18,6 +18,7 @@
 #include <ctime>
 namespace SysTuning {
 namespace TraceStdtype {
+const int32_t MAX_SIZE_LEN = 80;
 #define UNUSED(expr)             \
     do {                         \
         static_cast<void>(expr); \
@@ -1145,7 +1146,9 @@ void MetaData::SetTraceDataSize(uint64_t dataSize)
     struct tm* timeinfo = nullptr;
     void(time(&rawtime));
     timeinfo = localtime(&rawtime);
-    values_[METADATA_ITEM_PARSERTIME] = asctime(timeinfo);
+    char buffer[MAX_SIZE_LEN];
+    strftime(buffer, MAX_SIZE_LEN, "%Y-%m-%d %H:%M:%S", timeinfo);
+    values_[METADATA_ITEM_PARSERTIME].append(buffer);
     // sometimes there will be a extra \n at last
     values_[METADATA_ITEM_PARSERTIME].pop_back();
 }
diff --git a/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp b/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp
index 29857cc659f16e5e910933aa618796727cb7d11e..038a2a125a27cf638d55b27d7c24a9f554ee5cf4 100644
--- a/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp
+++ b/trace_streamer/src/trace_streamer/trace_streamer_selector.cpp
@@ -227,16 +227,17 @@ int32_t TraceStreamerSelector::ExportDatabase(const std::string& outputName, Tra
 
 bool TraceStreamerSelector::ReloadSymbolFiles(std::string& directory, std::vector<std::string>& symbolsPaths)
 {
-    if (fileType_ == TRACE_FILETYPE_H_TRACE) {
-        TS_LOGE("directory is %s", directory.c_str());
-        for (auto file : symbolsPaths) {
-            TS_LOGE("files is %s", file.c_str());
-        }
+    if (fileType_ != TRACE_FILETYPE_H_TRACE) {
+        return false;
+    }
+    TS_LOGE("directory is %s", directory.c_str());
+    for (auto file : symbolsPaths) {
+        TS_LOGE("files is %s", file.c_str());
+    }
 #ifndef IS_PBDECODER
-        htraceParser_->ReparseSymbolFilesAndResymbolization(directory, symbolsPaths);
+    return htraceParser_->ReparseSymbolFilesAndResymbolization(directory, symbolsPaths);
 #endif
-    }
-    return true;
+    return false;
 }
 void TraceStreamerSelector::Clear()
 {
diff --git a/trace_streamer/src/ts.gni b/trace_streamer/src/ts.gni
index 3030c45f115f529c8819d5089ad75ce2e861854c..3aba498b196ca5c1f4323faf14b132a156fc1138 100755
--- a/trace_streamer/src/ts.gni
+++ b/trace_streamer/src/ts.gni
@@ -11,7 +11,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 OHOS_PROTO_DIR = ""
-
+THIRD_PARTY = "//third_party"
+SRC = "//src"
+PREBUILTS = "//prebuilts"
 if (target_os == "linux" || target_os == "macx" || target_os == "windows") {
   #  OHOS_FTRACE_PROTO_DIR="//third_party/protogen"
   OHOS_FTRACE_PROTO_DIR = "//src/multi_platform"
diff --git a/trace_streamer/test/BUILD.gn b/trace_streamer/test/BUILD.gn
index 4ab31b23ef17a1ef25a4ec721446955d509c4af1..93b61a3e31bbe97febb55cd33eb5d2d5d7af59e4 100755
--- a/trace_streamer/test/BUILD.gn
+++ b/trace_streamer/test/BUILD.gn
@@ -11,8 +11,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-import("//build/ohos.gni")
-import("//build/test.gni")
+import("../build/ohos.gni")
+import("../build/test.gni")
 import("test_ts.gni")
 
 if (is_test) {
@@ -67,13 +67,13 @@ if (is_test) {
       }
     }
     deps = [
+      "${THIRD_PARTY}/googletest:gtest",
+      "${THIRD_PARTY}/googletest:gtest_main",
+      "${THIRD_PARTY}/protobuf:protobuf",
+      "${THIRD_PARTY}/protobuf:protobuf_lite",
+      "${THIRD_PARTY}/sqlite:sqlite",
+      "../prebuilts/protos:ts_proto_data_cpp",
       "../src:trace_streamer_source",
-      "//prebuilts/protos:ts_proto_data_cpp",
-      "//third_party/googletest:gtest",
-      "//third_party/googletest:gtest_main",
-      "//third_party/protobuf:protobuf",
-      "//third_party/protobuf:protobuf_lite",
-      "//third_party/sqlite:sqlite",
     ]
     if (is_test) {
       if (is_pbdecoder) {
@@ -103,14 +103,14 @@ if (is_test) {
       "../src/proto_reader/include",
       "../prebuilts/emsdk/emsdk/emscripten/system/include",
       "..",
-      "//third_party/googletest/googletest/include/gtest",
-      "//third_party/protobuf/src",
-      "//third_party/hiperf/include",
-      "//third_party/hiperf/include/nonlinux/linux",
-      "//third_party/protobuf/src/google/protobuf",
-      "//third_party/json-master/include",
-      "//third_party/json-master/include/nlohmann",
-      "//third_party/perf_include/musl",
+      "${THIRD_PARTY}/googletest/googletest/include/gtest",
+      "${THIRD_PARTY}/protobuf/src",
+      "${THIRD_PARTY}/hiperf/include",
+      "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+      "${THIRD_PARTY}/protobuf/src/google/protobuf",
+      "${THIRD_PARTY}/json-master/include",
+      "${THIRD_PARTY}/json-master/include/nlohmann",
+      "${THIRD_PARTY}/perf_include/musl",
       "${OHOS_PROTO_GEN}",
       "${OHOS_FTRACE_PROTO_DIR}",
       "${OHOS_MEMORY_PROTO_DIR}",
diff --git a/trace_streamer/test/press_test.sh b/trace_streamer/test/press_test.sh
new file mode 100755
index 0000000000000000000000000000000000000000..3f50105f028eafc762abfbaa6fd9a84bc111d6d5
--- /dev/null
+++ b/trace_streamer/test/press_test.sh
@@ -0,0 +1,27 @@
+#! /bin/sh
+# Copyright (C) 2021 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.
+set -e
+repeated=1000
+if [ "$#" -ne "0" ];then
+    repeated = $1
+fi
+echo "begin" > repeated.text
+for ((i=1; i<=$repeated; i ++))
+do
+# user_trace_20230222203404.trace
+# user_trace_20230222203015
+echo $i
+./out/macx/trace_streamer ~/SourceData/repeated/user_trace_20230222203404.trace -e 1.db >> repeated.txt
+done
+echo "end" >> repeated.text
\ No newline at end of file
diff --git a/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn b/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn
index 4c4eaaad9120de23772d75901dc512e16f9a35c9..89a8fdd7bec7f5faff542d2c6b58a52e79b949ab 100644
--- a/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn
+++ b/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn
@@ -12,8 +12,8 @@
 # limitations under the License.
 
 #####################hydra-fuzz###################
-import("//build/ohos.gni")
-import("//build/test.gni")
+import("../../../build/ohos.gni")
+import("../../../build/test.gni")
 import("../../test_ts.gni")
 
 ##############################fuzztest##########################################
@@ -32,7 +32,7 @@ ohos_fuzztest("ts_bytrace_fuzz_test") {
     "../../../src/parser/htrace_parser",
     "../../../src/parser/htrace_parser/htrace_event_parser",
     "../../../src/parser/htrace_parser/htrace_cpu_parser",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
     "${OHOS_PROTO_GEN}/types/plugins/ftrace_data/${kernel_version}",
     "${OHOS_PROTO_GEN}/types/plugins/hilog_data",
@@ -45,7 +45,7 @@ ohos_fuzztest("ts_bytrace_fuzz_test") {
     "${OHOS_PROTO_GEN}/types/plugins/hisysevent_data",
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
   cflags = [
     "-g",
@@ -60,11 +60,11 @@ ohos_fuzztest("ts_bytrace_fuzz_test") {
     "--coverage",
   ]
   deps = [
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/sqlite:sqlite",
+    "../../../prebuilts/protos:ts_proto_data_cpp",
     "../../../src:trace_streamer_source",
-    "//prebuilts/protos:ts_proto_data_cpp",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
-    "//third_party/sqlite:sqlite",
   ]
 }
 
diff --git a/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn b/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn
index d9522852aa6da649ccf06e1d0b85992528aa740b..75b0716a102fc6057282b74767ce06848e93adb6 100644
--- a/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn
+++ b/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn
@@ -12,8 +12,8 @@
 # limitations under the License.
 
 #####################hydra-fuzz###################
-import("//build/ohos.gni")
-import("//build/test.gni")
+import("../../../build/ohos.gni")
+import("../../../build/test.gni")
 import("../../test_ts.gni")
 
 ##############################fuzztest##########################################
@@ -32,7 +32,7 @@ ohos_fuzztest("ts_htrace_fuzz_test") {
     "../../../src/parser/htrace_parser",
     "../../../src/parser/htrace_parser/htrace_event_parser",
     "../../../src/parser/htrace_parser/htrace_cpu_parser",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
     "${OHOS_PROTO_GEN}/types/plugins/ftrace_data/${kernel_version}",
     "${OHOS_PROTO_GEN}/types/plugins/hilog_data",
@@ -45,7 +45,7 @@ ohos_fuzztest("ts_htrace_fuzz_test") {
     "${OHOS_PROTO_GEN}/types/plugins/hisysevent_data",
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
   cflags = [
     "-g",
@@ -60,11 +60,11 @@ ohos_fuzztest("ts_htrace_fuzz_test") {
     "--coverage",
   ]
   deps = [
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/sqlite:sqlite",
+    "../../../prebuilts/protos:ts_proto_data_cpp",
     "../../../src:trace_streamer_source",
-    "//prebuilts/protos:ts_proto_data_cpp",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
-    "//third_party/sqlite:sqlite",
   ]
 }
 
diff --git a/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn b/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn
index 35b9aaf37325769f9e694c9d2ad812dd1a399d64..daf87db457f3298dc14932b572737863f43eaab9 100644
--- a/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn
+++ b/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn
@@ -12,8 +12,8 @@
 # limitations under the License.
 
 #####################hydra-fuzz###################
-import("//build/ohos.gni")
-import("//build/test.gni")
+import("../../../build/ohos.gni")
+import("../../../build/test.gni")
 import("../../test_ts.gni")
 
 ##############################fuzztest##########################################
@@ -32,7 +32,7 @@ ohos_fuzztest("ts_selector_fuzz_test") {
     "../../../src/parser/htrace_parser",
     "../../../src/parser/htrace_parser/htrace_event_parser",
     "../../../src/parser/htrace_parser/htrace_cpu_parser",
-    "//third_party/sqlite/include",
+    "${THIRD_PARTY}/sqlite/include",
     "${OHOS_PROTO_GEN}/types/plugins/memory_data",
     "${OHOS_PROTO_GEN}/types/plugins/ftrace_data/${kernel_version}",
     "${OHOS_PROTO_GEN}/types/plugins/hilog_data",
@@ -45,7 +45,7 @@ ohos_fuzztest("ts_selector_fuzz_test") {
     "${OHOS_PROTO_GEN}/types/plugins/hisysevent_data",
     "${OHOS_PROTO_GEN}/types/plugins/js_memory",
     "${OHOS_PROTO_GEN}",
-    "//third_party/protobuf/src",
+    "${THIRD_PARTY}/protobuf/src",
   ]
   cflags = [
     "-g",
@@ -60,11 +60,11 @@ ohos_fuzztest("ts_selector_fuzz_test") {
     "--coverage",
   ]
   deps = [
+    "${PREBUILTS}/protos:ts_proto_data_cpp",
+    "${THIRD_PARTY}/protobuf:protobuf",
+    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/sqlite:sqlite",
     "../../../src:trace_streamer_source",
-    "//prebuilts/protos:ts_proto_data_cpp",
-    "//third_party/protobuf:protobuf",
-    "//third_party/protobuf:protobuf_lite",
-    "//third_party/sqlite:sqlite",
   ]
 }
 
diff --git a/trace_streamer/test/test_ts.gni b/trace_streamer/test/test_ts.gni
index 642cb4243b50649cdd5ff46c129fde7cf2012dc7..c0c838b586643a99c2c3749b16e62405c7ddbe4c 100755
--- a/trace_streamer/test/test_ts.gni
+++ b/trace_streamer/test/test_ts.gni
@@ -12,6 +12,9 @@
 # limitations under the License.
 OHOS_PROTO_DIR = ""
 kernel_version = "."
+THIRD_PARTY = "//third_party"
+SRC = "//src"
+PREBUILTS = "//prebuilts"
 if (target_os == "linux" || target_os == "windows" || target_os == "macx") {
   OHOS_FTRACE_PROTO_DIR = "//src/multi_platform"
   OHOS_MEMORY_PROTO_DIR = "//src/multi_platform"