diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts
index b441e8aafca9a71b0ec3def815e4dd7ae4f48c22..b5f132b64d903d8813cb0e194f5842ed5084b2a5 100644
--- a/ide/src/base-ui/chart/pagenation/PageNation.ts
+++ b/ide/src/base-ui/chart/pagenation/PageNation.ts
@@ -225,16 +225,7 @@ export class PageNation {
     });
     if (totalpage <= 9) {
       for (let i = 0; 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);
+        this.buildLi(origin, i, current);
       }
       return;
     }
@@ -244,110 +235,61 @@ export class PageNation {
     }
     // 当前页面 大于5页 小于倒数第5页
     for (let index = 0; index < 2; index++) {
-      const cloneLi = origin.cloneNode(true);
-      // @ts-ignore
-      cloneLi.innerText = index + 1;
-      if (index + 1 === current) {
-        this.setElementStyles(cloneLi, {
-          backgroundColor: PageNation.BtnBackColor,
-          color: PageNation.BtnColor,
-        });
-      }
-      this.list.appendChild(cloneLi);
+      this.buildLi(origin, index, current);
     }
-    var span = document.createElement('span');
+    let span = document.createElement('span');
     span.innerText = '...';
     this.list.appendChild(span);
     for (let i = current - 3; i < current + 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);
+      this.buildLi(origin, i, current);
     }
-    var span = document.createElement('span');
+    span = document.createElement('span');
     span.innerText = '...';
     this.list.appendChild(span);
     for (let i = totalpage - 2; 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);
+      this.buildLi(origin, i, current);
+    }
+  }
+
+  private buildLi(origin: HTMLElement, i: number, current: number) {
+    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);
   }
 
   bindLeftList(current: number, totalpage: number, origin: HTMLElement): boolean {
+    let span;
     if (current < 5) {
       // 左边5个 中间 ... 右边2个
       for (let index = 0; index < 5; index++) {
-        const li = origin.cloneNode(true);
-        // @ts-ignore
-        li.innerText = index + 1;
-        if (index + 1 === current) {
-          this.setElementStyles(li, {
-            backgroundColor: PageNation.BtnBackColor,
-            color: PageNation.BtnColor,
-          });
-        }
-        this.list.appendChild(li);
+        this.buildLi(origin, index, current);
       }
-      var span = document.createElement('span');
+      span = document.createElement('span');
       span.innerText = '...';
       this.list.appendChild(span);
       for (let index = totalpage - 2; index < totalpage; index++) {
-        const li = origin.cloneNode(true);
-        // @ts-ignore
-        li.innerText = index + 1;
-        if (index + 1 === current) {
-          this.setElementStyles(li, {
-            backgroundColor: PageNation.BtnBackColor,
-            color: PageNation.BtnColor,
-          });
-        }
-        this.list.appendChild(li);
+        this.buildLi(origin, index, current);
       }
       return true;
     }
     if (current == 5) {
       // 左边5个 中间 ... 右边2个
       for (let i = 0; i < 7; 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);
+        this.buildLi(origin, i, current);
       }
-      var span = document.createElement('span');
+      span = document.createElement('span');
       span.innerText = '...';
       this.list.appendChild(span);
 
       for (let index = totalpage - 2; index < totalpage; index++) {
-        const liElement = origin.cloneNode(true);
-        // @ts-ignore
-        liElement.innerText = index + 1;
-        if (index + 1 === current) {
-          this.setElementStyles(liElement, {
-            backgroundColor: PageNation.BtnBackColor,
-            color: PageNation.BtnColor,
-          });
-        }
-        this.list.appendChild(liElement);
+        this.buildLi(origin, index, current);
       }
       return true;
     }
@@ -355,62 +297,26 @@ export class PageNation {
     if (current > totalpage - 4) {
       // 左边5个 中间 ... 右边2个
       for (let index = 0; index < 2; index++) {
-        const li = origin.cloneNode(true);
-        // @ts-ignore
-        li.innerText = index + 1;
-        if (index + 1 === current) {
-          this.setElementStyles(li, {
-            backgroundColor: PageNation.BtnBackColor,
-            color: PageNation.BtnColor,
-          });
-        }
-        this.list.appendChild(li);
+        this.buildLi(origin, index, current);
       }
-      var span = document.createElement('span');
+      span = document.createElement('span');
       span.innerText = '...';
       this.list.appendChild(span);
       for (let i = totalpage - 5; 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);
+        this.buildLi(origin, i, current);
       }
       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);
+        this.buildLi(origin, i, current);
       }
-      var span = document.createElement('span');
+      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);
+        this.buildLi(origin, i, current);
       }
       return true;
     }
diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts
index a7b633855465e0aec6429a0843dd4b1f1507fb28..6b8fc0bf6fda6740bf516ad77243aeec564fc2a6 100644
--- a/ide/src/base-ui/table/lit-table.ts
+++ b/ide/src/base-ui/table/lit-table.ts
@@ -257,7 +257,7 @@ export class LitTable extends HTMLElement {
             <div class="tbody">
                 <div class="tree"></div>
                 <div class="body"></div>
-        </div>
+            </div>
         </div>
         `;
   }
@@ -1738,25 +1738,25 @@ export class LitTable extends HTMLElement {
     );
   }
 
-  setCurrentSelection(data: any) {
+  setCurrentSelection(selectionData: any) {
     if (this.isRecycleList) {
-      if (data.isSelected != undefined) {
-        this.currentTreeDivList.forEach((item) => {
-          if ((item as any).data == data) {
-            this.setSelectedRow(data.isSelected, [item]);
+      if (selectionData.isSelected != undefined) {
+        this.currentTreeDivList.forEach((itemEl) => {
+          if ((itemEl as any).data == selectionData) {
+            this.setSelectedRow(selectionData.isSelected, [itemEl]);
           }
         });
-        this.currentRecycleList.forEach((item) => {
-          if ((item as any).data == data) {
-            this.setSelectedRow(data.isSelected, [item]);
+        this.currentRecycleList.forEach((recycleItem) => {
+          if ((recycleItem as any).data == selectionData) {
+            this.setSelectedRow(selectionData.isSelected, [recycleItem]);
           }
         });
       }
     } else {
-      if (data.isSelected != undefined) {
+      if (selectionData.isSelected != undefined) {
         this.normalDs.forEach((item) => {
-          if ((item as any).data == data) {
-            this.setSelectedRow(data.isSelected, [item]);
+          if ((item as any).data == selectionData) {
+            this.setSelectedRow(selectionData.isSelected, [item]);
           }
         });
       }
@@ -1768,14 +1768,14 @@ export class LitTable extends HTMLElement {
       this.setMouseIn(false, this.currentTreeDivList);
       this.setMouseIn(false, this.currentRecycleList);
       if (data.isHover != undefined) {
-        this.currentTreeDivList.forEach((item) => {
-          if ((item as any).data == data) {
-            this.setMouseIn(data.isHover, [item]);
+        this.currentTreeDivList.forEach((hoverItem) => {
+          if ((hoverItem as any).data == data) {
+            this.setMouseIn(data.isHover, [hoverItem]);
           }
         });
-        this.currentRecycleList.forEach((item) => {
-          if ((item as any).data == data) {
-            this.setMouseIn(data.isHover, [item]);
+        this.currentRecycleList.forEach((hoverItem) => {
+          if ((hoverItem as any).data == data) {
+            this.setMouseIn(data.isHover, [hoverItem]);
           }
         });
       }
@@ -1791,18 +1791,18 @@ export class LitTable extends HTMLElement {
     }
   }
 
-  dispatchRowClickEventIcon(rowObject: any, elements: any[]) {
+  dispatchRowClickEventIcon(rowData: any, elements: any[]) {
     this.dispatchEvent(
       new CustomEvent('icon-click', {
         detail: {
-          ...rowObject.data,
-          data: rowObject.data,
+          ...rowData.data,
+          data: rowData.data,
           callBack: (isSelected: boolean) => {
             //是否爲单选
             if (isSelected) {
-              this.clearAllSelection(rowObject.data);
+              this.clearAllSelection(rowData.data);
             }
-            this.setSelectedRow(rowObject.data.isSelected, elements);
+            this.setSelectedRow(rowData.data.isSelected, elements);
           },
         },
         composed: true,
diff --git a/ide/src/doc/md/quickstart_animation.md b/ide/src/doc/md/quickstart_animation.md
new file mode 100644
index 0000000000000000000000000000000000000000..59ded268af06ec94e089c409d05c3bb330ebe877
--- /dev/null
+++ b/ide/src/doc/md/quickstart_animation.md
@@ -0,0 +1,58 @@
+# Animation的抓取和展示说明
+通过动效模板的指标项对图形子系统和应用做动效卡顿类问题分析。
+### Animation抓取参数的配置
+![GitHub Logo](../../figures/animation/animationconfig.jpg)
+配置项说明：
++     Animation effect：动效配置项的总开关。
+### Animation展示说明
+将抓取的Animation文件导入到smartperf工具中，查看图形子系统和应用动效卡顿类问题。
+### Animation泳道图展示
+Animation的响应时延泳道图显示,泳道图的Slice会显示响应时延，如下图中的Completion delay(683.035938ms)。
+![GitHub Logo](../../figures/animation/anrsdelayrow.jpg)。
+Animation的动效曲线和帧间距的总泳道图，如图点击leashWindow40旁边的小齿轮可以切换leashWindow。
+![GitHub Logo](../../figures/animation/anrsallrow.jpg)。
+Animation的动效曲线泳道图展示，如下：
+![GitHub Logo](../../figures/animation/anieffectcurv.jpg)
+泳道图说明:
++     Animation Effect Curve旁边的齿轮显示的x,y,width,height,alpha是动效帧的属性值，可以切换。
++     Animation Effect Curve泳道图红色的曲线代表的是异常判断点，也就是相邻两帧属性值相同的异常时间区间。
+Animation的帧间距泳道图展示，如下:
+![GitHub Logo](../../figures/animation/framespacirow.jpg)
+泳道图说明:
++     Frame spacing泳道图显示相邻两帧在时间尺度上相对于设备物理屏幕的变化间距值。
+### 动效曲线泳道图点选功能
+点选动效曲线泳道图上的属性值会出现一个空心小圆点，Frame Dynamic的Tab页会显示相关信息。
+![GitHub Logo](../../figures/animation/anieffectcurvselect.jpg)
++     Timestamp： 时间戳信息。
++     Index： 属性索引。
++     Value：属性值。
+### 动效曲线泳道图框选功能
+框选动效曲线泳道图，Frame Dynamic的Tab页会显示框选范围内每个点的属性值。
+![GitHub Logo](../../figures/animation/anieffectcurvdrag.jpg)
++     Timestamp： 时间戳信息。
++     Index： 属性索引。
++     Value：属性值。
+### 帧间距泳道图点选功能
+点选帧间距泳道图，Frame spacing的Tab页会显示这一个点的帧间距计算数据，一个点要计算两个属性的的帧间距，所以需要显示两个属性的。
+![GitHub Logo](../../figures/animation/anispacingselect.jpg)
++     Timestamp： 时间戳信息。
++     Index： 属性索引。
++     property：动效宽度或高度属性。
++     Value2： 当前帧的属性值。
++     Value1： 前一帧的属性值。
++     Screen：存储设备的物理宽度/高度。
++     T2(s)： 当前帧的结束时间。
++     T1(s)： 前一帧的结束时间。
++     result：帧间距。
+### 帧间距泳道图框选功能
+框选帧间距泳道图，Frame spacing的Tab页会显示框选范围内帧间距数据。
+![GitHub Logo](../../figures/animation/anispacingdrag.jpg)
++     Timestamp： 时间戳信息。
++     Index： 属性索引。
++     property：动效宽度或高度属性。
++     Value2： 当前帧的属性值。
++     Value1： 前一帧的属性值。
++     Screen：存储设备的物理宽度/高度。
++     T2(s)： 当前帧的结束时间。
++     T1(s)： 前一帧的结束时间。
++     result：帧间距。
\ No newline at end of file
diff --git a/ide/src/doc/md/quickstart_app_startup.md b/ide/src/doc/md/quickstart_app_startup.md
new file mode 100644
index 0000000000000000000000000000000000000000..c57dda80c1cb35330d844d9eccae0d1a614d0c20
--- /dev/null
+++ b/ide/src/doc/md/quickstart_app_startup.md
@@ -0,0 +1,54 @@
+# App startup的抓取和展示说明
+应用启动分析功能主要是提供应用启动分析模板帮助系统调优人员做应用启动慢场景问题分析，快速查找系统侧启动慢阶段和耗时长调用栈信息。
+### App startup抓取参数的配置
+![GitHub Logo](../../figures/appstartup/appstartupconfig.jpg)
+配置项说明：
++     App startup：配置项的总开关。
+### App startup展示说明
+将抓取的App startup文件导入到smartperf工具中，查看应用启动各阶段耗时的情况。
+### App startup泳道图展示
+App startup的泳道图展示：
+![GitHub Logo](../../figures/appstartup/appstartuprow.jpg)
+应用启动包括六个阶段，分别是Process Creating(应用进程创建阶段)、Application Launching(加载应用阶段)、UI Ability Launching(加载UI Ability)、UI Ability OnForeground(应用进入前台)、First Frame - APP Phase(首帧渲染提交-应用)、First Frame - Render Phase(首帧渲染提交-Render Service)。每个阶段的Slice上都会显示出该阶段的时延。
+### App startup泳道图点选功能
+可以对启动各个阶段的Slice进行点选，点选后在最下方的弹出层中会展示点选数据的统计的tab页。
+以Process Creating的Slice点选为例：
+![GitHub Logo](../../figures/appstartup/appstartupslice.jpg)
++     StartTime(Relative)： 应用启动开始时间(相对时间)。
++     StartTime(Absolute)： 应用启动开始时间(绝对时间)。
++     EndTime(Relative)：应用启动的结束时间(相对时间)。
++     EndTime(Absolute)：应用启动的结束时间(绝对时间)。
++     Duration：应用启动的持续时间。
+### App startup泳道图Tab页跳转功能
+点击各阶段的起始或者结束时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。
+以Process Creating的跳转为例：
+![GitHub Logo](../../figures/appstartup/appstartupjump.jpg)
+跳转说明：
++     StartTime(Relative)的跳转： 跳转到H:virtual int OHOS::AAFwk::AbilityManagerService::StartAbility关键字函数。
++     EndTime(Relative)的跳转： 跳转到H:virtual void OHOS::AppExecFwk::AppMgrServiceInner::AttachApplication关键字函数，并且调用栈要带##应用名，如##com.ohos.smartperf。
+### App startup泳道图的框选功能
+应用启动阶段泳道图框选功能主要是框选启动分析泳道图之后，统计应用各个启动阶段的耗费时长信息。
+![GitHub Logo](../../figures/appstartup/appstartupdrag.jpg)
++     Process / Startup： 应用名称和启动阶段名称。
++     Duration：应用各阶段启动时长。
++     %：应用各阶段启动时长的占比。
+### So初始化泳道图展示
+So初始化的泳道图展示：
+![GitHub Logo](../../figures/appstartup/staticinitilizationrow.jpg)
+### So初始化泳道图的点选功能
+点选So初始化的Slice，展示该so初始化信息的tab页。
+![GitHub Logo](../../figures/appstartup/staticinitilizationslice.jpg)
++     Name：So的名称。
++     StartTime(Relative)：So初始化开始时间(相对时间)。
++     StartTime(Absolute)：So初始化开始时间(绝对时间)。
++     Duration：So初始化耗时。
+### So初始化泳道图Tab页跳转功能
+点击So初始化开始时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。
+![GitHub Logo](../../figures/appstartup/staticinitilizationjump.jpg)
+跳转说明：
++     StartTime(Relative)的跳转： 跳转到dlopen:  system/lib64/extensionability/libinputmethod_extension_module.z.so。
+### So初始化泳道图的框选功能
+So初始化泳道图框选功能主要是框选So初始化泳道图之后，统计各个进程下各个So的初始化耗费时长信息。
+![GitHub Logo](../../figures/appstartup/staticinitilizationdrag.jpg)
++     Process / Lib： 应用名称和So名称。
++     Duration：So的耗费时长。
\ No newline at end of file
diff --git a/ide/src/doc/md/quickstart_arkts.md b/ide/src/doc/md/quickstart_arkts.md
new file mode 100644
index 0000000000000000000000000000000000000000..0c70e942382b7a0aa0ac56c6013b51262f1b09b2
--- /dev/null
+++ b/ide/src/doc/md/quickstart_arkts.md
@@ -0,0 +1,44 @@
+# Cpuprofiler抓取和展示说明
+Cpuprofiler模板帮助ArkTs开发和测试分析虚拟机层执行开销大问题，提供Ts层耗时长函数和阶段。
+## Cpuprofiler的抓取
+#### Cpuprofiler的抓取配置参数
+打开Start Ark Ts Record总开关下面的Start cpu profiler开关抓取cpuprofiler数据。
+![GitHub Logo](../../figures/arkts/cpuprofilerconfig.jpg)
+### Cpuprofiler展示说明
+将抓取的cpuprofiler文件导入到smartperf中，查看Ts层耗时长的函数和阶段。
+![GitHub Logo](../../figures/arkts/cpuprofilerrow.jpg)
+### Cpuprofiler的泳道图悬浮显示
+鼠标放到泳道图的Slice上会有悬浮框显示。
+![GitHub Logo](../../figures/arkts/cpuprofilertip.jpg)
++     Name : 函数名。
++     Self Time: 函数自身执行时间(不包含其调用者)。
++     Total Time : 函数自身及调用者的调用时间总和。
++     Url : 函数所在的文件名称。
+### Cpuprofiler泳道图的点选和框选功能
+点选或者框选泳道图上函数名的Slice，会显示Js Profiler Statistics，Js Profiler CallTree，Js Profiler BottomUp的Tab页信息。
+Js Profiler Statistics的Tab页显示数据的维度信息，以饼图和Table表的方式展示，如下图：
+![GitHub Logo](../../figures/arkts/cpuprofilerselects.jpg)
+![GitHub Logo](../../figures/arkts/cpuprofilerdrags.jpg)
++     Type : 维度名称，有九大维度(NAPI、ARKUI_ENGINE、BUTLTIN、GC、AINT、CINT、AOT、RUNTIME、OTHER）。
++     Total : 时间。
++     % : 时间占比。
+Js Profiler CallTree的Tab页把name，url，depth，parent相同的函数合并，构建成一个top down的树结构，以树形表格的形式显示，表格中显示函数调用关系，如下图：
+![GitHub Logo](../../figures/arkts/cpuprofilerselectc.jpg)
+![GitHub Logo](../../figures/arkts/cpuprofilerdragc.jpg)
++     Symbol : 函数名。
++     Self Time: 函数自身执行时间(不包含其调用者)。
++     Total Time : 函数自身及调用者的调用时间总和。
+Js Profiler BottomUp的Tab页把name，url，depth，parent相同的函数合并，构建成一个bottom up的树结构，以树形表格的形式显示，只不过作为根节点的是被调用者，表格中显示函数被调用关系，如下图：
+![GitHub Logo](../../figures/arkts/cpuprofilerselectb.jpg)
+![GitHub Logo](../../figures/arkts/cpuprofilerdragb.jpg)
++     Symbol : 函数名。
++     Self Time: 函数自身执行时间(不包含其调用者)。
++     Total Time : 函数自身及调用者的调用时间总和。
+### Cpuprofiler的Heaviest Stack功能
+Js Profiler CallTree的Tab页的Heaviest Stack表格显示的是选中的函数的完整的调用栈。
+![GitHub Logo](../../figures/arkts/cpuprofilerheavic.jpg)
+Js Profiler BottomUp的Tab页的Heaviest Stack表格显示的是选中的函数的完整的逆序调用栈。
+![GitHub Logo](../../figures/arkts/cpuprofilerheavib.jpg)
++     Symbol : 函数名。
++     Total Time : 函数自身及调用者的调用时间总和。
++     % : 总时间占比。
\ No newline at end of file
diff --git a/ide/src/doc/md/quickstart_memory_template.md b/ide/src/doc/md/quickstart_memory_template.md
new file mode 100644
index 0000000000000000000000000000000000000000..d994f5a0c738ea70496106a5aa4f8f18079c5055
--- /dev/null
+++ b/ide/src/doc/md/quickstart_memory_template.md
@@ -0,0 +1,148 @@
+# 系统内存抓取和展示说明
+系统内存分析模板帮助系统内存调优人员进行进程内存拆解。
+## 系统内存的抓取
+#### 系统内存的抓取配置参数
+打开VM Tracker开关抓取内存数据。
+![GitHub Logo](../../figures/Allmemory/allmemorycofig.jpg)
+### 系统内存展示说明
+将抓取的内存文件导入到smartperf中，查看进程内存的情况。
+![GitHub Logo](../../figures/Allmemory/allmemoryrow.jpg)
+### 系统内存中Ability Monitor泳道图显示
+Ability Monitor泳道图分为MemoryTotal，Cached，SwapTotal，System Purgeable Total，System Purgeable Pin，DMA，Skia Gpu Memory泳道。
+![GitHub Logo](../../figures/Allmemory/abrow.jpg)
+### 系统内存中Ability Monitor泳道图点选功能
+System Purgeable Total泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/purtotalselect.jpg)
++     TimeStamp：时间戳。
++     ActivePurg：当前时间点的ActivePurg内存。
++     InActivePurg：当前时间点的InActivePurg内存。
++     ShmPurg：当前时间点的ShmPurg内存。
+System Purgeable Total泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/purtotaldrag.jpg)
++     Type：内存的类别。
++     AvgSize：当前内存的平均值。
++     MaxSize：当前内存的最大值。
++     MinSize：当前内存的最小值。
+System Purgeable Pin泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/purpinselect.jpg)
++     TimeStamp：时间戳。
++     PinedPurg：当前时间点的PinedPurg内存。
++     ShmPurg：当前时间点的ShmPurg内存。
+System Purgeable Pin泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/purpindrag.jpg)
++     Type：内存的类别。
++     AvgSize：当前内存的平均值。
++     MaxSize：当前内存的最大值。
++     MinSize：当前内存的最小值。
+DMA泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/dmaselect.jpg)
++     TimeStamp：时间戳。
++     Process(pid)：进程名(进程ID)。
++     Fd：DMA内存文件描述符。
++     Size：DMA内存大小。
++     Ino：Ino值。
++     ExpPid：申请者的进程号。
++     ExpTaskComm：ExpTaskComm的值。
++     BufName：DMA内存名。
++     ExpName：申请者的进程名。
++     Flag：去重标记，0表示正常，1表示进程内部重复数据，2表示进程间重复数据。
+DMA泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/dmadrag.jpg)
++     Process(pid)：进程名(进程ID)。
++     SumSize：DMA内存总量。
++     AvgSize：DMA内存的平均值。
++     MaxSize：DMA内存的最大值。
++     MinSize：DMA内存的最小值。
+Skia Gpu Memory泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/sgpumemselect.jpg)
++     TimeStamp：时间戳。
++     GpuName：Gpu名称。
++     Process(pid)：进程名(进程ID)。。
++     Size：对应进程的Gpu的使用size。
+Skia Gpu Memory泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/sgpumemdrag.jpg)
++     GpuName：Gpu名称。
++     Process(pid)：进程名(进程ID)。
++     SumSize：Gpu内存总量。
++     AvgSize：Gpu内存的平均值。
++     MaxSize：Gpu内存的最大值。
++     MinSize：Gpu内存的最小值。
+### VM Tracker下的smaps泳道图展示
+smaps泳道图分为Dirty，Swapped，RSS，PSS，USS泳道图。
+![GitHub Logo](../../figures/Allmemory/smapsallrow.jpg)
+### VM Tracker下的smaps泳道图的点选和框选功能
+点选和框选Dirty，Swapped，RSS，PSS，USS的5个泳道图中任一个显示的都是一样的内容，会显示Smaps Statistic和Smaps sample的tab页。
+Smaps Statistic的tab页展示。
+![GitHub Logo](../../figures/Allmemory/sstaaticstab.jpg)
++     Type： 将抓取到的信息根据Type归类。
++     Path：虚拟内存块路径，类型中有多个则显示multiple。
++     Size：在该虚拟内存块路径下内存的size总和。
++     % of Res： 每行的Resident Size 占总Ressident Size的比例。
++     Count：统计的类型个数。
++     Rss： smaps节点中Rss。
++     Pss： smaps节点中Pss。
++     SharedClean： smaps节点中SharedClean。
++     SharedDirty：smaps节点中Shared_Dirty。
++     PrivateClean： smaps节点中PrivateClean。
++     PrivateDirty：smaps节点中PrivateDirty。
++     Swap：smaps节点中Swap。
++     SwapPss：smaps节点中SwapPss。
+Smaps sample的tab页展示。
+![GitHub Logo](../../figures/Allmemory/ssampletab.jpg)
++     TimeStamp： 时间戳信息。
++     Type： 将抓取到的信息根据Type归类。
++     Path：虚拟内存块路径，类型中有多个则显示multiple。
++     Address Range：每段虚拟内存段的开始和结束位置。
++     Rss： smaps节点中Rss。
++     Pss： smaps节点中Pss。
++     SharedClean： smaps节点中SharedClean。
++     SharedDirty：smaps节点中Shared_Dirty。
++     PrivateClean： smaps节点中PrivateClean。
++     PrivateDirty：smaps节点中PrivateDirty。
++     Swap：smaps节点中Swap。
++     SwapPss：smaps节点中SwapPss。
++     Reside： Rss / Size 比值。
++     Protection： 内存块的权限(读写执行执行)。
+### VM Tracker下的GPU泳道图展示
+smaps泳道图分为GL，Skia Gpu Dump Toal，Skia Gpu Dump Window，Skia Gpu Memory泳道图。
+![GitHub Logo](../../figures/Allmemory/gpurow.jpg)
+Skia Gpu Memory泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/vgpumemselect.jpg)
++     TimeStamp：时间戳。
++     GpuName：Gpu名称。
++     Thread(tid)：线程名(线程ID)。
++     Size：对应线程的Gpu的使用size。
+Skia Gpu Memory泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/vgpumemdrag.jpg)
++     GpuName：Gpu名称。
++     Thread(tid)：线程名(线程ID)。
++     SumSize：Gpu内存总量。
++     AvgSize：Gpu内存的平均值。
++     MaxSize：Gpu内存的最大值。
++     MinSize：Gpu内存的最小值。
+Gl泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/vglrag.jpg)
++     TimeStamp：时间戳。
++     GL_PSS：GL_PSS的大小。
+Skia Gpu Dump Toal泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/vgputotalselect.jpg)
++     Module / Category：模块/目录。
++     Size：按照模块/目录显示size大小。
+Skia Gpu Dump Toal泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/vgputotaldrag.jpg)
++     TimeStamp：时间戳。
++     Module / Category：模块/目录。
++     AvgSize：对应模块/目录下size的平均值。
++     MaxSize：对应模块/目录下size的最大值。
++     MinSize：对应模块/目录下size的最小值。
+Skia Gpu Dump Window泳道图点选功能。
+![GitHub Logo](../../figures/Allmemory/vgpuwindowselect.jpg)
++     Window / Module / Category：窗口/模块/目录。
++     Size：按照窗口/模块/目录显示size大小。
+Skia Gpu Dump Window泳道图框选功能。
+![GitHub Logo](../../figures/Allmemory/vgpuwindowdrag.jpg)
++     TimeStamp：时间戳。
++     Window / Module / Category：窗口/模块/目录。
++     AvgSize：对应窗口/模块/目录下size的平均值。
++     MaxSize：对应窗口/模块/目录下size的最大值。
++     MinSize：对应窗口/模块/目录下size的最小值。
\ No newline at end of file
diff --git a/ide/src/doc/md/quickstart_taskpool.md b/ide/src/doc/md/quickstart_taskpool.md
new file mode 100644
index 0000000000000000000000000000000000000000..c3a98c17e1480d01c1d424b11bf5cd397c729abd
--- /dev/null
+++ b/ide/src/doc/md/quickstart_taskpool.md
@@ -0,0 +1,40 @@
+# TaskPool抓取和展示说明
+TaskPool分析模块主要展示应用程序使用taskpool时，任务的关联关系，任务调度开销和任务并发度分析情况，任务各阶段耗时情况，线程池的状态统计，队列任务数，任务是否超时。
+## TaskPool的抓取
+#### TaskPool的抓取配置参数
+打开Task pool开关抓取taskpool数据。
+![GitHub Logo](../../figures/Taskpool/taskpoolconfig.jpg)
+### TaskPool展示说明
+将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。
+![GitHub Logo](../../figures/Taskpool/taskpoolrow.jpg)
+### TaskPool的任务关联关系跟踪
+任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。
+![GitHub Logo](../../figures/Taskpool/taskpoolrelation.jpg)
+如上图所示，点击H:Task Perform: taskId : 2, executeId : 2的调用栈会出现红色连线，红色连线展示了executeId是2的任务的关联关系，连接的调用栈分别是：
++     H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1：任务分发。
++     H:Task Perform: taskId : 2, executeId : 2：任务执行。
++     H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful：任务返回。
+### TaskPool的并发度
+点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。
+![GitHub Logo](../../figures/Taskpool/taskpoolconcurrency.jpg)
+### TaskPool泳道图的点选功能
+点选taskpool的Slice，展示该taskpool信息的tab页。
+![GitHub Logo](../../figures/Taskpool/taskpoolselect.jpg)
++     Name： 任务调用栈名称。
++     StartTime： 任务调用栈开始时间。
++     Duration：任务调用栈持续时间。
++     depth：调用栈层级。
+### TaskPool泳道图的框选功能
+框选taskpool的泳道图，展示Frames的tab页。
+![GitHub Logo](../../figures/Taskpool/taskpooldrag.jpg)
++     Execute Id： 任务id。
++     Task Priority： 任务优先级(HIGH，MEDIUM，LOW)。
++     Scheduling Time(ms)：调度耗时(任务执行起始时间 - 任务分发起始时间)。
++     Execution Time(ms)：执行耗时(任务执行的duration)。
++     Return Time(ms)：返回耗时(任务返回的结束时间 – 任务执行的结束时间)。
+### TaskPool的队列任务数和线程池里线程状态统计
+![GitHub Logo](../../figures/Taskpool/taskpoolnum.jpg)
+如上图，H:threadNum，H:runningThreadNum，H:idleThreadNum，H:timeoutThreadNum是线程池里线程状态统计，H:taskNum是队列任务数。
+### TaskPool的任务超时退出
+在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。
+![GitHub Logo](../../figures/Taskpool/taskpoolexit.jpg)
\ No newline at end of file
diff --git a/ide/src/doc/quickstart_animation.html b/ide/src/doc/quickstart_animation.html
new file mode 100644
index 0000000000000000000000000000000000000000..14b377cdfcbe978b86cc2d683d3301673a578e29
--- /dev/null
+++ b/ide/src/doc/quickstart_animation.html
@@ -0,0 +1,1049 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <title>quickstart_animation</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: 0.9em;
+      overflow: auto;
+      border-radius: 2px;
+      background: #f5f5f4;
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*='smartperf-'] {
+      white-space: normal;
+      background: #fcf8f8;
+      padding: 1px 0.2em;
+      border-radius: 1px 0.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 0.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%, 0.08);
+      background: linear-gradient(to right, hsla(24, 20%, 50%, 0.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: 0.3em;
+      left: 0.7em;
+      min-width: 0.9em;
+      padding: 1px 0.6em;
+      background-color: hsla(24, 20%, 47%, 0.4);
+      color: hsl(20, 11%, 95%);
+      text-align: center;
+      vertical-align: 0.2em;
+      border-radius: 10000px;
+      box-shadow: 1px 2px #fdf6f6;
+    }
+
+    pre[dl] .line-highlight[data-end]:after {
+      content: attr(data-end);
+      top: auto;
+      bottom: 0.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: 0.3em;
+    }
+
+    html body h2 {
+      font-weight: 410;
+      font-size: 1.74em;
+      padding-bottom: 0.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 0.3em 0.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: 0.86em !important;
+      color: #000000;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      padding: 0.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: 0.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: 0.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: 0.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: 0.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: 0.9em;
+    }
+
+    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
+      margin-bottom: 0.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">Animation的抓取和展示说明</h1>
+
+  <p class="fontColor">通过动效模板的指标项对图形子系统和应用做动效卡顿类问题分析。</p>
+  <h3 class="mume-header fontColor">Animation抓取参数的配置</h3>
+
+  <p class="fontColor">
+    <img src="../figures/animation/animationconfig.jpg" alt="GitHub Logo"/><br/>
+    配置项说明：
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Animation effect：动效配置项的总开关。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">Animation展示说明</h3>
+
+  <p class="fontColor">将抓取的Animation文件导入到smartperf工具中，查看图形子系统和应用动效卡顿类问题。</p>
+  <h3 class="mume-header fontColor">Animation泳道图展示</h3>
+
+  <p class="fontColor">
+    Animation的响应时延泳道图显示,泳道图的Slice会显示响应时延，如下图中的Completion delay(683.035938ms)。<br/>
+    <img src="../figures/animation/anrsdelayrow.jpg" alt="GitHub Logo"/>。<br/>
+    Animation的动效曲线和帧间距的总泳道图，如图点击leashWindow40旁边的小齿轮可以切换leashWindow。<br/>
+    <img src="../figures/animation/anrsallrow.jpg" alt="GitHub Logo"/>。<br/>
+    Animation的动效曲线泳道图展示，如下：<br/>
+    <img src="../figures/animation/anieffectcurv.jpg" alt="GitHub Logo"/><br/>
+    泳道图说明:
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Animation Effect Curve旁边的齿轮显示的x,y,width,height,alpha是动效帧的属性值，可以切换。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Animation Effect Curve泳道图红色的曲线代表的是异常判断点，也就是相邻两帧属性值相同的异常时间区间。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Animation的帧间距泳道图展示，如下:<br/>
+    <img src="../figures/animation/framespacirow.jpg" alt="GitHub Logo"/><br/>
+    泳道图说明:
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Frame spacing泳道图显示相邻两帧在时间尺度上相对于设备物理屏幕的变化间距值。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">动效曲线泳道图点选功能</h3>
+
+  <p class="fontColor">
+    点选动效曲线泳道图上的属性值会出现一个空心小圆点，Frame Dynamic的Tab页会显示相关信息。<br/>
+    <img src="../figures/animation/anieffectcurvselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Timestamp： 时间戳信息。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Index： 属性索引。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Value：属性值。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">动效曲线泳道图框选功能</h3>
+
+  <p class="fontColor">
+    框选动效曲线泳道图，Frame Dynamic的Tab页会显示框选范围内每个点的属性值。<br/>
+    <img src="../figures/animation/anieffectcurvdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Timestamp： 时间戳信息。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Index： 属性索引。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Value：属性值。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">帧间距泳道图点选功能</h3>
+
+  <p class="fontColor">
+    点选帧间距泳道图，Frame
+    spacing的Tab页会显示这一个点的帧间距计算数据，一个点要计算两个属性的的帧间距，所以需要显示两个属性的。<br/>
+    <img src="../figures/animation/anispacingselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Timestamp： 时间戳信息。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Index： 属性索引。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+property：动效宽度或高度属性。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Value2： 当前帧的属性值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Value1： 前一帧的属性值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Screen：存储设备的物理宽度/高度。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+T2(s)： 当前帧的结束时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+T1(s)： 前一帧的结束时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+result：帧间距。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">帧间距泳道图框选功能</h3>
+
+  <p class="fontColor">
+    框选帧间距泳道图，Frame spacing的Tab页会显示框选范围内帧间距数据。<br/>
+    <img src="../figures/animation/anispacingdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Timestamp： 时间戳信息。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Index： 属性索引。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+property：动效宽度或高度属性。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Value2： 当前帧的属性值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Value1： 前一帧的属性值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Screen：存储设备的物理宽度/高度。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+T2(s)： 当前帧的结束时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+T1(s)： 前一帧的结束时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+result：帧间距。
+</pre
+>
+    </li>
+  </ul>
+</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>
diff --git a/ide/src/doc/quickstart_app_startup.html b/ide/src/doc/quickstart_app_startup.html
new file mode 100644
index 0000000000000000000000000000000000000000..ad983ba732d10c848150320c49494a264233b110
--- /dev/null
+++ b/ide/src/doc/quickstart_app_startup.html
@@ -0,0 +1,1007 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <title>quickstart_app_startup</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: 0.9em;
+      overflow: auto;
+      border-radius: 2px;
+      background: #f5f5f4;
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*='smartperf-'] {
+      white-space: normal;
+      background: #fcf8f8;
+      padding: 1px 0.2em;
+      border-radius: 1px 0.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 0.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%, 0.08);
+      background: linear-gradient(to right, hsla(24, 20%, 50%, 0.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: 0.3em;
+      left: 0.7em;
+      min-width: 0.9em;
+      padding: 1px 0.6em;
+      background-color: hsla(24, 20%, 47%, 0.4);
+      color: hsl(20, 11%, 95%);
+      text-align: center;
+      vertical-align: 0.2em;
+      border-radius: 10000px;
+      box-shadow: 1px 2px #fdf6f6;
+    }
+
+    pre[dl] .line-highlight[data-end]:after {
+      content: attr(data-end);
+      top: auto;
+      bottom: 0.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: 0.3em;
+    }
+
+    html body h2 {
+      font-weight: 410;
+      font-size: 1.74em;
+      padding-bottom: 0.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 0.3em 0.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: 0.86em !important;
+      color: #000000;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      padding: 0.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: 0.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: 0.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: 0.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: 0.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: 0.9em;
+    }
+
+    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
+      margin-bottom: 0.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">App startup的抓取和展示说明</h1>
+
+  <p class="fontColor">
+    应用启动分析功能主要是提供应用启动分析模板帮助系统调优人员做应用启动慢场景问题分析，快速查找系统侧启动慢阶段和耗时长调用栈信息。
+  </p>
+  <h3 class="mume-header fontColor">App startup抓取参数的配置</h3>
+
+  <p class="fontColor">
+    <img src="../figures/appstartup/appstartupconfig.jpg" alt="GitHub Logo"/><br/>
+    配置项说明：
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+App startup：配置项的总开关。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">App startup展示说明</h3>
+
+  <p class="fontColor">将抓取的App startup文件导入到smartperf工具中，查看应用启动各阶段耗时的情况。</p>
+  <h3 class="mume-header fontColor">App startup泳道图展示</h3>
+
+  <p class="fontColor">
+    App startup的泳道图展示：<br/>
+    <img src="../figures/appstartup/appstartuprow.jpg" alt="GitHub Logo"/><br/>
+    应用启动包括六个阶段，分别是Process Creating(应用进程创建阶段)、Application Launching(加载应用阶段)、UI Ability
+    Launching(加载UI Ability)、UI Ability OnForeground(应用进入前台)、First Frame - APP
+    Phase(首帧渲染提交-应用)、First Frame - Render Phase(首帧渲染提交-Render
+    Service)。每个阶段的Slice上都会显示出该阶段的时延。
+  </p>
+  <h3 class="mume-header fontColor">App startup泳道图点选功能</h3>
+
+  <p class="fontColor">
+    可以对启动各个阶段的Slice进行点选，点选后在最下方的弹出层中会展示点选数据的统计的tab页。<br/>
+    以Process Creating的Slice点选为例：<br/>
+    <img src="../figures/appstartup/appstartupslice.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime(Relative)： 应用启动开始时间(相对时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime(Absolute)： 应用启动开始时间(绝对时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+EndTime(Relative)：应用启动的结束时间(相对时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+EndTime(Absolute)：应用启动的结束时间(绝对时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Duration：应用启动的持续时间。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">App startup泳道图Tab页跳转功能</h3>
+
+  <p class="fontColor">
+    点击各阶段的起始或者结束时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。<br/>
+    以Process Creating的跳转为例：<br/>
+    <img src="../figures/appstartup/appstartupjump.jpg" alt="GitHub Logo"/><br/>
+    跳转说明：
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime(Relative)的跳转： 跳转到H:virtual int OHOS::AAFwk::AbilityManagerService::StartAbility关键字函数。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+EndTime(Relative)的跳转： 跳转到H:virtual void OHOS::AppExecFwk::AppMgrServiceInner::AttachApplication关键字函数，并且调用栈要带##应用名，如##com.ohos.smartperf。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">App startup泳道图的框选功能</h3>
+
+  <p class="fontColor">
+    应用启动阶段泳道图框选功能主要是框选启动分析泳道图之后，统计应用各个启动阶段的耗费时长信息。<br/>
+    <img src="../figures/appstartup/appstartupdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Process / Startup： 应用名称和启动阶段名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Duration：应用各阶段启动时长。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+%：应用各阶段启动时长的占比。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">So初始化泳道图展示</h3>
+
+  <p class="fontColor">
+    So初始化的泳道图展示：<br/>
+    <img src="../figures/appstartup/staticinitilizationrow.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">So初始化泳道图的点选功能</h3>
+
+  <p class="fontColor">
+    点选So初始化的Slice，展示该so初始化信息的tab页。<br/>
+    <img src="../figures/appstartup/staticinitilizationslice.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Name：So的名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime(Relative)：So初始化开始时间(相对时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime(Absolute)：So初始化开始时间(绝对时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Duration：So初始化耗时。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">So初始化泳道图Tab页跳转功能</h3>
+
+  <p class="fontColor">
+    点击So初始化开始时间后面的跳转图标，跳转至关联Slice，并显示该Slice的详细信息。<br/>
+    <img src="../figures/appstartup/staticinitilizationjump.jpg" alt="GitHub Logo"/><br/>
+    跳转说明：
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime(Relative)的跳转： 跳转到dlopen:  system/lib64/extensionability/libinputmethod_extension_module.z.so。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">So初始化泳道图的框选功能</h3>
+
+  <p class="fontColor">
+    So初始化泳道图框选功能主要是框选So初始化泳道图之后，统计各个进程下各个So的初始化耗费时长信息。<br/>
+    <img src="../figures/appstartup/staticinitilizationdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Process / Lib： 应用名称和So名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Duration：So的耗费时长。
+</pre
+>
+    </li>
+  </ul>
+</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>
diff --git a/ide/src/doc/quickstart_arkts.html b/ide/src/doc/quickstart_arkts.html
new file mode 100644
index 0000000000000000000000000000000000000000..0fa3d112bc2438d447956e844c02eba5b19e23e0
--- /dev/null
+++ b/ide/src/doc/quickstart_arkts.html
@@ -0,0 +1,972 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <title>quickstart_arkts</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: 0.9em;
+      overflow: auto;
+      border-radius: 2px;
+      background: #f5f5f4;
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*='smartperf-'] {
+      white-space: normal;
+      background: #fcf8f8;
+      padding: 1px 0.2em;
+      border-radius: 1px 0.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 0.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%, 0.08);
+      background: linear-gradient(to right, hsla(24, 20%, 50%, 0.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: 0.3em;
+      left: 0.7em;
+      min-width: 0.9em;
+      padding: 1px 0.6em;
+      background-color: hsla(24, 20%, 47%, 0.4);
+      color: hsl(20, 11%, 95%);
+      text-align: center;
+      vertical-align: 0.2em;
+      border-radius: 10000px;
+      box-shadow: 1px 2px #fdf6f6;
+    }
+
+    pre[dl] .line-highlight[data-end]:after {
+      content: attr(data-end);
+      top: auto;
+      bottom: 0.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: 0.3em;
+    }
+
+    html body h2 {
+      font-weight: 410;
+      font-size: 1.74em;
+      padding-bottom: 0.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 0.3em 0.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: 0.86em !important;
+      color: #000000;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      padding: 0.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: 0.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: 0.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: 0.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: 0.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: 0.9em;
+    }
+
+    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
+      margin-bottom: 0.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">Cpuprofiler抓取和展示说明</h1>
+
+  <p class="fontColor">Cpuprofiler模板帮助ArkTs开发和测试分析虚拟机层执行开销大问题，提供Ts层耗时长函数和阶段。</p>
+  <h2 class="mume-header fontColor">Cpuprofiler的抓取</h2>
+
+  <h4 class="mume-header fontColor">Cpuprofiler的抓取配置参数</h4>
+
+  <p class="fontColor">
+    打开Start Ark Ts Record总开关下面的Start cpu profiler开关抓取cpuprofiler数据。<br/>
+    <img src="../figures/arkts/cpuprofilerconfig.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">Cpuprofiler展示说明</h3>
+
+  <p class="fontColor">
+    将抓取的cpuprofiler文件导入到smartperf中，查看Ts层耗时长的函数和阶段。<br/>
+    <img src="../figures/arkts/cpuprofilerrow.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">Cpuprofiler的泳道图悬浮显示</h3>
+
+  <p class="fontColor">
+    鼠标放到泳道图的Slice上会有悬浮框显示。<br/>
+    <img src="../figures/arkts/cpuprofilertip.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Name : 函数名。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Self Time: 函数自身执行时间(不包含其调用者)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Total Time : 函数自身及调用者的调用时间总和。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Url : 函数所在的文件名称。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">Cpuprofiler泳道图的点选和框选功能</h3>
+
+  <p class="fontColor">
+    点选或者框选泳道图上函数名的Slice，会显示Js Profiler Statistics，Js Profiler CallTree，Js Profiler
+    BottomUp的Tab页信息。<br/>
+    Js Profiler Statistics的Tab页显示数据的维度信息，以饼图和Table表的方式展示，如下图：<br/>
+    <img src="../figures/arkts/cpuprofilerselects.jpg" alt="GitHub Logo"/><br/>
+    <img src="../figures/arkts/cpuprofilerdrags.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Type : 维度名称，有九大维度(NAPI、ARKUI_ENGINE、BUTLTIN、GC、AINT、CINT、AOT、RUNTIME、OTHER）。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Total : 时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+% : 时间占比。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Js Profiler CallTree的Tab页把name，url，depth，parent相同的函数合并，构建成一个top
+    down的树结构，以树形表格的形式显示，表格中显示函数调用关系，如下图：<br/>
+    <img src="../figures/arkts/cpuprofilerselectc.jpg" alt="GitHub Logo"/><br/>
+    <img src="../figures/arkts/cpuprofilerdragc.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Symbol : 函数名。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Self Time: 函数自身执行时间(不包含其调用者)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Total Time : 函数自身及调用者的调用时间总和。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Js Profiler BottomUp的Tab页把name，url，depth，parent相同的函数合并，构建成一个bottom
+    up的树结构，以树形表格的形式显示，只不过作为根节点的是被调用者，表格中显示函数被调用关系，如下图：<br/>
+    <img src="../figures/arkts/cpuprofilerselectb.jpg" alt="GitHub Logo"/><br/>
+    <img src="../figures/arkts/cpuprofilerdragb.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Symbol : 函数名。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Self Time: 函数自身执行时间(不包含其调用者)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Total Time : 函数自身及调用者的调用时间总和。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">Cpuprofiler的Heaviest Stack功能</h3>
+
+  <p class="fontColor">
+    Js Profiler CallTree的Tab页的Heaviest Stack表格显示的是选中的函数的完整的调用栈。<br/>
+    <img src="../figures/arkts/cpuprofilerheavic.jpg" alt="GitHub Logo"/><br/>
+    Js Profiler BottomUp的Tab页的Heaviest Stack表格显示的是选中的函数的完整的逆序调用栈。<br/>
+    <img src="../figures/arkts/cpuprofilerheavib.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Symbol : 函数名。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Total Time : 函数自身及调用者的调用时间总和。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+% : 总时间占比。
+</pre
+>
+    </li>
+  </ul>
+</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>
diff --git a/ide/src/doc/quickstart_memory_template.html b/ide/src/doc/quickstart_memory_template.html
new file mode 100644
index 0000000000000000000000000000000000000000..1a30ce5e413f8b5cf8b089f5155f45e7aba9f679
--- /dev/null
+++ b/ide/src/doc/quickstart_memory_template.html
@@ -0,0 +1,1516 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <title>quickstart_memory_template</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: 0.9em;
+      overflow: auto;
+      border-radius: 2px;
+      background: #f5f5f4;
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*='smartperf-'] {
+      white-space: normal;
+      background: #fcf8f8;
+      padding: 1px 0.2em;
+      border-radius: 1px 0.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 0.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%, 0.08);
+      background: linear-gradient(to right, hsla(24, 20%, 50%, 0.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: 0.3em;
+      left: 0.7em;
+      min-width: 0.9em;
+      padding: 1px 0.6em;
+      background-color: hsla(24, 20%, 47%, 0.4);
+      color: hsl(20, 11%, 95%);
+      text-align: center;
+      vertical-align: 0.2em;
+      border-radius: 10000px;
+      box-shadow: 1px 2px #fdf6f6;
+    }
+
+    pre[dl] .line-highlight[data-end]:after {
+      content: attr(data-end);
+      top: auto;
+      bottom: 0.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: 0.3em;
+    }
+
+    html body h2 {
+      font-weight: 410;
+      font-size: 1.74em;
+      padding-bottom: 0.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 0.3em 0.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: 0.86em !important;
+      color: #000000;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      padding: 0.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: 0.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: 0.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: 0.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: 0.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: 0.9em;
+    }
+
+    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
+      margin-bottom: 0.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">系统内存分析模板帮助系统内存调优人员进行进程内存拆解。</p>
+  <h2 class="mume-header fontColor">系统内存的抓取</h2>
+
+  <h4 class="mume-header fontColor">系统内存的抓取配置参数</h4>
+
+  <p class="fontColor">
+    打开VM Tracker开关抓取内存数据。<br/>
+    <img src="../figures/Allmemory/allmemorycofig.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">系统内存展示说明</h3>
+
+  <p class="fontColor">
+    将抓取的内存文件导入到smartperf中，查看进程内存的情况。<br/>
+    <img src="../figures/Allmemory/allmemoryrow.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">系统内存中Ability Monitor泳道图显示</h3>
+
+  <p class="fontColor">
+    Ability Monitor泳道图分为MemoryTotal，Cached，SwapTotal，System Purgeable Total，System Purgeable Pin，DMA，Skia
+    Gpu Memory泳道。<br/>
+    <img src="../figures/Allmemory/abrow.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">系统内存中Ability Monitor泳道图点选功能</h3>
+
+  <p class="fontColor">
+    System Purgeable Total泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/purtotalselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+ActivePurg：当前时间点的ActivePurg内存。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+InActivePurg：当前时间点的InActivePurg内存。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+ShmPurg：当前时间点的ShmPurg内存。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    System Purgeable Total泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/purtotaldrag.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">
+AvgSize：当前内存的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：当前内存的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：当前内存的最小值。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    System Purgeable Pin泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/purpinselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+PinedPurg：当前时间点的PinedPurg内存。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+ShmPurg：当前时间点的ShmPurg内存。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    System Purgeable Pin泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/purpindrag.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">
+AvgSize：当前内存的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：当前内存的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：当前内存的最小值。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    DMA泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/dmaselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Process(pid)：进程名(进程ID)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Fd：DMA内存文件描述符。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Size：DMA内存大小。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Ino：Ino值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+ExpPid：申请者的进程号。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+ExpTaskComm：ExpTaskComm的值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+BufName：DMA内存名。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+ExpName：申请者的进程名。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Flag：去重标记，0表示正常，1表示进程内部重复数据，2表示进程间重复数据。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    DMA泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/dmadrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Process(pid)：进程名(进程ID)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SumSize：DMA内存总量。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+AvgSize：DMA内存的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：DMA内存的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：DMA内存的最小值。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Memory泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/sgpumemselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+GpuName：Gpu名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Process(pid)：进程名(进程ID)。。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Size：对应进程的Gpu的使用size。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Memory泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/sgpumemdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+GpuName：Gpu名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Process(pid)：进程名(进程ID)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SumSize：Gpu内存总量。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+AvgSize：Gpu内存的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：Gpu内存的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：Gpu内存的最小值。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">VM Tracker下的smaps泳道图展示</h3>
+
+  <p class="fontColor">
+    smaps泳道图分为Dirty，Swapped，RSS，PSS，USS泳道图。<br/>
+    <img src="../figures/Allmemory/smapsallrow.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">VM Tracker下的smaps泳道图的点选和框选功能</h3>
+
+  <p class="fontColor">
+    点选和框选Dirty，Swapped，RSS，PSS，USS的5个泳道图中任一个显示的都是一样的内容，会显示Smaps Statistic和Smaps
+    sample的tab页。<br/>
+    Smaps Statistic的tab页展示。<br/>
+    <img src="../figures/Allmemory/sstaaticstab.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Type： 将抓取到的信息根据Type归类。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Path：虚拟内存块路径，类型中有多个则显示multiple。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Size：在该虚拟内存块路径下内存的size总和。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+% of Res： 每行的Resident Size 占总Ressident Size的比例。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Count：统计的类型个数。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Rss： smaps节点中Rss。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Pss： smaps节点中Pss。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SharedClean： smaps节点中SharedClean。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SharedDirty：smaps节点中Shared_Dirty。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+PrivateClean： smaps节点中PrivateClean。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+PrivateDirty：smaps节点中PrivateDirty。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Swap：smaps节点中Swap。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SwapPss：smaps节点中SwapPss。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Smaps sample的tab页展示。<br/>
+    <img src="../figures/Allmemory/ssampletab.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp： 时间戳信息。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Type： 将抓取到的信息根据Type归类。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Path：虚拟内存块路径，类型中有多个则显示multiple。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Address Range：每段虚拟内存段的开始和结束位置。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Rss： smaps节点中Rss。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Pss： smaps节点中Pss。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SharedClean： smaps节点中SharedClean。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SharedDirty：smaps节点中Shared_Dirty。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+PrivateClean： smaps节点中PrivateClean。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+PrivateDirty：smaps节点中PrivateDirty。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Swap：smaps节点中Swap。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SwapPss：smaps节点中SwapPss。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Reside： Rss / Size 比值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Protection： 内存块的权限(读写执行执行)。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">VM Tracker下的GPU泳道图展示</h3>
+
+  <p class="fontColor">
+    smaps泳道图分为GL，Skia Gpu Dump Toal，Skia Gpu Dump Window，Skia Gpu Memory泳道图。<br/>
+    <img src="../figures/Allmemory/gpurow.jpg" alt="GitHub Logo"/><br/>
+    Skia Gpu Memory泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/vgpumemselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+GpuName：Gpu名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Thread(tid)：线程名(线程ID)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Size：对应线程的Gpu的使用size。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Memory泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/vgpumemdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+GpuName：Gpu名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Thread(tid)：线程名(线程ID)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+SumSize：Gpu内存总量。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+AvgSize：Gpu内存的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：Gpu内存的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：Gpu内存的最小值。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Gl泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/vglrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+GL_PSS：GL_PSS的大小。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Dump Toal泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/vgputotalselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Module / Category：模块/目录。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Size：按照模块/目录显示size大小。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Dump Toal泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/vgputotaldrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Module / Category：模块/目录。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+AvgSize：对应模块/目录下size的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：对应模块/目录下size的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：对应模块/目录下size的最小值。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Dump Window泳道图点选功能。<br/>
+    <img src="../figures/Allmemory/vgpuwindowselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Window / Module / Category：窗口/模块/目录。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Size：按照窗口/模块/目录显示size大小。
+</pre
+>
+    </li>
+  </ul>
+  <p class="fontColor">
+    Skia Gpu Dump Window泳道图框选功能。<br/>
+    <img src="../figures/Allmemory/vgpuwindowdrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+TimeStamp：时间戳。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Window / Module / Category：窗口/模块/目录。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+AvgSize：对应窗口/模块/目录下size的平均值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MaxSize：对应窗口/模块/目录下size的最大值。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+MinSize：对应窗口/模块/目录下size的最小值。
+</pre
+>
+    </li>
+  </ul>
+</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>
diff --git a/ide/src/doc/quickstart_taskpool.html b/ide/src/doc/quickstart_taskpool.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f8a298cc4e4d3b59e3fecc792a383ef3f97b734
--- /dev/null
+++ b/ide/src/doc/quickstart_taskpool.html
@@ -0,0 +1,950 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+  <title>quickstart_taskpool</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: 0.9em;
+      overflow: auto;
+      border-radius: 2px;
+      background: #f5f5f4;
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*='smartperf-'] {
+      white-space: normal;
+      background: #fcf8f8;
+      padding: 1px 0.2em;
+      border-radius: 1px 0.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 0.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%, 0.08);
+      background: linear-gradient(to right, hsla(24, 20%, 50%, 0.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: 0.3em;
+      left: 0.7em;
+      min-width: 0.9em;
+      padding: 1px 0.6em;
+      background-color: hsla(24, 20%, 47%, 0.4);
+      color: hsl(20, 11%, 95%);
+      text-align: center;
+      vertical-align: 0.2em;
+      border-radius: 10000px;
+      box-shadow: 1px 2px #fdf6f6;
+    }
+
+    pre[dl] .line-highlight[data-end]:after {
+      content: attr(data-end);
+      top: auto;
+      bottom: 0.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: 0.3em;
+    }
+
+    html body h2 {
+      font-weight: 410;
+      font-size: 1.74em;
+      padding-bottom: 0.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 0.3em 0.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: 0.86em !important;
+      color: #000000;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+      padding: 0.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: 0.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: 0.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: 0.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: 0.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: 0.9em;
+    }
+
+    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
+      margin-bottom: 0.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">TaskPool抓取和展示说明</h1>
+
+  <p class="fontColor">
+    TaskPool分析模块主要展示应用程序使用taskpool时，任务的关联关系，任务调度开销和任务并发度分析情况，任务各阶段耗时情况，线程池的状态统计，队列任务数，任务是否超时。
+  </p>
+  <h2 class="mume-header fontColor">TaskPool的抓取</h2>
+
+  <h4 class="mume-header fontColor">TaskPool的抓取配置参数</h4>
+
+  <p class="fontColor">
+    打开Task pool开关抓取taskpool数据。<br/>
+    <img src="../figures/Taskpool/taskpoolconfig.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">TaskPool展示说明</h3>
+
+  <p class="fontColor">
+    将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。<br/>
+    <img src="../figures/Taskpool/taskpoolrow.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">TaskPool的任务关联关系跟踪</h3>
+
+  <p class="fontColor">
+    任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。<br/>
+    <img src="../figures/Taskpool/taskpoolrelation.jpg" alt="GitHub Logo"/><br/>
+    如上图所示，点击H:Task Perform: taskId : 2, executeId :
+    2的调用栈会出现红色连线，红色连线展示了executeId是2的任务的关联关系，连接的调用栈分别是：
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1：任务分发。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+H:Task Perform: taskId : 2, executeId : 2：任务执行。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful：任务返回。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">TaskPool的并发度</h3>
+
+  <p class="fontColor">
+    点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。<br/>
+    <img src="../figures/Taskpool/taskpoolconcurrency.jpg" alt="GitHub Logo"/>
+  </p>
+  <h3 class="mume-header fontColor">TaskPool泳道图的点选功能</h3>
+
+  <p class="fontColor">
+    点选taskpool的Slice，展示该taskpool信息的tab页。<br/>
+    <img src="../figures/Taskpool/taskpoolselect.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Name： 任务调用栈名称。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+StartTime： 任务调用栈开始时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Duration：任务调用栈持续时间。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+depth：调用栈层级。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">TaskPool泳道图的框选功能</h3>
+
+  <p class="fontColor">
+    框选taskpool的泳道图，展示Frames的tab页。<br/>
+    <img src="../figures/Taskpool/taskpooldrag.jpg" alt="GitHub Logo"/>
+  </p>
+  <ul class="fontColor">
+    <li>
+          <pre class="smartperf-text fontColor light">
+Execute Id： 任务id。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Task Priority： 任务优先级(HIGH，MEDIUM，LOW)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Scheduling Time(ms)：调度耗时(任务执行起始时间 - 任务分发起始时间)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Execution Time(ms)：执行耗时(任务执行的duration)。
+</pre
+>
+    </li>
+    <li>
+          <pre class="smartperf-text fontColor light">
+Return Time(ms)：返回耗时(任务返回的结束时间 – 任务执行的结束时间)。
+</pre
+>
+    </li>
+  </ul>
+  <h3 class="mume-header fontColor">TaskPool的队列任务数和线程池里线程状态统计</h3>
+
+  <p class="fontColor">
+    <img src="../figures/Taskpool/taskpoolnum.jpg" alt="GitHub Logo"/><br/>
+    如上图，H:threadNum，H:runningThreadNum，H:idleThreadNum，H:timeoutThreadNum是线程池里线程状态统计，H:taskNum是队列任务数。
+  </p>
+  <h3 class="mume-header fontColor">TaskPool的任务超时退出</h3>
+
+  <p class="fontColor">
+    在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。<br/>
+    <img src="../figures/Taskpool/taskpoolexit.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>
diff --git a/ide/src/figures/Allmemory/abrow.jpg b/ide/src/figures/Allmemory/abrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..29109709f1f68c90bf17c3bf96cfa7d70360ae45
Binary files /dev/null and b/ide/src/figures/Allmemory/abrow.jpg differ
diff --git a/ide/src/figures/Allmemory/allmemorycofig.jpg b/ide/src/figures/Allmemory/allmemorycofig.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..faf529a58e9cc2659853d452f65a46752e798106
Binary files /dev/null and b/ide/src/figures/Allmemory/allmemorycofig.jpg differ
diff --git a/ide/src/figures/Allmemory/allmemoryrow.jpg b/ide/src/figures/Allmemory/allmemoryrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fcc833db6bfe7c2ea0c699829a0c0c9b0a475dd8
Binary files /dev/null and b/ide/src/figures/Allmemory/allmemoryrow.jpg differ
diff --git a/ide/src/figures/Allmemory/dmadrag.jpg b/ide/src/figures/Allmemory/dmadrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..79b6e4b1db8a615a2d03b8f3a050abae7cff999d
Binary files /dev/null and b/ide/src/figures/Allmemory/dmadrag.jpg differ
diff --git a/ide/src/figures/Allmemory/dmaselect.jpg b/ide/src/figures/Allmemory/dmaselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5886259d977d9662d6ee4cfff87bcf3956ee519e
Binary files /dev/null and b/ide/src/figures/Allmemory/dmaselect.jpg differ
diff --git a/ide/src/figures/Allmemory/gpurow.jpg b/ide/src/figures/Allmemory/gpurow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..095a211bc86e6c9aadb11978dd5d40c225b0e896
Binary files /dev/null and b/ide/src/figures/Allmemory/gpurow.jpg differ
diff --git a/ide/src/figures/Allmemory/purpindrag.jpg b/ide/src/figures/Allmemory/purpindrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..86bdd309fda8b509409505b04026ed58015c005e
Binary files /dev/null and b/ide/src/figures/Allmemory/purpindrag.jpg differ
diff --git a/ide/src/figures/Allmemory/purpinselect.jpg b/ide/src/figures/Allmemory/purpinselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b28d6004fb7c56e439e9de150fbf89e407abb7fd
Binary files /dev/null and b/ide/src/figures/Allmemory/purpinselect.jpg differ
diff --git a/ide/src/figures/Allmemory/purtotaldrag.jpg b/ide/src/figures/Allmemory/purtotaldrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..36e974cf6fb45d7bbbb55f16ddd32227f6f67f54
Binary files /dev/null and b/ide/src/figures/Allmemory/purtotaldrag.jpg differ
diff --git a/ide/src/figures/Allmemory/purtotalselect.jpg b/ide/src/figures/Allmemory/purtotalselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..05066691174124fd0212af1f535a097059e988c9
Binary files /dev/null and b/ide/src/figures/Allmemory/purtotalselect.jpg differ
diff --git a/ide/src/figures/Allmemory/sgpumemdrag.jpg b/ide/src/figures/Allmemory/sgpumemdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eda32f90e976b67eeeeea499a756bbedacbc2a56
Binary files /dev/null and b/ide/src/figures/Allmemory/sgpumemdrag.jpg differ
diff --git a/ide/src/figures/Allmemory/sgpumemselect.jpg b/ide/src/figures/Allmemory/sgpumemselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..742356c9e05122954f97dc65382766092427c3ed
Binary files /dev/null and b/ide/src/figures/Allmemory/sgpumemselect.jpg differ
diff --git a/ide/src/figures/Allmemory/smapsallrow.jpg b/ide/src/figures/Allmemory/smapsallrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..85eec940455c59bd6bedbe9e90c98cdb63004b98
Binary files /dev/null and b/ide/src/figures/Allmemory/smapsallrow.jpg differ
diff --git a/ide/src/figures/Allmemory/ssampletab.jpg b/ide/src/figures/Allmemory/ssampletab.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..84ce148e6cdfc00620ed7836cd74fd9afb16933d
Binary files /dev/null and b/ide/src/figures/Allmemory/ssampletab.jpg differ
diff --git a/ide/src/figures/Allmemory/sstaaticstab.jpg b/ide/src/figures/Allmemory/sstaaticstab.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f80e1fc88821b199374c478468bb6d8513ac21a9
Binary files /dev/null and b/ide/src/figures/Allmemory/sstaaticstab.jpg differ
diff --git a/ide/src/figures/Allmemory/vglrag.jpg b/ide/src/figures/Allmemory/vglrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fe6fd5035bf3b161722ff4195b5ec6f5fd5b2950
Binary files /dev/null and b/ide/src/figures/Allmemory/vglrag.jpg differ
diff --git a/ide/src/figures/Allmemory/vgpumemdrag.jpg b/ide/src/figures/Allmemory/vgpumemdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a9dcd11725f10bd3aab314ed1604ba5a5810f3e0
Binary files /dev/null and b/ide/src/figures/Allmemory/vgpumemdrag.jpg differ
diff --git a/ide/src/figures/Allmemory/vgpumemselect.jpg b/ide/src/figures/Allmemory/vgpumemselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3bb350345582cb380051032146ab3a1a0fba983e
Binary files /dev/null and b/ide/src/figures/Allmemory/vgpumemselect.jpg differ
diff --git a/ide/src/figures/Allmemory/vgputotaldrag.jpg b/ide/src/figures/Allmemory/vgputotaldrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b5b0e93ceab99921bd200e98d5307be2add73ff4
Binary files /dev/null and b/ide/src/figures/Allmemory/vgputotaldrag.jpg differ
diff --git a/ide/src/figures/Allmemory/vgputotalselect.jpg b/ide/src/figures/Allmemory/vgputotalselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..45f1630d99015a4bf1bccddade0ed9fad0d86e81
Binary files /dev/null and b/ide/src/figures/Allmemory/vgputotalselect.jpg differ
diff --git a/ide/src/figures/Allmemory/vgpuwindowdrag.jpg b/ide/src/figures/Allmemory/vgpuwindowdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e0b0ae1912ebd827bd924fb83bb46a4e3f205f64
Binary files /dev/null and b/ide/src/figures/Allmemory/vgpuwindowdrag.jpg differ
diff --git a/ide/src/figures/Allmemory/vgpuwindowselect.jpg b/ide/src/figures/Allmemory/vgpuwindowselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..37578d124aa94f5dee7462f1d912b5b3e0006ac8
Binary files /dev/null and b/ide/src/figures/Allmemory/vgpuwindowselect.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolconcurrency.jpg b/ide/src/figures/Taskpool/taskpoolconcurrency.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e35e112ca1ad0cbbfde946c48d02560857207b77
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolconcurrency.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolconfig.jpg b/ide/src/figures/Taskpool/taskpoolconfig.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c259b52a845c334b76521ed4eae91dc94e765c41
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolconfig.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpooldrag.jpg b/ide/src/figures/Taskpool/taskpooldrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..75a5a9cf0bfffeeac4dd3463135962e4168037ee
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpooldrag.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolexit.jpg b/ide/src/figures/Taskpool/taskpoolexit.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5ba6e62a4ca6bb8c38e2f52d3235f1f2d698c412
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolexit.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolnum.jpg b/ide/src/figures/Taskpool/taskpoolnum.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ba4c546ebb9295414eb6e389ae1910c02e9041ca
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolnum.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolrelation.jpg b/ide/src/figures/Taskpool/taskpoolrelation.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8095ab3d030fa5c401453697269b1b4844e74b39
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolrelation.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolrow.jpg b/ide/src/figures/Taskpool/taskpoolrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1901acbdce6aace3e2893ba26057c13519613b84
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolrow.jpg differ
diff --git a/ide/src/figures/Taskpool/taskpoolselect.jpg b/ide/src/figures/Taskpool/taskpoolselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7c77a7b3fd9bd754108b135f46e7d66e6f868ed3
Binary files /dev/null and b/ide/src/figures/Taskpool/taskpoolselect.jpg differ
diff --git a/ide/src/figures/animation/anieffectcurv.jpg b/ide/src/figures/animation/anieffectcurv.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..65e504c5f173b48ff8f5c6e62f181371cd9b49b0
Binary files /dev/null and b/ide/src/figures/animation/anieffectcurv.jpg differ
diff --git a/ide/src/figures/animation/anieffectcurvdrag.jpg b/ide/src/figures/animation/anieffectcurvdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e19958e7b472d73544d7929ecd4652f81512f091
Binary files /dev/null and b/ide/src/figures/animation/anieffectcurvdrag.jpg differ
diff --git a/ide/src/figures/animation/anieffectcurvselect.jpg b/ide/src/figures/animation/anieffectcurvselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..43c285a0da419477729b394e0c86e9466125e2b1
Binary files /dev/null and b/ide/src/figures/animation/anieffectcurvselect.jpg differ
diff --git a/ide/src/figures/animation/animationconfig.jpg b/ide/src/figures/animation/animationconfig.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bd01d2b01f0196bf30c858b466bcb80c900e590b
Binary files /dev/null and b/ide/src/figures/animation/animationconfig.jpg differ
diff --git a/ide/src/figures/animation/anispacingdrag.jpg b/ide/src/figures/animation/anispacingdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a8cba8008d11845cc89be83e7ac01d8979503b4d
Binary files /dev/null and b/ide/src/figures/animation/anispacingdrag.jpg differ
diff --git a/ide/src/figures/animation/anispacingselect.jpg b/ide/src/figures/animation/anispacingselect.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..630ea2df4a05cd6113e207855aeedace67c7173f
Binary files /dev/null and b/ide/src/figures/animation/anispacingselect.jpg differ
diff --git a/ide/src/figures/animation/anrsallrow.jpg b/ide/src/figures/animation/anrsallrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ee6edbdf799cb21c61b1c1d66dd8b924c80435ee
Binary files /dev/null and b/ide/src/figures/animation/anrsallrow.jpg differ
diff --git a/ide/src/figures/animation/anrsdelayrow.jpg b/ide/src/figures/animation/anrsdelayrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..102c3cac6ae391cf403139e5b0bde7e17941cea2
Binary files /dev/null and b/ide/src/figures/animation/anrsdelayrow.jpg differ
diff --git a/ide/src/figures/animation/framespacirow.jpg b/ide/src/figures/animation/framespacirow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2abdad53efaa5e530b2e80f6e7e73e301fbbf2fc
Binary files /dev/null and b/ide/src/figures/animation/framespacirow.jpg differ
diff --git a/ide/src/figures/appstartup/appstartupconfig.jpg b/ide/src/figures/appstartup/appstartupconfig.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bbdfe9b048453b30b16d394ec405dc7403feaf2f
Binary files /dev/null and b/ide/src/figures/appstartup/appstartupconfig.jpg differ
diff --git a/ide/src/figures/appstartup/appstartupdrag.jpg b/ide/src/figures/appstartup/appstartupdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f2685cbf994209df9cf9ef8e4b860566e5643870
Binary files /dev/null and b/ide/src/figures/appstartup/appstartupdrag.jpg differ
diff --git a/ide/src/figures/appstartup/appstartupjump.jpg b/ide/src/figures/appstartup/appstartupjump.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..908d08f1f78f956e69d649f3c5a58a0f0f6ec350
Binary files /dev/null and b/ide/src/figures/appstartup/appstartupjump.jpg differ
diff --git a/ide/src/figures/appstartup/appstartuprow.jpg b/ide/src/figures/appstartup/appstartuprow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fd4352512879725ee74f7271855b3beafd1d6798
Binary files /dev/null and b/ide/src/figures/appstartup/appstartuprow.jpg differ
diff --git a/ide/src/figures/appstartup/appstartupslice.jpg b/ide/src/figures/appstartup/appstartupslice.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4d0746c1c6deba135a51085b1fa6ccb21ddc9783
Binary files /dev/null and b/ide/src/figures/appstartup/appstartupslice.jpg differ
diff --git a/ide/src/figures/appstartup/staticinitilizationdrag.jpg b/ide/src/figures/appstartup/staticinitilizationdrag.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dcad07e3ca77b6dd8f7c26b9c9f8b30eb4e6ce45
Binary files /dev/null and b/ide/src/figures/appstartup/staticinitilizationdrag.jpg differ
diff --git a/ide/src/figures/appstartup/staticinitilizationjump.jpg b/ide/src/figures/appstartup/staticinitilizationjump.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ce1dd133e30010982c3bc10242a0dcb5742eceee
Binary files /dev/null and b/ide/src/figures/appstartup/staticinitilizationjump.jpg differ
diff --git a/ide/src/figures/appstartup/staticinitilizationrow.jpg b/ide/src/figures/appstartup/staticinitilizationrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e5391ec7d5bc5fd800e1f8b2d8ba4173c20a1a44
Binary files /dev/null and b/ide/src/figures/appstartup/staticinitilizationrow.jpg differ
diff --git a/ide/src/figures/appstartup/staticinitilizationslice.jpg b/ide/src/figures/appstartup/staticinitilizationslice.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5c8c4657dc9b19403627fddc34deb590f713b46c
Binary files /dev/null and b/ide/src/figures/appstartup/staticinitilizationslice.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerconfig.jpg b/ide/src/figures/arkts/cpuprofilerconfig.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1bc9ac5a1250212568c7f66314e1cdcac0c0bdf5
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerconfig.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerdragb.jpg b/ide/src/figures/arkts/cpuprofilerdragb.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cd445d1111ef40ee7cc8461e6e2bb742da10eb01
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerdragb.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerdragc.jpg b/ide/src/figures/arkts/cpuprofilerdragc.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e120e59317397959e2f91ff9ae7c813739532aac
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerdragc.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerdrags.jpg b/ide/src/figures/arkts/cpuprofilerdrags.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7d1265f5585883a225ab36c19d7e1e1e8ace13af
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerdrags.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerheavib.jpg b/ide/src/figures/arkts/cpuprofilerheavib.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4804c3a423828b86e402feb31724ab823515f215
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerheavib.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerheavic.jpg b/ide/src/figures/arkts/cpuprofilerheavic.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..77224b8d2d5869f449663b1fcc61713be0a24b6c
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerheavic.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerrow.jpg b/ide/src/figures/arkts/cpuprofilerrow.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f506c28e3fd13ef3a1ec051252e3f3bd9d4c64a1
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerrow.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerselectb.jpg b/ide/src/figures/arkts/cpuprofilerselectb.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..64c5963175be4c9514324777992e675de512f180
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerselectb.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerselectc.jpg b/ide/src/figures/arkts/cpuprofilerselectc.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..201ecec956131f2d1d54f2c664bd9d2b8becfe1e
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerselectc.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilerselects.jpg b/ide/src/figures/arkts/cpuprofilerselects.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b1afe774dda2ed0ead098ee9b4694414d1cdeb4c
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilerselects.jpg differ
diff --git a/ide/src/figures/arkts/cpuprofilertip.jpg b/ide/src/figures/arkts/cpuprofilertip.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d3aea974f8d50fa49588aa8311c3a2a523e86321
Binary files /dev/null and b/ide/src/figures/arkts/cpuprofilertip.jpg differ
diff --git a/ide/src/js-heap/logic/HeapLoader.ts b/ide/src/js-heap/logic/HeapLoader.ts
index 750f9744c5eb8d7c9688b253fe93a119a5743f0f..3bfcbb69d060ea144c96bd19c125f79e6ff74727 100644
--- a/ide/src/js-heap/logic/HeapLoader.ts
+++ b/ide/src/js-heap/logic/HeapLoader.ts
@@ -925,22 +925,7 @@ export class HeapLoader {
     let clickNode = childNodes[0].parent;
     // If there are duplicate IDs in the third layer and beyond, they will not be expanded again
     if (clickNode!.type == ConstructorType.FiledType) {
-      function findParents(clickNode: any, parents: any): any {
-        if (!clickNode.parent) {
-          return parents;
-        }
-        // add the parent of the current node to the result array
-        parents.push(clickNode);
-        for (let childNode of childNodes) {
-          for (let p of parents) {
-            if (p.id === childNode!.id) {
-              childNode.hasNext = false;
-            }
-          }
-        }
-        return findParents(clickNode.parent, parents);
-      }
-      findParents(clickNode, []);
+      this.findParentsFunc(childNodes, clickNode);
     }
     let filterChildNodes = new Array<ConstructorItem>();
     for (let item of childNodes) {
@@ -952,6 +937,25 @@ export class HeapLoader {
     return filterChildNodes;
   }
 
+  private findParentsFunc(childNodes: ConstructorItem[], clickNode: ConstructorItem) {
+    function findParents(clickNode: any, parents: any): any {
+      if (!clickNode.parent) {
+        return parents;
+      }
+      // add the parent of the current node to the result array
+      parents.push(clickNode);
+      for (let childNode of childNodes) {
+        for (let heapParent of parents) {
+          if (heapParent.id === childNode!.id) {
+            childNode.hasNext = false;
+          }
+        }
+      }
+      return findParents(clickNode.parent, parents);
+    }
+    findParents(clickNode, []);
+  }
+
   /**
    * get nodes which referenced this node
    * @param constructor current node
@@ -1004,22 +1008,7 @@ export class HeapLoader {
       let clickNode = retains[0].parent;
       // If there are duplicate IDs in the third layer and beyond, they will not be expanded again
       if (clickNode!.type == ConstructorType.RetainersType) {
-        function findParents(clickNode: any, parents: any): any {
-          if (!clickNode.parent) {
-            return parents;
-          }
-          // add the parent of the current node to the result array
-          parents.push(clickNode);
-          for (let childNode of retains) {
-            for (let p of parents) {
-              if (p.id === childNode!.id) {
-                childNode.hasNext = false;
-              }
-            }
-          }
-          return findParents(clickNode.parent, parents);
-        }
-        findParents(clickNode, []);
+        this.findParentsFunc(retains, clickNode);
       }
     }
 
diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts
index 02ad225ba96917337161bcf4b4f99d81bd23de62..17ab0331f245f0e200dc10da88768c148f539e24 100644
--- a/ide/src/trace/SpApplication.ts
+++ b/ide/src/trace/SpApplication.ts
@@ -870,6 +870,10 @@ export class SpApplication extends BaseElement {
                     title: 'Help Documents',
                     icon: 'smart-help',
                     clickHandler: function (item: MenuItem) {
+                      SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                        event: 'help_page',
+                        action: 'help_doc',
+                      });
                       that.search = false;
                       that.spHelp!.dark = that.dark;
                       showContent(that.spHelp!);
@@ -1097,25 +1101,25 @@ export class SpApplication extends BaseElement {
             title: 'Help Documents',
             icon: 'smart-help',
             clickHandler: function (item: MenuItem) {
+              that.spHelp!.dark = that.dark;
+              that.search = false;
+              showContent(that.spHelp!);
               SpStatisticsHttpUtil.addOrdinaryVisitAction({
                 event: 'help_page',
                 action: 'help_doc',
               });
-              that.search = false;
-              that.spHelp!.dark = that.dark;
-              showContent(that.spHelp!);
             },
           },
           {
             title: 'Flags',
             icon: 'menu',
             clickHandler: function (item: MenuItem) {
+              that.search = false;
+              showContent(spFlags);
               SpStatisticsHttpUtil.addOrdinaryVisitAction({
                 event: 'flags',
                 action: 'flags',
               });
-              that.search = false;
-              showContent(spFlags);
             },
           },
         ],
diff --git a/ide/src/trace/bean/NativeHook.ts b/ide/src/trace/bean/NativeHook.ts
index ac38f7340d1a2a3fe8cb22a0095ccc1f3c559940..f868568d1aeac940704b6efa025d505f2fde2378 100644
--- a/ide/src/trace/bean/NativeHook.ts
+++ b/ide/src/trace/bean/NativeHook.ts
@@ -75,9 +75,10 @@ export class NativeHookStatisticsTableData {
 export class NativeMemory {
   index: number = 0;
   eventId: number = 0;
+  threadId: number = 0;
+  threadName: string = '';
   eventType: string = '';
   subType: string = '';
-  addr: string = '';
   startTs: number = 0;
   endTs: number = 0;
   timestamp: string = '';
@@ -87,8 +88,7 @@ export class NativeMemory {
   library: string = '';
   isSelected: boolean = false;
   state: string = '';
-  threadId: number = 0;
-  threadName: string = '';
+  addr: string = '';
 }
 
 export class NativeHookSamplerInfo {
diff --git a/ide/src/trace/bean/PerfProfile.ts b/ide/src/trace/bean/PerfProfile.ts
index 3c0aef060eb105ef7d0b114f8a6b3b0236bdc264..4cb49d2e0240ab44515097a27ee89a5ac3335c0f 100644
--- a/ide/src/trace/bean/PerfProfile.ts
+++ b/ide/src/trace/bean/PerfProfile.ts
@@ -16,20 +16,20 @@
 import { ChartStruct } from '../../trace/bean/FrameChartStruct.js';
 
 export class PerfFile {
+  path: string = '';
   fileId: number = 0;
   symbol: string = '';
-  path: string = '';
   fileName: string = '';
 
-  static setFileName(data: PerfFile) {
-    if (data.path) {
-      let number = data.path.lastIndexOf('/');
+  static setFileName(perfData: PerfFile) {
+    if (perfData.path) {
+      let number = perfData.path.lastIndexOf('/');
       if (number > 0) {
-        data.fileName = data.path.substring(number + 1);
+        perfData.fileName = perfData.path.substring(number + 1);
         return;
       }
     }
-    data.fileName = data.path;
+    perfData.fileName = perfData.path;
   }
 }
 
@@ -49,23 +49,23 @@ export class PerfCall {
 export class PerfCallChain {
   tid: number = 0;
   pid: number = 0;
+  parentId: string = ''; //合并之后区分的id
+  id: string = '';
+  fileId: number = 0;
+  symbolId: number = 0;
+  topDownMerageId: string = ''; //top down合并使用的id
+  topDownMerageParentId: string = ''; //top down合并使用的id
+  bottomUpMerageId: string = ''; //bottom up合并使用的id
+  bottomUpMerageParentId: string = ''; //bottom up合并使用的id
+  sampleId: number = 0;
+  callChainId: number = 0;
   name: string = '';
   fileName: string = '';
   threadState: string = '';
   startNS: number = 0;
   dur: number = 0;
-  sampleId: number = 0;
-  callChainId: number = 0;
   vaddrInFile: number = 0;
-  fileId: number = 0;
-  symbolId: number = 0;
   path: string = '';
-  parentId: string = ''; //合并之后区分的id
-  id: string = '';
-  topDownMerageId: string = ''; //top down合并使用的id
-  topDownMerageParentId: string = ''; //top down合并使用的id
-  bottomUpMerageId: string = ''; //bottom up合并使用的id
-  bottomUpMerageParentId: string = ''; //bottom up合并使用的id
   depth: number = 0;
   canCharge: boolean = true;
   previousNode: PerfCallChain | undefined = undefined; //将list转换为一个链表结构
@@ -75,25 +75,25 @@ export class PerfCallChain {
 export class PerfCallChainMerageData extends ChartStruct {
   id: string = '';
   parentId: string = '';
+  tid: number = 0;
+  pid: number = 0;
   currentTreeParentNode: PerfCallChainMerageData | undefined = undefined;
   symbolName: string = '';
-  symbol: string = '';
   libName: string = '';
+  symbol: string = '';
   path: string = '';
   self: string = '0s';
   weight: string = '';
   weightPercent: string = '';
   selfDur: number = 0;
   dur: number = 0;
-  tid: number = 0;
-  pid: number = 0;
-  isStore = 0;
-  canCharge: boolean = true;
   children: PerfCallChainMerageData[] = [];
   initChildren: PerfCallChainMerageData[] = [];
+  isStore = 0;
+  isSelected: boolean = false;
+  canCharge: boolean = true;
   type: number = 0;
   vaddrInFile: number = 0;
-  isSelected: boolean = false;
   searchShow: boolean = true;
 }
 
diff --git a/ide/src/trace/bean/ProcessStruct.ts b/ide/src/trace/bean/ProcessStruct.ts
index b5fdb07b92f7a3677ecf2eec28e97726f47243b7..ba70e89fecd8c72cb08e30bbbe05f44177c0c955 100644
--- a/ide/src/trace/bean/ProcessStruct.ts
+++ b/ide/src/trace/bean/ProcessStruct.ts
@@ -20,18 +20,18 @@ import { CpuStruct } from '../database/ui-worker/ProcedureWorkerCPU.js';
 const padding = 1;
 
 export class ProcessStruct extends BaseStruct {
+  startTime: number | undefined;
   cpu: number | undefined;
   dur: number | undefined;
   id: number | undefined;
+  utid: number | undefined;
   pid: number | undefined;
   process: string | undefined;
-  startTime: number | undefined;
   state: string | undefined;
   thread: string | undefined;
   tid: number | undefined;
   ts: number | undefined;
   type: string | undefined;
-  utid: number | undefined;
 
   static draw(processBeanCanvasCtx: CanvasRenderingContext2D, processBeanStruct: ProcessStruct) {
     if (processBeanStruct.frame) {
diff --git a/ide/src/trace/bean/StateProcessThread.ts b/ide/src/trace/bean/StateProcessThread.ts
index aaad55f10cca0a92555b0ecb708595e86fbd1333..51fb00651d1cb1b940260f88fc0665fc2ae96258 100644
--- a/ide/src/trace/bean/StateProcessThread.ts
+++ b/ide/src/trace/bean/StateProcessThread.ts
@@ -51,39 +51,15 @@ export class SPTChild {
 }
 
 export class SPT {
-  process: string = '';
-  processId: number = 0;
-  thread: string = '';
-  threadId: number = 0;
-  state: string = '';
-  dur: number = 0;
   start_ts: number = 0;
   end_ts: number = 0;
-  cpu: number = 0;
-  priority: string = '-';
-  note: string = '-';
-}
-
-export class ThreadState {
-  itid: number = 0;
   state: string = '';
   dur: number = 0;
-  ts: number = 0;
-  end_ts: number = 0;
-  start_ts: number = 0;
   cpu: number = 0;
-}
-
-export class ThreadProcess {
-  id: number = 0;
-  threadId: number = 0;
-  thread: string = '';
-  processId: number = 0;
+  priority: string = '-';
+  note: string = '-';
   process: string = '';
-}
-
-export class SptSlice {
-  itid: number = 0;
-  ts: number = 0;
-  priority: number = 0;
+  processId: number = 0;
+  thread: string = '';
+  threadId: number = 0;
 }
diff --git a/ide/src/trace/bean/WakeupBean.ts b/ide/src/trace/bean/WakeupBean.ts
index 616af8cba6a48641a60e5bdd05d9cabe2430960d..9d7783f18f25eaf5ac6c87c3e4f7e67d2278dc0b 100644
--- a/ide/src/trace/bean/WakeupBean.ts
+++ b/ide/src/trace/bean/WakeupBean.ts
@@ -14,14 +14,14 @@
  */
 
 export class WakeupBean {
+  thread: string | undefined;
   wakeupTime: number | undefined;
   cpu: number | undefined;
   process: string | undefined;
   pid: number | undefined;
-  thread: string | undefined;
   tid: number | undefined;
-  schedulingLatency: number | undefined;
   schedulingDesc: string | undefined;
   ts: number | undefined;
   itid: number | undefined;
+  schedulingLatency: number | undefined;
 }
diff --git a/ide/src/trace/component/SpFlags.ts b/ide/src/trace/component/SpFlags.ts
index d1c94b495ed642b3c2657e00729a0555fd0ab270..41294fa1bb7bb064d6132a47dea06760f79b8a59 100644
--- a/ide/src/trace/component/SpFlags.ts
+++ b/ide/src/trace/component/SpFlags.ts
@@ -30,7 +30,7 @@ export class SpFlags extends BaseElement {
   initHtml(): string {
     return `
         ${this.initHtmlStyle()}
-        <div class="container">
+        <div class="sp-flags-container">
          <div class="body">
            <h3 class="title">Feature flags</h3>
          </div>
@@ -41,18 +41,18 @@ export class SpFlags extends BaseElement {
   private initHtmlStyle(): string {
     return `
       <style>
-        .container {
+        .sp-flags-container {
+          background-color: var(--dark-background5,#F6F6F6);
+          min-height: 100%;
           display: grid;
           grid-template-columns: 1fr;
           grid-template-rows:1fr;
-          background-color: var(--dark-background5,#F6F6F6);
-          min-height: 100%;
         }
         :host{
-          display: block;
           width: 100%;
           height: 100%;
           background-color: var(--dark-background5,#F6F6F6);
+          display: block;
         }
         .body{
           width: 85%;
diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts
index 508a043ba33f2eedb7304d03361b10ddceefe315..cad0b6445149a22c37500ed2d74532abec23fff1 100644
--- a/ide/src/trace/component/SpHelp.ts
+++ b/ide/src/trace/component/SpHelp.ts
@@ -29,15 +29,15 @@ export class SpHelp extends BaseElement {
 
   set dark(dark: boolean) {
     if (dark) {
-      this.setAttribute('dark', '' + dark);
+      this.setAttribute('dark', `${  dark}`);
     } else {
       this.removeAttribute('dark');
     }
     this.appContent!.innerHTML =
       '<object type="text/html" data=' +
-      '/application/doc/quickstart_device_record.html?' +
-      dark +
-      ' width="100%" height="100%"></object>';
+      `/application/doc/quickstart_device_record.html?${ 
+        dark 
+      } width="100%" height="100%"></object>`;
   }
 
   initElements(): void {
@@ -68,9 +68,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_device_record.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_device_record.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -83,9 +83,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_web_record.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_web_record.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -98,9 +98,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_systemtrace.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_systemtrace.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -113,9 +113,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_native_memory.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_native_memory.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -128,9 +128,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_ability_monitor.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_ability_monitor.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -143,9 +143,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_hiperf.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_hiperf.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -158,9 +158,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_sql_metrics.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_sql_metrics.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -173,9 +173,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_filesystem.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_filesystem.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -188,9 +188,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_page_fault.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_page_fault.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -203,9 +203,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_bio.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_bio.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -218,9 +218,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_smaps.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_smaps.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -233,9 +233,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_hisystemevent.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_hisystemevent.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -248,9 +248,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_sdk.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_sdk.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -263,9 +263,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_Frametimeline.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_Frametimeline.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -278,9 +278,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_schedulinganalysis.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_schedulinganalysis.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -293,9 +293,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_Js_memory.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_Js_memory.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -308,9 +308,84 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_Import_so.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_Import_so.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
+            },
+          },
+          {
+            title: 'Animation的抓取和展示说明',
+            icon: '',
+            clickHandler: function (item: MenuItem) {
+              SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                event: 'animation',
+                action: 'help_doc',
+              });
+              that.appContent!.innerHTML =
+                '<object type="text/html" data=' +
+                `/application/doc/quickstart_animation.html?${
+                  that.dark
+                } width="100%" height="100%"></object>`;
+            },
+          },
+          {
+            title: 'TaskPool抓取和展示说明',
+            icon: '',
+            clickHandler: function (item: MenuItem) {
+              SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                event: 'taskpool',
+                action: 'help_doc',
+              });
+              that.appContent!.innerHTML =
+                '<object type="text/html" data=' +
+                `/application/doc/quickstart_taskpool.html?${
+                  that.dark
+                } width="100%" height="100%"></object>`;
+            },
+          },
+          {
+            title: 'Cpuprofiler抓取和展示说明',
+            icon: '',
+            clickHandler: function (item: MenuItem) {
+              SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                event: 'arkts',
+                action: 'help_doc',
+              });
+              that.appContent!.innerHTML =
+                '<object type="text/html" data=' +
+                `/application/doc/quickstart_arkts.html?${
+                  that.dark
+                } width="100%" height="100%"></object>`;
+            },
+          },
+          {
+            title: 'App startup的抓取和展示说明',
+            icon: '',
+            clickHandler: function (item: MenuItem) {
+              SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                event: 'app_startup',
+                action: 'help_doc',
+              });
+              that.appContent!.innerHTML =
+                '<object type="text/html" data=' +
+                `/application/doc/quickstart_app_startup.html?${
+                  that.dark
+                } width="100%" height="100%"></object>`;
+            },
+          },
+          {
+            title: '系统内存抓取和展示说明',
+            icon: '',
+            clickHandler: function (item: MenuItem) {
+              SpStatisticsHttpUtil.addOrdinaryVisitAction({
+                event: 'memory_template',
+                action: 'help_doc',
+              });
+              that.appContent!.innerHTML =
+                '<object type="text/html" data=' +
+                `/application/doc/quickstart_memory_template.html?${
+                  that.dark
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -323,9 +398,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_Application_operation_skills.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_Application_operation_skills.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
         ],
@@ -345,9 +420,9 @@ export class SpHelp extends BaseElement {
               });
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/des_tables.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/des_tables.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -356,9 +431,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/compile_trace_streamer.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/compile_trace_streamer.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -367,9 +442,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/des_stat.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/des_stat.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -378,9 +453,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/des_support_event.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/des_support_event.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -389,9 +464,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_trace_streamer.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_trace_streamer.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -400,9 +475,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/des_binder.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/des_binder.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
           {
@@ -411,9 +486,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/des_wakup.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/des_wakup.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
         ],
@@ -429,9 +504,9 @@ export class SpHelp extends BaseElement {
             clickHandler: function (item: MenuItem) {
               that.appContent!.innerHTML =
                 '<object type="text/html" data=' +
-                '/application/doc/quickstart_smartperflinux_compile_guide.html?' +
-                that.dark +
-                ' width="100%" height="100%"></object>';
+                `/application/doc/quickstart_smartperflinux_compile_guide.html?${ 
+                  that.dark 
+                } width="100%" height="100%"></object>`;
             },
           },
         ],
@@ -462,16 +537,16 @@ export class SpHelp extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        .container {
+        .sp-help-container {
+            min-height: 100%;
             display: grid;
             grid-template-columns: 1fr;
             grid-template-rows:1fr;
             background-color: var(--dark-background5,#F6F6F6);
-            min-height: 100%;
         }
         :host{
-            display: block;
             width: 100%;
+            display: block;
             height: 100%;
             background-color: var(--dark-background5,#F6F6F6);
         }
@@ -497,7 +572,7 @@ export class SpHelp extends BaseElement {
         }
 
         </style>
-        <div class="container">
+        <div class="sp-help-container">
          <div class="body">
             <lit-main-menu id="main-menu" class="menugroup" data=''></lit-main-menu>
             <div id="app-content" class="content">
diff --git a/ide/src/trace/component/SpMetrics.ts b/ide/src/trace/component/SpMetrics.ts
index 9da9eb51aa46cbca1ea016fd1173a2b57ebaae01..4383f0e3f8ba0ff0ace28825a4e5a336aa9cdb48 100644
--- a/ide/src/trace/component/SpMetrics.ts
+++ b/ide/src/trace/component/SpMetrics.ts
@@ -293,20 +293,18 @@ export class SpMetrics extends BaseElement {
              text-align: left;
              width: 100%;
         }
-        ::-webkit-scrollbar
-        {
-          width: 8px;
-          background-color: var(--dark-background3,#FFFFFF);
-        }
-        ::-webkit-scrollbar-thumb
-        {
-          border-radius: 6px;
+        ::-webkit-scrollbar-thumb{
           background-color: var(--dark-background7,rgba(0,0,0,0.1));
+          border-radius: 6px;
         }
         .sp-load-metric{
             width: 95%;
             bottom: 0;
         }
+        ::-webkit-scrollbar{
+          background-color: var(--dark-background3,#FFFFFF);
+          width: 8px;
+        }
         </style>
         <div class="metric">
             <div class="metric-select request">
diff --git a/ide/src/trace/component/SpQuerySQL.ts b/ide/src/trace/component/SpQuerySQL.ts
index d8d3b9b259d9b0f1a0eb0336215325bf324dd4a6..2b645bffc26a8ddcc01e4a61cfa330ca11e5bf6b 100644
--- a/ide/src/trace/component/SpQuerySQL.ts
+++ b/ide/src/trace/component/SpQuerySQL.ts
@@ -370,13 +370,11 @@ export class SpQuerySQL extends BaseElement {
         .sql-select{
           background-color: var(--dark-background5, #F6F6F6);
         }
-        ::-webkit-scrollbar
-        {
+        ::-webkit-scrollbar{
           width: 8px;
           background-color: var(--dark-background3,#FFFFFF);
         }
-        ::-webkit-scrollbar-thumb
-        {
+        ::-webkit-scrollbar-thumb{
           border-radius: 6px;
           background-color: var(--dark-background7,rgba(0,0,0,0.1));
         }
diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts
index 8c1930e60dbc0d011bad2c8f9e3dfb0290450ad6..8c6553a7202dcb6ffe504830f43baec6763695ee 100644
--- a/ide/src/trace/component/SpRecordTrace.ts
+++ b/ide/src/trace/component/SpRecordTrace.ts
@@ -484,8 +484,9 @@ export class SpRecordTrace extends BaseElement {
               } else {
                 SpRecordTrace.selectVersion = SpRecordTrace.supportVersions[0];
                 this.setDeviceVersionSelect(SpRecordTrace.selectVersion);
+                let cmdTxt = PluginConvertUtils.BeanToCmdTxt(this.makeRequest(), false)
                 this.traceCommand!.hdcCommon = PluginConvertUtils.createHdcCmd(
-                  PluginConvertUtils.BeanToCmdTxt(this.makeRequest(), false),
+                  cmdTxt,
                   this.recordSetting!.output,
                   this.recordSetting!.maxDur
                 );
@@ -766,7 +767,7 @@ export class SpRecordTrace extends BaseElement {
           title: 'Record setting',
           icon: 'properties',
           fileChoose: false,
-          clickHandler: function (ev: InputEvent): void {
+          clickHandler: function (event: InputEvent): void {
             that.appContent!.innerHTML = '';
             that.appContent!.append(that.recordSetting!);
             that.freshMenuItemsStatus('Record setting');
@@ -1435,18 +1436,18 @@ export class SpRecordTrace extends BaseElement {
            height: 32px;
            margin-left: 14px;
            margin-right: 10px;
-           background: var(--dark-background1,#ffffff);
            border: 1px solid var(--dark-color1,#4D4D4D);
+           background: var(--dark-background1,#ffffff);
+           font-size: 14px;
            border-radius: 16px;
            opacity: 0.6;
+           -webkit-appearance: none;
            font-family: Helvetica;
-           font-size: 14px;
            color: var(--dark-color1,#000000);
-           text-align: center;
            line-height: 20px;
            font-weight: 400;
            padding: 5px 10px 5px 10px;
-           -webkit-appearance: none;
+           text-align: center;
            background: url('img/down.png') no-repeat 96% center;
         }
         .device_version {
diff --git a/ide/src/trace/component/SpRecyclerSystemTrace.ts b/ide/src/trace/component/SpRecyclerSystemTrace.ts
index e42a6d0cb091779c045b4e7bad3bafae303ef856..93582100df6674d0a1e548fa8ec4a3ad9d103c85 100644
--- a/ide/src/trace/component/SpRecyclerSystemTrace.ts
+++ b/ide/src/trace/component/SpRecyclerSystemTrace.ts
@@ -295,10 +295,10 @@ export class SpRecyclerSystemTrace extends BaseElement {
     this.init({ url: url }).then(() => {
       let scrollTop = this.rowsEL?.scrollTop || 0;
       let scrollHeight = this.rowsEL?.clientHeight || 0;
-      this.rowsEL?.querySelectorAll('trace-row').forEach((it: any) => {
-        let top = it.offsetTop - (this.rowsEL?.offsetTop || 0);
-        if (top + it.clientHeight > scrollTop && top + it.clientHeight < scrollTop + scrollHeight + it.clientHeight) {
-          (it as TraceRow<any>).dataListCache.length = 0;
+      this.rowsEL?.querySelectorAll('trace-row').forEach((rowItem: any) => {
+        let top = rowItem.offsetTop - (this.rowsEL?.offsetTop || 0);
+        if (top + rowItem.clientHeight > scrollTop && top + rowItem.clientHeight < scrollTop + scrollHeight + rowItem.clientHeight) {
+          (rowItem as TraceRow<any>).dataListCache.length = 0;
         }
       });
       if (complete) {
@@ -311,10 +311,10 @@ export class SpRecyclerSystemTrace extends BaseElement {
     this.init({ buf }).then(() => {
       let scrollTop = this.rowsEL?.scrollTop || 0;
       let scrollHeight = this.rowsEL?.clientHeight || 0;
-      this.rowsEL?.querySelectorAll('trace-row').forEach((it: any) => {
-        let top = it.offsetTop - (this.rowsEL?.offsetTop || 0);
-        if (top + it.clientHeight > scrollTop && top + it.clientHeight < scrollTop + scrollHeight + it.clientHeight) {
-          (it as TraceRow<any>).dataListCache.length = 0;
+      this.rowsEL?.querySelectorAll('trace-row').forEach((item: any) => {
+        let top = item.offsetTop - (this.rowsEL?.offsetTop || 0);
+        if (top + item.clientHeight > scrollTop && top + item.clientHeight < scrollTop + scrollHeight + item.clientHeight) {
+          (item as TraceRow<any>).dataListCache.length = 0;
         }
       });
       if (complete) {
@@ -361,28 +361,28 @@ export class SpRecyclerSystemTrace extends BaseElement {
       CpuStruct.cpuCount = cpuMax + 1;
       for (let i1 = 0; i1 < CpuStruct.cpuCount; i1++) {
         const cpuId = i1;
-        let traceRow = new TraceRowObject();
-        traceRow.rowId = `${cpuId}`;
-        traceRow.rowType = TraceRow.ROW_TYPE_CPU;
-        traceRow.rowParentId = '';
-        traceRow.rowHeight = 40;
-        traceRow.frame = new Rect(0, 0, this.rowsEL.clientWidth - 248, traceRow.rowHeight);
-        traceRow.name = `Cpu ${cpuId}`;
-        traceRow.supplier = () => queryCpuData(cpuId, 0, this.timerShaftEL?.totalNS || 0);
-        traceRow.onThreadHandler = (row, ctx) => {
+        let cpuTraceRow = new TraceRowObject();
+        cpuTraceRow.rowId = `${cpuId}`;
+        cpuTraceRow.rowType = TraceRow.ROW_TYPE_CPU;
+        cpuTraceRow.rowParentId = '';
+        cpuTraceRow.rowHeight = 40;
+        cpuTraceRow.frame = new Rect(0, 0, this.rowsEL.clientWidth - 248, cpuTraceRow.rowHeight);
+        cpuTraceRow.name = `Cpu ${cpuId}`;
+        cpuTraceRow.supplier = () => queryCpuData(cpuId, 0, this.timerShaftEL?.totalNS || 0);
+        cpuTraceRow.onThreadHandler = (row, ctx) => {
           procedurePool.submitWithName(
             'cpu',
             `cpu${cpuId}`,
             {
-              list: traceRow.must ? traceRow.dataList : undefined,
+              list: cpuTraceRow.must ? cpuTraceRow.dataList : undefined,
               startNS: TraceRow.range?.startNS || 0,
               endNS: TraceRow.range?.endNS || 0,
               totalNS: TraceRow.range?.totalNS || 0,
-              frame: traceRow.frame,
+              frame: cpuTraceRow.frame,
             },
             (res: any) => {
-              traceRow.dataListCache = res;
-              traceRow.must = false;
+              cpuTraceRow.dataListCache = res;
+              cpuTraceRow.must = false;
               row.clearCanvas();
               row.c!.beginPath();
               row.drawLines();
@@ -394,7 +394,7 @@ export class SpRecyclerSystemTrace extends BaseElement {
             }
           );
         };
-        objs.push(traceRow);
+        objs.push(cpuTraceRow);
       }
     }
     return objs;
@@ -422,28 +422,28 @@ export class SpRecyclerSystemTrace extends BaseElement {
     math();
     for (let i = 0; i < freqList.length; i++) {
       const it = freqList[i];
-      let traceRow = new TraceRowObject();
-      traceRow.rowId = `${it.cpu}`;
-      traceRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ;
-      traceRow.rowParentId = '';
-      traceRow.rowHeight = 40;
-      traceRow.frame = new Rect(0, 0, this.rowsEL.clientWidth - 248, traceRow.rowHeight);
-      traceRow.name = `Cpu ${it.cpu} Frequency`;
-      traceRow.supplier = () => queryCpuFreqData(it.cpu);
-      traceRow.onThreadHandler = (row, ctx) => {
+      let cpuFreqTraceRow = new TraceRowObject();
+      cpuFreqTraceRow.rowId = `${it.cpu}`;
+      cpuFreqTraceRow.rowType = TraceRow.ROW_TYPE_CPU_FREQ;
+      cpuFreqTraceRow.rowParentId = '';
+      cpuFreqTraceRow.rowHeight = 40;
+      cpuFreqTraceRow.frame = new Rect(0, 0, this.rowsEL.clientWidth - 248, cpuFreqTraceRow.rowHeight);
+      cpuFreqTraceRow.name = `Cpu ${it.cpu} Frequency`;
+      cpuFreqTraceRow.supplier = () => queryCpuFreqData(it.cpu);
+      cpuFreqTraceRow.onThreadHandler = (row, ctx) => {
         procedurePool.submitWithName(
           'freq',
           `freq${it.cpu}`,
           {
-            list: traceRow.must ? traceRow.dataList : undefined,
+            list: cpuFreqTraceRow.must ? cpuFreqTraceRow.dataList : undefined,
             startNS: TraceRow.range?.startNS || 0,
             endNS: TraceRow.range?.endNS || 0,
             totalNS: TraceRow.range?.totalNS || 0,
-            frame: traceRow.frame,
+            frame: cpuFreqTraceRow.frame,
           },
           (res: any) => {
-            traceRow.dataListCache = res;
-            traceRow.must = false;
+            cpuFreqTraceRow.dataListCache = res;
+            cpuFreqTraceRow.must = false;
             row.clearCanvas();
             row.drawLines();
             row.c!.beginPath();
@@ -464,7 +464,7 @@ export class SpRecyclerSystemTrace extends BaseElement {
           }
         );
       };
-      objs.push(traceRow);
+      objs.push(cpuFreqTraceRow);
     }
     return objs;
   };
diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts
index 15f643d75f000059db6d557a695c2b6d57773f6d..be2b0eb1b80bf6d74c30e4a821ed05cc1e38b307 100644
--- a/ide/src/trace/component/SpSystemTrace.ts
+++ b/ide/src/trace/component/SpSystemTrace.ts
@@ -3323,10 +3323,10 @@ export class SpSystemTrace extends BaseElement {
   }
 
   scrollToProcess(rowId: string, rowParentId: string, rowType: string, smooth: boolean = true) {
-    let rootRow = this.shadowRoot!.querySelector<TraceRow<any>>(`trace-row[row-id='${rowId}'][row-type='${rowType}']`);
-    if (rootRow?.collect) {
+    let traceRow = this.shadowRoot!.querySelector<TraceRow<any>>(`trace-row[row-id='${rowId}'][row-type='${rowType}']`);
+    if (traceRow?.collect) {
       this.favoriteRowsEL!.scroll({
-        top: (rootRow?.offsetTop || 0) - this.canvasFavoritePanel!.offsetHeight + (rootRow?.offsetHeight || 0),
+        top: (traceRow?.offsetTop || 0) - this.canvasFavoritePanel!.offsetHeight + (traceRow?.offsetHeight || 0),
         left: 0,
         behavior: smooth ? 'smooth' : undefined,
       });
@@ -3335,9 +3335,9 @@ export class SpSystemTrace extends BaseElement {
       if (row && !row.expansion) {
         row.expansion = true;
       }
-      if (rootRow && rootRow.offsetTop >= 0 && rootRow.offsetHeight >= 0) {
+      if (traceRow && traceRow.offsetTop >= 0 && traceRow.offsetHeight >= 0) {
         this.rowsPaneEL!.scroll({
-          top: (rootRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (rootRow?.offsetHeight || 0),
+          top: (traceRow?.offsetTop || 0) - this.canvasPanel!.offsetHeight + (traceRow?.offsetHeight || 0),
           left: 0,
           behavior: smooth ? 'smooth' : undefined,
         });
diff --git a/ide/src/trace/component/chart/SpCpuChart.ts b/ide/src/trace/component/chart/SpCpuChart.ts
index 8422ea83e9aa7719f3b376e02cf8bba5154ebafc..16d380ba7e0e631a6d945571b507be3ffb3e5797 100644
--- a/ide/src/trace/component/chart/SpCpuChart.ts
+++ b/ide/src/trace/component/chart/SpCpuChart.ts
@@ -106,7 +106,7 @@ export class SpCpuChart {
             traceRow.canvasSave(context);
             (renders['cpu-data'] as CpuRender).renderMainThread(
               {
-                context: context,
+                cpuRenderContext: context,
                 useCache: useCache,
                 type: `cpu-data-${i1}`,
                 translateY: traceRow.translateY,
diff --git a/ide/src/trace/component/chart/SpFreqChart.ts b/ide/src/trace/component/chart/SpFreqChart.ts
index e18c093e5ff60036a1e832311e3fc15e5368bed3..e65e53d929be2655f2ab4675be1369b532b5c415 100644
--- a/ide/src/trace/component/chart/SpFreqChart.ts
+++ b/ide/src/trace/component/chart/SpFreqChart.ts
@@ -123,7 +123,7 @@ export class SpFreqChart {
         cpuStateRow.canvasSave(context);
         (renders['cpu-state'] as CpuStateRender).renderMainThread(
           {
-            context: context,
+            cpuStateContext: context,
             useCache: useCache,
             type: `cpu-state-${it.cpu}`,
             cpu: it.cpu,
diff --git a/ide/src/trace/component/chart/SpHiPerf.ts b/ide/src/trace/component/chart/SpHiPerf.ts
index c5cdef93ff41a51c255baf5d217f8572ee58bb5a..03b6e5f6647c9130b91dd2c2efd1341a5a5e47b3 100644
--- a/ide/src/trace/component/chart/SpHiPerf.ts
+++ b/ide/src/trace/component/chart/SpHiPerf.ts
@@ -19,9 +19,7 @@ import {
   queryHiPerfCpuData,
   queryHiPerfCpuMergeData,
   queryHiPerfCpuMergeData2,
-  queryHiPerfEventData,
   queryHiPerfEventList,
-  queryHiPerfEventListData,
   queryHiPerfProcessData,
   queryHiPerfThreadData,
   queryPerfCmdline,
@@ -33,11 +31,11 @@ import { HiperfCpuRender, HiPerfCpuStruct } from '../../database/ui-worker/Proce
 import { HiperfThreadRender, HiPerfThreadStruct } from '../../database/ui-worker/ProcedureWorkerHiPerfThread.js';
 import { HiperfProcessRender, HiPerfProcessStruct } from '../../database/ui-worker/ProcedureWorkerHiPerfProcess.js';
 import { info } from '../../../log/Log.js';
-import { HiperfEventRender, HiPerfEventStruct } from '../../database/ui-worker/ProcedureWorkerHiPerfEvent.js';
+import { HiPerfEventStruct } from '../../database/ui-worker/ProcedureWorkerHiPerfEvent.js';
 import { perfDataQuery } from './PerfDataQuery.js';
 import { renders } from '../../database/ui-worker/ProcedureWorker.js';
 import { EmptyRender } from '../../database/ui-worker/ProcedureWorkerCPU.js';
-import { HiperfReportRender, HiPerfReportStruct } from '../../database/ui-worker/ProcedureWorkerHiPerfReport.js';
+import { HiPerfReportStruct } from '../../database/ui-worker/ProcedureWorkerHiPerfReport.js';
 import { SpChartManager } from './SpChartManager.js';
 
 export interface ResultData {
@@ -223,77 +221,6 @@ export class SpHiPerf {
     }
   }
 
-  async initReport() {
-    this.eventTypeList.forEach((it, index) => {
-      let fold = TraceRow.skeleton<HiPerfReportStruct>();
-      fold.rowId = `Perf-Report-${it.id}-${it.report_value}`;
-      fold.index = index;
-      fold.rowType = TraceRow.ROW_TYPE_HIPERF_REPORT;
-      fold.rowParentId = 'HiPerf';
-      fold.rowHidden = !this.rowFolder.expansion;
-      fold.folder = true;
-      fold.name = `Event :${it.report_value}`;
-      fold.folderPaddingLeft = 6;
-      fold.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-      fold.selectChangeHandler = this.trace.selectChangeHandler;
-      fold.supplier = () => queryHiPerfEventListData(it.id);
-      fold.onThreadHandler = (useCache) => {
-        let context = fold.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-        fold.canvasSave(context);
-        (renders['HiPerf-Report-Fold'] as HiperfReportRender).renderMainThread(
-          {
-            context: context,
-            useCache: useCache,
-            scale: TraceRow.range?.scale || 50,
-            type: `HiPerf-Report-Fold-${it.report_value}-${it.id}`,
-            maxCpu: this.maxCpuId + 1,
-            intervalPerf: SpHiPerf.stringResult?.fValue || 1,
-            range: TraceRow.range,
-          },
-          fold
-        );
-        fold.canvasRestore(context);
-      };
-      this.trace.rowsEL?.appendChild(fold);
-      this.rowList?.push(fold);
-      for (let i = 0; i <= this.maxCpuId; i++) {
-        let row = TraceRow.skeleton<HiPerfEventStruct>();
-        row.rowId = `HiPerf-Report-Event-${it.report_value}-${i}`;
-        row.index = i;
-        row.rowType = TraceRow.ROW_TYPE_HIPERF_EVENT;
-        row.rowParentId = fold.rowId;
-        row.rowHidden = !fold.expansion;
-        row.folder = false;
-        row.name = `Cpu ${i}`;
-        row.style.height = '40px';
-        row.setAttribute('children', '');
-        row.favoriteChangeHandler = this.trace.favoriteChangeHandler;
-        row.selectChangeHandler = this.trace.selectChangeHandler;
-        row.supplier = () => queryHiPerfEventData(it.id, row.index);
-        row.focusHandler = () => this.hoverTip(row, HiPerfEventStruct.hoverStruct);
-        row.onThreadHandler = (useCache) => {
-          let context = fold.collect ? this.trace.canvasFavoritePanelCtx! : this.trace.canvasPanelCtx!;
-          fold.canvasSave(context);
-          (renders['HiPerf-Report-Event'] as HiperfEventRender).renderMainThread(
-            {
-              context: context,
-              useCache: useCache,
-              scale: TraceRow.range?.scale || 50,
-              type: `HiPerf-Report-Event-${it.report_value}-${i}`,
-              maxCpu: this.maxCpuId + 1,
-              intervalPerf: SpHiPerf.stringResult?.fValue || 1,
-              range: TraceRow.range,
-            },
-            row
-          );
-          fold.canvasRestore(context);
-        };
-        this.trace.rowsEL?.appendChild(row);
-        this.rowList?.push(row);
-      }
-    });
-  }
-
   async initProcess() {
     Reflect.ownKeys(this.group).forEach((key, index) => {
       let array = this.group[key] as Array<PerfThread>;
diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts
index 7f9723b290361b01ae69f1271d443d15067da3ca..1f4a3853ff4297fa21f9741af712a5ab7d3f099e 100644
--- a/ide/src/trace/component/chart/SpProcessChart.ts
+++ b/ide/src/trace/component/chart/SpProcessChart.ts
@@ -771,7 +771,7 @@ export class SpProcessChart {
       startupRow.canvasSave(context);
       (renders['app-start-up'] as AppStartupRender).renderMainThread(
         {
-          context: context,
+          appStartupContext: context,
           useCache: useCache,
           type: `app-startup ${ processRow.rowId }`,
         },
diff --git a/ide/src/trace/component/chart/SpSdkChart.ts b/ide/src/trace/component/chart/SpSdkChart.ts
index b532629e6247d1fb7dd9445518814d0becbf528b..d4924fea5947e16ed2037faea2d254b596e06a3b 100644
--- a/ide/src/trace/component/chart/SpSdkChart.ts
+++ b/ide/src/trace/component/chart/SpSdkChart.ts
@@ -118,7 +118,7 @@ export class SpSdkChart {
   }
 
   private createSliceSql(startTime: number, tableName: string, columns: Array<any>, where?: string): string {
-    let selectSql = 'select ';
+    let sliceSelectSql = 'select ';
     for (let i = 0; i < columns.length; i++) {
       let column = columns[i];
       if (column.column == 'start_ts') {
@@ -128,16 +128,16 @@ export class SpSdkChart {
         column.column = '(end_ts - ' + startTime + ') AS end_ts';
       }
       if (i == columns.length - 1) {
-        selectSql = selectSql + column.column + ' ';
+        sliceSelectSql = sliceSelectSql + column.column + ' ';
       } else {
-        selectSql = selectSql + column.column + ', ';
+        sliceSelectSql = sliceSelectSql + column.column + ', ';
       }
     }
-    selectSql = selectSql + 'from ' + tableName;
+    sliceSelectSql = sliceSelectSql + 'from ' + tableName;
     if (where != undefined) {
-      selectSql = selectSql + ' ' + where;
+      sliceSelectSql = sliceSelectSql + ' ' + where;
     }
-    return selectSql;
+    return sliceSelectSql;
   }
 
   private createMaxValueSql(tableName: string, where?: string): string {
diff --git a/ide/src/trace/component/metrics/DistributeTermStrategy.ts b/ide/src/trace/component/metrics/DistributeTermStrategy.ts
index 456f51749305d6ac84a1db5261fee9a846290337..2af6d5beb7412adce12accb9b9ff3244b788a4d5 100644
--- a/ide/src/trace/component/metrics/DistributeTermStrategy.ts
+++ b/ide/src/trace/component/metrics/DistributeTermStrategy.ts
@@ -13,90 +13,6 @@
  * limitations under the License.
  */
 
-import { info } from '../../../log/Log.js';
-
-export const initDistributedTermData = (metricData: Array<{
-  threadId: string;
-  threadName: string;
-  processId: string;
-  processName: string;
-  funName: string;
-  dur: string;
-  ts: string;
-  chainId: string;
-  spanId: string;
-  parentSpanId: string;
-  flag: string;
-  trace_name: string;
-}>): DistributedTermListItem => {
-  info('Distributed Term data length is:', metricData.length);
-  let distributedTermListItems: Array<DistributedTermItem> = [];
-  const splitChar = ',';
-  for (let sqlIndex = 0; sqlIndex < metricData.length; sqlIndex++) {
-    let threadIdsList = metricData[sqlIndex].threadId.split(splitChar);
-    let threadNamesList = metricData[sqlIndex].threadName.split(splitChar);
-    let processIdList = metricData[sqlIndex].processId.split(splitChar);
-    let processNameList =
-      metricData[sqlIndex].processName === null ?
-        `${threadIdsList.length  }` : metricData[sqlIndex].processName.split(splitChar);
-    let funNameList = metricData[sqlIndex].funName.split(splitChar);
-    let timeList = metricData[sqlIndex].ts.split(splitChar);
-    let durList = metricData[sqlIndex].dur.split(splitChar);
-    let flag = metricData[sqlIndex].flag;
-    let flagList = flag.split(splitChar);
-    let traceNameList = metricData[sqlIndex].trace_name;
-    let chainIdList = metricData[sqlIndex].chainId;
-    let spanIdList = metricData[sqlIndex].spanId;
-    let parentSpanIdList = metricData[sqlIndex].parentSpanId;
-    let distributedTermListItem: DistributedTermItem = {};
-    for (let index = 0; index < flagList.length; index++) {
-      let across: boolean = true;
-      let receiverTime: number = 0;
-      let senderTime: number = 0;
-      let delay: number = 0;
-      if (flag.indexOf('S,C') >= 0 || flag.indexOf('C,S') >= 0) {
-        across = false;
-        if (flagList[index] === 'S') {
-          receiverTime = Number(timeList[index]);
-        }
-        if (flagList[index] === 'C') {
-          senderTime = Number(timeList[index]);
-        }
-        delay = receiverTime - senderTime;
-      }
-      let type = {
-        acrossTheDevice: across,
-        traceName: traceNameList,
-        traceId: {
-          chainID: chainIdList,
-          spanID: spanIdList,
-          parentSpanID: parentSpanIdList,
-        },
-        functionName: funNameList[index],
-        processInfo: {
-          processId: processIdList[index],
-          processName: processNameList[index],
-        },
-        threadInfoItem: {
-          threadId: threadIdsList[index],
-          threadName: threadNamesList[index],
-        },
-        dur: durList[index],
-        delay: delay,
-      };
-      if ('C' === flagList[index]) {
-        distributedTermListItem.sender = type;
-      } else {
-        distributedTermListItem.receiver = type;
-      }
-    }
-    distributedTermListItems?.push(distributedTermListItem);
-  }
-  return {
-    distributedTermItem: distributedTermListItems,
-  };
-};
-
 export interface DistributedTermListItem {
   distributedTermItem: Array<DistributedTermItem>;
 }
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts
index 22cd28762917885b78790e561b4609b40a4e7bc9..187d1405509963abea402e2a32608a8019e4d599 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuAnalysis.ts
@@ -142,11 +142,11 @@ export class TabCpuAnalysis extends BaseElement {
     });
   }
 
-  queryLogicWorker(option: string, log: string, handler: (res: any) => void) {
+  queryLogicWorker(cpuAnalysisType: string, log: string, handler: (res: any) => void) {
     let cpuAnalysisTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
-      option,
+      cpuAnalysisType,
       {
         endTs: SpSchedulingAnalysis.endTs,
         total: SpSchedulingAnalysis.totalDur,
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts
index 396f9e152dc60fca9cea636bf724567f3fafa856..ea3da89a9759c4aac82da6b913fca0cb7d3ff1b1 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.ts
@@ -44,7 +44,7 @@ export class TabCpuDetailsFrequency extends BaseElement {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
     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.cpuDetailsFrequencyUsageTbl = this.shadowRoot!.querySelector<LitTable>('#fre-tb-cpu-usage');
     this.tabCpuDetailsThreads = this.shadowRoot!.querySelector<TabCpuDetailsThreads>('#tab-cpu-details-threads');
 
     this.cpuDetailsFrequencyUsageTbl!.addEventListener('row-click', (evt: any) => {
@@ -101,20 +101,20 @@ export class TabCpuDetailsFrequency extends BaseElement {
         label: {
           type: 'outer',
         },
-        tip: (obj) => {
+        tip: (freObj) => {
           return `<div>
-                                <div>frequency:${obj.obj.value}</div> 
-                                <div>min:${obj.obj.min}</div>
-                                <div>max:${obj.obj.max}</div>
-                                <div>average:${obj.obj.avg}</div>
-                                <div>duration:${obj.obj.sumTimeStr}</div>
-                                <div>ratio:${obj.obj.ratio}%</div>
+                                <div>frequency:${freObj.obj.value}</div> 
+                                <div>min:${freObj.obj.min}</div>
+                                <div>max:${freObj.obj.max}</div>
+                                <div>average:${freObj.obj.avg}</div>
+                                <div>duration:${freObj.obj.sumTimeStr}</div>
+                                <div>ratio:${freObj.obj.ratio}%</div>
                             </div>
                                 `;
         },
-        hoverHandler: (data) => {
-          if (data) {
-            this.cpuDetailsFrequencyUsageTbl!.setCurrentHover(data);
+        hoverHandler: (cpuDetailsFreqData) => {
+          if (cpuDetailsFreqData) {
+            this.cpuDetailsFrequencyUsageTbl!.setCurrentHover(cpuDetailsFreqData);
           } else {
             this.cpuDetailsFrequencyUsageTbl!.mouseOut();
           }
@@ -143,7 +143,7 @@ export class TabCpuDetailsFrequency extends BaseElement {
   }
 
   noData(value: boolean) {
-    this.shadowRoot!.querySelector<HTMLDivElement>('.chart-box')!.style.display = value ? 'none' : 'block';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.fre-chart-box')!.style.display = value ? 'none' : 'block';
     this.shadowRoot!.querySelector<HTMLDivElement>('.table-box')!.style.width = value ? '100%' : '60%';
   }
 
@@ -164,11 +164,11 @@ export class TabCpuDetailsFrequency extends BaseElement {
     }
   }
 
-  queryLoginWorker(option: string, log: string, handler: (res: any) => void) {
+  queryLoginWorker(cpuFrequencyType: string, log: string, handler: (res: any) => void) {
     let cpuDetailsFrequencyTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
-      option,
+      cpuFrequencyType,
       {
         endTs: SpSchedulingAnalysis.endTs,
         total: SpSchedulingAnalysis.totalDur,
@@ -236,10 +236,10 @@ export class TabCpuDetailsFrequency extends BaseElement {
             margin: 20px;
             height: calc(100vh - 165px);
         }
-        .chart-box{
+        .fre-chart-box{
             width: 40%;
         }
-        #tb-cpu-usage{
+        #fre-tb-cpu-usage{
             height: 100%;
         }
         .table-box{
@@ -255,13 +255,13 @@ export class TabCpuDetailsFrequency extends BaseElement {
         </style>
         <lit-progress-bar id="loading"></lit-progress-bar>
         <div class="d-box">
-            <div class="chart-box">
+            <div class="fre-chart-box">
                 <div style="text-align: center">Statistics By Duration</div>
                 <lit-chart-pie  id="chart-pie"></lit-chart-pie>
             </div>
             <div class="table-box">
                 <table-no-data id="table-no-data">
-                    <lit-table id="tb-cpu-usage" hideDownload>
+                    <lit-table id="fre-tb-cpu-usage" hideDownload>
                         <lit-table-column width="100px" title="No" data-index="index" key="index" align="flex-start" order></lit-table-column>
                         <lit-table-column width="150px" title="frequency" data-index="value" key="value" align="flex-start" order></lit-table-column>
                         <lit-table-column width="100px" title="min" data-index="min" key="min" align="flex-start" order></lit-table-column>
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
index 070b5be75de27711c237fbc84fefb16fadf491a4..1b1239d0c3b0b3e86920997953aed125fa30354d 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIdle.ts
@@ -40,8 +40,8 @@ export class TabCpuDetailsIdle extends BaseElement {
   initElements(): void {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
     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.cpuDetailsLdlPie = this.shadowRoot!.querySelector<LitChartPie>('#cpu_idle_chart-pie');
+    this.cpuDetailsLdlUsageTbl = this.shadowRoot!.querySelector<LitTable>('#idle-tb-cpu-usage');
 
     this.cpuDetailsLdlUsageTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
@@ -110,14 +110,14 @@ export class TabCpuDetailsIdle extends BaseElement {
             this.cpuDetailsLdlUsageTbl!.mouseOut();
           }
         },
-        tip: (obj) => {
+        tip: (idleObj) => {
           return `<div>
-                                <div>idle:${obj.obj.value}</div> 
-                                <div>min:${obj.obj.min}</div>
-                                <div>max:${obj.obj.max}</div>
-                                <div>average:${obj.obj.avg}</div>
-                                <div>duration:${obj.obj.sumTimeStr}</div>
-                                <div>ratio:${obj.obj.ratio}%</div>
+                                <div>idle:${idleObj.obj.value}</div> 
+                                <div>min:${idleObj.obj.min}</div>
+                                <div>max:${idleObj.obj.max}</div>
+                                <div>average:${idleObj.obj.avg}</div>
+                                <div>duration:${idleObj.obj.sumTimeStr}</div>
+                                <div>ratio:${idleObj.obj.ratio}%</div>
                             </div>
                                 `;
         },
@@ -140,8 +140,8 @@ export class TabCpuDetailsIdle extends BaseElement {
   }
 
   noData(value: boolean) {
-    this.shadowRoot!.querySelector<HTMLDivElement>('.chart-box')!.style.display = value ? 'none' : 'block';
-    this.shadowRoot!.querySelector<HTMLDivElement>('.table-box')!.style.width = value ? '100%' : '60%';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.idle-chart-box')!.style.display = value ? 'none' : 'block';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.cpu_idle_table-box')!.style.width = value ? '100%' : '60%';
   }
 
   clearData() {
@@ -151,11 +151,11 @@ export class TabCpuDetailsIdle extends BaseElement {
     this.noData(false);
   }
 
-  queryLoginWorker(option: string, log: string, handler: (res: any) => void) {
+  queryLoginWorker(idleType: string, log: string, handler: (res: any) => void) {
     let cpuDetailsldleTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
-      option,
+      idleType,
       {
         endTs: SpSchedulingAnalysis.endTs,
         total: SpSchedulingAnalysis.totalDur,
@@ -209,15 +209,15 @@ export class TabCpuDetailsIdle extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        .d-box{
+        .idle-box{
             display: flex;
             margin: 20px;
             height: calc(100vh - 165px);
         }
-        .chart-box{
+        .idle-chart-box{
             width: 40%;
         }
-        #tb-cpu-usage{
+        #idle-tb-cpu-usage{
             height: 100%;
         }
         :host {
@@ -225,26 +225,27 @@ export class TabCpuDetailsIdle extends BaseElement {
             height: 100%;
             background-color: var(--dark-background,#FFFFFF);
         }
-        .table-box{
+        #cpu_idle_chart-pie{
+            height: 360px;
+        }
+        
+        .cpu_idle_table-box{
             width: 60%;
             max-height: calc(100vh - 165px);
             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>
-        <div class="d-box">
-            <div class="chart-box">
+        <div class="idle-box">
+            <div class="idle-chart-box">
                 <div style="text-align: center">Statistics By Duration</div>
-                <lit-chart-pie  id="chart-pie"></lit-chart-pie>
+                <lit-chart-pie  id="cpu_idle_chart-pie"></lit-chart-pie>
             </div>
-            <div class="table-box">
+            <div class="cpu_idle_table-box">
                 <table-no-data id="table-no-data">
-                    <lit-table id="tb-cpu-usage" hideDownload>
+                    <lit-table id="idle-tb-cpu-usage" hideDownload>
                         <lit-table-column width="100px" title="No" data-index="index" key="index" align="flex-start" order></lit-table-column>
                         <lit-table-column width="100px" title="idle" data-index="value" key="value" align="flex-start" order></lit-table-column>
                         <lit-table-column width="100px" title="min" data-index="min" key="min" align="flex-start" order></lit-table-column>
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts
index ee39bdff856d3c08bdf933b630592b64388298bf..3b6547dd6cfe3786beed61f190150a10632ae733 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsIrq.ts
@@ -40,7 +40,7 @@ export class TabCpuDetailsIrq extends BaseElement {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
     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.cpuDetailsLrqUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-irq');
 
     this.cpuDetailsLrqUsageTbl!.addEventListener('row-click', (evt: any) => {
       // @ts-ignore
@@ -96,15 +96,15 @@ export class TabCpuDetailsIrq extends BaseElement {
         label: {
           type: 'outer',
         },
-        tip: (obj) => {
+        tip: (irqObj) => {
           return `<div>
-                                <div>block:${obj.obj.block}</div> 
-                                <div>name:${obj.obj.value}</div>
-                                <div>min:${obj.obj.min}</div>
-                                <div>max:${obj.obj.max}</div>
-                                <div>average:${obj.obj.avg}</div>
-                                <div>duration:${obj.obj.sumTimeStr}</div>
-                                <div>ratio:${obj.obj.ratio}%</div>
+                                <div>block:${irqObj.obj.block}</div> 
+                                <div>name:${irqObj.obj.value}</div>
+                                <div>min:${irqObj.obj.min}</div>
+                                <div>max:${irqObj.obj.max}</div>
+                                <div>average:${irqObj.obj.avg}</div>
+                                <div>duration:${irqObj.obj.sumTimeStr}</div>
+                                <div>ratio:${irqObj.obj.ratio}%</div>
                             </div>
                                 `;
         },
@@ -134,7 +134,7 @@ export class TabCpuDetailsIrq extends BaseElement {
   }
 
   noData(value: boolean) {
-    this.shadowRoot!.querySelector<HTMLDivElement>('.chart-box')!.style.display = value ? 'none' : 'block';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.irq-chart-box')!.style.display = value ? 'none' : 'block';
     this.shadowRoot!.querySelector<HTMLDivElement>('.table-box')!.style.width = value ? '100%' : '60%';
   }
 
@@ -145,11 +145,11 @@ export class TabCpuDetailsIrq extends BaseElement {
     this.noData(false);
   }
 
-  queryLoginWorker(option: string, log: string, handler: (res: any) => void) {
+  queryLoginWorker(irqType: string, log: string, handler: (res: any) => void) {
     let cpuDetailsLrqTime = new Date().getTime();
     procedurePool.submitWithName(
       'logic1',
-      option,
+      irqType,
       {
         endTs: SpSchedulingAnalysis.endTs,
         total: SpSchedulingAnalysis.totalDur,
@@ -203,22 +203,22 @@ export class TabCpuDetailsIrq extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        .d-box{
+        .irq-box{
             display: flex;
             margin: 20px;
             height: calc(100vh - 165px);
         }
-        .chart-box{
+        .irq-chart-box{
             width: 40%;
         }
-        #tb-cpu-usage{
+        #tb-cpu-irq{
             height: 100%;
         }
         .table-box{
-            width: 60%;
-            max-height: calc(100vh - 165px);
             border: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
+            width: 60%;
+            max-height: calc(100vh - 165px);
             padding: 10px;
         }
         :host {
@@ -231,23 +231,23 @@ export class TabCpuDetailsIrq extends BaseElement {
         }
         </style>
         <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
-        <div class="d-box">
-            <div class="chart-box">
+        <div class="irq-box">
+            <div class="irq-chart-box">
                 <div style="text-align: center">Statistics By Duration</div>
                 <lit-chart-pie  id="chart-pie"></lit-chart-pie>
             </div>
             <div class="table-box">
                 <table-no-data id="table-no-data">
-                    <lit-table id="tb-cpu-usage" hideDownload>
+                    <lit-table id="tb-cpu-irq" hideDownload>
                         <lit-table-column width="100px" title="No" data-index="index" key="index" align="flex-start" order></lit-table-column>
                         <lit-table-column width="150px" title="block" data-index="block" key="block" align="flex-start" order></lit-table-column>
                         <!--<lit-table-column width="100px" title="id" data-index="id" key="id" align="flex-start" order></lit-table-column>-->
-                        <lit-table-column width="150px" title="name" data-index="value" key="value" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="min" data-index="min" key="min" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="max" data-index="max" key="max" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="average" data-index="avg" key="avg" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="duration" data-index="sumTimeStr" key="sumTimeStr" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="ratio" key="ratio" align="flex-start" order></lit-table-column>
+                        <lit-table-column title="name" data-index="value" key="value" align="flex-start" order width="150px"></lit-table-column>
+                        <lit-table-column title="min" data-index="min" key="min" align="flex-start" order width="100px"></lit-table-column>
+                        <lit-table-column title="max" data-index="max" key="max" align="flex-start" order width="100px"></lit-table-column>
+                        <lit-table-column title="average" data-index="avg" key="avg" align="flex-start" order width="100px"></lit-table-column>
+                        <lit-table-column title="duration" data-index="sumTimeStr" key="sumTimeStr" align="flex-start" order width="100px"></lit-table-column>
+                        <lit-table-column title="%" data-index="ratio" key="ratio" align="flex-start" order width="100px"></lit-table-column>
                     </lit-table>
                 </table-no-data>
             </div>
diff --git a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts
index 5d7b9513d68029db93d438feb6716ed0dc2b6ba6..9df7992e24e2624f9e15999ec198e700ed9a8266 100644
--- a/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts
+++ b/ide/src/trace/component/schedulingAnalysis/TabCpuDetailsThreads.ts
@@ -36,10 +36,10 @@ export class TabCpuDetailsThreads extends BaseElement {
   initElements(): void {
     this.tableNoData = this.shadowRoot!.querySelector<TableNoData>('#table-no-data');
     this.progress = this.shadowRoot!.querySelector<LitProgressBar>('#loading');
-    this.cpuDetailsThreadPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.cpuDetailsThreadPie = this.shadowRoot!.querySelector<LitChartPie>('#cpu-thread-chart-pie');
     this.cpuDetailsThreadUsageTbl = this.shadowRoot!.querySelector<LitTable>('#tb-cpu-usage');
 
-    this.shadowRoot!.querySelector<HTMLDivElement>('.go-back')!.onclick = (e) => {
+    this.shadowRoot!.querySelector<HTMLDivElement>('.cpu-thread-go-back')!.onclick = (e) => {
       if (!this.progress!.loading) {
         this.parentNode!.querySelector<HTMLDivElement>('.d-box')!.style.display = 'flex';
         this.setShow = false;
@@ -76,7 +76,7 @@ export class TabCpuDetailsThreads extends BaseElement {
   }
 
   init(cpu: number, it: any) {
-    this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Threads in Freq ' + it.value;
+    this.shadowRoot!.querySelector<HTMLDivElement>('.cpu-thread-subheading')!.textContent = 'Threads in Freq ' + it.value;
     this.progress!.loading = true;
     procedurePool.submitWithName(
       'logic1',
@@ -146,8 +146,8 @@ export class TabCpuDetailsThreads extends BaseElement {
   }
 
   noData(value: boolean) {
-    this.shadowRoot!.querySelector<HTMLDivElement>('.chart-box')!.style.display = value ? 'none' : 'block';
-    this.shadowRoot!.querySelector<HTMLDivElement>('.table-box')!.style.width = value ? '100%' : '60%';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.cpu-thread-chart-box')!.style.display = value ? 'none' : 'block';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.cpu-thread-table-box')!.style.width = value ? '100%' : '60%';
   }
 
   clearData() {
@@ -201,21 +201,21 @@ export class TabCpuDetailsThreads extends BaseElement {
             background-color: var(--dark-background,#FFFFFF);
             display: none;
         }
-        .d-box{
+        .cpu-thread-d-box{
             display: flex;
             margin: 20px;
             height: calc(100vh - 165px);
         }
-        .chart-box{
+        .cpu-thread-chart-box{
             width: 40%;
         }
-        .subheading{
+        .cpu-thread-subheading{
             font-weight: bold;
         }
         #tb-cpu-usage{
             height: 100%;
         }
-        .back-box{
+        .cpu-thread-back-box{
             background-color: var(--bark-expansion,#0C65D1);
             border-radius: 5px;
             color: #fff;
@@ -226,36 +226,36 @@ export class TabCpuDetailsThreads extends BaseElement {
             justify-content: center;
             align-items: center;
         }
-        .table-box{
+        .cpu-thread-table-box{
             width: 60%;
             max-height: calc(100vh - 165px);
             border: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
             padding: 10px;
         }
-        #chart-pie{
+        #cpu-thread-chart-pie{
             height: 360px;
         }
-        .go-back{
+        .cpu-thread-go-back{
             display:flex;
             align-items: center;
             cursor: pointer;
         }
         </style>
         <lit-progress-bar id="loading" style="height: 1px;width: 100%"></lit-progress-bar>
-        <div class="d-box">
-            <div class="chart-box">
-                <div class="go-back">
-                    <div class="back-box">
+        <div class="cpu-thread-d-box">
+            <div class="cpu-thread-chart-box">
+                <div class="cpu-thread-go-back">
+                    <div class="cpu-thread-back-box">
                         <lit-icon name="arrowleft"></lit-icon>
                     </div>
                     <!--<lit-icon name="arrowleft"></lit-icon>-->
-                    <div class="subheading">Threads in Freq</div>
+                    <div class="cpu-thread-subheading">Threads in Freq</div>
                 </div>
                 <div style="margin-top:15px;text-align: center">Statistics By Duration</div>
-                <lit-chart-pie  id="chart-pie"></lit-chart-pie>
+                <lit-chart-pie  id="cpu-thread-chart-pie"></lit-chart-pie>
             </div>
-            <div class="table-box">
+            <div class="cpu-thread-table-box">
                 <table-no-data id="table-no-data">
                     <lit-table id="tb-cpu-usage" hideDownload>
                         <lit-table-column width="100px" title="No" data-index="index" key="index" align="flex-start" order></lit-table-column>
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts b/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts
index dc60a5ded1251c1125d8907927291c274ef9663d..bfcf7f17047a0d1891a5f2b84af96f76b7787325 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.ts
@@ -160,7 +160,7 @@ export class Top20ProcessSwitchCount extends BaseElement {
             height: 100%;
             background-color: var(--dark-background5,#F6F6F6);
         }
-        .tb_switch_count{
+        .top-process-tb-switch-count{
             flex: 1;        
             overflow: auto ;
             border-radius: 5px;
@@ -168,28 +168,28 @@ export class Top20ProcessSwitchCount extends BaseElement {
             margin: 15px;
             padding: 5px 15px
         }
-        .pie-chart{
+        .top-process-pie-chart{
             display: flex;
             box-sizing: border-box;
             width: 500px;
             height: 500px;
         }
-        .root{
-            width: 100%;
-            height: 100%;
+        .top-process-switch-root{
             display: flex;
             flex-direction: row;
             box-sizing: border-box;
+            width: 100%;
+            height: 100%;
         }
         </style>
         <lit-progress-bar id="loading" style="height: 1px;width: 100%" loading></lit-progress-bar>
         <table-no-data id="nodata" contentHeight="500px">
-        <div class="root">
+        <div class="top-process-switch-root">
             <div style="display: flex;flex-direction: column;align-items: center">
                 <div>Statistics By Sched_Switch Count</div>
-                <lit-chart-pie id="pie" class="pie-chart"></lit-chart-pie>
+                <lit-chart-pie id="pie" class="top-process-pie-chart"></lit-chart-pie>
             </div>
-            <div class="tb_switch_count" >
+            <div class="top-process-tb-switch-count" >
                 <lit-table id="tb-process-switch-count" hideDownload style="height: auto">
                     <lit-table-column width="1fr" title="NO" data-index="NO" key="NO" align="flex-start" order></lit-table-column>
                     <lit-table-column width="1fr" title="tid" data-index="tid" key="tid" align="flex-start" order></lit-table-column>
diff --git a/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts b/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts
index f76f5f13015ac8056fb73d9f0465eec9a4bc0055..0395519b09618f40dc92bd48f1d8f7b8d6972e52 100644
--- a/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts
+++ b/ide/src/trace/component/schedulingAnalysis/Top20ProcessThreadCount.ts
@@ -175,17 +175,17 @@ export class Top20ProcessThreadCount extends BaseElement {
             margin: 15px;
             padding: 5px 15px
         }
-        .root{
+        .thread-root{
             width: 100%;
             height: 100%;
+            box-sizing: border-box;
             display: flex;
             flex-direction: row;
-            box-sizing: border-box;
         }
         </style>
         <lit-progress-bar id="loading" style="height: 1px;width: 100%" loading></lit-progress-bar>
         <table-no-data id="nodata" contentHeight="500px">
-        <div class="root">
+        <div class="thread-root">
             <div style="display: flex;flex-direction: column;align-items: center">
                 <div>Statistics By Thread Count</div>
                 <lit-chart-pie id="pie" class="pie-chart"></lit-chart-pie>
diff --git a/ide/src/trace/component/setting/SpAllocations.ts b/ide/src/trace/component/setting/SpAllocations.ts
index a053ee41aa10fd85bf3121c0069e2c37e7c1f6c5..568ea4682eb00db8eb93ba76dc9a72b368d2d7f4 100644
--- a/ide/src/trace/component/setting/SpAllocations.ts
+++ b/ide/src/trace/component/setting/SpAllocations.ts
@@ -245,15 +245,6 @@ export class SpAllocations extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        .root {
-            padding-top: 45px;
-            margin-left: 40px;
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            grid-template-rows: min-content 1fr min-content;
-            width: 90%;
-            border-radius: 0px 16px 16px 0px;
-        }
         :host{
             display: block;
             width: 100%;
@@ -263,15 +254,23 @@ export class SpAllocations extends BaseElement {
         .title {
             grid-column: span 2 / auto;
         }
-
-        .font-style{
+        .allocation-font-style{
             font-family: Helvetica-Bold;
             font-size: 1em;
             color: var(--dark-color1,#000000);
             line-height: 28px;
             font-weight: 700;
         }
-        .inner-font-style {
+        .root {
+            padding-top: 45px;
+            margin-left: 40px;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: min-content 1fr min-content;
+            width: 90%;
+            border-radius: 0px 16px 16px 0px;
+        }
+        .allocation-inner-font-style {
             font-family: Helvetica,serif;
             font-size: 1em;
             color: var(--dark-color1,#000000);
@@ -294,7 +293,7 @@ export class SpAllocations extends BaseElement {
         input::-webkit-input-placeholder{
             color:var(--bark-prompt,#999999);
         }
-        .select {
+        .allocation-select {
             height: 30px;
             border:0;
             border-radius: 3px;
@@ -310,17 +309,17 @@ export class SpAllocations extends BaseElement {
             font-weight: 400;
             border-radius: 16px;
         }
-        .application{
+        .allocation-application{
            display: flex;
            flex-direction: column;
            grid-gap: 15px;
            margin-top: 40px;
         }
-        .switchstyle{
+        .allocation-switchstyle{
            margin-top: 40px;
            display: flex;
         }
-        .inputstyle{
+        .allocation-inputstyle{
             background: var(--dark-background5,#FFFFFF);
             border: 1px solid var(--dark-background5,#999999);
             font-family: Helvetica;
@@ -330,7 +329,7 @@ export class SpAllocations extends BaseElement {
             line-height: 16px;
             font-weight: 400;
         }
-        .inputstyle::-webkit-input-placeholder {
+        .allocation-inputstyle::-webkit-input-placeholder {
            background: var(--dark-background5,#FFFFFF);
         }
         #one_mb{
@@ -389,7 +388,7 @@ export class SpAllocations extends BaseElement {
             margin-bottom: 16px;
             grid-column: span 1;
         }
-        .record-prompt{
+        .allocation-record-prompt{
               opacity: 0.6;
               font-family: Helvetica;
               font-size: 14px;
@@ -398,69 +397,69 @@ export class SpAllocations extends BaseElement {
               font-weight: 400;
         }
         .interval-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;
+            background-color: var(--dark-background5,#F2F2F2);
+            color:var(--dark-color,#6a6f77);
         }
         
         </style>
         <div class="root">
           <div class = "title">
-            <span class="font-style">Native Memory</span>
+            <span class="allocation-font-style">Native Memory</span>
           </div>
-          <div class="application">
-             <span class="inner-font-style">ProcessId or ProcessName</span>
+          <div class="allocation-application">
+             <span class="allocation-inner-font-style">ProcessId or ProcessName</span>
              <span class="value-range">Record process</span>
              <lit-allocation-select show-search class="processSelect" rounded default-value="" id="pid" placement="bottom" title="process" placeholder="please select process">
              </lit-allocation-select>
           </div>
-          <div class="application">
-            <span class="inner-font-style" >Max unwind level</span>
+          <div class="allocation-application">
+            <span class="allocation-inner-font-style" >Max unwind level</span>
             <span class="value-range">Max Unwind Level Rang is 0 - 512, default 10</span>
-            <input id= "unwind"  class="inputstyle" type="text" placeholder="Enter the Max Unwind Level" oninput="if(this.value > 512) this.value = '512'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="10">
+            <input id= "unwind"  class="allocation-inputstyle" type="text" placeholder="Enter the Max Unwind Level" oninput="if(this.value > 512) this.value = '512'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="10">
           </div>
-          <div class="application">
-            <span class="inner-font-style">Shared Memory Size (One page equals 4 KB)</span>
+          <div class="allocation-application">
+            <span class="allocation-inner-font-style">Shared Memory Size (One page equals 4 KB)</span>
             <span class="value-range">Shared Memory Size Range is 0 - 131072 page, default 16384 page</span>
             <div>
-              <input id = "shareMemory" class="inputstyle" type="text" placeholder="Enter the Shared Memory Size" oninput="if(this.value > 131072) this.value = '131072'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
+              <input id = "shareMemory" class="allocation-inputstyle" type="text" placeholder="Enter the Shared Memory Size" oninput="if(this.value > 131072) this.value = '131072'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
               <span>Page</span>
             </div>
           </div>
-          <div class="application">
-            <span class="inner-font-style" >Filter Memory Size </span>
+          <div class="allocation-application">
+            <span class="allocation-inner-font-style" >Filter Memory Size </span>
             <span class="value-range">Filter size Range is 0 - 65535 byte, default 4096 byte</span> 
             <div>
-                <input id = "filterSized" class="inputstyle" type="text" placeholder="Enter the Filter Memory Size" oninput="if(this.value > 65535) this.value = '65535'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="4096">
+                <input id = "filterSized" class="allocation-inputstyle" type="text" placeholder="Enter the Filter Memory Size" oninput="if(this.value > 65535) this.value = '65535'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="4096">
                  <span>Byte</span>
             </div>
           </div>
-          <div class="switchstyle">
-              <span class="inner-font-style" id="fp-unwind">Use Fp Unwind</span>               
+          <div class="allocation-switchstyle">
+              <span class="allocation-inner-font-style" id="fp-unwind">Use Fp Unwind</span>               
               <lit-switch class="lts" id="use_fp_unwind" title="fp unwind" checked="true"></lit-switch>
           </div>
-          <div class="switchstyle">
-              <span class="inner-font-style" id="record_accurately ">Use Record Accurately (Available on recent OpenHarmony 4.0)</span> 
+          <div class="allocation-switchstyle">
+              <span class="allocation-inner-font-style" id="record_accurately ">Use Record Accurately (Available on recent OpenHarmony 4.0)</span> 
               <lit-switch   class="lts" id="use_record_accurately" title="record_accurately" checked="true"></lit-switch>
           </div>
-          <div class="switchstyle">
-              <span class="inner-font-style" id="offline_symbolization">Use Offline Symbolization (Available on recent OpenHarmony 4.0)</span> 
+          <div class="allocation-switchstyle">
+              <span class="allocation-inner-font-style" id="offline_symbolization">Use Offline Symbolization (Available on recent OpenHarmony 4.0)</span> 
               <lit-switch class="lts" id="use_offline_symbolization" title="offline_symbolization" checked="true"></lit-switch>
           </div>
-           <div class="switchstyle">
-              <span class="inner-font-style" id="startup_mode">Use Startup Mode (Available on recent OpenHarmony 4.0)</span> 
+           <div class="allocation-switchstyle">
+              <span class="allocation-inner-font-style" id="startup_mode">Use Startup Mode (Available on recent OpenHarmony 4.0)</span> 
               <lit-switch class="lts" id="use_startup_mode" title="startup_mode"></lit-switch>
           </div>   
-          <div class="switchstyle record-statistics-result" style="grid-row: 6; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 1fr;grid-template-columns: 1fr min-content;">
+          <div class="allocation-switchstyle record-statistics-result" style="grid-row: 6; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 1fr;grid-template-columns: 1fr min-content;">
             <div class="record-title">
                 <span class="record-mode">Use Record Statistics (Available on recent OpenHarmony 4.0)</span> 
-                <span class="record-prompt"> Time between following interval (0 = disabled) </span>
+                <span class="allocation-record-prompt"> Time between following interval (0 = disabled) </span>
             </div>
             <lit-slider id="interval-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
             </lit-slider>
diff --git a/ide/src/trace/component/setting/SpFileSystem.ts b/ide/src/trace/component/setting/SpFileSystem.ts
index 32657d046bd148d2308d06d2f55d66ab0af6192a..e8d1c66a541f025cae88f70610fc63a219062b3a 100644
--- a/ide/src/trace/component/setting/SpFileSystem.ts
+++ b/ide/src/trace/component/setting/SpFileSystem.ts
@@ -32,8 +32,6 @@ export class SpFileSystem extends BaseElement {
   private maximum: HTMLInputElement | undefined | null;
   private selectProcess: HTMLInputElement | undefined | null;
 
-  private configList: Array<any> = [];
-
   set startRecord(start: boolean) {
     if (start) {
       this.unDisable();
@@ -116,7 +114,7 @@ export class SpFileSystem extends BaseElement {
           break;
         case 'Max Unwind Level':
           let maxUnwindLevel = value as HTMLInputElement;
-          if (maxUnwindLevel.value != '') {
+          if (maxUnwindLevel.value !== '') {
             systemConfig.unWindLevel = Number(maxUnwindLevel.value);
           }
       }
@@ -125,113 +123,12 @@ export class SpFileSystem extends BaseElement {
   }
 
   initElements(): void {
-    this.initConfigList();
-    let fileSystemConfigList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
-    this.configList.forEach((config) => {
-      let fileSystemDiv = document.createElement('div');
-      if (config.hidden) {
-        fileSystemDiv.className = 'file-system-config-div hidden';
-      } else {
-        fileSystemDiv.className = 'file-system-config-div';
-      }
-      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 multipleSelect = '';
-          let placeholder = config.selectArray[0];
-          if (config.title == 'Process') {
-          } else if (config.title == 'SystemCall Event') {
-            placeholder = 'ALL-Event';
-          }
-          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) => {
-            multipleSelect += `<lit-select-option value="${value}">${value}</lit-select-option>`;
-          });
-          multipleSelect += `</lit-select-v>`;
-          fileSystemDiv.innerHTML = fileSystemDiv.innerHTML + multipleSelect;
-          break;
-        case 'input':
-          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') {
-            fileSystemInput.oninput = (ev) => {
-              fileSystemInput.value = fileSystemInput.value.replace(/\D/g, '');
-            };
-          }
-          fileSystemDiv.appendChild(fileSystemInput);
-          break;
-        case 'select':
-          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) => {
-            fileSystemSelect += `<lit-select-option value="${value}">${value}</lit-select-option>`;
-          });
-          fileSystemSelect += `</lit-select>`;
-          fileSystemDiv.innerHTML = fileSystemDiv.innerHTML + fileSystemSelect;
-          break;
-        case 'switch':
-          let fileSystemSwitch = document.createElement('lit-switch') as LitSwitch;
-          fileSystemSwitch.className = 'config';
-          fileSystemSwitch.title = config.title;
-          if (config.value) {
-            fileSystemSwitch.checked = true;
-          } else {
-            fileSystemSwitch.checked = false;
-          }
-          if (config.title == 'Start FileSystem Record') {
-            fileSystemSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
-              let detail = event.detail;
-              if (detail!.checked) {
-                this.startFileSystem = true;
-              } else {
-                this.startFileSystem = false;
-              }
-            });
-          }
-          if (config.title == 'Start Page Fault Record') {
-            fileSystemSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
-              let detail = event.detail;
-              if (detail!.checked) {
-                this.startVirtualMemory = true;
-              } else {
-                this.startVirtualMemory = false;
-              }
-            });
-          }
-          if (config.title == 'Start BIO Latency Record') {
-            fileSystemSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
-              let detail = event.detail;
-              if (detail!.checked) {
-                this.startIo = true;
-              } else {
-                this.startIo = false;
-              }
-            });
-          }
-          fileSystemHeadDiv.appendChild(fileSystemSwitch);
-          break;
-        default:
-          break;
-      }
-      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']");
+    this.switchChange();
+    this.processInput = this.shadowRoot?.querySelector<LitSelectV>('lit-select-v');
+    this.maximum = this.shadowRoot?.querySelector<HTMLInputElement>('#maxUnwindLevel');
     this.maximum?.addEventListener('keyup', (eve: Event) => {
       this.maximum!.value = this.maximum!.value.replace(/\D/g, '');
-      if (this.maximum!.value != '') {
+      if (this.maximum!.value !== '') {
         let mun = parseInt(this.maximum!.value);
         if (mun > 64 || mun < 0) {
           this.maximum!.value = '10';
@@ -254,20 +151,50 @@ export class SpFileSystem extends BaseElement {
     this.disable();
   }
 
-  private unDisable() {
+  private switchChange(): void {
+    let fileSystemSwitch = this.shadowRoot?.querySelector<LitSwitch>('#fileSystem');
+    fileSystemSwitch!.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
+      let detail = event.detail;
+      if (detail!.checked) {
+        this.startFileSystem = true;
+      } else {
+        this.startFileSystem = false;
+      }
+    });
+    let pageFaultSwitch = this.shadowRoot?.querySelector<LitSwitch>('#pageFault');
+    pageFaultSwitch!.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
+      let detail = event.detail;
+      if (detail!.checked) {
+        this.startVirtualMemory = true;
+      } else {
+        this.startVirtualMemory = false;
+      }
+    });
+    let bioLatencySwitch = this.shadowRoot?.querySelector<LitSwitch>('#bioLatency');
+    bioLatencySwitch!.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
+      let detail = event.detail;
+      if (detail!.checked) {
+        this.startIo = true;
+      } else {
+        this.startIo = false;
+      }
+    });
+  }
+
+  private unDisable(): void {
     let fileSystemConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     fileSystemConfigVals!.forEach((fileSystemConfigVal) => {
       fileSystemConfigVal.removeAttribute('disabled');
     });
   }
 
-  private disable() {
+  private disable(): void {
     let fileSystemConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     fileSystemConfigVals!.forEach((fileSystemConfigVal) => {
       if (
-        fileSystemConfigVal.title == 'Start FileSystem Record' ||
-        fileSystemConfigVal.title == 'Start Page Fault Record' ||
-        fileSystemConfigVal.title == 'Start BIO Latency Record'
+        fileSystemConfigVal.title === 'Start FileSystem Record' ||
+        fileSystemConfigVal.title === 'Start Page Fault Record' ||
+        fileSystemConfigVal.title === 'Start BIO Latency Record'
       ) {
       } else {
         fileSystemConfigVal.setAttribute('disabled', '');
@@ -275,46 +202,6 @@ export class SpFileSystem extends BaseElement {
     });
   }
 
-  initConfigList(): void {
-    this.configList = [
-      {
-        title: 'Start FileSystem Record',
-        des: '',
-        hidden: false,
-        type: 'switch',
-        value: false,
-      },
-      {
-        title: 'Start Page Fault Record',
-        des: '',
-        hidden: false,
-        type: 'switch',
-        value: false,
-      },
-      {
-        title: 'Start BIO Latency Record',
-        des: '',
-        hidden: false,
-        type: 'switch',
-        value: false,
-      },
-      {
-        title: 'Process',
-        des: 'Record process',
-        hidden: false,
-        type: 'select-multiple',
-        selectArray: [''],
-      },
-      {
-        title: 'Max Unwind Level',
-        des: '',
-        hidden: false,
-        type: 'input',
-        value: '10',
-      },
-    ];
-  }
-
   initHtml(): string {
     return `
         <style>
@@ -401,8 +288,38 @@ export class SpFileSystem extends BaseElement {
         }
         </style>
         <div class="root">
-            <div class="configList file-system-config">
+          <div class="file-system-config-div">
+            <div>
+               <span class="file-system-title">Start FileSystem Record</span>
+               <lit-switch id="fileSystem"></lit-switch>
+            </div>
+          </div>
+          <div class="file-system-config-div">
+            <div>
+               <span class="file-system-title">Start Page Fault Record</span>
+               <lit-switch id="pageFault"></lit-switch>
+            </div>
+          </div>
+          <div class="file-system-config-div">
+            <div>
+               <span class="file-system-title">Start BIO Latency Record</span>
+               <lit-switch id="bioLatency"></lit-switch>
             </div>
+          </div>
+          <div class="file-system-config-div">
+             <div>
+                 <span class="file-system-title">Process</span>
+                 <span class="file-system-des">Record process</span>
+              </div>
+            <lit-select-v default-value="" rounded="" class="file-system-select config" mode="multiple" canInsert="" 
+            rounded placement = "bottom" title="Process"></lit-select-v>
+          </div>
+          <div class="file-system-config-div">
+             <div>
+                 <span class="file-system-title">Max Unwind Level</span>
+              </div>
+            <input class="fileSystem-input config" title="Max Unwind Level" id="maxUnwindLevel" value="10"/>
+          </div>
         </div>
         `;
   }
diff --git a/ide/src/trace/component/setting/SpHisysEvent.ts b/ide/src/trace/component/setting/SpHisysEvent.ts
index 3c75eaf3045060a82945511fcad448476f3cf213..e6e0f4e82bfceeecde46d1b2e563c92edb6b5fca 100644
--- a/ide/src/trace/component/setting/SpHisysEvent.ts
+++ b/ide/src/trace/component/setting/SpHisysEvent.ts
@@ -28,7 +28,6 @@ import { HdcDeviceManager } from '../../../hdc/HdcDeviceManager.js';
 export class SpHisysEvent extends BaseElement {
   private eventProcessInput: LitAllocationSelect | undefined | null;
   private selectProcess: HTMLInputElement | undefined | null;
-  private eventConfigList: Array<any> = [];
 
   set startSamp(start: boolean) {
     if (start) {
@@ -52,157 +51,56 @@ export class SpHisysEvent extends BaseElement {
   }
 
   initElements(): void {
-    this.initConfigList();
-    let hisysEventConfigList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
-    this.eventConfigList.forEach((config) => {
-      let hisysEventDiv = document.createElement('div');
-      if (config.hidden) {
-        hisysEventDiv.className = 'hisys-event-config-div hidden';
+    let hisysEventSwitch = this.shadowRoot?.querySelector('lit-switch') as LitSwitch;
+    hisysEventSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
+      let detail = event.detail;
+      if (detail!.checked) {
+        this.startSamp = true;
+        this.unDisable();
       } else {
-        hisysEventDiv.className = 'hisys-event-config-div';
+        this.startSamp = false;
+        this.disable();
       }
-      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 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 hisysEventSwitch = document.createElement('lit-switch') as LitSwitch;
-          hisysEventSwitch.className = 'config';
-          hisysEventSwitch.title = config.title;
-          if (config.value) {
-            hisysEventSwitch.checked = true;
-          } else {
-            hisysEventSwitch.checked = false;
-          }
-          if (config.title == 'Start Hisystem Event Tracker Record') {
-            hisysEventSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
-              let detail = event.detail;
-              if (detail!.checked) {
-                this.startSamp = true;
-                this.unDisable();
-              } else {
-                this.startSamp = false;
-                this.disable();
-              }
-            });
-          }
-          hisysEventHeadDiv.appendChild(hisysEventSwitch);
-          break;
-        default:
-          break;
-      }
-      hisysEventConfigList!.appendChild(hisysEventDiv);
     });
-    this.eventProcessInput = this.shadowRoot?.querySelector<LitAllocationSelect>(
-      "lit-allocation-select[title='AppName']"
-    );
+    this.eventProcessInput = this.shadowRoot?.querySelector<LitAllocationSelect>('lit-allocation-select');
     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 == '') {
+      if (SpRecordTrace.serialNumber === '') {
         this.eventProcessInput!.processData = [];
         this.eventProcessInput!.initData();
       }
     });
     hisyEventProcessInput!.addEventListener('mouseup', () => {
-      if (SpRecordTrace.serialNumber == '') {
+      if (SpRecordTrace.serialNumber === '') {
         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) => {
-            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 != '') {
-                hisysEventProcessData.push(process);
-              }
-            }
-            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) => {
-                hisysEventProcessData = [];
-                if (res) {
-                  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 != '') {
-                      hisysEventProcessData.push(process);
-                    }
-                  }
-                }
-                this.eventProcessInput!.processData = hisysEventProcessData;
-                this.eventProcessInput!.initData();
-              });
-            }
-          });
-        }
+        Cmd.getProcess().then((processList) => {
+          this.eventProcessInput!.processData = processList;
+          this.eventProcessInput!.initData();
+        });
       }
     });
     this.disable();
   }
 
-  private unDisable() {
+  private unDisable(): void {
     let hisysEventConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     hisysEventConfigVals!.forEach((hisysEventConfigVal) => {
       hisysEventConfigVal.removeAttribute('disabled');
     });
   }
 
-  private disable() {
+  private disable(): void {
     let hisysEventConfigVals = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     hisysEventConfigVals!.forEach((hisysEventConfigVal) => {
-      if (hisysEventConfigVal.title != 'Start Hisystem Event Tracker Record') {
+      if (hisysEventConfigVal.title !== 'Start Hisystem Event Tracker Record') {
         hisysEventConfigVal.setAttribute('disabled', '');
       }
     });
   }
 
-  initConfigList(): void {
-    this.eventConfigList = [
-      {
-        title: 'Start Hisystem Event Tracker Record',
-        des: '',
-        hidden: false,
-        type: 'switch',
-        value: false,
-      },
-      {
-        title: 'AppName',
-        des: 'Record AppName',
-        hidden: false,
-        type: 'select',
-        selectArray: [''],
-      },
-    ];
-  }
-
   initHtml(): string {
     return `
         <style>
@@ -281,8 +179,20 @@ export class SpHisysEvent extends BaseElement {
         }
         </style>
         <div class="root">
-            <div class="configList hisys-event-config">
-            </div>
+          <div class="hisys-event-config-div">
+              <div>
+                 <span class="event-title">Start Hisystem Event Tracker Record</span>
+                 <lit-switch></lit-switch>
+              </div>
+          </div>
+          <div class="hisys-event-config-div">
+              <div>
+                 <span class="event-title">AppName</span>
+                 <span class="event-des">Record AppName</span>
+              </div>
+               <lit-allocation-select style="width: 100%;" rounded="" default-value="" class="event-select config" 
+               placement="bottom" title="AppName"></lit-allocation-select>
+          </div>
         </div>
         `;
   }
diff --git a/ide/src/trace/component/setting/SpRecordPerf.ts b/ide/src/trace/component/setting/SpRecordPerf.ts
index 438a5707acea59729bcd8f137bb49dde9ff694c6..28658908de9160d05317c4fd960899dba6e674db 100644
--- a/ide/src/trace/component/setting/SpRecordPerf.ts
+++ b/ide/src/trace/component/setting/SpRecordPerf.ts
@@ -362,8 +362,8 @@ export class SpRecordPerf extends BaseElement {
                 this.cpuSelect?.dataSource(cpuData, 'ALL-CPU');
               });
             } else {
-              sp.search = true;
               recordPerfSearch.clear();
+              sp.search = true;
               recordPerfSearch.setPercent('please kill other hdc-server !', -2);
             }
           });
@@ -548,10 +548,10 @@ export class SpRecordPerf extends BaseElement {
         value: false,
       },
       {
+        type: 'select-multiple',
         title: 'Process',
         des: 'Record process',
         hidden: false,
-        type: 'select-multiple',
         selectArray: [''],
       },
       {
diff --git a/ide/src/trace/component/setting/SpVmTracker.ts b/ide/src/trace/component/setting/SpVmTracker.ts
index d7977151f86a5d0d2a0a5deda8266a44d1e5d5ab..81dec5e24e4aaea70fe7f6ad36dfbb078ad7809d 100644
--- a/ide/src/trace/component/setting/SpVmTracker.ts
+++ b/ide/src/trace/component/setting/SpVmTracker.ts
@@ -25,7 +25,6 @@ import { Cmd } from '../../../command/Cmd.js';
 @element('sp-vm-tracker')
 export class SpVmTracker extends BaseElement {
   private vmTrackerProcessInput: LitAllocationSelect | undefined | null;
-  private configList: Array<any> = [];
 
   set startSamp(start: boolean) {
     if (start) {
@@ -54,72 +53,27 @@ export class SpVmTracker extends BaseElement {
   }
 
   initElements(): void {
-    this.initConfigList();
-    let configList = this.shadowRoot?.querySelector<HTMLDivElement>('.configList');
-    this.configList.forEach((config) => {
-      let vmTrackerDiv = document.createElement('div');
-      if (config.hidden) {
-        vmTrackerDiv.className = 'vm-config-div hidden';
+    let vmTrackerSwitch = this.shadowRoot?.querySelector('lit-switch') as LitSwitch;
+    vmTrackerSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
+      let detail = event.detail;
+      if (detail!.checked) {
+        this.startSamp = true;
+        this.unDisable();
       } else {
-        vmTrackerDiv.className = 'vm-config-div';
+        this.startSamp = false;
+        this.disable();
       }
-      let headDiv = document.createElement('div');
-      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';
-      headDiv.appendChild(des);
-      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>`;
-          vmTrackerDiv.innerHTML = vmTrackerDiv.innerHTML + html1;
-          break;
-        case 'switch':
-          let vmTrackerSwitch = document.createElement('lit-switch') as LitSwitch;
-          vmTrackerSwitch.className = 'config';
-          vmTrackerSwitch.title = config.title;
-          if (config.value) {
-            vmTrackerSwitch.checked = true;
-          } else {
-            vmTrackerSwitch.checked = false;
-          }
-          if (config.title == 'Start VM Tracker Record') {
-            vmTrackerSwitch.addEventListener('change', (event: CustomEventInit<LitSwitchChangeEvent>) => {
-              let detail = event.detail;
-              if (detail!.checked) {
-                this.startSamp = true;
-                this.unDisable();
-              } else {
-                this.startSamp = false;
-                this.disable();
-              }
-            });
-          }
-          headDiv.appendChild(vmTrackerSwitch);
-          break;
-        default:
-          break;
-      }
-      configList!.appendChild(vmTrackerDiv);
     });
-    this.vmTrackerProcessInput = this.shadowRoot?.querySelector<LitAllocationSelect>(
-      "lit-allocation-select[title='Process']"
-    );
+    this.vmTrackerProcessInput = this.shadowRoot?.querySelector<LitAllocationSelect>('lit-allocation-select');
     let vmTrackerMul = this.vmTrackerProcessInput?.shadowRoot?.querySelector('.multipleSelect') as HTMLDivElement;
     vmTrackerMul!.addEventListener('mousedown', (ev) => {
-      if (SpRecordTrace.serialNumber == '') {
+      if (SpRecordTrace.serialNumber === '') {
         this.vmTrackerProcessInput!.processData = [];
         this.vmTrackerProcessInput!.initData();
       }
     });
     vmTrackerMul!.addEventListener('mouseup', () => {
-      if (SpRecordTrace.serialNumber == '') {
+      if (SpRecordTrace.serialNumber === '') {
         this.vmTrackerProcessInput!.processData = [];
         this.vmTrackerProcessInput!.initData();
       } else {
@@ -132,41 +86,22 @@ export class SpVmTracker extends BaseElement {
     this.disable();
   }
 
-  private unDisable() {
+  private unDisable(): void {
     let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     configVal!.forEach((configVal1) => {
       configVal1.removeAttribute('disabled');
     });
   }
 
-  private disable() {
+  private disable(): void {
     let configVal = this.shadowRoot?.querySelectorAll<HTMLElement>('.config');
     configVal!.forEach((configVal1) => {
-      if (configVal1.title != 'Start VM Tracker Record') {
+      if (configVal1.title !== 'Start VM Tracker Record') {
         configVal1.setAttribute('disabled', '');
       }
     });
   }
 
-  initConfigList(): void {
-    this.configList = [
-      {
-        title: 'Start VM Tracker Record',
-        des: '',
-        hidden: false,
-        type: 'switch',
-        value: false,
-      },
-      {
-        title: 'Process',
-        des: 'Record process',
-        hidden: false,
-        type: 'select',
-        selectArray: [''],
-      },
-    ];
-  }
-
   initHtml(): string {
     return `
         <style>
@@ -255,8 +190,20 @@ export class SpVmTracker extends BaseElement {
         }
         </style>
         <div class="root vm-tracker">
-            <div class="configList">
+            <div class="vm-config-div">
+              <div>
+                 <span class="title">Start VM Tracker Record</span>
+                 <lit-switch></lit-switch>
+              </div>
             </div>
+            <div class="vm-config-div">
+              <div>
+                 <span class="title">Process</span>
+                 <span class="des">Record process</span>
+              </div>
+              <lit-allocation-select style="width: 100%;" rounded="" default-value="" 
+              class="select config" placement="bottom" title="Process"></lit-allocation-select>
+          </div>
         </div>
         `;
   }
diff --git a/ide/src/trace/component/trace/TimerShaftElement.ts b/ide/src/trace/component/trace/TimerShaftElement.ts
index 9262d845d122ad05a39e19e493512a6a1e5e0321..6891860ad573dffa548ac3fea6eef996a118eb1f 100644
--- a/ide/src/trace/component/trace/TimerShaftElement.ts
+++ b/ide/src/trace/component/trace/TimerShaftElement.ts
@@ -33,7 +33,7 @@ import { SpSystemTrace, CurrentSlicesTime } from '../SpSystemTrace.js';
 export function randomRgbColor() {
   const letters = '0123456789ABCDEF';
   let color = '#';
-  for (let i = 0; i < 6; i++) {
+  for (let index = 0; index < 6; index++) {
     color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts
index bb16738090457a9b360f8d01144c74983d185a58..2176757ff5bffbeffb29adc067e4f55f6ce1deee 100644
--- a/ide/src/trace/component/trace/base/TraceRow.ts
+++ b/ide/src/trace/component/trace/base/TraceRow.ts
@@ -893,10 +893,10 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
         it.rangeSelect = false;
       });
     }
-    let traceRowList: Array<TraceRow<any>> = [];
+    let rowList: Array<TraceRow<any>> = [];
     this.parentElement!.parentElement!.querySelectorAll<TraceRow<any>>("trace-row[check-type='2'][folder]").forEach(
       (it) => {
-        traceRowList.push(
+        rowList.push(
           ...it.childrenList.filter((it) => {
             return it.checkType === '2';
           })
@@ -905,7 +905,7 @@ export class TraceRow<T extends BaseStruct> extends HTMLElement {
     );
     this.selectChangeHandler?.([
       ...this.parentElement!.parentElement!.querySelectorAll<TraceRow<any>>("trace-row[check-type='2']"),
-      ...traceRowList,
+      ...rowList,
     ]);
   }
 
diff --git a/ide/src/trace/component/trace/base/TraceRowConfig.ts b/ide/src/trace/component/trace/base/TraceRowConfig.ts
index d88498f37160548571488989369932f4ff7a65c5..47c6d494c4fcb4dd983a97d8a9ea3fc199e3c2e5 100644
--- a/ide/src/trace/component/trace/base/TraceRowConfig.ts
+++ b/ide/src/trace/component/trace/base/TraceRowConfig.ts
@@ -181,6 +181,7 @@ export class TraceRowConfig extends BaseElement {
         if (this.selectTypeList!.length === 0) {
           traceRow.removeAttribute('row-hidden');
           traceRow.setAttribute('scene', '');
+          this.refreshChildRow(traceRow.childrenList, true);
         } else {
           for (let index = 0; index < traceRow.templateType!.length; index++) {
             let type = traceRow.templateType![index];
@@ -205,6 +206,32 @@ export class TraceRowConfig extends BaseElement {
           }
         }
       });
+      this.spSystemTrace?.collectRows.forEach(favoriteRow => {
+        let isShowRow: boolean = false;
+        if (favoriteRow.parentRowEl) {
+          favoriteRow.parentRowEl.expansion = false;
+        }
+        if (this.selectTypeList!.length === 0) {
+          favoriteRow.removeAttribute('row-hidden');
+          favoriteRow.setAttribute('scene', '');
+        } else {
+          for (let index = 0; index < favoriteRow.templateType!.length; index++) {
+            if (this.selectTypeList!.indexOf(favoriteRow.templateType![index]) >= 0) {
+              isShowRow = true;
+              break;
+            }
+          }
+          if (isShowRow) {
+            if (favoriteRow.templateType.length > 0) {
+              favoriteRow.removeAttribute('row-hidden');
+              favoriteRow.setAttribute('scene', '');
+            }
+          } else {
+            favoriteRow.removeAttribute('scene');
+            favoriteRow.setAttribute('row-hidden', '');
+          }
+        }
+      });
       this.refreshSystemPanel();
     }
   }
@@ -212,7 +239,6 @@ export class TraceRowConfig extends BaseElement {
   refreshChildRow(childRows: Array<TraceRow<BaseStruct>>, isShowScene: boolean = false): void{
     childRows.forEach(row => {
       if (isShowScene) {
-        row.removeAttribute('row-hidden');
         row.setAttribute('scene', '');
         if (row.childrenList && row.childrenList.length > 0) {
           this.refreshChildRow(row.childrenList, isShowScene);
diff --git a/ide/src/trace/component/trace/base/TraceRowObject.ts b/ide/src/trace/component/trace/base/TraceRowObject.ts
index 22cd59520af8c397d8cf5fb98d47c2e246e685e8..c2654ea535035990ccad49c7e6f62e5bfe3da1b9 100644
--- a/ide/src/trace/component/trace/base/TraceRowObject.ts
+++ b/ide/src/trace/component/trace/base/TraceRowObject.ts
@@ -33,31 +33,13 @@ export class TraceRowObject<T extends BaseStruct> {
   public color: string | undefined;
   public frame: Rect | undefined;
   public supplier: (() => Promise<Array<T>>) | undefined | null;
-  public onThreadHandler:
-    | ((
+  public onThreadHandler: | ((
         row: TraceRow<T>,
-        ctx:
-          | ImageBitmapRenderingContext
-          | CanvasRenderingContext2D
-          | WebGLRenderingContext
-          | WebGL2RenderingContext
-          | null
-          | undefined
-      ) => void)
-    | undefined
-    | null;
-  public onDrawHandler:
-    | ((
-        ctx:
-          | ImageBitmapRenderingContext
-          | CanvasRenderingContext2D
-          | WebGLRenderingContext
-          | WebGL2RenderingContext
-          | null
-          | undefined
-      ) => void)
-    | undefined
-    | null;
+        ctx: | ImageBitmapRenderingContext | CanvasRenderingContext2D | WebGLRenderingContext |
+          WebGL2RenderingContext | null | undefined ) => void) | undefined | null;
+  public onDrawHandler: | ((
+        ctx: | ImageBitmapRenderingContext | CanvasRenderingContext2D | WebGLRenderingContext |
+          WebGL2RenderingContext | null | undefined) => void) | undefined | null;
   public top: number = 0;
   public rowIndex: number = 0;
   public preObject: TraceRowObject<T> | undefined | null;
diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts
index 467ba9cc1a01c2baa8f9cbe6e08120af3704823d..615ff7d26f934103978bba97f82eeba15a044218 100644
--- a/ide/src/trace/component/trace/base/TraceSheet.ts
+++ b/ide/src/trace/component/trace/base/TraceSheet.ts
@@ -595,15 +595,9 @@ export class TraceSheet extends BaseElement {
       .reverse()
       .forEach((id) => {
         let element = tabConfig[id];
-        if (element.require) {
-          if (element.require(selection)) {
-            let pane = this.shadowRoot!.querySelector<LitTabpane>(`#${id as string}`);
-            pane!.hidden = false;
-          } else {
-            this.shadowRoot!.querySelector<LitTabpane>(`#${id as string}`)!.hidden = true;
-          }
-        } else {
-          this.shadowRoot!.querySelector<LitTabpane>(`#${id as string}`)!.hidden = true;
+        let pane = this.shadowRoot!.querySelector<LitTabpane>(`#${id as string}`);
+        if (pane) {
+          pane.hidden = !(element.require && element.require(selection));
         }
       });
     if (restore) {
diff --git a/ide/src/trace/component/trace/base/Utils.ts b/ide/src/trace/component/trace/base/Utils.ts
index 32f8ccbb52bc8724f2f1a7eea50f2ab8b0fa5aea..0eb1ce7c96f6303a41320fc43d6dca5005d8472a 100644
--- a/ide/src/trace/component/trace/base/Utils.ts
+++ b/ide/src/trace/component/trace/base/Utils.ts
@@ -133,28 +133,28 @@ export class Utils {
     return res;
   }
 
-  public static getProbablyTime(ns: number): string {
-    let currentNs = 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;
+  public static getProbablyTime(timeNs: number): string {
+    let currentNs = timeNs;
+    let probablyHour = 3600_000_000_000;
+    let probablyMinute1 = 60_000_000_000;
+    let probablySecond1 = 1_000_000_000;
+    let probablyMillisecond1 = 1_000_000;
+    let probablyMicrosecond1 = 1_000;
     let res = '';
-    if (currentNs >= hour1) {
-      res += (currentNs / hour1).toFixed(2) + 'h ';
-    } else if (currentNs >= minute1) {
-      res += (currentNs / minute1).toFixed(2) + 'm ';
-    } else if (currentNs >= second1) {
-      res += (currentNs / second1).toFixed(2) + 's ';
-    } else if (currentNs >= millisecond1) {
-      res += (currentNs / millisecond1).toFixed(2) + 'ms ';
-    } else if (currentNs >= microsecond1) {
-      res += (currentNs / microsecond1).toFixed(2) + 'μs ';
+    if (currentNs >= probablyHour) {
+      res += (currentNs / probablyHour).toFixed(2) + 'h ';
+    } else if (currentNs >= probablyMinute1) {
+      res += (currentNs / probablyMinute1).toFixed(2) + 'm ';
+    } else if (currentNs >= probablySecond1) {
+      res += (currentNs / probablySecond1).toFixed(2) + 's ';
+    } else if (currentNs >= probablyMillisecond1) {
+      res += (currentNs / probablyMillisecond1).toFixed(2) + 'ms ';
+    } else if (currentNs >= probablyMicrosecond1) {
+      res += (currentNs / probablyMicrosecond1).toFixed(2) + 'μs ';
     } else if (currentNs > 0) {
       res += currentNs + 'ns ';
     } else if (res == '') {
-      res = ns + '';
+      res = timeNs + '';
     }
     return res;
   }
@@ -241,27 +241,27 @@ export class Utils {
     let hour1 = 3600_000;
     let minute1 = 60_000;
     let second1 = 1_000; // 1 second
-    let res = '';
+    let result = '';
     if (currentNs >= hour1) {
-      res += Math.round(currentNs / hour1).toFixed(2) + 'h';
-      return res;
+      result += Math.round(currentNs / hour1).toFixed(2) + 'h';
+      return result;
     }
     if (currentNs >= minute1) {
-      res += Math.round(currentNs / minute1).toFixed(2) + 'min';
-      return res;
+      result += Math.round(currentNs / minute1).toFixed(2) + 'min';
+      return result;
     }
     if (currentNs >= second1) {
-      res += Math.round(currentNs / second1).toFixed(2) + 's';
-      return res;
+      result += Math.round(currentNs / second1).toFixed(2) + 's';
+      return result;
     }
     if (currentNs > 0) {
-      res += currentNs.toFixed(2) + 'ms';
-      return res;
+      result += currentNs.toFixed(2) + 'ms';
+      return result;
     }
-    if (res == '') {
-      res = '0s';
+    if (result == '') {
+      result = '0s';
     }
-    return res;
+    return result;
   }
 
   public static uuid(): string {
diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts
index 82a42797330a003bc0c6640292dc6e3aa6693418..6602a4e7ba815dfd084f8a45d2dadeeb0ccacf3f 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts
@@ -26,7 +26,7 @@ export class TabPaneCurrent extends BaseElement {
         document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicestime }));
       }
     });
-    this.shadowRoot?.querySelector('#text-input')?.addEventListener('keyup', (event: any) => {
+    this.shadowRoot?.querySelector('#text-input-current')?.addEventListener('keyup', (event: any) => {
       event.stopPropagation();
       if (event.keyCode == '13') {
         if (this.slicestime) {
@@ -42,13 +42,13 @@ export class TabPaneCurrent extends BaseElement {
         }
       }
     });
-    this.shadowRoot?.querySelector('#text-input')?.addEventListener('blur', (event: any) => {
+    this.shadowRoot?.querySelector('#text-input-current')?.addEventListener('blur', (event: any) => {
       (window as any).flagInputFocus = false;
       window.publish(window.SmartEvent.UI.KeyboardEnable, {
         enable: true,
       });
     });
-    this.shadowRoot?.querySelector('#text-input')?.addEventListener('focus', (event: any) => {
+    this.shadowRoot?.querySelector('#text-input-current')?.addEventListener('focus', (event: any) => {
       (window as any).flagInputFocus = true;
       window.publish(window.SmartEvent.UI.KeyboardEnable, {
         enable: false,
@@ -65,7 +65,7 @@ export class TabPaneCurrent extends BaseElement {
   setCurrentSlicesTime(slicestime: SlicesTime) {
     this.slicestime = slicestime;
     this.shadowRoot!.querySelector<HTMLInputElement>('#color-input')!.value = this.slicestime.color;
-    this.shadowRoot!.querySelector<HTMLInputElement>('#text-input')!.value = this.slicestime.text;
+    this.shadowRoot!.querySelector<HTMLInputElement>('#text-input-current')!.value = this.slicestime.text;
   }
 
   initHtml(): string {
@@ -79,10 +79,10 @@ export class TabPaneCurrent extends BaseElement {
         .notes-editor-panel{
         display: flex;align-items: center
         }
-        .slices-text{
+        .current-slices-text{
         font-size: 14px;color: var(--dark-color1,#363636c7);font-weight: 300;
         }
-        .slices-input{
+        .current-slices-input{
             border-radius: 4px;
             border: 1px solid var(--dark-border,#dcdcdc);
             color: var(--dark-color1,#212121);
@@ -90,7 +90,7 @@ export class TabPaneCurrent extends BaseElement {
             padding: 3px;
             margin: 0 10px;
         }
-        .slices-input:focus{
+        .current-slices-input:focus{
             outline: none;
             box-shadow: 1px 1px 1px var(--bark-prompt,#bebebe);
         }
@@ -109,9 +109,9 @@ export class TabPaneCurrent extends BaseElement {
             outline: inherit;
         </style>
         <div class="notes-editor-panel">
-            <div class="slices-text">Annotation at <span id="slices-time"></span></div>
-            <input style="flex: 1" class="slices-input" type="text" id="text-input"/>
-            <span class="slices-text">Change color: <input style="background: var(--dark-background5,#FFFFFF);" type="color" id="color-input"/></span>
+            <div class="current-slices-text">Annotation at <span id="slices-time"></span></div>
+            <input style="flex: 1" class="current-slices-input" type="text" id="text-input-current"/>
+            <span class="current-slices-text">Change color: <input style="background: var(--dark-background5,#FFFFFF);" type="color" id="color-input"/></span>
             <button id="remove">Remove</button>
         </div>
         `;
diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
index 1bc72c9db1fc7259dd83133244ba0d2b17d56128..6fe5e5fc68d5a37b05a057db797692b0a5b67d93 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
@@ -253,16 +253,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           } else {
             list.unshift({ name: 'Name', value: name });
           }
-          list.push({
-            name: 'StartTime',
-            value: getTimeString(data.startTs || 0),
-          });
-          list.push({
-            name: 'Duration',
-            value: getTimeString(data.dur || 0),
-          });
-          list.push({ name: 'depth', value: data.depth });
-          list.push({ name: 'arg_set_id', value: data.argsetid });
+          this.addTabPanelContent(list, data);
           this.currentSelectionTbl!.dataSource = list;
           let funcClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#function-jump');
           funcClick?.addEventListener('click', () => {
@@ -288,16 +279,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           if (binderSliceId === -1) {
             list.unshift({ name: 'Name', value: name });
           }
-          list.push({
-            name: 'StartTime',
-            value: getTimeString(data.startTs || 0),
-          });
-          list.push({
-            name: 'Duration',
-            value: getTimeString(data.dur || 0),
-          });
-          list.push({ name: 'depth', value: data.depth });
-          list.push({ name: 'arg_set_id', value: data.argsetid });
+          this.addTabPanelContent(list, data);
           this.currentSelectionTbl!.dataSource = list;
           let funcClick = this.currentSelectionTbl?.shadowRoot?.querySelector('#function-jump');
           funcClick?.addEventListener('click', () => {
@@ -317,16 +299,7 @@ export class TabPaneCurrentSelection extends BaseElement {
           argset.forEach((item) => {
             list.push({ name: item.keyName, value: item.strValue });
           });
-          list.push({
-            name: 'StartTime',
-            value: getTimeString(data.startTs || 0),
-          });
-          list.push({
-            name: 'Duration',
-            value: getTimeString(data.dur || 0),
-          });
-          list.push({ name: 'depth', value: data.depth });
-          list.push({ name: 'arg_set_id', value: data.argsetid });
+          this.addTabPanelContent(list, data);
           this.currentSelectionTbl!.dataSource = list;
         });
       }
@@ -346,22 +319,38 @@ export class TabPaneCurrentSelection extends BaseElement {
     }
   }
 
+  private addTabPanelContent(contentList: any[], data: FuncStruct): void{
+    contentList.push({
+      name: 'StartTime',
+      value: getTimeString(data.startTs || 0),
+    });
+    contentList.push({
+      name: 'Duration',
+      value: getTimeString(data.dur || 0),
+    });
+    contentList.push({ name: 'depth', value: data.depth });
+    contentList.push({ name: 'arg_set_id', value: data.argsetid });
+  }
+
   private tabCurrentSelectionInit(leftTitleStr: string): void {
     this.initCanvas();
     let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
+    this.setTitleAndButtonStyle();
+    if (leftTitle) {
+      leftTitle.innerText = leftTitleStr;
+    }
+  }
+
+  private setTitleAndButtonStyle(): void{
     let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
-                                                          ?.querySelector('#rightButton')
-                                                          ?.shadowRoot?.querySelector('#custom-button');
+    let rightButton: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightButton')?.
+      shadowRoot?.querySelector('#custom-button');
     let rightStar: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#right-star');
     if (rightTitle) {
       rightTitle.style.visibility = 'hidden';
       rightButton!.style.visibility = 'hidden';
       rightStar!.style.visibility = 'hidden';
     }
-    if (leftTitle) {
-      leftTitle.innerText = leftTitleStr;
-    }
   }
 
   setClockData(data: ClockStruct): void {
@@ -406,16 +395,7 @@ export class TabPaneCurrentSelection extends BaseElement {
   setIrqData(data: IrqStruct): void {
     this.setTableHeight('550px');
     this.initCanvas();
-    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
-                                                          ?.querySelector('#rightButton')
-                                                          ?.shadowRoot?.querySelector('#custom-button');
-    let rightStar: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#right-star');
-    if (rightTitle) {
-      rightTitle.style.visibility = 'hidden';
-      rightButton!.style.visibility = 'hidden';
-      rightStar!.style.visibility = 'hidden';
-    }
+    this.setTitleAndButtonStyle();
     let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
     if (leftTitle) {
       leftTitle.innerText = 'Counter Details';
@@ -448,16 +428,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     this.setTableHeight('550px');
     this.initCanvas();
     let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
-    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
-                                                          ?.querySelector('#rightButton')
-                                                          ?.shadowRoot?.querySelector('#custom-button');
-    let rightStar: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#right-star');
-    if (rightTitle) {
-      rightTitle.style.visibility = 'hidden';
-      rightButton!.style.visibility = 'hidden';
-      rightStar!.style.visibility = 'hidden';
-    }
+    this.setTitleAndButtonStyle();
     if (leftTitle) {
       leftTitle.innerText = 'Thread State';
     }
@@ -798,24 +769,23 @@ export class TabPaneCurrentSelection extends BaseElement {
   setStartupData(data: AppStartupStruct, scrollCallback: Function): void {
     this.setTableHeight('550px');
     this.initCanvas();
-    let rightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
-    let rightButton: HTMLElement | null | undefined = this?.shadowRoot
-                                                          ?.querySelector('#rightButton')
-                                                          ?.shadowRoot?.querySelector('#custom-button');
-    if (rightTitle) {
-      rightTitle.style.visibility = 'hidden';
+    let rightButton: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightButton')?.shadowRoot?.
+      querySelector('#custom-button');
+    let startUpRightTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightTitle');
+    if (startUpRightTitle) {
+      startUpRightTitle.style.visibility = 'hidden';
       rightButton!.style.visibility = 'hidden';
     }
-    let leftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
-    if (leftTitle) {
-      leftTitle.innerText = 'Details';
+    let startUpLeftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
+    if (startUpLeftTitle) {
+      startUpLeftTitle.innerText = 'Details';
     }
     let list: any[] = [];
     list.push({ name: 'Name', value: AppStartupStruct.getStartupName(data.startName) });
     list.push({
       name: 'StartTime(Relative)',
       value: `
-      <div style="white-space: nowrap;display: flex;align-items: center">
+      <div style="display: flex;white-space: nowrap;align-items: center">
 <div style="white-space:pre-wrap">${ getTimeString(data.startTs || 0) }</div>
 <lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="start-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
 </div>`,
@@ -901,7 +871,7 @@ export class TabPaneCurrentSelection extends BaseElement {
       name: 'StartTime(Relative)',
       value: `<div style="white-space: nowrap;display: flex;align-items: center">
 <div style="white-space:pre-wrap">${ getTimeString(data.startTs || 0) }</div>
-<lit-icon style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" id="start-jump" name="select" color="#7fa1e7" size="20"></lit-icon>
+<lit-icon id="start-jump" style="cursor:pointer;transform: scaleX(-1);margin-left: 5px" name="select" color="#7fa1e7" size="20"></lit-icon>
 </div>`,
     });
     list.push({
diff --git a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
index b2cdfb27fbe7611e1922323685909f6d5a611ba0..f5d38b3cf9bf3170b273804ce2b78abb1d9c7e21 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneFilter.ts
@@ -85,7 +85,7 @@ export class TabPaneFilter extends BaseElement {
   initElements(): void {
     this.cutList = [];
     this.libraryList = [];
-    this.filterInputEL = this.shadowRoot?.querySelector('#filter-input');
+    this.filterInputEL = this.shadowRoot?.querySelector('#pane-filter-input');
     this.markButtonEL = this.shadowRoot?.querySelector('#mark');
     this.iconEL = this.shadowRoot?.querySelector<LitIcon>('#icon');
     this.statisticsName = this.shadowRoot?.querySelector<HTMLDivElement>('.statistics-name');
@@ -626,18 +626,18 @@ export class TabPaneFilter extends BaseElement {
         .disabled{
         color: rgba(0,0,0,0.4);
         }
-        #filter-input{
+        #pane-filter-input{
         background: var(--dark-background4,#FFFFFF);
         border: 1px solid var(--dark-border,rgba(0,0,0,0.60));
         color: var(--dark-color2,#000000);
         border-radius: 8px;
         width: 200px;
         }
-        #filter-input:focus{
+        #pane-filter-input:focus{
             outline: none;
             box-shadow: 1px 1px 1px var(--dark-color,#bebebe);
         }
-        #filter-input::-webkit-input-placeholder {
+        #pane-filter-input::-webkit-input-placeholder {
                 color: var(--dark-color,#aab2bd);
             }
         .describe{
@@ -679,7 +679,7 @@ export class TabPaneFilter extends BaseElement {
         :host(:not([inputLeftText])) .left-text{
             display: none;
         }
-        :host(:not([input])) #filter-input{
+        :host(:not([input])) #pane-filter-input{
             display: none;
         }
         :host(:not([mark])) #mark{
@@ -798,7 +798,7 @@ export class TabPaneFilter extends BaseElement {
 </style>
     <lit-icon name="menu" class="spacing" id="icon" size="20"></lit-icon>
     <span class="describe left-text spacing">Input Filter</span>
-    <input id="filter-input" class="spacing" placeholder="${this.inputPlaceholder}"/>
+    <input id="pane-filter-input" class="spacing" placeholder="${this.inputPlaceholder}"/>
     <button id="mark" class="spacing">Mark Snapshot</button>
     <div id="load" style="display: flex">
     
diff --git a/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts b/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts
index f94a8ff32f88fa69ae824d9352c384bf2c22a36b..af6ab82d4d1c143755ef955fbb1a067e5aa1f8ce 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneJsMemoryFilter.ts
@@ -35,7 +35,7 @@ export class TabPaneJsMemoryFilter extends BaseElement {
             position: fixed;
             bottom: 0px;
         }
-        #filter-input{
+        #js-memory-filter-input{
             background: var(--dark-background4,#FFFFFF);
             border: 1px solid var(--dark-border,rgba(0,0,0,0.60));
             color: var(--dark-color2,#000000);
@@ -43,11 +43,11 @@ export class TabPaneJsMemoryFilter extends BaseElement {
             margin-left: 10px;
             width: 200px;
         }
-        #filter-input:focus{
+        #js-memory-filter-input:focus{
             outline: none;
             box-shadow: 1px 1px 1px var(--dark-color,#bebebe);
         }
-        #filter-input::-webkit-input-placeholder {
+        #js-memory-filter-input::-webkit-input-placeholder {
             color: var(--dark-color,#aab2bd);
         }
         .describe{
@@ -71,11 +71,11 @@ export class TabPaneJsMemoryFilter extends BaseElement {
         </style>
         <div class='filter-wrap'>
             <span class="describe left-text spacing">Class Filter</span>
-            <input id="filter-input" class="spacing" placeholder="Class filter" value=""/>
+            <input id="js-memory-filter-input" class="spacing" placeholder="Class filter" value=""/>
         </div>
         <div class='select-wrap'>
             <lit-select id='comparison-select' title='Select View'></lit-select>
         </div>
         `;
   }
-}
\ No newline at end of file
+}
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts
index 04a7a37ddae8e712e3d176e70596382fa4cffaed..472b61b9375494de18686a2ae774b2f5022850f1 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbility.ts
@@ -61,8 +61,8 @@ export class TabPaneDmaAbility extends BaseElement {
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
       list.forEach((item) => {
-        item.querySelectorAll('svg').forEach((svg) => {
-          svg.style.display = 'none';
+        item.querySelectorAll('svg').forEach((svgEl) => {
+          svgEl.style.display = 'none';
         });
       });
     }
@@ -75,26 +75,26 @@ export class TabPaneDmaAbility extends BaseElement {
       if (data.length !== null && data.length > 0) {
         this.total = new Dma();
         this.total.process = '*All*';
-        data.forEach((item) => {
-          if (item.processName !== null) {
-            item.process = `${item.processName}(${item.processId})`;
+        data.forEach((dmaItem) => {
+          if (dmaItem.processName !== null) {
+            dmaItem.process = `${dmaItem.processName}(${dmaItem.processId})`;
           } else {
-            item.process = `Process(${item.processId})`;
+            dmaItem.process = `Process(${dmaItem.processId})`;
           }
 
-          this.total.avgSize += item.avgSize;
+          this.total.avgSize += dmaItem.avgSize;
           if (this.total.minSize < 0) {
-            this.total.minSize = item.minSize;
+            this.total.minSize = dmaItem.minSize;
           }
           if (this.total.maxSize < 0) {
-            this.total.maxSize = item.maxSize;
+            this.total.maxSize = dmaItem.maxSize;
           }
-          this.total.minSize = Math.min(this.total.minSize, item.minSize);
-          this.total.maxSize = Math.max(this.total.maxSize, item.maxSize);
+          this.total.minSize = Math.min(this.total.minSize, dmaItem.minSize);
+          this.total.maxSize = Math.max(this.total.maxSize, dmaItem.maxSize);
 
-          item.avgSizes = Utils.getBinaryByteWithUnit(Math.round(item.avgSize));
-          item.minSizes = Utils.getBinaryByteWithUnit(item.minSize);
-          item.maxSizes = Utils.getBinaryByteWithUnit(item.maxSize);
+          dmaItem.avgSizes = Utils.getBinaryByteWithUnit(Math.round(dmaItem.avgSize));
+          dmaItem.minSizes = Utils.getBinaryByteWithUnit(dmaItem.minSize);
+          dmaItem.maxSizes = Utils.getBinaryByteWithUnit(dmaItem.maxSize);
         });
         this.total.avgSizes = Utils.getBinaryByteWithUnit(Math.round(this.total.avgSize / data.length));
         this.total.minSizes = Utils.getBinaryByteWithUnit(this.total.minSize);
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.ts
index 3b1c1b3b3a9d39fd31d0fe78dbe066952a3e83f8..0fba69b1331c97b7c37758060b8670675b94a4a2 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.ts
@@ -34,8 +34,8 @@ export class TabPaneDmaAbilityComparison extends BaseElement {
   private comparisonSource: Array<DmaComparison> = [];
 
   initElements(): void {
-    this.damClickTable = this.shadowRoot?.querySelector<LitTable>('#damClickTable');
     this.comparisonSelect = this.shadowRoot?.querySelector('#filter') as TabPaneJsMemoryFilter;
+    this.damClickTable = this.shadowRoot?.querySelector<LitTable>('#damClickTable');
     this.selectEl = this.comparisonSelect?.shadowRoot?.querySelector<LitSelect>('lit-select');
     this.damClickTable!.addEventListener('column-click', (e) => {
       // @ts-ignore
@@ -79,22 +79,22 @@ export class TabPaneDmaAbilityComparison extends BaseElement {
     this.getComparisonData(dataArray[0].startNs);
   }
 
-  selectStamps(dataList: Array<SnapshotStruct>): void {
+  selectStamps(dmaAbilityComList: Array<SnapshotStruct>): void {
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
     let option = new LitSelectOption();
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (dataList[0].name) {
-      option.setAttribute('value', dataList[0].name);
+    if (dmaAbilityComList[0].name) {
+      option.setAttribute('value', dmaAbilityComList[0].name);
     }
-    this.selectEl!.defaultValue = dataList[0].name || '';
-    this.selectEl!.placeholder = dataList[0].name || '';
-    this.selectEl!.dataSource = dataList;
+    this.selectEl!.defaultValue = dmaAbilityComList[0].name || '';
+    this.selectEl!.placeholder = dmaAbilityComList[0].name || '';
+    this.selectEl!.dataSource = dmaAbilityComList;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((option) => {
       option.addEventListener('onSelected', (e) => {
-        for (let f of dataList) {
+        for (let f of dmaAbilityComList) {
           if (input.value === f.name) {
             this.getComparisonData(f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts
index 5e6138cb8ffa98a765eb6b57461a57db0a3e4965..acb90faf7bae6876d857aed19cb8f5a61baf96fb 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.ts
@@ -40,9 +40,9 @@ export class TabPaneDmaSelectAbility extends BaseElement {
   connectedCallback(): void {
     super.connectedCallback();
     new ResizeObserver(() => {
-      if (this.parentElement?.clientHeight != 0) {
+      if (this.parentElement?.clientHeight !== 0) {
         // @ts-ignore
-        this.damClickTable?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 18 + 'px';
+        this.damClickTable?.shadowRoot?.querySelector('.table').style.height = (this.parentElement?.clientHeight - 18) + 'px';
         this.parentElement!.style.overflow = 'hidden';
         this.damClickTable?.reMeauseHeight();
       }
@@ -51,10 +51,10 @@ export class TabPaneDmaSelectAbility extends BaseElement {
 
   private init(): void {
     const thTable = this.tableThead!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const dmaSelectTblNodes = thTable!.querySelectorAll('div');
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
-      list.forEach((item) => {
+      dmaSelectTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
@@ -77,10 +77,10 @@ export class TabPaneDmaSelectAbility extends BaseElement {
           }
           item.sizes = Utils.getBinaryByteWithUnit(item.size);
           item.timeStamp = ns2s(item.startNs);
-          this.damClickTable!.getItemTextColor = (item: Dma): any => {
-            if (item.flag === 1) {
+          this.damClickTable!.getItemTextColor = (dmaItem: Dma): any => {
+            if (dmaItem.flag === 1) {
               return '#d4b550';
-            } else if (item.flag === 2) {
+            } else if (dmaItem.flag === 2) {
               return '#f86b6b';
             } else {
               return '#000000';
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.ts
index 1e1d70a3e1a07c937bf5de53df8e24079a82e296..aace2158d2247cf9bf29098b693da05b6218221a 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.ts
@@ -61,10 +61,10 @@ export class TabPaneGpuMemoryAbility extends BaseElement {
 
   private init(): void {
     const thTable = this.tableThead!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const gpuMemoryTblNodes = thTable!.querySelectorAll('div');
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
-      list.forEach((item) => {
+      gpuMemoryTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
@@ -80,26 +80,26 @@ export class TabPaneGpuMemoryAbility extends BaseElement {
           this.total = new GpuMemory();
           this.total.process = '*All*';
           this.total.gpuName = '*All*';
-          data.forEach((item) => {
-            if (item.processName !== null) {
-              item.process = `${item.processName}(${item.processId})`;
+          data.forEach((gpuMemoryItem) => {
+            if (gpuMemoryItem.processName !== null) {
+              gpuMemoryItem.process = `${gpuMemoryItem.processName}(${gpuMemoryItem.processId})`;
             } else {
-              item.process = `Process(${item.processId})`;
+              gpuMemoryItem.process = `Process(${gpuMemoryItem.processId})`;
             }
 
-            this.total.avgSize += item.avgSize;
+            this.total.avgSize += gpuMemoryItem.avgSize;
             if (this.total.minSize < 0) {
-              this.total.minSize = item.minSize;
+              this.total.minSize = gpuMemoryItem.minSize;
             }
             if (this.total.maxSize < 0) {
-              this.total.maxSize = item.maxSize;
+              this.total.maxSize = gpuMemoryItem.maxSize;
             }
-            this.total.minSize = Math.min(this.total.minSize, item.minSize);
-            this.total.maxSize = Math.max(this.total.maxSize, item.maxSize);
-            item.gpuName = SpSystemTrace.DATA_DICT.get(item.gpuNameId) || '';
-            item.avgSizes = Utils.getBinaryByteWithUnit(Math.round(item.avgSize));
-            item.minSizes = Utils.getBinaryByteWithUnit(item.minSize);
-            item.maxSizes = Utils.getBinaryByteWithUnit(item.maxSize);
+            this.total.minSize = Math.min(this.total.minSize, gpuMemoryItem.minSize);
+            this.total.maxSize = Math.max(this.total.maxSize, gpuMemoryItem.maxSize);
+            gpuMemoryItem.gpuName = SpSystemTrace.DATA_DICT.get(gpuMemoryItem.gpuNameId) || '';
+            gpuMemoryItem.avgSizes = Utils.getBinaryByteWithUnit(Math.round(gpuMemoryItem.avgSize));
+            gpuMemoryItem.minSizes = Utils.getBinaryByteWithUnit(gpuMemoryItem.minSize);
+            gpuMemoryItem.maxSizes = Utils.getBinaryByteWithUnit(gpuMemoryItem.maxSize);
           });
           this.total.avgSizes = Utils.getBinaryByteWithUnit(Math.round(this.total.avgSize / data.length));
           this.total.minSizes = Utils.getBinaryByteWithUnit(this.total.minSize);
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts
index 4cdb471a9c690d2e462cd6dcea4b81a1ce6d25d8..bc64887227ce78cf1c6506d9828067738d4a1740 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.ts
@@ -81,23 +81,23 @@ export class TabPaneGpuMemoryComparison extends BaseElement {
     this.getComparisonData(dataArray[0].startNs);
   }
 
-  selectStamps(dataList: Array<SnapshotStruct>): void {
+  selectStamps(gpuMemoryComList: Array<SnapshotStruct>): void {
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
     let option = new LitSelectOption();
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (dataList[0].name) {
-      option.setAttribute('value', dataList[0].name);
+    if (gpuMemoryComList[0].name) {
+      option.setAttribute('value', gpuMemoryComList[0].name);
     }
-    option.setAttribute('value', dataList[0].name);
-    this.selectEl!.defaultValue = dataList[0].name || '';
-    this.selectEl!.placeholder = dataList[0].name || '';
-    this.selectEl!.dataSource = dataList;
+    option.setAttribute('value', gpuMemoryComList[0].name);
+    this.selectEl!.defaultValue = gpuMemoryComList[0].name || '';
+    this.selectEl!.placeholder = gpuMemoryComList[0].name || '';
+    this.selectEl!.dataSource = gpuMemoryComList;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((option) => {
       option.addEventListener('onSelected', async (e) => {
-        for (let f of dataList) {
+        for (let f of gpuMemoryComList) {
           if (input.value === f.name) {
             this.getComparisonData(f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts
index b4105318cc9f79c605c1ad5e87e62731fd98d4b3..84283bbc12f6e5689d545add122ed0961995534b 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPaneGpuMemorySelectAbility.ts
@@ -44,9 +44,10 @@ export class TabPaneGpuMemorySelectAbility extends BaseElement {
   connectedCallback(): void {
     super.connectedCallback();
     new ResizeObserver(() => {
-      if (this.parentElement?.clientHeight != 0) {
+      if (this.parentElement?.clientHeight !== 0) {
+        let gpuMemoryTbl = this.gpuMemoryClickTable?.shadowRoot?.querySelector('.table');
         // @ts-ignore
-        this.gpuMemoryClickTable?.shadowRoot?.querySelector('.table').style.height = this.parentElement.clientHeight - 18 + 'px';
+        gpuMemoryTbl.style.height = this.parentElement.clientHeight - 18 + 'px';
         this.parentElement!.style.overflow = 'hidden';
         this.gpuMemoryClickTable?.reMeauseHeight();
       }
@@ -55,10 +56,10 @@ export class TabPaneGpuMemorySelectAbility extends BaseElement {
 
   private init(): void {
     const thTable = this.tableThead!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const gpuMemorySelectTblNode = thTable!.querySelectorAll('div');
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
-      list.forEach((item) => {
+      gpuMemorySelectTblNode.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts
index 5e9a217d8a06c80a31b541f6644d7101f24f25e8..8276aea0165df31423faeb72d2411b0a2c1ee325 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPin.ts
@@ -48,12 +48,12 @@ export class TabPanePurgPin extends BaseElement {
         selection.rightNs,
         (MemoryConfig.getInstance().interval * 1000_000) / 5,
         true
-      ).then((results) => {
+      ).then((purgePinResults) => {
         this.purgeablePinTable!.loading = false;
-        if (results.length > 0) {
-          for (let i = 0; i < results.length; i++) {
+        if (purgePinResults.length > 0) {
+          for (let i = 0; i < purgePinResults.length; i++) {
             this.purgeablePinSource.push(
-              this.toTabStruct(results[i].name, results[i].maxSize, results[i].minSize, results[i].avgSize)
+              this.toTabStruct(purgePinResults[i].name, purgePinResults[i].maxSize, purgePinResults[i].minSize, purgePinResults[i].avgSize)
             );
           }
           this.sortByColumn({ key: this.sortKey, sort: this.sortType });
@@ -97,10 +97,10 @@ export class TabPanePurgPin extends BaseElement {
 
   private init() {
     const thTable = this.tabTitle!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const purgePinTblNodes = thTable!.querySelectorAll('div');
     if (this.tabTitle!.hasAttribute('sort')) {
       this.tabTitle!.removeAttribute('sort');
-      list.forEach((item) => {
+      purgePinTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
@@ -110,15 +110,16 @@ export class TabPanePurgPin extends BaseElement {
     this.sortType = 2;
   }
 
-  private toTabStruct(type: string, maxSize: number, minSize: number, avgSize: number): PurgeableTabStruct {
+  private toTabStruct(type: string, maxPurgePinSize: number, minPurgePinSize: number, avgPurgePinSize: number
+  ): PurgeableTabStruct {
     const tabStruct = new PurgeableTabStruct(
       type,
-      maxSize,
-      minSize,
-      avgSize,
-      Utils.getBinaryByteWithUnit(avgSize),
-      Utils.getBinaryByteWithUnit(maxSize),
-      Utils.getBinaryByteWithUnit(minSize)
+      maxPurgePinSize,
+      minPurgePinSize,
+      avgPurgePinSize,
+      Utils.getBinaryByteWithUnit(avgPurgePinSize),
+      Utils.getBinaryByteWithUnit(maxPurgePinSize),
+      Utils.getBinaryByteWithUnit(minPurgePinSize)
     );
     return tabStruct;
   }
@@ -140,7 +141,7 @@ export class TabPanePurgPin extends BaseElement {
   private sortByColumn(detail: any): void {
     // @ts-ignore
     function compare(key, sort, type) {
-      return function (a: any, b: any) {
+      return function (purgePinLeftData: any, purgePinRightData: any) {
         // 不管哪一列的排序方式是0（默认排序），都按照avgSize列从大到小排序
         if (sort === 0) {
           sort = 2;
@@ -149,12 +150,12 @@ export class TabPanePurgPin extends BaseElement {
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[key]) - parseFloat(a[key]) : parseFloat(a[key]) - parseFloat(b[key]);
+          return sort === 2 ? parseFloat(purgePinRightData[key]) - parseFloat(purgePinLeftData[key]) : parseFloat(purgePinLeftData[key]) - parseFloat(purgePinRightData[key]);
         } else {
           if (sort === 2) {
-            return b[key].toString().localeCompare(a[key].toString());
+            return purgePinRightData[key].toString().localeCompare(purgePinLeftData[key].toString());
           } else {
-            return a[key].toString().localeCompare(b[key].toString());
+            return purgePinLeftData[key].toString().localeCompare(purgePinRightData[key].toString());
           }
         }
       };
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.ts
index fe1dfd6879812794647ff76bdb9d0d62b6602f2b..6352b1d9b67d8da387375d3649a696fd579c1da9 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.ts
@@ -14,8 +14,8 @@
  */
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitSelect } from '../../../../../base-ui/select/LitSelect.js';
-import { LitSelectOption } from '../../../../../base-ui/select/LitSelectOption.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
+import { LitSelectOption } from '../../../../../base-ui/select/LitSelectOption.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { querySysPurgeableSelectionTab } from '../../../../database/SqlLite.js';
 import { Utils } from '../../base/Utils.js';
@@ -33,7 +33,7 @@ export class TabPanePurgPinComparisonAbility extends BaseElement {
     this.filterEl = this.shadowRoot!.querySelector<TabPaneJsMemoryFilter>('#filter');
     this.selectEl = this.filterEl?.shadowRoot?.querySelector<LitSelect>('lit-select');
   }
-  public totalData(data: SelectionParam | any, dataList: any): void {
+  public totalData(purgePinComParam: SelectionParam | any, dataList: any): void {
     //@ts-ignore
     this.purgeablePinTable?.shadowRoot?.querySelector('.table')?.style?.height = `${
       this.parentElement!.clientHeight - 45
@@ -41,15 +41,15 @@ export class TabPanePurgPinComparisonAbility extends BaseElement {
     this.purgeablePinSource = [];
     let fileArr: any[] = [];
     for (let file of dataList) {
-      if (file.startNs !== data.startNs) {
+      if (file.startNs !== purgePinComParam.startNs) {
         fileArr.push(file);
       }
     }
     fileArr = fileArr.sort();
-    this.initSelect(data.startNs, fileArr);
-    this.updateComparisonData(data.startNs, fileArr[0].startNs);
+    this.initSelect(purgePinComParam.startNs, fileArr);
+    this.updateComparisonData(purgePinComParam.startNs, fileArr[0].startNs);
   }
-  private initSelect(fileStartNs: number, fileArr: Array<any>): void {
+  private initSelect(fileStartNs: number, purgePinComFileArr: Array<any>): void {
     let that = this;
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
@@ -57,15 +57,15 @@ export class TabPanePurgPinComparisonAbility extends BaseElement {
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (fileArr[0].name) {
-      option.setAttribute('value', fileArr[0].name);
+    if (purgePinComFileArr[0].name) {
+      option.setAttribute('value', purgePinComFileArr[0].name);
     }
-    this.selectEl!.defaultValue = fileArr[0].name;
-    this.selectEl!.placeholder = fileArr[0].name;
-    this.selectEl!.dataSource = fileArr;
+    this.selectEl!.defaultValue = purgePinComFileArr[0].name;
+    this.selectEl!.placeholder = purgePinComFileArr[0].name;
+    this.selectEl!.dataSource = purgePinComFileArr;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e: any) => {
-        for (let f of fileArr) {
+        for (let f of purgePinComFileArr) {
           if (input.value === f.name) {
             that.updateComparisonData(fileStartNs, f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts
index 642426e701ba946411c4cbf8d938bc303ed5a152..909d81e7a0405bd6fe7563fee1957002439c253f 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgPinSelection.ts
@@ -15,8 +15,8 @@
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { MemoryConfig } from '../../../../bean/MemoryConfig.js';
+import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { queryProcessPurgeableSelectionTab, querySysPurgeableSelectionTab } from '../../../../database/SqlLite.js';
 import { ns2s } from '../../../../database/ui-worker/ProcedureWorkerCommon.js';
 import { Utils } from '../../base/Utils.js';
@@ -35,12 +35,12 @@ export class TabPanePurgPinSelection extends BaseElement {
 
   async queryTableData(type: string, startNs: number) {
     if (type === 'ability') {
-      await querySysPurgeableSelectionTab(startNs, true).then((results) => {
+      await querySysPurgeableSelectionTab(startNs, true).then((purgePinSelectResults) => {
         this.purgeableSelectionSource = [];
         this.purgeableSelectionSource.push({ name: 'TimeStamp', value: ns2s(startNs) });
-        for (let i = 0; i < results.length; i++) {
-          results[i].value = Utils.getBinaryByteWithUnit(results[i].value);
-          this.purgeableSelectionSource.push(results[i]);
+        for (let i = 0; i < purgePinSelectResults.length; i++) {
+          purgePinSelectResults[i].value = Utils.getBinaryByteWithUnit(purgePinSelectResults[i].value);
+          this.purgeableSelectionSource.push(purgePinSelectResults[i]);
           this.purgeableSelectionTable!.recycleDataSource = this.purgeableSelectionSource;
         }
       });
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts
index e7a33471686928214ba22a1eb7267529221fb6d9..efe001c676f02fe715679b0c13ef7b4c52f3e222 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotal.ts
@@ -46,12 +46,12 @@ export class TabPanePurgTotal extends BaseElement {
         selection.leftNs,
         selection.rightNs,
         (MemoryConfig.getInstance().interval * 1000000) / 5
-      ).then((results) => {
+      ).then((purgeTotalResults) => {
         this.purgeableTotalTable!.loading = false;
-        if (results.length > 0) {
-          for (let i = 0; i < results.length; i++) {
+        if (purgeTotalResults.length > 0) {
+          for (let i = 0; i < purgeTotalResults.length; i++) {
             this.purgeableTotalSource.push(
-              this.toTabStruct(results[i].name, results[i].maxSize, results[i].minSize, results[i].avgSize)
+              this.toTabStruct(purgeTotalResults[i].name, purgeTotalResults[i].maxSize, purgeTotalResults[i].minSize, purgeTotalResults[i].avgSize)
             );
           }
           this.sortByColumn({ key: this.sortKey, sort: this.sortType });
@@ -94,10 +94,10 @@ export class TabPanePurgTotal extends BaseElement {
 
   private init() {
     const thTable = this.tabTitle!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const purgeTotalTblNode = thTable!.querySelectorAll('div');
     if (this.tabTitle!.hasAttribute('sort')) {
       this.tabTitle!.removeAttribute('sort');
-      list.forEach((item) => {
+      purgeTotalTblNode.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
@@ -137,7 +137,7 @@ export class TabPanePurgTotal extends BaseElement {
   private sortByColumn(detail: any): void {
     // @ts-ignore
     function compare(key, sort, type) {
-      return function (a: any, b: any) {
+      return function (purgeTotalLeftData: any, purgeTotalRightData: any) {
         // 不管哪一列的排序方式是0（默认排序），都按照avgSize列从大到小排序
         if (sort === 0) {
           sort = 2;
@@ -146,12 +146,12 @@ export class TabPanePurgTotal extends BaseElement {
         }
         if (type === 'number') {
           // @ts-ignore
-          return sort === 2 ? parseFloat(b[key]) - parseFloat(a[key]) : parseFloat(a[key]) - parseFloat(b[key]);
+          return sort === 2 ? parseFloat(purgeTotalRightData[key]) - parseFloat(purgeTotalLeftData[key]) : parseFloat(purgeTotalLeftData[key]) - parseFloat(purgeTotalRightData[key]);
         } else {
           if (sort === 2) {
-            return b[key].toString().localeCompare(a[key].toString());
+            return purgeTotalRightData[key].toString().localeCompare(purgeTotalLeftData[key].toString());
           } else {
-            return a[key].toString().localeCompare(b[key].toString());
+            return purgeTotalLeftData[key].toString().localeCompare(purgeTotalRightData[key].toString());
           }
         }
       };
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.ts
index 9e7ee6d466ce4526cba4761d1912e5a38ec6b41b..6f3deb49ba68ab2b0c2b5baa77bd114abf1b438f 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.ts
@@ -33,7 +33,7 @@ export class TabPanePurgTotalComparisonAbility extends BaseElement {
     this.filterEl = this.shadowRoot!.querySelector<TabPaneJsMemoryFilter>('#filter');
     this.selectEl = this.filterEl?.shadowRoot?.querySelector<LitSelect>('lit-select');
   }
-  public totalData(data: SelectionParam | any, dataList: any): void {
+  public totalData(purgeTotalComParam: SelectionParam | any, dataList: any): void {
     //@ts-ignore
     this.purgeableTotalTable?.shadowRoot?.querySelector('.table')?.style?.height = `${
       this.parentElement!.clientHeight - 45
@@ -41,15 +41,15 @@ export class TabPanePurgTotalComparisonAbility extends BaseElement {
     this.purgeableTotalSource = [];
     let fileArr: any[] = [];
     for (let file of dataList) {
-      if (file.startNs !== data.startNs) {
+      if (file.startNs !== purgeTotalComParam.startNs) {
         fileArr.push(file);
       }
     }
     fileArr = fileArr.sort();
-    this.initSelect(data.startNs, fileArr);
-    this.updateComparisonData(data.startNs, fileArr[0].startNs);
+    this.initSelect(purgeTotalComParam.startNs, fileArr);
+    this.updateComparisonData(purgeTotalComParam.startNs, fileArr[0].startNs);
   }
-  private initSelect(fileStartNs: number, fileArr: Array<any>): void {
+  private initSelect(fileStartNs: number, purgeTotalComFileArr: Array<any>): void {
     let that = this;
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
@@ -57,13 +57,13 @@ export class TabPanePurgTotalComparisonAbility extends BaseElement {
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (fileArr[0].name) option.setAttribute('value', fileArr[0].name);
-    this.selectEl!.defaultValue = fileArr[0].name;
-    this.selectEl!.placeholder = fileArr[0].name;
-    this.selectEl!.dataSource = fileArr;
+    if (purgeTotalComFileArr[0].name) option.setAttribute('value', purgeTotalComFileArr[0].name);
+    this.selectEl!.defaultValue = purgeTotalComFileArr[0].name;
+    this.selectEl!.placeholder = purgeTotalComFileArr[0].name;
+    this.selectEl!.dataSource = purgeTotalComFileArr;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e: any) => {
-        for (let f of fileArr) {
+        for (let f of purgeTotalComFileArr) {
           if (input.value === f.name) {
             that.updateComparisonData(fileStartNs, f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts
index 967adcaa317b818da6c5a78a58782b6ff51a879d..80ac52df9855affbfca782196b1eb005715081d9 100644
--- a/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts
+++ b/ide/src/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.ts
@@ -35,13 +35,13 @@ export class TabPanePurgTotalSelection extends BaseElement {
 
   async queryTableData(type: string, startNs: number) {
     if (type === 'ability') {
-      await querySysPurgeableSelectionTab(startNs).then((results) => {
+      await querySysPurgeableSelectionTab(startNs).then((purgeTotalSelectResults) => {
         this.purgeableSelectionSource = [];
-        if (results.length > 0) {
+        if (purgeTotalSelectResults.length > 0) {
           this.purgeableSelectionSource.push({ name: 'TimeStamp', value: ns2s(startNs) });
-          for (let i = 0; i < results.length; i++) {
-            results[i].value = Utils.getBinaryByteWithUnit(results[i].value);
-            this.purgeableSelectionSource.push(results[i]);
+          for (let i = 0; i < purgeTotalSelectResults.length; i++) {
+            purgeTotalSelectResults[i].value = Utils.getBinaryByteWithUnit(purgeTotalSelectResults[i].value);
+            this.purgeableSelectionSource.push(purgeTotalSelectResults[i]);
           }
           this.purgeableSelectionTable!.recycleDataSource = this.purgeableSelectionSource;
         }
diff --git a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneComparison.ts b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneComparison.ts
index e13bd0ef4a6d230377c765195528a296b2a8ec15..64c5a9668e4933779bc0b222f55954fdf96a0e40 100644
--- a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneComparison.ts
+++ b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneComparison.ts
@@ -50,7 +50,7 @@ export class TabPaneComparison extends BaseElement {
     this.retainerTableEl = this.shadowRoot!.querySelector<LitTable>('#tb-retainer') as LitTable;
     this.filterEl = this.shadowRoot!.querySelector<TabPaneJsMemoryFilter>('#filter');
     this.selectEl = this.filterEl?.shadowRoot?.querySelector<LitSelect>('lit-select');
-    this.search = this.filterEl?.shadowRoot?.querySelector('#filter-input') as HTMLInputElement;
+    this.search = this.filterEl?.shadowRoot?.querySelector('#js-memory-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;
@@ -128,8 +128,8 @@ export class TabPaneComparison extends BaseElement {
             let i = 0;
             let that = this;
             let retainsTable = () => {
-              const getList = (list: Array<ConstructorItem>) => {
-                list.forEach((row) => {
+              const getList = (comList: Array<ConstructorItem>) => {
+                comList.forEach((row) => {
                   let shallow = Math.round((row.shallowSize / this.fileSize) * 100) + '%';
                   let retained = Math.round((row.retainedSize / this.fileSize) * 100) + '%';
                   row.shallowPercent = shallow;
@@ -142,9 +142,9 @@ export class TabPaneComparison extends BaseElement {
                   }
                   i++;
                   // @ts-ignore
-                  if (i < that.retainsData[0].distance - 1 && list[0].distance != '-') {
-                    list[0].getChildren();
-                    list[0].expanded = false;
+                  if (i < that.retainsData[0].distance - 1 && comList[0].distance != '-') {
+                    comList[0].getChildren();
+                    comList[0].expanded = false;
                     if (row.hasNext) {
                       getList(row.children);
                     }
@@ -297,7 +297,7 @@ export class TabPaneComparison extends BaseElement {
     this.comparisonTableEl!.reMeauseHeight();
   }
 
-  initSelect(fileId: number, fileArr: Array<HeapSnapshotStruct>) {
+  initSelect(fileId: number, comFileArr: Array<HeapSnapshotStruct>) {
     let that = this;
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
@@ -305,17 +305,17 @@ export class TabPaneComparison extends BaseElement {
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (fileArr[0].name) {
-      option.setAttribute('value', fileArr[0].name);
+    if (comFileArr[0].name) {
+      option.setAttribute('value', comFileArr[0].name);
     }
-    this.selectEl!.defaultValue = fileArr[0].name || '';
-    this.selectEl!.placeholder = fileArr[0].name || '';
-    this.selectEl!.dataSource = fileArr;
+    this.selectEl!.defaultValue = comFileArr[0].name || '';
+    this.selectEl!.placeholder = comFileArr[0].name || '';
+    this.selectEl!.dataSource = comFileArr;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e) => {
         this.comparisonTable!.scrollTop = 0;
         this.retainerTableEl!.snapshotDataSource = [];
-        for (let f of fileArr) {
+        for (let f of comFileArr) {
           if (input.value == f.name) {
             that.updateComparisonData(fileId, f.id);
           }
@@ -542,16 +542,6 @@ export class TabPaneComparison extends BaseElement {
             padding: 10px 10px 0 10px;
             height: calc(100% - 10px - 31px);
         }
-        tab-pane-filter {
-            border: solid rgb(216,216,216) 1px;
-            float: left;
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-        }
-        selector{
-            display: none;
-        }
         .show{
             display: flex;
             flex: 1;
@@ -563,6 +553,16 @@ export class TabPaneComparison extends BaseElement {
             left: 0;
             right: 0;
         }
+        selector{
+            display: none;
+        }
+        tab-pane-filter {
+            border: solid rgb(216,216,216) 1px;
+            float: left;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+        }
         .loading{
             bottom: 0;
             position: absolute;
diff --git a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts
index 3e89ab99d4779f14643c07c83ec04375099d6c21..7fb7177fb3d8f919242343dffeadc6226118cf7a 100644
--- a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneJsCpuStatistics.ts
@@ -49,10 +49,10 @@ export class TabPaneJsCpuStatistics extends BaseElement {
 
   private init() {
     const thTable = this.tabTitle!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const jsCpuStatTblNodes = thTable!.querySelectorAll('div');
     if (this.tabTitle!.hasAttribute('sort')) {
       this.tabTitle!.removeAttribute('sort');
-      list.forEach((item) => {
+      jsCpuStatTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts
index 4ae657e747411c2f4910ca9a12f736a62e7dcef0..86c120e45c4d1efc38a5d3cbe38e17fc9c64fc3d 100644
--- a/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts
+++ b/ide/src/trace/component/trace/sheet/ark-ts/TabPaneSummary.ts
@@ -13,19 +13,19 @@
  * limitations under the License.
  */
 
-import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
-import { LitTable } from '../../../../../base-ui/table/lit-table.js';
+import {BaseElement, element} from '../../../../../base-ui/BaseElement.js';
+import {LitTable} from '../../../../../base-ui/table/lit-table.js';
 import '../../../../../base-ui/table/lit-table.js';
-import { ConstructorItem, FileInfo } from '../../../../../js-heap/model/UiStruct.js';
-import { HeapDataInterface } from '../../../../../js-heap/HeapDataInterface.js';
+import {ConstructorItem, FileInfo} from '../../../../../js-heap/model/UiStruct.js';
+import {HeapDataInterface} from '../../../../../js-heap/HeapDataInterface.js';
 import '../../../../../base-ui/table/lit-table-column.js';
-import { TabPaneJsMemoryFilter } from '../TabPaneJsMemoryFilter.js';
+import {TabPaneJsMemoryFilter} from '../TabPaneJsMemoryFilter.js';
 import '../TabPaneJsMemoryFilter.js';
-import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
+import {LitProgressBar} from '../../../../../base-ui/progress-bar/LitProgressBar.js';
 import '../../../../../base-ui/progress-bar/LitProgressBar.js';
 import '../../../../../base-ui/slicer/lit-slicer.js';
-import { HeapSnapshotStruct } from '../../../../database/ui-worker/ProcedureWorkerHeapSnapshot.js';
-import { HeapTraceFunctionInfo } from '../../../../../js-heap/model/DatabaseStruct.js';
+import {HeapSnapshotStruct} from '../../../../database/ui-worker/ProcedureWorkerHeapSnapshot.js';
+import {HeapTraceFunctionInfo} from '../../../../../js-heap/model/DatabaseStruct.js';
 
 @element('tabpane-summary')
 export class TabPaneSummary extends BaseElement {
@@ -54,20 +54,20 @@ export class TabPaneSummary extends BaseElement {
   private leftTable: HTMLDivElement | null | undefined;
 
   initElements(): void {
-    this.tblSummary = this.shadowRoot?.querySelector<LitTable>('#left');
-    this.tbs = this.shadowRoot?.querySelector<LitTable>('#right');
+    this.tblSummary = this.shadowRoot?.querySelector<LitTable>('#summary_left');
+    this.tbs = this.shadowRoot?.querySelector<LitTable>('#summary_right');
     this.stackTable = this.shadowRoot?.querySelector<LitTable>('#stackTable');
     this.stackText = this.shadowRoot?.querySelector('.stackText') as HTMLElement;
     this.tabFilter = this.shadowRoot?.querySelector('#filter') as TabPaneJsMemoryFilter;
-    this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
-    this.search = this.tabFilter?.shadowRoot?.querySelector('#filter-input') as HTMLInputElement;
+    this.progressEL = this.shadowRoot?.querySelector('.summary_progress') as LitProgressBar;
+    this.search = this.tabFilter?.shadowRoot?.querySelector('#js-memory-filter-input') as HTMLInputElement;
     this.stack = this.shadowRoot?.querySelector('#stack') as HTMLLIElement;
     this.retainers = this.shadowRoot?.querySelector('#retainers') as HTMLLIElement;
     this.tblTable = this.tblSummary!.shadowRoot?.querySelector('.table') as HTMLDivElement;
     this.rightTheadTable = this.tbs!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
     this.leftTheadTable = this.tblSummary!.shadowRoot?.querySelector('.thead') as HTMLDivElement;
     this.tbsTable = this.tbs!.shadowRoot?.querySelector('.table') as HTMLDivElement;
-    this.leftTable = this.shadowRoot?.querySelector('#left_table') as HTMLDivElement;
+    this.leftTable = this.shadowRoot?.querySelector('#summary_left_table') as HTMLDivElement;
     this.tblSummary!.addEventListener('row-click', (evt) => {
       this.rightTheadTable!.removeAttribute('sort');
       this.tbsTable!.scrollTop = 0;
@@ -166,12 +166,12 @@ export class TabPaneSummary extends BaseElement {
       }
     });
 
-    this.tbs!.addEventListener('row-click', (evt: any) => {
-      let data = evt.detail.data as ConstructorItem;
+    this.tbs!.addEventListener('row-click', (summanyRowEvent: any) => {
+      let data = summanyRowEvent.detail.data as ConstructorItem;
       (data as any).isSelected = true;
-      if ((evt.detail as any).callBack) {
+      if ((summanyRowEvent.detail as any).callBack) {
         // @ts-ignore
-        (evt.detail as any).callBack(true);
+        (summanyRowEvent.detail as any).callBack(true);
       }
     });
 
@@ -354,6 +354,66 @@ export class TabPaneSummary extends BaseElement {
     this.clickToggleTable();
   }
 
+  private retainsTableByDistance(currentLeftItem: ConstructorItem, sort: number) {
+    const getList = function (list: Array<ConstructorItem>) {
+      list.sort((leftA, rightB) => {
+        return sort === 1 ? leftA.distance - rightB.distance : rightB.distance - leftA.distance;
+      });
+      list.forEach(function (row) {
+        if (row.children.length > 0) {
+          getList(row.children);
+        }
+      });
+    };
+    getList(currentLeftItem.children);
+  }
+
+  private retainsTableByShallowSize(currentLeftItem: ConstructorItem, sort: number) {
+    const getList = function (list: Array<ConstructorItem>) {
+      list.sort((leftA, rightB) => {
+        return sort === 1 ? leftA.shallowSize - rightB.shallowSize : rightB.shallowSize - leftA.shallowSize;
+      });
+      list.forEach(function (row) {
+        if (row.children.length > 0) {
+          getList(row.children);
+        }
+      });
+    };
+    getList(currentLeftItem.children);
+  }
+
+  private retainsTableByRetainedSize(currentLeftItem: ConstructorItem, sort: number) {
+    const getList = function (list: Array<ConstructorItem>) {
+      list.sort((leftA, rightB) => {
+        return sort === 1
+          ? leftA.retainedSize - rightB.retainedSize
+          : rightB.retainedSize - leftA.retainedSize;
+      });
+      list.forEach(function (row) {
+        if (row.children.length > 0) {
+          getList(row.children);
+        }
+      });
+    };
+    getList(currentLeftItem.children);
+  }
+
+  private retainsTableByObjectName(currentLeftItem: ConstructorItem, sort: number) {
+    const getList = function (list: Array<ConstructorItem>) {
+      list.sort((leftA, rightB) => {
+        return sort === 1
+          ? (leftA.objectName + '').localeCompare(rightB.objectName + '')
+          : (rightB.objectName + '').localeCompare(leftA.objectName + '');
+      });
+      list.forEach(function (row) {
+        if (row.children.length > 0) {
+          getList(row.children);
+        }
+      });
+    };
+    getList(currentLeftItem.children);
+  }
+
   sortByLeftTable(column: string, sort: number) {
     switch (sort) {
       case 0:
@@ -375,20 +435,7 @@ export class TabPaneSummary extends BaseElement {
               return sort === 1 ? leftData.distance - rightData.distance : rightData.distance - leftData.distance;
             });
             this.leftArray.forEach((currentLeftItem) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((leftA, rightB) => {
-                    return sort === 1 ? leftA.distance - rightB.distance : rightB.distance - leftA.distance;
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(currentLeftItem.children);
-              };
-              retainsTable();
+              this.retainsTableByDistance(currentLeftItem, sort);
             });
             this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
@@ -399,20 +446,7 @@ export class TabPaneSummary extends BaseElement {
                 : rightData.shallowSize - leftData.shallowSize;
             });
             this.leftArray.forEach((currentLeftItem) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((leftA, rightB) => {
-                    return sort === 1 ? leftA.shallowSize - rightB.shallowSize : rightB.shallowSize - leftA.shallowSize;
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(currentLeftItem.children);
-              };
-              retainsTable();
+              this.retainsTableByShallowSize(currentLeftItem, sort);
             });
             this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
@@ -423,22 +457,7 @@ export class TabPaneSummary extends BaseElement {
                 : rightData.retainedSize - leftData.retainedSize;
             });
             this.leftArray.forEach((currentLeftItem) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((leftA, rightB) => {
-                    return sort === 1
-                      ? leftA.retainedSize - rightB.retainedSize
-                      : rightB.retainedSize - leftA.retainedSize;
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(currentLeftItem.children);
-              };
-              retainsTable();
+              this.retainsTableByRetainedSize(currentLeftItem, sort);
             });
             this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
@@ -449,22 +468,7 @@ export class TabPaneSummary extends BaseElement {
                 : (rightData.objectName + '').localeCompare(leftData.objectName + '');
             });
             this.leftArray.forEach((currentLeftItem) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((leftA, rightB) => {
-                    return sort === 1
-                      ? (leftA.objectName + '').localeCompare(rightB.objectName + '')
-                      : (rightB.objectName + '').localeCompare(leftA.objectName + '');
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(currentLeftItem.children);
-              };
-              retainsTable();
+              this.retainsTableByObjectName(currentLeftItem, sort);
             });
             this.tblSummary!.snapshotDataSource = this.leftArray;
             break;
@@ -486,20 +490,7 @@ export class TabPaneSummary extends BaseElement {
               return sort === 1 ? a.distance - b.distance : b.distance - a.distance;
             });
             this.rightArray.forEach((list) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((a, b) => {
-                    return sort === 1 ? a.distance - b.distance : b.distance - a.distance;
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(list.children);
-              };
-              retainsTable();
+              this.retainsTableByDistance(list, sort);
             });
             this.tbs!.snapshotDataSource = this.rightArray;
             break;
@@ -508,20 +499,7 @@ export class TabPaneSummary extends BaseElement {
               return sort === 1 ? a.shallowSize - b.shallowSize : b.shallowSize - a.shallowSize;
             });
             this.rightArray.forEach((list) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((a, b) => {
-                    return sort === 1 ? a.shallowSize - b.shallowSize : b.shallowSize - a.shallowSize;
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(list.children);
-              };
-              retainsTable();
+              this.retainsTableByShallowSize(list, sort);
             });
             this.tbs!.snapshotDataSource = this.rightArray;
             break;
@@ -530,20 +508,7 @@ export class TabPaneSummary extends BaseElement {
               return sort === 1 ? a.retainedSize - b.retainedSize : b.retainedSize - a.retainedSize;
             });
             this.rightArray.forEach((list) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((a, b) => {
-                    return sort === 1 ? a.retainedSize - b.retainedSize : b.retainedSize - a.retainedSize;
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(list.children);
-              };
-              retainsTable();
+              this.retainsTableByRetainedSize(list, sort);
             });
             this.tbs!.snapshotDataSource = this.rightArray;
             break;
@@ -554,22 +519,7 @@ export class TabPaneSummary extends BaseElement {
                 : (b.objectName + '').localeCompare(a.objectName + '');
             });
             this.rightArray.forEach((list) => {
-              let retainsTable = function () {
-                const getList = function (list: Array<ConstructorItem>) {
-                  list.sort((a, b) => {
-                    return sort === 1
-                      ? (a.objectName + '').localeCompare(b.objectName + '')
-                      : (b.objectName + '').localeCompare(a.objectName + '');
-                  });
-                  list.forEach(function (row) {
-                    if (row.children.length > 0) {
-                      getList(row.children);
-                    }
-                  });
-                };
-                getList(list.children);
-              };
-              retainsTable();
+              this.retainsTableByObjectName(list, sort);
             });
             this.tbs!.snapshotDataSource = this.rightArray;
             break;
@@ -747,7 +697,7 @@ export class TabPaneSummary extends BaseElement {
             bottom: 0;
             width: 100%;
         }
-        .progress{
+        .summary_progress{
             bottom: 33px;
             position: absolute;
             height: 1px;
@@ -757,25 +707,24 @@ export class TabPaneSummary extends BaseElement {
         selector{
             display: none;
         }
-        .show{
+        .summary_show{
             display: flex;
             flex: 1;
         }
-        .retainers{
+        .summary_retainers{
             height: 30px;
-            /* background: #D8D8D8; */
             width: 100%;
             display: flex;
         }
-        #right{
+        #summary_right{
             height: calc(100% - 30px);
         }
     </style>
     <div style="display: flex;flex-direction: row;height: 100%;">
-    <selector id='show_table' class="show">
+    <selector id='show_table' class="summary_show">
         <lit-slicer style="width:100%">
-        <div id="left_table" style="width: 65%;">
-            <lit-table id="left" style="height: auto" tree>
+        <div id="summary_left_table" style="width: 65%;">
+            <lit-table id="summary_left" style="height: auto" tree>
                 <lit-table-column width="40%" title="Constructor" data-index="" key="objectName" align="flex-start" order>
                 </lit-table-column>
                 <lit-table-column width="2fr" title="Distance" data-index="distance" key="distance" align="flex-start" order>
@@ -793,13 +742,13 @@ export class TabPaneSummary extends BaseElement {
         <lit-slicer-track ></lit-slicer-track>
         <div style="flex: 1;display: flex; flex-direction: row;">
             <div style="flex: 1;display: block;">
-                <div class="retainers">
+                <div class="summary_retainers">
                     <ul>
                         <li href="#" id="retainers" style="width: 80px; text-align: center;" class="active">Retainers</li>
                         <li href="#" id="stack" style="width: 120px; text-align: center; display: none; padding-left: 10px;">Allocation stack</li>
                     </ul>
                 </div>
-                <lit-table id="right" tree>
+                <lit-table id="summary_right" tree>
                     <lit-table-column width="40%" title="Object" data-index="" key="objectName" align="flex-start" order>
                     </lit-table-column>
                     <lit-table-column width="2fr" title="Distance" data-index="distance" key="distance" align="flex-start" order>
@@ -823,7 +772,7 @@ export class TabPaneSummary extends BaseElement {
         </lit-slicer>
     </selector>
     <tab-pane-js-memory-filter id="filter" input inputLeftText></tab-pane-js-memory-filter>
-    <lit-progress-bar class="progress"></lit-progress-bar>
+    <lit-progress-bar class="summary_progress"></lit-progress-bar>
     </div>
     `;
   }
diff --git a/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts b/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
index 3a2f48aaf6e1c7b1874f9bc7cc1d45da1465fe26..830417ac65421c7724a0c66893ae5e5a9136d95b 100644
--- a/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
+++ b/ide/src/trace/component/trace/sheet/cpu/TabPanePTS.ts
@@ -47,11 +47,6 @@ export class TabPanePTS extends BaseElement {
     this.ptsRange = this.shadowRoot?.querySelector('#pts-time-range');
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    resizeObserver(this.parentElement!, this.ptsTbl!);
-  }
-
   queryDataByDB(ptsVal: SelectionParam | any) {
     getStatesProcessThreadDataByRange(ptsVal.leftNs, ptsVal.rightNs).then((result) => {
       this.getDataByPTS(ptsVal.leftNs, ptsVal.rightNs, result);
@@ -67,13 +62,16 @@ export class TabPanePTS extends BaseElement {
     });
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    resizeObserver(this.parentElement!, this.ptsTbl!);
+  }
   initHtml(): string {
-    return `
-        <style>
+    return `<style>
         :host{
             display: flex;
-            flex-direction: column;
             padding: 10px 10px;
+            flex-direction: column;
         }
         </style>
         <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>
diff --git a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
index 204ddd59e01f35013a1eeae57176cae33619ead5..e8d84f1f560c1206399685cd27c362896def6361 100644
--- a/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
+++ b/ide/src/trace/component/trace/sheet/energy/TabPaneSystemDetails.ts
@@ -101,6 +101,9 @@ export class TabPaneSystemDetails extends BaseElement {
       this.detailsTbl!.dataSource = this.detailsSource;
       this.boxDetails!.style.width = '65%';
     }
+    this.detailsTbl!.shadowRoot?.querySelectorAll<HTMLDivElement>('.tr').forEach((tr) => {
+      tr.style.gridTemplateColumns = '120px 1fr';
+    });
     this.detailsTbl!.shadowRoot?.querySelectorAll<HTMLDivElement>('.td').forEach((td) => {
       let item = td.getAttribute('title');
       td.style.fontSize = '14px';
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 0cf6eaf31dfd3cf80c6cf959ad70833aef8c8924..27cead375f9a970a9ef8ae71062311eb6fbb4f1d 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneCallTree.ts
@@ -36,11 +36,11 @@ export class TabPaneCallTree extends BaseElement {
   private callTreeDataSource: any[] = [];
   private callTreeSortKey = 'weight';
   private callTreeSortType = 0;
-  private currentSelectedData: any = undefined;
+  private callTreeSelectedData: any = undefined;
   private frameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
   private systmeRuleName = '/system/';
-  private numRuleName = '/max/min/';
+  private callTreeNumRuleName = '/max/min/';
   private needShowMenu = true;
   private searchValue: string = '';
   private loadingList: number[] = [];
@@ -224,7 +224,7 @@ export class TabPaneCallTree extends BaseElement {
       let data = evt.detail.data as MerageBean;
       this.setRightTableData(data);
       data.isSelected = true;
-      this.currentSelectedData = data;
+      this.callTreeSelectedData = data;
       this.callTreeTbr?.clearAllSelection(data);
       this.callTreeTbr?.setCurrentSelection(data);
       // @ts-ignore
@@ -283,27 +283,27 @@ export class TabPaneCallTree extends BaseElement {
         });
       } else if (data.type == 'button') {
         if (data.item == 'symbol') {
-          if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
+          if (this.callTreeSelectedData && !this.callTreeSelectedData.canCharge) {
             return;
           }
-          if (this.currentSelectedData != undefined) {
-            this.callTreeFilter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
+          if (this.callTreeSelectedData != undefined) {
+            this.callTreeFilter!.addDataMining({ name: this.callTreeSelectedData.symbolName }, data.item);
             callTreeFuncArgs.push({
               funcName: 'splitTree',
-              funcArgs: [this.currentSelectedData.symbolName, false, true],
+              funcArgs: [this.callTreeSelectedData.symbolName, false, true],
             });
           } else {
             return;
           }
         } else if (data.item == 'library') {
-          if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
+          if (this.callTreeSelectedData && !this.callTreeSelectedData.canCharge) {
             return;
           }
-          if (this.currentSelectedData != undefined && this.currentSelectedData.libName != '') {
-            this.callTreeFilter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
+          if (this.callTreeSelectedData != undefined && this.callTreeSelectedData.libName != '') {
+            this.callTreeFilter!.addDataMining({ name: this.callTreeSelectedData.libName }, data.item);
             callTreeFuncArgs.push({
               funcName: 'splitTree',
-              funcArgs: [this.currentSelectedData.libName, false, false],
+              funcArgs: [this.callTreeSelectedData.libName, false, false],
             });
           } else {
             return;
@@ -335,11 +335,11 @@ export class TabPaneCallTree extends BaseElement {
         this.frameChart!.data = this.callTreeDataSource;
         if (this.isChartShow) this.frameChart?.calculateChartData();
         this.callTreeTbl!.move1px();
-        if (this.currentSelectedData) {
-          this.currentSelectedData.isSelected = false;
-          this.callTreeTbl?.clearAllSelection(this.currentSelectedData);
+        if (this.callTreeSelectedData) {
+          this.callTreeSelectedData.isSelected = false;
+          this.callTreeTbl?.clearAllSelection(this.callTreeSelectedData);
           this.callTreeTbr!.recycleDataSource = [];
-          this.currentSelectedData = undefined;
+          this.callTreeSelectedData = undefined;
         }
       });
     };
@@ -387,11 +387,11 @@ export class TabPaneCallTree extends BaseElement {
       let callTreeConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
-          funcArgs: [[this.numRuleName]],
+          funcArgs: [[this.callTreeNumRuleName]],
         },
         {
           funcName: 'clearSplitMapData',
-          funcArgs: [this.numRuleName],
+          funcArgs: [this.callTreeNumRuleName],
         },
       ];
       if (data.checked) {
@@ -413,7 +413,7 @@ export class TabPaneCallTree extends BaseElement {
     this.callTreeFilter!.getFilterData((callTreeFilterData: FilterData) => {
       if (this.searchValue != this.callTreeFilter!.filterValue) {
         this.searchValue = this.callTreeFilter!.filterValue;
-        let args = [
+        let callTreeArgs = [
           {
             funcName: 'setSearchValue',
             funcArgs: [this.searchValue],
@@ -423,7 +423,7 @@ export class TabPaneCallTree extends BaseElement {
             funcArgs: [],
           },
         ];
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(callTreeArgs, (result: any[]) => {
           this.setLTableData(result);
           this.frameChart!.data = this.callTreeDataSource;
           this.switchFlameChart(callTreeFilterData);
@@ -556,11 +556,6 @@ export class TabPaneCallTree extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         .call-tree-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
@@ -568,13 +563,6 @@ export class TabPaneCallTree extends BaseElement {
             bottom: 0;
             width: 100%;
         }
-        selector{
-            display: none;
-        }
-        .show{
-            display: flex;
-            flex: 1;
-        }
         .call-tree-progress{
             bottom: 33px;
             position: absolute;
@@ -582,6 +570,14 @@ export class TabPaneCallTree extends BaseElement {
             left: 0;
             right: 0;
         }
+        :host{
+            display: flex;
+            flex-direction: column;
+            padding: 10px 10px 0 10px;
+        }
+        selector{
+            display: none;
+        }
         .call-tree-loading{
             bottom: 0;
             position: absolute;
@@ -591,6 +587,10 @@ export class TabPaneCallTree extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
+         .show{
+            display: flex;
+            flex: 1;
+        }
     </style>
     <div class="call-tree-content" style="display: flex;flex-direction: row">
     
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 23352d7910b42bd91179e01b813f7348a24c003a..20486ddf1b5684ec78590e70512b6313710b1201 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.ts
@@ -42,7 +42,7 @@ export class TabpaneFilesystemCalltree extends BaseElement {
   private frameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
   private systmeRuleName = '/system/';
-  private numRuleName = '/max/min/';
+  private fsCallTreeNumRuleName = '/max/min/';
   private modal: DisassemblingWindow | null | undefined;
   private needShowMenu = true;
   private searchValue: string = '';
@@ -342,11 +342,11 @@ export class TabpaneFilesystemCalltree extends BaseElement {
       let fsCallTreeConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
-          funcArgs: [[this.numRuleName]],
+          funcArgs: [[this.fsCallTreeNumRuleName]],
         },
         {
           funcName: 'clearSplitMapData',
-          funcArgs: [this.numRuleName],
+          funcArgs: [this.fsCallTreeNumRuleName],
         },
       ];
       if (data.checked) {
@@ -368,7 +368,7 @@ export class TabpaneFilesystemCalltree extends BaseElement {
     this.fsCallTreeFilter!.getFilterData((data: FilterData) => {
       if (this.searchValue != this.fsCallTreeFilter!.filterValue) {
         this.searchValue = this.fsCallTreeFilter!.filterValue;
-        let args = [
+        let fileArgs = [
           {
             funcName: 'setSearchValue',
             funcArgs: [this.searchValue],
@@ -378,7 +378,7 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             funcArgs: [],
           },
         ];
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(fileArgs, (result: any[]) => {
           this.setLTableData(result);
           this.frameChart!.data = this.fsCallTreeDataSource;
           this.switchFlameChart(data);
@@ -545,11 +545,6 @@ export class TabpaneFilesystemCalltree extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         .fs-call-tree-filter {
             border: solid rgb(216,216,216) 1px;
             float: left;
@@ -557,12 +552,10 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             bottom: 0;
             width: 100%;
         }
-        selector{
-            display: none;
-        }
-        .show{
+        :host{
             display: flex;
-            flex: 1;
+            flex-direction: column;
+            padding: 10px 10px 0 10px;
         }
         .fs-call-tree-progress{
             bottom: 33px;
@@ -571,6 +564,9 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             left: 0;
             right: 0;
         }
+        selector{
+            display: none;
+        }
         .fs-call-tree-loading{
             bottom: 0;
             position: absolute;
@@ -580,6 +576,10 @@ export class TabpaneFilesystemCalltree extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
+        .show{
+            display: flex;
+            flex: 1;
+        }
     </style>
     <div class="fs-call-tree-content" style="display: flex;flex-direction: row">
     
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 bbb0175946a713278d2904c578c6cc74eea72dab..837854ba1a39fadb6ec163e1454ac602d668afd3 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.ts
@@ -288,15 +288,15 @@ export class TabPaneFileSystemDescHistory extends BaseElement {
                             <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>
+                                        <span class="fs-desc-backtrace-data-span">{{backtrace[0]}}</span>
                                         <span v-if="backtrace.length > 1">⬅</span>
-                                        <span v-if="backtrace.length > 1"style="color: #565656"> {{backtrace[1]}}</span>
+                                        <span v-if="backtrace.length > 1" style="color: #565656"> {{backtrace[1]}}</span>
                                     </div>
                                 </template>
                             </lit-table-column>
                         </lit-table>
                     </div>
-                    <lit-slicer-track ></lit-slicer-track>
+                    <lit-slicer-track class="fs-desc-history-tracker"></lit-slicer-track>
                     <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>
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 aa3d9c2c22b7b7e2faf1e7a486d3ef83cffe1509..a85d0162310095496505f5635057f44db420cf5c 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.ts
@@ -171,7 +171,7 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
         :host{
             display: flex;
             flex-direction: column;
-            padding: 10px 10px 0 10px;
+            padding: 10px 10px 1px 10px;
         }
         .fs-slice-loading{
             bottom: 0;
@@ -211,7 +211,7 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
                             <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>
+                                        <span class="fs-desc-time-backtrace-data-span">{{backtrace[0]}}</span>
                                         <span v-if="backtrace.length > 1">⬅</span>
                                         <span v-if="backtrace.length > 1"style="color: #565656"> {{backtrace[1]}}</span>
                                     </div>
@@ -219,7 +219,7 @@ export class TabPaneFileSystemDescTimeSlice extends BaseElement {
                             </lit-table-column>
                         </lit-table>
                     </div>
-                    <lit-slicer-track ></lit-slicer-track>
+                    <lit-slicer-track class="fs-desc-time-slice"></lit-slicer-track>
                     <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>
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 b1a8ae3ba6bf5cfe20f3a49f3790fe24e817e0d2..fadbfae69efc731f03b359d231ff94084aa1dfff 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.ts
@@ -294,9 +294,9 @@ export class TabPaneFileSystemEvents extends BaseElement {
     return `
     <style>
         :host{
+            padding: 10px 10px 0 10px;
             display: flex;
             flex-direction: column;
-            padding: 10px 10px 0 10px;
         }
         .fs-event-loading{
             bottom: 0;
@@ -352,7 +352,7 @@ export class TabPaneFileSystemEvents extends BaseElement {
                             </lit-table-column>
                         </lit-table>
                     </div>
-                    <lit-slicer-track ></lit-slicer-track>
+                    <lit-slicer-track class="fs-evnet-slicer-tracker"></lit-slicer-track>
                     <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>
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 ae2ae524bb9d70b8f77c136f181ce33f161c76fb..82b0e5496663273ea7c77991b68081701db760ea 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.ts
@@ -15,8 +15,8 @@
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { LitChartPie } from '../../../../../base-ui/chart/pie/LitChartPie.js';
+import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import '../../../../../base-ui/chart/pie/LitChartPie.js';
 import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar';
 import { Utils } from '../../base/Utils.js';
@@ -93,13 +93,13 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
   }
   initElements(): void {
     this.fileStatisticsAnalysisRange = this.shadowRoot?.querySelector('#time-range');
-    this.fileStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.fileStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#fs-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.back = this.shadowRoot!.querySelector<HTMLDivElement>('.fs-go-back');
+    this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.fs-subheading');
     this.fileStatisticsAnalysisTableType = this.shadowRoot!.querySelector<LitTable>('#tb-type-usage');
     this.fileStatisticsAnalysisProgressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
     this.goBack();
@@ -151,30 +151,23 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     this.sumDur = this.processStatisticsData.allDuration;
     this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.fileStatisticsAnalysisPidData),
+      data: this.getFsPieChartData(this.fileStatisticsAnalysisPidData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                    <div>ProcessName:${ obj.obj.tableName }</div>
-                    <div>Duration:${ obj.obj.durFormat }</div>
-                    <div>Percent:${ obj.obj.percent }%</div> 
-                </div>
-                                `;
-      },
-      angleClick: (it): void => {
+      tip: this.getFsTip(),
+      angleClick: (fsPieClickItem): void => {
         // @ts-ignore
-        if (it.tableName != 'other') {
-          this.fileProcessLevelClickEvent(it);
+        if (fsPieClickItem.tableName != 'other') {
+          this.fileProcessLevelClickEvent(fsPieClickItem);
         }
       },
-      hoverHandler: (data): void => {
-        if (data) {
-          this.fileStatisticsAnalysisTableProcess!.setCurrentHover(data);
+      hoverHandler: (fsPieData): void => {
+        if (fsPieData) {
+          this.fileStatisticsAnalysisTableProcess!.setCurrentHover(fsPieData);
         } else {
           this.fileStatisticsAnalysisTableProcess!.mouseOut();
         }
@@ -241,14 +234,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                    <div>Type:${ obj.obj.tableName }</div>
-                    <div>Duration:${ obj.obj.durFormat }</div>
-                    <div>Percent:${ obj.obj.percent }%</div> 
-                </div>
-                `;
-      },
+      tip: this.getFileTypeTip(),
       angleClick: (it): void => {
         this.fileTypeLevelClickEvent(it);
       },
@@ -298,6 +284,16 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       }
     });
   }
+  private getFileTypeTip() {
+    return (obj: { obj: { tableName: any; durFormat: any; percent: any; }; }): string => {
+      return `<div>
+                    <div>Type:${ obj.obj.tableName }</div>
+                    <div>Duration:${ obj.obj.durFormat }</div>
+                    <div>Percent:${ obj.obj.percent }%</div> 
+                </div>
+                `;
+    };
+  }
   fileTypeLevelClickEvent(it: any): void {
     this.clearData();
     this.fileStatisticsAnalysisTableType!.style.display = 'none';
@@ -316,21 +312,14 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     this.sumDur = this.threadStatisticsData.allDuration;
     this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.fileStatisticsAnalysisThreadData),
+      data: this.getFsPieChartData(this.fileStatisticsAnalysisThreadData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                                <div>ThreadName:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
-      },
+      tip: this.getFileTypeTip(),
       angleClick: (it): void => {
         // @ts-ignore
         if (it.tableName != 'other') {
@@ -384,6 +373,16 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       }
     });
   }
+  private getFsTip() {
+    return (obj: { obj: { tableName: any; durFormat: any; percent: any; }; }): string => {
+      return `<div>
+                                <div>ThreadName:${ obj.obj.tableName }</div>
+                                <div>Duration:${ obj.obj.durFormat }</div>
+                                <div>Percent:${ obj.obj.percent }%</div> 
+                            </div>
+                                `;
+    };
+  }
   fileThreadLevelClickEvent(it: any): void {
     this.clearData();
     this.back!.style.visibility = 'visible';
@@ -403,25 +402,25 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     this.sumDur = this.libStatisticsData.allDuration;
     this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.fileStatisticsAnalysisSoData),
+      data: this.getFsPieChartData(this.fileStatisticsAnalysisSoData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
+      tip: (fileSysObj): string => {
         return `<div>
-                                <div>Library:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
+                                <div>Library:${ fileSysObj.obj.tableName }</div>
+                                <div>Duration:${ fileSysObj.obj.durFormat }</div>
+                                <div>Percent:${ fileSysObj.obj.percent }%</div> 
                             </div>
                                 `;
       },
-      angleClick: (it): void => {
+      angleClick: (fileSysBean): void => {
         // @ts-ignore
-        if (it.tableName != 'other') {
-          this.fileSoLevelClickEvent(it);
+        if (fileSysBean.tableName != 'other') {
+          this.fileSoLevelClickEvent(fileSysBean);
         }
       },
       hoverHandler: (data): void => {
@@ -535,21 +534,21 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       }
       fsaCurrentTable!.recycleDataSource = fsaArr;
     } else {
-      let fsaArr = [...this.currentLevelData];
+      let fsaArray = [...this.currentLevelData];
       if (column === 'tableName') {
-        fsaCurrentTable!.recycleDataSource = fsaArr.sort((a, b) => {
+        fsaCurrentTable!.recycleDataSource = fsaArray.sort((firstElement, secondElement) => {
           if (fsaSort === 1) {
-            if (a.tableName > b.tableName) {
+            if (firstElement.tableName > secondElement.tableName) {
               return 1;
-            } else if (a.tableName === b.tableName) {
+            } else if (firstElement.tableName === secondElement.tableName) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.tableName > a.tableName) {
+            if (secondElement.tableName > firstElement.tableName) {
               return 1;
-            } else if (a.tableName === b.tableName) {
+            } else if (firstElement.tableName === secondElement.tableName) {
               return 0;
             } else {
               return -1;
@@ -557,28 +556,28 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
           }
         });
       } else if (column === 'durFormat' || column === 'percent') {
-        fsaCurrentTable!.recycleDataSource = fsaArr.sort((a, b) => {
+        fsaCurrentTable!.recycleDataSource = fsaArray.sort((a, b) => {
           return fsaSort === 1 ? a.duration - b.duration : b.duration - a.duration;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          fsaArr.unshift(this.processStatisticsData);
+          fsaArray.unshift(this.processStatisticsData);
           break;
         case 1:
-          fsaArr.unshift(this.typeStatisticsData);
+          fsaArray.unshift(this.typeStatisticsData);
           break;
         case 2:
-          fsaArr.unshift(this.threadStatisticsData);
+          fsaArray.unshift(this.threadStatisticsData);
           break;
         case 3:
-          fsaArr.unshift(this.libStatisticsData);
+          fsaArray.unshift(this.libStatisticsData);
           break;
         case 4:
-          fsaArr.unshift(this.functionStatisticsData);
+          fsaArray.unshift(this.functionStatisticsData);
           break;
       }
-      fsaCurrentTable!.recycleDataSource = fsaArr;
+      fsaCurrentTable!.recycleDataSource = fsaArray;
     }
   }
   getFilesystemProcess(result: Array<any>): void {
@@ -603,23 +602,21 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     }
     this.fileStatisticsAnalysisPidData = [];
     pidMap.forEach((value: Array<any>, key: string) => {
-      let dur = 0;
+      let analysisPidDataDur = 0;
       let pName = '';
-      for (let item of value) {
-        pName = item.processName =
-          item.processName === null || item.processName === undefined
-            ? `Process(${ item.pid })`
-            : `${ item.processName }(${ item.pid })`;
-        dur += item.dur;
+      for (let fileSysStatPidItem of value) {
+        pName = fileSysStatPidItem.processName =
+          fileSysStatPidItem.processName === null || fileSysStatPidItem.processName === undefined ?
+            `Process(${ fileSysStatPidItem.pid })` : `${ fileSysStatPidItem.processName }(${ fileSysStatPidItem.pid })`;
+        analysisPidDataDur += fileSysStatPidItem.dur;
       }
-      const pidData = {
+      this.fileStatisticsAnalysisPidData.push({
         tableName: pName,
         pid: key,
-        percent: ((dur / allDur) * 100).toFixed(2),
-        durFormat: Utils.getProbablyTime(dur),
-        duration: dur,
-      };
-      this.fileStatisticsAnalysisPidData.push(pidData);
+        percent: ((analysisPidDataDur / allDur) * 100).toFixed(2),
+        durFormat: Utils.getProbablyTime(analysisPidDataDur),
+        duration: analysisPidDataDur,
+      });
     });
     this.fileStatisticsAnalysisPidData.sort((a, b) => b.duration - a.duration);
     this.processStatisticsData = this.totalDurationData(allDur);
@@ -642,10 +639,10 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     }).observe(this.parentElement!);
   }
 
-  getFilesystemType(item: any): void {
+  getFilesystemType(fileSysStatTypeItem: any): void {
     this.fileStatisticsAnalysisProgressEL!.loading = true;
     let typeMap = new Map<number, Array<number | string>>();
-    let pid = item.pid;
+    let pid = fileSysStatTypeItem.pid;
     let allDur = 0;
     if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length == 0) {
       return;
@@ -671,7 +668,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
       }
       const typeData = {
         tableName: this.typeIdToString(key),
-        pid: item.pid,
+        pid: fileSysStatTypeItem.pid,
         type: key,
         percent: ((dur / allDur) * 100).toFixed(2),
         durFormat: Utils.getProbablyTime(dur),
@@ -686,11 +683,11 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     this.fileStatisticsAnalysisProgressEL!.loading = false;
   }
 
-  getFilesystemThread(item: any): void {
+  getFilesystemThread(fileSysStatThreadItem: any): void {
     this.fileStatisticsAnalysisProgressEL!.loading = true;
     let threadMap = new Map<string, Array<number | string>>();
-    let pid = item.pid;
-    let type = item.type;
+    let pid = fileSysStatThreadItem.pid;
+    let type = fileSysStatThreadItem.type;
     let allDur = 0;
     if (!this.fileStatisticsAnalysisProcessData || this.fileStatisticsAnalysisProcessData.length === 0) {
       return;
@@ -712,15 +709,15 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     threadMap.forEach((value: Array<any>, key: string) => {
       let dur = 0;
       let tName = '';
-      for (let item of value) {
-        dur += item.dur;
-        tName = item.threadName =
-          item.threadName === null || item.threadName === undefined ? `Thread(${ item.tid })` : `${ item.threadName }`;
+      for (let fileSysStatThreadItem of value) {
+        dur += fileSysStatThreadItem.dur;
+        tName = fileSysStatThreadItem.threadName =
+          fileSysStatThreadItem.threadName === null || fileSysStatThreadItem.threadName === undefined ? `Thread(${ fileSysStatThreadItem.tid })` : `${ fileSysStatThreadItem.threadName }`;
       }
       const threadData = {
         tableName: tName,
-        pid: item.pid,
-        type: item.type,
+        pid: fileSysStatThreadItem.pid,
+        type: fileSysStatThreadItem.type,
         tid: key,
         percent: ((dur / allDur) * 100).toFixed(2),
         durFormat: Utils.getProbablyTime(dur),
@@ -794,7 +791,7 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
 
   getFilesystemFunction(item: any): void {
     this.fileStatisticsAnalysisProgressEL!.loading = true;
-    this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function AllDuration';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.fs-subheading')!.textContent = 'Statistic By Function AllDuration';
     let tid = item.tid;
     let pid = item.pid;
     let type = item.type;
@@ -852,18 +849,18 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     this.sumDur = this.functionStatisticsData.allDuration;
     this.fileStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.fileStatisticsAnalysisFunctionData),
+      data: this.getFsPieChartData(this.fileStatisticsAnalysisFunctionData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
+      tip: (fsaObj): string => {
         return `<div>
-                                    <div>Function:${ obj.obj.tableName }</div>
-                                    <div>Duration:${ obj.obj.durFormat }</div>
-                                    <div>percent:${ obj.obj.percent }</div>
+                                    <div>Function:${ fsaObj.obj.tableName }</div>
+                                    <div>Duration:${ fsaObj.obj.durFormat }</div>
+                                    <div>percent:${ fsaObj.obj.percent }</div>
                                         </div>
                                                 `;
       },
@@ -905,51 +902,49 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
     });
   }
   typeIdToString(transformType: number): string {
-    let releaseType: string;
+    let fsReleaseType: string;
     if (transformType === 0) {
-      releaseType = 'OPEN';
+      fsReleaseType = 'OPEN';
     } else if (transformType === 2) {
-      releaseType = 'READ';
+      fsReleaseType = 'READ';
     } else if (transformType === 3) {
-      releaseType = 'WRITE';
+      fsReleaseType = 'WRITE';
     } else if (transformType === 1) {
-      releaseType = 'CLOSE';
+      fsReleaseType = 'CLOSE';
     }
     // @ts-ignore
-    return releaseType;
+    return fsReleaseType;
   }
-  totalDurationData(duration: number): { durFormat: string; percent: string; tableName: string; duration: number; } {
-    let allDuration;
-    allDuration = {
-      durFormat: Utils.getProbablyTime(duration),
-      percent: ((duration / duration) * 100).toFixed(2),
+  totalDurationData(durationTS: number): { durFormat: string; percent: string; tableName: string; duration: number; } {
+    return {
+      durFormat: Utils.getProbablyTime(durationTS),
+      percent: ((durationTS / durationTS) * 100).toFixed(2),
       tableName: '',
       duration: 0,
     };
-    return allDuration;
   }
-  getPieChartData(pieChartData: any[]): unknown[] {
-    if (pieChartData.length > 20) {
-      let pieChartArr: string[] = [];
+  getFsPieChartData(fsPieChartData: any[]): unknown[] {
+    if (fsPieChartData.length > 20) {
+      let fsPieChartArr: string[] = [];
       let other: any = {
         tableName: 'other',
         duration: 0,
         percent: 0,
         durFormat: 0,
       };
-      for (let pieDataIndex = 0 ; pieDataIndex < pieChartData.length ; pieDataIndex++) {
+      for (let pieDataIndex = 0 ; pieDataIndex < fsPieChartData.length ; pieDataIndex++) {
         if (pieDataIndex < 19) {
-          pieChartArr.push(pieChartData[pieDataIndex]);
+          fsPieChartArr.push(fsPieChartData[pieDataIndex]);
         } else {
-          other.duration += pieChartData[pieDataIndex].duration;
+          other.duration += fsPieChartData[pieDataIndex].duration;
           other.durFormat = Utils.getProbablyTime(other.duration);
           other.percent = ((other.duration / this.sumDur) * 100).toFixed(2);
         }
       }
-      pieChartArr.push(other);
-      return pieChartArr;
+      fsPieChartArr.push(other);
+      return fsPieChartArr;
     }
-    return pieChartData;
+    return fsPieChartData;
   }
 
   getDataByWorker(args: any[], handler: Function): void {
@@ -972,34 +967,34 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
             display: flex;
             flex-direction: column;
         }
-        #chart-pie{
+        #fs-chart-pie{
              height: 300px;
         }
-        .table-box{
+        .fs-table-box{
             width: 60%;
             border-left: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
             padding: 10px;
         }
-        .go-back{
+        .fs-go-back{
             display:flex;
             align-items: center;
             cursor: pointer;
             margin-left: 20px;
             visibility: hidden;
         }
-        .back-box{
+        .fs-back-box{
+            width: 40px;
+            height: 20px;
             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;
         }
-        .subheading{
+        .fs-subheading{
             font-weight: bold;
             text-align: center;
         }
@@ -1015,38 +1010,38 @@ export class TabPaneFilesystemStatisticsAnalysis extends BaseElement {
             <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">
-                              <div class="back-box">
-                                  <lit-icon name="arrowleft"></lit-icon>
+                           <div class="fs-go-back">
+                              <div class="fs-back-box">
+                                  <lit-icon class="file-analysis" name="arrowleft"></lit-icon>
                               </div>
                            </div>
                          <div class="title"></div>
                         </div>
-                         <div class="subheading"></div>                     
-                         <lit-chart-pie  id="chart-pie"></lit-chart-pie>     
+                         <div class="fs-subheading"></div>                     
+                         <lit-chart-pie  id="fs-chart-pie"></lit-chart-pie>     
                      </div>
-                     <div class="table-box" style="height:auto;overflow: auto">
-                    <lit-table id="tb-process-usage" style="max-height:565px;min-height: 350px">
+                     <div class="fs-table-box" style="height:auto;overflow: auto">
+                    <lit-table id="tb-process-usage"class="file-analysis" 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="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>
-                    <lit-table id="tb-type-usage" style="max-height:565px;min-height: 350px"hideDownload>
+                    <lit-table id="tb-type-usage" class="file-analysis" style="max-height:565px;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Type" 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>
-                    <lit-table id="tb-thread-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                    <lit-table id="tb-thread-usage" class="file-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="ThreadName" 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>
-                     <lit-table id="tb-so-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                     <lit-table id="tb-so-usage" class="file-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Library" 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>
-                    <lit-table id="tb-function-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                    <lit-table id="tb-function-usage" class="file-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Function" 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>
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 45c26c0f6276a5fbf6ebdf4b59bcafd0522e2f45..c70841bfb6f425e0b368656ccb663ce2caa01d9d 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.ts
@@ -253,11 +253,6 @@ export class TabPaneIOTierStatistics extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         .io-tier-stat-progress{
             bottom: 5px;
             position: absolute;
@@ -265,6 +260,11 @@ export class TabPaneIOTierStatistics extends BaseElement {
             left: 0;
             right: 0;
         }
+        :host{
+            padding: 10px 10px 0 10px;
+            display: flex;
+            flex-direction: column;
+        }
         .io-tier-stat-loading{
             bottom: 0;
             position: absolute;
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 f6ed6ca19d077f88ea864db268a2e70b7ec36f83..da98801c2058718f93bc4038fde3d9092683601e 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.ts
@@ -15,9 +15,9 @@
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
 import { LitTable } from '../../../../../base-ui/table/lit-table.js';
-import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { LitChartPie } from '../../../../../base-ui/chart/pie/LitChartPie.js';
 import '../../../../../base-ui/chart/pie/LitChartPie.js';
+import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar';
 import { Utils } from '../../base/Utils.js';
 import { procedurePool } from '../../../../database/Procedure.js';
@@ -32,10 +32,10 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   private soData!: any[];
   private functionData!: any[];
   private typeData!: any[];
-  private tableProcess: LitTable | null | undefined;
-  private tableThread: LitTable | null | undefined;
+  private ioTierTableProcess: LitTable | null | undefined;
+  private ioTierTableThread: LitTable | null | undefined;
   private tableType: LitTable | null | undefined;
-  private tableSo: LitTable | null | undefined;
+  private ioTierTableSo: LitTable | null | undefined;
   private tableFunction: LitTable | null | undefined;
   private sumDur: number = 0;
   private range: HTMLLabelElement | null | undefined;
@@ -57,17 +57,17 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   set data(ioTierStatisticsAnalysisSelection: SelectionParam) {
     if (ioTierStatisticsAnalysisSelection === this.currentSelection) {
       this.pidData.unshift(this.processStatisticsData);
-      this.tableProcess!.recycleDataSource = this.pidData;
+      this.ioTierTableProcess!.recycleDataSource = this.pidData;
       // @ts-ignore
       this.pidData.shift(this.processStatisticsData);
       return;
     }
     this.clearData();
     this.currentSelection = ioTierStatisticsAnalysisSelection;
-    this.tableProcess!.style.display = 'grid';
+    this.ioTierTableProcess!.style.display = 'grid';
     this.tableType!.style.display = 'none';
-    this.tableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'none';
+    this.ioTierTableThread!.style.display = 'none';
+    this.ioTierTableSo!.style.display = 'none';
     this.tableFunction!.style.display = 'none';
     this.iOTierStatisticsAnalysisBack!.style.visibility = 'hidden';
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
@@ -79,7 +79,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       ) +
       '  ms';
     this.progressEL!.loading = true;
-    this.getDataByWorker(
+    this.getIoTierDataByWorker(
       [
         {
           funcName: 'setSearchValue',
@@ -97,54 +97,54 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   }
   initElements(): void {
     this.range = this.shadowRoot?.querySelector('#time-range');
-    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.iOTierStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#io-tier-chart-pie');
+    this.ioTierTableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
+    this.ioTierTableThread = this.shadowRoot!.querySelector<LitTable>('#tb-thread-usage');
+    this.ioTierTableSo = 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.iOTierStatisticsAnalysisBack = this.shadowRoot!.querySelector<HTMLDivElement>('.go-back');
-    this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.subheading');
+    this.iOTierStatisticsAnalysisBack = this.shadowRoot!.querySelector<HTMLDivElement>('.io-tier-go-back');
+    this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.io-tier-subheading');
     this.progressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
     this.goBack();
   }
   clearData(): void {
     this.iOTierStatisticsAnalysisPie!.dataSource = [];
-    this.tableProcess!.recycleDataSource = [];
+    this.ioTierTableProcess!.recycleDataSource = [];
     this.tableType!.recycleDataSource = [];
-    this.tableThread!.recycleDataSource = [];
-    this.tableSo!.recycleDataSource = [];
+    this.ioTierTableThread!.recycleDataSource = [];
+    this.ioTierTableSo!.recycleDataSource = [];
     this.tableFunction!.recycleDataSource = [];
   }
   goBack(): void {
     this.iOTierStatisticsAnalysisBack!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By type AllDuration') {
-        this.tableProcess!.style.display = 'grid';
+        this.ioTierTableProcess!.style.display = 'grid';
         this.tableType!.style.display = 'none';
         this.iOTierStatisticsAnalysisBack!.style.visibility = 'hidden';
         this.tableType!.setAttribute('hideDownload', '');
-        this.tableProcess?.removeAttribute('hideDownload');
+        this.ioTierTableProcess?.removeAttribute('hideDownload');
         this.currentLevel = 0;
         this.processPieChart();
       } else if (this.tabName!.textContent === 'Statistic By Thread AllDuration') {
         this.tableType!.style.display = 'grid';
-        this.tableThread!.style.display = 'none';
-        this.tableThread!.setAttribute('hideDownload', '');
+        this.ioTierTableThread!.style.display = 'none';
+        this.ioTierTableThread!.setAttribute('hideDownload', '');
         this.tableType?.removeAttribute('hideDownload');
         this.currentLevel = 1;
         this.typePieChart();
       } 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.ioTierTableThread!.style.display = 'grid';
+        this.ioTierTableSo!.style.display = 'none';
+        this.ioTierTableSo!.setAttribute('hideDownload', '');
+        this.ioTierTableThread?.removeAttribute('hideDownload');
         this.currentLevel = 2;
         this.threadPieChart();
       } else if (this.tabName!.textContent === 'Statistic By Function AllDuration') {
-        this.tableSo!.style.display = 'grid';
+        this.ioTierTableSo!.style.display = 'grid';
         this.tableFunction!.style.display = 'none';
         this.tableFunction!.setAttribute('hideDownload', '');
-        this.tableSo?.removeAttribute('hideDownload');
+        this.ioTierTableSo?.removeAttribute('hideDownload');
         this.currentLevel = 3;
         this.libraryPieChart();
       }
@@ -155,32 +155,25 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.sumDur = this.processStatisticsData.allDuration;
     this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.pidData),
+      data: this.getIOTierPieChartData(this.pidData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                                <div>ProcessName:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
-      },
-      angleClick: (it): void => {
+      tip: this.getTip(),
+      angleClick: (ioTierPieItem): void => {
         // @ts-ignore
-        if (it.tableName != 'other') {
-          this.ioTierProcessLevelClickEvent(it);
+        if (ioTierPieItem.tableName != 'other') {
+          this.ioTierProcessLevelClickEvent(ioTierPieItem);
         }
       },
-      hoverHandler: (data): void => {
-        if (data) {
-          this.tableProcess!.setCurrentHover(data);
+      hoverHandler: (ioTierPieData): void => {
+        if (ioTierPieData) {
+          this.ioTierTableProcess!.setCurrentHover(ioTierPieData);
         } else {
-          this.tableProcess!.mouseOut();
+          this.ioTierTableProcess!.mouseOut();
         }
       },
       interactions: [
@@ -189,14 +182,14 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableProcess!.addEventListener('row-hover', (event) => {
+    this.ioTierTableProcess!.addEventListener('row-hover', (event) => {
       // @ts-ignore
-      let ioProcessData = event.detail;
-      if (ioProcessData.data) {
-        let processData = ioProcessData.data;
+      let ioTierProcessData = event.detail;
+      if (ioTierProcessData.data) {
+        let processData = ioTierProcessData.data;
         processData.isHover = true;
-        if (ioProcessData.callBack) {
-          ioProcessData.callBack(true);
+        if (ioTierProcessData.callBack) {
+          ioTierProcessData.callBack(true);
         }
       }
       this.iOTierStatisticsAnalysisPie?.showHover();
@@ -205,16 +198,16 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
     this.tabName!.textContent = 'Statistic By Process AllDuration';
     this.pidData.unshift(this.processStatisticsData);
-    this.tableProcess!.recycleDataSource = this.pidData;
+    this.ioTierTableProcess!.recycleDataSource = this.pidData;
     // @ts-ignore
     this.pidData.shift(this.processStatisticsData);
     this.currentLevelData = this.pidData;
-    this.tableProcess?.reMeauseHeight();
-    this.tableProcess!.addEventListener('column-click', (evt) => {
+    this.ioTierTableProcess?.reMeauseHeight();
+    this.ioTierTableProcess!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
-    this.tableProcess!.addEventListener('row-click', (evt) => {
+    this.ioTierTableProcess!.addEventListener('row-click', (evt) => {
       // @ts-ignore
       let data = evt.detail.data;
       if (data.tableName !== '' && data.duration !== 0) {
@@ -225,9 +218,9 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   ioTierProcessLevelClickEvent(it: any): void {
     this.clearData();
     this.iOTierStatisticsAnalysisBack!.style.visibility = 'visible';
-    this.tableProcess!.style.display = 'none';
+    this.ioTierTableProcess!.style.display = 'none';
     this.tableType!.style.display = 'grid';
-    this.tableProcess!.setAttribute('hideDownload', '');
+    this.ioTierTableProcess!.setAttribute('hideDownload', '');
     this.tableType?.removeAttribute('hideDownload');
     this.getIOTierType(it);
     this.processName = it.tableName;
@@ -245,19 +238,14 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         type: 'outer',
       },
       tip: (obj): string => {
-        return `<div>
-                                <div>Type:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
+        return this.getIoTierTip(obj);
       },
       angleClick: (it): void => {
         this.ioTierTypeLevelClickEvent(it);
       },
-      hoverHandler: (data): void => {
-        if (data) {
-          this.tableType!.setCurrentHover(data);
+      hoverHandler: (ioTierData): void => {
+        if (ioTierData) {
+          this.tableType!.setCurrentHover(ioTierData);
         } else {
           this.tableType!.mouseOut();
         }
@@ -304,9 +292,9 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   ioTierTypeLevelClickEvent(it: any): void {
     this.clearData();
     this.tableType!.style.display = 'none';
-    this.tableThread!.style.display = 'grid';
+    this.ioTierTableThread!.style.display = 'grid';
     this.tableType!.setAttribute('hideDownload', '');
-    this.tableThread?.removeAttribute('hideDownload');
+    this.ioTierTableThread?.removeAttribute('hideDownload');
     this.getIOTierThread(it);
     this.typeName = it.tableName;
     this.iOTierStatisticsAnalysisPie?.hideTip();
@@ -317,7 +305,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.sumDur = this.threadStatisticsData.allDuration;
     this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.threadData),
+      data: this.getIOTierPieChartData(this.threadData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
@@ -325,12 +313,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         type: 'outer',
       },
       tip: (obj): string => {
-        return `<div>
-                                <div>ThreadName:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
+        return this.getIoTierTip(obj);
       },
       angleClick: (it): void => {
         // @ts-ignore
@@ -340,9 +323,9 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       },
       hoverHandler: (data): void => {
         if (data) {
-          this.tableThread!.setCurrentHover(data);
+          this.ioTierTableThread!.setCurrentHover(data);
         } else {
-          this.tableThread!.mouseOut();
+          this.ioTierTableThread!.mouseOut();
         }
       },
       interactions: [
@@ -351,7 +334,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableThread!.addEventListener('row-hover', (evt) => {
+    this.ioTierTableThread!.addEventListener('row-hover', (evt) => {
       // @ts-ignore
       let ioThreadData = evt.detail;
       if (ioThreadData.data) {
@@ -367,16 +350,16 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     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.ioTierTableThread!.recycleDataSource = this.threadData;
     // @ts-ignore
     this.threadData.shift(this.threadStatisticsData);
     this.currentLevelData = this.threadData;
-    this.tableThread?.reMeauseHeight();
-    this.tableThread!.addEventListener('column-click', (evt) => {
+    this.ioTierTableThread?.reMeauseHeight();
+    this.ioTierTableThread!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
-    this.tableThread!.addEventListener('row-click', (evt) => {
+    this.ioTierTableThread!.addEventListener('row-click', (evt) => {
       // @ts-ignore
       let data = evt.detail.data;
       if (data.tableName !== '' && data.duration !== 0) {
@@ -384,13 +367,21 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       }
     });
   }
+  private getIoTierTip(obj: { obj: { tableName: any; durFormat: any; percent: any; }; }) {
+    return `<div>
+                                <div>ThreadName:${ obj.obj.tableName }</div>
+                                <div>Duration:${ obj.obj.durFormat }</div>
+                                <div>Percent:${ obj.obj.percent }%</div> 
+                            </div>
+                                `;
+  }
   ioTierThreadLevelClickEvent(it: any): void {
     this.clearData();
     this.iOTierStatisticsAnalysisBack!.style.visibility = 'visible';
-    this.tableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'grid';
-    this.tableThread!.setAttribute('hideDownload', '');
-    this.tableSo?.removeAttribute('hideDownload');
+    this.ioTierTableThread!.style.display = 'none';
+    this.ioTierTableSo!.style.display = 'grid';
+    this.ioTierTableThread!.setAttribute('hideDownload', '');
+    this.ioTierTableSo?.removeAttribute('hideDownload');
     this.getIOTierSo(it);
     this.threadName = it.tableName;
     this.iOTierStatisticsAnalysisPie?.hideTip();
@@ -402,32 +393,32 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.sumDur = this.libStatisticsData.allDuration;
     this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.soData),
+      data: this.getIOTierPieChartData(this.soData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
+      tip: (ioTierObj): string => {
         return `<div>
-                                <div>Library:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
+                                <div>Library:${ ioTierObj.obj.tableName }</div>
+                                <div>Duration:${ ioTierObj.obj.durFormat }</div>
+                                <div>Percent:${ ioTierObj.obj.percent }%</div> 
                             </div>
                                 `;
       },
-      angleClick: (it): void => {
+      angleClick: (ioTierBean): void => {
         // @ts-ignore
-        if (it.tableName != 'other') {
-          this.ioTierSoLevelClickEvent(it);
+        if (ioTierBean.tableName != 'other') {
+          this.ioTierSoLevelClickEvent(ioTierBean);
         }
       },
       hoverHandler: (data): void => {
         if (data) {
-          this.tableSo!.setCurrentHover(data);
+          this.ioTierTableSo!.setCurrentHover(data);
         } else {
-          this.tableSo!.mouseOut();
+          this.ioTierTableSo!.mouseOut();
         }
       },
       interactions: [
@@ -436,14 +427,14 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableSo!.addEventListener('row-hover', (evt) => {
+    this.ioTierTableSo!.addEventListener('row-hover', (evt) => {
       // @ts-ignore
-      let ioSoData = evt.detail;
-      if (ioSoData.data) {
-        let soData = ioSoData.data;
+      let ioTierSoData = evt.detail;
+      if (ioTierSoData.data) {
+        let soData = ioTierSoData.data;
         soData.isHover = true;
-        if (ioSoData.callBack) {
-          ioSoData.callBack(true);
+        if (ioTierSoData.callBack) {
+          ioTierSoData.callBack(true);
         }
       }
       this.iOTierStatisticsAnalysisPie?.showHover();
@@ -453,16 +444,16 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       this.processName + ' / ' + this.typeName + ' / ' + this.threadName;
     this.tabName!.textContent = 'Statistic By Library AllDuration';
     this.soData.unshift(this.libStatisticsData);
-    this.tableSo!.recycleDataSource = this.soData;
+    this.ioTierTableSo!.recycleDataSource = this.soData;
     // @ts-ignore
     this.soData.shift(this.libStatisticsData);
     this.currentLevelData = this.soData;
-    this.tableSo?.reMeauseHeight();
-    this.tableSo!.addEventListener('column-click', (evt) => {
+    this.ioTierTableSo?.reMeauseHeight();
+    this.ioTierTableSo!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
-    this.tableSo!.addEventListener('row-click', (evt) => {
+    this.ioTierTableSo!.addEventListener('row-click', (evt) => {
       // @ts-ignore
       let data = evt.detail.data;
       if (data.tableName !== '' && data.duration !== 0) {
@@ -473,9 +464,9 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   ioTierSoLevelClickEvent(it: any): void {
     this.clearData();
     this.iOTierStatisticsAnalysisBack!.style.visibility = 'visible';
-    this.tableSo!.style.display = 'none';
+    this.ioTierTableSo!.style.display = 'none';
     this.tableFunction!.style.display = 'grid';
-    this.tableSo!.setAttribute('hideDownload', '');
+    this.ioTierTableSo!.setAttribute('hideDownload', '');
     this.tableFunction?.removeAttribute('hideDownload');
     this.getIOTierFunction(it);
     this.iOTierStatisticsAnalysisPie?.hideTip();
@@ -485,63 +476,63 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   sortByColumn(column: string, ioSort: number): void {
     this.sortColumn = column;
     this.sortType = ioSort;
-    let currentTable: LitTable | null | undefined;
+    let ioTierCurrentTable: LitTable | null | undefined;
     switch (this.currentLevel) {
       case 0:
-        currentTable = this.tableProcess;
+        ioTierCurrentTable = this.ioTierTableProcess;
         break;
       case 1:
-        currentTable = this.tableType;
+        ioTierCurrentTable = this.tableType;
         break;
       case 2:
-        currentTable = this.tableThread;
+        ioTierCurrentTable = this.ioTierTableThread;
         break;
       case 3:
-        currentTable = this.tableSo;
+        ioTierCurrentTable = this.ioTierTableSo;
         break;
       case 4:
-        currentTable = this.tableFunction;
+        ioTierCurrentTable = this.tableFunction;
         break;
     }
-    if (!currentTable) {
+    if (!ioTierCurrentTable) {
       return;
     }
     if (ioSort === 0) {
-      let ioArr = [...this.currentLevelData];
+      let sortZeroIoArr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          ioArr.unshift(this.processStatisticsData);
+          sortZeroIoArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          ioArr.unshift(this.typeStatisticsData);
+          sortZeroIoArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          ioArr.unshift(this.threadStatisticsData);
+          sortZeroIoArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          ioArr.unshift(this.libStatisticsData);
+          sortZeroIoArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          ioArr.unshift(this.functionStatisticsData);
+          sortZeroIoArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = ioArr;
+      ioTierCurrentTable!.recycleDataSource = sortZeroIoArr;
     } else {
-      let ioArr = [...this.currentLevelData];
+      let sortIoArr = [...this.currentLevelData];
       if (column === 'tableName') {
-        currentTable!.recycleDataSource = ioArr.sort((a, b) => {
+          ioTierCurrentTable!.recycleDataSource = sortIoArr.sort((firstIOElement, secondIOElement) => {
           if (ioSort === 1) {
-            if (a.tableName > b.tableName) {
+            if (firstIOElement.tableName > secondIOElement.tableName) {
               return 1;
-            } else if (a.tableName === b.tableName) {
+            } else if (firstIOElement.tableName === secondIOElement.tableName) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.tableName > a.tableName) {
+            if (secondIOElement.tableName > firstIOElement.tableName) {
               return 1;
-            } else if (a.tableName === b.tableName) {
+            } else if (firstIOElement.tableName === secondIOElement.tableName) {
               return 0;
             } else {
               return -1;
@@ -549,28 +540,28 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
           }
         });
       } else if (column === 'durFormat' || column === 'percent') {
-        currentTable!.recycleDataSource = ioArr.sort((a, b) => {
+        ioTierCurrentTable!.recycleDataSource = sortIoArr.sort((a, b) => {
           return ioSort === 1 ? a.duration - b.duration : b.duration - a.duration;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          ioArr.unshift(this.processStatisticsData);
+          sortIoArr.unshift(this.processStatisticsData);
           break;
         case 1:
-          ioArr.unshift(this.typeStatisticsData);
+          sortIoArr.unshift(this.typeStatisticsData);
           break;
         case 2:
-          ioArr.unshift(this.threadStatisticsData);
+          sortIoArr.unshift(this.threadStatisticsData);
           break;
         case 3:
-          ioArr.unshift(this.libStatisticsData);
+          sortIoArr.unshift(this.libStatisticsData);
           break;
         case 4:
-          ioArr.unshift(this.functionStatisticsData);
+          sortIoArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = ioArr;
+      ioTierCurrentTable!.recycleDataSource = sortIoArr;
     }
   }
   getIOTierProcess(result: Array<any>): void {
@@ -595,23 +586,22 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     }
     this.pidData = [];
     ioMap.forEach((value: Array<any>, key: string) => {
-      let dur = 0;
+      let ioPidDataDur = 0;
       let pName = '';
       for (let item of value) {
         pName = item.processName =
           item.processName === null || item.processName === undefined
             ? `Process(${ item.pid })`
             : `${ item.processName }(${ item.pid })`;
-        dur += item.dur;
+        ioPidDataDur += item.dur;
       }
-      const pidData = {
+      this.pidData.push({
         tableName: pName,
         pid: key,
-        percent: ((dur / allDur) * 100).toFixed(2),
-        durFormat: Utils.getProbablyTime(dur),
-        duration: dur,
-      };
-      this.pidData.push(pidData);
+        percent: ((ioPidDataDur / allDur) * 100).toFixed(2),
+        durFormat: Utils.getProbablyTime(ioPidDataDur),
+        duration: ioPidDataDur,
+      });
     });
     this.pidData.sort((a, b) => b.duration - a.duration);
     this.processStatisticsData = this.totalDurationData(allDur);
@@ -620,12 +610,12 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.processPieChart();
     new ResizeObserver(() => {
       if (this.parentElement?.clientHeight != 0) {
-        this.tableProcess!.style.height = this.parentElement!.clientHeight - 50 + 'px';
-        this.tableProcess?.reMeauseHeight();
-        this.tableThread!.style.height = this.parentElement!.clientHeight - 50 + 'px';
-        this.tableThread?.reMeauseHeight();
-        this.tableSo!.style.height = this.parentElement!.clientHeight - 50 + 'px';
-        this.tableSo?.reMeauseHeight();
+        this.ioTierTableProcess!.style.height = this.parentElement!.clientHeight - 50 + 'px';
+        this.ioTierTableProcess?.reMeauseHeight();
+        this.ioTierTableThread!.style.height = this.parentElement!.clientHeight - 50 + 'px';
+        this.ioTierTableThread?.reMeauseHeight();
+        this.ioTierTableSo!.style.height = this.parentElement!.clientHeight - 50 + 'px';
+        this.ioTierTableSo?.reMeauseHeight();
         this.tableFunction!.style.height = this.parentElement!.clientHeight - 50 + 'px';
         this.tableFunction?.reMeauseHeight();
         this.tableType!.style.height = this.parentElement!.clientHeight - 50 + 'px';
@@ -635,7 +625,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   }
   getIOTierType(item: any): void {
     this.progressEL!.loading = true;
-    let typeMap = new Map<number, Array<number | string>>();
+    let ioTypeMap = new Map<number, Array<number | string>>();
     let pid = item.pid;
     let allDur = 0;
     if (!this.processData || this.processData.length === 0) {
@@ -646,21 +636,21 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         continue;
       }
       allDur += processItem.dur;
-      if (typeMap.has(processItem.type)) {
-        typeMap.get(processItem.type)?.push(processItem);
+      if (ioTypeMap.has(processItem.type)) {
+        ioTypeMap.get(processItem.type)?.push(processItem);
       } else {
         let itemArray = new Array<number | string>();
         itemArray.push(processItem);
-        typeMap.set(processItem.type, itemArray);
+        ioTypeMap.set(processItem.type, itemArray);
       }
     }
     this.typeData = [];
-    typeMap.forEach((value: Array<any>, key: number) => {
+    ioTypeMap.forEach((value: Array<any>, key: number) => {
       let dur = 0;
-      for (let item of value) {
-        dur += item.dur;
+      for (let ioItem of value) {
+        dur += ioItem.dur;
       }
-      const typeData = {
+      const ioTypeData = {
         tableName: this.typeIdToString(key),
         pid: item.pid,
         type: key,
@@ -668,7 +658,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.typeData.push(typeData);
+      this.typeData.push(ioTypeData);
     });
     this.typeData.sort((a, b) => b.duration - a.duration);
     this.typeStatisticsData = this.totalDurationData(allDur);
@@ -782,7 +772,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
   }
   getIOTierFunction(item: any): void {
     this.progressEL!.loading = true;
-    this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function AllDuration';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.io-tier-subheading')!.textContent = 'Statistic By Function AllDuration';
     let tid = item.tid;
     let pid = item.pid;
     let type = item.type;
@@ -840,21 +830,14 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     this.sumDur = this.functionStatisticsData.allDuration;
     this.iOTierStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.functionData),
+      data: this.getIOTierPieChartData(this.functionData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                                    <div>Function:${ obj.obj.tableName }</div>
-                                    <div>Duration:${ obj.obj.durFormat }</div>
-                                    <div>percent:${ obj.obj.percent }</div>
-                                        </div>
-                                                `;
-      },
+      tip: this.getTip(),
       hoverHandler: (data): void => {
         if (data) {
           this.tableFunction!.setCurrentHover(data);
@@ -892,19 +875,31 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
+
+  private getTip() {
+    return (obj: { obj: { tableName: any; durFormat: any; percent: any; }; }): string => {
+      return `<div>
+                                    <div>Function:${obj.obj.tableName}</div>
+                                    <div>Duration:${obj.obj.durFormat}</div>
+                                    <div>percent:${obj.obj.percent}</div>
+                                        </div>
+                                                `;
+    };
+  }
+
   typeIdToString(type: number): string {
-    let releaseType: string;
+    let ioTierReleaseType: string;
     if (type === 1) {
-      releaseType = 'DATA_READ';
+      ioTierReleaseType = 'DATA_READ';
     } else if (type === 2) {
-      releaseType = 'DATA_WRITE';
+      ioTierReleaseType = 'DATA_WRITE';
     } else if (type === 3) {
-      releaseType = 'METADATA_READ';
+      ioTierReleaseType = 'METADATA_READ';
     } else if (type === 4) {
-      releaseType = 'METADATA_WRITE';
+      ioTierReleaseType = 'METADATA_WRITE';
     }
     // @ts-ignore
-    return releaseType;
+    return ioTierReleaseType;
   }
   totalDurationData(duration: number): {
     durFormat: string; percent: string; tableName: string;
@@ -920,9 +915,9 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
     };
     return allDuration;
   }
-  getPieChartData(res: any[]): unknown[] {
+  getIOTierPieChartData(res: any[]): unknown[] {
     if (res.length > 20) {
-      let pieChartArr: string[] = [];
+      let IOTierPieChartArr: string[] = [];
       let other: any = {
         tableName: 'other',
         duration: 0,
@@ -931,20 +926,20 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
       };
       for (let i = 0 ; i < res.length ; i++) {
         if (i < 19) {
-          pieChartArr.push(res[i]);
+          IOTierPieChartArr.push(res[i]);
         } else {
           other.duration += res[i].duration;
           other.durFormat = Utils.getProbablyTime(other.duration);
           other.percent = ((other.duration / this.sumDur) * 100).toFixed(2);
         }
       }
-      pieChartArr.push(other);
-      return pieChartArr;
+      IOTierPieChartArr.push(other);
+      return IOTierPieChartArr;
     }
     return res;
   }
 
-  getDataByWorker(args: any[], handler: Function): void {
+  getIoTierDataByWorker(args: any[], handler: Function): void {
     procedurePool.submitWithName(
       'logic0',
       'fileSystem-action',
@@ -964,23 +959,23 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
             display: flex;
             flex-direction: column;
         }
-        #chart-pie{
+        #io-tier-chart-pie{
             height: 300px;
         }
-        .table-box{
+        .io-tier-table-box{
             width: 60%;
             border-left: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
             padding: 10px;
         }
-        .go-back{
+        .io-tier-go-back{
             display:flex;
             align-items: center;
             cursor: pointer;
             margin-left: 20px;
             visibility: hidden;
         }
-        .back-box{
+        .io-tier-back-box{
             background-color: var(--bark-expansion,#0C65D1);
             border-radius: 5px;
             color: #fff;
@@ -991,7 +986,7 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
             justify-content: center;
             align-items: center;
         }
-        .subheading{
+        .io-tier-subheading{
             font-weight: bold;
             text-align: center;
         }
@@ -1007,38 +1002,38 @@ export class TabPaneIOTierStatisticsAnalysis extends BaseElement {
             <lit-progress-bar class="progress"></lit-progress-bar>
                      <div id="left_table" style="width: 40%;height:auto;">
                          <div style="display: flex;margin-bottom: 10px">
-                           <div class="go-back">
-                              <div class="back-box">
+                           <div class="io-tier-go-back">
+                              <div class="io-tier-back-box">
                                   <lit-icon name="arrowleft"></lit-icon>
                               </div>
                            </div>
                          <div class="title"></div>
                         </div>
-                         <div class="subheading"></div>                       
-                         <lit-chart-pie  id="chart-pie"></lit-chart-pie>     
+                         <div class="io-tier-subheading"></div>                       
+                         <lit-chart-pie  id="io-tier-chart-pie"></lit-chart-pie>     
                      </div>
-                     <div class="table-box" style="height:auto;overflow: auto">
+                     <div class="io-tier-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="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>
-                    <lit-table id="tb-type-usage" style="max-height:565px;min-height: 350px"hideDownload>
+                    <lit-table id="tb-type-usage" class="io-analysis" style="max-height:565px;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Type" 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>
-                    <lit-table id="tb-thread-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                    <lit-table id="tb-thread-usage" class="io-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="ThreadName" 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>
-                     <lit-table id="tb-so-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                     <lit-table id="tb-so-usage" class="io-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Library" 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>
-                    <lit-table id="tb-function-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                    <lit-table id="tb-function-usage" class="io-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Function" 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>
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 264de8b06858ffc2139c2e8aaf294fb995f8193d..724400d5643b74f0c3367bb162d69b60820fc3ea 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneIoCompletionTimes.ts
@@ -355,7 +355,7 @@ export class TabPaneIoCompletionTimes extends BaseElement {
                             </lit-table-column>
                         </lit-table>
                     </div>
-                    <lit-slicer-track ></lit-slicer-track>
+                    <lit-slicer-track class="io-completion-slicer-tracker"></lit-slicer-track>
                     <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>
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 68f57d9951e9556895e1a4ab737532261de94e8d..9fd7245cceb6b614fb4fb7161ad5e277cfc53155 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVMEvents.ts
@@ -278,11 +278,6 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
   initHtml(): string {
     return `
     <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         .vm-event-loading{
             bottom: 0;
             position: absolute;
@@ -292,6 +287,11 @@ export class TabPaneVirtualMemoryEvents extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
+        :host{
+            padding: 10px 10px 0 10px;
+            display: flex;
+            flex-direction: column;
+        }
         .vm-event-progress{
             bottom: 33px;
             position: absolute;
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 71d2085c962b838635da065a02d98457535987b0..1ae5406f2f1c5dc0f5783e385245a3b7591df4a4 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatistics.ts
@@ -268,11 +268,6 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         .vm-stat-progress{
             bottom: 5px;
             position: absolute;
@@ -280,6 +275,11 @@ export class TabPaneVirtualMemoryStatistics extends BaseElement {
             left: 0;
             right: 0;
         }
+        :host{
+            display: flex;
+            flex-direction: column;
+            padding: 10px 10px 0 10px;
+        }
         .vm-stat-loading{
             bottom: 0;
             position: absolute;
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 4579b4f8e154043a865c77d0eb91c5fc4fbe77b3..7fb924b881d06effbc79d338fe2efb481d6a4e6b 100644
--- a/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.ts
@@ -79,7 +79,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       ) +
       '  ms';
     this.vmStatisticsAnalysisProgressEL!.loading = true;
-    this.getDataByWorker(
+    this.getVmDataByWorker(
       [
         {
           funcName: 'setSearchValue',
@@ -97,15 +97,15 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
   }
   initElements(): void {
     this.vmStatisticsAnalysisRange = this.shadowRoot?.querySelector('#time-range');
-    this.vmStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.vmStatisticsAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#vm-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.vmStatisticsAnalysisProgressEL = this.shadowRoot?.querySelector('.progress') as LitProgressBar;
+    this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.vm-go-back');
+    this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.vm-subheading');
+    this.vmStatisticsAnalysisProgressEL = this.shadowRoot?.querySelector('.vm-progress') as LitProgressBar;
     this.goBack();
   }
   clearData(): void {
@@ -155,21 +155,14 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     this.sumDur = this.processStatisticsData.allDuration;
     this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.vmStatisticsAnalysisPidData),
+      data: this.getVmPieChartData(this.vmStatisticsAnalysisPidData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                                <div>ProcessName:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
-      },
+      tip: this.getVmTip(),
       angleClick: (it): void => {
         // @ts-ignore
         if (it.tableName != 'other') {
@@ -222,6 +215,18 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       }
     });
   }
+
+  private getVmTip() {
+    return (obj: { obj: { tableName: any; durFormat: any; percent: any; }; }): string => {
+      return `<div>
+                                <div>ProcessName:${obj.obj.tableName}</div>
+                                <div>Duration:${obj.obj.durFormat}</div>
+                                <div>Percent:${obj.obj.percent}%</div> 
+                            </div>
+                                `;
+    };
+  }
+
   vmProcessLevelClickEvent(it: any): void {
     this.clearData();
     this.back!.style.visibility = 'visible';
@@ -244,14 +249,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                                <div>Type:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
-      },
+      tip: this.getVmTip(),
       angleClick: (it): void => {
         this.vmTypeLevelClickEvent(it);
       },
@@ -317,21 +315,14 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     this.sumDur = this.threadStatisticsData.allDuration;
     this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.vmStatisticsAnalysisThreadData),
+      data: this.getVmPieChartData(this.vmStatisticsAnalysisThreadData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                                <div>ThreadName:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
-                            </div>
-                                `;
-      },
+      tip: this.getVmTip(),
       angleClick: (it): void => {
         // @ts-ignore
         if (it.tableName != 'other') {
@@ -384,6 +375,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       }
     });
   }
+
   vmThreadLevelClickEvent(it: any): void {
     this.clearData();
     this.back!.style.visibility = 'visible';
@@ -402,18 +394,18 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     this.sumDur = this.libStatisticsData.allDuration;
     this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.vmStatisticsAnalysisSoData),
+      data: this.getVmPieChartData(this.vmStatisticsAnalysisSoData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
+      tip: (vmLibraryObj): string => {
         return `<div>
-                                <div>Library:${ obj.obj.tableName }</div>
-                                <div>Duration:${ obj.obj.durFormat }</div>
-                                <div>percent:${ obj.obj.percent }%</div> 
+                                <div>Library:${ vmLibraryObj.obj.tableName }</div>
+                                <div>Duration:${ vmLibraryObj.obj.durFormat }</div>
+                                <div>percent:${ vmLibraryObj.obj.percent }%</div> 
                             </div>
                                 `;
       },
@@ -527,21 +519,21 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       }
       vmsCurrentTable!.recycleDataSource = vmsArr;
     } else {
-      let vmsArr = [...this.currentLevelData];
+      let vmsArray = [...this.currentLevelData];
       if (column === 'tableName') {
-        vmsCurrentTable!.recycleDataSource = vmsArr.sort((a, b) => {
+        vmsCurrentTable!.recycleDataSource = vmsArray.sort((firstVMElement, secondVMElement) => {
           if (vmsSort === 1) {
-            if (a.tableName > b.tableName) {
+            if (firstVMElement.tableName > secondVMElement.tableName) {
               return 1;
-            } else if (a.tableName === b.tableName) {
+            } else if (firstVMElement.tableName === secondVMElement.tableName) {
               return 0;
             } else {
               return -1;
             }
           } else {
-            if (b.tableName > a.tableName) {
+            if (secondVMElement.tableName > firstVMElement.tableName) {
               return 1;
-            } else if (a.tableName === b.tableName) {
+            } else if (firstVMElement.tableName === secondVMElement.tableName) {
               return 0;
             } else {
               return -1;
@@ -549,28 +541,28 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
           }
         });
       } else if (column === 'durFormat' || column === 'percent') {
-        vmsCurrentTable!.recycleDataSource = vmsArr.sort((a, b) => {
+        vmsCurrentTable!.recycleDataSource = vmsArray.sort((a, b) => {
           return vmsSort === 1 ? a.duration - b.duration : b.duration - a.duration;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          vmsArr.unshift(this.processStatisticsData);
+          vmsArray.unshift(this.processStatisticsData);
           break;
         case 1:
-          vmsArr.unshift(this.typeStatisticsData);
+          vmsArray.unshift(this.typeStatisticsData);
           break;
         case 2:
-          vmsArr.unshift(this.threadStatisticsData);
+          vmsArray.unshift(this.threadStatisticsData);
           break;
         case 3:
-          vmsArr.unshift(this.libStatisticsData);
+          vmsArray.unshift(this.libStatisticsData);
           break;
         case 4:
-          vmsArr.unshift(this.functionStatisticsData);
+          vmsArray.unshift(this.functionStatisticsData);
           break;
       }
-      vmsCurrentTable!.recycleDataSource = vmsArr;
+      vmsCurrentTable!.recycleDataSource = vmsArray;
     }
   }
   getVirtualMemoryProcess(result: Array<any>): void {
@@ -596,23 +588,22 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     }
     this.vmStatisticsAnalysisPidData = [];
     vmMap.forEach((value: Array<any>, key: string) => {
-      let dur = 0;
+      let vmPidDataDur = 0;
       let pName = '';
       for (let item of value) {
         pName = item.processName =
           item.processName === null || item.processName === undefined
             ? `Process(${ item.pid })`
             : `${ item.processName }(${ item.pid })`;
-        dur += item.dur;
+        vmPidDataDur += item.dur;
       }
-      const pidData = {
+      this.vmStatisticsAnalysisPidData.push({
         tableName: pName,
         pid: key,
-        percent: ((dur / allDur) * 100).toFixed(2),
-        durFormat: Utils.getProbablyTime(dur),
-        duration: dur,
-      };
-      this.vmStatisticsAnalysisPidData.push(pidData);
+        percent: ((vmPidDataDur / allDur) * 100).toFixed(2),
+        durFormat: Utils.getProbablyTime(vmPidDataDur),
+        duration: vmPidDataDur,
+      });
     });
     this.vmStatisticsAnalysisPidData.sort((a, b) => b.duration - a.duration);
     this.processStatisticsData = this.totalDurationData(allDur);
@@ -636,7 +627,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
   }
   getVirtualMemoryType(item: any): void {
     this.vmStatisticsAnalysisProgressEL!.loading = true;
-    let typeMap = new Map<number, Array<number | string>>();
+    let vmTypeMap = new Map<number, Array<number | string>>();
     let pid = item.pid;
     let allDur = 0;
     if (!this.vmStatisticsAnalysisProcessData || this.vmStatisticsAnalysisProcessData.length === 0) {
@@ -647,21 +638,21 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         continue;
       }
       allDur += vmsItem.dur;
-      if (typeMap.has(vmsItem.type)) {
-        typeMap.get(vmsItem.type)?.push(vmsItem);
+      if (vmTypeMap.has(vmsItem.type)) {
+        vmTypeMap.get(vmsItem.type)?.push(vmsItem);
       } else {
         let itemArray = new Array<number | string>();
         itemArray.push(vmsItem);
-        typeMap.set(vmsItem.type, itemArray);
+        vmTypeMap.set(vmsItem.type, itemArray);
       }
     }
     this.vmStatisticsAnalysisTypeData = [];
-    typeMap.forEach((value: Array<any>, key: number) => {
+    vmTypeMap.forEach((value: Array<any>, key: number) => {
       let dur = 0;
-      for (let item of value) {
-        dur += item.dur;
+      for (let vmItem of value) {
+        dur += vmItem.dur;
       }
-      const typeData = {
+      const vmTypeData = {
         tableName: this.typeIdToString(key),
         pid: item.pid,
         type: key,
@@ -669,7 +660,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         durFormat: Utils.getProbablyTime(dur),
         duration: dur,
       };
-      this.vmStatisticsAnalysisTypeData.push(typeData);
+      this.vmStatisticsAnalysisTypeData.push(vmTypeData);
     });
     this.vmStatisticsAnalysisTypeData.sort((a, b) => b.duration - a.duration);
     this.typeStatisticsData = this.totalDurationData(allDur);
@@ -701,10 +692,10 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     }
     this.vmStatisticsAnalysisThreadData = [];
     threadMap.forEach((value: Array<any>, key: string) => {
-      let dur = 0;
+      let vmThreadDur = 0;
       let tName = '';
       for (let item of value) {
-        dur += item.dur;
+        vmThreadDur += item.dur;
         tName = item.threadName =
           item.threadName === null || item.threadName === undefined ? `Thread(${ item.tid })` : `${ item.threadName }`;
       }
@@ -713,9 +704,9 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
         pid: item.pid,
         type: item.type,
         tid: key,
-        percent: ((dur / allDur) * 100).toFixed(2),
-        durFormat: Utils.getProbablyTime(dur),
-        duration: dur,
+        percent: ((vmThreadDur / allDur) * 100).toFixed(2),
+        durFormat: Utils.getProbablyTime(vmThreadDur),
+        duration: vmThreadDur,
       };
       this.vmStatisticsAnalysisThreadData.push(threadData);
     });
@@ -784,7 +775,7 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
 
   getVirtualMemoryFunction(item: any): void {
     this.vmStatisticsAnalysisProgressEL!.loading = true;
-    this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function AllDuration';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.vm-subheading')!.textContent = 'Statistic By Function AllDuration';
     let tid = item.tid;
     let pid = item.pid;
     let type = item.type;
@@ -842,24 +833,24 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     this.vmStatisticsAnalysisProgressEL!.loading = false;
     this.vmStatisticsAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.vmStatisticsAnalysisFunctionData),
+      data: this.getVmPieChartData(this.vmStatisticsAnalysisFunctionData),
       angleField: 'duration',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
+      tip: (vmObj): string => {
         return `<div>
-                                    <div>Function:${ obj.obj.tableName }</div>
-                                    <div>Duration:${ obj.obj.durFormat }</div>
-                                    <div>percent:${ obj.obj.percent }</div>
+                                    <div>Function:${ vmObj.obj.tableName }</div>
+                                    <div>Duration:${ vmObj.obj.durFormat }</div>
+                                    <div>percent:${ vmObj.obj.percent }</div>
                                         </div>
                                                 `;
       },
-      hoverHandler: (data): void => {
-        if (data) {
-          this.vmStatisticsAnalysisTableFunction!.setCurrentHover(data);
+      hoverHandler: (vmPieData): void => {
+        if (vmPieData) {
+          this.vmStatisticsAnalysisTableFunction!.setCurrentHover(vmPieData);
         } else {
           this.vmStatisticsAnalysisTableFunction!.mouseOut();
         }
@@ -895,28 +886,26 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
     });
   }
   typeIdToString(type: number): string {
-    let releaseType: string;
+    let vmReleaseType: string;
     if (type === 1) {
-      releaseType = 'File Backed In';
+      vmReleaseType = 'File Backed In';
     } else if (type === 7) {
-      releaseType = 'Copy On Writer';
+      vmReleaseType = 'Copy On Writer';
     }
     // @ts-ignore
-    return releaseType;
+    return vmReleaseType;
   }
   totalDurationData(duration: number): { durFormat: string; percent: string; tableName: string; duration: number; } {
-    let allDuration;
-    allDuration = {
+    return {
       durFormat: Utils.getProbablyTime(duration),
       percent: ((duration / duration) * 100).toFixed(2),
       tableName: '',
       duration: 0,
     };
-    return allDuration;
   }
-  getPieChartData(vmRes: any[]): unknown[] {
+  getVmPieChartData(vmRes: any[]): unknown[] {
     if (vmRes.length > 20) {
-      let pieChartArr: string[] = [];
+      let vmPieChartArr: string[] = [];
       let other: any = {
         tableName: 'other',
         duration: 0,
@@ -925,20 +914,20 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
       };
       for (let i = 0 ; i < vmRes.length ; i++) {
         if (i < 19) {
-          pieChartArr.push(vmRes[i]);
+          vmPieChartArr.push(vmRes[i]);
         } else {
           other.duration += vmRes[i].duration;
           other.durFormat = Utils.getProbablyTime(other.duration);
           other.percent = ((other.duration / this.sumDur) * 100).toFixed(2);
         }
       }
-      pieChartArr.push(other);
-      return pieChartArr;
+      vmPieChartArr.push(other);
+      return vmPieChartArr;
     }
     return vmRes;
   }
 
-  getDataByWorker(args: any[], handler: Function): void {
+  getVmDataByWorker(args: any[], handler: Function): void {
     procedurePool.submitWithName(
       'logic0',
       'fileSystem-action',
@@ -958,23 +947,23 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
             display: flex;
             flex-direction: column;
         }
-        #chart-pie{
+        #vm-chart-pie{
             height: 300px;
         }
-        .table-box{
+        .vm-table-box{
             width: 60%;
             border-left: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
             padding: 10px;
         }
-        .go-back{
+        .vm-go-back{
             display:flex;
             align-items: center;
             cursor: pointer;
             margin-left: 20px;
             visibility: hidden;
         }
-        .back-box{
+        .vm-back-box{
             background-color: var(--bark-expansion,#0C65D1);
             border-radius: 5px;
             color: #fff;
@@ -985,11 +974,11 @@ export class TabPaneVirtualMemoryStatisticsAnalysis extends BaseElement {
             justify-content: center;
             align-items: center;
         }
-        .subheading{
+        .vm-subheading{
             font-weight: bold;
             text-align: center;
         }
-        .progress{
+        .vm-progress{
             position: absolute;
             height: 1px;
             left: 0;
@@ -998,41 +987,41 @@ export class TabPaneVirtualMemoryStatisticsAnalysis 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>
+            <lit-progress-bar class="vm-progress"></lit-progress-bar>
                      <div id="left_table" style="width: 40%;height:auto;">
                          <div style="display: flex;margin-bottom: 10px">
-                           <div class="go-back">
-                              <div class="back-box">
+                           <div class="vm-go-back">
+                              <div class="vm-back-box">
                                   <lit-icon name="arrowleft"></lit-icon>
                               </div>
                            </div>
                          <div class="title"></div>
                         </div>
-                         <div class="subheading"></div>                     
-                         <lit-chart-pie  id="chart-pie"></lit-chart-pie>     
+                         <div class="vm-subheading"></div>                     
+                         <lit-chart-pie  id="vm-chart-pie"></lit-chart-pie>     
                      </div>
-                     <div class="table-box" style="height:auto;overflow: auto">
+                     <div class="vm-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="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>
-                    <lit-table id="tb-type-usage" style="max-height:565px;min-height: 350px"hideDownload>
+                    <lit-table id="tb-type-usage" class="vm-analysis" style="max-height:565px;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Type" 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>
-                    <lit-table id="tb-thread-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                    <lit-table id="tb-thread-usage" class="vm-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="ThreadName" 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>
-                     <lit-table id="tb-so-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                     <lit-table id="tb-so-usage" class="vm-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Library" 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>
-                    <lit-table id="tb-function-usage" style="max-height:565px;display: none;min-height: 350px"hideDownload>
+                    <lit-table id="tb-function-usage" class="vm-analysis" style="max-height:565px;display: none;min-height: 350px"hideDownload>
                         <lit-table-column width="1fr" title="Function" 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>
diff --git a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuClickSelectComparison.ts b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuClickSelectComparison.ts
index c1f4d144362f1a0e532e1b978a734d1c29fc0d4e..5d2995e2a8c129684b9f2ed64ab313ab38ed2dd7 100644
--- a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuClickSelectComparison.ts
+++ b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuClickSelectComparison.ts
@@ -88,23 +88,23 @@ export class TabPaneGpuClickSelectComparison extends TabPaneGpuClickSelect {
     this.selectStamps(dataArray, type);
     this.getComparisonData(dataArray[0].startNs, type);
   }
-  selectStamps(dataList: Array<SnapshotStruct>, type: string): void {
+  selectStamps(gpuSelectComList: Array<SnapshotStruct>, type: string): void {
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
     let option = new LitSelectOption();
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (dataList[0].name) {
-      option.setAttribute('value', dataList[0].name);
+    if (gpuSelectComList[0].name) {
+      option.setAttribute('value', gpuSelectComList[0].name);
     }
-    option.setAttribute('value', dataList[0].name);
-    this.selectEl!.defaultValue = dataList[0].name || '';
-    this.selectEl!.placeholder = dataList[0].name || '';
-    this.selectEl!.dataSource = dataList;
+    option.setAttribute('value', gpuSelectComList[0].name);
+    this.selectEl!.defaultValue = gpuSelectComList[0].name || '';
+    this.selectEl!.placeholder = gpuSelectComList[0].name || '';
+    this.selectEl!.dataSource = gpuSelectComList;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((option) => {
       option.addEventListener('onSelected', async (e) => {
-        for (let f of dataList) {
+        for (let f of gpuSelectComList) {
           if (input.value === f.name) {
             this.getComparisonData(f.startNs, type);
           }
diff --git a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts
index 9d435fe8dfa4027d62ecec0af90832f6e245e194..049c2865f84d8214027f04a8ec43f49924ab9eca 100644
--- a/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts
+++ b/ide/src/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.ts
@@ -14,9 +14,9 @@
  */
 
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
-import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { queryGpuDataByRange } from '../../../../database/SqlLite.js';
+import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { log } from '../../../../../log/Log.js';
 import { getProbablyTime } from '../../../../database/logic-worker/ProcedureLogicWorkerCommon.js';
 import { resizeObserver } from '../SheetUtils.js';
@@ -46,17 +46,17 @@ export class TabPaneGpuTotalBoxSelect extends BaseElement {
   private gpuBoxSource: Array<GpuTotal> = [];
   private currentSelectionParam: SelectionParam | undefined;
 
-  set data(gpuBoxParam: SelectionParam | any) {
-    if (this.currentSelectionParam === gpuBoxParam) {
+  set data(gpuTotalBoxParam: SelectionParam | any) {
+    if (this.currentSelectionParam === gpuTotalBoxParam) {
       return;
     }
-    this.currentSelectionParam = gpuBoxParam;
+    this.currentSelectionParam = gpuTotalBoxParam;
     //@ts-ignore
     this.gpuBoxTbl?.shadowRoot?.querySelector('.table')?.style?.height = this.parentElement!.clientHeight - 45 + 'px';
     this.range!.textContent =
-      'Selected range: ' + ((gpuBoxParam.rightNs - gpuBoxParam.leftNs) / 1000000.0).toFixed(5) + ' ms';
+      'Selected range: ' + ((gpuTotalBoxParam.rightNs - gpuTotalBoxParam.leftNs) / 1000000.0).toFixed(5) + ' ms';
     this.gpuBoxTbl!.loading = true;
-    queryGpuDataByRange(gpuBoxParam.leftNs, gpuBoxParam.rightNs, MemoryConfig.getInstance().snapshotDur).then((result) => {
+    queryGpuDataByRange(gpuTotalBoxParam.leftNs, gpuTotalBoxParam.rightNs, MemoryConfig.getInstance().snapshotDur).then((result) => {
       this.gpuBoxTbl!.loading = false;
       if (result != null && result.length > 0) {
         log('getTabStartups result size : ' + result.length);
@@ -125,15 +125,15 @@ export class TabPaneGpuTotalBoxSelect extends BaseElement {
         `;
   }
 
-  sortByColumn(detail: { key: string; sort: number }): void {
+  sortByColumn(gpuTotalBoxDetail: { key: string; sort: number }): void {
     this.gpuBoxSource.sort((gpuA, gpuB) => {
-      if (detail.sort === 0) {
+      if (gpuTotalBoxDetail.sort === 0) {
         return gpuA.startTs - gpuB.startTs;
       } else {
-        let key = detail.key.replace('Str', '');
+        let key = gpuTotalBoxDetail.key.replace('Str', '');
         let valueA = (gpuA as any)[key];
         let valueB = (gpuB as any)[key];
-        return detail.sort === 1 ? valueA - valueB : valueB - valueA;
+        return gpuTotalBoxDetail.sort === 1 ? valueA - valueB : valueB - valueA;
       }
     });
     this.gpuBoxTbl!.recycleDataSource = this.gpuBoxSource;
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts
index 4d12e93b5cff34198e327452652cd1e2e6fe126f..3f888b81201f29829a77079feec061063285ec5b 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.ts
@@ -33,8 +33,8 @@ export class TabPanePerfAnalysis extends BaseElement {
   private soData!: any[];
   private functionData!: any[];
   private perfTableThread: LitTable | null | undefined;
-  private tableProcess: LitTable | null | undefined;
-  private tableSo: LitTable | null | undefined;
+  private perfTableProcess: LitTable | null | undefined;
+  private perfTableSo: LitTable | null | undefined;
   private tableFunction: LitTable | null | undefined;
   private sumCount: number | undefined | null;
   private perfAnalysisRange: HTMLLabelElement | null | undefined;
@@ -55,16 +55,16 @@ export class TabPanePerfAnalysis extends BaseElement {
   set data(val: SelectionParam) {
     if (val === this.currentSelection) {
       this.pidData.unshift(this.allProcessCount);
-      this.tableProcess!.recycleDataSource = this.pidData;
+      this.perfTableProcess!.recycleDataSource = this.pidData;
       // @ts-ignore
       this.pidData.shift(this.allProcessCount);
       return;
     }
     this.clearData();
     this.currentSelection = val;
-    this.tableProcess!.style.display = 'grid';
+    this.perfTableProcess!.style.display = 'grid';
     this.perfTableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'none';
+    this.perfTableSo!.style.display = 'none';
     this.tableFunction!.style.display = 'none';
     this.back!.style.visibility = 'hidden';
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
@@ -76,50 +76,50 @@ export class TabPanePerfAnalysis extends BaseElement {
     }
   }
   initElements(): void {
+    this.perfAnalysisPie = this.shadowRoot!.querySelector<LitChartPie>('#perf-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.perfTableProcess = this.shadowRoot!.querySelector<LitTable>('#tb-process-usage');
+    this.perfTableSo = this.shadowRoot!.querySelector<LitTable>('#tb-so-usage');
     this.tableFunction = this.shadowRoot!.querySelector<LitTable>('#tb-function-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;
+    this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.perf-go-back');
+    this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.perf-subheading');
+    this.progressEL = this.shadowRoot?.querySelector('.perf-progress') as LitProgressBar;
     this.getBack();
   }
 
   clearData(): void {
     this.perfAnalysisPie!.dataSource = [];
-    this.tableProcess!.recycleDataSource = [];
+    this.perfTableProcess!.recycleDataSource = [];
     this.perfTableThread!.recycleDataSource = [];
-    this.tableSo!.recycleDataSource = [];
+    this.perfTableSo!.recycleDataSource = [];
     this.tableFunction!.recycleDataSource = [];
   }
 
   getBack(): void {
     this.back!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By Thread Count') {
-        this.tableProcess!.style.display = 'grid';
+        this.perfTableProcess!.style.display = 'grid';
         this.perfTableThread!.style.display = 'none';
         this.perfTableThread!.setAttribute('hideDownload', '');
-        this.tableProcess?.removeAttribute('hideDownload');
+        this.perfTableProcess?.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.perfTableThread!.style.display = 'grid';
-        this.tableSo!.style.display = 'none';
-        this.tableSo!.setAttribute('hideDownload', '');
+        this.perfTableSo!.style.display = 'none';
+        this.perfTableSo!.setAttribute('hideDownload', '');
         this.perfTableThread?.removeAttribute('hideDownload');
         this.currentLevel = 1;
         this.currentLevelData = this.threadData;
         this.threadPieChart(this.currentSelection);
       } else if (this.tabName!.textContent === 'Statistic By Function Count') {
-        this.tableSo!.style.display = 'grid';
+        this.perfTableSo!.style.display = 'grid';
         this.tableFunction!.style.display = 'none';
         this.tableFunction!.setAttribute('hideDownload', '');
-        this.tableSo?.removeAttribute('hideDownload');
+        this.perfTableSo?.removeAttribute('hideDownload');
         this.currentLevel = 2;
         this.currentLevelData = this.soData;
         this.libraryPieChart(this.currentSelection);
@@ -131,18 +131,18 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.sumCount = this.allProcessCount.allCount;
     this.perfAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.pidData),
+      data: this.getPerfPieChartData(this.pidData),
       angleField: 'count',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
+      tip: (perfObj): string => {
         return `<div>
-                                <div>Process:${ obj.obj.tableName }</div>
-                                <div>Weight:${ obj.obj.countFormat }</div>
-                                <div>Percent:${ obj.obj.percent }%</div> 
+                                <div>Process:${ perfObj.obj.tableName }</div>
+                                <div>Weight:${ perfObj.obj.countFormat }</div>
+                                <div>Percent:${ perfObj.obj.percent }%</div> 
                             </div>
                                `;
       },
@@ -152,11 +152,11 @@ export class TabPanePerfAnalysis extends BaseElement {
           this.perfProcessLevelClickEvent(it, val);
         }
       },
-      hoverHandler: (data): void => {
-        if (data) {
-          this.tableProcess!.setCurrentHover(data);
+      hoverHandler: (perfAnalyData): void => {
+        if (perfAnalyData) {
+          this.perfTableProcess!.setCurrentHover(perfAnalyData);
         } else {
-          this.tableProcess!.mouseOut();
+          this.perfTableProcess!.mouseOut();
         }
       },
       interactions: [
@@ -165,7 +165,7 @@ export class TabPanePerfAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableProcess!.addEventListener('row-hover', (tblProcessRowHover) => {
+    this.perfTableProcess!.addEventListener('row-hover', (tblProcessRowHover) => {
       // @ts-ignore
       let tblProcessData = tblProcessRowHover.detail;
       if (tblProcessData.data) {
@@ -181,29 +181,29 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = '';
     this.tabName!.textContent = 'Statistic By Process Count';
     this.pidData.unshift(this.allProcessCount);
-    this.tableProcess!.recycleDataSource = this.pidData;
-    this.tableProcess?.reMeauseHeight();
+    this.perfTableProcess!.recycleDataSource = this.pidData;
+    this.perfTableProcess?.reMeauseHeight();
     // @ts-ignore
     this.pidData.shift(this.allProcessCount);
     this.currentLevelData = this.pidData;
-    this.tableProcess!.addEventListener('column-click', (evt) => {
+    this.perfTableProcess!.addEventListener('row-click', (perfTableRowClick) => {
       // @ts-ignore
-      this.sortByColumn(evt.detail.key, evt.detail.sort);
-    });
-    this.tableProcess!.addEventListener('row-click', (evt) => {
-      // @ts-ignore
-      let data = evt.detail.data;
+      let data = perfTableRowClick.detail.data;
       if (data.tableName !== '' && data.count !== 0) {
         this.perfProcessLevelClickEvent(data, val);
       }
     });
+    this.perfTableProcess!.addEventListener('column-click', (perfTableColumnClick) => {
+      // @ts-ignore
+      this.sortByColumn(perfTableColumnClick.detail.key, perfTableColumnClick.detail.sort);
+    });
   }
   perfProcessLevelClickEvent(it: any, val: SelectionParam): void {
     this.clearData();
     this.back!.style.visibility = 'visible';
-    this.tableProcess!.style.display = 'none';
+    this.perfTableProcess!.style.display = 'none';
     this.perfTableThread!.style.display = 'grid';
-    this.tableProcess!.setAttribute('hideDownload', '');
+    this.perfTableProcess!.setAttribute('hideDownload', '');
     this.perfTableThread?.removeAttribute('hideDownload');
     this.getHiperfThread(it, val);
     // @ts-ignore
@@ -225,7 +225,7 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.sumCount = this.allThreadCount.allCount;
     this.perfAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.threadData),
+      data: this.getPerfPieChartData(this.threadData),
       angleField: 'count',
       colorField: 'tableName',
       radius: 1,
@@ -295,9 +295,9 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.clearData();
     this.back!.style.visibility = 'visible';
     this.perfTableThread!.style.display = 'none';
-    this.tableSo!.style.display = 'grid';
+    this.perfTableSo!.style.display = 'grid';
     this.perfTableThread!.setAttribute('hideDownload', '');
-    this.tableSo?.removeAttribute('hideDownload');
+    this.perfTableSo?.removeAttribute('hideDownload');
     this.getHiperfSo(it, val);
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
       // @ts-ignore
@@ -311,7 +311,7 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.sumCount = this.allLibCount.allCount;
     this.perfAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.soData),
+      data: this.getPerfPieChartData(this.soData),
       angleField: 'count',
       colorField: 'tableName',
       radius: 1,
@@ -334,9 +334,9 @@ export class TabPanePerfAnalysis extends BaseElement {
       },
       hoverHandler: (data): void => {
         if (data) {
-          this.tableSo!.setCurrentHover(data);
+          this.perfTableSo!.setCurrentHover(data);
         } else {
-          this.tableSo!.mouseOut();
+          this.perfTableSo!.mouseOut();
         }
       },
       interactions: [
@@ -345,14 +345,14 @@ export class TabPanePerfAnalysis extends BaseElement {
         },
       ],
     };
-    this.tableSo!.addEventListener('row-hover', (tableSoRowHover) => {
+    this.perfTableSo!.addEventListener('row-hover', (tableSoRowHover) => {
       // @ts-ignore
-      let tableSoData = tableSoRowHover.detail;
-      if (tableSoData.data) {
-        let data = tableSoData.data;
+      let perfTableSoData = tableSoRowHover.detail;
+      if (perfTableSoData.data) {
+        let data = perfTableSoData.data;
         data.isHover = true;
-        if (tableSoData.callBack) {
-          tableSoData.callBack(true);
+        if (perfTableSoData.callBack) {
+          perfTableSoData.callBack(true);
         }
       }
       this.perfAnalysisPie?.showHover();
@@ -361,16 +361,16 @@ export class TabPanePerfAnalysis extends BaseElement {
     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.tableSo?.reMeauseHeight();
+    this.perfTableSo!.recycleDataSource = this.soData;
+    this.perfTableSo?.reMeauseHeight();
     // @ts-ignore
     this.soData.shift(this.allLibCount);
     this.currentLevelData = this.soData;
-    this.tableSo!.addEventListener('column-click', (evt) => {
+    this.perfTableSo!.addEventListener('column-click', (evt) => {
       // @ts-ignore
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
-    this.tableSo!.addEventListener('row-click', (evt) => {
+    this.perfTableSo!.addEventListener('row-click', (evt) => {
       // @ts-ignore
       let data = evt.detail.data;
       if (data.tableName !== '' && data.count !== 0) {
@@ -380,9 +380,9 @@ export class TabPanePerfAnalysis extends BaseElement {
   }
   perfSoLevelClickEvent(it: any, val: SelectionParam): void {
     this.clearData();
-    this.tableSo!.style.display = 'none';
+    this.perfTableSo!.style.display = 'none';
     this.tableFunction!.style.display = 'grid';
-    this.tableSo!.setAttribute('hideDownload', '');
+    this.perfTableSo!.setAttribute('hideDownload', '');
     this.tableFunction?.removeAttribute('hideDownload');
     this.getHiperfFunction(it);
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent =
@@ -396,13 +396,13 @@ export class TabPanePerfAnalysis extends BaseElement {
     let currentTable: LitTable | null | undefined;
     switch (this.currentLevel) {
       case 0:
-        currentTable = this.tableProcess;
+        currentTable = this.perfTableProcess;
         break;
       case 1:
         currentTable = this.perfTableThread;
         break;
       case 2:
-        currentTable = this.tableSo;
+        currentTable = this.perfTableSo;
         break;
       case 3:
         currentTable = this.tableFunction;
@@ -429,9 +429,9 @@ export class TabPanePerfAnalysis extends BaseElement {
       }
       currentTable!.recycleDataSource = arr;
     } else {
-      let arr = [...this.currentLevelData];
+      let array = [...this.currentLevelData];
       if (column === 'tableName') {
-        currentTable!.recycleDataSource = arr.sort((leftA, rightB) => {
+        currentTable!.recycleDataSource = array.sort((leftA, rightB) => {
           if (sort === 1) {
             if (leftA.tableName > rightB.tableName) {
               return 1;
@@ -451,25 +451,25 @@ export class TabPanePerfAnalysis extends BaseElement {
           }
         });
       } else if (column === 'countFormat' || column === 'percent') {
-        currentTable!.recycleDataSource = arr.sort((a, b) => {
+        currentTable!.recycleDataSource = array.sort((a, b) => {
           return sort === 1 ? a.count - b.count : b.count - a.count;
         });
       }
       switch (this.currentLevel) {
         case 0:
-          arr.unshift(this.allProcessCount);
+          array.unshift(this.allProcessCount);
           break;
         case 1:
-          arr.unshift(this.allThreadCount);
+          array.unshift(this.allThreadCount);
           break;
         case 2:
-          arr.unshift(this.allLibCount);
+          array.unshift(this.allLibCount);
           break;
         case 3:
-          arr.unshift(this.allSymbolCount);
+          array.unshift(this.allSymbolCount);
           break;
       }
-      currentTable!.recycleDataSource = arr;
+      currentTable!.recycleDataSource = array;
     }
   }
   async getHiperfProcess(val: SelectionParam): Promise<void> {
@@ -479,7 +479,7 @@ export class TabPanePerfAnalysis extends BaseElement {
       if (val.perfThread.length > 0 && val.perfProcess.length === 0) {
         this.threadData = [];
         this.allThreadCount = [];
-        this.tableProcess!.style.display = 'none';
+        this.perfTableProcess!.style.display = 'none';
         this.threadPieChart(val);
       } else {
         this.pidData = [];
@@ -491,7 +491,7 @@ export class TabPanePerfAnalysis extends BaseElement {
     let allCount = 0;
     let pidMap = new Map<number, Array<number | string>>();
     if (val.perfThread.length > 0 && val.perfProcess.length === 0) {
-      this.tableProcess!.style.display = 'none';
+      this.perfTableProcess!.style.display = 'none';
       this.getHiperfThread(this.processData[0], val);
     } else {
       for (let itemData of this.processData) {
@@ -528,14 +528,14 @@ export class TabPanePerfAnalysis extends BaseElement {
     }
     new ResizeObserver(() => {
       if (this.parentElement?.clientHeight != 0) {
-        this.tableProcess!.style.height = this.parentElement!.clientHeight - 50 + 'px';
-        this.tableProcess?.reMeauseHeight();
+        this.perfTableProcess!.style.height = this.parentElement!.clientHeight - 50 + 'px';
+        this.perfTableProcess?.reMeauseHeight();
         this.perfTableThread!.style.height = this.parentElement!.clientHeight - 50 + 'px';
         this.perfTableThread?.reMeauseHeight();
         this.tableFunction!.style.height = this.parentElement!.clientHeight - 50 + 'px';
         this.tableFunction?.reMeauseHeight();
-        this.tableSo!.style.height = this.parentElement!.clientHeight - 50 + 'px';
-        this.tableSo?.reMeauseHeight();
+        this.perfTableSo!.style.height = this.parentElement!.clientHeight - 50 + 'px';
+        this.perfTableSo?.reMeauseHeight();
       }
     }).observe(this.parentElement!);
   }
@@ -632,7 +632,7 @@ export class TabPanePerfAnalysis extends BaseElement {
   }
   getHiperfFunction(item: any): void {
     this.progressEL!.loading = true;
-    this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function Count';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.perf-subheading')!.textContent = 'Statistic By Function Count';
     let parentCount = item.count;
     let tid = item.tid;
     let pid = item.pid;
@@ -680,20 +680,14 @@ export class TabPanePerfAnalysis extends BaseElement {
     this.sumCount = this.allSymbolCount.allCount;
     this.perfAnalysisPie!.config = {
       appendPadding: 0,
-      data: this.getPieChartData(this.functionData),
+      data: this.getPerfPieChartData(this.functionData),
       angleField: 'count',
       colorField: 'tableName',
       radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj): string => {
-        return `<div>
-                    <div>Function:${ obj.obj.tableName }</div>
-                    <div>Weight:${ obj.obj.countFormat }</div>
-                    <div>Percent:${ obj.obj.percent }%</div>
-                </div>`;
-      },
+      tip: this.getTip(),
       hoverHandler: (data): void => {
         if (data) {
           this.tableFunction!.setCurrentHover(data);
@@ -731,6 +725,17 @@ export class TabPanePerfAnalysis extends BaseElement {
       this.sortByColumn(evt.detail.key, evt.detail.sort);
     });
   }
+
+  private getTip() {
+    return (obj: { obj: { tableName: any; countFormat: any; percent: any; }; }): string => {
+      return `<div>
+                    <div>Function:${obj.obj.tableName}</div>
+                    <div>Weight:${obj.obj.countFormat}</div>
+                    <div>Percent:${obj.obj.percent}%</div>
+                </div>`;
+    };
+  }
+
   totalCountData(count: number): { countFormat: string; percent: string; count: number; allCount: number; pid: string; } {
     let allCount;
     allCount = {
@@ -743,7 +748,7 @@ export class TabPanePerfAnalysis extends BaseElement {
     return allCount;
   }
 
-  getPieChartData(res: any[]): unknown[] {
+  getPerfPieChartData(res: any[]): unknown[] {
     if (res.length > 20) {
       let pieChartArr: string[] = [];
       let other: any = {
@@ -802,23 +807,23 @@ export class TabPanePerfAnalysis extends BaseElement {
             display: flex;
             flex-direction: column;
         }
-        #chart-pie{
+        #perf-chart-pie{
             height: 300px;
         }
-        .table-box{
+        .perf-table-box{
             width: 60%;
             border-left: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
             padding: 10px;
         }
-        .go-back{
+        .perf-go-back{
             display:flex;
             align-items: center;
             cursor: pointer;
             margin-left: 20px;
             visibility: hidden;
         }
-        .back-box{
+        .perf-back-box{
             background-color: var(--bark-expansion,#0C65D1);
             border-radius: 5px;
             color: #fff;
@@ -829,11 +834,11 @@ export class TabPanePerfAnalysis extends BaseElement {
             justify-content: center;
             align-items: center;
         }
-        .subheading{
+        .perf-subheading{
             font-weight: bold;
             text-align: center;
         }
-        .progress{
+        .perf-progress{
             position: absolute;
             height: 1px;
             left: 0;
@@ -842,20 +847,20 @@ export class TabPanePerfAnalysis 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>
+            <lit-progress-bar class="perf-progress"></lit-progress-bar>
                      <div id="left_table" style="width: 40%;height:auto;">
                          <div style="display: flex;margin-bottom: 10px">
-                           <div class="go-back">
-                              <div class="back-box">
+                           <div class="perf-go-back">
+                              <div class="perf-back-box">
                                   <lit-icon name="arrowleft"></lit-icon>
                               </div>
                            </div>
                          <div class="title"></div>
                         </div>
-                         <div class="subheading"></div>
-                         <lit-chart-pie  id="chart-pie"></lit-chart-pie>
+                         <div class="perf-subheading"></div>
+                         <lit-chart-pie  id="perf-chart-pie"></lit-chart-pie>
                      </div>
-                     <div class="table-box" style="height:auto;overflow: auto">
+                     <div class="perf-table-box" style="height:auto;overflow: auto">
                     <lit-table id="tb-process-usage" style="display: none;min-height: 380px" >
                         <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="Weight" data-index="countFormat" key="countFormat" align="flex-start" order></lit-table-column>
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfBottomUp.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfBottomUp.ts
index ff2419e2fb87f08f75a009bc94775f377b3cacec..950d4949fec3a445da8be7bcdc2080ebad658154 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfBottomUp.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfBottomUp.ts
@@ -129,18 +129,18 @@ export class TabpanePerfBottomUp extends BaseElement {
     };
 
     //@ts-ignore
-    const data = evt.detail.data as PerfBottomUpStruct;
-    callStack!.push(data);
-    if (data.parentNode && data.parentNode!.symbolName !== 'root') {
-      callStack.push(data.parentNode!);
-      getParent(data.parentNode!);
+    const bottomUpData = evt.detail.data as PerfBottomUpStruct;
+    callStack!.push(bottomUpData);
+    if (bottomUpData.parentNode && bottomUpData.parentNode!.symbolName !== 'root') {
+      callStack.push(bottomUpData.parentNode!);
+      getParent(bottomUpData.parentNode!);
     }
     callStack.reverse();
-    getCallStackChildren(data.children);
+    getCallStackChildren(bottomUpData.children);
     this.stackTable!.recycleDataSource = callStack;
-    data.isSelected = true;
-    this.stackTable?.clearAllSelection(data);
-    this.stackTable?.setCurrentSelection(data);
+    bottomUpData.isSelected = true;
+    this.stackTable?.clearAllSelection(bottomUpData);
+    this.stackTable?.setCurrentSelection(bottomUpData);
     // @ts-ignore
     if (evt.detail.callBack) {
       // @ts-ignore
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
index c6727ea2e794c8b4575f68b8e49f2714bad04d22..96c6c0c43e9f304aa7c2a128a74915b734d06804 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfProfile.ts
@@ -43,11 +43,11 @@ export class TabpanePerfProfile extends BaseElement {
   private perfProfilerDataSource: any[] = [];
   private perfProfileSortKey = 'weight';
   private perfProfileSortType = 0;
-  private currentSelectedData: any = undefined;
+  private perfSelectedData: any = undefined;
   private perfProfileFrameChart: FrameChart | null | undefined;
   private isChartShow: boolean = false;
   private systemRuleName = '/system/';
-  private numRuleName = '/max/min/';
+  private perfProfileNumRuleName = '/max/min/';
   private perfProfilerModal: DisassemblingWindow | null | undefined;
   private needShowMenu = true;
   private searchValue: string = '';
@@ -190,7 +190,7 @@ export class TabpanePerfProfile extends BaseElement {
       let data = evt.detail.data as PerfCallChainMerageData;
       this.setRightTableData(data);
       data.isSelected = true;
-      this.currentSelectedData = data;
+      this.perfSelectedData = data;
       this.perfProfilerList?.clearAllSelection(data);
       this.perfProfilerList?.setCurrentSelection(data);
       // @ts-ignore
@@ -292,27 +292,27 @@ export class TabpanePerfProfile extends BaseElement {
         });
       } else if (data.type == 'button') {
         if (data.item == 'symbol') {
-          if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
+          if (this.perfSelectedData && !this.perfSelectedData.canCharge) {
             return;
           }
-          if (this.currentSelectedData != undefined) {
-            this.perfProfilerFilter!.addDataMining({ name: this.currentSelectedData.symbolName }, data.item);
+          if (this.perfSelectedData != undefined) {
+            this.perfProfilerFilter!.addDataMining({ name: this.perfSelectedData.symbolName }, data.item);
             perfProfileFuncArgs.push({
               funcName: 'splitTree',
-              funcArgs: [this.currentSelectedData.symbolName, false, true],
+              funcArgs: [this.perfSelectedData.symbolName, false, true],
             });
           } else {
             return;
           }
         } else if (data.item == 'library') {
-          if (this.currentSelectedData && !this.currentSelectedData.canCharge) {
+          if (this.perfSelectedData && !this.perfSelectedData.canCharge) {
             return;
           }
-          if (this.currentSelectedData != undefined && this.currentSelectedData.libName != '') {
-            this.perfProfilerFilter!.addDataMining({ name: this.currentSelectedData.libName }, data.item);
+          if (this.perfSelectedData != undefined && this.perfSelectedData.libName != '') {
+            this.perfProfilerFilter!.addDataMining({ name: this.perfSelectedData.libName }, data.item);
             perfProfileFuncArgs.push({
               funcName: 'splitTree',
-              funcArgs: [this.currentSelectedData.libName, false, false],
+              funcArgs: [this.perfSelectedData.libName, false, false],
             });
           } else {
             return;
@@ -344,11 +344,11 @@ export class TabpanePerfProfile extends BaseElement {
         this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
         if (this.isChartShow) this.perfProfileFrameChart?.calculateChartData();
         this.perfProfilerTbl!.move1px();
-        if (this.currentSelectedData) {
-          this.currentSelectedData.isSelected = false;
-          this.perfProfilerTbl?.clearAllSelection(this.currentSelectedData);
+        if (this.perfSelectedData) {
+          this.perfSelectedData.isSelected = false;
+          this.perfProfilerTbl?.clearAllSelection(this.perfSelectedData);
           this.perfProfilerList!.recycleDataSource = [];
-          this.currentSelectedData = undefined;
+          this.perfSelectedData = undefined;
         }
       });
     };
@@ -396,11 +396,11 @@ export class TabpanePerfProfile extends BaseElement {
       let perfProfilerConstraintsArgs: any[] = [
         {
           funcName: 'resotreAllNode',
-          funcArgs: [[this.numRuleName]],
+          funcArgs: [[this.perfProfileNumRuleName]],
         },
         {
           funcName: 'clearSplitMapData',
-          funcArgs: [this.numRuleName],
+          funcArgs: [this.perfProfileNumRuleName],
         },
       ];
       if (data.checked) {
@@ -422,7 +422,7 @@ export class TabpanePerfProfile extends BaseElement {
     this.perfProfilerFilter!.getFilterData((data: FilterData) => {
       if (this.searchValue != this.perfProfilerFilter!.filterValue) {
         this.searchValue = this.perfProfilerFilter!.filterValue;
-        let args = [
+        let perfArgs = [
           {
             funcName: 'setSearchValue',
             funcArgs: [this.searchValue],
@@ -432,7 +432,7 @@ export class TabpanePerfProfile extends BaseElement {
             funcArgs: [],
           },
         ];
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(perfArgs, (result: any[]) => {
           this.setPerfProfilerLeftTableData(result);
           this.perfProfileFrameChart!.data = this.perfProfilerDataSource;
           this.switchFlameChart(data);
@@ -593,24 +593,17 @@ export class TabpanePerfProfile extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         tab-pane-filter {
-            border: solid rgb(216,216,216) 1px;
-            float: left;
             position: fixed;
             bottom: 0;
             width: 100%;
+            border: solid rgb(216,216,216) 1px;
+            float: left;
         }
-        selector{
-            display: none;
-        }
-        .show{
+        :host{
             display: flex;
-            flex: 1;
+            flex-direction: column;
+            padding: 10px 10px 0 10px;
         }
         .perf-profile-progress{
             bottom: 33px;
@@ -619,6 +612,9 @@ export class TabpanePerfProfile extends BaseElement {
             left: 0;
             right: 0;
         }
+        selector{
+            display: none;
+        }
         .perf-profile-loading{
             bottom: 0;
             position: absolute;
@@ -628,6 +624,10 @@ export class TabpanePerfProfile extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
+        .show{
+            display: flex;
+            flex: 1;
+        }
     </style>
     <div class="perf-profile-content" style="display: flex;flex-direction: row">
     
diff --git a/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts b/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
index dc32b8aebf30937383458cbb743aba525f7c4b07..ebbb470ae39ce669a7c95984ff2d57eaa9725fa8 100644
--- a/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
+++ b/ide/src/trace/component/trace/sheet/hiperf/TabPerfSampleList.ts
@@ -210,8 +210,7 @@ export class TabPanePerfSample extends BaseElement {
   }
 
   initHtml(): string {
-    return `
-<style>
+    return `<style>
 :host{
     display: flex;
     flex-direction: column;
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 2c6588d3d66015e9c29e74cfab341f9c7ecd678f..f6c02b22ac67b1abf43319c271ae605897fd7c5b 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.ts
@@ -514,7 +514,7 @@ export class TabpaneNMCalltree extends BaseElement {
         this.refreshAllNode(this.nmCallTreeFilter!.getFilterTreeData());
       } else if (this.searchValue != this.nmCallTreeFilter!.filterValue) {
         this.searchValue = this.nmCallTreeFilter!.filterValue;
-        let args = [
+        let nmArgs = [
           {
             funcName: 'setSearchValue',
             funcArgs: [this.searchValue],
@@ -524,7 +524,7 @@ export class TabpaneNMCalltree extends BaseElement {
             funcArgs: [],
           },
         ];
-        this.getDataByWorker(args, (result: any[]) => {
+        this.getDataByWorker(nmArgs, (result: any[]) => {
           this.setLTableData(result);
           this.nmCallTreeFrameChart!.data = this.nmCallTreeSource;
           this.switchFlameChart(nmCallTreeData);
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 3274f957ffb21f31d90e45fdcb2a5d085d64f3f0..1ca43e21c5eb2f5857a061aac5bc85a78120ef3a 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.ts
@@ -12,15 +12,15 @@
  * 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 { LitChartPie } from '../../../../../base-ui/chart/pie/LitChartPie.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 {LitChartPie} from '../../../../../base-ui/chart/pie/LitChartPie.js';
 import '../../../../../base-ui/chart/pie/LitChartPie.js';
-import { LitProgressBar } from '../../../../../base-ui/progress-bar/LitProgressBar.js';
-import { Utils } from '../../base/Utils.js';
-import { SpSystemTrace } from '../../../SpSystemTrace.js';
-import { procedurePool } from '../../../../database/Procedure.js';
+import {LitProgressBar} from '../../../../../base-ui/progress-bar/LitProgressBar.js';
+import {Utils} from '../../base/Utils.js';
+import {SpSystemTrace} from '../../../SpSystemTrace.js';
+import {procedurePool} from '../../../../database/Procedure.js';
 
 const TYPE_ALLOC_STRING = 'AllocEvent';
 const TYPE_MAP_STRING = 'MmapEvent';
@@ -146,18 +146,20 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
 
     this.getNMEventTypeSize(statisticAnalysisParam);
   }
+
   initElements(): void {
     this.range = this.shadowRoot?.querySelector('#time-range');
-    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#chart-pie');
+    this.pie = this.shadowRoot!.querySelector<LitChartPie>('#nm-chart-pie');
     this.tableType = this.shadowRoot!.querySelector<LitTable>('#tb-eventtype-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;
+    this.back = this.shadowRoot!.querySelector<HTMLDivElement>('.nm-go-back');
+    this.tabName = this.shadowRoot!.querySelector<HTMLDivElement>('.nm-subheading');
+    this.progressEL = this.shadowRoot?.querySelector('.nm-progress') as LitProgressBar;
     this.getBack();
   }
+
   clearData(): void {
     this.pie!.dataSource = [];
     this.tableType!.recycleDataSource = [];
@@ -165,6 +167,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.soUsageTbl!.recycleDataSource = [];
     this.functionUsageTbl!.recycleDataSource = [];
   }
+
   getBack(): void {
     this.back!.addEventListener('click', () => {
       if (this.tabName!.textContent === 'Statistic By Library Existing') {
@@ -187,6 +190,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       }
     });
   }
+
   typePieChart(): void {
     this.pie!.config = {
       appendPadding: 0,
@@ -199,13 +203,13 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       },
       tip: (typeTipValue): string => {
         return `<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>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): void => {
@@ -214,9 +218,9 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           this.nativeProcessLevelClickEvent(it);
         }
       },
-      hoverHandler: (data): void => {
-        if (data) {
-          this.tableType!.setCurrentHover(data);
+      hoverHandler: (nmData): void => {
+        if (nmData) {
+          this.tableType!.setCurrentHover(nmData);
         } else {
           this.tableType!.mouseOut();
         }
@@ -250,6 +254,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.eventTypeData.shift(this.typeStatisticsData);
     this.currentLevelData = this.eventTypeData;
   }
+
   nativeProcessLevelClickEvent(it: object): void {
     this.clearData();
     this.back!.style.visibility = 'visible';
@@ -264,6 +269,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.type = it.typeName;
     this.pie?.hideTip();
   }
+
   threadPieChart(): void {
     this.pie!.config = {
       appendPadding: 0,
@@ -276,13 +282,13 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       },
       tip: (threadTipValue): string => {
         return `<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>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): void => {
@@ -330,6 +336,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.threadUsageTbl!.recycleDataSource = this.threadData;
     this.threadUsageTbl?.reMeauseHeight();
   }
+
   libraryPieChart(): void {
     this.pie!.config = {
       appendPadding: 0,
@@ -342,13 +349,13 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       },
       tip: (libraryTipValue): string => {
         return `<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>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): void => {
@@ -404,6 +411,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       }
     });
   }
+
   nativeSoLevelClickEvent(it: object): void {
     this.clearData();
     this.soUsageTbl!.style.display = 'none';
@@ -415,6 +423,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     this.shadowRoot!.querySelector<HTMLDivElement>('.title')!.textContent = this.type + ' / ' + it.libName;
     this.pie?.hideTip();
   }
+
   functionPieChart(): void {
     this.pie!.config = {
       appendPadding: 0,
@@ -427,13 +436,13 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       },
       tip: (functionTipValue): string => {
         return `<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>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): void => {
@@ -478,40 +487,40 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
   sortByColumn(column: string, sort: number): void {
     this.sortColumn = column;
     this.sortType = sort;
-    let currentTable: LitTable | null | undefined;
+    let nmCurrentTable: LitTable | null | undefined;
     switch (this.currentLevel) {
       case 0:
-        currentTable = this.tableType;
+        nmCurrentTable = this.tableType;
         break;
       case 1:
-        currentTable = this.soUsageTbl;
+        nmCurrentTable = this.soUsageTbl;
         break;
       case 2:
-        currentTable = this.functionUsageTbl;
+        nmCurrentTable = this.functionUsageTbl;
         break;
     }
-    if (!currentTable) {
+    if (!nmCurrentTable) {
       return;
     }
     if (sort === 0) {
-      let arr = [...this.currentLevelData];
+      let sortColumnZeroArr = [...this.currentLevelData];
       switch (this.currentLevel) {
         case 0:
-          arr.unshift(this.typeStatisticsData);
+          sortColumnZeroArr.unshift(this.typeStatisticsData);
           break;
         case 1:
-          arr.unshift(this.libStatisticsData);
+          sortColumnZeroArr.unshift(this.libStatisticsData);
           break;
         case 2:
-          arr.unshift(this.functionStatisticsData);
+          sortColumnZeroArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = arr;
+      nmCurrentTable!.recycleDataSource = sortColumnZeroArr;
     } else {
-      let arr = [...this.currentLevelData];
+      let sortColumnArr = [...this.currentLevelData];
       switch (column) {
         case 'tableName':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             if (sort === 1) {
               if (statisticAnalysisLeftData.tableName > statisticAnalysisRightData.tableName) {
                 return 1;
@@ -533,7 +542,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           break;
         case 'existSizeFormat':
         case 'existSizePercent':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             return sort === 1
               ? statisticAnalysisLeftData.existSize - statisticAnalysisRightData.existSize
               : statisticAnalysisRightData.existSize - statisticAnalysisLeftData.existSize;
@@ -541,7 +550,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           break;
         case 'existCount':
         case 'existCountPercent':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             return sort === 1
               ? statisticAnalysisLeftData.existCount - statisticAnalysisRightData.existCount
               : statisticAnalysisRightData.existCount - statisticAnalysisLeftData.existCount;
@@ -549,7 +558,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           break;
         case 'releaseSizeFormat':
         case 'releaseSizePercent':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             return sort === 1
               ? statisticAnalysisLeftData.releaseSize - statisticAnalysisRightData.releaseSize
               : statisticAnalysisRightData.releaseSize - statisticAnalysisLeftData.releaseSize;
@@ -557,7 +566,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           break;
         case 'releaseCount':
         case 'releaseCountPercent':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             return sort === 1
               ? statisticAnalysisLeftData.releaseCount - statisticAnalysisRightData.releaseCount
               : statisticAnalysisRightData.releaseCount - statisticAnalysisLeftData.releaseCount;
@@ -565,7 +574,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           break;
         case 'applySizeFormat':
         case 'applySizePercent':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             return sort === 1
               ? statisticAnalysisLeftData.applySize - statisticAnalysisRightData.applySize
               : statisticAnalysisRightData.applySize - statisticAnalysisLeftData.applySize;
@@ -573,7 +582,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
           break;
         case 'applyCount':
         case 'applyCountPercent':
-          currentTable!.recycleDataSource = arr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
+          nmCurrentTable!.recycleDataSource = sortColumnArr.sort((statisticAnalysisLeftData, statisticAnalysisRightData) => {
             return sort === 1
               ? statisticAnalysisLeftData.applyCount - statisticAnalysisRightData.applyCount
               : statisticAnalysisRightData.applyCount - statisticAnalysisLeftData.applyCount;
@@ -582,16 +591,16 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
       }
       switch (this.currentLevel) {
         case 0:
-          arr.unshift(this.typeStatisticsData);
+          sortColumnArr.unshift(this.typeStatisticsData);
           break;
         case 1:
-          arr.unshift(this.libStatisticsData);
+          sortColumnArr.unshift(this.libStatisticsData);
           break;
         case 2:
-          arr.unshift(this.functionStatisticsData);
+          sortColumnArr.unshift(this.functionStatisticsData);
           break;
       }
-      currentTable!.recycleDataSource = arr;
+      nmCurrentTable!.recycleDataSource = sortColumnArr;
     }
   }
 
@@ -827,7 +836,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
 
   getNMFunctionSize(item: any): void {
     this.progressEL!.loading = true;
-    this.shadowRoot!.querySelector<HTMLDivElement>('.subheading')!.textContent = 'Statistic By Function Existing';
+    this.shadowRoot!.querySelector<HTMLDivElement>('.nm-subheading')!.textContent = 'Statistic By Function Existing';
     let typeId = item.typeId;
     let typeName = item.typeName;
     let tid = item.tid;
@@ -932,7 +941,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
         releaseCount: 0,
         releaseCountPercent: 0,
       };
-      for (let i = 0 ; i < res.length ; i++) {
+      for (let i = 0; i < res.length; i++) {
         if (i < PIE_CHART_LIMIT - 1) {
           pieChartArr.push(res[i]);
         } else {
@@ -970,7 +979,8 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     }
 
     for (let applySample of typeMap.get(tyeId)!) {
-      if (tyeId === TYPE_ALLOC) {
+      if (tyeId === TYPE_ALLOC || (applySample.subType && applySample.subType === typeName) ||
+        (!applySample.subType && typeName === TYPE_MAP_STRING)) {
         applySize += applySample.size;
         applyCount += applySample.count;
         if (this.isStatistic) {
@@ -982,36 +992,6 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
             releaseCount += applySample.count;
           }
         }
-      } else {
-        if (applySample.subType) {
-          if (applySample.subType === typeName) {
-            applySize += applySample.size;
-            applyCount += applySample.count;
-            if (this.isStatistic) {
-              releaseSize += applySample.releaseSize;
-              releaseCount += applySample.releaseCount;
-            } else {
-              if (applySample.isRelease) {
-                releaseSize += applySample.size;
-                releaseCount += applySample.count;
-              }
-            }
-          }
-        } else {
-          if (typeName === TYPE_MAP_STRING) {
-            applySize += applySample.size;
-            applyCount += applySample.count;
-            if (this.isStatistic) {
-              releaseSize += applySample.releaseSize;
-              releaseCount += applySample.releaseCount;
-            } else {
-              if (applySample.isRelease) {
-                releaseSize += applySample.size;
-                releaseCount += applySample.count;
-              }
-            }
-          }
-        }
       }
     }
     let typeItem = new AnalysisObj(applySize, applyCount, releaseSize, releaseCount);
@@ -1055,6 +1035,7 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     }
 
     let that = this;
+
     function setSize(item: any): void {
       that.currentLevelApplySize += item.size;
       that.currentLevelApplyCount += item.count;
@@ -1182,26 +1163,26 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
     return `
         <style>
         :host {
-            display: flex;
             flex-direction: column;
+            display: flex;
         }
-        #chart-pie{
+        #nm-chart-pie{
             height: 300px;
         }
-        .table-box{
+        .nm-table-box{
             width: 60%;
             border-left: solid 1px var(--dark-border1,#e0e0e0);
             border-radius: 5px;
             padding: 10px;
         }
-        .go-back{
+        .nm-go-back{
             display:flex;
             align-items: center;
             cursor: pointer;
             margin-left: 20px;
             visibility: hidden;
         }
-        .back-box{
+        .nm-back-box{
             background-color: var(--bark-expansion,#0C65D1);
             border-radius: 5px;
             color: #fff;
@@ -1212,11 +1193,11 @@ export class TabPaneNMStatisticAnalysis extends BaseElement {
             justify-content: center;
             align-items: center;
         }
-        .subheading{
+        .nm-subheading{
             font-weight: bold;
             text-align: center;
         }
-        .progress{
+        .nm-progress{
             position: absolute;
             height: 1px;
             left: 0;
@@ -1225,79 +1206,79 @@ export class TabPaneNMStatisticAnalysis 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>
+           <lit-progress-bar class="nm-progress"></lit-progress-bar>
                      <div id="left_table" style="width: 40%;height:auto;">
                         <div style="display: flex;margin-bottom: 10px">
-                           <div class="go-back">
-                              <div class="back-box">
+                           <div class="nm-go-back">
+                              <div class="nm-back-box">
                                   <lit-icon name="arrowleft"></lit-icon>
                               </div>
                            </div>
                          <div class="title"></div>
                         </div>
-                         <div class="subheading"></div>
-                         <lit-chart-pie  id="chart-pie"></lit-chart-pie>
+                         <div class="nm-subheading"></div>
+                         <lit-chart-pie  id="nm-chart-pie"></lit-chart-pie>
                      </div>
-                     <div class="table-box" style="height:auto;">
+                     <div class="nm-table-box" style="height:auto;">
                     <lit-table id="tb-eventtype-usage" style="max-height: 380px">
-                        <lit-table-column width="250px" title="Memory Type" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="250px" class="event-class" title="Memory Type" data-index="tableName" key="tableName" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="event-class" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
                     </lit-table>
                     <lit-table id="tb-thread-usage" style="display: none;max-height: 380px"hideDownload>
-                        <lit-table-column width="100px" title="Memory Type" data-index="tableName" key="tableName" align="flex-start" ></lit-table-column>
-                        <lit-table-column width="100px" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="50px" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="50px" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="50px" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="50px" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="50px" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="50px" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="Memory Type" data-index="tableName" key="tableName" align="flex-start" ></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="50px" class="thread-class" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="50px" class="thread-class" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="50px" class="thread-class" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="50px" class="thread-class" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="50px class="thread-class" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="thread-class" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="50px" class="thread-class" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
                     </lit-table>
                     <lit-table id="tb-so-usage" style="display: none;max-height: 380px"hideDownload>
-                        <lit-table-column width="250px" title="Library" data-index="tableName" key="tableName" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="250px" class="so-class" title="Library" data-index="tableName" key="tableName" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="so-class" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
                     </lit-table>
                     <lit-table id="tb-function-usage" style="display: none;max-height: 380px"hideDownload>
-                        <lit-table-column width="250px" title="Function" data-index="tableName" key="tableName" align="flex-start"order></lit-table-column>
-                         <lit-table-column width="100px" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
-                        <lit-table-column width="100px" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
-                        <lit-table-column width="100px" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="250px" class="function-class" title="Function" data-index="tableName" key="tableName" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="Existing" data-index="existSizeFormat" key="existSizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="%" data-index="existSizePercent" key="existSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="# Existing" data-index="existCount" key="existCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="%" data-index="existCountPercent" key="existCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="Total Bytes" data-index="applySizeFormat" key="applySizeFormat" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="%" data-index="applySizePercent" key="applySizePercent" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="# Total" data-index="applyCount" key="applyCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="%" data-index="applyCountPercent" key="applyCountPercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="Transient" data-index="releaseSizeFormat" key="releaseSizeFormat" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="%" data-index="releaseSizePercent" key="releaseSizePercent" align="flex-start"order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="# Transient" data-index="releaseCount" key="releaseCount" align="flex-start" order></lit-table-column>
+                        <lit-table-column width="100px" class="function-class" title="%" data-index="releaseCountPercent" key="releaseCountPercent" align="flex-start"order></lit-table-column>
                     </lit-table>
                     </div>
         </div>
diff --git a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
index 2ef501ae65ea6b0497ee3f99bb15b87cf278128d..d81f3beb18061a4bd0d2f62e00fd1a57430a6d5e 100644
--- a/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
+++ b/ide/src/trace/component/trace/sheet/native-memory/TabPaneNMemory.ts
@@ -38,7 +38,7 @@ export class TabPaneNMemory extends BaseElement {
   private filter: TabPaneFilter | null | undefined;
   private tblData: LitTable | null | undefined;
   private progressEL: LitProgressBar | null | undefined;
-  private loadingList: number[] = [];
+  private nmMemoryLoadingList: number[] = [];
   private loadingPage: any;
   private memorySource: Array<NativeMemory> = [];
   private native_type: Array<string> = [...this.defaultNativeTypes];
@@ -113,11 +113,11 @@ export class TabPaneNMemory extends BaseElement {
     if (this.memoryTbl!.recycleDs.length > 1_0000) {
       this.memoryTbl!.recycleDataSource = [];
     }
-    this.startWorker('native-memory-queryNativeHookEvent', args, (results: any[]) => {
+    this.startNmMemoryWorker('native-memory-queryNativeHookEvent', args, (results: any[]) => {
       this.tblData!.recycleDataSource = [];
       if (refresh) {
-        this.setLoading(true);
-        this.initFilterTypes(() => this.setLoading(false));
+        this.setNmMemoryLoading(true);
+        this.initFilterTypes(() => this.setNmMemoryLoading(false));
       }
       if (results.length > 0) {
         this.memorySource = results;
@@ -129,30 +129,30 @@ export class TabPaneNMemory extends BaseElement {
     });
   }
 
-  startWorker(type: string, args: any, handler: Function) {
-    this.setLoading(true);
+  startNmMemoryWorker(type: string, args: any, handler: Function) {
+    this.setNmMemoryLoading(true);
     procedurePool.submitWithName('logic1', type, args, undefined, (res: any) => {
-      if (res.data && res.tag) {
+      if (Array.isArray(res) || (res.tag === 'end' && res.index === 0)) {
+        handler(res.data ? res.data : res);
+        this.setNmMemoryLoading(false);
+      } else {
         this.memorySource.push(res.data);
         if (res.tag == 'end') {
           handler(this.memorySource);
-          this.setLoading(false);
+          this.setNmMemoryLoading(false);
         }
-      } else {
-        handler(res);
-        this.setLoading(false)
       }
     });
   }
 
-  setLoading(loading: boolean) {
+  setNmMemoryLoading(loading: boolean) {
     if (loading) {
-      this.loadingList.push(1);
+      this.nmMemoryLoadingList.push(1);
       this.progressEL!.loading = true;
       this.loadingPage.style.visibility = 'visible';
     } else {
-      this.loadingList.splice(0, 1);
-      if (this.loadingList.length == 0) {
+      this.nmMemoryLoadingList.splice(0, 1);
+      if (this.nmMemoryLoadingList.length == 0) {
         this.progressEL!.loading = false;
         this.loadingPage.style.visibility = 'hidden';
       }
@@ -160,21 +160,11 @@ export class TabPaneNMemory extends BaseElement {
   }
 
   fromStastics(val: SelectionParam | any) {
-    let filter = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
+    let nmFilterEl = this.shadowRoot?.querySelector<TabPaneFilter>('#filter');
     if (this.currentSelection != val) {
       this.initFilterTypes(() => {
         this.currentSelection = val;
-        filter!.setSelectList(
-          null,
-          this.native_type,
-          'Allocation Lifespan',
-          'Allocation Type',
-          this.responseTypes.map((item: any) => {
-            return item.value;
-          })
-        );
-        filter!.secondSelect = typeIndexOf + '';
-        filter!.thirdSelect = this.filterResponseSelect;
+        this.filterSetSelectList(nmFilterEl!, typeIndexOf);
         this.filterNativeType = typeIndexOf + '';
         this.queryData(val);
       });
@@ -193,23 +183,27 @@ export class TabPaneNMemory extends BaseElement {
     if (this.currentSelection == val) {
       this.tblData!.recycleDataSource = [];
       this.rowSelectData = undefined;
-      filter!.setSelectList(
-        null,
-        this.native_type,
-        'Allocation Lifespan',
-        'Allocation Type',
-        this.responseTypes.map((item: any) => {
-          return item.value;
-        })
-      );
-      filter!.secondSelect = typeIndexOf + '';
-      filter!.thirdSelect = this.filterResponseSelect;
+      this.filterSetSelectList(nmFilterEl!, typeIndexOf);
       this.filterNativeType = typeIndexOf + '';
       //直接将当前数据过滤即可
       this.getDataByNativeMemoryWorker(val);
     }
   }
 
+  private filterSetSelectList(nmFilterEl: TabPaneFilter, typeIndexOf: number) {
+    nmFilterEl!.setSelectList(
+      null,
+      this.native_type,
+      'Allocation Lifespan',
+      'Allocation Type',
+      this.responseTypes.map((item: any) => {
+        return item.value;
+      })
+    );
+    nmFilterEl!.secondSelect = typeIndexOf + '';
+    nmFilterEl!.thirdSelect = this.filterResponseSelect;
+  }
+
   initFilterTypes(initCallback?: () => void) {
     this.native_type = [...this.defaultNativeTypes];
     this.statsticsSelection = [];
@@ -310,7 +304,7 @@ export class TabPaneNMemory extends BaseElement {
                   let args = new Map<string, any>();
                   args.set('startTs', this.rowSelectData.startTs);
                   args.set('actionType', 'native-memory-state-change');
-                  this.startWorker('native-memory-action', args, (results: any[]) => {});
+                  this.startNmMemoryWorker('native-memory-action', args, (results: any[]) => {});
                   TabPaneNMSampleList.addSampleData(this.rowSelectData);
                   this.memoryTbl!.scrollToData(this.rowSelectData);
                 }
@@ -352,7 +346,7 @@ export class TabPaneNMemory extends BaseElement {
     let args = new Map<string, any>();
     args.set('eventId', nativeMemoryHook.eventId);
     args.set('actionType', 'memory-stack');
-    this.startWorker('native-memory-action', args, (results: any[]) => {
+    this.startNmMemoryWorker('native-memory-action', args, (results: any[]) => {
       let thread = new NativeHookCallInfo();
       thread.threadId = nativeMemoryHook.threadId;
       thread.threadName = Utils.THREAD_MAP.get(thread.threadId) || 'Thread';
@@ -369,11 +363,6 @@ export class TabPaneNMemory extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
         .nm-memory-loading{
             bottom: 0;
             position: absolute;
@@ -383,6 +372,11 @@ export class TabPaneNMemory extends BaseElement {
             background:transparent;
             z-index: 999999;
         }
+        :host{
+            display: flex;
+            flex-direction: column;
+            padding: 10px 10px 0 10px;
+        }
         .nm-memory-progress{
             bottom: 33px;
             position: absolute;
@@ -421,7 +415,7 @@ export class TabPaneNMemory extends BaseElement {
                             </lit-table-column>
                         </lit-table>
                     </div>
-                    <lit-slicer-track ></lit-slicer-track>
+                    <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 class="nm-memory-column" width="80px" title="" data-index="type" key="type"  align="flex-start" >
                             <template>
diff --git a/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts b/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
index 7921b6ce952334bad081037527584fd1d6a3d1ab..675a702b25be3cb7e9fdbe714bc02909ebb1848c 100644
--- a/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
+++ b/ide/src/trace/component/trace/sheet/process/TabPaneThreadStates.ts
@@ -117,7 +117,7 @@ export class TabPaneThreadStates extends BaseElement {
             <stack-bar id="thread-states-stack-bar" style="width: calc(100vw - 520px)"></stack-bar>
             <label id="thread-states-time-range"  style="width: 250px;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;width: calc(100vw - 270px)">
+        <lit-table id="tb-thread-states" style="height: auto;overflow-x: auto;width: 100%">
             <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 class="tread-states-column" width="120px" title="PID" data-index="pid" key="pid"  align="flex-start" order >
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts
index 863c6a21e64bc4dc82e6b96cfe84556de6e6a5a3..1f60c9301020b2726c816bc2f66c9b17051f1990 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsComparison.ts
@@ -56,7 +56,7 @@ export class TabPaneSmapsComparison extends TabPaneSmapsStatistics {
     this.initSelect(data.leftNs, fileArr);
     this.querySmapsData(data.leftNs, fileArr[0].startNs);
   }
-  private initSelect(fileStartNs: number, fileArr: Array<any>): void {
+  private initSelect(fileStartNs: number, smapsComFileArr: Array<any>): void {
     let that = this;
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
@@ -64,15 +64,15 @@ export class TabPaneSmapsComparison extends TabPaneSmapsStatistics {
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (fileArr[0].name) {
-      option.setAttribute('value', fileArr[0].name);
+    if (smapsComFileArr[0].name) {
+      option.setAttribute('value', smapsComFileArr[0].name);
     }
-    this.selectEl!.defaultValue = fileArr[0].name;
-    this.selectEl!.placeholder = fileArr[0].name;
-    this.selectEl!.dataSource = fileArr;
+    this.selectEl!.defaultValue = smapsComFileArr[0].name;
+    this.selectEl!.placeholder = smapsComFileArr[0].name;
+    this.selectEl!.dataSource = smapsComFileArr;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e: any) => {
-        for (let f of fileArr) {
+        for (let f of smapsComFileArr) {
           if (input.value === f.name) {
             that.querySmapsData(fileStartNs, f.startNs);
           }
@@ -86,23 +86,23 @@ export class TabPaneSmapsComparison extends TabPaneSmapsStatistics {
     const baseArr: SmapsCompareStruct[] = [];
     const targetArr: SmapsCompareStruct[] = [];
     // 点击的
-    await getTabSmapsStatisticData(baseTime).then(async (results) => {
+    await getTabSmapsStatisticData(baseTime).then(async (smapsComResults) => {
       this.smapsCompariosnTable!.loading = false;
-      for (let i = 0; i < results.length; i++) {
+      for (let i = 0; i < smapsComResults.length; i++) {
         baseArr.push(
           new SmapsCompareStruct(
-            results[i].type,
-            results[i].path,
-            results[i].size,
-            results[i].count,
-            results[i].rss,
-            results[i].pss,
-            results[i].sharedClean,
-            results[i].sharedDirty,
-            results[i].privateClean,
-            results[i].privateDirty,
-            results[i].swap,
-            results[i].swapPss
+            smapsComResults[i].type,
+            smapsComResults[i].path,
+            smapsComResults[i].size,
+            smapsComResults[i].count,
+            smapsComResults[i].rss,
+            smapsComResults[i].pss,
+            smapsComResults[i].sharedClean,
+            smapsComResults[i].sharedDirty,
+            smapsComResults[i].privateClean,
+            smapsComResults[i].privateDirty,
+            smapsComResults[i].swap,
+            smapsComResults[i].swapPss
           )
         );
       }
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
index 4b31e8cb5293e8155e39deff42a4bc9178a18761..ebab8788336113a9fae7c76b3b374d9c16a697ec 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsRecord.ts
@@ -77,10 +77,10 @@ export class TabPaneSmapsRecord extends BaseElement {
   }
   private init(): void {
     const thTable = this.tabTitle!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const smapsRecordTblNodes = thTable!.querySelectorAll('div');
     if (this.tabTitle!.hasAttribute('sort')) {
       this.tabTitle!.removeAttribute('sort');
-      list.forEach((item) => {
+      smapsRecordTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
index c9b1349fea07d0d5e69fb3037f3f017e1f9186fe..47a3088c541f517681b6bbf71c68a430394cc25f 100644
--- a/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
+++ b/ide/src/trace/component/trace/sheet/smaps/TabPaneSmapsStatistics.ts
@@ -129,7 +129,7 @@ export class TabPaneSmapsStatistics extends BaseElement {
     smaps: Smaps,
     id: number,
     parentId: string,
-    dataTree: SmapsTreeObj,
+    smapsStatAllDataTree: SmapsTreeObj,
     sumSize?: number
   ): void {
     let type = smaps.typeName;
@@ -145,23 +145,23 @@ export class TabPaneSmapsStatistics extends BaseElement {
     objTree.rssStr = Utils.getBinaryByteWithUnit(smaps.rss);
     objTree.pss = smaps.pss;
     objTree.pssStr = Utils.getBinaryByteWithUnit(smaps.pss);
-    if (dataTree.children.length >= 1 && dataTree.path !== '< multiple >') {
-      dataTree.path = '< multiple >';
+    if (smapsStatAllDataTree.children.length >= 1 && smapsStatAllDataTree.path !== '< multiple >') {
+      smapsStatAllDataTree.path = '< multiple >';
     }
 
-    dataTree.size += smaps.size;
-    dataTree.count += smaps.count;
-    dataTree.rss += smaps.rss;
-    dataTree.pss += smaps.pss;
-    dataTree.sharedClean += smaps.sharedClean;
-    dataTree.sharedDirty += smaps.sharedDirty;
-    dataTree.privateClean += smaps.privateClean;
-    dataTree.privateDirty += smaps.privateDirty;
-    dataTree.swap += smaps.swap;
-    dataTree.swapPss += smaps.swapPss;
+    smapsStatAllDataTree.size += smaps.size;
+    smapsStatAllDataTree.count += smaps.count;
+    smapsStatAllDataTree.rss += smaps.rss;
+    smapsStatAllDataTree.pss += smaps.pss;
+    smapsStatAllDataTree.sharedClean += smaps.sharedClean;
+    smapsStatAllDataTree.sharedDirty += smaps.sharedDirty;
+    smapsStatAllDataTree.privateClean += smaps.privateClean;
+    smapsStatAllDataTree.privateDirty += smaps.privateDirty;
+    smapsStatAllDataTree.swap += smaps.swap;
+    smapsStatAllDataTree.swapPss += smaps.swapPss;
   }
 
-  private handleTree(smaps: Smaps, id: number, parentId: string, dataTree: SmapsTreeObj, sumSize?: number): void {
+  private handleTree(smaps: Smaps, id: number, parentId: string, smapsStatDataTree: SmapsTreeObj, sumSize?: number): void {
     let type = TYPE_STRING[smaps.type];
     let treeObj = new SmapsTreeObj(id + '', parentId, type);
     treeObj.path = SpSystemTrace.DATA_DICT.get(Number(smaps.path))?.split('/');
@@ -190,21 +190,21 @@ export class TabPaneSmapsStatistics extends BaseElement {
       treeObj.sizeProStr = treeObj.sizePro.toFixed(2) + '%';
     }
 
-    if (dataTree.children.length >= 1 && dataTree.path !== '< multiple >') {
-      dataTree.path = '< multiple >';
+    if (smapsStatDataTree.children.length >= 1 && smapsStatDataTree.path !== '< multiple >') {
+      smapsStatDataTree.path = '< multiple >';
     }
 
-    dataTree.size += smaps.size;
-    dataTree.count += smaps.count;
-    dataTree.rss += smaps.rss;
-    dataTree.pss += smaps.pss;
-    dataTree.sharedClean += smaps.sharedClean;
-    dataTree.sharedDirty += smaps.sharedDirty;
-    dataTree.privateClean += smaps.privateClean;
-    dataTree.privateDirty += smaps.privateDirty;
-    dataTree.swap += smaps.swap;
-    dataTree.swapPss += smaps.swapPss;
-    dataTree.children.push(treeObj);
+    smapsStatDataTree.size += smaps.size;
+    smapsStatDataTree.count += smaps.count;
+    smapsStatDataTree.rss += smaps.rss;
+    smapsStatDataTree.pss += smaps.pss;
+    smapsStatDataTree.sharedClean += smaps.sharedClean;
+    smapsStatDataTree.sharedDirty += smaps.sharedDirty;
+    smapsStatDataTree.privateClean += smaps.privateClean;
+    smapsStatDataTree.privateDirty += smaps.privateDirty;
+    smapsStatDataTree.swap += smaps.swap;
+    smapsStatDataTree.swapPss += smaps.swapPss;
+    smapsStatDataTree.children.push(treeObj);
   }
 
   async setSmaps(data: SelectionParam) {
diff --git a/ide/src/trace/component/trace/sheet/task/TabPaneTaskFrames.ts b/ide/src/trace/component/trace/sheet/task/TabPaneTaskFrames.ts
index 45e1a4bccf03da2ebc0e5956e3b0e80d5375b61f..b0b0e0ad3b5b7e74fbc28e6a17eb0ffb14472196 100644
--- a/ide/src/trace/component/trace/sheet/task/TabPaneTaskFrames.ts
+++ b/ide/src/trace/component/trace/sheet/task/TabPaneTaskFrames.ts
@@ -197,7 +197,7 @@ export class TabPaneTaskFrames extends BaseElement {
   initHtml(): string {
     return `
         <style>
-        .frames-label{
+        .task-frames-label{
           height: 20px;
           text-align: end;
         }
@@ -207,7 +207,7 @@ export class TabPaneTaskFrames extends BaseElement {
             flex-direction: column;
         }
         </style>
-        <label id="task-frames-time-range" class="frames-label" style="width: 100%;font-size: 10pt;margin-bottom: 5px">
+        <label id="task-frames-time-range" class="task-frames-label" style="width: 100%;font-size: 10pt;margin-bottom: 5px">
         Selected range:0.0 ms</label>
         <lit-progress-bar class="progress"></lit-progress-bar>
         <lit-table id="tb-frames" style="height: auto">
@@ -373,10 +373,10 @@ export class TabPaneTaskFrames extends BaseElement {
       //去重
       let filterList = [];
       let map = new Map();
-      for (const item of tableList) {
-        if (!map.has(item.executeId)) {
-          map.set(item.executeId, true);
-          filterList.push(item);
+      for (const ConcurrencyTblItem of tableList) {
+        if (!map.has(ConcurrencyTblItem.executeId)) {
+          map.set(ConcurrencyTblItem.executeId, true);
+          filterList.push(ConcurrencyTblItem);
         }
       }
       return filterList;
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts
index 59c77e2b3d0a4524171d92d4cf0dc298d6e5e1a0..fd359a9c781ba443c5434ab316f19263de344e0c 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.ts
@@ -51,10 +51,10 @@ export class TabPaneDmaSelectVmTracker extends BaseElement {
 
   private init(): void {
     const thTable = this.tableThead!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const dmaSelectVmTrackerTblNodes = thTable!.querySelectorAll('div');
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
-      list.forEach((item) => {
+      dmaSelectVmTrackerTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts
index 54eded0082921b872099f1c8fa4f4937bf5b5ca7..6759d32ce6bac88a9a1b28ea0abca82692ff57ce 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.ts
@@ -56,10 +56,10 @@ export class TabPaneDmaVmTracker extends BaseElement {
 
   private init(): void {
     const thTable = this.tableThead!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const dmaVmTrackerTblNodes = thTable!.querySelectorAll('div');
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
-      list.forEach((item) => {
+      dmaVmTrackerTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts
index 9424d178b0e8c18f4540ffde0f08f4ff9aeeaeac..90df5a8c4424cd7c774bc5f3e47f3550f6a1b1e7 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.ts
@@ -70,23 +70,23 @@ export class TabPaneDmaVmTrackerComparison extends BaseElement {
     this.getComparisonData(dataArray[0].startNs);
   }
 
-  selectStamps(dataList: Array<SnapshotStruct>): void {
+  selectStamps(dmaVmTrackerComList: Array<SnapshotStruct>): void {
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
     let option = new LitSelectOption();
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (dataList[0].name) {
-      option.setAttribute('value', dataList[0].name);
+    if (dmaVmTrackerComList[0].name) {
+      option.setAttribute('value', dmaVmTrackerComList[0].name);
     }
-    option.setAttribute('value', dataList[0].name);
-    this.selectEl!.defaultValue = dataList[0].name || '';
-    this.selectEl!.placeholder = dataList[0].name || '';
-    this.selectEl!.dataSource = dataList;
+    option.setAttribute('value', dmaVmTrackerComList[0].name);
+    this.selectEl!.defaultValue = dmaVmTrackerComList[0].name || '';
+    this.selectEl!.placeholder = dmaVmTrackerComList[0].name || '';
+    this.selectEl!.dataSource = dmaVmTrackerComList;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((option) => {
       option.addEventListener('onSelected', async (e) => {
-        for (let f of dataList) {
+        for (let f of dmaVmTrackerComList) {
           if (input.value === f.name) {
             this.getComparisonData(f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts
index 42e26db5ccf78515ecee2380332d5a152eb1fb37..533396d6731d1a4609f20e018079187bfba7d30f 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.ts
@@ -50,10 +50,10 @@ export class TabPaneGpuMemorySelectVmTracker extends BaseElement {
 
   private init(): void {
     const thTable = this.tableThead!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const gpuMemoryVmTrackerTblNodes = thTable!.querySelectorAll('div');
     if (this.tableThead!.hasAttribute('sort')) {
       this.tableThead!.removeAttribute('sort');
-      list.forEach((item) => {
+      gpuMemoryVmTrackerTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts
index 75e235cf96b567095fc7e4f7830ae2a1c3ba0789..6d61d100e14e0660e459cba5f64d143d5a2c6132 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.ts
@@ -37,8 +37,8 @@ export class TabPaneGpuMemoryVmTrackerComparison extends BaseElement {
 
   initElements(): void {
     this.gpuMemoryClickTable = this.shadowRoot?.querySelector<LitTable>('#gpuMemoryClickTable');
-    this.comparisonSelect = this.shadowRoot?.querySelector('#filter') as TabPaneJsMemoryFilter;
     this.selectEl = this.comparisonSelect?.shadowRoot?.querySelector<LitSelect>('lit-select');
+    this.comparisonSelect = this.shadowRoot?.querySelector('#filter') as TabPaneJsMemoryFilter;
     this.gpuMemoryClickTable!.addEventListener('column-click', (e) => {
       // @ts-ignore
       this.sortGpuMemoryByColumn(e.detail.key, e.detail.sort);
@@ -142,19 +142,19 @@ export class TabPaneGpuMemoryVmTrackerComparison extends BaseElement {
             break;
           case 'gpuName':
             this.gpuMemoryClickTable!.recycleDataSource = array.sort(
-              (gpuMComparisonLeftData, gpuMComparisonRightData) => {
+              (gpuMCompVmLeftData, gpuMCompVmRightData) => {
                 return sort === 1
-                  ? `${gpuMComparisonLeftData.gpuName}`.localeCompare(`${gpuMComparisonRightData.gpuName}`)
-                  : `${gpuMComparisonRightData.gpuName}`.localeCompare(`${gpuMComparisonLeftData.gpuName}`);
+                  ? `${gpuMCompVmLeftData.gpuName}`.localeCompare(`${gpuMCompVmRightData.gpuName}`)
+                  : `${gpuMCompVmRightData.gpuName}`.localeCompare(`${gpuMCompVmLeftData.gpuName}`);
               }
             );
             break;
           case 'sizeDelta':
             this.gpuMemoryClickTable!.recycleDataSource = array.sort(
-              (gpuMComparisonLeftData, gpuMComparisonRightData) => {
+              (gpuMCompVmLeftData, gpuMCompVmRightData) => {
                 return sort === 1
-                  ? gpuMComparisonLeftData.value - gpuMComparisonRightData.value
-                  : gpuMComparisonRightData.value - gpuMComparisonLeftData.value;
+                  ? gpuMCompVmLeftData.value - gpuMCompVmRightData.value
+                  : gpuMCompVmRightData.value - gpuMCompVmLeftData.value;
               }
             );
             break;
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts
index 1d2a1981df6cbf1661575426591b4afa9984b829..041dc4159eca8162b23ef0aec83a1bbf432513e3 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.ts
@@ -13,9 +13,9 @@
  * limitations under the License.
  */
 import { BaseElement, element } from '../../../../../base-ui/BaseElement.js';
+import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { LitSelect } from '../../../../../base-ui/select/LitSelect.js';
 import { LitSelectOption } from '../../../../../base-ui/select/LitSelectOption.js';
-import { LitTable } from '../../../../../base-ui/table/lit-table.js';
 import { SelectionParam } from '../../../../bean/BoxSelection.js';
 import { MemoryConfig } from '../../../../bean/MemoryConfig.js';
 import { queryProcessPurgeableSelectionTab } from '../../../../database/SqlLite.js';
@@ -41,16 +41,16 @@ export class TabPanePurgPinComparisonVM extends BaseElement {
     }px`;
     this.purgeablePinSource = [];
     let fileArr: any[] = [];
-    for (let file of dataList) {
-      if (file.startNs !== data.startNs) {
-        fileArr.push(file);
+    for (let fileData of dataList) {
+      if (fileData.startNs !== data.startNs) {
+        fileArr.push(fileData);
       }
     }
     fileArr = fileArr.sort();
     this.initSelect(data.startNs, fileArr);
     this.updateComparisonData(data.startNs, fileArr[0].startNs);
   }
-  private initSelect(fileStartNs: number, fileArr: Array<any>): void {
+  private initSelect(fileStartNs: number, purgePinComVmList: Array<any>): void {
     let that = this;
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
@@ -58,15 +58,15 @@ export class TabPanePurgPinComparisonVM extends BaseElement {
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (fileArr[0].name) {
-      option.setAttribute('value', fileArr[0].name);
+    if (purgePinComVmList[0].name) {
+      option.setAttribute('value', purgePinComVmList[0].name);
     }
-    this.selectEl!.defaultValue = fileArr[0].name;
-    this.selectEl!.placeholder = fileArr[0].name;
-    this.selectEl!.dataSource = fileArr;
+    this.selectEl!.defaultValue = purgePinComVmList[0].name;
+    this.selectEl!.placeholder = purgePinComVmList[0].name;
+    this.selectEl!.dataSource = purgePinComVmList;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e: any) => {
-        for (let f of fileArr) {
+        for (let f of purgePinComVmList) {
           if (input.value === f.name) {
             that.updateComparisonData(fileStartNs, f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.ts
index 499792e731fa6b05254dd3d6bcf1e8b2fec3d722..edc4bec7cfc78a6214d166d26264838d43abc579 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.ts
@@ -50,7 +50,7 @@ export class TabPanePurgTotalComparisonVM extends BaseElement {
     this.initSelect(data.startNs, fileArr);
     this.updateComparisonData(data.startNs, fileArr[0].startNs);
   }
-  private initSelect(fileStartNs: number, fileArr: Array<any>): void {
+  private initSelect(fileStartNs: number, purgeTotalComList: Array<any>): void {
     let that = this;
     let input = this.selectEl!.shadowRoot?.querySelector('input') as HTMLInputElement;
     this.selectEl!.innerHTML = '';
@@ -58,15 +58,15 @@ export class TabPanePurgTotalComparisonVM extends BaseElement {
     option.innerHTML = 'File Name';
     option.setAttribute('disabled', 'disabled');
     this.selectEl?.appendChild(option);
-    if (fileArr[0].name) {
-      option.setAttribute('value', fileArr[0].name);
+    if (purgeTotalComList[0].name) {
+      option.setAttribute('value', purgeTotalComList[0].name);
     }
-    this.selectEl!.defaultValue = fileArr[0].name;
-    this.selectEl!.placeholder = fileArr[0].name;
-    this.selectEl!.dataSource = fileArr;
+    this.selectEl!.defaultValue = purgeTotalComList[0].name;
+    this.selectEl!.placeholder = purgeTotalComList[0].name;
+    this.selectEl!.dataSource = purgeTotalComList;
     this.selectEl!.querySelectorAll('lit-select-option').forEach((a) => {
       a.addEventListener('onSelected', (e: any) => {
-        for (let f of fileArr) {
+        for (let f of purgeTotalComList) {
           if (input.value === f.name) {
             that.updateComparisonData(fileStartNs, f.startNs);
           }
diff --git a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts
index 5f50375290632037b376b7726db6297eedc4ad87..90f98ae6396047c1f46cc085a4a508fa09e6c1f5 100644
--- a/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts
+++ b/ide/src/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.ts
@@ -78,10 +78,10 @@ export class TabPaneVmTrackerShm extends BaseElement {
 
   private init(): void {
     const thTable = this.tabTitle!.querySelector('.th');
-    const list = thTable!.querySelectorAll('div');
+    const vmTrackerShmTblNodes = thTable!.querySelectorAll('div');
     if (this.tabTitle!.hasAttribute('sort')) {
       this.tabTitle!.removeAttribute('sort');
-      list.forEach((item) => {
+      vmTrackerShmTblNodes.forEach((item) => {
         item.querySelectorAll('svg').forEach((svg) => {
           svg.style.display = 'none';
         });
diff --git a/ide/src/trace/component/trace/timer-shaft/Graph.ts b/ide/src/trace/component/trace/timer-shaft/Graph.ts
index b120be822bcdaf3c4f68a553201b1689fecc820e..7117194ceed418c77f85fbea3565c5c6be9e82c4 100644
--- a/ide/src/trace/component/trace/timer-shaft/Graph.ts
+++ b/ide/src/trace/component/trace/timer-shaft/Graph.ts
@@ -17,13 +17,13 @@ import { Rect } from './Rect.js';
 
 export abstract class Graph {
   frame: Rect;
-  c: CanvasRenderingContext2D;
+  context2D: CanvasRenderingContext2D;
   canvas: HTMLCanvasElement | undefined | null;
 
   protected constructor(canvas: HTMLCanvasElement | undefined | null, c: CanvasRenderingContext2D, frame: Rect) {
     this.canvas = canvas;
     this.frame = frame;
-    this.c = c;
+    this.context2D = c;
   }
 
   abstract draw(): void;
diff --git a/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts b/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
index eb00a1cc6e387ec39899954d9871228791efcc9f..38f454b9f10aa03816655302885f5bf4264ed447 100644
--- a/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/RangeRuler.ts
@@ -50,18 +50,18 @@ export class Mark extends Graph {
   }
 
   draw(): void {
-    this.c.beginPath();
-    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.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();
-    this.c.closePath();
+    this.context2D.beginPath();
+    this.context2D.strokeStyle = '#999999';
+    this.context2D.lineWidth = 7;
+    this.context2D.moveTo(this.frame.x, this.frame.y);
+    this.context2D.lineTo(this.frame.x, this.frame.y + this.frame.height / 3);
+    this.context2D.stroke();
+    this.context2D.strokeStyle = '#999999';
+    this.context2D.lineWidth = 1;
+    this.context2D.moveTo(this.frame.x, this.frame.y);
+    this.context2D.lineTo(this.frame.x, this.frame.y + this.frame.height);
+    this.context2D.stroke();
+    this.context2D.closePath();
   }
 }
 
@@ -160,9 +160,9 @@ export class RangeRuler extends Graph {
     let miniWidth = Math.ceil(this.frame.width / 100); //每格宽度
     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.context2D.fillStyle = ColorUtils.MD_PALETTE[cpuUsageItem.cpu];
+      this.context2D.globalAlpha = cpuUsageItem.rate;
+      this.context2D.fillRect(
         this.frame.x + miniWidth * cpuUsageItem.ro,
         this.frame.y + cpuUsageItem.cpu * miniHeight,
         miniWidth,
@@ -172,34 +172,17 @@ export class RangeRuler extends Graph {
   }
 
   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.beginPath();
+    this.context2D.clearRect(this.frame.x - MarkPadding, this.frame.y, this.frame.width + MarkPadding * 2, this.frame.height);
+    this.context2D.beginPath();
     if (this._cpuUsage.length > 0) {
       this.drawCpuUsage();
-      this.c.globalAlpha = 0;
+      this.context2D.globalAlpha = 0;
     } else {
-      this.c.globalAlpha = 1;
+      this.context2D.globalAlpha = 1;
     }
     //绘制选中区域
     if (this.drawMark) {
-      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;
-      this.c.fillStyle = '#999999';
-      this.c.fillRect(this.frame.x, this.frame.y, this.rangeRect.x, this.rangeRect.height);
-      this.c.fillRect(
-        this.rangeRect.x + this.rangeRect.width,
-        this.frame.y,
-        this.frame.width - this.rangeRect.width,
-        this.rangeRect.height
-      );
-      this.c.globalAlpha = 1;
-      this.c.closePath();
-      this.markAObj.draw();
-      this.markBObj.draw();
+      this.drawSelectionRange();
     }
     if (this.notifyHandler) {
       this.range.startX = this.rangeRect.x;
@@ -207,55 +190,55 @@ export class RangeRuler extends Graph {
       this.range.startNS = (this.range.startX * this.range.totalNS) / (this.canvas?.clientWidth || 0);
       this.range.endNS = (this.range.endX * this.range.totalNS) / (this.canvas?.clientWidth || 0);
       let l20 = (this.range.endNS - this.range.startNS) / 20;
-      let min = 0;
-      let max = 0;
+      let minScale = 0;
+      let maxScale = 0;
       let weight = 0;
       for (let scalesIndex = 0; scalesIndex < this.scales.length; scalesIndex++) {
         if (this.scales[scalesIndex] > l20) {
           if (scalesIndex > 0) {
-            min = this.scales[scalesIndex - 1];
+            minScale = this.scales[scalesIndex - 1];
           } else {
-            min = 0;
+            minScale = 0;
           }
-          max = this.scales[scalesIndex];
-          weight = ((l20 - min) * 1.0) / (max - min);
+          maxScale = this.scales[scalesIndex];
+          weight = ((l20 - minScale) * 1.0) / (maxScale - minScale);
           if (weight > 0.243) {
-            this.scale = max;
+            this.scale = maxScale;
           } else {
-            this.scale = min;
+            this.scale = minScale;
           }
           break;
         }
       }
-      if (this.scale == 0) {
+      if (this.scale === 0) {
         this.scale = this.scales[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;
-      if (this.range.xs) {
-        this.range.xs.length = 0;
-      } else {
-        this.range.xs = [];
-      }
+      let rangeStartX = 0;
+      let rangeYu = this.range.startNS % this.scale;
+      let rangeRealW = (this.scale * this.frame.width) / (this.range.endNS - this.range.startNS);
       if (this.range.xsTxt) {
         this.range.xsTxt.length = 0;
       } else {
         this.range.xsTxt = [];
       }
+      if (this.range.xs) {
+        this.range.xs.length = 0;
+      } else {
+        this.range.xs = [];
+      }
       this.range.scale = this.scale;
-      if (yu != 0) {
-        let first_NodeWidth = ((this.scale - yu) / this.scale) * realW;
-        startX += first_NodeWidth;
-        tempNs += yu;
-        this.range.xs.push(startX);
+      if (rangeYu != 0) {
+        let first_NodeWidth = ((this.scale - rangeYu) / this.scale) * rangeRealW;
+        rangeStartX += first_NodeWidth;
+        tempNs += rangeYu;
+        this.range.xs.push(rangeStartX);
         this.range.xsTxt.push(ns2UnitS(tempNs + this.range.startNS, this.scale));
       }
       while (tempNs < this.range.endNS - this.range.startNS) {
-        startX += realW;
+        rangeStartX += rangeRealW;
         tempNs += this.scale;
-        this.range.xs.push(startX);
+        this.range.xs.push(rangeStartX);
         this.range.xsTxt.push(ns2UnitS(tempNs + this.range.startNS, this.scale));
       }
       if (!discardNotify) {
@@ -264,15 +247,36 @@ export class RangeRuler extends Graph {
     }
   }
 
-  getScale() {
+  private drawSelectionRange() {
+    this.context2D.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.context2D.fillRect(this.rangeRect.x, this.rangeRect.y, this.rangeRect.width, this.rangeRect.height);
+    this.context2D.globalAlpha = 1;
+    this.context2D.globalAlpha = 0.5;
+    this.context2D.fillStyle = '#999999';
+    this.context2D.fillRect(this.frame.x, this.frame.y, this.rangeRect.x, this.rangeRect.height);
+    this.context2D.fillRect(
+      this.rangeRect.x + this.rangeRect.width,
+      this.frame.y,
+      this.frame.width - this.rangeRect.width,
+      this.rangeRect.height
+    );
+    this.context2D.globalAlpha = 1;
+    this.context2D.closePath();
+    this.markAObj.draw();
+    this.markBObj.draw();
+  }
+
+  getScale(): number {
     return this.scale;
   }
 
   mouseDown(mouseEventDown: MouseEvent) {
-    let down_x = mouseEventDown.offsetX - (this.canvas?.offsetLeft || 0);
-    let down_y = mouseEventDown.offsetY - (this.canvas?.offsetTop || 0);
+    let mouseDown_x = mouseEventDown.offsetX - (this.canvas?.offsetLeft || 0);
+    let mouseDown_y = mouseEventDown.offsetY - (this.canvas?.offsetTop || 0);
     this.isMouseDown = true;
-    this.mouseDownOffsetX = down_x;
+    this.mouseDownOffsetX = mouseDown_x;
     if (this.markAObj.isHover) {
       this.movingMark = this.markAObj;
       this.mouseDownMovingMarkX = this.movingMark.frame.x || 0;
@@ -282,14 +286,14 @@ export class RangeRuler extends Graph {
     } else {
       this.movingMark = null;
     }
-    if (this.rangeRect.containsWithPadding(down_x, down_y, 5, 0)) {
+    if (this.rangeRect.containsWithPadding(mouseDown_x, mouseDown_y, 5, 0)) {
       this.isMovingRange = true;
       this.markAX = this.markAObj.frame.x;
       this.markBX = this.markBObj.frame.x;
       document.body.style.cursor = 'move';
     } else if (
-      this.frame.containsWithMargin(down_x, down_y, 20, 0, 0, 0) &&
-      !this.rangeRect.containsWithMargin(down_x, down_y, 0, MarkPadding, 0, MarkPadding)
+      this.frame.containsWithMargin(mouseDown_x, mouseDown_y, 20, 0, 0, 0) &&
+      !this.rangeRect.containsWithMargin(mouseDown_x, mouseDown_y, 0, MarkPadding, 0, MarkPadding)
     ) {
       this.isNewRange = true;
     }
diff --git a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
index 6419c503836682797563d098167a4110e2c6b0d6..2beadbaca77af1824b68121b99de501230299a58 100644
--- a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts
@@ -150,34 +150,34 @@ export class SportRuler extends Graph {
   }
   draw(): void {
     this.rulerW = this.canvas!.offsetWidth;
-    this.c.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height + 1);
-    this.c.beginPath();
+    this.context2D.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height + 1);
+    this.context2D.beginPath();
     this.lineColor = window.getComputedStyle(this.canvas!, null).getPropertyValue('color');
-    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.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.strokeStyle = this.lineColor; //"#999999"
-    this.c.lineWidth = 1;
-    this.c.fillStyle = '#999999';
-    this.c.font = '8px sans-serif';
+    this.context2D.lineWidth = 1;
+    this.context2D.strokeStyle = this.lineColor; //"#dadada"
+    this.context2D.moveTo(this.frame.x, this.frame.y);
+    this.context2D.lineTo(this.frame.x + this.frame.width, this.frame.y);
+    this.context2D.stroke();
+    this.context2D.closePath();
+    this.context2D.beginPath();
+    this.context2D.strokeStyle = '#999999';
+    this.context2D.lineWidth = 3;
+    this.context2D.moveTo(this.frame.x, this.frame.y);
+    this.context2D.lineTo(this.frame.x, this.frame.y + this.frame.height);
+    this.context2D.stroke();
+    this.context2D.closePath();
+    this.context2D.beginPath();
+    this.context2D.strokeStyle = this.lineColor; //"#999999"
+    this.context2D.lineWidth = 1;
+    this.context2D.fillStyle = '#999999';
+    this.context2D.font = '8px sans-serif';
     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.context2D.moveTo(item, this.frame.y);
+      this.context2D.lineTo(item, this.frame.y + this.frame.height);
+      this.context2D.fillText(`${this.range.xsTxt[index]}`, item + 3, this.frame.y + 12);
     });
-    this.c.stroke();
-    this.c.closePath();
+    this.context2D.stroke();
+    this.context2D.closePath();
     //绘制旗子
     this.flagList.forEach((flagObj: Flag, b) => {
       if (flagObj.time >= this.range.startNS && flagObj.time <= this.range.endNS) {
@@ -191,36 +191,36 @@ export class SportRuler extends Graph {
     //If region selection is enabled, the serial number draws a line on the axis to show the length of the box selection
     if (this.isRangeSelect) {
       let range = TraceRow.rangeSelectObject;
-      this.c.beginPath();
+      this.context2D.beginPath();
       if (document.querySelector<SpApplication>('sp-application')!.dark) {
-        this.c.strokeStyle = '#FFF';
-        this.c.fillStyle = '#FFF';
+        this.context2D.strokeStyle = '#FFF';
+        this.context2D.fillStyle = '#FFF';
       } else {
-        this.c.strokeStyle = '#000';
-        this.c.fillStyle = '#000';
+        this.context2D.strokeStyle = '#000';
+        this.context2D.fillStyle = '#000';
       }
       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 - start_X;
       let txt = ns2s((range?.endNS || 0) - (range?.startNS || 0));
-      this.c.moveTo(start_X, this.frame.y + 22);
-      this.c.lineTo(endX, this.frame.y + 22);
-      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 textWidth = this.c.measureText(txt).width;
+      this.context2D.moveTo(start_X, this.frame.y + 22);
+      this.context2D.lineTo(endX, this.frame.y + 22);
+      this.context2D.moveTo(start_X, this.frame.y + 22 - 5);
+      this.context2D.lineTo(start_X, this.frame.y + 22 + 5);
+      this.context2D.moveTo(endX, this.frame.y + 22 - 5);
+      this.context2D.lineTo(endX, this.frame.y + 22 + 5);
+      let textWidth = this.context2D.measureText(txt).width;
       if (lineWidth > textWidth) {
-        this.c.fillText(`${txt}`, start_X + (lineWidth - textWidth) / 2, this.frame.y + 20);
+        this.context2D.fillText(`${txt}`, start_X + (lineWidth - textWidth) / 2, this.frame.y + 20);
       } else {
         if (endX + textWidth >= this.frame.width) {
-          this.c.fillText(`${txt}`, start_X - 5 - textWidth, this.frame.y + 20);
+          this.context2D.fillText(`${txt}`, start_X - 5 - textWidth, this.frame.y + 20);
         } else {
-          this.c.fillText(`${txt}`, endX + 5, this.frame.y + 20);
+          this.context2D.fillText(`${txt}`, endX + 5, this.frame.y + 20);
         }
       }
-      this.c.stroke();
-      this.c.closePath();
+      this.context2D.stroke();
+      this.context2D.closePath();
     }
     if (this.invertedTriangleTime != null && typeof this.invertedTriangleTime != undefined) {
       this.drawInvertedTriangle(
@@ -302,15 +302,15 @@ export class SportRuler extends Graph {
   drawInvertedTriangle(time: number, color: string = '#000000') {
     if (time != null && typeof time != undefined) {
       let x = Math.round((this.rulerW * (time - this.range.startNS)) / (this.range.endNS - this.range.startNS));
-      this.c.beginPath();
-      this.c.fillStyle = color;
-      this.c.strokeStyle = color;
-      this.c.moveTo(x - 3, 141);
-      this.c.lineTo(x + 3, 141);
-      this.c.lineTo(x, 145);
-      this.c.fill();
-      this.c.closePath();
-      this.c.stroke();
+      this.context2D.beginPath();
+      this.context2D.fillStyle = color;
+      this.context2D.strokeStyle = color;
+      this.context2D.moveTo(x - 3, 141);
+      this.context2D.lineTo(x + 3, 141);
+      this.context2D.lineTo(x, 145);
+      this.context2D.fill();
+      this.context2D.closePath();
+      this.context2D.stroke();
     }
   }
 
@@ -402,89 +402,89 @@ export class SportRuler extends Graph {
       slicesTime.startX = startX;
       slicesTime.endX = endX;
 
-      this.c.beginPath();
-      this.c.strokeStyle = slicesTime.color;
-      this.c.fillStyle = slicesTime.color;
+      this.context2D.beginPath();
+      this.context2D.strokeStyle = slicesTime.color;
+      this.context2D.fillStyle = slicesTime.color;
       this.range.slicesTime.color = slicesTime.color; //紫色
 
-      this.c.moveTo(startX + TRIWIDTH, 132);
-      this.c.lineTo(startX, 142);
-      this.c.lineTo(startX, 132);
-      this.c.lineTo(startX + TRIWIDTH, 132);
+      this.context2D.moveTo(startX + TRIWIDTH, 132);
+      this.context2D.lineTo(startX, 142);
+      this.context2D.lineTo(startX, 132);
+      this.context2D.lineTo(startX + TRIWIDTH, 132);
 
-      this.c.lineTo(endX - TRIWIDTH, 132);
-      this.c.lineTo(endX, 132);
-      this.c.lineTo(endX, 142);
-      this.c.lineTo(endX - TRIWIDTH, 132);
-      this.c.closePath();
-      slicesTime.selected && this.c.fill();
-      this.c.stroke();
+      this.context2D.lineTo(endX - TRIWIDTH, 132);
+      this.context2D.lineTo(endX, 132);
+      this.context2D.lineTo(endX, 142);
+      this.context2D.lineTo(endX - TRIWIDTH, 132);
+      this.context2D.closePath();
+      slicesTime.selected && this.context2D.fill();
+      this.context2D.stroke();
 
-      this.c.beginPath();
+      this.context2D.beginPath();
       if (document.querySelector<SpApplication>('sp-application')!.dark) {
-        this.c.strokeStyle = '#FFF';
-        this.c.fillStyle = '#FFF';
+        this.context2D.strokeStyle = '#FFF';
+        this.context2D.fillStyle = '#FFF';
       } else {
-        this.c.strokeStyle = '#000';
-        this.c.fillStyle = '#000';
+        this.context2D.strokeStyle = '#000';
+        this.context2D.fillStyle = '#000';
       }
       let lineWidth = endX - startX;
       let txt = ns2s((slicesTime.endTime || 0) - (slicesTime.startTime || 0));
-      this.c.moveTo(startX, 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(endX, this.frame.y + 22 - 5);
-      this.c.lineTo(endX, this.frame.y + 22 + 5);
-      let txtWidth = this.c.measureText(txt).width;
-      this.c.fillStyle = '#FFF'; //为了解决文字重叠问题。在时间刻度的文字下面绘制一个小方块
-      this.c.fillRect(startX + (lineWidth - txtWidth) / 2, this.frame.y + 10, txtWidth + 2, 10);
-      this.c.fillStyle = 'black';
+      this.context2D.moveTo(startX, this.frame.y + 22);
+      this.context2D.lineTo(endX, this.frame.y + 22);
+      this.context2D.moveTo(startX, this.frame.y + 22 - 5);
+      this.context2D.lineTo(startX, this.frame.y + 22 + 5);
+      this.context2D.moveTo(endX, this.frame.y + 22 - 5);
+      this.context2D.lineTo(endX, this.frame.y + 22 + 5);
+      let txtWidth = this.context2D.measureText(txt).width;
+      this.context2D.fillStyle = '#FFF'; //为了解决文字重叠问题。在时间刻度的文字下面绘制一个小方块
+      this.context2D.fillRect(startX + (lineWidth - txtWidth) / 2, this.frame.y + 10, txtWidth + 2, 10);
+      this.context2D.fillStyle = 'black';
       if (lineWidth > txtWidth) {
-        this.c.fillText(`${txt}`, startX + (lineWidth - txtWidth) / 2, this.frame.y + 20);
+        this.context2D.fillText(`${txt}`, startX + (lineWidth - txtWidth) / 2, this.frame.y + 20);
       } else {
         if (endX + txtWidth >= this.frame.width) {
-          this.c.fillText(`${txt}`, startX - 5 - txtWidth, this.frame.y + 20);
+          this.context2D.fillText(`${txt}`, startX - 5 - txtWidth, this.frame.y + 20);
         } else {
-          this.c.fillText(`${txt}`, endX + 5, this.frame.y + 20);
+          this.context2D.fillText(`${txt}`, endX + 5, this.frame.y + 20);
         }
       }
-      this.c.stroke();
-      this.c.closePath();
+      this.context2D.stroke();
+      this.context2D.closePath();
     }
   }
 
   //绘制旗子
   drawFlag(x: number, color: string = '#999999', isFill: boolean = false, textStr: string = '', type: string = '') {
     if (x < 0) return;
-    this.c.beginPath();
-    this.c.fillStyle = color;
-    this.c.strokeStyle = color;
-    this.c.moveTo(x, 125);
+    this.context2D.beginPath();
+    this.context2D.fillStyle = color;
+    this.context2D.strokeStyle = color;
+    this.context2D.moveTo(x, 125);
     if (type == 'triangle') {
-      this.c.lineTo(x + 15, 131);
+      this.context2D.lineTo(x + 15, 131);
     } else {
-      this.c.lineTo(x + 10, 125);
-      this.c.lineTo(x + 10, 127);
-      this.c.lineTo(x + 18, 127);
-      this.c.lineTo(x + 18, 137);
-      this.c.lineTo(x + 10, 137);
-      this.c.lineTo(x + 10, 135);
+      this.context2D.lineTo(x + 10, 125);
+      this.context2D.lineTo(x + 10, 127);
+      this.context2D.lineTo(x + 18, 127);
+      this.context2D.lineTo(x + 18, 137);
+      this.context2D.lineTo(x + 10, 137);
+      this.context2D.lineTo(x + 10, 135);
     }
-    this.c.lineTo(x + 2, 135);
-    this.c.lineTo(x + 2, 142);
-    this.c.lineTo(x, 142);
-    this.c.closePath();
-    isFill && this.c.fill();
-    this.c.stroke();
+    this.context2D.lineTo(x + 2, 135);
+    this.context2D.lineTo(x + 2, 142);
+    this.context2D.lineTo(x, 142);
+    this.context2D.closePath();
+    isFill && this.context2D.fill();
+    this.context2D.stroke();
     if (textStr !== '') {
-      this.c.font = '10px Microsoft YaHei';
-      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(textStr, x + 23, 142);
-      this.c.stroke();
+      this.context2D.font = '10px Microsoft YaHei';
+      const { width } = this.context2D.measureText(textStr);
+      this.context2D.fillStyle = 'rgba(255, 255, 255, 0.8)'; //
+      this.context2D.fillRect(x + 21, 132, width + 4, 12);
+      this.context2D.fillStyle = 'black';
+      this.context2D.fillText(textStr, x + 23, 142);
+      this.context2D.stroke();
     }
   }
 
diff --git a/ide/src/trace/component/trace/timer-shaft/TabPaneFlag.ts b/ide/src/trace/component/trace/timer-shaft/TabPaneFlag.ts
index 6eebb50d1c2d8349b7071df64dd4bb53e638e34e..94b8a40fe7a7ecfff807afcd14438c4232bc3e26 100644
--- a/ide/src/trace/component/trace/timer-shaft/TabPaneFlag.ts
+++ b/ide/src/trace/component/trace/timer-shaft/TabPaneFlag.ts
@@ -81,7 +81,7 @@ export class TabPaneFlag extends BaseElement {
             flex-direction: column;
             padding: 10px 10px;
         }
-        .notes-editor-panel{
+        .flag-notes-editor-panel{
         display: flex;align-items: center
         }
         .flag-text{
@@ -99,21 +99,22 @@ export class TabPaneFlag extends BaseElement {
             outline: none;
             box-shadow: 1px 1px 1px var(--bark-prompt,#bebebe);
         }
-        .notes-editor-panel button {
+        .flag-notes-editor-panel button {
+            border: none;
+            cursor: pointer;
+            outline: inherit;
+            
             background: var(--dark-border1,#262f3c);
             color: white;
             border-radius: 10px;
             font-size: 10px;
-            height: 22px;
             line-height: 18px;
+            height: 22px;
             min-width: 7em;
             margin: auto 0 auto 1rem;
-
-            border: none;
-            cursor: pointer;
-            outline: inherit;
+        }
         </style>
-        <div class="notes-editor-panel">
+        <div class="flag-notes-editor-panel">
             <div class="flag-text">Annotation at <span id="flag-time"></span></div>
             <input style="flex: 1" class="flag-input" type="text" id="text-input"/>
             <span class="flag-text">Change color: <input style="background: var(--dark-background5,#FFFFFF);" type="color" id="color-input"/></span>
diff --git a/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts b/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts
index ef7ed2a0d55407b890704653a68b236d641dfc38..a802f4f8e38afdb7762a4588e7ebc5cdb1f52ece 100644
--- a/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts
+++ b/ide/src/trace/component/trace/timer-shaft/TimeRuler.ts
@@ -35,23 +35,23 @@ export class TimeRuler extends Graph {
     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.lineWidth = 1;
-    this.c.strokeStyle = '#999';
+    this.context2D.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height);
+    this.context2D.beginPath();
+    this.context2D.lineWidth = 1;
+    this.context2D.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);
+      this.context2D.moveTo(x, 0);
+      this.context2D.lineTo(x, this.frame.height);
       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.context2D.moveTo(x + Math.floor(inner_index * this.stepSmall), 0);
+        this.context2D.lineTo(x + Math.floor(inner_index * this.stepSmall), this.frame.height / 4);
       }
-      this.c.fillStyle = '#999';
-      this.c.fillText(`${ns2s(index * this.stepNS)}`, x + 5, this.frame.height - 1);
+      this.context2D.fillStyle = '#999';
+      this.context2D.fillText(`${ns2s(index * this.stepNS)}`, x + 5, this.frame.height - 1);
     }
-    this.c.stroke();
-    this.c.closePath();
+    this.context2D.stroke();
+    this.context2D.closePath();
   }
 }
diff --git a/ide/src/trace/database/SqlLite.ts b/ide/src/trace/database/SqlLite.ts
index aa29d078182ede50b44b2f935f6bf60fc4ce4919..5bae5e34eb882c4dba18068cce59c3f0c39b413b 100644
--- a/ide/src/trace/database/SqlLite.ts
+++ b/ide/src/trace/database/SqlLite.ts
@@ -1748,15 +1748,14 @@ export const queryHiPerfCpuData = (cpu: number): Promise<Array<any>> =>
     from perf_sample s,trace_range t 
     where 
         cpu_id=${cpu} 
-        and s.thread_id != 0
-        and s.callchain_id != -1;`,
+        and s.thread_id != 0;`,
     { $cpu: cpu }
   );
 export const queryHiPerfCpuMergeData = (): Promise<Array<any>> =>
   query(
     'queryHiPerfCpuData',
     `select s.callchain_id,(s.timestamp_trace-t.start_ts) startNS from perf_sample s,trace_range t 
-where s.thread_id != 0 and s.callchain_id != -1;`,
+where s.thread_id != 0;`,
     {}
   );
 export const queryHiPerfCpuMergeData2 = (): Promise<Array<any>> =>
@@ -1778,7 +1777,7 @@ SELECT sp.callchain_id,
 from perf_sample sp,
      trace_range tr
          left join perf_thread th on th.thread_id = sp.thread_id
-where pid = ${pid} and sp.thread_id != 0 and sp.callchain_id != -1;`,
+where pid = ${pid} and sp.thread_id != 0 `,
     { $pid: pid }
   );
 
@@ -1794,7 +1793,7 @@ SELECT sp.callchain_id,
 from perf_sample sp,
      trace_range tr
          left join perf_thread th on th.thread_id = sp.thread_id
-where tid = ${tid} and sp.thread_id != 0 and sp.callchain_id != -1;`,
+where tid = ${tid} and sp.thread_id != 0 ;`,
     { $tid: tid }
   );
 
@@ -1911,14 +1910,14 @@ export const queryTraceCpuTop = (): Promise<
 > =>
   query(
     'queryTraceCpuTop',
-    `SELECT 
-        itid AS tid, 
-        ipid AS pid, 
+    `SELECT
+         ipid AS pid,
+         itid AS tid, 
         group_concat(cpu, ',') AS cpu, 
-        group_concat(dur, ',') AS dur, 
+        group_concat(dur, ',') AS dur,
+        group_concat(avg_frequency, ',') AS avg_frequency,
         group_concat(min_freq, ',') AS min_freq, 
         group_concat(max_freq, ',') AS max_freq, 
-        group_concat(avg_frequency, ',') AS avg_frequency, 
         sum(dur * avg_frequency) AS sumNum 
         FROM 
         (SELECT 
@@ -2332,25 +2331,25 @@ export const getTabMemoryAbilityData = (
         sys_mem_measure AS m
         INNER JOIN sys_event_filter AS f ON m.filter_id = f.id 
         AND m.ts <= $leftNS 
-        AND (f.name = 'sys.mem.total' 
+        AND (f.name = 'sys.mem.total'
+         or f.name = 'sys.mem.kernel.stack'
          or f.name = 'sys.mem.free'
+         or f.name = 'sys.mem.swap.free'
+         or f.name = 'sys.mem.cma.free'
+         or f.name = 'sys.mem.inactive'
          or f.name = 'sys.mem.buffers'
          or f.name = 'sys.mem.cached' 
          or f.name = 'sys.mem.shmem'
          or f.name = 'sys.mem.slab'
          or f.name = 'sys.mem.swap.total'
-         or f.name = 'sys.mem.swap.free'
-         or f.name = 'sys.mem.mapped'
          or f.name = 'sys.mem.vmalloc.used'
          or f.name = 'sys.mem.page.tables'
-         or f.name = 'sys.mem.kernel.stack'
          or f.name = 'sys.mem.active'
-         or f.name = 'sys.mem.inactive'
          or f.name = 'sys.mem.unevictable'
          or f.name = 'sys.mem.vmalloc.total'
          or f.name = 'sys.mem.slab.unreclaimable'
          or f.name = 'sys.mem.cma.total'
-         or f.name = 'sys.mem.cma.free'
+         or f.name = 'sys.mem.mapped'
          or f.name = 'sys.mem.kernel.reclaimable'
          or f.name = 'sys.mem.zram'
          ) 
@@ -2827,8 +2826,8 @@ export const getTabPaneFilesystemStatisticsChild = (leftNs: number, rightNs: num
         max(dur)    as maxDuration,
         round(avg(dur),2)    as avgDuration,
         p.name,
-        f.type,
         p.pid,
+        f.type,
         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
diff --git a/ide/src/trace/database/SqlLiteWorker.ts b/ide/src/trace/database/SqlLiteWorker.ts
index 25e3d663cd47c835c91face9a380f8e0bcd1ba40..d6075928c363f8159567a04d678c31246503978c 100644
--- a/ide/src/trace/database/SqlLiteWorker.ts
+++ b/ide/src/trace/database/SqlLiteWorker.ts
@@ -36,12 +36,12 @@ function initIndexedDB() {
 
 function readConnection(store: IDBObjectStore) {
   return new Promise((resolve, reject) => {
-    let request = store.get(1);
-    request.onsuccess = function (event) {
+    let readRequest = store.get(1);
+    readRequest.onsuccess = function (event) {
       // @ts-ignore
       resolve(event.target.result);
     };
-    request.onerror = function (event) {
+    readRequest.onerror = function (event) {
       // @ts-ignore
       reject(event.target.result);
     };
@@ -50,12 +50,12 @@ function readConnection(store: IDBObjectStore) {
 
 function deleteConnection(store: IDBObjectStore, id: number) {
   return new Promise((resolve, reject) => {
-    let request = store.delete(id);
-    request.onsuccess = function (event) {
+    let deleteRequest = store.delete(id);
+    deleteRequest.onsuccess = function (event) {
       // @ts-ignore
       resolve(event.target.result);
     };
-    request.onerror = function (event) {
+    deleteRequest.onerror = function (event) {
       // @ts-ignore
       reject(event.target.result);
     };
diff --git a/ide/src/trace/database/TraceWorker.ts b/ide/src/trace/database/TraceWorker.ts
index bf5ff7b4d6591383485447909174fbb7c4ab524a..49a824996e24dace0882d2af0197b034ff037eab 100644
--- a/ide/src/trace/database/TraceWorker.ts
+++ b/ide/src/trace/database/TraceWorker.ts
@@ -473,13 +473,13 @@ function query(name: string, sql: string, params: any) {
   Module._TraceStreamerSqlQueryEx(sqlUintArray.length);
 }
 
-function querySdk(name: string, sql: string, params: any, action: string) {
-  if (params) {
-    Reflect.ownKeys(params).forEach((key: any) => {
-      if (typeof params[key] === 'string') {
-        sql = sql.replace(new RegExp(`\\${key}`, 'g'), `'${ params[key] }'`);
+function querySdk(name: string, sql: string, sdkParams: any, action: string) {
+  if (sdkParams) {
+    Reflect.ownKeys(sdkParams).forEach((key: any) => {
+      if (typeof sdkParams[key] === 'string') {
+        sql = sql.replace(new RegExp(`\\${key}`, 'g'), `'${ sdkParams[key] }'`);
       } else {
-        sql = sql.replace(new RegExp(`\\${key}`, 'g'), params[key]);
+        sql = sql.replace(new RegExp(`\\${key}`, 'g'), sdkParams[key]);
       }
     });
   }
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
index 1b6af208a331e027d86c362f570e7c1003286700..67c74687ceb753f36b019709ff9a43918fdf4621 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerCommon.ts
@@ -465,32 +465,32 @@ export function getProbablyTime(ns: number): string {
   return res;
 }
 
-export function timeMsFormat2p(ns: number): string {
-  let currentNs = ns;
-  let hour1 = 3600_000;
-  let minute1 = 60_000;
-  let second1 = 1_000; // 1 second
-  let res = '';
-  if (currentNs >= hour1) {
-    res += Math.floor(currentNs / hour1).toFixed(2) + 'h';
-    return res;
-  }
-  if (currentNs >= minute1) {
-    res += Math.floor(currentNs / minute1).toFixed(2) + 'min';
-    return res;
-  }
-  if (currentNs >= second1) {
-    res += Math.floor(currentNs / second1).toFixed(2) + 's';
-    return res;
+export function timeMsFormat2p(timeNs: number): string {
+  let currentNs = timeNs;
+  let oneHour = 3600_000;
+  let oneMinute1 = 60_000;
+  let oneSecond = 1_000; // 1 second
+  let commonResult = '';
+  if (currentNs >= oneHour) {
+    commonResult += Math.floor(currentNs / oneHour).toFixed(2) + 'h';
+    return commonResult;
+  }
+  if (currentNs >= oneMinute1) {
+    commonResult += Math.floor(currentNs / oneMinute1).toFixed(2) + 'min';
+    return commonResult;
+  }
+  if (currentNs >= oneSecond) {
+    commonResult += Math.floor(currentNs / oneSecond).toFixed(2) + 's';
+    return commonResult;
   }
   if (currentNs > 0) {
-    res += currentNs.toFixed(2) + 'ms';
-    return res;
+    commonResult += currentNs.toFixed(2) + 'ms';
+    return commonResult;
   }
-  if (res == '') {
-    res = '0s';
+  if (commonResult == '') {
+    commonResult = '0s';
   }
-  return res;
+  return commonResult;
 }
 
 export function formatRealDate(date: Date, fmt: string): string {
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
index 1d3a88cca5c25cdd38a01d5fab275538d423cc4f..5259a8083bc5ab8b5f6091924381aaf7ea16a550 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.ts
@@ -667,16 +667,16 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
     // @ts-ignore
     Object.values(this.currentTreeMapData).forEach((merageData: any) => {
       if (rootMerageMap[merageData.pid] == undefined) {
-        let processMerageData = new FileMerageBean(); //新增进程的节点数据
-        processMerageData.canCharge = false;
-        processMerageData.symbolName = merageData.processName;
-        processMerageData.symbol = processMerageData.symbolName;
-        processMerageData.children.push(merageData);
-        processMerageData.initChildren.push(merageData);
-        processMerageData.dur = merageData.dur;
-        processMerageData.count = merageData.count;
-        processMerageData.total = totalCount;
-        rootMerageMap[merageData.pid] = processMerageData;
+        let fileMerageBean = new FileMerageBean(); //新增进程的节点数据
+        fileMerageBean.canCharge = false;
+        fileMerageBean.symbolName = merageData.processName;
+        fileMerageBean.symbol = fileMerageBean.symbolName;
+        fileMerageBean.children.push(merageData);
+        fileMerageBean.initChildren.push(merageData);
+        fileMerageBean.dur = merageData.dur;
+        fileMerageBean.count = merageData.count;
+        fileMerageBean.total = totalCount;
+        rootMerageMap[merageData.pid] = fileMerageBean;
       } else {
         rootMerageMap[merageData.pid].children.push(merageData);
         rootMerageMap[merageData.pid].initChildren.push(merageData);
@@ -687,19 +687,19 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
       merageData.parentNode = rootMerageMap[merageData.pid]; //子节点添加父节点的引用
     });
     let id = 0;
-    this.currentTreeList.forEach((node) => {
-      node.total = totalCount;
-      this.setMerageName(node);
-      if (node.id == '') {
-        node.id = id + '';
+    this.currentTreeList.forEach((currentNode) => {
+      currentNode.total = totalCount;
+      this.setMerageName(currentNode);
+      if (currentNode.id == '') {
+        currentNode.id = id + '';
         id++;
       }
-      if (node.parentNode) {
-        if (node.parentNode.id == '') {
-          node.parentNode.id = id + '';
+      if (currentNode.parentNode) {
+        if (currentNode.parentNode.id == '') {
+          currentNode.parentNode.id = id + '';
           id++;
         }
-        node.parentId = node.parentNode.id;
+        currentNode.parentId = currentNode.parentNode.id;
       }
     });
     // @ts-ignore
@@ -784,14 +784,14 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
   }
   resolvingAction(params: any[]) {
     if (params.length > 0) {
-      params.forEach((item) => {
-        if (item.funcName && item.funcArgs) {
-          switch (item.funcName) {
+      params.forEach((paramItem) => {
+        if (paramItem.funcName && paramItem.funcArgs) {
+          switch (paramItem.funcName) {
             case 'getCallChainsBySampleIds':
-              this.freshCurrentCallChains(this.samplesList, item.funcArgs[0]);
+              this.freshCurrentCallChains(this.samplesList, paramItem.funcArgs[0]);
               break;
             case 'getCurrentDataFromDb':
-              this.queryCallChainsSamples(item.funcArgs[0]);
+              this.queryCallChainsSamples(paramItem.funcArgs[0]);
               break;
             case 'hideSystemLibrary':
               merageBeanDataSplit.hideSystemLibrary(this.allProcess, this.splitMapData);
@@ -800,35 +800,35 @@ where s.end_ts between $startTime + t.start_ts and $endTime + t.start_ts ${sql}
               merageBeanDataSplit.hideNumMaxAndMin(
                 this.allProcess,
                 this.splitMapData,
-                item.funcArgs[0],
-                item.funcArgs[1]
+                paramItem.funcArgs[0],
+                paramItem.funcArgs[1]
               );
               break;
             case 'splitAllProcess':
-              merageBeanDataSplit.splitAllProcess(this.allProcess, this.splitMapData, item.funcArgs[0]);
+              merageBeanDataSplit.splitAllProcess(this.allProcess, this.splitMapData, paramItem.funcArgs[0]);
               break;
             case 'resetAllNode':
               merageBeanDataSplit.resetAllNode(this.allProcess, this.currentTreeList, this.searchValue);
               break;
             case 'resotreAllNode':
-              merageBeanDataSplit.resotreAllNode(this.splitMapData, item.funcArgs[0]);
+              merageBeanDataSplit.resotreAllNode(this.splitMapData, paramItem.funcArgs[0]);
               break;
             case 'clearSplitMapData':
-              this.clearSplitMapData(item.funcArgs[0]);
+              this.clearSplitMapData(paramItem.funcArgs[0]);
               break;
             case 'splitTree':
               merageBeanDataSplit.splitTree(
                 this.splitMapData,
                 this.allProcess,
-                item.funcArgs[0],
-                item.funcArgs[1],
-                item.funcArgs[2],
+                paramItem.funcArgs[0],
+                paramItem.funcArgs[1],
+                paramItem.funcArgs[2],
                 this.currentTreeList,
                 this.searchValue
               );
               break;
             case 'setSearchValue':
-              this.searchValue = item.funcArgs[0];
+              this.searchValue = paramItem.funcArgs[0];
               break;
           }
         }
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
index 4e3536455388750b85ab7f87eb2c265bf2db94e6..4f926b0f451ff730f353f1bdd86066e6dee0c370 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.ts
@@ -500,92 +500,92 @@ where ts between start_ts and end_ts ${condition};
     let nativeMemoryType: number = paramMap.get('nativeMemoryType') as number;
     let totalNS: number = paramMap.get('totalNS') as number;
     let arr: Array<HeapStruct> = [];
-    let maxSize = 0,
-      maxDensity = 0,
-      minSize = 0,
-      minDensity = 0;
-    let tempSize = 0,
-      tempDensity = 0;
-    let filterLen = 0,
-      filterLevel = 0;
+    let nmMaxSize = 0;
+    let nmMaxDensity = 0;
+    let nmMinSize = 0;
+    let nmMinDensity = 0;
+    let nmTempSize = 0;
+    let nmTempDensity = 0;
+    let nmFilterLen = 0;
+    let nmFilterLevel = 0;
     let putArr = (ne: NativeEvent, filterLevel: number, finish: boolean) => {
-      let heap = new HeapStruct();
-      heap.startTime = ne.startTime;
+      let nmHeapStruct = new HeapStruct();
+      nmHeapStruct.startTime = ne.startTime;
       if (arr.length == 0) {
         if (ne.eventType == 0 || ne.eventType == 1) {
-          heap.density = 1;
-          heap.heapsize = ne.heapSize;
+          nmHeapStruct.density = 1;
+          nmHeapStruct.heapsize = ne.heapSize;
         } else {
-          heap.density = -1;
-          heap.heapsize = 0 - ne.heapSize;
+          nmHeapStruct.density = -1;
+          nmHeapStruct.heapsize = 0 - ne.heapSize;
         }
-        maxSize = heap.heapsize;
-        maxDensity = heap.density;
-        minSize = heap.heapsize;
-        minDensity = heap.density;
-        arr.push(heap);
+        nmMaxSize = nmHeapStruct.heapsize;
+        nmMaxDensity = nmHeapStruct.density;
+        nmMinSize = nmHeapStruct.heapsize;
+        nmMinDensity = nmHeapStruct.density;
+        arr.push(nmHeapStruct);
       } else {
         let last = arr[arr.length - 1];
-        last.dur = heap.startTime! - last.startTime!;
+        last.dur = nmHeapStruct.startTime! - last.startTime!;
         if (last.dur > filterLevel || finish) {
           if (ne.eventType == 0 || ne.eventType == 1) {
-            heap.density = last.density! + tempDensity + 1;
-            heap.heapsize = last.heapsize! + tempSize + ne.heapSize;
+            nmHeapStruct.density = last.density! + nmTempDensity + 1;
+            nmHeapStruct.heapsize = last.heapsize! + nmTempSize + ne.heapSize;
           } else {
-            heap.density = last.density! + tempDensity - 1;
-            heap.heapsize = last.heapsize! + tempSize - ne.heapSize;
+            nmHeapStruct.density = last.density! + nmTempDensity - 1;
+            nmHeapStruct.heapsize = last.heapsize! + nmTempSize - ne.heapSize;
           }
-          tempDensity = 0;
-          tempSize = 0;
-          if (heap.density > maxDensity) {
-            maxDensity = heap.density;
+          nmTempDensity = 0;
+          nmTempSize = 0;
+          if (nmHeapStruct.density > nmMaxDensity) {
+            nmMaxDensity = nmHeapStruct.density;
           }
-          if (heap.density < minDensity) {
-            minDensity = heap.density;
+          if (nmHeapStruct.density < nmMinDensity) {
+            nmMinDensity = nmHeapStruct.density;
           }
-          if (heap.heapsize > maxSize) {
-            maxSize = heap.heapsize;
+          if (nmHeapStruct.heapsize > nmMaxSize) {
+            nmMaxSize = nmHeapStruct.heapsize;
           }
-          if (heap.heapsize < minSize) {
-            minSize = heap.heapsize;
+          if (nmHeapStruct.heapsize < nmMinSize) {
+            nmMinSize = nmHeapStruct.heapsize;
           }
-          arr.push(heap);
+          arr.push(nmHeapStruct);
         } else {
           if (ne.eventType == 0 || ne.eventType == 1) {
-            tempDensity = tempDensity + 1;
-            tempSize = tempSize + ne.heapSize;
+            nmTempDensity = nmTempDensity + 1;
+            nmTempSize = nmTempSize + ne.heapSize;
           } else {
-            tempDensity = tempDensity - 1;
-            tempSize = tempSize - ne.heapSize;
+            nmTempDensity = nmTempDensity - 1;
+            nmTempSize = nmTempSize - ne.heapSize;
           }
         }
       }
     };
     if (nativeMemoryType == 1) {
       let temp = this.NATIVE_MEMORY_DATA.filter((ne) => ne.eventType === 0 || ne.eventType === 2);
-      filterLen = temp.length;
-      filterLevel = this.getFilterLevel(filterLen);
-      temp.map((ne, index) => putArr(ne, filterLevel, index === filterLen - 1));
+      nmFilterLen = temp.length;
+      nmFilterLevel = this.getFilterLevel(nmFilterLen);
+      temp.map((ne, index) => putArr(ne, nmFilterLevel, index === nmFilterLen - 1));
       temp.length = 0;
     } else if (nativeMemoryType == 2) {
       let temp = this.NATIVE_MEMORY_DATA.filter((ne) => ne.eventType === 1 || ne.eventType === 3);
-      filterLen = temp.length;
-      filterLevel = this.getFilterLevel(filterLen);
-      temp.map((ne, index) => putArr(ne, filterLevel, index === filterLen - 1));
+      nmFilterLen = temp.length;
+      nmFilterLevel = this.getFilterLevel(nmFilterLen);
+      temp.map((ne, index) => putArr(ne, nmFilterLevel, index === nmFilterLen - 1));
       temp.length = 0;
     } else {
-      filterLen = this.NATIVE_MEMORY_DATA.length;
-      let filterLevel = this.getFilterLevel(filterLen);
-      this.NATIVE_MEMORY_DATA.map((ne, index) => putArr(ne, filterLevel, index === filterLen - 1));
+      nmFilterLen = this.NATIVE_MEMORY_DATA.length;
+      let filterLevel = this.getFilterLevel(nmFilterLen);
+      this.NATIVE_MEMORY_DATA.map((ne, index) => putArr(ne, filterLevel, index === nmFilterLen - 1));
     }
     if (arr.length > 0) {
       arr[arr.length - 1].dur = totalNS - arr[arr.length - 1].startTime!;
     }
-    arr.map((heap) => {
-      heap.maxHeapSize = maxSize;
-      heap.maxDensity = maxDensity;
-      heap.minHeapSize = minSize;
-      heap.minDensity = minDensity;
+    arr.map((heapStruct) => {
+      heapStruct.maxHeapSize = nmMaxSize;
+      heapStruct.maxDensity = nmMaxDensity;
+      heapStruct.minHeapSize = nmMinSize;
+      heapStruct.minDensity = nmMinDensity;
     });
     this.chartComplete.set(nativeMemoryType, true);
     if (this.chartComplete.has(0) && this.chartComplete.has(1) && this.chartComplete.has(2)) {
@@ -948,30 +948,30 @@ where ts between start_ts and end_ts ${condition};
     this.currentTreeList = [];
     let totalSize = 0;
     let totalCount = 0;
-    samples.forEach((sample) => {
-      if (sample.eventId == -1) {
+    samples.forEach((nativeHookSample) => {
+      if (nativeHookSample.eventId == -1) {
         return;
       }
-      totalSize += sample.heapSize;
-      totalCount += sample.count || 1;
-      let callChains = this.createThreadSample(sample);
+      totalSize += nativeHookSample.heapSize;
+      totalCount += nativeHookSample.count || 1;
+      let callChains = this.createThreadSample(nativeHookSample);
       let topIndex = isTopDown ? 0 : callChains.length - 1;
       if (callChains.length > 0) {
         let root =
           this.currentTreeMapData[
-            sample.tid + '-' + (callChains[topIndex].symbolId || '') + '-' + (callChains[topIndex].fileId || '')
+            nativeHookSample.tid + '-' + (callChains[topIndex].symbolId || '') + '-' + (callChains[topIndex].fileId || '')
           ];
         if (root == undefined) {
           root = new NativeHookCallInfo();
-          root.threadName = sample.threadName;
+          root.threadName = nativeHookSample.threadName;
           this.currentTreeMapData[
-            sample.tid + '-' + (callChains[topIndex].symbolId || '') + '-' + (callChains[topIndex].fileId || '')
+            nativeHookSample.tid + '-' + (callChains[topIndex].symbolId || '') + '-' + (callChains[topIndex].fileId || '')
           ] = root;
           this.currentTreeList.push(root);
         }
-        NativeHookCallInfo.merageCallChainSample(root, callChains[topIndex], sample);
+        NativeHookCallInfo.merageCallChainSample(root, callChains[topIndex], nativeHookSample);
         if (callChains.length > 1) {
-          this.merageChildrenByIndex(root, callChains, topIndex, sample, isTopDown);
+          this.merageChildrenByIndex(root, callChains, topIndex, nativeHookSample, isTopDown);
         }
       }
     });
@@ -1003,20 +1003,20 @@ where ts between start_ts and end_ts ${condition};
       merageData.parentNode = rootMerageMap[merageData.tid]; //子节点添加父节点的引用
     });
     let id = 0;
-    this.currentTreeList.forEach((node) => {
-      node.totalCount = totalCount;
-      node.totalSize = totalSize;
-      this.setMerageName(node);
-      if (node.id == '') {
-        node.id = id + '';
+    this.currentTreeList.forEach((nmTreeNode) => {
+      nmTreeNode.totalCount = totalCount;
+      nmTreeNode.totalSize = totalSize;
+      this.setMerageName(nmTreeNode);
+      if (nmTreeNode.id == '') {
+        nmTreeNode.id = id + '';
         id++;
       }
-      if (node.parentNode) {
-        if (node.parentNode.id == '') {
-          node.parentNode.id = id + '';
+      if (nmTreeNode.parentNode) {
+        if (nmTreeNode.parentNode.id == '') {
+          nmTreeNode.parentNode.id = id + '';
           id++;
         }
-        node.parentId = node.parentNode.id;
+        nmTreeNode.parentId = nmTreeNode.parentNode.id;
       }
     });
     // @ts-ignore
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
index b2d02724c764165f46d8c7ec2081a30c7edfa37d..307581b54774b1a7b27cc20f547b629a88df97f6 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerPerf.ts
@@ -331,25 +331,25 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
     list.unshift(threadCallChain, threadStateCallChain);
   }
 
-  freshPerfCallchains(samples: PerfCountSample[], isTopDown: boolean) {
+  freshPerfCallchains(perfCountSamples: PerfCountSample[], isTopDown: boolean) {
     this.currentTreeMapData = {};
     this.currentTreeList = [];
-    let totalCount = 0;
-    samples.forEach((sample) => {
-      totalCount += sample.count;
-      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);
+    let totalSamplesCount = 0;
+    perfCountSamples.forEach((perfSample) => {
+      totalSamplesCount += perfSample.count;
+      if (this.callChainData[perfSample.sampleId] && this.callChainData[perfSample.sampleId].length > 0) {
+        let perfCallChains = [...this.callChainData[perfSample.sampleId]];
+        this.addOtherCallchainsData(perfSample, perfCallChains);
+        let topIndex = isTopDown ? 0 : perfCallChains.length - 1;
+        if (perfCallChains.length > 0) {
+          let perfRootNode = this.currentTreeMapData[perfCallChains[topIndex].name + perfSample.pid];
+          if (perfRootNode == undefined) {
+            perfRootNode = new PerfCallChainMerageData();
+            this.currentTreeMapData[perfCallChains[topIndex].name + perfSample.pid] = perfRootNode;
+            this.currentTreeList.push(perfRootNode);
           }
-          PerfCallChainMerageData.merageCallChainSample(root, callChains[topIndex], sample, false);
-          this.mergeChildrenByIndex(root, callChains, topIndex, sample, isTopDown);
+          PerfCallChainMerageData.merageCallChainSample(perfRootNode, perfCallChains[topIndex], perfSample, false);
+          this.mergeChildrenByIndex(perfRootNode, perfCallChains, topIndex, perfSample, isTopDown);
         }
       }
     });
@@ -357,40 +357,40 @@ export class ProcedureLogicWorkerPerf extends LogicHandler {
     // @ts-ignore
     Object.values(this.currentTreeMapData).forEach((merageData: any) => {
       if (rootMerageMap[merageData.pid] == undefined) {
-        let processMerageData = new PerfCallChainMerageData(); //新增进程的节点数据
-        processMerageData.canCharge = false;
-        processMerageData.symbolName =
+        let perfProcessMerageData = new PerfCallChainMerageData(); //新增进程的节点数据
+        perfProcessMerageData.canCharge = false;
+        perfProcessMerageData.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 = totalCount;
-        rootMerageMap[merageData.pid] = processMerageData;
+        perfProcessMerageData.symbol = perfProcessMerageData.symbolName;
+        perfProcessMerageData.tid = merageData.tid;
+        perfProcessMerageData.children.push(merageData);
+        perfProcessMerageData.initChildren.push(merageData);
+        perfProcessMerageData.dur = merageData.dur;
+        perfProcessMerageData.count = merageData.dur;
+        perfProcessMerageData.total = totalSamplesCount;
+        rootMerageMap[merageData.pid] = perfProcessMerageData;
       } 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 = totalCount;
+        rootMerageMap[merageData.pid].total = totalSamplesCount;
       }
       merageData.parentNode = rootMerageMap[merageData.pid]; //子节点添加父节点的引用
     });
     let id = 0;
-    this.currentTreeList.forEach((node) => {
-      node.total = totalCount;
-      if (node.id == '') {
-        node.id = id + '';
+    this.currentTreeList.forEach((perfTreeNode) => {
+      perfTreeNode.total = totalSamplesCount;
+      if (perfTreeNode.id == '') {
+        perfTreeNode.id = id + '';
         id++;
       }
-      if (node.parentNode) {
-        if (node.parentNode.id == '') {
-          node.parentNode.id = id + '';
+      if (perfTreeNode.parentNode) {
+        if (perfTreeNode.parentNode.id == '') {
+          perfTreeNode.parentNode.id = id + '';
           id++;
         }
-        node.parentId = node.parentNode.id;
+        perfTreeNode.parentId = perfTreeNode.parentNode.id;
       }
     });
     // @ts-ignore
@@ -938,16 +938,16 @@ export class PerfThread {
 }
 
 export class PerfCallChain {
-  tid: number = 0;
-  pid: number = 0;
-  name: string = '';
-  fileName: string = '';
-  threadState: string = '';
   startNS: number = 0;
   dur: number = 0;
   sampleId: number = 0;
   callChainId: number = 0;
   vaddrInFile: number = 0;
+  tid: number = 0;
+  pid: number = 0;
+  name: string = '';
+  fileName: string = '';
+  threadState: string = '';
   fileId: number = 0;
   symbolId: number = 0;
   path: string = '';
@@ -1132,25 +1132,25 @@ export function timeMsFormat2p(ns: number) {
   let hour1 = 3600_000;
   let minute1 = 60_000;
   let second1 = 1_000; // 1 second
-  let res = '';
+  let perfResult = '';
   if (currentNs >= hour1) {
-    res += Math.floor(currentNs / hour1).toFixed(2) + 'h';
-    return res;
+    perfResult += Math.floor(currentNs / hour1).toFixed(2) + 'h';
+    return perfResult;
   }
   if (currentNs >= minute1) {
-    res += Math.floor(currentNs / minute1).toFixed(2) + 'min';
-    return res;
+    perfResult += Math.floor(currentNs / minute1).toFixed(2) + 'min';
+    return perfResult;
   }
   if (currentNs >= second1) {
-    res += Math.floor(currentNs / second1).toFixed(2) + 's';
-    return res;
+    perfResult += Math.floor(currentNs / second1).toFixed(2) + 's';
+    return perfResult;
   }
   if (currentNs > 0) {
-    res += currentNs.toFixed(2) + 'ms';
-    return res;
+    perfResult += currentNs.toFixed(2) + 'ms';
+    return perfResult;
   }
-  if (res == '') {
-    res = '0s';
+  if (perfResult == '') {
+    perfResult = '0s';
   }
-  return res;
+  return perfResult;
 }
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSPT.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSPT.ts
index 724b853da8f90f307a30cc3c8271ed9fd87ba200..e72ee5c0a7b6a1070c68f08d29feb93ea0b3100a 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSPT.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSPT.ts
@@ -105,42 +105,6 @@ where IP.pid not null;
     );
   }
 
-  getSPT() {
-    this.queryData(
-      'spt-getStatesProcessThreadData',
-      `
-    select
-      IP.name as process,
-      IP.pid as processId,
-      A.name as thread,
-      B.state as state,
-      A.tid as threadId,
-      B.dur,
-      (B.ts - TR.start_ts + B.dur) as end_ts,
-      (B.ts - TR.start_ts) as start_ts,
-      B.cpu
-    from
-      thread_state as B
-    left join
-      thread as A
-    on
-      B.itid = A.id
-    left join
-      process as IP
-    on
-      A.ipid = IP.id
-    left join
-      trace_range as TR
-    where
-      B.dur > 0
-    and
-      IP.pid not null
-    and (B.ts - TR.start_ts) >= 0;
-`,
-      {}
-    );
-  }
-
   initProcessThreadStateData() {
     let mapTp: Map<number, ThreadProcess> = new Map<number, ThreadProcess>();
     for (let tp of this.arrTp) {
diff --git a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts
index 8b98a4c7bd0a3618f43b35ff41952fa76373222d..383bd7858fc7f7c243b5972678b3c4bde3b1f1b1 100644
--- a/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts
+++ b/ide/src/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.ts
@@ -471,20 +471,20 @@ where cpu not null
         .slice(0, 20);
       target.set(
         key,
-        cpuArr.map((it) => {
+        cpuArr.map((irqBean) => {
           return {
-            cpu: it.cpu,
-            value: it.value,
-            sum: it.sum,
-            sumTimeStr: getProbablyTime(it.sum),
-            min: getProbablyTime(it.min),
-            max: getProbablyTime(it.max),
-            avg: getProbablyTime(it.avg),
-            minValue: it.min,
-            maxValue: it.max,
-            avgValue: it.avg,
-            ratio: ((it.sum / (sumMap.get(key) || 1)) * 100).toFixed(2),
-            block: it.block,
+            cpu: irqBean.cpu,
+            value: irqBean.value,
+            sum: irqBean.sum,
+            sumTimeStr: getProbablyTime(irqBean.sum),
+            min: getProbablyTime(irqBean.min),
+            max: getProbablyTime(irqBean.max),
+            avg: getProbablyTime(irqBean.avg),
+            minValue: irqBean.min,
+            maxValue: irqBean.max,
+            avgValue: irqBean.avg,
+            ratio: ((irqBean.sum / (sumMap.get(key) || 1)) * 100).toFixed(2),
+            block: irqBean.block,
           } as any;
         })
       );
@@ -630,21 +630,21 @@ where cpu not null
         .slice(0, 20);
       target.set(
         key,
-        cpuArr.map((it) => {
+        cpuArr.map((cpuAnalysisBean) => {
           return {
-            cpu: it.cpu,
-            value: it.value,
-            sum: it.sum,
-            sumTimeStr: getProbablyTime(it.sum),
-            min: getProbablyTime(it.min),
-            minValue: it.min,
-            max: getProbablyTime(it.max),
-            maxValue: it.max,
-            avgValue: it.avg,
-            avg: getProbablyTime(it.avg),
-            count: it.count,
-            ratio: ((it.sum / (sumMap.get(key) || 1)) * 100).toFixed(2),
-            block: it.block,
+            cpu: cpuAnalysisBean.cpu,
+            value: cpuAnalysisBean.value,
+            sum: cpuAnalysisBean.sum,
+            sumTimeStr: getProbablyTime(cpuAnalysisBean.sum),
+            min: getProbablyTime(cpuAnalysisBean.min),
+            minValue: cpuAnalysisBean.min,
+            max: getProbablyTime(cpuAnalysisBean.max),
+            maxValue: cpuAnalysisBean.max,
+            avgValue: cpuAnalysisBean.avg,
+            avg: getProbablyTime(cpuAnalysisBean.avg),
+            count: cpuAnalysisBean.count,
+            ratio: ((cpuAnalysisBean.sum / (sumMap.get(key) || 1)) * 100).toFixed(2),
+            block: cpuAnalysisBean.block,
           } as any;
         })
       );
@@ -654,29 +654,7 @@ where cpu not null
 
   handlerFreqThreadData(arr: FreqThread[]) {
     let cpuFreqArr: CpuMeasure[] = (this.cpuFreqMap.get(this.cpu) || []).filter((it) => it.value === this.freq);
-    let map: Map<
-      number,
-      {
-        tid: number;
-        tName: string;
-        pid: number;
-        pName: string;
-        dur: number;
-        durStr: string;
-        ratio: string;
-      }
-    > = new Map<
-      number,
-      {
-        tid: number;
-        tName: string;
-        pid: number;
-        pName: string;
-        dur: number;
-        durStr: string;
-        ratio: string;
-      }
-    >();
+    let map: Map<number, { tid: number; tName: string; pid: number; pName: string; dur: number; durStr: string; ratio: string; }> = new Map();
     let sumFreqDur = 0;
     cpuFreqArr.map((it) => {
       sumFreqDur += it.dur;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts
index 635e9262b8b3fda62c3304cf9cc47748aea7af08..e6adb94806ce62004bb66745ad17b0e18b4eee02 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerAppStartup.ts
@@ -24,38 +24,41 @@ export class AppStartupRender {
   renderMainThread(
     req: {
       useCache: boolean;
-      context: CanvasRenderingContext2D;
+      appStartupContext: CanvasRenderingContext2D;
       type: string;
     },
-    row: TraceRow<AppStartupStruct>
+    appStartUpRow: TraceRow<AppStartupStruct>
   ): void {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let list = appStartUpRow.dataList;
+    let filter = appStartUpRow.dataListCache;
     dataFilterHandler(list, filter, {
       startKey: 'startTs',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
       endNS: TraceRow.range?.endNS ?? 0,
       totalNS: TraceRow.range?.totalNS ?? 0,
-      frame: row.frame,
+      frame: appStartUpRow.frame,
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.globalAlpha = 0.6;
+    req.appStartupContext.globalAlpha = 0.6;
     let find = false;
     let offset = 3;
     for (let re of filter) {
-      AppStartupStruct.draw(req.context, re);
-      if (row.isHover) {
-        if (re.frame && row.hoverX >= re.frame.x - offset && row.hoverX <= re.frame.x + re.frame.width + offset) {
+      AppStartupStruct.draw(req.appStartupContext, re);
+      if (appStartUpRow.isHover) {
+        if (re.frame && appStartUpRow.hoverX >= re.frame.x - offset &&
+          appStartUpRow.hoverX <= re.frame.x + re.frame.width + offset
+        ) {
           AppStartupStruct.hoverStartupStruct = re;
           find = true;
         }
       }
     }
-    if (!find && row.isHover) AppStartupStruct.hoverStartupStruct = undefined;
+    if (!find && appStartUpRow.isHover) {
+      AppStartupStruct.hoverStartupStruct = undefined;
+    }
   }
-
 }
 
 const padding = 3;
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts
index 63af2899e5c52f7b64192485a64326e5b2182663..9699f75585176060edb114b8b5c1e39340ad6794 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCPU.ts
@@ -34,29 +34,29 @@ export class EmptyRender extends Render {
     req.context.beginPath();
     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();
+  render(cpuReqMessage: RequestMessage, list: Array<any>, filter: Array<any>) {
+    if (cpuReqMessage.canvas) {
+      cpuReqMessage.context.clearRect(0, 0, cpuReqMessage.frame.width, cpuReqMessage.frame.height);
+      cpuReqMessage.context.beginPath();
+      drawLines(cpuReqMessage.context, cpuReqMessage.xs, cpuReqMessage.frame.height, cpuReqMessage.lineColor);
+      drawSelection(cpuReqMessage.context, cpuReqMessage.params);
+      cpuReqMessage.context.closePath();
       drawFlagLine(
-        cpuReq.context,
-        cpuReq.flagMoveInfo,
-        cpuReq.flagSelectedInfo,
-        cpuReq.startNS,
-        cpuReq.endNS,
-        cpuReq.totalNS,
-        cpuReq.frame,
-        cpuReq.slicesTime
+        cpuReqMessage.context,
+        cpuReqMessage.flagMoveInfo,
+        cpuReqMessage.flagSelectedInfo,
+        cpuReqMessage.startNS,
+        cpuReqMessage.endNS,
+        cpuReqMessage.totalNS,
+        cpuReqMessage.frame,
+        cpuReqMessage.slicesTime
       );
     }
     // @ts-ignore
     self.postMessage({
-      id: cpuReq.id,
-      type: cpuReq.type,
-      results: cpuReq.canvas ? undefined : filter,
+      id: cpuReqMessage.id,
+      type: cpuReqMessage.type,
+      results: cpuReqMessage.canvas ? undefined : filter,
       hover: null,
     });
   }
@@ -65,7 +65,7 @@ export class EmptyRender extends Render {
 export class CpuRender {
   renderMainThread(
     req: {
-      context: CanvasRenderingContext2D;
+      cpuRenderContext: CanvasRenderingContext2D;
       useCache: boolean;
       type: string;
       translateY: number;
@@ -84,16 +84,16 @@ export class CpuRender {
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
-    req.context.font = '11px sans-serif';
+    req.cpuRenderContext.beginPath();
+    req.cpuRenderContext.font = '11px sans-serif';
     cpuFilter.forEach((re) => {
       re.translateY = req.translateY;
-      CpuStruct.draw(req.context, re, req.translateY);
+      CpuStruct.draw(req.cpuRenderContext, re, req.translateY);
     });
-    req.context.closePath();
+    req.cpuRenderContext.closePath();
     let currentCpu = parseInt(req.type!.replace('cpu-data-', ''));
     drawWakeUp(
-      req.context,
+      req.cpuRenderContext,
       CpuStruct.wakeupBean,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
@@ -108,7 +108,7 @@ export class CpuRender {
         return;
       }
       drawWakeUpList(
-        req.context,
+        req.cpuRenderContext,
         SpSystemTrace.wakeupList[i + 1],
         TraceRow.range!.startNS,
         TraceRow.range!.endNS,
@@ -426,8 +426,8 @@ export class WakeupBean {
   thread: string | undefined;
   tid: number | undefined;
   schedulingLatency: number | undefined;
-  schedulingDesc: string | undefined;
   ts: number | undefined;
+  schedulingDesc: string | undefined;
   itid: number | undefined;
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
index 7290a39534d928ccfcd9472ea13de569645cad46..4d61add777349d91b8a764dcc05a52564980f314 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
@@ -120,24 +120,24 @@ class FilterConfig {
   paddingTop: number = 0;
 }
 
-export function fillCacheData(filterData: Array<any>, condition: FilterConfig): boolean {
-  if (condition.useCache && filterData.length > 0) {
+export function fillCacheData(filterList: Array<any>, condition: FilterConfig): boolean {
+  if (condition.useCache && filterList.length > 0) {
     let pns = (condition.endNS - condition.startNS) / condition.frame.width;
     let y = condition.frame.y + condition.paddingTop;
     let height = condition.frame.height - condition.paddingTop * 2;
-    for (let i = 0, len = filterData.length; i < len; i++) {
-      let it = filterData[i];
+    for (let i = 0, len = filterList.length; i < len; i++) {
+      let it = filterList[i];
       if (
         (it[condition.startKey] || 0) + (it[condition.durKey] || 0) > condition.startNS &&
         (it[condition.startKey] || 0) < condition.endNS
       ) {
-        if (!filterData[i].frame) {
-          filterData[i].frame = {};
-          filterData[i].frame.y = y;
-          filterData[i].frame.height = height;
+        if (!filterList[i].frame) {
+          filterList[i].frame = {};
+          filterList[i].frame.y = y;
+          filterList[i].frame.height = height;
         }
         setNodeFrame(
-          filterData[i],
+          filterList[i],
           pns,
           condition.startNS,
           condition.endNS,
@@ -146,7 +146,7 @@ export function fillCacheData(filterData: Array<any>, condition: FilterConfig):
           condition.durKey
         );
       } else {
-        filterData[i].frame = null;
+        filterList[i].frame = null;
       }
     }
     return true;
@@ -174,8 +174,10 @@ export function findRange(fullData: Array<any>, condition: FilterConfig): Array<
   return slice;
 }
 
-export function dataFilterHandler(fullData: Array<any>, filterData: Array<any>, condition: FilterConfig) {
-  if (fillCacheData(filterData, condition)) return;
+export function dataFilterHandler(fullData: Array<any>, filterData: Array<any>, condition: FilterConfig): void {
+  if (fillCacheData(filterData, condition)) {
+    return;
+  }
   if (fullData) {
     filterData.length = 0;
     let pns = (condition.endNS - condition.startNS) / condition.frame.width; //每个像素多少ns
@@ -535,7 +537,7 @@ export function drawFlagLineSegment(ctx: any, hoverFlag: any, selectFlag: any, f
   }
 }
 
-export function drawSelection(context: any, params: any) {
+export function drawSelection(ctx: any, params: any) {
   if (params.isRangeSelect && params.rangeSelectObject) {
     params.rangeSelectObject!.startX = Math.floor(
       ns2x(params.rangeSelectObject!.startNS!, params.startNS, params.endNS, params.totalNS, params.frame)
@@ -543,16 +545,16 @@ export function drawSelection(context: any, params: any) {
     params.rangeSelectObject!.endX = Math.floor(
       ns2x(params.rangeSelectObject!.endNS!, params.startNS, params.endNS, params.totalNS, params.frame)
     );
-    if (context) {
-      context.globalAlpha = 0.5;
-      context.fillStyle = '#666666';
-      context.fillRect(
+    if (ctx) {
+      ctx.globalAlpha = 0.5;
+      ctx.fillStyle = '#666666';
+      ctx.fillRect(
         params.rangeSelectObject!.startX!,
         params.frame.y,
         params.rangeSelectObject!.endX! - params.rangeSelectObject!.startX!,
         params.frame.height
       );
-      context.globalAlpha = 1;
+      ctx.globalAlpha = 1;
     }
   }
 }
@@ -593,69 +595,69 @@ export function drawSelectionRange(context: any, params: TraceRow<any>) {
 }
 
 export function drawWakeUp(
-  context: CanvasRenderingContext2D | any,
+  wakeUpContext: CanvasRenderingContext2D | any,
   wake: WakeupBean | undefined | null,
   startNS: number,
   endNS: number,
   totalNS: number,
   frame: Rect,
   selectCpuStruct: CpuStruct | undefined = undefined,
-  currentCpu: number | undefined = undefined,
+  wakeUpCurrentCpu: number | undefined = undefined,
   noVerticalLine = false
 ) {
   if (wake) {
     let x1 = Math.floor(ns2x(wake.wakeupTime || 0, startNS, endNS, totalNS, frame));
-    context.beginPath();
-    context.lineWidth = 2;
-    context.fillStyle = '#000000';
+    wakeUpContext.beginPath();
+    wakeUpContext.lineWidth = 2;
+    wakeUpContext.fillStyle = '#000000';
     if (x1 > 0 && x1 < frame.x + frame.width) {
       if (!noVerticalLine) {
-        context.moveTo(x1, frame.y);
-        context.lineTo(x1, frame.y + frame.height);
+        wakeUpContext.moveTo(x1, frame.y);
+        wakeUpContext.lineTo(x1, frame.y + frame.height);
       }
-      if (currentCpu == wake.cpu) {
+      if (wakeUpCurrentCpu == wake.cpu) {
         let centerY = Math.floor(frame.y + frame.height / 2);
-        context.moveTo(x1, centerY - 6);
-        context.lineTo(x1 + 4, centerY);
-        context.lineTo(x1, centerY + 6);
-        context.lineTo(x1 - 4, centerY);
-        context.lineTo(x1, centerY - 6);
-        context.fill();
+        wakeUpContext.moveTo(x1, centerY - 6);
+        wakeUpContext.lineTo(x1 + 4, centerY);
+        wakeUpContext.lineTo(x1, centerY + 6);
+        wakeUpContext.lineTo(x1 - 4, centerY);
+        wakeUpContext.lineTo(x1, centerY - 6);
+        wakeUpContext.fill();
       }
     }
     if (selectCpuStruct) {
       let x2 = Math.floor(ns2x(selectCpuStruct.startTime || 0, startNS, endNS, totalNS, frame));
       let y = frame.y + frame.height - 10;
-      context.moveTo(x1, y);
-      context.lineTo(x2, y);
+      wakeUpContext.moveTo(x1, y);
+      wakeUpContext.lineTo(x2, y);
 
       let s = ns2s((selectCpuStruct.startTime || 0) - (wake.wakeupTime || 0));
       let distance = x2 - x1;
       if (distance > 12) {
-        context.moveTo(x1, y);
-        context.lineTo(x1 + 6, y - 3);
-        context.moveTo(x1, y);
-        context.lineTo(x1 + 6, y + 3);
-        context.moveTo(x2, y);
-        context.lineTo(x2 - 6, y - 3);
-        context.moveTo(x2, y);
-        context.lineTo(x2 - 6, y + 3);
-        let measure = context.measureText(s);
+        wakeUpContext.moveTo(x1, y);
+        wakeUpContext.lineTo(x1 + 6, y - 3);
+        wakeUpContext.moveTo(x1, y);
+        wakeUpContext.lineTo(x1 + 6, y + 3);
+        wakeUpContext.moveTo(x2, y);
+        wakeUpContext.lineTo(x2 - 6, y - 3);
+        wakeUpContext.moveTo(x2, y);
+        wakeUpContext.lineTo(x2 - 6, y + 3);
+        let measure = wakeUpContext.measureText(s);
         let tHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
         let xStart = x1 + Math.floor(distance / 2 - measure.width / 2);
         if (distance > measure.width + 4) {
-          context.fillStyle = '#ffffff';
-          context.fillRect(xStart - 2, y - 4 - tHeight, measure.width + 4, tHeight + 4);
-          context.font = '10px solid';
-          context.fillStyle = '#000000';
-          context.textBaseline = 'bottom';
-          context.fillText(s, xStart, y - 2);
+          wakeUpContext.fillStyle = '#ffffff';
+          wakeUpContext.fillRect(xStart - 2, y - 4 - tHeight, measure.width + 4, tHeight + 4);
+          wakeUpContext.font = '10px solid';
+          wakeUpContext.fillStyle = '#000000';
+          wakeUpContext.textBaseline = 'bottom';
+          wakeUpContext.fillText(s, xStart, y - 2);
         }
       }
     }
-    context.strokeStyle = '#000000';
-    context.stroke();
-    context.closePath();
+    wakeUpContext.strokeStyle = '#000000';
+    wakeUpContext.stroke();
+    wakeUpContext.closePath();
   }
 }
 
@@ -694,22 +696,22 @@ export function drawLinkLines(
 }
 
 function drawBezierCurve(it: PairPoint[], maxWidth: number, context: CanvasRenderingContext2D, percentage: number) {
-  let start = it[0].x > it[1].x ? it[1] : it[0];
-  let end = it[0].x > it[1].x ? it[0] : it[1];
-  if (start && end) {
+  let bezierCurveStart = it[0].x > it[1].x ? it[1] : it[0];
+  let bezierCurveEnd = it[0].x > it[1].x ? it[0] : it[1];
+  if (bezierCurveStart && bezierCurveEnd) {
     //左移到边界，不画线
-    if (start.x <= 0) {
-      start.x = -100;
+    if (bezierCurveStart.x <= 0) {
+      bezierCurveStart.x = -100;
     }
-    if (end.x <= 0) {
-      end.x = -100;
+    if (bezierCurveEnd.x <= 0) {
+      bezierCurveEnd.x = -100;
     }
     //右移到边界，不画线
-    if (start.x >= maxWidth) {
-      start.x = maxWidth + 100;
+    if (bezierCurveStart.x >= maxWidth) {
+      bezierCurveStart.x = maxWidth + 100;
     }
-    if (end.x >= maxWidth) {
-      end.x = maxWidth + 100;
+    if (bezierCurveEnd.x >= maxWidth) {
+      bezierCurveEnd.x = maxWidth + 100;
     }
     context.beginPath();
     context.lineWidth = 2;
@@ -723,29 +725,29 @@ function drawBezierCurve(it: PairPoint[], maxWidth: number, context: CanvasRende
     let y2;
     let x3;
     let y3;
-    x0 = start.x ?? 0;
-    y0 = start.y ?? 0;
-    x3 = end.x ?? 0;
-    y3 = end.y ?? 0;
-    if (end.isRight) {
+    x0 = bezierCurveStart.x ?? 0;
+    y0 = bezierCurveStart.y ?? 0;
+    x3 = bezierCurveEnd.x ?? 0;
+    y3 = bezierCurveEnd.y ?? 0;
+    if (bezierCurveEnd.isRight) {
       x2 = x3 - 100 * percentage;
     } else {
       x2 = x3 + 100 * percentage;
     }
     y2 = y3 - 40 * percentage;
-    if (start.isRight) {
+    if (bezierCurveStart.isRight) {
       x1 = x0 - 100 * percentage;
     } else {
       x1 = x0 + 100 * percentage;
     }
     y1 = y0 + 40 * percentage;
     //向右箭头终点在x轴正向有偏移
-    if (!start.isRight) {
+    if (!bezierCurveStart.isRight) {
       x0 -= 5;
     }
     context.moveTo(x0, y0);
     //箭头向左还是向右
-    if (start.isRight) {
+    if (bezierCurveStart.isRight) {
       context.lineTo(x0 - wid, y0 + wid);
       context.moveTo(x0, y0);
       context.lineTo(x0 - wid, y0 - wid);
@@ -758,7 +760,7 @@ function drawBezierCurve(it: PairPoint[], maxWidth: number, context: CanvasRende
     context.bezierCurveTo(x1, y1, x2, y2, x3, y3);
     context.moveTo(x3, y3);
     //箭头向左还是向右
-    if (end.isRight) {
+    if (bezierCurveEnd.isRight) {
       context.lineTo(x3 - wid, y3 + wid);
       context.moveTo(x3, y3);
       context.lineTo(x3 - wid, y3 - wid);
@@ -774,21 +776,21 @@ function drawBezierCurve(it: PairPoint[], maxWidth: number, context: CanvasRende
 }
 
 function drawBrokenLine(it: PairPoint[], maxWidth: number, context: CanvasRenderingContext2D) {
-  let start = it[0].x > it[1].x ? it[1] : it[0];
-  let end = it[0].x > it[1].x ? it[0] : it[1];
-  if (start && end) {
-    if (start.x <= 0) {
-      start.x = -100;
+  let brokenLineStart = it[0].x > it[1].x ? it[1] : it[0];
+  let brokenLineEnd = it[0].x > it[1].x ? it[0] : it[1];
+  if (brokenLineStart && brokenLineEnd) {
+    if (brokenLineStart.x <= 0) {
+      brokenLineStart.x = -100;
     }
-    if (end.x <= 0) {
-      end.x = -100;
+    if (brokenLineEnd.x <= 0) {
+      brokenLineEnd.x = -100;
     }
     //右移到边界，不画线
-    if (start.x >= maxWidth) {
-      start.x = maxWidth + 100;
+    if (brokenLineStart.x >= maxWidth) {
+      brokenLineStart.x = maxWidth + 100;
     }
-    if (end.x >= maxWidth) {
-      end.x = maxWidth + 100;
+    if (brokenLineEnd.x >= maxWidth) {
+      brokenLineEnd.x = maxWidth + 100;
     }
     context.beginPath();
     context.lineWidth = 2;
@@ -800,26 +802,26 @@ function drawBrokenLine(it: PairPoint[], maxWidth: number, context: CanvasRender
     let y1;
     let x2;
     let y2;
-    x0 = start.x ?? 0;
-    y0 = start.y ?? 0;
-    y2 = end.y ?? 0;
-    x2 = end.x ?? 0;
+    x0 = brokenLineStart.x ?? 0;
+    y0 = brokenLineStart.y ?? 0;
+    y2 = brokenLineEnd.y ?? 0;
+    x2 = brokenLineEnd.x ?? 0;
     let leftEndpointX;
     let leftEndpointY;
     let rightEndpointX;
     let rightEndpointY;
 
-    if (start.y < end.y) {
-      x1 = start.x ?? 0;
-      y1 = end.y ?? 0;
+    if (brokenLineStart.y < brokenLineEnd.y) {
+      x1 = brokenLineStart.x ?? 0;
+      y1 = brokenLineEnd.y ?? 0;
       leftEndpointX = x2 - wid;
       leftEndpointY = y2 - wid;
       rightEndpointX = x2 - wid;
       rightEndpointY = y2 + wid;
     } else {
-      x2 = end.x - wid ?? 0;
-      x1 = end.x - wid ?? 0;
-      y1 = start.y ?? 0;
+      x2 = brokenLineEnd.x - wid ?? 0;
+      x1 = brokenLineEnd.x - wid ?? 0;
+      y1 = brokenLineStart.y ?? 0;
       leftEndpointX = x2 - wid;
       leftEndpointY = y2 + wid;
       rightEndpointX = x2 + wid;
@@ -1023,12 +1025,13 @@ export class HiPerfStruct extends BaseStruct {
     );
   }
 
-  static draw(ctx: CanvasRenderingContext2D, path: Path2D, data: any, groupBy10MS: boolean) {
+  static draw(ctx: CanvasRenderingContext2D, normalPath: Path2D, specPath: 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);
+        normalPath.rect(data.frame.x, 40 - (data.height || 0), width, data.height || 0);
       } else {
+        let path = data.callchain_id === -1 ? specPath : normalPath;
         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);
@@ -1037,6 +1040,13 @@ export class HiPerfStruct extends BaseStruct {
     }
   }
 
+  static drawSpecialPath(ctx: CanvasRenderingContext2D, specPath: Path2D) {
+    ctx.strokeStyle = '#9fafc4';
+    ctx.globalAlpha = 0.5;
+    ctx.stroke(specPath);
+    ctx.globalAlpha = 1;
+  }
+
   static setFrame(node: any, pns: number, startNS: number, endNS: number, frame: any) {
     if ((node.startNS || 0) < startNS) {
       node.frame.x = 0;
@@ -1053,8 +1063,8 @@ export class HiPerfStruct extends BaseStruct {
     }
   }
 
-  static groupBy10MS(array: Array<any>, intervalPerf: number, maxCpu?: number | undefined): Array<any> {
-    let obj = array
+  static groupBy10MS(groupArray: Array<any>, intervalPerf: number, maxCpu?: number | undefined): Array<any> {
+    let obj = groupArray
       .map((it) => {
         it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
         return it;
@@ -1147,7 +1157,7 @@ export function mem(
 }
 
 export function drawWakeUpList(
-  context: CanvasRenderingContext2D | any,
+  wakeUpListContext: CanvasRenderingContext2D | any,
   wake: WakeupBean | undefined | null,
   startNS: number,
   endNS: number,
@@ -1161,22 +1171,22 @@ export function drawWakeUpList(
     let x1 = Math.floor(
       ns2x(wake.wakeupTime || 0, startNS, endNS, totalNS, frame)
     );
-    context.beginPath();
-    context.lineWidth = 2;
-    context.fillStyle = '#000000';
+    wakeUpListContext.beginPath();
+    wakeUpListContext.lineWidth = 2;
+    wakeUpListContext.fillStyle = '#000000';
     if (x1 > 0 && x1 < frame.x + frame.width) {
       if (!noVerticalLine) {
-        context.moveTo(x1, frame.y);
-        context.lineTo(x1, frame.y + frame.height);
+        wakeUpListContext.moveTo(x1, frame.y);
+        wakeUpListContext.lineTo(x1, frame.y + frame.height);
       }
       if (currentCpu == wake.cpu) {
         let centerY = Math.floor(frame.y + frame.height / 2);
-        context.moveTo(x1, centerY - 6);
-        context.lineTo(x1 + 4, centerY);
-        context.lineTo(x1, centerY + 6);
-        context.lineTo(x1 - 4, centerY);
-        context.lineTo(x1, centerY - 6);
-        context.fill();
+        wakeUpListContext.moveTo(x1, centerY - 6);
+        wakeUpListContext.lineTo(x1 + 4, centerY);
+        wakeUpListContext.lineTo(x1, centerY + 6);
+        wakeUpListContext.lineTo(x1 - 4, centerY);
+        wakeUpListContext.lineTo(x1, centerY - 6);
+        wakeUpListContext.fill();
       }
     }
     if (wakeup) {
@@ -1190,46 +1200,46 @@ export function drawWakeUpList(
         )
       );
       let y = frame.y + frame.height - 10;
-      context.moveTo(x1, y);
-      context.lineTo(x2, y);
-      context.moveTo(x2, y - 25);
-      context.lineTo(x2, y + 5);
+      wakeUpListContext.moveTo(x1, y);
+      wakeUpListContext.lineTo(x2, y);
+      wakeUpListContext.moveTo(x2, y - 25);
+      wakeUpListContext.lineTo(x2, y + 5);
 
       let s = ns2s(
         (wakeup.ts || 0) - (wake.wakeupTime || 0)
       );
-      let distance = x2 - x1;
-      if (distance > 12) {
-        context.moveTo(x1, y);
-        context.lineTo(x1 + 6, y - 3);
-        context.moveTo(x1, y);
-        context.lineTo(x1 + 6, y + 3);
-        context.moveTo(x2, y);
-        context.lineTo(x2 - 6, y - 3);
-        context.moveTo(x2, y);
-        context.lineTo(x2 - 6, y + 3);
-        let measure = context.measureText(s);
+      let wakeUpListDistance = x2 - x1;
+      if (wakeUpListDistance > 12) {
+        wakeUpListContext.moveTo(x1, y);
+        wakeUpListContext.lineTo(x1 + 6, y - 3);
+        wakeUpListContext.moveTo(x1, y);
+        wakeUpListContext.lineTo(x1 + 6, y + 3);
+        wakeUpListContext.moveTo(x2, y);
+        wakeUpListContext.lineTo(x2 - 6, y - 3);
+        wakeUpListContext.moveTo(x2, y);
+        wakeUpListContext.lineTo(x2 - 6, y + 3);
+        let measure = wakeUpListContext.measureText(s);
         let tHeight =
           measure.actualBoundingBoxAscent +
           measure.actualBoundingBoxDescent;
-        let xStart = x1 + Math.floor(distance / 2 - measure.width / 2);
-        if (distance > measure.width + 4) {
-          context.fillStyle = '#ffffff';
-          context.fillRect(
+        let xStart = x1 + Math.floor(wakeUpListDistance / 2 - measure.width / 2);
+        if (wakeUpListDistance > measure.width + 4) {
+          wakeUpListContext.fillStyle = '#ffffff';
+          wakeUpListContext.fillRect(
             xStart - 2,
             y - 4 - tHeight,
             measure.width + 4,
             tHeight + 4
           );
-          context.font = '10px solid';
-          context.fillStyle = '#000000';
-          context.textBaseline = 'bottom';
-          context.fillText(s, xStart, y - 2);
+          wakeUpListContext.font = '10px solid';
+          wakeUpListContext.fillStyle = '#000000';
+          wakeUpListContext.textBaseline = 'bottom';
+          wakeUpListContext.fillText(s, xStart, y - 2);
         }
       }
     }
-    context.strokeStyle = '#000000';
-    context.stroke();
-    context.closePath();
+    wakeUpListContext.strokeStyle = '#000000';
+    wakeUpListContext.stroke();
+    wakeUpListContext.closePath();
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts
index 1e8c9fc2ab698564decfa1c402e7feff6d98ae30..8b38550b8f8db14a12ff27cfa92d42d4e74c6b12 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuAbility.ts
@@ -34,30 +34,34 @@ export class CpuAbilityRender extends Render {
       maxCpuUtilization: number;
       maxCpuUtilizationName: string;
     },
-    row: TraceRow<CpuAbilityMonitorStruct>
-  ) {
-    let cpuAbilityList = row.dataList;
-    let cpuAbilityFilter = row.dataListCache;
+    cpuAbilityRow: TraceRow<CpuAbilityMonitorStruct>
+  ): void {
+    let cpuAbilityList = cpuAbilityRow.dataList;
+    let cpuAbilityFilter = cpuAbilityRow.dataListCache;
     dataFilterHandler(cpuAbilityList, cpuAbilityFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
       endNS: TraceRow.range?.endNS ?? 0,
       totalNS: TraceRow.range?.totalNS ?? 0,
-      frame: row.frame,
+      frame: cpuAbilityRow.frame,
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
     let find = false;
+    req.context.beginPath();
     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.draw(req.context, re, req.maxCpuUtilization, cpuAbilityRow.isHover);
+      if (cpuAbilityRow.isHover && re.frame &&
+        isFrameContainPoint(re.frame, cpuAbilityRow.hoverX, cpuAbilityRow.hoverY)
+      ) {
         CpuAbilityMonitorStruct.hoverCpuAbilityStruct = re;
         find = true;
       }
     }
-    if (!find && row.isHover) CpuAbilityMonitorStruct.hoverCpuAbilityStruct = undefined;
+    if (!find && cpuAbilityRow.isHover) {
+      CpuAbilityMonitorStruct.hoverCpuAbilityStruct = undefined;
+    }
     req.context.closePath();
     let textMetrics = req.context.measureText(req.maxCpuUtilizationName);
     req.context.globalAlpha = 0.8;
@@ -74,25 +78,25 @@ export class CpuAbilityRender extends Render {
 
 export function cpuAbility(
   cpuAbilityList: Array<any>,
-  res: Array<any>,
+  cpuAbilityFilters: Array<any>,
   startNS: number,
   endNS: number,
   totalNS: number,
   frame: any,
   use: boolean
 ) {
-  if (use && res.length > 0) {
-    for (let index = 0; index < res.length; index++) {
-      let item = res[index];
+  if (use && cpuAbilityFilters.length > 0) {
+    for (let index = 0; index < cpuAbilityFilters.length; index++) {
+      let item = cpuAbilityFilters[index];
       if ((item.startNS || 0) + (item.dur || 0) > (startNS || 0) && (item.startNS || 0) < (endNS || 0)) {
-        CpuAbilityMonitorStruct.setCpuAbilityFrame(res[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+        CpuAbilityMonitorStruct.setCpuAbilityFrame(cpuAbilityFilters[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
       } else {
-        res[index].frame = null;
+        cpuAbilityFilters[index].frame = null;
       }
     }
     return;
   }
-  res.length = 0;
+  cpuAbilityFilters.length = 0;
   if (cpuAbilityList) {
     for (let cpuAbilityIndex = 0; cpuAbilityIndex < cpuAbilityList.length; cpuAbilityIndex++) {
       let item = cpuAbilityList[cpuAbilityIndex];
@@ -116,7 +120,7 @@ export function cpuAbility(
           (cpuAbilityList[cpuAbilityIndex - 1].frame?.width || 0) == (cpuAbilityList[cpuAbilityIndex].frame?.width || 0)
         ) {
         } else {
-          res.push(item);
+          cpuAbilityFilters.push(item);
         }
       }
     }
@@ -136,29 +140,29 @@ export class CpuAbilityMonitorStruct extends BaseStruct {
 
   static draw(
     cpuAbilityContext2D: CanvasRenderingContext2D,
-    data: CpuAbilityMonitorStruct,
+    cpuAbilityData: CpuAbilityMonitorStruct,
     maxCpuUtilization: number,
     isHover: boolean
   ) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
+    if (cpuAbilityData.frame) {
+      let width = cpuAbilityData.frame.width || 0;
       let index = 2;
       cpuAbilityContext2D.fillStyle = ColorUtils.colorForTid(index);
       cpuAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === CpuAbilityMonitorStruct.hoverCpuAbilityStruct?.startNS && isHover) {
+      if (cpuAbilityData.startNS === CpuAbilityMonitorStruct.hoverCpuAbilityStruct?.startNS && isHover) {
         cpuAbilityContext2D.lineWidth = 1;
         cpuAbilityContext2D.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxCpuUtilization);
+        let drawHeight: number = Math.floor(((cpuAbilityData.value || 0) * (cpuAbilityData.frame.height || 0) * 1.0) / maxCpuUtilization);
         cpuAbilityContext2D.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          cpuAbilityData.frame.x,
+          cpuAbilityData.frame.y + cpuAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
         cpuAbilityContext2D.beginPath();
         cpuAbilityContext2D.arc(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          cpuAbilityData.frame.x,
+          cpuAbilityData.frame.y + cpuAbilityData.frame.height - drawHeight + 4,
           3,
           0,
           2 * Math.PI,
@@ -168,17 +172,17 @@ export class CpuAbilityMonitorStruct extends BaseStruct {
         cpuAbilityContext2D.globalAlpha = 1.0;
         cpuAbilityContext2D.stroke();
         cpuAbilityContext2D.beginPath();
-        cpuAbilityContext2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        cpuAbilityContext2D.moveTo(cpuAbilityData.frame.x + 3, cpuAbilityData.frame.y + cpuAbilityData.frame.height - drawHeight + 4);
         cpuAbilityContext2D.lineWidth = 3;
-        cpuAbilityContext2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        cpuAbilityContext2D.lineTo(cpuAbilityData.frame.x + width, cpuAbilityData.frame.y + cpuAbilityData.frame.height - drawHeight + 4);
         cpuAbilityContext2D.stroke();
       } else {
         cpuAbilityContext2D.globalAlpha = 0.6;
         cpuAbilityContext2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxCpuUtilization);
+        let drawHeight: number = Math.floor(((cpuAbilityData.value || 0) * (cpuAbilityData.frame.height || 0)) / maxCpuUtilization);
         cpuAbilityContext2D.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          cpuAbilityData.frame.x,
+          cpuAbilityData.frame.y + cpuAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts
index cb09bb30ec065ed4e0da4c3573a6a65e0b6c1c65..0a8c1f3b0bcf7be1378a61329633c1d11739269d 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuProfiler.ts
@@ -25,24 +25,24 @@ export class JsCpuProfilerRender extends Render {
       context: CanvasRenderingContext2D;
       type: string;
     },
-    row: TraceRow<JsCpuProfilerStruct>
+    jsCpuProfilerRow: TraceRow<JsCpuProfilerStruct>
   ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    let list = jsCpuProfilerRow.dataList;
+    let filter = jsCpuProfilerRow.dataListCache;
     jsCpuProfiler(
       list,
       filter,
       TraceRow.range!.startNS,
       TraceRow.range!.endNS,
       TraceRow.range!.totalNS,
-      row.frame,
+      jsCpuProfilerRow.frame,
       req.useCache || !TraceRow.range!.refresh
     );
     req.context.beginPath();
     let jsCpuProfilerFind = false;
     for (let re of filter) {
       JsCpuProfilerStruct.draw(req.context, re);
-      if (row.isHover) {
+      if (jsCpuProfilerRow.isHover) {
         if (
           re.endTime - re.startTime == 0 ||
           re.endTime - re.startTime == null ||
@@ -50,23 +50,23 @@ export class JsCpuProfilerRender extends Render {
         ) {
           if (
             re.frame &&
-            row.hoverX >= re.frame.x - 5 &&
-            row.hoverX <= re.frame.x + 5 &&
-            row.hoverY >= re.frame.y &&
-            row.hoverY <= re.frame.y + re.frame.height
+            jsCpuProfilerRow.hoverX >= re.frame.x - 5 &&
+            jsCpuProfilerRow.hoverX <= re.frame.x + 5 &&
+            jsCpuProfilerRow.hoverY >= re.frame.y &&
+            jsCpuProfilerRow.hoverY <= re.frame.y + re.frame.height
           ) {
             JsCpuProfilerStruct.hoverJsCpuProfilerStruct = re;
             jsCpuProfilerFind = true;
           }
         } else {
-          if (re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
+          if (re.frame && isFrameContainPoint(re.frame, jsCpuProfilerRow.hoverX, jsCpuProfilerRow.hoverY)) {
             JsCpuProfilerStruct.hoverJsCpuProfilerStruct = re;
             jsCpuProfilerFind = true;
           }
         }
       }
     }
-    if (!jsCpuProfilerFind && row.isHover) JsCpuProfilerStruct.hoverJsCpuProfilerStruct = undefined;
+    if (!jsCpuProfilerFind && jsCpuProfilerRow.isHover) JsCpuProfilerStruct.hoverJsCpuProfilerStruct = undefined;
     req.context.closePath();
   }
 }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts
index 4cb28dddbf3a5d44b558ccae64f7b6b0b4b4e7a8..db909f4ca662d5f36089e1828f8b1bb32c04c05f 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCpuState.ts
@@ -34,50 +34,58 @@ export class CpuStateRender extends PerfRender {
   renderMainThread(
     req: {
       useCache: boolean;
-      context: CanvasRenderingContext2D;
+      cpuStateContext: CanvasRenderingContext2D;
       type: string;
       cpu: number;
     },
-    row: TraceRow<CpuStateStruct>
-  ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
-    let chartColor = ColorUtils.colorForTid(req.cpu);
+    cpuStateRow: TraceRow<CpuStateStruct>
+  ): void {
+    let list = cpuStateRow.dataList;
+    let filter = cpuStateRow.dataListCache;
     dataFilterHandler(list, filter, {
       startKey: 'startTs',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
       endNS: TraceRow.range?.endNS ?? 0,
       totalNS: TraceRow.range?.totalNS ?? 0,
-      frame: row.frame,
+      frame: cpuStateRow.frame,
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
-    req.context.beginPath();
-    req.context.font = '11px sans-serif';
-    req.context.fillStyle = chartColor;
-    req.context.strokeStyle = chartColor;
-    req.context.globalAlpha = 0.6;
+    let chartColor = ColorUtils.colorForTid(req.cpu);
+    req.cpuStateContext.beginPath();
+    req.cpuStateContext.font = '11px sans-serif';
+    req.cpuStateContext.fillStyle = chartColor;
+    req.cpuStateContext.strokeStyle = chartColor;
+    req.cpuStateContext.globalAlpha = 0.6;
     let path = new Path2D();
     let find = false;
     let offset = 3;
     let heights = [4, 12, 21, 30];
     for (let re of filter) {
       re.height = heights[(re as any).value];
-      CpuStateStruct.draw(req.context, path, re);
-      if (row.isHover) {
-        if (re.frame && row.hoverX >= re.frame.x - offset && row.hoverX <= re.frame.x + re.frame.width + offset) {
+      CpuStateStruct.draw(req.cpuStateContext, path, re);
+      if (cpuStateRow.isHover) {
+        if (re.frame && cpuStateRow.hoverX >= re.frame.x - offset &&
+          cpuStateRow.hoverX <= re.frame.x + re.frame.width + offset
+        ) {
           CpuStateStruct.hoverStateStruct = re;
           find = true;
         }
       }
     }
-    if (!find && row.isHover) CpuStateStruct.hoverStateStruct = undefined;
-    req.context.fill(path);
+    if (!find && cpuStateRow.isHover) {
+      CpuStateStruct.hoverStateStruct = undefined;
+    }
+    req.cpuStateContext.fill(path);
   }
 
   render(cpuStateReq: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
-    if (cpuStateReq.lazyRefresh) {
+    if (cpuStateReq.lazyRefresh || !cpuStateReq.useCache) {
+      let cpuStateUse = false;
+      if (cpuStateReq.lazyRefresh) {
+        cpuStateUse = cpuStateReq.useCache || !cpuStateReq.range.refresh;
+      }
       this.cpuState(
         list,
         dataList2,
@@ -88,23 +96,8 @@ export class CpuStateRender extends PerfRender {
         cpuStateReq.endNS,
         cpuStateReq.totalNS,
         cpuStateReq.frame,
-        cpuStateReq.useCache || !cpuStateReq.range.refresh
+        cpuStateUse
       );
-    } else {
-      if (!cpuStateReq.useCache) {
-        this.cpuState(
-          list,
-          dataList2,
-          cpuStateReq.type!,
-          filter,
-          cpuStateReq.params.cpu,
-          cpuStateReq.startNS,
-          cpuStateReq.endNS,
-          cpuStateReq.totalNS,
-          cpuStateReq.frame,
-          false
-        );
-      }
     }
     CpuStateStruct.hoverStateStruct = undefined;
     if (cpuStateReq.canvas) {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts
index 89e59950d9bfb268f993820128455e8caf6247a2..c3b650ffc01409a419132a4402d0797205c51997 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.ts
@@ -37,30 +37,34 @@ export class DiskIoAbilityRender extends Render {
       maxDiskRate: number;
       maxDiskRateName: string;
     },
-    row: TraceRow<DiskAbilityMonitorStruct>
-  ) {
-    let diskIoAbilityList = row.dataList;
-    let diskIoFilter = row.dataListCache;
+    diskIoAbilityRow: TraceRow<DiskAbilityMonitorStruct>
+  ): void {
+    let diskIoAbilityList = diskIoAbilityRow.dataList;
+    let diskIoFilter = diskIoAbilityRow.dataListCache;
     dataFilterHandler(diskIoAbilityList, diskIoFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
       endNS: TraceRow.range?.endNS ?? 0,
       totalNS: TraceRow.range?.totalNS ?? 0,
-      frame: row.frame,
+      frame: diskIoAbilityRow.frame,
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
     req.context.beginPath();
     let find = false;
     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.draw(req.context, re, req.maxDiskRate, diskIoAbilityRow.isHover);
+      if (diskIoAbilityRow.isHover && re.frame &&
+        isFrameContainPoint(re.frame, diskIoAbilityRow.hoverX, diskIoAbilityRow.hoverY)
+      ) {
         DiskAbilityMonitorStruct.hoverDiskAbilityStruct = re;
         find = true;
       }
     }
-    if (!find && row.isHover) DiskAbilityMonitorStruct.hoverDiskAbilityStruct = undefined;
+    if (!find && diskIoAbilityRow.isHover) {
+      DiskAbilityMonitorStruct.hoverDiskAbilityStruct = undefined;
+    }
     req.context.closePath();
     let textMetrics = req.context.measureText(req.maxDiskRateName);
     req.context.globalAlpha = 0.8;
@@ -239,29 +243,29 @@ export class DiskAbilityMonitorStruct extends BaseStruct {
 
   static draw(
     diskIoAbilityContext: CanvasRenderingContext2D,
-    data: DiskAbilityMonitorStruct,
+    diskIoAbilityData: DiskAbilityMonitorStruct,
     maxDiskRate: number,
     isHover: boolean
   ) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
+    if (diskIoAbilityData.frame) {
+      let width = diskIoAbilityData.frame.width || 0;
       let index = 2;
       diskIoAbilityContext.fillStyle = ColorUtils.colorForTid(index);
       diskIoAbilityContext.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === DiskAbilityMonitorStruct.hoverDiskAbilityStruct?.startNS && isHover) {
+      if (diskIoAbilityData.startNS === DiskAbilityMonitorStruct.hoverDiskAbilityStruct?.startNS && isHover) {
         diskIoAbilityContext.lineWidth = 1;
         diskIoAbilityContext.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxDiskRate);
+        let drawHeight: number = Math.floor(((diskIoAbilityData.value || 0) * (diskIoAbilityData.frame.height || 0) * 1.0) / maxDiskRate);
         diskIoAbilityContext.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          diskIoAbilityData.frame.x,
+          diskIoAbilityData.frame.y + diskIoAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
         diskIoAbilityContext.beginPath();
         diskIoAbilityContext.arc(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          diskIoAbilityData.frame.x,
+          diskIoAbilityData.frame.y + diskIoAbilityData.frame.height - drawHeight + 4,
           3,
           0,
           2 * Math.PI,
@@ -271,17 +275,17 @@ export class DiskAbilityMonitorStruct extends BaseStruct {
         diskIoAbilityContext.globalAlpha = 1.0;
         diskIoAbilityContext.stroke();
         diskIoAbilityContext.beginPath();
-        diskIoAbilityContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        diskIoAbilityContext.moveTo(diskIoAbilityData.frame.x + 3, diskIoAbilityData.frame.y + diskIoAbilityData.frame.height - drawHeight + 4);
         diskIoAbilityContext.lineWidth = 3;
-        diskIoAbilityContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        diskIoAbilityContext.lineTo(diskIoAbilityData.frame.x + width, diskIoAbilityData.frame.y + diskIoAbilityData.frame.height - drawHeight + 4);
         diskIoAbilityContext.stroke();
       } else {
         diskIoAbilityContext.globalAlpha = 0.6;
         diskIoAbilityContext.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxDiskRate);
+        let drawHeight: number = Math.floor(((diskIoAbilityData.value || 0) * (diskIoAbilityData.frame.height || 0)) / maxDiskRate);
         diskIoAbilityContext.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          diskIoAbilityData.frame.x,
+          diskIoAbilityData.frame.y + diskIoAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts
index 762b4961d4c8087beef259a614f77cb4feff7c61..ffe72d25f1b7f97f698cbbf1eeb90c39643735f2 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerEnergySystem.ts
@@ -48,33 +48,33 @@ export class EnergySystemRender extends Render {
     );
     req.context.beginPath();
     let find = false;
-    let a: any = {};
+    let energySystemData: any = {};
     for (let i = 0; i < systemFilter.length; i++) {
-      let re = systemFilter[i];
+      let energySysStruct = systemFilter[i];
 
-      EnergySystemStruct.draw(req.context, re);
-      if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
-        EnergySystemStruct.hoverEnergySystemStruct = re;
-        if (re.type == 0) {
-          if (re.count != undefined) {
-            a.workScheduler = re.count;
+      EnergySystemStruct.draw(req.context, energySysStruct);
+      if (row.isHover && energySysStruct.frame && isFrameContainPoint(energySysStruct.frame, row.hoverX, row.hoverY)) {
+        EnergySystemStruct.hoverEnergySystemStruct = energySysStruct;
+        if (energySysStruct.type == 0) {
+          if (energySysStruct.count != undefined) {
+            energySystemData.workScheduler = energySysStruct.count;
           } else {
-            a.workScheduler = '0';
+            energySystemData.workScheduler = '0';
           }
         }
-        if (re.type == 1) {
-          if (re.count != undefined) {
-            a.power = re.count + '';
+        if (energySysStruct.type == 1) {
+          if (energySysStruct.count != undefined) {
+            energySystemData.power = energySysStruct.count + '';
           } else {
-            a.power = '0';
+            energySystemData.power = '0';
           }
         }
 
-        if (re.type == 2) {
-          if (re.count != undefined) {
-            a.location = re.count + '';
+        if (energySysStruct.type == 2) {
+          if (energySysStruct.count != undefined) {
+            energySystemData.location = energySysStruct.count + '';
           } else {
-            a.location = '0';
+            energySystemData.location = '0';
           }
         }
         find = true;
@@ -82,9 +82,9 @@ export class EnergySystemRender extends Render {
     }
     if (!find && row.isHover) EnergySystemStruct.hoverEnergySystemStruct = undefined;
     if (EnergySystemStruct.hoverEnergySystemStruct) {
-      EnergySystemStruct.hoverEnergySystemStruct!.workScheduler = a.workScheduler == undefined ? '0' : a.workScheduler;
-      EnergySystemStruct.hoverEnergySystemStruct!.power = a.power == undefined ? '0' : a.power;
-      EnergySystemStruct.hoverEnergySystemStruct!.location = a.location == undefined ? '0' : a.location;
+      EnergySystemStruct.hoverEnergySystemStruct!.workScheduler = energySystemData.workScheduler == undefined ? '0' : energySystemData.workScheduler;
+      EnergySystemStruct.hoverEnergySystemStruct!.power = energySystemData.power == undefined ? '0' : energySystemData.power;
+      EnergySystemStruct.hoverEnergySystemStruct!.location = energySystemData.location == undefined ? '0' : energySystemData.location;
     }
     let spApplication = document.getElementsByTagName('sp-application')[0];
     let isDark = spApplication.hasAttribute('dark');
@@ -145,31 +145,31 @@ export class EnergySystemRender extends Render {
       EnergySystemStruct.hoverEnergySystemStruct = undefined;
       if (energySysRequest.isHover) {
         let a: any = {};
-        for (let re of filter) {
+        for (let filterElement of filter) {
           if (
-            re.frame &&
-            energySysRequest.hoverX >= re.frame.x &&
-            energySysRequest.hoverX <= re.frame.x + re.frame.width
+            filterElement.frame &&
+            energySysRequest.hoverX >= filterElement.frame.x &&
+            energySysRequest.hoverX <= filterElement.frame.x + filterElement.frame.width
           ) {
-            EnergySystemStruct.hoverEnergySystemStruct = re;
-            if (re.type == 0) {
-              if (re.count != undefined) {
-                a.workScheduler = re.count;
+            EnergySystemStruct.hoverEnergySystemStruct = filterElement;
+            if (filterElement.type == 0) {
+              if (filterElement.count != undefined) {
+                a.workScheduler = filterElement.count;
               } else {
                 a.workScheduler = '0';
               }
             }
-            if (re.type == 1) {
-              if (re.count != undefined) {
-                a.power = re.count + '';
+            if (filterElement.type == 1) {
+              if (filterElement.count != undefined) {
+                a.power = filterElement.count + '';
               } else {
                 a.power = '0';
               }
             }
 
-            if (re.type == 2) {
-              if (re.count != undefined) {
-                a.location = re.count + '';
+            if (filterElement.type == 2) {
+              if (filterElement.count != undefined) {
+                a.location = filterElement.count + '';
               } else {
                 a.location = '0';
               }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts
index 1dd59832b38aabfe9ba7317b87b16b7ddbeb111d..9a2d142d734c41f8c18611e29a87133a6e05d600 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFPS.ts
@@ -235,20 +235,20 @@ export class FpsStruct extends BaseStruct {
   }
 
   static setFrame(fpsNode: FpsStruct, padding: number, startNS: number, endNS: number, totalNS: number, frame: Rect) {
-    let x1: number, x2: number;
+    let fpsLeftPointX: number, fpsRightPointX: number;
     if ((fpsNode.startNS || 0) < startNS) {
-      x1 = 0;
+      fpsLeftPointX = 0;
     } else {
-      x1 = ns2x(fpsNode.startNS || 0, startNS, endNS, totalNS, frame);
+      fpsLeftPointX = ns2x(fpsNode.startNS || 0, startNS, endNS, totalNS, frame);
     }
     if ((fpsNode.startNS || 0) + (fpsNode.dur || 0) > endNS) {
-      x2 = frame.width;
+      fpsRightPointX = frame.width;
     } else {
-      x2 = ns2x((fpsNode.startNS || 0) + (fpsNode.dur || 0), startNS, endNS, totalNS, frame);
+      fpsRightPointX = ns2x((fpsNode.startNS || 0) + (fpsNode.dur || 0), startNS, endNS, totalNS, frame);
     }
-    let getV: number = x2 - x1 <= 1 ? 1 : x2 - x1;
+    let getV: number = fpsRightPointX - fpsLeftPointX <= 1 ? 1 : fpsRightPointX - fpsLeftPointX;
     let rectangle: Rect = new Rect(
-      Math.floor(x1),
+      Math.floor(fpsLeftPointX),
       Math.ceil(frame.y + padding),
       Math.ceil(getV),
       Math.floor(frame.height - padding * 2)
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts
index 76769e93d1c45b397fbbb213222d8303a6876cea..a4374793f8259ed0e2ce3dfe1378a4ba475d07a2 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerFileSystem.ts
@@ -32,26 +32,25 @@ export class FileSystemRender extends PerfRender {
       type: string;
       chartColor: string;
     },
-    row: TraceRow<FileSysChartStruct>
-  ) {
-    let list = row.dataList;
-    let filter = row.dataListCache;
+    fileSystemRow: TraceRow<FileSysChartStruct>
+  ): void {
+    let list = fileSystemRow.dataList;
+    let filter = fileSystemRow.dataListCache;
     let groupBy10MS = (TraceRow.range?.scale || 50) > 40_000_000;
     let isDiskIO: boolean = req.type.includes('disk-io');
-    if (list && row.dataList2.length == 0) {
-      row.dataList2 = isDiskIO
-        ? FileSysChartStruct.groupBy10MSWithMaxLatency(list)
-        : FileSysChartStruct.groupBy10MSWithCount(list);
+    if (list && fileSystemRow.dataList2.length === 0) {
+      fileSystemRow.dataList2 = isDiskIO ?
+        FileSysChartStruct.groupBy10MSWithMaxLatency(list) : FileSysChartStruct.groupBy10MSWithCount(list);
     }
     fileSysChart(
       list,
-      row.dataList2,
+      fileSystemRow.dataList2,
       req.type,
       filter,
       TraceRow.range?.startNS ?? 0,
       TraceRow.range?.endNS ?? 0,
       TraceRow.range?.totalNS ?? 0,
-      row.frame,
+      fileSystemRow.frame,
       groupBy10MS,
       isDiskIO,
       req.useCache || (TraceRow.range?.refresh ?? false)
@@ -60,13 +59,15 @@ export class FileSystemRender extends PerfRender {
     let find = false;
     let hoverRect: FileSysChartStruct | undefined = undefined;
     for (let re of filter) {
-      if (row.isHover && re.frame && row.hoverX >= re.frame.x && row.hoverX <= re.frame.x + re.frame.width) {
+      if (fileSystemRow.isHover && re.frame && fileSystemRow.hoverX >= re.frame.x &&
+        fileSystemRow.hoverX <= re.frame.x + re.frame.width
+      ) {
         if (hoverRect == undefined || re.size! > hoverRect.size!) {
           hoverRect = re;
           find = true;
         }
       }
-      if (re.frame && re.frame!.x > row.hoverX + 3) {
+      if (re.frame && re.frame!.x > fileSystemRow.hoverX + 3) {
         break;
       }
     }
@@ -76,17 +77,23 @@ export class FileSystemRender extends PerfRender {
     for (let re of filter) {
       FileSysChartStruct.draw(req.context, re, req.chartColor);
     }
-    if (!find && row.isHover) FileSysChartStruct.hoverFileSysStruct = undefined;
+    if (!find && fileSystemRow.isHover) {
+      FileSysChartStruct.hoverFileSysStruct = undefined;
+    }
     req.context.closePath();
   }
 
-  render(fileSysRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {
+  render(fileSysRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>): void {
     let groupBy10MS = fileSysRequest.scale > 20_000_000;
     let isDiskIO: boolean = fileSysRequest.type!.includes('disk-io');
     if (isDiskIO) {
       groupBy10MS = true;
     }
-    if (fileSysRequest.lazyRefresh) {
+    if (fileSysRequest.lazyRefresh || !fileSysRequest.useCache) {
+      let use = false;
+      if (fileSysRequest.lazyRefresh) {
+        use = fileSysRequest.useCache || !fileSysRequest.range.refresh;
+      }
       fileSysChart(
         list,
         dataList2,
@@ -98,24 +105,8 @@ export class FileSystemRender extends PerfRender {
         fileSysRequest.frame,
         groupBy10MS,
         isDiskIO,
-        fileSysRequest.useCache || !fileSysRequest.range.refresh
+        use
       );
-    } else {
-      if (!fileSysRequest.useCache) {
-        fileSysChart(
-          list,
-          dataList2,
-          fileSysRequest.type!,
-          filter,
-          fileSysRequest.startNS,
-          fileSysRequest.endNS,
-          fileSysRequest.totalNS,
-          fileSysRequest.frame,
-          groupBy10MS,
-          isDiskIO,
-          false
-        );
-      }
     }
     let hoverStruct: FileSysChartStruct | undefined;
     if (fileSysRequest.canvas) {
@@ -178,7 +169,7 @@ export function fileSysChart(
   arr: Array<any>,
   arr2: Array<any>,
   type: string,
-  res: Array<any>,
+  fileSysFilters: Array<any>,
   startNS: number,
   endNS: number,
   totalNS: number,
@@ -187,26 +178,26 @@ export function fileSysChart(
   isDiskIO: boolean,
   use: boolean
 ) {
-  if (use && res.length > 0) {
+  if (use && fileSysFilters.length > 0) {
     //&& !groupBy10MS
     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;
+    for (let i = 0; i < fileSysFilters.length; i++) {
+      let fileSysData = fileSysFilters[i];
+      if ((fileSysData.startNS || 0) + (fileSysData.dur || 0) > startNS && (fileSysData.startNS || 0) < endNS) {
+        if (!fileSysData.frame) {
+          fileSysData.frame = {};
+          fileSysData.frame.y = y;
         }
-        it.frame.height = it.height;
-        FileSysChartStruct.setFrame(it, pns, startNS, endNS, frame);
+        fileSysData.frame.height = fileSysData.height;
+        FileSysChartStruct.setFrame(fileSysData, pns, startNS, endNS, frame);
       } else {
-        it.frame = null;
+        fileSysData.frame = null;
       }
     }
     return;
   }
-  res.length = 0;
+  fileSysFilters.length = 0;
   if (arr) {
     let list: Array<any> = [];
     let pns = (endNS - startNS) / frame.width;
@@ -228,7 +219,7 @@ export function fileSysChart(
           return pre;
         }, {});
       Reflect.ownKeys(groups).map((kv) => {
-        res.push(groups[kv][0]);
+        fileSysFilters.push(groups[kv][0]);
       });
     } else {
       let filter = arr.filter((it) => (it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS);
@@ -242,7 +233,7 @@ export function fileSysChart(
         }
         it.frame.height = it.height;
         FileSysChartStruct.setFrame(it, pns, startNS, endNS, frame);
-        res.push(it);
+        fileSysFilters.push(it);
       });
     }
   }
@@ -327,9 +318,9 @@ export class FileSysChartStruct extends BaseStruct {
 
   static groupBy10MSWithCount(array: Array<any>): Array<any> {
     let obj = array
-      .map((it) => {
-        it.timestamp_group = Math.trunc(it.startNS / 1_000_000_0) * 1_000_000_0;
-        return it;
+      .map((dataItem) => {
+        dataItem.timestamp_group = Math.trunc(dataItem.startNS / 1_000_000_0) * 1_000_000_0;
+        return dataItem;
       })
       .reduce((pre, current) => {
         (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts
index 48b6219e0432295cc765ee9ab8cc85a39a9fcbd1..0ef9aee5220717739ff3802bce6f7c0aeb03cc92 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts
@@ -49,7 +49,8 @@ export class HiperfCpuRender extends PerfRender {
     req.context.beginPath();
     req.context.fillStyle = ColorUtils.FUNC_COLOR[0];
     req.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-    let path = new Path2D();
+    let normalPath = new Path2D();
+    let specPath = new Path2D();
     let find = false;
     let offset = groupBy10MS ? 0 : 3;
     for (let re of filter) {
@@ -62,123 +63,19 @@ export class HiperfCpuRender extends PerfRender {
         HiPerfCpuStruct.hoverStruct = re;
         find = true;
       }
-      HiPerfCpuStruct.draw(req.context, path, re, groupBy10MS);
+      HiPerfCpuStruct.draw(req.context, normalPath, specPath, re, groupBy10MS);
     }
     if (!find && row.isHover) HiPerfCpuStruct.hoverStruct = undefined;
     if (groupBy10MS) {
-      req.context.fill(path);
+      req.context.fill(normalPath);
     } else {
-      req.context.stroke(path);
+      req.context.stroke(normalPath);
+      HiPerfStruct.drawSpecialPath(req.context, specPath);
     }
     req.context.closePath();
   }
 
-  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, hiPerfCpuRequest.intervalPerf, hiPerfCpuRequest.params.maxCpu);
-    }
-    if (hiPerfCpuRequest.lazyRefresh) {
-      hiPerf(
-        list,
-        dataList2,
-        filter,
-        hiPerfCpuRequest.startNS,
-        hiPerfCpuRequest.endNS,
-        hiPerfCpuRequest.frame,
-        groupBy10MS,
-        hiPerfCpuRequest.useCache || !hiPerfCpuRequest.range.refresh
-      );
-    } else {
-      if (!hiPerfCpuRequest.useCache) {
-        hiPerf(
-          list,
-          dataList2,
-          filter,
-          hiPerfCpuRequest.startNS,
-          hiPerfCpuRequest.endNS,
-          hiPerfCpuRequest.frame,
-          groupBy10MS,
-          false
-        );
-      }
-    }
-    if (hiPerfCpuRequest.canvas) {
-      hiPerfCpuRequest.context.clearRect(0, 0, hiPerfCpuRequest.frame.width, hiPerfCpuRequest.frame.height);
-      let arr = filter;
-      if (
-        arr.length > 0 &&
-        !hiPerfCpuRequest.range.refresh &&
-        !hiPerfCpuRequest.useCache &&
-        hiPerfCpuRequest.lazyRefresh
-      ) {
-        drawLoading(
-          hiPerfCpuRequest.context,
-          hiPerfCpuRequest.startNS,
-          hiPerfCpuRequest.endNS,
-          hiPerfCpuRequest.totalNS,
-          hiPerfCpuRequest.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
-        );
-      }
-      drawLines(
-        hiPerfCpuRequest.context,
-        hiPerfCpuRequest.xs,
-        hiPerfCpuRequest.frame.height,
-        hiPerfCpuRequest.lineColor
-      );
-      hiPerfCpuRequest.context.stroke();
-      hiPerfCpuRequest.context.beginPath();
-      HiPerfCpuStruct.hoverStruct = undefined;
-      if (hiPerfCpuRequest.isHover) {
-        let offset = groupBy10MS ? 0 : 3;
-        for (let re of filter) {
-          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 = hiPerfCpuRequest.params.hoverStruct;
-      }
-      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(hiPerfCpuRequest.context, path, re, groupBy10MS);
-      }
-      if (groupBy10MS) {
-        hiPerfCpuRequest.context.fill(path);
-      } else {
-        hiPerfCpuRequest.context.stroke(path);
-      }
-      drawSelection(hiPerfCpuRequest.context, hiPerfCpuRequest.params);
-      hiPerfCpuRequest.context.closePath();
-      drawFlagLine(
-        hiPerfCpuRequest.context,
-        hiPerfCpuRequest.flagMoveInfo,
-        hiPerfCpuRequest.flagSelectedInfo,
-        hiPerfCpuRequest.startNS,
-        hiPerfCpuRequest.endNS,
-        hiPerfCpuRequest.totalNS,
-        hiPerfCpuRequest.frame,
-        hiPerfCpuRequest.slicesTime
-      );
-    }
-    // @ts-ignore
-    self.postMessage({
-      id: hiPerfCpuRequest.id,
-      type: hiPerfCpuRequest.type,
-      results: hiPerfCpuRequest.canvas ? undefined : filter,
-      hover: HiPerfCpuStruct.hoverStruct,
-    });
-  }
+  render(hiPerfCpuRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>) {}
 }
 
 export class HiPerfCpuStruct extends HiPerfStruct {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts
index 4f3adb1c7999791e9d1bfc582810b46a7520c7ed..88ea697ea1d464688cb27cb20722f30151441dd5 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.ts
@@ -15,11 +15,6 @@
 
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
-  BaseStruct,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
-  drawSelection,
   hiPerf,
   HiPerfStruct,
   PerfRender,
@@ -28,12 +23,12 @@ import {
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfEventRender extends PerfRender {
-  renderMainThread(hiPerfEventReq: any, row: TraceRow<HiPerfEventStruct>) {
+  renderMainThread(hiPerfEventReq: any, row: TraceRow<HiPerfEventStruct>): void {
     let list = row.dataList;
     let list2 = row.dataList2;
     let filter = row.dataListCache;
     let groupBy10MS = hiPerfEventReq.scale > 30_000_000;
-    if (list && row.dataList2.length == 0) {
+    if (list && row.dataList2.length === 0) {
       row.dataList2 = HiPerfEventStruct.eventGroupBy10MS(list, hiPerfEventReq.intervalPerf, hiPerfEventReq.type);
     }
     hiPerf(
@@ -50,10 +45,11 @@ export class HiperfEventRender extends PerfRender {
     hiPerfEventReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
     hiPerfEventReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
     let offset = groupBy10MS ? 0 : 3;
-    let path = new Path2D();
+    let normalPath = new Path2D();
+    let specPath = new Path2D();
     let find = false;
     for (let re of filter) {
-      HiPerfEventStruct.draw(hiPerfEventReq.context, path, re, groupBy10MS);
+      HiPerfEventStruct.draw(hiPerfEventReq.context, normalPath, specPath, 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;
@@ -61,8 +57,15 @@ export class HiperfEventRender extends PerfRender {
         }
       }
     }
-    if (!find && row.isHover) HiPerfEventStruct.hoverStruct = undefined;
-    groupBy10MS ? hiPerfEventReq.context.fill(path) : hiPerfEventReq.context.stroke(path);
+    if (!find && row.isHover) {
+      HiPerfEventStruct.hoverStruct = undefined;
+    }
+    if (groupBy10MS) {
+      hiPerfEventReq.context.fill(normalPath);
+    } else {
+      hiPerfEventReq.context.stroke(normalPath);
+      HiPerfStruct.drawSpecialPath(hiPerfEventReq.context, specPath);
+    }
     let maxEvent = HiPerfEventStruct.maxEvent!.get(hiPerfEventReq.type!) || 0;
     let textMetrics = hiPerfEventReq.context.measureText(maxEvent);
     hiPerfEventReq.context.globalAlpha = 0.8;
@@ -76,115 +79,7 @@ export class HiperfEventRender extends PerfRender {
     hiPerfEventReq.context.closePath();
   }
 
-  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,
-        filter,
-        hiPerfEventRequest.startNS,
-        hiPerfEventRequest.endNS,
-        hiPerfEventRequest.frame,
-        groupBy10MS,
-        hiPerfEventRequest.useCache || !hiPerfEventRequest.range.refresh
-      );
-    } else {
-      if (!hiPerfEventRequest.useCache) {
-        hiPerf(
-          list,
-          dataList2,
-          filter,
-          hiPerfEventRequest.startNS,
-          hiPerfEventRequest.endNS,
-          hiPerfEventRequest.frame,
-          groupBy10MS,
-          false
-        );
-      }
-    }
-    if (hiPerfEventRequest.canvas) {
-      hiPerfEventRequest.context.clearRect(0, 0, hiPerfEventRequest.frame.width, hiPerfEventRequest.frame.height);
-      let arr = filter;
-      if (
-        arr.length > 0 &&
-        !hiPerfEventRequest.range.refresh &&
-        !hiPerfEventRequest.useCache &&
-        hiPerfEventRequest.lazyRefresh
-      ) {
-        drawLoading(
-          hiPerfEventRequest.context,
-          hiPerfEventRequest.startNS,
-          hiPerfEventRequest.endNS,
-          hiPerfEventRequest.totalNS,
-          hiPerfEventRequest.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
-        );
-      }
-      drawLines(
-        hiPerfEventRequest.context,
-        hiPerfEventRequest.xs,
-        hiPerfEventRequest.frame.height,
-        hiPerfEventRequest.lineColor
-      );
-      hiPerfEventRequest.context.stroke();
-      hiPerfEventRequest.context.beginPath();
-      HiPerfEventStruct.hoverStruct = undefined;
-      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 &&
-            hiPerfEventRequest.hoverX >= re.frame.x - offset &&
-            hiPerfEventRequest.hoverX <= re.frame.x + re.frame.width + offset
-          ) {
-            HiPerfEventStruct.hoverStruct = re;
-            break;
-          }
-        }
-      } else {
-        HiPerfEventStruct.hoverStruct = hiPerfEventRequest.params.hoverStruct;
-      }
-      HiPerfEventStruct.selectStruct = hiPerfEventRequest.params.selectStruct;
-      let path = new Path2D();
-      for (let re of filter) {
-        HiPerfEventStruct.draw(hiPerfEventRequest.context, path, re, groupBy10MS);
-      }
-      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(
-        hiPerfEventRequest.context,
-        hiPerfEventRequest.flagMoveInfo,
-        hiPerfEventRequest.flagSelectedInfo,
-        hiPerfEventRequest.startNS,
-        hiPerfEventRequest.endNS,
-        hiPerfEventRequest.totalNS,
-        hiPerfEventRequest.frame,
-        hiPerfEventRequest.slicesTime
-      );
-    }
-    // @ts-ignore
-    self.postMessage({
-      id: hiPerfEventRequest.id,
-      type: hiPerfEventRequest.type,
-      results: hiPerfEventRequest.canvas ? undefined : filter,
-      hover: HiPerfEventStruct.hoverStruct,
-    });
-  }
+  render(hiPerfEventRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>): void {}
 }
 
 export class HiPerfEventStruct extends HiPerfStruct {
@@ -197,9 +92,9 @@ export class HiPerfEventStruct extends HiPerfStruct {
 
   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;
-        return it;
+      .map((hiPerfDataItem) => {
+        hiPerfDataItem.timestamp_group = Math.trunc(hiPerfDataItem.startNS / 1_000_000_0) * 1_000_000_0;
+        return hiPerfDataItem;
       })
       .reduce((pre, current) => {
         (pre[current['timestamp_group']] = pre[current['timestamp_group']] || []).push(current);
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts
index f78c0fb727271b3773b224161e93fe2e2243934e..0666b49e8f1065e8745d8ff59b387d267dcc4a27 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.ts
@@ -15,11 +15,6 @@
 
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
-  BaseStruct,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
-  drawSelection,
   hiPerf,
   HiPerfStruct,
   PerfRender,
@@ -28,11 +23,11 @@ import {
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfProcessRender extends PerfRender {
-  renderMainThread(hiPerfProcessReq: any, row: TraceRow<HiPerfProcessStruct>) {
+  renderMainThread(hiPerfProcessReq: any, row: TraceRow<HiPerfProcessStruct>): void {
     let list = row.dataList;
     let filter = row.dataListCache;
     let groupBy10MS = hiPerfProcessReq.scale > 30_000_000;
-    if (list && row.dataList2.length == 0) {
+    if (list && row.dataList2.length === 0) {
       row.dataList2 = HiPerfProcessStruct.groupBy10MS(list, hiPerfProcessReq.intervalPerf);
     }
     hiPerf(
@@ -48,11 +43,12 @@ export class HiperfProcessRender extends PerfRender {
     hiPerfProcessReq.context.beginPath();
     hiPerfProcessReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
     hiPerfProcessReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-    let path = new Path2D();
+    let normalPath = new Path2D();
+    let specPath = new Path2D();
     let offset = groupBy10MS ? 0 : 3;
     let find = false;
     for (let re of filter) {
-      HiPerfProcessStruct.draw(hiPerfProcessReq.context, path, re, groupBy10MS);
+      HiPerfProcessStruct.draw(hiPerfProcessReq.context, normalPath, specPath, 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;
@@ -60,110 +56,19 @@ export class HiperfProcessRender extends PerfRender {
         }
       }
     }
-    if (!find && row.isHover) HiPerfProcessStruct.hoverStruct = undefined;
-    groupBy10MS ? hiPerfProcessReq.context.fill(path) : hiPerfProcessReq.context.stroke(path);
-    hiPerfProcessReq.context.closePath();
-  }
-
-  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,
-        hiPerfProcessRequest.startNS,
-        hiPerfProcessRequest.endNS,
-        hiPerfProcessRequest.frame,
-        groupBy10MS,
-        hiPerfProcessRequest.useCache || !hiPerfProcessRequest.range.refresh
-      );
-    } else {
-      if (!hiPerfProcessRequest.useCache) {
-        hiPerf(
-          list,
-          dataList2,
-          filter,
-          hiPerfProcessRequest.startNS,
-          hiPerfProcessRequest.endNS,
-          hiPerfProcessRequest.frame,
-          groupBy10MS,
-          false
-        );
-      }
-    }
-    if (hiPerfProcessRequest.canvas) {
-      hiPerfProcessRequest.context.clearRect(0, 0, hiPerfProcessRequest.frame.width, hiPerfProcessRequest.frame.height);
-      let arr = filter;
-      if (
-        arr.length > 0 &&
-        !hiPerfProcessRequest.range.refresh &&
-        !hiPerfProcessRequest.useCache &&
-        hiPerfProcessRequest.lazyRefresh
-      ) {
-        drawLoading(
-          hiPerfProcessRequest.context,
-          hiPerfProcessRequest.startNS,
-          hiPerfProcessRequest.endNS,
-          hiPerfProcessRequest.totalNS,
-          hiPerfProcessRequest.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
-        );
-      }
-      drawLines(
-        hiPerfProcessRequest.context,
-        hiPerfProcessRequest.xs,
-        hiPerfProcessRequest.frame.height,
-        hiPerfProcessRequest.lineColor
-      );
-      hiPerfProcessRequest.context.stroke();
-      hiPerfProcessRequest.context.beginPath();
+    if (!find && row.isHover) {
       HiPerfProcessStruct.hoverStruct = undefined;
-      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 &&
-            hiPerfProcessRequest.hoverX >= re.frame.x - offset &&
-            hiPerfProcessRequest.hoverX <= re.frame.x + re.frame.width + offset
-          ) {
-            HiPerfProcessStruct.hoverStruct = re;
-            break;
-          }
-        }
-      } else {
-        HiPerfProcessStruct.hoverStruct = hiPerfProcessRequest.params.hoverStruct;
-      }
-      HiPerfProcessStruct.selectStruct = hiPerfProcessRequest.params.selectStruct;
-      let path = new Path2D();
-      for (let re of filter) {
-        HiPerfProcessStruct.draw(hiPerfProcessRequest.context, path, re, groupBy10MS);
-      }
-      groupBy10MS ? hiPerfProcessRequest.context.fill(path) : hiPerfProcessRequest.context.stroke(path);
-      hiPerfProcessRequest.context.closePath();
-      drawSelection(hiPerfProcessRequest.context, hiPerfProcessRequest.params);
-      drawFlagLine(
-        hiPerfProcessRequest.context,
-        hiPerfProcessRequest.flagMoveInfo,
-        hiPerfProcessRequest.flagSelectedInfo,
-        hiPerfProcessRequest.startNS,
-        hiPerfProcessRequest.endNS,
-        hiPerfProcessRequest.totalNS,
-        hiPerfProcessRequest.frame,
-        hiPerfProcessRequest.slicesTime
-      );
     }
-    // @ts-ignore
-    self.postMessage({
-      id: hiPerfProcessRequest.id,
-      type: hiPerfProcessRequest.type,
-      results: hiPerfProcessRequest.canvas ? undefined : filter,
-      hover: HiPerfProcessStruct.hoverStruct,
-    });
+    if (groupBy10MS) {
+      hiPerfProcessReq.context.fill(normalPath);
+    } else {
+      hiPerfProcessReq.context.stroke(normalPath);
+      HiPerfStruct.drawSpecialPath(hiPerfProcessReq.context, specPath);
+    }
+    hiPerfProcessReq.context.closePath();
   }
+
+  render(hiPerfProcessRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>): void {}
 }
 
 export class HiPerfProcessStruct extends HiPerfStruct {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts
index 778f029a4f3b635ae108462bfee4c426209e4c67..3e78457ce8bac095533640742d88ec77e6a41b12 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfReport.ts
@@ -13,26 +13,17 @@
  * limitations under the License.
  */
 
-import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
-import {
-  BaseStruct,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
-  drawSelection,
-  HiPerfStruct,
-  PerfRender,
-  RequestMessage,
-} from './ProcedureWorkerCommon.js';
+import {ColorUtils} from '../../component/trace/base/ColorUtils.js';
+import {HiPerfStruct, PerfRender, RequestMessage,} from './ProcedureWorkerCommon.js';
 
-import { TraceRow } from '../../component/trace/base/TraceRow.js';
+import {TraceRow} from '../../component/trace/base/TraceRow.js';
 
 export class HiperfReportRender extends PerfRender {
-  renderMainThread(hiPerfReportReq: any, row: TraceRow<HiPerfReportStruct>) {
+  renderMainThread(hiPerfReportReq: any, row: TraceRow<HiPerfReportStruct>): void {
     let list = row.dataList;
     let filter = row.dataListCache;
     let groupBy10MS = hiPerfReportReq.scale > 30_000_000;
-    if (list && row.dataList2.length == 0) {
+    if (list && row.dataList2.length === 0) {
       row.dataList2 = HiPerfReportStruct.reportGroupBy10MS(list, hiPerfReportReq.intervalPerf);
     }
     HiPerfReport(
@@ -51,11 +42,12 @@ export class HiperfReportRender extends PerfRender {
     hiPerfReportReq.context.beginPath();
     hiPerfReportReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
     hiPerfReportReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-    let path = new Path2D();
+    let normalPath = new Path2D();
+    let specPath = new Path2D();
     let offset = groupBy10MS ? 0 : 3;
     let find = false;
     for (let re of filter) {
-      HiPerfReportStruct.draw(hiPerfReportReq.context, path, re, groupBy10MS);
+      HiPerfReportStruct.draw(hiPerfReportReq.context, normalPath, specPath, 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,123 +55,26 @@ export class HiperfReportRender extends PerfRender {
         }
       }
     }
-    if (!find && row.isHover) HiPerfReportStruct.hoverStruct = undefined;
-    groupBy10MS ? hiPerfReportReq.context.fill(path) : hiPerfReportReq.context.stroke(path);
-    hiPerfReportReq.context.closePath();
-  }
-
-  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,
-        hiPerfReportRequest.type!,
-        filter,
-        hiPerfReportRequest.startNS,
-        hiPerfReportRequest.endNS,
-        hiPerfReportRequest.totalNS,
-        hiPerfReportRequest.frame,
-        groupBy10MS,
-        hiPerfReportRequest.intervalPerf,
-        hiPerfReportRequest.useCache || !hiPerfReportRequest.range.refresh
-      );
-    } else {
-      if (!hiPerfReportRequest.useCache) {
-        HiPerfReport(
-          list,
-          dataList2,
-          hiPerfReportRequest.type!,
-          filter,
-          hiPerfReportRequest.startNS,
-          hiPerfReportRequest.endNS,
-          hiPerfReportRequest.totalNS,
-          hiPerfReportRequest.frame,
-          groupBy10MS,
-          hiPerfReportRequest.intervalPerf,
-          false
-        );
-      }
-    }
-    if (hiPerfReportRequest.canvas) {
-      hiPerfReportRequest.context.clearRect(0, 0, hiPerfReportRequest.frame.width, hiPerfReportRequest.frame.height);
-      let arr = filter;
-      if (
-        arr.length > 0 &&
-        !hiPerfReportRequest.range.refresh &&
-        !hiPerfReportRequest.useCache &&
-        hiPerfReportRequest.lazyRefresh
-      ) {
-        drawLoading(
-          hiPerfReportRequest.context,
-          hiPerfReportRequest.startNS,
-          hiPerfReportRequest.endNS,
-          hiPerfReportRequest.totalNS,
-          hiPerfReportRequest.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
-        );
-      }
-      drawLines(
-        hiPerfReportRequest.context,
-        hiPerfReportRequest.xs,
-        hiPerfReportRequest.frame.height,
-        hiPerfReportRequest.lineColor
-      );
-      hiPerfReportRequest.context.stroke();
-      hiPerfReportRequest.context.beginPath();
+    if (!find && row.isHover) {
       HiPerfReportStruct.hoverStruct = undefined;
-      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 &&
-            hiPerfReportRequest.hoverX >= re.frame.x - offset &&
-            hiPerfReportRequest.hoverX <= re.frame.x + re.frame.width + offset
-          ) {
-            HiPerfReportStruct.hoverStruct = re;
-            break;
-          }
-        }
-      } else {
-        HiPerfReportStruct.hoverStruct = hiPerfReportRequest.params.hoverStruct;
-      }
-      HiPerfReportStruct.selectStruct = hiPerfReportRequest.params.selectStruct;
-      let path = new Path2D();
-      for (let re of filter) {
-        HiPerfReportStruct.draw(hiPerfReportRequest.context, path, re, groupBy10MS);
-      }
-      groupBy10MS ? hiPerfReportRequest.context.fill(path) : hiPerfReportRequest.context.stroke(path);
-      hiPerfReportRequest.context.closePath();
-      drawSelection(hiPerfReportRequest.context, hiPerfReportRequest.params);
-      drawFlagLine(
-        hiPerfReportRequest.context,
-        hiPerfReportRequest.flagMoveInfo,
-        hiPerfReportRequest.flagSelectedInfo,
-        hiPerfReportRequest.startNS,
-        hiPerfReportRequest.endNS,
-        hiPerfReportRequest.totalNS,
-        hiPerfReportRequest.frame,
-        hiPerfReportRequest.slicesTime
-      );
     }
-    // @ts-ignore
-    self.postMessage({
-      id: hiPerfReportRequest.id,
-      type: hiPerfReportRequest.type,
-      results: hiPerfReportRequest.canvas ? undefined : filter,
-      hover: HiPerfReportStruct.hoverStruct,
-    });
+    if (groupBy10MS) {
+      hiPerfReportReq.context.fill(normalPath);
+    } else {
+      hiPerfReportReq.context.stroke(normalPath);
+      HiPerfStruct.drawSpecialPath(hiPerfReportReq.context, specPath);
+    }
+    hiPerfReportReq.context.closePath();
   }
+
+  render(hiPerfReportRequest: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>): void {}
 }
 
 export function HiPerfReport(
   arr: Array<any>,
   arr2: any,
   type: string,
-  res: Array<any>,
+  hiPerfFilters: Array<any>,
   startNS: number,
   endNS: number,
   totalNS: number,
@@ -187,26 +82,26 @@ export function HiPerfReport(
   groupBy10MS: boolean,
   intervalPerf: number,
   use: boolean
-) {
-  if (use && res.length > 0) {
+): void {
+  if (use && hiPerfFilters.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;
+    for (let i = 0; i < hiPerfFilters.length; i++) {
+      let hiPerfData = hiPerfFilters[i];
+      if ((hiPerfData.startNS || 0) + (hiPerfData.dur || 0) > startNS && (hiPerfData.startNS || 0) < endNS) {
+        if (!hiPerfData.frame) {
+          hiPerfData.frame = {};
+          hiPerfData.frame.y = y;
         }
-        it.frame.height = it.height;
-        HiPerfReportStruct.setFrame(it, pns, startNS, endNS, frame);
+        hiPerfData.frame.height = hiPerfData.height;
+        HiPerfReportStruct.setFrame(hiPerfData, pns, startNS, endNS, frame);
       } else {
-        it.frame = null;
+        hiPerfData.frame = null;
       }
     }
     return;
   }
-  res.length = 0;
+  hiPerfFilters.length = 0;
   if (arr) {
     let list: Array<any> = groupBy10MS ? arr2 : arr;
     let pns = (endNS - startNS) / frame.width;
@@ -227,13 +122,15 @@ export function HiPerfReport(
           pre[`${current.frame.x}`] = [];
           pre[`${current.frame.x}`].push(current);
           if (groupBy10MS) {
-            res.push(current);
+            hiPerfFilters.push(current);
           } else {
-            if (res.length == 0) {
-              res.push(current);
+            if (hiPerfFilters.length == 0) {
+              hiPerfFilters.push(current);
             }
-            if (res[res.length - 1] && Math.abs(current.frame.x - res[res.length - 1].frame.x) > 4) {
-              res.push(current);
+            if (hiPerfFilters[hiPerfFilters.length - 1] &&
+              Math.abs(current.frame.x - hiPerfFilters[hiPerfFilters.length - 1].frame.x) > 4
+            ) {
+              hiPerfFilters.push(current);
             }
           }
         }
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts
index 6166b05cdb33623c18ec2dc4badda64d7874deb0..b005cdad581cdee8dea98d39a32337844a6428bc 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfThread.ts
@@ -15,11 +15,6 @@
 
 import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
 import {
-  BaseStruct,
-  drawFlagLine,
-  drawLines,
-  drawLoading,
-  drawSelection,
   hiPerf,
   HiPerfStruct,
   PerfRender,
@@ -28,11 +23,11 @@ import {
 import { TraceRow } from '../../component/trace/base/TraceRow.js';
 
 export class HiperfThreadRender extends PerfRender {
-  renderMainThread(hiPerfThreadReq: any, row: TraceRow<HiPerfThreadStruct>) {
+  renderMainThread(hiPerfThreadReq: any, row: TraceRow<HiPerfThreadStruct>): void {
     let list = row.dataList;
     let filter = row.dataListCache;
     let groupBy10MS = hiPerfThreadReq.scale > 30_000_000;
-    if (list && row.dataList2.length == 0) {
+    if (list && row.dataList2.length === 0) {
       row.dataList2 = HiPerfThreadStruct.groupBy10MS(list, hiPerfThreadReq.intervalPerf);
     }
     hiPerf(
@@ -48,11 +43,12 @@ export class HiperfThreadRender extends PerfRender {
     hiPerfThreadReq.context.beginPath();
     hiPerfThreadReq.context.fillStyle = ColorUtils.FUNC_COLOR[0];
     hiPerfThreadReq.context.strokeStyle = ColorUtils.FUNC_COLOR[0];
-    let path = new Path2D();
+    let normalPath = new Path2D();
+    let specPath = new Path2D();
     let offset = groupBy10MS ? 0 : 3;
     let find = false;
     for (let re of filter) {
-      HiPerfThreadStruct.draw(hiPerfThreadReq.context, path, re, groupBy10MS);
+      HiPerfThreadStruct.draw(hiPerfThreadReq.context, normalPath, specPath, 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;
@@ -60,110 +56,19 @@ export class HiperfThreadRender extends PerfRender {
         }
       }
     }
-    if (!find && row.isHover) HiPerfThreadStruct.hoverStruct = undefined;
-    groupBy10MS ? hiPerfThreadReq.context.fill(path) : hiPerfThreadReq.context.stroke(path);
+    if (!find && row.isHover) {
+      HiPerfThreadStruct.hoverStruct = undefined;
+    }
+    if (groupBy10MS) {
+      hiPerfThreadReq.context.fill(normalPath);
+    } else {
+      hiPerfThreadReq.context.stroke(normalPath);
+      HiPerfStruct.drawSpecialPath(hiPerfThreadReq.context, specPath);
+    }
     hiPerfThreadReq.context.closePath();
   }
 
-  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,
-        hiPerfThreadRequest.startNS,
-        hiPerfThreadRequest.endNS,
-        hiPerfThreadRequest.frame,
-        groupBy10MS,
-        hiPerfThreadRequest.useCache || !hiPerfThreadRequest.range.refresh
-      );
-    } else {
-      if (!hiPerfThreadRequest.useCache) {
-        hiPerf(
-          list,
-          dataList2,
-          filter,
-          hiPerfThreadRequest.startNS,
-          hiPerfThreadRequest.endNS,
-          hiPerfThreadRequest.frame,
-          groupBy10MS,
-          false
-        );
-      }
-    }
-    if (hiPerfThreadRequest.canvas) {
-      hiPerfThreadRequest.context.clearRect(0, 0, hiPerfThreadRequest.frame.width, hiPerfThreadRequest.frame.height);
-      let arr = filter;
-      if (
-        arr.length > 0 &&
-        !hiPerfThreadRequest.range.refresh &&
-        !hiPerfThreadRequest.useCache &&
-        hiPerfThreadRequest.lazyRefresh
-      ) {
-        drawLoading(
-          hiPerfThreadRequest.context,
-          hiPerfThreadRequest.startNS,
-          hiPerfThreadRequest.endNS,
-          hiPerfThreadRequest.totalNS,
-          hiPerfThreadRequest.frame,
-          arr[0].startNS,
-          arr[arr.length - 1].startNS + arr[arr.length - 1].dur
-        );
-      }
-      drawLines(
-        hiPerfThreadRequest.context,
-        hiPerfThreadRequest.xs,
-        hiPerfThreadRequest.frame.height,
-        hiPerfThreadRequest.lineColor
-      );
-      hiPerfThreadRequest.context.stroke();
-      hiPerfThreadRequest.context.beginPath();
-      HiPerfThreadStruct.hoverStruct = undefined;
-      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 &&
-            hiPerfThreadRequest.hoverX >= re.frame.x - offset &&
-            hiPerfThreadRequest.hoverX <= re.frame.x + re.frame.width + offset
-          ) {
-            HiPerfThreadStruct.hoverStruct = re;
-            break;
-          }
-        }
-      } else {
-        HiPerfThreadStruct.hoverStruct = hiPerfThreadRequest.params.hoverStruct;
-      }
-      HiPerfThreadStruct.selectStruct = hiPerfThreadRequest.params.selectStruct;
-      let path = new Path2D();
-      for (let re of filter) {
-        HiPerfThreadStruct.draw(hiPerfThreadRequest.context, path, re, groupBy10MS);
-      }
-      groupBy10MS ? hiPerfThreadRequest.context.fill(path) : hiPerfThreadRequest.context.stroke(path);
-      hiPerfThreadRequest.context.stroke();
-      hiPerfThreadRequest.context.closePath();
-      drawSelection(hiPerfThreadRequest.context, hiPerfThreadRequest.params);
-      drawFlagLine(
-        hiPerfThreadRequest.context,
-        hiPerfThreadRequest.flagMoveInfo,
-        hiPerfThreadRequest.flagSelectedInfo,
-        hiPerfThreadRequest.startNS,
-        hiPerfThreadRequest.endNS,
-        hiPerfThreadRequest.totalNS,
-        hiPerfThreadRequest.frame,
-        hiPerfThreadRequest.slicesTime
-      );
-    }
-    // @ts-ignore
-    self.postMessage({
-      id: hiPerfThreadRequest.id,
-      type: hiPerfThreadRequest.type,
-      results: hiPerfThreadRequest.canvas ? undefined : filter,
-      hover: HiPerfThreadStruct.hoverStruct,
-    });
+  render(req: RequestMessage, list: Array<any>, filter: Array<any>, dataList2: Array<any>): void {
   }
 }
 
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts
index b76e912c7ecaabe225956e0962b6ecc33b99c500..64895a773743e04ee8c5bcc822a8b8075bf5a2dc 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerMemoryAbility.ts
@@ -37,30 +37,34 @@ export class MemoryAbilityRender extends Render {
       maxMemoryByte: number;
       maxMemoryByteName: string;
     },
-    row: TraceRow<MemoryAbilityMonitorStruct>
-  ) {
-    let memoryAbilityList = row.dataList;
-    let memoryAbilityFilter = row.dataListCache;
+    memoryAbilityRow: TraceRow<MemoryAbilityMonitorStruct>
+  ): void {
+    let memoryAbilityList = memoryAbilityRow.dataList;
+    let memoryAbilityFilter = memoryAbilityRow.dataListCache;
     dataFilterHandler(memoryAbilityList, memoryAbilityFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
       endNS: TraceRow.range?.endNS ?? 0,
       totalNS: TraceRow.range?.totalNS ?? 0,
-      frame: row.frame,
+      frame: memoryAbilityRow.frame,
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
     req.context.beginPath();
     let find = false;
     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.draw(req.context, re, req.maxMemoryByte, memoryAbilityRow.isHover);
+      if (memoryAbilityRow.isHover && re.frame &&
+        isFrameContainPoint(re.frame, memoryAbilityRow.hoverX, memoryAbilityRow.hoverY)
+      ) {
         MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct = re;
         find = true;
       }
     }
-    if (!find && row.isHover) MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct = undefined;
+    if (!find && memoryAbilityRow.isHover) {
+      MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct = undefined;
+    }
     req.context.closePath();
     let textMetrics = req.context.measureText(req.maxMemoryByteName);
     req.context.globalAlpha = 0.8;
@@ -72,7 +76,7 @@ export class MemoryAbilityRender extends Render {
     req.context.fillText(req.maxMemoryByteName, 4, 5 + 9);
   }
 
-  render(memoryAbilityRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+  render(memoryAbilityRequest: RequestMessage, list: Array<any>, filter: Array<any>): void {
     if (memoryAbilityRequest.lazyRefresh) {
       memoryAbility(
         list,
@@ -248,29 +252,29 @@ export class MemoryAbilityMonitorStruct extends BaseStruct {
 
   static draw(
     memoryAbilityContext2D: CanvasRenderingContext2D,
-    data: MemoryAbilityMonitorStruct,
+    memoryAbilityData: MemoryAbilityMonitorStruct,
     maxMemoryByte: number,
     isHover: boolean
   ) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
+    if (memoryAbilityData.frame) {
+      let width = memoryAbilityData.frame.width || 0;
       let index = 2;
       memoryAbilityContext2D.fillStyle = ColorUtils.colorForTid(index);
       memoryAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct?.startNS && isHover) {
+      if (memoryAbilityData.startNS === MemoryAbilityMonitorStruct.hoverMemoryAbilityStruct?.startNS && isHover) {
         memoryAbilityContext2D.lineWidth = 1;
         memoryAbilityContext2D.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxMemoryByte);
+        let drawHeight: number = Math.floor(((memoryAbilityData.value || 0) * (memoryAbilityData.frame.height || 0) * 1.0) / maxMemoryByte);
         memoryAbilityContext2D.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          memoryAbilityData.frame.x,
+          memoryAbilityData.frame.y + memoryAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
         memoryAbilityContext2D.beginPath();
         memoryAbilityContext2D.arc(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          memoryAbilityData.frame.x,
+          memoryAbilityData.frame.y + memoryAbilityData.frame.height - drawHeight + 4,
           3,
           0,
           2 * Math.PI,
@@ -280,17 +284,17 @@ export class MemoryAbilityMonitorStruct extends BaseStruct {
         memoryAbilityContext2D.globalAlpha = 1.0;
         memoryAbilityContext2D.stroke();
         memoryAbilityContext2D.beginPath();
-        memoryAbilityContext2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        memoryAbilityContext2D.moveTo(memoryAbilityData.frame.x + 3, memoryAbilityData.frame.y + memoryAbilityData.frame.height - drawHeight + 4);
         memoryAbilityContext2D.lineWidth = 3;
-        memoryAbilityContext2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        memoryAbilityContext2D.lineTo(memoryAbilityData.frame.x + width, memoryAbilityData.frame.y + memoryAbilityData.frame.height - drawHeight + 4);
         memoryAbilityContext2D.stroke();
       } else {
         memoryAbilityContext2D.globalAlpha = 0.6;
         memoryAbilityContext2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxMemoryByte);
+        let drawHeight: number = Math.floor(((memoryAbilityData.value || 0) * (memoryAbilityData.frame.height || 0)) / maxMemoryByte);
         memoryAbilityContext2D.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          memoryAbilityData.frame.x,
+          memoryAbilityData.frame.y + memoryAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts
index 64f7263e152dedf9c3f1201987a8a321b8546460..0f3de43f1f3c93aa8ddd3cc04cc7752667860827 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerNetworkAbility.ts
@@ -25,30 +25,34 @@ export class NetworkAbilityRender extends Render {
       maxNetworkRate: number;
       maxNetworkRateName: string;
     },
-    row: TraceRow<NetworkAbilityMonitorStruct>
-  ) {
-    let networkAbilityList = row.dataList;
-    let networkAbilityFilter = row.dataListCache;
+    networkAbilityRow: TraceRow<NetworkAbilityMonitorStruct>
+  ): void {
+    let networkAbilityList = networkAbilityRow.dataList;
+    let networkAbilityFilter = networkAbilityRow.dataListCache;
     dataFilterHandler(networkAbilityList, networkAbilityFilter, {
       startKey: 'startNS',
       durKey: 'dur',
       startNS: TraceRow.range?.startNS ?? 0,
       endNS: TraceRow.range?.endNS ?? 0,
       totalNS: TraceRow.range?.totalNS ?? 0,
-      frame: row.frame,
+      frame: networkAbilityRow.frame,
       paddingTop: 5,
       useCache: req.useCache || !(TraceRow.range?.refresh ?? false),
     });
     req.context.beginPath();
     let find = false;
     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.draw(req.context, re, req.maxNetworkRate, networkAbilityRow.isHover);
+      if (networkAbilityRow.isHover && re.frame &&
+        isFrameContainPoint(re.frame, networkAbilityRow.hoverX, networkAbilityRow.hoverY)
+      ) {
         NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = re;
         find = true;
       }
     }
-    if (!find && row.isHover) NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = undefined;
+    if (!find && networkAbilityRow.isHover) {
+      NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = undefined;
+    }
     req.context.closePath();
     let textMetrics = req.context.measureText(req.maxNetworkRateName);
     req.context.globalAlpha = 0.8;
@@ -60,7 +64,7 @@ export class NetworkAbilityRender extends Render {
     req.context.fillText(req.maxNetworkRateName, 4, 5 + 9);
   }
 
-  render(req: RequestMessage, list: Array<any>, filter: Array<any>) {}
+  render(req: RequestMessage, list: Array<any>, filter: Array<any>): void {}
 }
 
 export class NetworkAbilityMonitorStruct extends BaseStruct {
@@ -73,29 +77,29 @@ export class NetworkAbilityMonitorStruct extends BaseStruct {
 
   static draw(
     networkAbilityContext2D: CanvasRenderingContext2D,
-    data: NetworkAbilityMonitorStruct,
+    networkAbilityData: NetworkAbilityMonitorStruct,
     maxNetworkRate: number,
     isHover: boolean
-  ) {
-    if (data.frame) {
-      let width = data.frame.width || 0;
+  ): void {
+    if (networkAbilityData.frame) {
+      let width = networkAbilityData.frame.width || 0;
       let index = 2;
       networkAbilityContext2D.fillStyle = ColorUtils.colorForTid(index);
       networkAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index);
-      if (data.startNS === NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct?.startNS && isHover) {
+      if (networkAbilityData.startNS === NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct?.startNS && isHover) {
         networkAbilityContext2D.lineWidth = 1;
         networkAbilityContext2D.globalAlpha = 0.6;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxNetworkRate);
+        let drawHeight: number = Math.floor(((networkAbilityData.value || 0) * (networkAbilityData.frame.height || 0) * 1.0) / maxNetworkRate);
         networkAbilityContext2D.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          networkAbilityData.frame.x,
+          networkAbilityData.frame.y + networkAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
         networkAbilityContext2D.beginPath();
         networkAbilityContext2D.arc(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          networkAbilityData.frame.x,
+          networkAbilityData.frame.y + networkAbilityData.frame.height - drawHeight + 4,
           3,
           0,
           2 * Math.PI,
@@ -105,17 +109,17 @@ export class NetworkAbilityMonitorStruct extends BaseStruct {
         networkAbilityContext2D.globalAlpha = 1.0;
         networkAbilityContext2D.stroke();
         networkAbilityContext2D.beginPath();
-        networkAbilityContext2D.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4);
+        networkAbilityContext2D.moveTo(networkAbilityData.frame.x + 3, networkAbilityData.frame.y + networkAbilityData.frame.height - drawHeight + 4);
         networkAbilityContext2D.lineWidth = 3;
-        networkAbilityContext2D.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4);
+        networkAbilityContext2D.lineTo(networkAbilityData.frame.x + width, networkAbilityData.frame.y + networkAbilityData.frame.height - drawHeight + 4);
         networkAbilityContext2D.stroke();
       } else {
         networkAbilityContext2D.globalAlpha = 0.6;
         networkAbilityContext2D.lineWidth = 1;
-        let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxNetworkRate);
+        let drawHeight: number = Math.floor(((networkAbilityData.value || 0) * (networkAbilityData.frame.height || 0)) / maxNetworkRate);
         networkAbilityContext2D.fillRect(
-          data.frame.x,
-          data.frame.y + data.frame.height - drawHeight + 4,
+          networkAbilityData.frame.x,
+          networkAbilityData.frame.y + networkAbilityData.frame.height - drawHeight + 4,
           width,
           drawHeight
         );
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerTimeline.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerTimeline.ts
index e934d5067449a1fb0bf8848991c70cee2f4fbef8..76c94cb9e666357800b575f8080f6ed488f466ab 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerTimeline.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerTimeline.ts
@@ -479,24 +479,7 @@ export class RangeRuler extends Graph {
       this.c.globalAlpha = 1;
     }
     //绘制选中区域
-    this.c.fillStyle = '#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.fillRect(this.rangeRect.x, this.rangeRect.y, this.rangeRect.width, this.rangeRect.height);
-    this.c.globalAlpha = 1;
-    this.c.globalAlpha = 0.5;
-    this.c.fillStyle = '#999999';
-    this.c.fillRect(this.frame.x, this.frame.y, this.rangeRect.x, this.rangeRect.height);
-    this.c.fillRect(
-      this.rangeRect.x + this.rangeRect.width,
-      this.frame.y,
-      this.frame.width - this.rangeRect.width,
-      this.rangeRect.height
-    );
-    this.c.globalAlpha = 1;
-    this.c.closePath();
-    this.markA.draw();
-    this.markB.draw();
+    this.drawRangeSelection();
     if (this.notifyHandler) {
       this.range.startX = this.rangeRect.x;
       this.range.endX = this.rangeRect.x + this.rangeRect.width;
@@ -527,9 +510,9 @@ export class RangeRuler extends Graph {
         this.scale = this.scales[0];
       }
       let tmpNs = 0;
-      let yu = this.range.startNS % this.scale;
-      let realW = (this.scale * this.frame.width) / (this.range.endNS - this.range.startNS);
-      let startX = 0;
+      let timeLineYu = this.range.startNS % this.scale;
+      let timeLineRealW = (this.scale * this.frame.width) / (this.range.endNS - this.range.startNS);
+      let timeLineStartX = 0;
       if (this.range.xs) {
         this.range.xs.length = 0;
       } else {
@@ -540,17 +523,17 @@ export class RangeRuler extends Graph {
       } else {
         this.range.xsTxt = [];
       }
-      if (yu != 0) {
-        let firstNodeWidth = ((this.scale - yu) / this.scale) * realW;
-        startX += firstNodeWidth;
-        tmpNs += yu;
-        this.range.xs.push(startX);
+      if (timeLineYu != 0) {
+        let firstNodeWidth = ((this.scale - timeLineYu) / this.scale) * timeLineRealW;
+        timeLineStartX += firstNodeWidth;
+        tmpNs += timeLineYu;
+        this.range.xs.push(timeLineStartX);
         this.range.xsTxt.push(ns2s(tmpNs));
       }
       while (tmpNs < this.range.endNS - this.range.startNS) {
-        startX += realW;
+        timeLineStartX += timeLineRealW;
         tmpNs += this.scale;
-        this.range.xs.push(startX);
+        this.range.xs.push(timeLineStartX);
         this.range.xsTxt.push(ns2s(tmpNs));
       }
       if (!discardNotify) {
@@ -559,11 +542,32 @@ export class RangeRuler extends Graph {
     }
   }
 
+  private drawRangeSelection() {
+    this.c.fillStyle = '#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.fillRect(this.rangeRect.x, this.rangeRect.y, this.rangeRect.width, this.rangeRect.height);
+    this.c.globalAlpha = 1;
+    this.c.globalAlpha = 0.5;
+    this.c.fillStyle = '#999999';
+    this.c.fillRect(this.frame.x, this.frame.y, this.rangeRect.x, this.rangeRect.height);
+    this.c.fillRect(
+      this.rangeRect.x + this.rangeRect.width,
+      this.frame.y,
+      this.frame.width - this.rangeRect.width,
+      this.rangeRect.height
+    );
+    this.c.globalAlpha = 1;
+    this.c.closePath();
+    this.markA.draw();
+    this.markB.draw();
+  }
+
   mouseDown(ev: MouseEvent) {
-    let x = ev.offsetX - (offsetLeft || 0);
-    let y = ev.offsetY - (offsetTop || 0);
+    let timeLineMouseDownX = ev.offsetX - (offsetLeft || 0);
+    let timeLineMouseDownY = ev.offsetY - (offsetTop || 0);
     this.isMouseDown = true;
-    this.mouseDownOffsetX = x;
+    this.mouseDownOffsetX = timeLineMouseDownX;
     if (this.markA.isHover) {
       this.movingMark = this.markA;
       this.mouseDownMovingMarkX = this.movingMark.frame.x || 0;
@@ -573,13 +577,13 @@ export class RangeRuler extends Graph {
     } else {
       this.movingMark = null;
     }
-    if (this.rangeRect.containsWithPadding(x, y, 5, 0)) {
+    if (this.rangeRect.containsWithPadding(timeLineMouseDownX, timeLineMouseDownY, 5, 0)) {
       this.isMovingRange = true;
       this.markAX = this.markA.frame.x;
       this.markBX = this.markB.frame.x;
     } else if (
-      this.frame.containsWithMargin(x, y, 20, 0, 0, 0) &&
-      !this.rangeRect.containsWithMargin(x, y, 0, markPadding, 0, markPadding)
+      this.frame.containsWithMargin(timeLineMouseDownX, timeLineMouseDownY, 20, 0, 0, 0) &&
+      !this.rangeRect.containsWithMargin(timeLineMouseDownX, timeLineMouseDownY, 0, markPadding, 0, markPadding)
     ) {
       this.isNewRange = true;
     }
diff --git a/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts b/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts
index 235d9f154a8043f67e654aae5de4aca3ddcb8c97..ee7a6887b117111a92cee01988fed2eab60d1fb5 100644
--- a/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts
+++ b/ide/src/trace/database/ui-worker/ProduceWorkerSdkCounter.ts
@@ -36,7 +36,7 @@ export class SdkCounterRender extends Render {
       maxValue: number;
     },
     row: TraceRow<CounterStruct>
-  ) {
+  ): void {
     let counterList = row.dataList;
     let counterFilter = row.dataListCache;
     let maxCounter = req.maxValue;
@@ -59,7 +59,9 @@ export class SdkCounterRender extends Render {
       }
       CounterStruct.draw(req.context, re, maxCounter);
     }
-    if (!sdkCounterFind && 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;
@@ -71,7 +73,7 @@ export class SdkCounterRender extends Render {
     req.context.fillText(maxCounterName, 4, 5 + 9);
   }
 
-  render(sdkCounterRequest: RequestMessage, list: Array<any>, filter: Array<any>) {
+  render(sdkCounterRequest: RequestMessage, list: Array<any>, filter: Array<any>): void {
     if (sdkCounterRequest.lazyRefresh) {
       this.counter(
         list,
@@ -173,43 +175,43 @@ export class SdkCounterRender extends Render {
   }
 
   counter(
-    sdkCounteraList: Array<any>,
-    res: Array<any>,
+    sdkCounterList: Array<any>,
+    sdkCounterFilters: Array<any>,
     startNS: number,
     endNS: number,
     totalNS: number,
     frame: any,
     use: boolean
   ) {
-    if (use && res.length > 0) {
-      for (let index = 0; index < res.length; index++) {
-        let item = res[index];
+    if (use && sdkCounterFilters.length > 0) {
+      for (let index = 0; index < sdkCounterFilters.length; index++) {
+        let item = sdkCounterFilters[index];
         if ((item.ts || 0) + (item.dur || 0) > (startNS || 0) && (item.ts || 0) < (endNS || 0)) {
-          CounterStruct.setCounterFrame(res[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+          CounterStruct.setCounterFrame(sdkCounterFilters[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         } else {
-          res[index].frame = null;
+          sdkCounterFilters[index].frame = null;
         }
       }
       return;
     }
-    res.length = 0;
-    if (sdkCounteraList) {
-      for (let index = 0; index < sdkCounteraList.length; index++) {
-        let item = sdkCounteraList[index];
-        if (index === sdkCounteraList.length - 1) {
+    sdkCounterFilters.length = 0;
+    if (sdkCounterList) {
+      for (let index = 0; index < sdkCounterList.length; index++) {
+        let item = sdkCounterList[index];
+        if (index === sdkCounterList.length - 1) {
           item.dur = (endNS || 0) - (item.ts || 0);
         } else {
-          item.dur = (sdkCounteraList[index + 1].ts || 0) - (item.ts || 0);
+          item.dur = (sdkCounterList[index + 1].ts || 0) - (item.ts || 0);
         }
         if ((item.ts || 0) + (item.dur || 0) > (startNS || 0) && (item.ts || 0) < (endNS || 0)) {
-          CounterStruct.setCounterFrame(sdkCounteraList[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+          CounterStruct.setCounterFrame(sdkCounterList[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
           if (
             index > 0 &&
-            (sdkCounteraList[index - 1].frame?.x || 0) == (sdkCounteraList[index].frame?.x || 0) &&
-            (sdkCounteraList[index - 1].frame?.width || 0) == (sdkCounteraList[index].frame?.width || 0)
+            (sdkCounterList[index - 1].frame?.x || 0) == (sdkCounterList[index].frame?.x || 0) &&
+            (sdkCounterList[index - 1].frame?.width || 0) == (sdkCounterList[index].frame?.width || 0)
           ) {
           } else {
-            res.push(item);
+            sdkCounterFilters.push(item);
           }
         }
       }
diff --git a/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts b/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts
index 7c64668fcbc55889ba9f736ac5f5812d4ec2b29a..bad3969f4d71c92ea891052aefae733e9a343988 100644
--- a/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts
+++ b/ide/src/trace/database/ui-worker/ProduceWorkerSdkSlice.ts
@@ -38,7 +38,7 @@ export class SdkSliceRender extends Render {
       maxValue: number;
     },
     row: TraceRow<SdkSliceStruct>
-  ) {
+  ): void {
     let sdkList = row.dataList;
     let sdkFilter = row.dataListCache;
     SdkSliceStruct.maxSdkSlice = req.maxValue;
@@ -61,11 +61,13 @@ export class SdkSliceRender extends Render {
       }
       SdkSliceStruct.draw(req.context, re);
     }
-    if (!sdkSliceFind && row.isHover) SdkSliceStruct.hoverSdkSliceStruct = undefined;
+    if (!sdkSliceFind && row.isHover) {
+      SdkSliceStruct.hoverSdkSliceStruct = undefined;
+    }
     req.context.closePath();
   }
 
-  render(sdkSliceRequest: RequestMessage, sdkList: Array<any>, filter: Array<any>) {
+  render(sdkSliceRequest: RequestMessage, sdkList: Array<any>, filter: Array<any>): void {
     if (sdkSliceRequest.lazyRefresh) {
       this.sdkSlice(
         sdkList,
@@ -160,25 +162,25 @@ export class SdkSliceRender extends Render {
 
   sdkSlice(
     sdkList: Array<any>,
-    res: Array<any>,
+    sdkSliceFilters: Array<any>,
     startNS: number,
     endNS: number,
     totalNS: number,
     frame: any,
     use: boolean
-  ) {
-    if (use && res.length > 0) {
-      for (let index = 0; index < res.length; index++) {
-        let item = res[index];
+  ): void {
+    if (use && sdkSliceFilters.length > 0) {
+      for (let index = 0; index < sdkSliceFilters.length; index++) {
+        let item = sdkSliceFilters[index];
         if ((item.end_ts || 0) > (startNS || 0) && (item.start_ts || 0) < (endNS || 0)) {
-          SdkSliceStruct.setSdkSliceFrame(res[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
+          SdkSliceStruct.setSdkSliceFrame(sdkSliceFilters[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame);
         } else {
-          res[index].frame = null;
+          sdkSliceFilters[index].frame = null;
         }
       }
       return;
     }
-    res.length = 0;
+    sdkSliceFilters.length = 0;
     if (sdkList) {
       for (let index = 0; index < sdkList.length; index++) {
         let item = sdkList[index];
@@ -193,7 +195,7 @@ export class SdkSliceRender extends Render {
             (sdkList[index - 1].frame?.width || 0) == (sdkList[index].frame?.width || 0)
           ) {
           } else {
-            res.push(item);
+            sdkSliceFilters.push(item);
           }
         }
       }
@@ -246,7 +248,7 @@ export class SdkSliceStruct extends BaseStruct {
     endNS: number,
     totalNS: number,
     frame: any
-  ) {
+  ): void {
     let sdkSliceStartPointX: number, sdkSliceEndPointX: number;
 
     if ((SdkSliceNode.start_ts || 0) < startNS) {
diff --git a/ide/test/base-ui/chart/column/LitChartColumn.test.ts b/ide/test/base-ui/chart/column/LitChartColumn.test.ts
index 68533a1858639b6afab6158aa167cdf492456984..6f2667b9f8743bb0c25379a089c695712df01f20 100644
--- a/ide/test/base-ui/chart/column/LitChartColumn.test.ts
+++ b/ide/test/base-ui/chart/column/LitChartColumn.test.ts
@@ -45,22 +45,22 @@ describe('litChartColumn Test', () => {
     clo.config = {
       data: [
         {
-          pid: 1,
-          pName: '1',
-          tid: 1,
+          pid: 11,
+          pName: 'process01',
+          tid: 332,
           tName: '11',
-          total: 12,
+          total: 45,
           size: 'big core',
-          timeStr: '11',
+          timeStr: '91.11kb',
         },
         {
-          pid: 2,
-          pName: '2',
-          tid: 2,
+          pid: 21,
+          pName: 'process02',
+          tid: 21,
           tName: '222',
           total: 13,
           size: 'big core',
-          timeStr: '22',
+          timeStr: '211.00kb',
         },
       ],
       appendPadding: 10,
@@ -70,10 +70,6 @@ describe('litChartColumn Test', () => {
       color: (a: any) => {
         if (a.size === 'big core') {
           return '#2f72f8';
-        } else if (a.size === 'middle core') {
-          return '#ffab67';
-        } else if (a.size === 'small core') {
-          return '#a285d2';
         } else {
           return '#0a59f7';
         }
@@ -86,15 +82,11 @@ describe('litChartColumn Test', () => {
             total += obj.obj.total;
             tip = `${tip}
                                 <div style="display:flex;flex-direction: row;align-items: center;">
-                                    <div style="width: 10px;height: 5px;background-color: ${obj.color};margin-right: 5px"></div>
-                                    <div>${obj.type}:${obj.obj.timeStr}</div>
                                 </div>
                             `;
           }
           tip = `<div>
                                         <div>tid:${a[0].obj.tid}</div>
-                                        ${tip}
-                                        ${a.length > 1 ? `<div>total:${getProbablyTime(total)}</div>` : ''}
                                     </div>`;
           return tip;
         } else {
@@ -103,28 +95,26 @@ describe('litChartColumn Test', () => {
       },
       label: null,
     };
-    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 2 });
     expect(clo.config).not.toBeUndefined();
     LitChartColumn.contains = jest.fn().mockResolvedValue(true);
-
     clo.dataSource = [
       {
-        pid: 1,
-        pName: '1',
-        tid: 1,
+        pid: 110,
+        pName: 'process03',
+        tid: 32,
         tName: '11',
-        total: 12,
+        total: 121,
         size: 'big core',
-        timeStr: '11',
+        timeStr: '11.09kb',
       },
       {
         pid: 2,
-        pName: '2',
-        tid: 2,
-        tName: '222',
-        total: 13,
+        pName: 'process04',
+        tid: 22,
+        tName: 'thread',
+        total: 131,
         size: 'big core',
-        timeStr: '22',
+        timeStr: '22.30kb',
       },
     ];
     expect(clo.data[0].obj.pid).toBe(2);
diff --git a/ide/test/base-ui/chart/pie/LitChartPie.test.ts b/ide/test/base-ui/chart/pie/LitChartPie.test.ts
index 6b727e115dc69d7c8b20299714b7c4aa8a87c448..44b2b364e3ec90d3076b665800a4886ecfd6b4ee 100644
--- a/ide/test/base-ui/chart/pie/LitChartPie.test.ts
+++ b/ide/test/base-ui/chart/pie/LitChartPie.test.ts
@@ -53,122 +53,119 @@ describe('litChartPie Test', () => {
       return Math.floor(Math.random() * 10 + 1);
     });
     LitChartPieData.isPointIsCircle = jest.fn().mockResolvedValue(true);
-    document.body.innerHTML = `
-        <div>
-            <lit-chart-pie id='chart-pie'></lit-chart-pie>
-        </div> `;
+    document.body.innerHTML = ` <div><lit-chart-pie id='chart-pie'></lit-chart-pie></div> `;
     let clo = document.getElementById('chart-pie') as LitChartPie;
     clo.config = {
-      appendPadding: 0,
+      appendPadding: 20,
       data: [
         {
           cpu: 1,
-          value: 1325000,
-          sum: 204991136,
-          sumTimeStr: '204.99ms ',
-          min: '22.92μs ',
-          max: '28.37ms ',
-          avg: '1.09ms ',
-          count: 188,
-          ratio: '35.46',
+          value: 345021,
+          sum: 2111136,
+          sumTimeStr: '233.99ms ',
+          min: '32.12μs ',
+          max: '3.47ms ',
+          avg: '1.19ms ',
+          count: 238,
+          ratio: '33.46',
         },
         {
           cpu: 1,
-          value: 1700000,
-          sum: 113649487,
+          value: 1100000,
+          sum: 111649487,
           sumTimeStr: '113.65ms ',
           min: '9.90μs ',
           max: '14.07ms ',
           avg: '697.24μs ',
-          count: 163,
+          count: 113,
           ratio: '19.66',
         },
         {
           cpu: 1,
-          value: 1421000,
-          sum: 100750003,
+          value: 1411000,
+          sum: 1005403,
           sumTimeStr: '100.75ms ',
           min: '32.81μs ',
           max: '25.12ms ',
           avg: '3.73ms ',
-          count: 27,
+          count: 17,
           ratio: '17.43',
         },
         {
           cpu: 1,
-          value: 884000,
-          sum: 66958334,
+          value: 884100,
+          sum: 66958331,
           sumTimeStr: '66.96ms ',
           min: '16.82ms ',
           max: '27.30ms ',
           avg: '22.32ms ',
-          count: 3,
+          count: 31,
           ratio: '11.58',
         },
         {
           cpu: 1,
-          value: 960000,
-          sum: 62210416,
+          value: 960001,
+          sum: 6223411,
           sumTimeStr: '62.21ms ',
           min: '93.23μs ',
           max: '20.34ms ',
           avg: '6.91ms ',
-          count: 9,
+          count: 91,
           ratio: '10.76',
         },
         {
           cpu: 1,
-          value: 1517000,
-          sum: 21867712,
+          value: 1517001,
+          sum: 2131,
           sumTimeStr: '21.87ms ',
           min: '9.90μs ',
           max: '8.28ms ',
           avg: '1.21ms ',
-          count: 18,
+          count: 181,
           ratio: '3.78',
         },
         {
           cpu: 1,
-          value: 1604000,
-          sum: 6372917,
+          value: 1632,
+          sum: 637321,
           sumTimeStr: '6.37ms ',
           min: '33.85μs ',
           max: '2.80ms ',
           avg: '531.08μs ',
-          count: 12,
-          ratio: '1.10',
+          count: 121,
+          ratio: '21.10',
         },
         {
           cpu: 1,
-          value: 1037000,
-          sum: 1141667,
-          sumTimeStr: '1.14ms ',
+          value: 103201,
+          sum: 13261,
+          sumTimeStr: '31.14ms ',
           min: '25.00μs ',
           max: '1.12ms ',
           avg: '570.83μs ',
-          count: 2,
+          count: 21,
           ratio: '0.20',
         },
         {
           cpu: 1,
-          value: 1229000,
-          sum: 91667,
+          value: 12321,
+          sum: 91661,
           sumTimeStr: '91.67μs ',
-          min: '91.67μs ',
-          max: '91.67μs ',
-          avg: '91.67μs ',
-          count: 1,
+          min: '3.67μs ',
+          max: '65.67μs ',
+          avg: '32.67μs ',
+          count: 11,
           ratio: '0.02',
         },
         {
           cpu: 1,
-          value: 1133000,
-          sum: 76042,
+          value: 113201,
+          sum: 76041,
           sumTimeStr: '76.04μs ',
-          min: '76.04μs ',
-          max: '76.04μs ',
-          avg: '76.04μs ',
-          count: 1,
+          min: '23.04μs ',
+          max: '56.04μs ',
+          avg: '32.04μs ',
+          count: 11,
           ratio: '0.01',
         },
       ],
@@ -179,14 +176,14 @@ describe('litChartPie Test', () => {
         type: 'outer',
       },
 
-      tip: (obj: any) => {
+      tip: (test: any) => {
         return `<div>
-                                <div>frequency:${obj.obj.value}</div> 
-                                <div>min:${obj.obj.min}</div>
-                                <div>max:${obj.obj.max}</div>
-                                <div>average:${obj.obj.avg}</div>
-                                <div>duration:${obj.obj.sumTimeStr}</div>
-                                <div>ratio:${obj.obj.ratio}%</div>
+                                <div>frequency:${test.obj.value}</div> 
+                                <div>min:${test.obj.min}</div>
+                                <div>max:${test.obj.max}</div>
+                                <div>average:${test.obj.avg}</div>
+                                <div>duration:${test.obj.sumTimeStr}</div>
+                                <div>ratio:${test.obj.ratio}%</div>
                             </div>
                                 `;
       },
@@ -197,7 +194,7 @@ describe('litChartPie Test', () => {
         },
       ],
     };
-    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 2 });
+    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 3 });
     clo.canvas.dispatchEvent(mouseOutEvent);
     expect(clo.config).not.toBeUndefined();
   });
@@ -213,144 +210,144 @@ describe('litChartPie Test', () => {
         </div> `;
     let clo = document.getElementById('chart-pie') as LitChartPie;
     clo.config = {
-      appendPadding: 0,
+      appendPadding: 3,
       data: [
         {
-          cpu: 1,
-          value: 1325000,
-          sum: 204991136,
+          cpu: 4,
+          value: 1325300,
+          sum: 204992136,
           sumTimeStr: '204.99ms ',
-          min: '22.92μs ',
-          max: '28.37ms ',
-          avg: '1.09ms ',
+          min: '12.92μs ',
+          max: '38.37ms ',
+          avg: '2.09ms ',
           count: 188,
           ratio: '35.46',
         },
         {
           cpu: 1,
-          value: 1700000,
-          sum: 113649487,
+          value: 1200000,
+          sum: 112649487,
           sumTimeStr: '113.65ms ',
           min: '9.90μs ',
           max: '14.07ms ',
           avg: '697.24μs ',
-          count: 163,
+          count: 123,
           ratio: '19.66',
         },
         {
           cpu: 1,
-          value: 1421000,
-          sum: 100750003,
+          value: 1421002,
+          sum: 100750002,
           sumTimeStr: '100.75ms ',
           min: '32.81μs ',
           max: '25.12ms ',
           avg: '3.73ms ',
-          count: 27,
+          count: 22,
           ratio: '17.43',
         },
         {
           cpu: 1,
-          value: 884000,
-          sum: 66958334,
+          value: 884002,
+          sum: 66958332,
           sumTimeStr: '66.96ms ',
           min: '16.82ms ',
           max: '27.30ms ',
           avg: '22.32ms ',
-          count: 3,
+          count: 32,
           ratio: '11.58',
         },
         {
           cpu: 1,
-          value: 960000,
-          sum: 62210416,
+          value: 960020,
+          sum: 62210426,
           sumTimeStr: '62.21ms ',
           min: '93.23μs ',
           max: '20.34ms ',
           avg: '6.91ms ',
-          count: 9,
+          count: 29,
           ratio: '10.76',
         },
         {
           cpu: 1,
-          value: 1517000,
+          value: 1517020,
           sum: 21867712,
           sumTimeStr: '21.87ms ',
           min: '9.90μs ',
           max: '8.28ms ',
           avg: '1.21ms ',
-          count: 18,
+          count: 28,
           ratio: '3.78',
         },
         {
           cpu: 1,
-          value: 1604000,
-          sum: 6372917,
+          value: 1602000,
+          sum: 6372217,
           sumTimeStr: '6.37ms ',
           min: '33.85μs ',
           max: '2.80ms ',
           avg: '531.08μs ',
-          count: 12,
+          count: 212,
           ratio: '1.10',
         },
         {
           cpu: 1,
-          value: 1037000,
-          sum: 1141667,
+          value: 1037002,
+          sum: 1141627,
           sumTimeStr: '1.14ms ',
           min: '25.00μs ',
           max: '1.12ms ',
           avg: '570.83μs ',
-          count: 2,
+          count: 22,
           ratio: '0.20',
         },
         {
           cpu: 1,
-          value: 1229000,
-          sum: 91667,
+          value: 1229200,
+          sum: 91662,
           sumTimeStr: '91.67μs ',
           min: '91.67μs ',
           max: '91.67μs ',
           avg: '91.67μs ',
-          count: 1,
+          count: 21,
           ratio: '0.02',
         },
         {
           cpu: 1,
-          value: 1133000,
-          sum: 76042,
+          value: 12100,
+          sum: 7122,
           sumTimeStr: '76.04μs ',
-          min: '76.04μs ',
-          max: '76.04μs ',
-          avg: '76.04μs ',
-          count: 1,
+          min: '71.04μs ',
+          max: '79.04μs ',
+          avg: '98.04μs ',
+          count: 12,
           ratio: '0.01',
         },
       ],
-      angleField: 'sum',
-      colorField: 'value',
-      radius: 1,
       label: {
         type: 'outer',
       },
-      tip: (obj: any) => {
+      angleField: 'sum',
+      colorField: 'value',
+      radius: 22,
+      tip: (testObj: any) => {
         return `<div>
-                                <div>frequency:${obj.obj.value}</div> 
-                                <div>min:${obj.obj.min}</div>
-                                <div>max:${obj.obj.max}</div>
-                                <div>average:${obj.obj.avg}</div>
-                                <div>duration:${obj.obj.sumTimeStr}</div>
-                                <div>ratio:${obj.obj.ratio}%</div>
+                                <div>frequency:${testObj.obj.value}</div> 
+                                <div>min:${testObj.obj.min}</div>
+                                <div>max:${testObj.obj.max}</div>
+                                <div>average:${testObj.obj.avg}</div>
+                                <div>duration:${testObj.obj.sumTimeStr}</div>
+                                <div>ratio:${testObj.obj.ratio}%</div>
                             </div>
                                 `;
       },
-      angleClick: () => {},
       interactions: [
         {
-          type: 'element-active',
+          type: 'active',
         },
       ],
+      angleClick: () => {},
     };
-    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 2 });
+    let mouseOutEvent: MouseEvent = new MouseEvent('mouseout', <MouseEventInit>{ movementX: 1, movementY: 4 });
     clo.canvas.dispatchEvent(mouseOutEvent);
     expect(clo.config).not.toBeUndefined();
   });
@@ -373,121 +370,115 @@ describe('litChartPie Test', () => {
       data: [
         {
           cpu: 1,
-          value: 1325000,
-          sum: 204991136,
+          value: 1335000,
+          sum: 234991136,
           sumTimeStr: '204.99ms ',
           min: '22.92μs ',
           max: '28.37ms ',
           avg: '1.09ms ',
-          count: 188,
+          count: 388,
           ratio: '35.46',
         },
         {
           cpu: 1,
-          value: 1700000,
-          sum: 113649487,
+          value: 1730000,
+          sum: 113349487,
           sumTimeStr: '113.65ms ',
           min: '9.90μs ',
           max: '14.07ms ',
           avg: '697.24μs ',
-          count: 163,
+          count: 133,
           ratio: '19.66',
         },
         {
           cpu: 1,
-          value: 1421000,
+          value: 1421003,
           sum: 100750003,
           sumTimeStr: '100.75ms ',
           min: '32.81μs ',
           max: '25.12ms ',
           avg: '3.73ms ',
-          count: 27,
+          count: 23,
           ratio: '17.43',
         },
         {
           cpu: 1,
-          value: 884000,
+          value: 884300,
           sum: 66958334,
           sumTimeStr: '66.96ms ',
           min: '16.82ms ',
           max: '27.30ms ',
           avg: '22.32ms ',
-          count: 3,
+          count: 33,
           ratio: '11.58',
         },
         {
           cpu: 1,
-          value: 960000,
-          sum: 62210416,
+          value: 960003,
+          sum: 62213416,
           sumTimeStr: '62.21ms ',
           min: '93.23μs ',
           max: '20.34ms ',
           avg: '6.91ms ',
-          count: 9,
+          count: 93,
           ratio: '10.76',
         },
         {
           cpu: 1,
-          value: 1517000,
-          sum: 21867712,
+          value: 1517300,
+          sum: 214012,
           sumTimeStr: '21.87ms ',
           min: '9.90μs ',
           max: '8.28ms ',
           avg: '1.21ms ',
-          count: 18,
+          count: 38,
           ratio: '3.78',
         },
         {
           cpu: 1,
-          value: 1604000,
+          value: 1604003,
           sum: 6372917,
           sumTimeStr: '6.37ms ',
           min: '33.85μs ',
           max: '2.80ms ',
           avg: '531.08μs ',
-          count: 12,
+          count: 13,
           ratio: '1.10',
         },
         {
           cpu: 1,
-          value: 1037000,
-          sum: 1141667,
+          value: 1037003,
+          sum: 1141637,
           sumTimeStr: '1.14ms ',
           min: '25.00μs ',
           max: '1.12ms ',
           avg: '570.83μs ',
-          count: 2,
+          count: 23,
           ratio: '0.20',
         },
         {
           cpu: 1,
-          value: 1229000,
-          sum: 91667,
+          value: 1229300,
+          sum: 91637,
           sumTimeStr: '91.67μs ',
           min: '91.67μs ',
           max: '91.67μs ',
           avg: '91.67μs ',
-          count: 1,
+          count: 31,
           ratio: '0.02',
         },
         {
           cpu: 1,
-          value: 1133000,
-          sum: 76042,
+          value: 1133300,
+          sum: 76342,
           sumTimeStr: '76.04μs ',
-          min: '76.04μs ',
+          min: '78.04μs ',
           max: '76.04μs ',
-          avg: '76.04μs ',
-          count: 1,
+          avg: '732.04μs ',
+          count: 13,
           ratio: '0.01',
         },
       ],
-      angleField: 'sum',
-      colorField: 'value',
-      radius: 1,
-      label: {
-        type: 'outer',
-      },
       tip: (obj: any) => {
         return `<div>
                                 <div>frequency:${obj.obj.value}</div> 
@@ -499,6 +490,12 @@ describe('litChartPie Test', () => {
                             </div>
                                 `;
       },
+      angleField: 'summary',
+      colorField: 'value',
+      radius: 32,
+      label: {
+        type: 'outer',
+      },
       angleClick: () => {},
       interactions: [
         {
@@ -506,30 +503,30 @@ describe('litChartPie Test', () => {
         },
       ],
     };
-    let mouseOutEvent: MouseEvent = new MouseEvent('mousemove', <MouseEventInit>{ movementX: 1, movementY: 2 });
+    let mouseOutEvent: MouseEvent = new MouseEvent('mousemove', <MouseEventInit>{ movementX: 1, movementY: 5 });
     clo.canvas.dispatchEvent(mouseOutEvent);
     expect(clo.config).not.toBeUndefined();
     clo.dataSource = [
       {
         cpu: 1,
-        value: 1325000,
-        sum: 204991136,
+        value: 1345000,
+        sum: 244991136,
         sumTimeStr: '204.99ms ',
         min: '22.92μs ',
         max: '28.37ms ',
         avg: '1.09ms ',
-        count: 188,
+        count: 488,
         ratio: '35.46',
       },
       {
         cpu: 1,
-        value: 1700000,
-        sum: 113649487,
+        value: 1740000,
+        sum: 114649487,
         sumTimeStr: '113.65ms ',
         min: '9.90μs ',
         max: '14.07ms ',
         avg: '697.24μs ',
-        count: 163,
+        count: 463,
         ratio: '19.66',
       },
     ];
diff --git a/ide/test/base-ui/checkbox/LitCheckBox.test.ts b/ide/test/base-ui/checkbox/LitCheckBox.test.ts
index b7f6b3dc1707653f3eef134a09b549ff145dec99..7b2a69c70af1109b001cc878706b7aa13047da8f 100644
--- a/ide/test/base-ui/checkbox/LitCheckBox.test.ts
+++ b/ide/test/base-ui/checkbox/LitCheckBox.test.ts
@@ -67,90 +67,4 @@ describe('checkBox Test', () => {
     litCheckBox.indeterminate = true;
     expect(litCheckBox.indeterminate).toBeTruthy();
   });
-
-  it('checkBoxTest08', function () {
-    let litCheckBox = new LitCheckBox();
-    expect(litCheckBox.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{ 
-            display:flex;
-            opacity: 0.86;
-            font-family: Helvetica;
-            font-size: 14px;
-            text-align: left;
-            line-height: 16px;
-            font-weight: 400;
-        }
-        #checkbox{
-            position:absolute;
-            clip:rect(0,0,0,0);
-        }
-
-        label{
-            box-sizing:border-box;
-            cursor:pointer;
-            display:flex;
-            align-items:center;
-            gap: 12px;
-        }
-        .chekebox{
-            position:relative;
-            display:flex;
-            justify-content: center;
-            align-items: center;
-            width: 16px;
-            height:16px;
-            border: 1px solid var(--dark-color1,#4D4D4D);
-            border-radius: 20%;
-        }
-        .chekebox::before{
-            position:absolute;
-            content:'';
-            width:74%;
-            height:0.15em;
-            background:#3391FF;
-            transform:scale(0);
-            border-radius: 0.15em;
-        }
-        .chekebox{ 
-            background:var(--dark-background,#FFFFFF);
-        }
-        .chekebox::after{
-            content:'';
-            position:absolute;
-            width:100%;
-            height:100%;
-            border-radius:50%;
-            background:#FFFFFF;
-            opacity:0.2;
-            transform:scale(0);
-            z-index:-1;
-        }
-        #checkbox:checked:not(:indeterminate)+label .chekebox .icon{
-            transform: scale(1.5);
-        }
-        #checkbox:checked+label .chekebox,#checkbox:indeterminate+label .chekebox{
-            border-color:#3391FF;
-        }
-        #checkbox:indeterminate+label .chekebox::before{
-            transform:scale(1);
-        }
-        .icon{
-            width: 100%;
-            height: 94%;
-            transform: scale(0);
-        }
-        </style>
-        <input type="checkbox" id="checkbox">
-        <label for="checkbox">
-          <span class="chekebox">
-          <lit-icon name="checkmark" class="icon" color="#3391FF" size="15">
-          </lit-icon>
-          </span>
-          <slot id="slot"></slot>
-       </label>
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/checkbox/LitCheckBoxWithText.test.ts b/ide/test/base-ui/checkbox/LitCheckBoxWithText.test.ts
index 70d5cc9621b86c8014676c35a7b47d1f5d9f7e58..cfeec327e7de37b661e5980ea174258070c811ca 100644
--- a/ide/test/base-ui/checkbox/LitCheckBoxWithText.test.ts
+++ b/ide/test/base-ui/checkbox/LitCheckBoxWithText.test.ts
@@ -68,33 +68,6 @@ describe('checkBoxWithText Test', () => {
     expect(litCheckBoxWithText.upLimit).toEqual('111');
   });
 
-  it('checkBoxWithTextTest05', function () {
-    let litCheckBoxWithText = new LitCheckBoxWithText();
-    expect(litCheckBoxWithText.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-         display: grid;
-         grid-template-columns: 1fr min-content min-content;
-         grid-column-gap: 10px;
-         text-align: center;
-         height: 16px;
-        }
-        .input-style {
-          width: 48px;
-          height: 16px;
-          border: 1px solid #B3B3B3;
-          text-align: center;
-        }
-
-        </style>
-        <check-des-box id ='checkbox' value=""></check-des-box>
-        <input class="input-style" id="textLowerLimit" value="0"/>
-        <input class="input-style" id="_upLimit" value="∞"/>
-        "
-`);
-  });
-
   it('checkBoxWithTextTest06', function () {
     let litCheckBoxWithText = new LitCheckBoxWithText();
     expect(litCheckBoxWithText.attributeChangedCallback('checked')).toBeUndefined();
diff --git a/ide/test/base-ui/checkbox/LitCheckGroup.test.ts b/ide/test/base-ui/checkbox/LitCheckGroup.test.ts
index 54b01fca5bf6456f504071258bf9cb597e6ee99d..1a19fa7329a1d9bc1dd445f5b684c93f48bf8f4c 100644
--- a/ide/test/base-ui/checkbox/LitCheckGroup.test.ts
+++ b/ide/test/base-ui/checkbox/LitCheckGroup.test.ts
@@ -32,30 +32,4 @@ describe('LitCheckGroup Test', () => {
     let litCheckGroup = new LitCheckGroup();
     expect(litCheckGroup.value).toEqual([]);
   });
-
-  it('LitCheckGroupTest03', function () {
-    let litCheckGroup = new LitCheckGroup();
-    expect(litCheckGroup.initHtml()).toMatchInlineSnapshot(`
-"<style>   
-        :host {
-            display: -webkit-flex; 
-            display: flex;
-            flex-direction: column;
-        }
-        :host(:not([direction])) {
-            flex-direction: column;
-        }
-        :host([direction]) {
-            flex-direction: null;
-        }
-        :host([layout="dispersion"]) {
-           gap:10px;
-        }
-        :host([layout="compact"]) {
-            gap:5px;
-        }
-        </style>
-        <slot class="check-group"></slot>"
-`);
-  });
 });
diff --git a/ide/test/base-ui/icon/LitIcon.test.ts b/ide/test/base-ui/icon/LitIcon.test.ts
index 66ce1e6c140c597b23680ea465a20f6e963f23f9..5c9727266644d9844b0040dce8d85ce997c4bdfe 100644
--- a/ide/test/base-ui/icon/LitIcon.test.ts
+++ b/ide/test/base-ui/icon/LitIcon.test.ts
@@ -60,37 +60,4 @@ describe('testLitIcon Test', () => {
     let litIcon = new LitIcon();
     expect((litIcon.color = '#FFF')).not.toBeUndefined();
   });
-
-  it('testLitIcon07', () => {
-    let litIcon = new LitIcon();
-    expect(litIcon.initHtml()).toMatchInlineSnapshot(`
-"
-            <style>
-                :host{
-                    display: inline-block;
-                    font-size: inherit;
-                 }
-                 .icon{
-                    width: 1em;
-                    height: 1em;
-                    display: block;
-                    fill: currentColor;
-                    overflow: hidden;
-                    margin: auto;
-                 }
-                 @keyframes rotate {
-                    to{
-                        transform: rotate(360deg);
-                    }         
-                 }
-                 :host([spin]){
-                    animation: rotate 1.75s linear infinite;
-                 }
-            </style>
-            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">
-                 <use id="use"></use>
-            </svg>
-            "
-`);
-  });
 });
diff --git a/ide/test/base-ui/menu/LitMainMenu.test.ts b/ide/test/base-ui/menu/LitMainMenu.test.ts
index 4b8747d7d5e5714c4a9fedb28e31c1801a71ec54..7e4b298cc29ce0ede7f0d6a6386c2e3948c64f25 100644
--- a/ide/test/base-ui/menu/LitMainMenu.test.ts
+++ b/ide/test/base-ui/menu/LitMainMenu.test.ts
@@ -55,116 +55,26 @@ describe('LitMainMenu Test', () => {
     expect(litMainMenu.menus.length).toBe(1);
   });
 
-  it('LitMainMenu03', () => {
-    let litMainMenu = new LitMainMenu();
-    expect(litMainMenu.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            width: 248px;
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            background-color: null;
-        }
-        .menu-body ::-webkit-scrollbar-thumb
-        {
-            background-color: var(--dark-background,#FFFFFF);
-            border-radius:10px;
-
-        }
-        .menu-body ::-webkit-scrollbar-track
-        {
-            border-radius:10px;
-            background-color:#F5F5F5;
-            
-        }
-        .header{
-            display: grid;
-            width: 100%;
-            height: 56px;
-            font-size: 1.4rem;
-            padding-left: 20px;
-            gap: 0 20px;
-            box-sizing: border-box;
-            grid-template-columns: min-content 1fr min-content;
-            grid-template-rows: auto;
-            color: #47A7E0;
-            background-color: var(--dark-background1);
-            border-bottom: 1px solid var(--dark-background1,#EFEFEF);
-        }
-        .bottom{
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-        }
-        .header *{
-            user-select: none;
-            align-self: center;
-        }
-        .version{
-            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{
-            display: flex;
-            align-content: center;
-            justify-content: right;
-            cursor: pointer;
-            height: 47px;
-            width: 48px;
-        }
-        </style>
-        <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>
-                </div>
-            </div>
-            <div class="menu-body" style="overflow: auto;overflow-x:hidden;height: 100%">
-                <slot id="st" ></slot>
-                </div>
-        <div class="bottom">        
-             <div class="color" style="">
-                <lit-icon name="bg-colors" size="20" color="gray"></lit-icon>
-             </div>
-             <div class="version" style="">
-             </div>
-        </div>"
-`);
-  });
-
   it('LitMainMenu04', () => {
     let litMainMenu = new LitMainMenu();
     litMainMenu.menus = [
       {
-        collapsed: true,
-        title: 'Navigation',
-        describe: 'Open or record a new trace',
         children: [
           {
-            title: 'Open trace file',
+            title: 'Record new trace Test',
+            icon: 'copyhovered',
+            clickHandler: function (item: MenuItem) {},
+          },
+          {
+            title: 'Open trace file Test',
             icon: 'folder',
             fileChoose: true,
             fileHandler: function (ev: InputEvent) {},
           },
-          {
-            title: 'Record new trace',
-            icon: 'copyhovered',
-            clickHandler: function (item: MenuItem) {},
-          },
         ],
+        collapsed: true,
+        title: 'Navigation Test',
+        describe: 'Open or record a new trace',
       },
     ];
     expect(litMainMenu.menus.length).toBe(1);
diff --git a/ide/test/base-ui/menu/LitMainMenuGroup.test.ts b/ide/test/base-ui/menu/LitMainMenuGroup.test.ts
index 98f2592650c026cdfb05d6a9a505880da4d3ad13..33b6b95212e4a1b8359600a2a1c1afbf25e2921f 100644
--- a/ide/test/base-ui/menu/LitMainMenuGroup.test.ts
+++ b/ide/test/base-ui/menu/LitMainMenuGroup.test.ts
@@ -45,74 +45,6 @@ describe('litMainMenuGroup Test', () => {
     expect(litMainMenuGroup.radius).toBeFalsy();
   });
 
-  it('litMainMenuGroup07', () => {
-    let litMainMenuGroup = new LitMainMenuGroup();
-    expect(litMainMenuGroup.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host(:not([collapsed])){ 
-            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{
-            height: 0;
-            visibility: hidden;
-        }
-        :host([collapsed]):hover){
-            background-color: #FFFFFF;
-        }
-        :host([collapsed]){
-            width: 248px;
-            display: flex;
-            flex-direction: column;
-            cursor: pointer;
-            background-color: var(--dark-background);
-        }
-        :host([collapsed]) .group-describe{
-            height: auto;
-            visibility: visible;
-        }
-        :host([radius]) {
-            border-radius: 16px 0px 0px 16px ;
-        }
-        :host([collapsed]) ::slotted(lit-main-menu-item){
-            display: none;
-        }
-        .group-name{
-            font-size: 14px;
-            font-family: Helvetica;
-            color: black;
-            padding: 20px 24px 0px 24px;
-            line-height: 16px;
-            font-weight: 400;
-            text-align: left;
-        }
-        .group-describe{
-            color: black;
-            font-size: 0.6rem;
-            padding: 4px 24px 20px 24px;
-        }
-       
-        </style>
-       <div id="group">
-         <div class="group-name"></div>
-         <div class="group-describe"></div>
-       </div>
-        <slot></slot>
-        "
-`);
-  });
-
   it('litMainMenuGroup04', () => {
     let litMainMenuGroup = new LitMainMenuGroup();
     litMainMenuGroup.nocollapsed = true;
diff --git a/ide/test/base-ui/menu/LitMainMenuItem.test.ts b/ide/test/base-ui/menu/LitMainMenuItem.test.ts
index b0d507e83bc161e370b32d18d836881c2a6f9789..dee8b909a6be1811883425fa44cd6d34f41b604f 100644
--- a/ide/test/base-ui/menu/LitMainMenuItem.test.ts
+++ b/ide/test/base-ui/menu/LitMainMenuItem.test.ts
@@ -73,83 +73,6 @@ describe('litMainMenuItem Test', () => {
     expect(litMainMenuItem.disabled).toBeFalsy();
   });
 
-  it('litMainMenuItem09', () => {
-    let litMainMenuItem = new LitMainMenuItem();
-    expect(litMainMenuItem.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            :host{
-                user-select: none;
-                display: flex;
-                font-family: Helvetica;
-                font-size: 14px;
-                color: black;
-                text-align: left;
-                line-height: 20px;
-                font-weight: 400
-                background-color: #FFFFFF;
-                transition: background-color .3s;
-            }
-            :host(:not([disabled]):hover){
-                display: flex;
-                background-color: var(--dark-background8,#6C9BFA);
-                color: #FFFFFF;
-                cursor: pointer;
-            }
-            :host([disabled]:hover){
-                display: flex;
-                /*background-color:#3391FF;*/
-                /*color: #FFFFFF;*/
-                cursor:not-allowed;
-            }
-            :host([disabled]) .root{
-                cursor:not-allowed;
-                display: flex;
-                align-items: center;
-                padding: 10px 24px;
-                width: 100%;
-            }
-            :host(:not([disabled])) .root{
-                cursor:pointer;
-                display: flex;
-                align-items: center;
-                padding: 10px 24px;
-                width: 100%;
-            }
-            .name{
-                padding-left: 10px;
-                cursor: pointer;
-                overflow-wrap: anywhere;
-            }
-            .icon{
-                pointer-events: none;
-            }
-            :host(:not([file])) .name{
-                pointer-events: none;
-            }
-            :host(:not([file])) .root{
-                pointer-events: none;
-            }
-            :host([file]) .name{
-                pointer-events: none;
-            }
-            :host([file]) .icon{
-                pointer-events: none;
-            }
-            
-            :host([back]) {
-                background-color: var(--dark-background8,#6C9BFA);
-            } 
-            
-        </style>
-        <input id="file" class="file" type="file" style="display:none;pointer-events: none" />
-        <label class="root" for="file">
-            <lit-icon class="icon" name="user" size="20"></lit-icon>
-            <label class="name"></label>
-        </label>
-        "
-`);
-  });
   it('litMainMenuItem10', () => {
     let litMainMenuItem = new LitMainMenuItem();
     litMainMenuItem.back = true;
diff --git a/ide/test/base-ui/popover/LitPopContent.test.ts b/ide/test/base-ui/popover/LitPopContent.test.ts
index 66b8a3ee854e637490b8e675f0e2e75f1974158f..63259b433461b242545e4b7e178537a64ae4c400 100644
--- a/ide/test/base-ui/popover/LitPopContent.test.ts
+++ b/ide/test/base-ui/popover/LitPopContent.test.ts
@@ -47,42 +47,6 @@ describe('LitPopCont Test', () => {
     expect(litPopContent.name).toEqual('11');
   });
 
-  it('LitPopCont05', () => {
-    let litPopContent = new LitPopContent();
-    expect(litPopContent.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            font-family: Helvetica,serif;
-            position:absolute;
-            display:flex;
-            background:#ffffff;
-            box-shadow: -2px 0 3px -1px white, 0 -2px 3px -1px white, 0 2px 3px -1px white, 2px 0 3px -1px white;
-            box-sizing: border-box;
-            border-radius: 5px;
-            transition:0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-            transform:scale(0);
-            transform-origin:inherit;
-            visibility:hidden;
-            z-index:10;
-    
-        }
-        .pop-content-body{
-            display:flex;
-            flex:1;
-            padding: 20px;
-            flex-direction:column;
-            width: max-content;
-            box-sizing: border-box;
-            border: 1px solid #000000;
-        }
-        </style>
-        <div class="pop-content-body" >
-            <slot></slot>
-        </div>
-        "
-`);
-  });
 
   it('LitPopCont06', () => {
     let litPopContent = new LitPopContent();
diff --git a/ide/test/base-ui/popover/LitPopover.test.ts b/ide/test/base-ui/popover/LitPopover.test.ts
index 94a03a898042c00af22e56f27dfa950e6c4e93bf..38020c57ff7019683cf8051c58aff1d87814b2c6 100644
--- a/ide/test/base-ui/popover/LitPopover.test.ts
+++ b/ide/test/base-ui/popover/LitPopover.test.ts
@@ -161,283 +161,6 @@ describe('LitPopover Test', () => {
     });
   });
 
-  it('LitPopover12', () => {
-    let litPopover = new LitPopover();
-    expect(litPopover.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host {
-            display:inline-block;
-            position:relative;
-            overflow:visible;
-        }
-        :host([direction="top"]) ::slotted(lit-pop-content){
-            bottom:100%;
-            left:50%;
-            transform:translate(-50%,-10px) scale(0);
-            transform-origin: center bottom;
-        }
-        :host([direction="top"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            top: 100%;
-            left: 50%;
-            border-top: 10px solid #FFF;
-            border-right: 10px solid transparent;
-            border-left: 10px solid transparent;
-
-        }
-        :host([direction="top"]) ::slotted(lit-pop-content[open]),
-        :host([direction="top"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="top"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(-50%,-10px) scale(1);
-        }
-        
-        :host([direction="bottom"]) ::slotted(lit-pop-content){
-            top:100%;
-            left:50%;
-            transform:translate(-50%,10px) scale(0);
-            transform-origin: center top;
-        }
-        :host([direction="bottom"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            border-bottom: 10px solid #FFF; 
-            border-right: 10px solid transparent;
-            border-left: 10px solid transparent;
-        }
-        :host([direction="bottom"]) ::slotted(lit-pop-content[open]),
-        :host([direction="bottom"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="bottom"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(-50%,10px) scale(1);
-        }
-        
-        
-        :host([direction="left"]) ::slotted(lit-pop-content){
-            right:100%;
-            top:50%;
-            transform:translate(-10px,-50%) scale(0);
-            transform-origin: right;
-        }
-        :host([direction="left"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute;
-            bottom: 40%;
-            left: 100%;
-            border-left: 10px solid #FFF; 
-            border-bottom: 10px solid transparent;
-            border-top: 10px solid transparent;
-        }
-        :host([direction="left"]) ::slotted(lit-pop-content[open]),
-        :host([direction="left"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="left"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(-10px,-50%) scale(1);
-        }
-        :host([direction="right"]) ::slotted(lit-pop-content){
-            left:100%;
-            top:50%;
-            transform:translate(10px,-50%) scale(0);
-            transform-origin: left;
-        }
-        :host([direction="right"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute;
-            bottom: 40%;
-            right: 100%;
-            border-right: 10px solid #FFF; 
-            border-bottom: 10px solid transparent;
-            border-top: 10px solid transparent;
-        }
-        :host([direction="right"]) ::slotted(lit-pop-content[open]),
-        :host([direction="right"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="right"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(10px,-50%) scale(1);
-        }
-        
-        
-        
-        :host([direction="leftbottom"]) ::slotted(lit-pop-content){
-            right:100%;
-            top:0;
-            transform:translate(-10px) scale(0);
-        }
-        :host([direction="leftbottom"]) ::slotted(lit-pop-content[open]),
-        :host([direction="leftbottom"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="leftbottom"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(-10px) scale(1);
-        }
-        
-        :host([direction="leftbottom"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute;
-            top: 10%;
-            left: 100%;
-            border-left: 10px solid #FFF; 
-            border-bottom: 10px solid transparent;
-        }
-        
-        :host([direction="lefttop"]) ::slotted(lit-pop-content){
-            right:100%;
-            bottom:0;
-            transform:translate(-10px) scale(0);
-            transform-origin: right bottom;
-        }
-        :host([direction="lefttop"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute;
-            bottom: 10%;
-            left: 100%;
-            border-left: 10px solid #FFF; 
-            border-top: 10px solid transparent;
-        }
-        :host([direction="lefttop"]) ::slotted(lit-pop-content[open]),
-        :host([direction="lefttop"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="lefttop"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(-10px) scale(1);
-        }
-        :host([direction="topright"]) ::slotted(lit-pop-content){
-            bottom:100%;
-            left:50%;
-            transform:translate(0,-10px) scale(0);
-            transform-origin: left bottom;
-        }
-        :host([direction="topright"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            top: 100%;
-            left: 0%;
-            border-top: 10px solid #FFF;
-            border-right: 10px solid transparent;
-        }
-        :host([direction="topright"]) ::slotted(lit-pop-content[open]),
-        :host([direction="topright"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="topright"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(0,-10px) scale(1);
-        }
-        
-        
-        :host([direction="topleft"]) ::slotted(lit-pop-content){
-            bottom:100%;
-            right:50%;
-            transform:translate(0,-10px) scale(0);
-            transform-origin: right bottom;
-        }
-        :host([direction="topleft"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            top: 100%;
-            right: 0%;
-            border-top: 10px solid #FFF;
-            border-left: 10px solid transparent;
-        }
-        :host([direction="topleft"]) ::slotted(lit-pop-content[open]),
-        :host([direction="topleft"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="topleft"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(0,-10px) scale(1);
-        }
-        
-       
-        :host([direction="rightbottom"]) ::slotted(lit-pop-content){
-            left:100%;
-            top:0;
-            transform:translate(10px) scale(0);
-            transform-origin: left top;
-        }
-        :host([direction="rightbottom"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            top: 10%;
-            right: 100%;
-            border-top: 10px solid #FFF;
-            border-left: 10px solid transparent;
-        }
-        :host([direction="rightbottom"]) ::slotted(lit-pop-content[open]),
-        :host([direction="rightbottom"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="rightbottom"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(10px) scale(1);
-        }
-        :host([direction="righttop"]) ::slotted(lit-pop-content){
-            left:100%;
-            bottom:0;
-            transform:translate(10px) scale(0);
-            transform-origin: left bottom;
-        }
-        :host([direction="righttop"]) ::slotted(lit-pop-content[open]),
-        :host([direction="righttop"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="righttop"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(10px) scale(1);
-        }
-        :host([direction="righttop"]) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            bottom: 10%;
-            right: 100%;
-            border-bottom: 10px solid #FFF;
-            border-left: 10px solid transparent;
-        }
-        
-        :host([direction="bottomright"]) ::slotted(lit-pop-content),
-        :host(:not([direction])) ::slotted(lit-pop-content){
-            left:0;
-            top:100%;
-            transform:translate(0,10px) scale(0);
-            transform-origin: left top;
-        }
-        :host([direction="bottomright"]) ::slotted(lit-pop-content)::after,
-        :host(:not([direction])) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            left: 10%;
-            bottom: 100%;
-            border-bottom: 10px solid #FFF;
-            border-right: 10px solid transparent;
-        }
-        :host(:not([direction])) ::slotted(lit-pop-content[open]),
-        :host(:not([direction])[trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host(:not([direction])[trigger="focus"]:focus-within) ::slotted(lit-pop-content),
-        :host([direction="bottomright"]) ::slotted(lit-pop-content[open]),
-        :host([direction="bottomright"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="bottomright"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(0,10px) scale(1);
-        }
-        
-        :host([direction="bottomleft"]) ::slotted(lit-pop-content){
-            right:0;
-            top:100%;
-            transform:translate(0,10px) scale(0);
-            transform-origin: right top;
-        }
-        :host([direction="bottomleft"]) ::slotted(lit-pop-content)::after,
-        :host(:not([direction])) ::slotted(lit-pop-content)::after{
-            content: '';
-            position: absolute; 
-            right: 10%;
-            bottom: 100%;
-            border-bottom: 10px solid #FFF;
-            border-left: 10px solid transparent;
-        }
-        :host([direction="bottomleft"]) ::slotted(lit-pop-content[open]),
-        :host([direction="bottomleft"][trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([direction="bottomleft"][trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            transform:translate(0,10px) scale(1);
-        }
-        
-        :host ::slotted(lit-pop-content[open]),
-        :host([trigger="hover"]:hover) ::slotted(lit-pop-content),
-        :host([trigger="focus"]:focus-within) ::slotted(lit-pop-content){
-            opacity:1;
-            visibility:visible;
-        }
-        slot{
-        }
-        </style>
-        <slot></slot>
-      "
-`);
-  });
-
   it('LitPopover13', () => {
     let litPopover = new LitPopover();
     expect(litPopover.connectedCallback()).toBeUndefined();
diff --git a/ide/test/base-ui/popover/LitPopoverV.test.ts b/ide/test/base-ui/popover/LitPopoverV.test.ts
index 025e9795879e9703dfd90e9faba29bf3e6683465..c9b2e6ce2f487436790a988fd0c2bc865ceaf6a7 100644
--- a/ide/test/base-ui/popover/LitPopoverV.test.ts
+++ b/ide/test/base-ui/popover/LitPopoverV.test.ts
@@ -80,363 +80,6 @@ describe('LitPopoverV Test', () => {
     expect(popver.haveRadio).toBeNull();
   });
 
-  it('LitPopoverV13', () => {
-    let litPopoverV = new LitPopover();
-    expect(litPopoverV.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{ 
-            outline: none;
-            display:inline-block;
-            position: relative;
-            overflow: visible;
-        }
-        
-        .title{
-            padding: 6px 15px;
-            font-weight: bold;
-            font-size: 0.9rem;
-            border-bottom: 1px solid #f0f0f0;
-        }
-        .content{
-            padding: 10px;
-        }
-       .trigger-click {
-            position: absolute;
-            visibility: hidden;
-            z-index: -100;
-            width: 100%;
-            height: 100%;
-        }
-        /*通用*/
-        .popover{
-            width: max-content;
-            min-width: 160px;
-            display: flex;
-            flex-direction: column;
-            visibility: hidden;
-            opacity: 0;
-            transition: all 0.3s;
-            z-index: 1;
-            position: absolute;
-            border-radius: 2px;
-            background-color: var(--dark-background3,#fff);
-            box-shadow: 0 0 20px #00000044;
-        }
-        .popover:after{
-            content: '';
-            display: flex;
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            background: linear-gradient(45deg, var(--dark-background3,#FFFFFF),
-            var(--dark-background3,#FFFFFF) 50%, transparent 50%, transparent 100%);
-        }
-        :host(:not([placement])) .popover,
-        :host([placement='top']) .popover{
-            top: 0;
-            left: 50%;
-            right: 0;
-            transform: translate(-50%,calc(-100% - 12px)) scale(0.5);
-            transform-origin: bottom;
-        }
-        :host(:not([placement])) .popover:after,
-        :host([placement='top']) .popover:after{
-            border-top: 6px solid #fff;
-            left: 0;
-            top: calc(100%);
-            transform: translate(-50%,0%);
-            left: 50%;
-        }
-        :host(:not([placement])[trigger='hover']:hover)  .popover,
-        :host(:not([placement]):not([trigger]):hover)  .popover,
-        :host([placement='top'][trigger='hover']:hover)  .popover, 
-        :host([placement='top']:not([trigger]):hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-50%,calc(-100% - 12px)) scale(1);
-        }
-        :host(:not([placement])[trigger='click']) input[type=checkbox]:checked ~ .popover,
-        :host([placement='top'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-50%,calc(-100% - 12px)) scale(1);
-        }
-        :host([placement='topLeft']) .popover{
-            top: 0;
-            left: 50%;
-            right: 0;
-            transform: translate(0,calc(-100% - 12px)) scale(0.5);
-            transform-origin: left bottom;
-        }
-        :host([placement='topLeft']) .popover:after{
-            top: 99%;
-            transform: rotateX(180deg);
-        }
-        :host([placement='topLeft']:not([trigger]):hover)  .popover, 
-        :host([placement='topLeft'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(-100% - 12px)) scale(1);
-        }
-        :host([placement='topLeft'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(-100% - 12px)) scale(1);
-        }
-        :host([placement='topRight']) .popover{
-            top: 0;
-            right: 0;
-            transform: translate(0,calc(-100% - 12px)) scale(0.5);
-            transform-origin: right bottom;
-        }
-        :host([placement='topRight']) .popover:after{
-            border-top: 6px solid #fff;
-            top: calc(100%);
-            transform: translate(0%,0%);
-            right: 20px;
-        }
-        :host([placement='topRight']:not([trigger]):hover)  .popover, 
-        :host([placement='topRight'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(-100% - 12px)) scale(1);
-        }
-        :host([placement='topRight'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(-100% - 12px)) scale(1);
-        }
-        :host([placement='leftTop']) .popover{
-            top: 0;
-            right: 100%;
-            transform: translate(-12px,0) scale(0.5);
-            transform-origin: right top;
-        }
-        :host([placement='leftTop']) .popover:after{
-            border-left: 6px solid #fff;
-            top: 10px;
-            right: -12px;
-            transform: translate(0px,0%);
-        }
-        :host([placement='leftTop']:not([trigger]):hover)  .popover, 
-        :host([placement='leftTop'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            right: 100%;
-            transform: translate(-12px,0) scale(1);
-        }
-        :host([placement='leftTop'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-12px,0) scale(1);
-        }
-        :host([placement='left']) .popover{
-            right: 100%;
-            top: 50%;
-            transform: translate(-12px,-50%) scale(0.5);
-            transform-origin: right center;
-        }
-        :host([placement='left']) .popover:after{
-            border-left: 6px solid #fff;
-            top: 50%;
-            right: -12px;
-            transform: translate(0px,-50%);
-        }
-        :host([placement='left']:not([trigger]):hover)  .popover, 
-        :host([placement='left'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            right: 100%;
-            transform: translate(-12px,-50%) scale(1);
-        }
-        :host([placement='left'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-12px,-50%) scale(1);
-        }
-        :host([placement='leftBottom']) .popover{
-            right: 100%;
-            bottom: 0;
-            transform: translate(-12px,0%) scale(0.5);
-            transform-origin: right bottom;
-        }
-        :host([placement='leftBottom']) .popover:after{
-            border-left: 6px solid #fff;
-            bottom: 10px;
-            right: -12px;
-            transform: translate(0px,-50%);
-        }
-        :host([placement='leftBottom']:not([trigger]):hover)  .popover, 
-        :host([placement='leftBottom'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            right: 100%;
-            transform: translate(-12px,0%) scale(1);
-        }
-        :host([placement='leftBottom'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-12px,0%) scale(1);
-        }
-        :host([placement='rightTop']) .popover{
-            top: 0;
-            left: 100%;
-            transform: translate(12px,0) scale(0.5);
-            transform-origin: left top;
-        }
-        :host([placement='rightTop']) .popover:after{
-            border-right: 6px solid #fff;
-            top: 10px;
-            left: -12px;
-            transform: translate(0px,0%);
-        }
-        :host([placement='rightTop']:not([trigger]):hover)  .popover, 
-        :host([placement='rightTop'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            left: 100%;
-            transform: translate(12px,0) scale(1);
-        }
-        :host([placement='rightTop'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(12px,0) scale(1);
-        }
-        :host([placement='right']) .popover{
-            top: 50%;
-            left: 100%;
-            transform: translate(12px,-50%) scale(0.5);
-            transform-origin: left center;
-        }
-        :host([placement='right']) .popover:after{
-            border-right: 6px solid #fff;
-            top: 50%;
-            left: -12px;
-            transform: translate(0px,-50%);
-        }
-        :host([placement='right']:not([trigger]):hover)  .popover, 
-        :host([placement='right'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            left: 100%;
-            transform: translate(12px,-50%) scale(1);
-        }
-        :host([placement='right'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(12px,-50%) scale(1);
-        }
-        :host([placement='rightBottom']) .popover{
-            bottom: 0;
-            left: 100%;
-            transform: translate(12px,0%) scale(0.5);
-            transform-origin: left bottom;
-        }
-        :host([placement='rightBottom']) .popover:after{
-            border-right: 6px solid #fff;
-            left: -12px;
-            bottom: 10px;
-            transform: translate(0px,0);
-        }
-        :host([placement='rightBottom']:not([trigger]):hover)  .popover, 
-        :host([placement='rightBottom'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            bottom: 0;
-            transform: translate(12px,0%) scale(1);
-        }
-        :host([placement='rightBottom'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(12px,0%) scale(1);
-        }
-        
-        :host([placement='bottomLeft']) .popover{
-            bottom: 0;
-            /*left: 0;*/
-            left: 8px;
-            right: 0;
-            transform: translate(0,calc(100% + 12px)) scale(0.5);
-            transform-origin: top left;
-        }
-        :host([placement='bottomLeft']) .popover:after{
-            bottom: calc(100%);
-            transform: translate(0%,0%);
-            left: 0;
-        }
-        :host([placement='bottomLeft']:not([trigger]):hover)  .popover, 
-        :host([placement='bottomLeft'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(100% + 12px)) scale(1);
-        }
-        :host([placement='bottomLeft'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(100% + 12px)) scale(1);
-        }
-        :host([placement='bottom']) .popover{
-            bottom: 0;
-            left: 50%;
-            right: 0;
-            transform: translate(-50%,calc(100% + 12px)) scale(0.5);
-            transform-origin: top center;
-        }
-        :host([placement='bottom']) .popover:after{
-            border-bottom: 6px solid #fff;
-            bottom: calc(100%);
-            transform: translate(-50%,0%);
-            left: 50%;
-        }
-        :host([placement='bottom']:not([trigger]):hover)  .popover, 
-        :host([placement='bottom'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-50%,calc(100% + 12px)) scale(1);
-        }
-        :host([placement='bottom'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(-50%,calc(100% + 12px)) scale(1);
-        }
-        /*bottomRight*/
-        :host([placement='bottomRight']) .popover{
-            bottom: 0;
-            right: 0;
-            transform: translate(0%,calc(100% + 12px)) scale(0.5);
-            transform-origin: top right;
-        }
-        :host([placement='bottomRight']) .popover:after{
-            border-bottom: 6px solid #fff;
-            bottom: calc(100%);
-            transform: translate(-50%,0%);
-            right: 10px;
-        }
-        :host([placement='bottomRight']:not([trigger]):hover)  .popover, 
-        :host([placement='bottomRight'][trigger='hover']:hover)  .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0,calc(100% + 12px)) scale(1);
-        }
-        :host([placement='bottomRight'][trigger='click']) input[type=checkbox]:checked ~ .popover { 
-            visibility: visible;
-            opacity: 1;
-            transform: translate(0%,calc(100% + 12px)) scale(1);
-        }
-        :host(:not([title])) .title{
-            display: none;
-        }
-        </style>
-        <input class="trigger-click" type="checkbox">
-        <div class="popover" title="">
-            <div class="title">null</div>
-            <div class="content"><slot name="content" ></slot></div>
-        </div>
-        <slot></slot>
-        "
-`);
-  });
   it('LitPopoverV14', () => {
     document.body.innerHTML = `<lit-popover id="litpop"></lit-popover>`;
     let popver = document.querySelector('#litpop') as LitPopover;
diff --git a/ide/test/base-ui/progress-bar/LitProgressBar.test.ts b/ide/test/base-ui/progress-bar/LitProgressBar.test.ts
index f9efa220a8f96bc931d2521a84241448592f2c40..d467a25711771b9fbf94aeb41bf8eed02e333a63 100644
--- a/ide/test/base-ui/progress-bar/LitProgressBar.test.ts
+++ b/ide/test/base-ui/progress-bar/LitProgressBar.test.ts
@@ -24,55 +24,4 @@ describe('LitProgressBar Test', () => {
   it('LitProgressBarTest01', () => {
     expect(litProgressBar.loading).toBeTruthy();
   });
-
-  it('LitProgressBarTest02', () => {
-    expect(litProgressBar.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            :host{
-                width: 100%;
-                height: 1px;
-                display: flex;
-                position: absolute;
-                overflow: hidden;
-            }
-            .root{
-                width: 100%;
-                height: 100%;
-                position:relative;
-            }
-            :host([loading]) .track1{
-                position: absolute;
-                width: 30%;
-                height: 100%;
-                background-image: linear-gradient(to right,transparent,  #535da6, #535da6, #535da6, #535da6,#535da6,transparent);
-                left: -30%;
-                animation: anim 1.7s linear 0s infinite;
-            }
-            :host([loading]) .track2{
-                position: absolute;
-                width: 30%;
-                height: 100%;
-                background-image: linear-gradient(to right,transparent,  #535da6, #535da6, #535da6, #535da6,#535da6,transparent);
-                left: -30%;
-                animation: anim 1.7s  ease-in-out  0.7s infinite;
-            }
-            @keyframes anim {
-              0% {
-                left:-30%;
-              }
-
-              100% {
-                left:100%;
-              }
-            }
-
-        </style>
-        <div class="root">
-            <div class="track1"></div>
-            <div class="track2"></div>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/radiobox/LitRadioBox.test.ts b/ide/test/base-ui/radiobox/LitRadioBox.test.ts
index fb53838a2448c6fbb15ac8a80c1eef82ced215cd..18a97ac98a9abff771d214a19b73608580f2e930 100644
--- a/ide/test/base-ui/radiobox/LitRadioBox.test.ts
+++ b/ide/test/base-ui/radiobox/LitRadioBox.test.ts
@@ -37,177 +37,8 @@ describe('LitRadioBox Test', () => {
     expect(litRadioBox.value).toBe('value');
   });
 
-  it('LitRadioBoxTest03', () => {
-    expect(litRadioBox.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host([dis=round]):host{ 
-            font-family: Helvetica,serif;
-            font-size: 14px;
-            color: var(--dark-color1,#212121);
-            text-align: left;
-            line-height: 16px;
-            font-weight: 400;
-        }
-        :host([dis=round]) lit-icon{
-           display: none;
-        }
-        :host([dis=round]) #radio{
-            position:absolute;
-            clip:rect(0,0,0,0);
-        }
-        :host([dis=round]) :host(:focus-within) .selected label:hover .selected{ 
-            z-index:1;
-            border-color:#a671ef;
-        }
-        :host([dis=round]) label{
-            box-sizing:border-box;
-            cursor:pointer;
-            display:flex;
-            align-items:center;
-        }
-        :host([dis=round]) .selected{
-            position:relative;
-            display: flex;
-            box-sizing: border-box;
-            width: 16px;
-            height: 16px;
-            border-radius:50%;
-            border: 2px solid var(--dark-color1,#4D4D4D);
-            margin-right:1em;    
-        }
-        .selected{
-            position:relative;
-            box-sizing: border-box;
-            margin-right:1em;    
-        }
-        :host([dis=round]) .selected::before{
-            content:'';
-            width:6px;
-            height:6px;
-            margin:auto;
-            border-radius:50%;
-            background:#a671ef;
-            transform: scale(0);
-        }
-       :host([dis=round]) #radio:focus-visible+label .selected::after{
-            transform:scale(2.5);
-        }
-        :host([dis=round]) #radio:checked+label .selected::before{
-            transform: scale(1);
-        }
-        :host([dis=round]) #radio:checked+label .selected{
-            border-color:#a671ef;
-        }
-        :host([dis=check]):host{ 
-           opacity: 0.9;
-           font-family: Helvetica,serif;
-           font-size: 14px;
-           text-align: left;
-           font-weight: 400;
-        }
-        :host([dis=round]) lit-icon{
-           visibility: visible;
-        }
-        :host([dis=check]) #radio{
-            position:absolute;
-            clip:rect(0,0,0,0);
-        }
-        :host([dis=check]) label{
-            box-sizing:border-box;
-            cursor:pointer;
-            display:flex;
-            align-items:center;
-        }
-        :host([dis=check]) .selected{
-            position:relative;
-            display:flex;
-            justify-content: center;
-            align-items: center;
-            margin-right:5px;
-            width: 16px;
-            height:16px;
-        }
-        :host([dis=check]) .selected::before{
-            position:absolute;
-            content:'';
-            width:74%;
-            height:0.15em;
-            background:#fff;
-            transform:scale(0);
-            border-radius: 0.15em;
-        }
-        :host([dis=check]) .selected::after{
-            content:'';
-            position:absolute;
-            width:100%;
-            height:100%;
-            border-radius:50%;
-            background:#1A83FF;
-            opacity:0.2;
-            transform:scale(0);
-            z-index:-1;
-        }
-        :host([dis=check]) #radio:checked:not(:indeterminate)+label .selected .icon{
-            transform: scale(1.5);
-        }
-        :host([dis=check]) #radio:indeterminate+label .selected::before{
-            transform:scale(1);
-        }
-        :host([dis=check]) .icon{
-            width: 90%;
-            height: 55%;
-            margin-left: 5px;
-            transform: scale(0);
-        }
-        :host([checked][dis=check]) {
-            background-color: #1A83FF;
-            color:#ffffff
-        }
-        :host([disabled]){ 
-            pointer-events: none;
-        }
-        </style>
-        <input type="checkbox" id="radio" >
-        <label id="label" for="radio">
-            <span class="selected">
-            <lit-icon name="checkmark" class="icon" size="8">
-            </lit-icon>
-            </span>
-            <slot id='slot'></slot>
-        </label>
-        "
-`);
-  });
-
   it('litRadioGroupTest01', () => {
     let isReturn = litRadioGroup.value.length == 0;
     expect(isReturn).toBeTruthy();
   });
-
-  it('litRadioGroupTest02', () => {
-    expect(litRadioGroup.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>   
-        :host([direction]) {
-            flex-direction: null;
-        }
-        :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/test/base-ui/select/LitSelect.test.ts b/ide/test/base-ui/select/LitSelect.test.ts
index c5ad88753f6e3129a6626e9f47bd57d363547e51..81b65c1e2739dc5d8d22228e1cbe74d51441145b 100644
--- a/ide/test/base-ui/select/LitSelect.test.ts
+++ b/ide/test/base-ui/select/LitSelect.test.ts
@@ -142,220 +142,6 @@ describe('LitSelect Test', () => {
     expect(select.placement).toBe('1');
   });
 
-  it('LitSelectTest18', function () {
-    let litSelect = new LitSelect();
-    expect(litSelect.initHtml()).toMatchInlineSnapshot(`
-"
-        <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);
-        }
-        :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;
-        }
-        :host(:not([mode]))  input{
-            width: 100%;
-        }
-        .body{
-            max-height: 256px;
-            overflow: auto;
-            border-radius: 2px;
-            box-shadow: 0 5px 15px 0px #00000033;
-        }
-        .multipleRoot input::-webkit-input-placeholder {
-            color: var(--dark-color,#aab2bd);
-        }
-        :host(:not([loading])) .loading{
-            display: none;
-        }
-        :host([loading]) .loading{
-            display: flex;
-        }
-        :host(:not([allow-clear])) .clear{
-            display: none;
-        }
-        :host([loading]) .icon{
-            display: none;
-        }
-        :host(:not([loading])) .icon{
-            display: flex;
-        }
-        .clear:hover{
-            color: #8c8c8c;
-        }
-        .clear{
-            color: #bfbfbf;
-            display: none;
-        }
-        .multipleRoot{
-            display: flex;
-            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;
-            font-size: .75rem;
-            font-weight: bold;
-            padding: 1px 4px;
-            margin-right: 4px;
-            margin-top: 1px;
-            margin-bottom: 1px;
-            color: #242424;
-            background-color: #f5f5f5;
-        }
-        .tag-close:hover{
-            color: #333;
-        }
-        .tag-close{
-            padding: 2px;
-            font-size: .8rem;
-            color: #999999;
-            margin-left: 0px;
-        }
-        </style>
-        <div class="root noSelect" tabindex="0" hidefocus="true">
-            <div class="multipleRoot">
-            <input placeholder="请选择" autocomplete="off" readonly tabindex="0"></div>
-            <lit-loading class="loading" size="12"></lit-loading>
-            <lit-icon class="icon" name='down' color="#c3c3c3"></lit-icon>
-            <lit-icon class="clear" name='close-circle-fill'></lit-icon>
-            <lit-icon class="search" name='search'></lit-icon>
-        </div>
-        <div class="body">
-            <slot></slot>
-            <slot name="footer"></slot>
-        </div>
-        "
-`);
-  });
-
   it('LitSelectTest23', function () {
     document.body.innerHTML = `<lit-select id="litSelect" allow-clear></lit-select>`;
     let select = document.querySelector('#litSelect') as LitSelect;
diff --git a/ide/test/base-ui/select/LitSelectOption.test.ts b/ide/test/base-ui/select/LitSelectOption.test.ts
index 44d2f682320b2a269cbc33fc2d62efa9dcf01998..c145cdf7cc2ce745c818aa2c8b3e616331b1771e 100644
--- a/ide/test/base-ui/select/LitSelectOption.test.ts
+++ b/ide/test/base-ui/select/LitSelectOption.test.ts
@@ -33,64 +33,4 @@ describe('LitSelectOption Test', () => {
   it('LitSelectOptionTest05', function () {
     expect(LitSelectOption.attributeChangedCallback).toBeUndefined();
   });
-
-  it('LitSelectOption02', function () {
-    let litSelect = new LitSelectOption();
-    expect(litSelect.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{ 
-            display: flex;
-            padding: 8px 10px;
-            transition: all .3s;
-            color: var(--dark-color2,#333);
-            tab-index: -1;
-            align-items: center;
-            width: max-content;
-            min-width: 100%;
-            max-lines: 1;
-            white-space: nowrap;
-            font-size: 0.8rem;
-        }
-        :host(:not([disabled])[selected]){
-            background-color: #0A59F7;
-            color: #ffffff;
-            font-weight: bold;
-        }
-        :host(:not([disabled]):not([selected]):hover){
-            background-color: var(--dark-background7,#f5f5f5);
-        }
-        :host([disabled]){
-            cursor: not-allowed;
-            color: var(--dark-color,#bfbfbf);
-        }
-        :host([selected][check]) .check{
-             display: flex;
-        }
-        :host(:not([selected])) .check{
-             display: none;
-        }
-        :host(:not([check])) .check{
-            display: none;
-        }
-        
-        :host([disabled]) .selected-box{
-             display: none;
-        }
-        :host([selected]) .selected{
-            display: flex;
-            color: #FFFFFF;
-        }
-        :host(:not([selected])) .selected{
-            display: none;
-        }
-        </style>
-        <div class="selected-box">
-            <lit-icon class="selected" name="check" size="20"></lit-icon>
-        </div>
-        <slot></slot>
-<!--        <lit-icon class="check" name="check"></lit-icon>-->
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/slider/LitSlider.test.ts b/ide/test/base-ui/slider/LitSlider.test.ts
index 2be66a5fb0ebc6aad40739c7d503cfa56d23a74c..9981bc9fa6872b722054c205f73433509028c782 100644
--- a/ide/test/base-ui/slider/LitSlider.test.ts
+++ b/ide/test/base-ui/slider/LitSlider.test.ts
@@ -70,111 +70,6 @@ describe('LitSlider Test', () => {
     expect(litSliderPanel.attributeChangedCallback('percent', '', '0%' || null)).toBeUndefined();
   });
 
-  it('LitSliderTest13', function () {
-    expect(litSliderPanel.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        /*
-         * Outer box style
-         */
-        :host{ 
-            box-sizing:border-box; 
-            display:flex;
-            
-        }
-        /*
-         * The mouse is missing
-         */
-        :host([disabled]){ 
-            opacity:0.8; 
-            cursor:not-allowed; 
-        }
-        /*
-         * Disable sliding
-         */
-        :host([disabled]) input[type="range"]{
-            pointer-events:none;
-        }
-        /*
-         * Currently the entire sliding container is controlled
-         */
-        #slider-con{ 
-            cursor:pointer;
-            display:flex;
-            align-items:center;
-            width:95%;
-            grid-auto-flow: row dense;
-            position: relative;
-        }
-        /*
-         * Display prompt information
-         */
-        :host([showtips]){
-            pointer-events:all;
-        }
-        
-        #slider{
-            background-color: var(--dark-background7,#D8D8D8);
-            z-index: 5;
-        }
-    
-        /*
-         * Slider basic style
-         */
-        input[type="range"]{
-            pointer-events:all;
-            margin:0 -5px;
-            width: 100%;
-            -webkit-appearance: none;
-            outline : 0;
-            background: rgba(0,0,0,0.1);
-            height: 10px;
-            border-radius:2px;
-            background: -webkit-linear-gradient(right, #46B1E3, #46B1E3) no-repeat;
-        }
-        
-        /*
-         * Slider-line slidedAble area component
-         */
-        input[type="range"]::-webkit-slider-runnable-track{
-            display: flex;
-            align-items: center;
-            position: relative;
-            height: 10px;
-            border-radius:5px;
-        }
-        
-         /*
-         * Slider slider component
-         */
-        input[type="range"]::-webkit-slider-thumb{
-            -webkit-appearance: none;
-            position: relative;
-            width:20px;
-            height:20px;
-            margin-top: -4px;
-            border-radius: 5px;
-            background:#999999;
-            transition:0.2s cubic-bezier(.12, .4, .29, 1.46);
-        }
-        
-        input[type="range"]:focus{
-            z-index:2;
-        }
-
-        :host(:focus-within) #slider-con,:host(:hover) #slider-con{
-            z-index:10
-        }
-        
-        </style>
-        <slot id="slot"></slot>
-        <div id='slider-con' dir="right">
-            <input id="slider" type="range" max="10000000">
-        </div>
-        "
-`);
-  });
-
   it('LitSliderTest14', () => {
     litSliderPanel.disabledX = false;
     expect(litSliderPanel.disabledX).toBeFalsy();
diff --git a/ide/test/base-ui/switch/LitSwitch.test.ts b/ide/test/base-ui/switch/LitSwitch.test.ts
index 6bbce7102cf1dc53b6fcfa7b072ce95f70f66c0e..cb4842534f62c594c00e96836a6431c68d00d4d3 100644
--- a/ide/test/base-ui/switch/LitSwitch.test.ts
+++ b/ide/test/base-ui/switch/LitSwitch.test.ts
@@ -55,78 +55,4 @@ describe('LitSwitch Test', () => {
   it('LitSwitchTest08', () => {
     expect(litSwitch.attributeChangedCallback('checked', 'disabled', null)).toBeUndefined();
   });
-
-  it('LitSwitchTest09', () => {
-    expect(litSwitch.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{ 
-            display:inline-block; 
-            -webkit-tap-highlight-color: transparent;
-        }
-        #name{
-            transition:0.31s width,0.31s height,0.31s background-color;
-            width:2.41em;
-            height:1.21em;
-            background: #3391FF;
-            display:flex;
-            padding:0.124em;
-            border-radius:1.21em;
-            cursor:pointer;
-        }
-        
-        :host(:not([checked])) #name {
-           background: #999999;
-        }
-       
-        #name::before{
-            content:'';
-            flex:0;
-            transition:.2s cubic-bezier(.12, .4, .29, 1.46) flex;
-        }
-        #name::after{
-            content:'';
-            width:.4em;
-            height:.4em;
-            border-radius:1.2em;
-            border:.4em solid #fff;
-            background-color:#ffffff;
-            transition:.3s background,.3s padding,.3s width,.3s height,.3s border-radius,.3s border;
-            box-shadow: 0 2px 4px 0 rgba(0,35,11,0.2);
-        }
-        #name:active::after{
-            padding:0 .3em;
-        }
-        #switch:checked+#name{
-            background:#42b983);
-        }
-        #switch:checked+#name::before{
-            flex:1;
-        }
-        #switch{
-            position:absolute;
-            clip:rect(0,0px,0px,0);
-        }
-        :host(:focus-within) #name::after,:host(:active) ::after{ 
-            background:#42b983;
-        }
-        :host(:focus-within) #name{ 
-            box-shadow: 0 0 10px rgba(0,0,0,0.1); 
-        }
-        :host(:focus-within) #switch,:host(:active) #switch{
-            z-index:2
-        }
-        :host([disabled]){ 
-            pointer-events: none; 
-            opacity:.5; 
-        }
-        :host([disabled]) #name{ 
-            pointer-events: all;  
-            cursor: not-allowed; 
-        }
-        </style>
-        <input type="checkbox" id="switch"><label id="name" for="switch"></label>
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/table/LitTable.test.ts b/ide/test/base-ui/table/LitTable.test.ts
index cb65a10748d7463aa9ab14f99969b32f861ade0b..85ba8a50c8c714a59c217b03b3e7920b19a7dfc1 100644
--- a/ide/test/base-ui/table/LitTable.test.ts
+++ b/ide/test/base-ui/table/LitTable.test.ts
@@ -120,24 +120,23 @@ describe('LitTable Test', () => {
     ];
     litTable.setAttribute('selectable', '123');
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
-    tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('title', '621');
+    tableColmn.setAttribute('data-index', '16');
+    tableColmn.setAttribute('key', '261');
     tableColmn.setAttribute('align', 'flex-start');
-    tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('height', '202px');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
-    tableColmn1.setAttribute('data-index', '2');
-    tableColmn1.setAttribute('key', '2');
+    tableColmn1.setAttribute('title', '12');
+    tableColmn1.setAttribute('data-index', '12');
+    tableColmn1.setAttribute('key', '67');
     tableColmn1.setAttribute('align', 'flex-start');
-    tableColmn1.setAttribute('height', '32px');
-
+    tableColmn1.setAttribute('height', '120px');
     let tableColmn2 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn2.setAttribute('title', '3');
-    tableColmn2.setAttribute('data-index', '3');
-    tableColmn2.setAttribute('key', '3');
+    tableColmn2.setAttribute('title', '13');
+    tableColmn2.setAttribute('data-index', '13');
+    tableColmn2.setAttribute('key', '163');
     tableColmn2.setAttribute('align', 'flex-start');
-    tableColmn2.setAttribute('height', '32px');
+    tableColmn2.setAttribute('height', '4px');
     litTable.tableColumns = [tableColmn, tableColmn1, tableColmn2];
     litTable.tbodyElement = document.createElement('div');
     expect(litTable.renderTable()).toBeUndefined();
@@ -223,219 +222,8 @@ describe('LitTable Test', () => {
     }, 20);
   });
 
-  it('LitTableTest17', () => {
-    expect(litTable.shadowRoot.innerHTML).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: grid;
-            grid-template-columns: repeat(1,1fr);
-            width: 100%;
-            position: relative;
-            font-weight: 500;
-            flex:1;
-        }
-        .tr{
-            display: grid;
-            grid-column-gap: 5px;
-            min-width:100%;
-        }
-        .tr:nth-of-type(even){
-        }
-        .tr{
-            background-color: var(--dark-background,#FFFFFF);
-        }
-        .tr:hover{
-            background-color: var(--dark-background6,#DEEDFF);
-        }
-        .tr[selected]{
-            background-color: var(--dark-background6,#DEEDFF);
-        }
-        .tr[high-light]{
-            font-weight: 600;
-        }
-        .td{
-            box-sizing: border-box;
-            padding: 3px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            width: 100%;
-            height: auto;
-            cursor: pointer;
-        }
-        .td text{
-            overflow: hidden; 
-            text-overflow: ellipsis; 
-            white-space: nowrap;
-        }
-        .td-order{
-        }
-        .td-order:before{
-
-        }
-        :host([grid-line]) .td{
-            border-left: 1px solid #f0f0f0;
-        }
-        :host([grid-line]) .td:last-of-type{
-            border-right: 1px solid #f0f0f0;
-        }
-        .table{
-            width: 100%;
-             color: var(--dark-color2,#262626);
-        }
-        .thead{
-            display: grid;
-            position: sticky;
-            top: 0;
-            font-weight: bold;
-            font-size: .9rem;
-            color: var(--dark-color1,#000);
-            background-color: var(--dark-background,#FFFFFF);
-            z-index: 1;
-        }
-        .tbody{
-            width: 100%;
-            top: 0;
-            left: 0;
-            right:0;
-            bottom:0;
-            display: flex;
-            flex-direction: row
-            row-gap: 1px;
-            column-gap: 1px;
-        }
-        .tree{
-            overflow-x:hidden;
-            overflow-y:hidden;
-            display: grid;
-            grid-template-columns: 1fr;
-            row-gap: 1px;
-            column-gap: 1px;
-            position:relative;
-        }
-        .tree:hover{
-            overflow-x: overlay;
-        }
-        .tree-first-body{
-            min-width: 100%;
-            box-sizing: border-box;
-            display:flex;
-            align-items:center;
-            white-space: nowrap;
-            font-weight: 500;
-            cursor: pointer;
-        }
-        .tree-first-body[high-light]{
-            font-weight: 600;
-        }
-        .tree-first-body:hover{
-            background-color: var(--dark-background6,#DEEDFF); /*antd #fafafa 42b983*/
-        }
-        .body{
-            display: grid;
-            grid-template-columns: 1fr;
-            row-gap: 1px;
-            column-gap: 1px;
-            flex:1;
-            position: relative;
-        }
-        :host([grid-line])  .tbody{
-            border-bottom: 1px solid #f0f0f0;
-            background-color: #f0f0f0;
-        }
-        .th{
-            grid-column-gap: 5px;
-            display: grid;
-            background-color: var(--dark-background,#FFFFFF);
-        }
-
-        .tree-icon{
-            font-size: 1.2rem;
-            width: 20px;
-            height: 20px;
-            padding-right: 5px;
-            padding-left: 5px;
-            cursor: pointer;
-        }
-        .tree-icon:hover{
-            color: #42b983;
-        }
-        .row-checkbox,row-checkbox-all{
-
-        }
-        :host([no-head]) .thead{
-            display: none;
-        }
-        .up-svg{
-            position: absolute;
-            right: 5px;
-            top: 8px;
-            bottom: 8px;
-            width: 15px;
-            height: 15px;
-        }
-        .down-svg{
-            position: absolute;
-            top: 8px;
-            right: 5px;
-            bottom: 8px;
-            width: 15px;
-            height: 15px;
-        }
-        .mouse-select{
-            background-color: var(--dark-background6,#DEEDFF);
-        }
-        .mouse-in{
-            background-color: var(--dark-background6,#DEEDFF);
-        }
-        .export{
-            height:32px;
-            width: 32px;
-            cursor:pointer;
-            display:none;
-            align-items:center;
-            justify-content:center;
-            border-radius:5px;
-            box-sizing: border-box;
-            background-color: #000000;
-            opacity: 0.3;
-            position:absolute;
-            right:20px;
-            bottom:20px;
-            z-index: 999999;
-        }
-        .progress{
-            position: absolute;
-            height: 1px;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 999999;
-        } 
-        :host([hideDownload]) .export{
-            display: none;
-        }
-        </style>
-        <lit-progress-bar id="export_progress_bar" class="progress"></lit-progress-bar>
-        <slot id="slot" style="display: none"></slot>
-        <slot name="head"></slot>
-        <div class="export">
-            <lit-icon size="18" style="color: #ffffff" name="copyhovered"></lit-icon>
-        </div>
-        <div class="table" style="overflow-x:auto;">
-            <div class="thead"></div>
-            <div class="tbody">
-                <div class="tree"></div>
-                <div class="body"></div>
-        </div>
-        </div>
-        "
-`);
-  });
-
   it('LitTableTest18', () => {
-    expect(litTable.createExpandBtn({ expanded: false,data:{status:true} })).not.toBeUndefined();
+    expect(litTable.createExpandBtn({ expanded: false, data: { status: true } })).not.toBeUndefined();
   });
 
   it('LitTableTest19', () => {
@@ -473,17 +261,18 @@ describe('LitTable Test', () => {
     element.appendChild(ch);
     let rowObject = { rowHidden: false, data: { isSearch: true } };
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
     tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('title', '1');
+    tableColmn.setAttribute('data-index', '2');
     tableColmn.setAttribute('align', 'flex-start');
     tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('key', '2');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
+    tableColmn1.setAttribute('align', 'flex-start');
+    tableColmn1.setAttribute('height', '32px');
     tableColmn1.setAttribute('title', '2');
     tableColmn1.setAttribute('data-index', '2');
     tableColmn1.setAttribute('key', '2');
-    tableColmn1.setAttribute('align', 'flex-start');
-    tableColmn1.setAttribute('height', '32px');
     litTable.columns = [tableColmn, tableColmn1];
     expect(litTable.freshCurrentLine(element, rowObject)).toBeUndefined();
   });
@@ -498,12 +287,12 @@ describe('LitTable Test', () => {
     litTable.recycleDs = [{ rowHidden: false, data: { isSearch: true } }];
     let dataSource = [
       {
-        id: 1,
+        id: 11,
         name: 'name',
       },
       {
-        id: 2,
-        name: 'nameValue',
+        id: 21,
+        name: 'value',
       },
     ];
     expect(litTable.expandList(dataSource)).toBeUndefined();
@@ -536,17 +325,17 @@ describe('LitTable Test', () => {
     document.body.innerHTML = `<lit-table id="aaa"></lit-table>`;
     let litTable = document.querySelector('#aaa') as LitTable;
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
-    tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('title', '0');
+    tableColmn.setAttribute('data-index', '22');
+    tableColmn.setAttribute('key', '22');
     tableColmn.setAttribute('align', 'flex-start');
-    tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('height', '321px');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
+    tableColmn1.setAttribute('title', '12');
     tableColmn1.setAttribute('data-index', '2');
-    tableColmn1.setAttribute('key', '2');
+    tableColmn1.setAttribute('key', '4');
     tableColmn1.setAttribute('align', 'flex-start');
-    tableColmn1.setAttribute('height', '32px');
+    tableColmn1.setAttribute('height', '2px');
     litTable.tableColumns = [tableColmn, tableColmn1];
     litTable.columns = [tableColmn, tableColmn1];
     litTable.selectable = true;
@@ -596,11 +385,11 @@ describe('LitTable Test', () => {
   it('LitTableTest34', () => {
     let litTable = new LitTable();
     let htmlElement = document.createElement('lit-table-column') as LitTableColumn;
-    htmlElement.setAttribute('title', '1');
+    htmlElement.setAttribute('title', '41');
     htmlElement.setAttribute('data-index', '1');
-    htmlElement.setAttribute('key', '1');
+    htmlElement.setAttribute('key', '14');
     htmlElement.setAttribute('align', 'flex-start');
-    htmlElement.setAttribute('height', '32px');
+    htmlElement.setAttribute('height', '34px');
     litTable.columns = [htmlElement];
     document.body.innerHTML = `<lit-table id="aaa"> <lit-progress-bar id="export_progress_bar" class="progress"></lit-progress-bar></lit-table>`;
     let progressBar = document.querySelector('#export_progress_bar') as LitProgressBar;
@@ -637,32 +426,32 @@ describe('LitTable Test', () => {
 
   it('LitTableTest40', () => {
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
-    tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('title', '21');
+    tableColmn.setAttribute('data-index', '13');
+    tableColmn.setAttribute('key', '4');
     tableColmn.setAttribute('align', 'flex-start');
     tableColmn.setAttribute('height', '32px');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
-    tableColmn1.setAttribute('data-index', '2');
-    tableColmn1.setAttribute('key', '2');
+    tableColmn1.setAttribute('title', '52');
+    tableColmn1.setAttribute('data-index', '244');
+    tableColmn1.setAttribute('key', '25');
     tableColmn1.setAttribute('align', 'flex-start');
-    tableColmn1.setAttribute('height', '32px');
+    tableColmn1.setAttribute('height', '24px');
 
     let tableColmn2 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn2.setAttribute('title', '3');
-    tableColmn2.setAttribute('data-index', '3');
-    tableColmn2.setAttribute('key', '3');
+    tableColmn2.setAttribute('title', '53');
+    tableColmn2.setAttribute('data-index', '35');
+    tableColmn2.setAttribute('key', '35');
     tableColmn2.setAttribute('align', 'flex-start');
-    tableColmn2.setAttribute('height', '32px');
+    tableColmn2.setAttribute('height', '325px');
     litTable.columns = [tableColmn, tableColmn1, tableColmn2];
     let dataSource = [
       {
-        id: 1,
+        id: 22,
         name: 'name',
       },
       {
-        id: 2,
+        id: 12,
         name: 'nameValue',
       },
     ];
@@ -673,18 +462,18 @@ describe('LitTable Test', () => {
     let list = [
       {
         memoryTap: 'All Heap',
-        existing: 1938,
-        existingString: '1.89 Kb',
-        freeByteString: '4.54 Kb',
-        allocCount: 46,
+        existing: 1481,
+        existingString: '44.89 Kb',
+        freeByteString: '42.54 Kb',
+        allocCount: 461,
         freeCount: 103,
-        freeByte: 4653,
-        totalBytes: 6591,
-        totalBytesString: '6.44 Kb',
-        maxStr: '200 byte',
-        max: 200,
+        freeByte: 43451,
+        totalBytes: 641,
+        totalBytesString: '4.44 Kb',
+        maxStr: '275 byte',
+        max: 264,
         totalCount: 149,
-        existingValue: [1938, 6591, 566720],
+        existingValue: [1948, 411, 51820],
       },
     ];
     LitTable.createNewTreeTableElement = jest.fn().mockResolvedValue({});
@@ -692,24 +481,23 @@ describe('LitTable Test', () => {
     litTable.tableElement = document.createElement('div');
     litTable.setAttribute('selectable', '123');
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
-    tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('title', '6');
+    tableColmn.setAttribute('data-index', '22');
+    tableColmn.setAttribute('key', '29');
     tableColmn.setAttribute('align', 'flex-start');
-    tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('height', '42px');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
-    tableColmn1.setAttribute('data-index', '2');
-    tableColmn1.setAttribute('key', '2');
+    tableColmn1.setAttribute('title', '125');
+    tableColmn1.setAttribute('data-index', '22');
+    tableColmn1.setAttribute('key', '12');
     tableColmn1.setAttribute('align', 'flex-start');
-    tableColmn1.setAttribute('height', '32px');
-
+    tableColmn1.setAttribute('height', '121px');
     let tableColmn2 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn2.setAttribute('title', '3');
-    tableColmn2.setAttribute('data-index', '3');
-    tableColmn2.setAttribute('key', '3');
+    tableColmn2.setAttribute('title', '31');
+    tableColmn2.setAttribute('data-index', '13');
+    tableColmn2.setAttribute('key', '31');
     tableColmn2.setAttribute('align', 'flex-start');
-    tableColmn2.setAttribute('height', '32px');
+    tableColmn2.setAttribute('height', '12px');
     litTable.columns = [tableColmn, tableColmn1, tableColmn2];
     litTable.tbodyElement = document.createElement('div');
     litTable.theadElement = document.createElement('div');
@@ -720,18 +508,18 @@ describe('LitTable Test', () => {
     let list = [
       {
         memoryTap: 'All Heap',
-        existing: 1938,
-        existingString: '1.89 Kb',
-        freeByteString: '4.54 Kb',
-        allocCount: 46,
+        existing: 43482,
+        existingString: '6.89 Kb',
+        freeByteString: '76.54 Kb',
+        allocCount: 462,
         freeCount: 103,
-        freeByte: 4653,
-        totalBytes: 6591,
+        freeByte: 456,
+        totalBytes: 622,
         totalBytesString: '6.44 Kb',
         maxStr: '200 byte',
-        max: 200,
-        totalCount: 149,
-        existingValue: [1938, 6591, 566720],
+        max: 222,
+        totalCount: 12,
+        existingValue: [1348, 6662, 2220],
       },
     ];
     LitTable.createNewTreeTableElement = jest.fn().mockResolvedValue({});
@@ -739,58 +527,56 @@ describe('LitTable Test', () => {
     litTable.tableElement = document.createElement('div');
     litTable.setAttribute('selectable', '123');
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
-    tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('title', '103');
+    tableColmn.setAttribute('data-index', '13');
+    tableColmn.setAttribute('key', '10');
     tableColmn.setAttribute('align', 'flex-start');
     tableColmn.setAttribute('height', '32px');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
-    tableColmn1.setAttribute('data-index', '2');
-    tableColmn1.setAttribute('key', '2');
     tableColmn1.setAttribute('align', 'flex-start');
     tableColmn1.setAttribute('height', '32px');
-
+    tableColmn1.setAttribute('title', '2');
+    tableColmn1.setAttribute('data-index', '23');
+    tableColmn1.setAttribute('key', '20');
     let tableColmn2 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn2.setAttribute('title', '3');
-    tableColmn2.setAttribute('data-index', '3');
-    tableColmn2.setAttribute('key', '3');
+    tableColmn2.setAttribute('title', '31');
+    tableColmn2.setAttribute('key', '30');
     tableColmn2.setAttribute('align', 'flex-start');
+    tableColmn2.setAttribute('data-index', '3');
     tableColmn2.setAttribute('height', '32px');
     litTable.columns = [tableColmn, tableColmn1, tableColmn2];
-    litTable.tbodyElement = document.createElement('div');
     litTable.theadElement = document.createElement('div');
+    litTable.tbodyElement = document.createElement('div');
     expect(litTable.meauseAllRowHeight(list)).toBeTruthy();
   });
 
   it('LitTableTest43', () => {
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
-    tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
+    tableColmn.setAttribute('data-index', '14');
+    tableColmn.setAttribute('key', '141');
     tableColmn.setAttribute('align', 'flex-start');
     tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('title', '114');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
-    tableColmn1.setAttribute('data-index', '2');
-    tableColmn1.setAttribute('key', '2');
+    tableColmn1.setAttribute('key', '214');
     tableColmn1.setAttribute('align', 'flex-start');
+    tableColmn1.setAttribute('title', '24');
+    tableColmn1.setAttribute('data-index', '24');
     tableColmn1.setAttribute('height', '32px');
-
     let tableColmn2 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn2.setAttribute('title', '3');
-    tableColmn2.setAttribute('data-index', '3');
-    tableColmn2.setAttribute('key', '3');
+    tableColmn2.setAttribute('title', '34');
+    tableColmn2.setAttribute('key', '314');
     tableColmn2.setAttribute('align', 'flex-start');
     tableColmn2.setAttribute('height', '32px');
+    tableColmn2.setAttribute('data-index', '34');
     litTable.columns = [tableColmn, tableColmn1, tableColmn2];
     let dataSource = [
       {
-        id: 1,
+        id: 13,
         name: 'name',
       },
       {
-        id: 2,
+        id: 23,
         name: 'nameValue',
       },
     ];
@@ -805,17 +591,18 @@ describe('LitTable Test', () => {
     element.appendChild(ch);
     let rowObject = { rowHidden: false, data: { isSearch: true } };
     let tableColmn = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn.setAttribute('title', '1');
+    tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('title', '16');
     tableColmn.setAttribute('data-index', '1');
-    tableColmn.setAttribute('key', '1');
     tableColmn.setAttribute('align', 'flex-start');
-    tableColmn.setAttribute('height', '32px');
+    tableColmn.setAttribute('height', '36px');
+    tableColmn.setAttribute('key', '1');
     let tableColmn1 = document.createElement('lit-table-column') as LitTableColumn;
-    tableColmn1.setAttribute('title', '2');
-    tableColmn1.setAttribute('data-index', '2');
     tableColmn1.setAttribute('key', '2');
     tableColmn1.setAttribute('align', 'flex-start');
     tableColmn1.setAttribute('height', '32px');
+    tableColmn1.setAttribute('title', '2');
+    tableColmn1.setAttribute('data-index', '2');
     litTable.columns = [tableColmn, tableColmn1];
     expect(litTable.freshCurrentLine(element, rowObject, firstElement)).toBeUndefined();
   });
@@ -828,7 +615,7 @@ describe('LitTable Test', () => {
     expect(litTable.hideDownload).not.toBeUndefined();
   });
   it('LitTableTest47', () => {
-    expect(litTable.createBtn({ expanded: false,data:{status:true} })).not.toBeUndefined();
+    expect(litTable.createBtn({ expanded: false, data: { status: true } })).not.toBeUndefined();
   });
   it('LitTableTest48', () => {
     expect(litTable.mouseOut()).toBeUndefined();
diff --git a/ide/test/base-ui/table/LitTableColumn.test.ts b/ide/test/base-ui/table/LitTableColumn.test.ts
index 26c968cd77d3ecee5ae9a86ac1f6f82cf7a85718..39b971272c23059664086e625e4c25abf4ccb8f6 100644
--- a/ide/test/base-ui/table/LitTableColumn.test.ts
+++ b/ide/test/base-ui/table/LitTableColumn.test.ts
@@ -28,17 +28,4 @@ describe('LitTableGroup Test', () => {
     expect(litTableColumn.connectedCallback()).toBeUndefined();
   });
 
-  it('LitTableGroupTest03', () => {
-    expect(litTableColumn.shadowRoot.innerHTML).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            overflow: auto;
-            width: 100%;
-         }
-        </style>
-        <slot id="slot"></slot>
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/table/LitTableGroup.test.ts b/ide/test/base-ui/table/LitTableGroup.test.ts
index c6677d4f7d82e4252a55f726c370d363b06abada..b643bd62bf5ff80a1188c74b888f2d870dfc109f 100644
--- a/ide/test/base-ui/table/LitTableGroup.test.ts
+++ b/ide/test/base-ui/table/LitTableGroup.test.ts
@@ -27,15 +27,4 @@ describe('LitTableGroup Test', () => {
   it('LitTableGroupTest02', () => {
     expect(litTableGroup.title).toBe('title');
   });
-
-  it('LitTableGroupTest03', () => {
-    expect(litTableGroup.shadowRoot.innerHTML).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{ }
-        </style>
-        <slot id="sl"></slot>
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/tabs/LitTabpane.test.ts b/ide/test/base-ui/tabs/LitTabpane.test.ts
index b251c32a5715166b0faedc0f1f8611e6fa9013c6..11dfadd6e12274428a48748751fea72459aa3e84 100644
--- a/ide/test/base-ui/tabs/LitTabpane.test.ts
+++ b/ide/test/base-ui/tabs/LitTabpane.test.ts
@@ -66,19 +66,4 @@ describe('LitTabPane Test', () => {
   it('LitTabPaneTest11 ', function () {
     expect(litTabPane.adoptedCallback()).toBeUndefined();
   });
-  it('LitTabPaneTest8', () => {
-    expect(litTabPane.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host(){
-            scroll-behavior: smooth;
-            -webkit-overflow-scrolling: touch;
-            overflow: auto;
-            width: 100%;
-        }
-        </style>
-        <slot></slot>
-        "
-`);
-  });
 });
diff --git a/ide/test/base-ui/tabs/LitTabs.test.ts b/ide/test/base-ui/tabs/LitTabs.test.ts
index 92f70f5649476c324d4ae4d1f8b7c39a04e82aa2..b9610d6e2d2c65a68ab2d7ad6994490a1a8c2edd 100644
--- a/ide/test/base-ui/tabs/LitTabs.test.ts
+++ b/ide/test/base-ui/tabs/LitTabs.test.ts
@@ -128,408 +128,6 @@ describe('LitSwitch Test', () => {
     expect(litTabs.mode).toBe('mode');
   });
 
-  it('litTabsTest12', () => {
-    expect(litTabs.shadowRoot.innerHTML).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{ 
-            display: block;
-            text-align: unset;
-            color: var(--dark-color1,#252525);
-            background-color: var(--dark-background,#FFFFFF);
-            box-shadow: #00000033 0 0 10px ;
-        }
-        ::slotted(lit-tabpane){
-            box-sizing:border-box;
-            width:100%;
-            height:100%;
-            flex-shrink:0;
-            overflow: auto;
-        }
-        .nav-item{
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            /*padding: 6px 0px 6px 12px;*/
-            padding-left: 12px;
-            font-size: .9rem;
-            font-weight: normal;
-            cursor: pointer;
-            transition: all 0.3s;
-            flex-shrink: 0;
-        }
-        .nav-item lit-icon{
-            margin-right: 2px;
-            font-size: inherit;
-        }
-
-        .nav-item[data-disabled]{
-            pointer-events: all;
-            cursor: not-allowed;
-            color: #bfbfbf;
-        }
-        .nav-item[data-hidden]{
-            pointer-events: all;
-            cursor: not-allowed;
-            color: #bfbfbf;
-            display: none;
-        }
-
-        .tab-content{
-            display: block;
-            background-color: #fff;
-            flex:1;
-        }
-        
-        /*
-         *   top  top-left top-center top-right
-         */
-        :host(:not([position])) .nav-root,
-        :host([position^='top']) .nav-root{
-            display: flex;
-            position: relative;
-            height: 38px;
-            z-index: auto;
-            /*justify-content: center;*/
-            /*align-items: center;*/
-        }
-        :host(:not([mode]):not([position])) .tab-line,/*移动的线条*/
-        :host([mode='flat'][position^='top']) .tab-line{
-            position:absolute;
-        }
-        
-        :host(:not([position])) .tab-nav-container,
-        :host([position^='top']) .tab-nav-container{
-            display: flex;
-            /*position: relative;*/
-            /*flex-direction: column;*/
-            /*overflow-y: hidden;*/
-            /*overflow-x: auto;*/
-            /*overflow: -moz-scrollbars-none; */
-            /*-ms-overflow-style: none;*/
-            /*transition: all 0.3s;*/
-            
-            position: absolute;
-            overflow: auto;
-            height: 850px;
-            transform: rotateZ(-90deg) rotateY(180deg);
-            transform-origin: left top;
-            overflow-x: hidden;
-            width: 38px;
-            
-            cursor: row-resize;
-            user-select: none;
-        }
-        :host([position='top']) .tab-nav,
-        :host([position='top-left']) .tab-nav{
-            display: flex;
-            position: relative;
-            justify-content: flex-start;
-            cursor: row-resize;
-            user-select: none;
-            margin-top: 6px;
-            margin-left: 5px;
-            
-            transform: translateY(-38px) rotateZ(90deg) rotateX(180deg) translateY(38px);
-            transform-origin: left bottom;
-            flex-wrap: nowrap;
-            height: 38px;
-        }
-        :host([position='top-center']) .tab-nav{
-            display: flex;
-            justify-content: center;
-        }
-        :host([position='top-right']) .tab-nav{
-            display: flex;
-            justify-content: flex-end;
-        }
-        
-        :host([position^='top'][mode='card']) .nav-item{
-            border-top: 1px solid var(--dark-border1,#f0f0f0);
-            border-left: 1px solid var(--dark-border1,#f0f0f0);
-            border-right: 1px solid var(--dark-border1,#f0f0f0);
-            bottom: 0px;
-            margin-right: 2px;
-            position: relative;
-            height: 100%;
-        }
-        :host([position^='top']) .tab-nav-bg-line{
-            position: absolute;bottom: 0;height: 1px;
-            width: 100%
-        }
-        :host([position^='top'][mode='card']) .nav-item:not([data-selected]){
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-            background-color: var(--dark-border1,#D8D8D8);
-            color: var(--dark-color1,#212121);
-        }
-        :host([position^='top'][mode='card']) .nav-item[data-selected]{
-            background-color: var(--dark-background,#ffffff);
-            bottom: 0px;
-            color: var(--dark-color1,#212121);
-            border-top: 1px solid var(--dark-border1,#bababa);
-            border-top-left-radius: 5px;
-            border-top-right-radius: 5px;
-            border-left: 1px solid var(--dark-border1,#bababa);
-            border-right: 1px solid var(--dark-border1,#bababa);
-        }
-        /*
-            bottom bottom-left bottom-center bottom-right
-        */
-        :host([position^='bottom']) .tab{
-            display: flex;
-            flex-direction: column-reverse;
-        }
-        :host([mode='flat'][position^='bottom']) .tab-line{
-            position:absolute;
-            top: -3px;
-            background-color: #42b983;
-            height: 2px;
-            transform: translateY(-100%);
-            transition: all 0.3s;
-        }
-        :host([position^='bottom']) .tab-nav-container{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            overflow-x: auto;
-            overflow-y: visible;
-            overflow: -moz-scrollbars-none; 
-            -ms-overflow-style: none;
-            transition: all 0.3s;
-            flex: 1;
-            border-top: #f0f0f0 1px solid;
-        }
-        :host([position^='bottom']) .nav-root{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        :host([position='bottom']) .tab-nav,
-        :host([position='bottom-left']) .tab-nav{
-            display: flex;
-            position: relative;
-            justify-content: flex-start;
-        }
-        :host([position='bottom-center']) .tab-nav{
-            display: flex;
-            justify-content: center;
-        }
-        :host([position='bottom-right']) .tab-nav{
-            display: flex;
-            justify-content: flex-end;
-        }
-        :host([position^='bottom'][mode='card']) .nav-item{
-            border-top: 1px solid #ffffff;
-            border-left: 1px solid #f0f0f0;
-            border-right: 1px solid #f0f0f0;
-            border-bottom: 1px solid #f0f0f0;
-            top: -1px;
-            margin-right: 2px;
-            position: relative;
-        }
-        :host([position^='bottom']) .tab-nav-bg-line{
-            position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100%
-        }
-        :host([position^='bottom'][mode='card']) .nav-item:not([data-selected]){
-            background-color: #f5f5f5;
-            border-top: 1px solid #f0f0f0;
-        }
-        :host([position^='bottom'][mode='card']) .nav-item[data-selected]{
-            background-color: #ffffff;
-            border-top: 1px solid #fff;
-            top: -1px;
-        }
-        /*
-        left left-top left-center left-bottom
-        */
-        :host([position^='left']) .tab{
-            display: flex;
-            flex-direction: row;
-        }
-        :host([mode='flat'][position^='left']) .tab-line{
-            position:absolute;
-            right: 1px;
-            background-color: #42b983;
-            width: 3px;
-            transform: translateX(100%);
-            transition: all 0.3s;
-        }
-        :host([position^='left']) .tab-nav-container{
-            display: flex;
-            position: relative;
-            flex-direction: row;
-            overflow-x: auto;
-            overflow-y: visible;
-            overflow: -moz-scrollbars-none; 
-            -ms-overflow-style: none;
-            transition: all 0.3s;
-            flex: 1;
-            border-right: #f0f0f0 1px solid;
-        }
-        :host([position^='left']) .nav-root{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
-        :host([position='left']) .tab-nav,
-        :host([position='left-top']) .tab-nav{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            justify-content: flex-start;
-        }
-        :host([position='left-center']) .tab-nav{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            justify-content: center;
-        }
-        :host([position='left-bottom']) .tab-nav{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            justify-content: flex-end;
-        }
-        :host([position^='left'][mode='card']) .nav-item{
-            border-top: 1px solid #f0f0f0;
-            border-left: 1px solid #f0f0f0;
-            border-right: 1px solid #ffffff;
-            border-bottom: 1px solid #f0f0f0;
-            right: -1px;
-            margin-bottom: 2px;
-            position: relative;
-        }
-        :host([position^='left']) .tab-nav-bg-line{
-            position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100%
-        }
-        :host([position^='left'][mode='card']) .nav-item:not([data-selected]){
-            background-color: #f5f5f5;
-            border-right: 1px solid #f0f0f0;
-        }
-        :host([position^='left'][mode='card']) .nav-item[data-selected]{
-            background-color: #ffffff;
-            border-bottom: 1px solid #fff;
-            right: -1px;
-        }
-        /*
-        right right-top right-center right-bottom
-        */
-        :host([position^='right']) .tab{
-            display: flex;
-            flex-direction: row-reverse;
-        }
-        :host([mode='flat'][position^='right']) .tab-line{
-            position:absolute;
-            left: 1px;
-            background-color: #42b983;
-            width: 3px;
-            transform: translateX(-100%);
-            transition: all 0.3s;
-        }
-        :host([position^='right']) .tab-nav-container{
-            display: flex;
-            position: relative;
-            flex-direction: row-reverse;
-            overflow-x: auto;
-            overflow-y: visible;
-            overflow: -moz-scrollbars-none; 
-            -ms-overflow-style: none;
-            transition: all 0.3s;
-            flex: 1;
-            border-left: #f0f0f0 1px solid;
-        }
-        :host([position^='right']) .nav-root{
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
-        :host([position='right']) .tab-nav,
-        :host([position='right-top']) .tab-nav{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            justify-content: flex-start;
-        }
-        :host([position='right-center']) .tab-nav{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            justify-content: center;
-        }
-        :host([position='right-bottom']) .tab-nav{
-            display: flex;
-            position: relative;
-            flex-direction: column;
-            justify-content: flex-end;
-        }
-        :host([position^='right'][mode='card']) .nav-item{
-            border-top: 1px solid #f0f0f0;
-            border-left: 1px solid #ffffff;
-            border-right: 1px solid #f0f0f0;
-            border-bottom: 1px solid #f0f0f0;
-            left: -1px;
-            margin-top: 2px;
-            position: relative;
-        }
-        :host([position^='right']) .tab-nav-bg-line{
-            position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100%
-        }
-        :host([position^='right'][mode='card']) .nav-item:not([data-selected]){
-            background-color: #f5f5f5;
-            border-left: 1px solid #f0f0f0;
-        }
-        :host([position^='right'][mode='card']) .nav-item[data-selected]{
-            background-color: #ffffff;
-            left: -1px;
-        }
-        
-        
-        .tab-nav-container::-webkit-scrollbar {
-            display: none;
-        }
-        
-        .close-icon:hover{
-            color: #000;
-        }
-        .nav-item[data-closeable] .close-icon{
-            display: block;
-            padding: 2px 5px;
-            color: var(--dark-icon,#606060)
-        }
-        .nav-item[data-closeable] .no-close-icon{
-            display: none;
-        }
-        .nav-item:not([data-closeable]) .no-close-icon{
-            display: block;
-        }
-        .nav-item:not([data-closeable]) .close-icon{
-            display: none;
-        }
-        
-        </style>
-        <style id="filter"></style>
-        <div class="tab">
-            <div class="nav-root" style="background-color: var(--dark-background4,#f2f2f2);">
-                <slot name="left" style="flex:1"></slot>
-                <div class="tab-nav-container">
-                    <div class="tab-nav-bg-line"></div>
-                    <div class="tab-nav" id="nav"></div>
-                    <div class="tab-line" id="tab-line"></div>
-                </div>
-                <div id="tab-filling" style="flex: 1"></div>
-                <slot name="right" style="flex:1"></slot>
-            </div>
-            <div class="tab-content">
-                <slot id="slot">NEED CONTENT</slot>
-            </div>
-        </div>
-        "
-`);
-  });
-
   it('litTabsTest14', () => {
     litTabs.nav = jest.fn(() => true);
     litTabs.nav.querySelector = jest.fn(() => {
diff --git a/ide/test/js-heap/HeapDataInterface.test.ts b/ide/test/js-heap/HeapDataInterface.test.ts
index 3eec602c56b7593fe05500fcfbb1cb13b0cfd859..26063664230ce6bcd2ac8ca14d3d987606441309 100644
--- a/ide/test/js-heap/HeapDataInterface.test.ts
+++ b/ide/test/js-heap/HeapDataInterface.test.ts
@@ -35,54 +35,54 @@ jest.mock('../../dist/js-heap/model/DatabaseStruct.js', () => {});
 describe('HeapDataInterface Test', () => {
     let data = {
         end_ts: 88473497504466,
-        id: 0,
+        id: 3,
         isParseSuccess: true,
         name: 'Test',
         path: '',
         pid: 4243,
         tart_ts: 88473061693464,
-        type: 0,
+        type: 3,
         heapLoader: {
             rootNode: {
-                detachedness: 0,
+                detachedness: 3,
                 displayName: '',
                 distance: 100000000,
-                edgeCount: 3575,
-                fileId: 0,
+                edgeCount: 35375,
+                fileId: 30,
                 firstEdgeIndex: 0,
                 flag: 0,
                 id: 1,
                 name: 'Test',
-                nodeIndex: 0,
+                nodeIndex: 30,
                 nodeOldIndex: 0,
-                retainedSize: 1898167,
+                retainedSize: 1838167,
                 retainsCount: 0,
                 retainsEdgeIdx: [0],
                 retainsNodeIdx: [0],
-                selfSize: 0,
+                selfSize: 30,
                 traceNodeId: 0,
                 type: 9,
                 edges: [
                     {
-                        edgeIndex: 0,
-                        edgeOldIndex: 0,
-                        fromNodeId: 1,
+                        edgeIndex: 2,
+                        edgeOldIndex: 2,
+                        fromNodeId: 4,
                         nameOrIndex: '-test-',
-                        nodeId: 152376,
+                        nodeId: 1523400,
                         retainEdge: [],
                         retainsNode: [],
-                        toNodeId: 43537,
-                        type: 5,
+                        toNodeId: 44500,
+                        type: 6,
                     },
                     {
-                        edgeIndex: 1,
+                        edgeIndex: 6,
                         edgeOldIndex: 3,
                         fromNodeId: 1,
                         nameOrIndex: '-test-',
-                        nodeId: 155414,
+                        nodeId: 233330,
                         retainEdge: [],
                         retainsNode: [],
-                        toNodeId: 44405,
+                        toNodeId: 32405,
                         type: 5,
                     },
                 ],
@@ -94,26 +94,26 @@ describe('HeapDataInterface Test', () => {
             nodeCount: 1,
             edges: [
                 {
-                    edgeIndex: 0,
-                    edgeOldIndex: 0,
-                    fromNodeId: 1,
+                    edgeIndex: 22,
+                    edgeOldIndex: 32,
+                    fromNodeId: 111,
                     nameOrIndex: '-test-',
-                    nodeId: 152376,
+                    nodeId: 13331,
                     retainEdge: [],
                     retainsNode: [],
-                    toNodeId: 43537,
-                    type: 5,
+                    toNodeId: 133,
+                    type: 32,
                 },
                 {
-                    edgeIndex: 1,
-                    edgeOldIndex: 3,
-                    fromNodeId: 1,
+                    edgeIndex: 32,
+                    edgeOldIndex: 231,
+                    fromNodeId: 231,
                     nameOrIndex: '-test-',
-                    nodeId: 155414,
+                    nodeId: 42321,
                     retainEdge: [],
                     retainsNode: [],
-                    toNodeId: 44405,
-                    type: 5,
+                    toNodeId: 21201,
+                    type: 95,
                 },
             ],
             samples: [],
diff --git a/ide/test/js-heap/logic/Allocation.test.ts b/ide/test/js-heap/logic/Allocation.test.ts
index 478a62351f12aa2a103e88e239243c5874bebb92..4f46fea0c37cf48716fcf71ea497a3df0da9fa89 100644
--- a/ide/test/js-heap/logic/Allocation.test.ts
+++ b/ide/test/js-heap/logic/Allocation.test.ts
@@ -18,343 +18,343 @@ import { AllocationLogic } from '../../../dist/js-heap/logic/Allocation.js';
 import { AllocationFunction } from '../../../dist/js-heap/model/UiStruct.js';
 
 jest.mock('../../../dist/js-heap/model/UiStruct.js', () => {
-    return {
-        AllocationFunction: {
-            fileId: 0,
-            functionIndex: 0,
-            parentsId: [1, 2, 3],
-            parents: [],
-            combineId: new Set([]),
-            status: true,
-            id: '12',
-            name: 'name1',
-            scriptName: 'scriptName1',
-            scriptId: 1,
-            line: 1,
-            column: 1,
-            count: 1,
-            size: 1,
-            liveCount: 1,
-            liveSize: 1,
-            hasParent: true,
-            clone: () => {
-                return {
-                    fileId: 0,
-                    functionIndex: 0,
-                    parentsId: [1, 2, 3],
-                    parents: [],
-                    combineId: new Set([]),
-                    status: true,
-                    id: '12',
-                    name: 'name1',
-                    scriptName: 'scriptName1',
-                    scriptId: 1,
-                    line: 1,
-                    column: 1,
-                    count: 1,
-                    size: 1,
-                    liveCount: 1,
-                    liveSize: 1,
-                    hasParent: true,
-                };
-            },
-        },
-        clone: () => {
-            return {
-                fileId: 0,
-                functionIndex: 0,
-                parentsId: [1, 2, 3],
-                parents: [],
-                combineId: new Set([]),
-                status: true,
-                id: '12',
-                name: 'name1',
-                scriptName: 'scriptName1',
-                scriptId: 1,
-                line: 1,
-                column: 1,
-                count: 1,
-                size: 1,
-                liveCount: 1,
-                liveSize: 1,
-                hasParent: true,
-            };
-        },
-    };
+  return {
+    AllocationFunction: {
+      fileId: 0,
+      functionIndex: 0,
+      parentsId: [1, 2, 3],
+      parents: [],
+      combineId: new Set([]),
+      status: true,
+      id: '12',
+      name: 'name1',
+      scriptName: 'scriptName1',
+      scriptId: 1,
+      line: 1,
+      column: 1,
+      count: 1,
+      size: 1,
+      liveCount: 1,
+      liveSize: 1,
+      hasParent: true,
+      clone: () => {
+        return {
+          fileId: 1,
+          functionIndex: 324,
+          parentsId: [10, 56, 3],
+          parents: [],
+          combineId: new Set([]),
+          status: true,
+          id: '21',
+          name: 'name2',
+          scriptName: 'scriptName2',
+          scriptId: 21,
+          line: 321,
+          column: 3,
+          count: 43,
+          size: 45,
+          liveCount: 11,
+          liveSize: 43,
+          hasParent: true,
+        };
+      },
+    },
+    clone: () => {
+      return {
+        fileId: 42,
+        functionIndex: 44,
+        parentsId: [1, 24],
+        parents: [],
+        combineId: new Set([]),
+        status: true,
+        id: '90',
+        name: 'name3',
+        scriptName: 'scriptName3',
+        scriptId: 65,
+        line: 6,
+        column: 87,
+        count: 23,
+        size: 54,
+        liveCount: 56,
+        liveSize: 44,
+        hasParent: true,
+      };
+    },
+  };
 });
 
 describe('Allocation Test', () => {
-    let set: Set<number> = new Set([]);
-    let data = {
-        end_ts: 88473497504466,
-        id: 0,
-        isParseSuccess: true,
+  let set: Set<number> = new Set([]);
+  let data = {
+    end_ts: 342211,
+    id: 3,
+    isParseSuccess: true,
+    name: 'Test',
+    path: '',
+    pid: 34,
+    tart_ts: 8847320334,
+    type: 1,
+    heapLoader: {
+      rootNode: {
+        detachedness: 43,
+        displayName: '',
+        distance: 230000000,
+        edgeCount: 432,
+        fileId: 46,
+        firstEdgeIndex: 54,
+        flag: 5,
+        id: 54,
         name: 'Test',
-        path: '',
-        pid: 4243,
-        tart_ts: 88473061693464,
-        type: 0,
-        heapLoader: {
-            rootNode: {
-                detachedness: 0,
-                displayName: '',
-                distance: 100000000,
-                edgeCount: 3575,
-                fileId: 0,
-                firstEdgeIndex: 0,
-                flag: 0,
-                id: 1,
-                name: 'Test',
-                nodeIndex: 0,
-                nodeOldIndex: 0,
-                retainedSize: 1898167,
-                retainsCount: 0,
-                retainsEdgeIdx: [0],
-                retainsNodeIdx: [0],
-                selfSize: 0,
-                traceNodeId: 0,
-                type: 9,
-                edges: [
-                    {
-                        edgeIndex: 0,
-                        edgeOldIndex: 0,
-                        fromNodeId: 1,
-                        nameOrIndex: '-test-',
-                        nodeId: 152376,
-                        retainEdge: [],
-                        retainsNode: [],
-                        toNodeId: 43537,
-                        type: 5,
-                    },
-                    {
-                        edgeIndex: 1,
-                        edgeOldIndex: 3,
-                        fromNodeId: 1,
-                        nameOrIndex: '-test-',
-                        nodeId: 155414,
-                        retainEdge: [],
-                        retainsNode: [],
-                        toNodeId: 44405,
-                        type: 5,
-                    },
-                ],
-            },
+        nodeIndex: 0,
+        nodeOldIndex: 0,
+        retainedSize: 5411,
+        retainsCount: 0,
+        retainsEdgeIdx: [0, 1],
+        retainsNodeIdx: [320, 49],
+        selfSize: 0,
+        traceNodeId: 0,
+        type: 34,
+        edges: [
+          {
+            edgeIndex: 5,
+            edgeOldIndex: 31,
+            fromNodeId: 1,
+            nameOrIndex: '-test-',
+            nodeId: 425,
+            retainEdge: [],
+            retainsNode: [],
+            toNodeId: 1134,
+            type: 25,
+          },
+          {
+            edgeIndex: 54,
+            edgeOldIndex: 35,
+            fromNodeId: 3,
+            nameOrIndex: '-test-',
+            nodeId: 9800,
+            retainEdge: [],
+            retainsNode: [],
+            toNodeId: 2311,
+            type: 5,
+          },
+        ],
+      },
+    },
+    snapshotStruct: {
+      traceNodes: [
+        {
+          fileId: 0,
+          functionIndex: 0,
+          parentsId: [1, 2, 3],
+          parents: [],
+          combineId: set,
+          status: true,
+          id: '12',
+          name: 'name1',
+          scriptName: 'scriptName1',
+          scriptId: 1,
+          line: 1,
+          column: 1,
+          count: 1,
+          size: 1,
+          liveCount: 1,
+          liveSize: 1,
+          hasParent: true,
+          clone: () => {
+            return {
+              fileId: 0,
+              functionIndex: 0,
+              parentsId: [1, 2, 3],
+              parents: [],
+              combineId: set,
+              status: true,
+              id: '12',
+              name: 'name1',
+              scriptName: 'scriptName1',
+              scriptId: 1,
+              line: 1,
+              column: 1,
+              count: 1,
+              size: 1,
+              liveCount: 1,
+              liveSize: 1,
+              hasParent: true,
+            };
+          },
+        },
+        {
+          fileId: 65,
+          functionIndex: 6,
+          parentsId: [1, 65, 3],
+          parents: [],
+          combineId: set,
+          status: true,
+          id: '45',
+          name: 'name6',
+          scriptName: 'scriptName6',
+          scriptId: 1,
+          line: 64,
+          column: 65,
+          count: 66,
+          size: 6,
+          liveCount: 1,
+          liveSize: 120,
+          hasParent: true,
+          clone: () => {
+            return {
+              fileId: 21,
+              functionIndex: 33,
+              parentsId: [54, 23],
+              parents: [],
+              combineId: set,
+              status: true,
+              id: '12',
+              name: 'name7',
+              scriptName: 'scriptName7',
+              scriptId: 321,
+              line: 341,
+              column: 123,
+              count: 21,
+              size: 134,
+              liveCount: 16,
+              liveSize: 109,
+              hasParent: true,
+            };
+          },
         },
-        snapshotStruct: {
-            traceNodes: [
-                {
-                    fileId: 0,
-                    functionIndex: 0,
-                    parentsId: [1, 2, 3],
-                    parents: [],
-                    combineId: set,
-                    status: true,
-                    id: '12',
-                    name: 'name1',
-                    scriptName: 'scriptName1',
-                    scriptId: 1,
-                    line: 1,
-                    column: 1,
-                    count: 1,
-                    size: 1,
-                    liveCount: 1,
-                    liveSize: 1,
-                    hasParent: true,
-                    clone: () => {
-                        return {
-                            fileId: 0,
-                            functionIndex: 0,
-                            parentsId: [1, 2, 3],
-                            parents: [],
-                            combineId: set,
-                            status: true,
-                            id: '12',
-                            name: 'name1',
-                            scriptName: 'scriptName1',
-                            scriptId: 1,
-                            line: 1,
-                            column: 1,
-                            count: 1,
-                            size: 1,
-                            liveCount: 1,
-                            liveSize: 1,
-                            hasParent: true,
-                        };
-                    },
-                },
-                {
-                    fileId: 0,
-                    functionIndex: 0,
-                    parentsId: [1, 2, 3],
-                    parents: [],
-                    combineId: set,
-                    status: true,
-                    id: '12',
-                    name: 'name1',
-                    scriptName: 'scriptName1',
-                    scriptId: 1,
-                    line: 1,
-                    column: 1,
-                    count: 1,
-                    size: 1,
-                    liveCount: 1,
-                    liveSize: 1,
-                    hasParent: true,
-                    clone: () => {
-                        return {
-                            fileId: 0,
-                            functionIndex: 0,
-                            parentsId: [1, 2, 3],
-                            parents: [],
-                            combineId: set,
-                            status: true,
-                            id: '12',
-                            name: 'name1',
-                            scriptName: 'scriptName1',
-                            scriptId: 1,
-                            line: 1,
-                            column: 1,
-                            count: 1,
-                            size: 1,
-                            liveCount: 1,
-                            liveSize: 1,
-                            hasParent: true,
-                        };
-                    },
-                },
-                {
-                    fileId: 0,
-                    functionIndex: 22,
-                    parentsId: [1, 2, 3],
-                    parents: [],
-                    combineId: set,
-                    status: true,
-                    id: '12',
-                    name: 'name1',
-                    scriptName: 'scriptName1',
-                    scriptId: 1,
-                    line: 1,
-                    column: 1,
-                    count: 1,
-                    size: 1,
-                    liveCount: 1,
-                    liveSize: 1,
-                    hasParent: true,
-                    clone: () => {
-                        return {
-                            fileId: 0,
-                            functionIndex: 0,
-                            parentsId: [1, 2, 3],
-                            parents: [],
-                            combineId: set,
-                            status: true,
-                            id: '12',
-                            name: 'name1',
-                            scriptName: 'scriptName1',
-                            scriptId: 1,
-                            line: 1,
-                            column: 1,
-                            count: 1,
-                            size: 1,
-                            liveCount: 1,
-                            liveSize: 1,
-                            hasParent: true,
-                        };
-                    },
-                },
-            ],
-            nodeMap: new Map(),
-            nodeCount: 1,
-            edges: [
-                {
-                    edgeIndex: 0,
-                    edgeOldIndex: 0,
-                    fromNodeId: 1,
-                    nameOrIndex: '-test-',
-                    nodeId: 152376,
-                    retainEdge: [],
-                    retainsNode: [],
-                    toNodeId: 43537,
-                    type: 5,
-                },
-                {
-                    edgeIndex: 1,
-                    edgeOldIndex: 3,
-                    fromNodeId: 1,
-                    nameOrIndex: '-test-',
-                    nodeId: 155414,
-                    retainEdge: [],
-                    retainsNode: [],
-                    toNodeId: 44405,
-                    type: 5,
-                },
-            ],
-            samples: [],
-            functionInfos: [1],
+        {
+          fileId: 23,
+          functionIndex: 1,
+          parentsId: [111, 24, 3],
+          parents: [],
+          combineId: set,
+          status: true,
+          id: '4345',
+          name: 'name7',
+          scriptName: 'scriptName7',
+          scriptId: 421,
+          line: 13,
+          column: 51,
+          count: 61,
+          size: 165,
+          liveCount: 10,
+          liveSize: 651,
+          hasParent: true,
+          clone: () => {
+            return {
+              fileId: 3,
+              functionIndex: 57,
+              parentsId: [1, 87, 31],
+              parents: [],
+              combineId: set,
+              status: true,
+              id: '251',
+              name: 'name8',
+              scriptName: 'scriptName8',
+              scriptId: 91,
+              line: 189,
+              column: 891,
+              count: 81,
+              size: 14,
+              liveCount: 431,
+              liveSize: 21,
+              hasParent: true,
+            };
+          },
         },
-    };
-    it('AllocationTest01', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let nodeById = allocationLogic.getNodeById(12);
-        expect(nodeById).not.toBe(null);
-    });
+      ],
+      nodeMap: new Map(),
+      nodeCount: 1,
+      edges: [
+        {
+          edgeIndex: 6,
+          edgeOldIndex: 0,
+          fromNodeId: 1,
+          nameOrIndex: '-test-',
+          nodeId: 67,
+          retainEdge: [],
+          retainsNode: [],
+          toNodeId: 77,
+          type: 61,
+        },
+        {
+          edgeIndex: 16,
+          edgeOldIndex: 37,
+          fromNodeId: 16,
+          nameOrIndex: '-test-',
+          nodeId: 67,
+          retainEdge: [],
+          retainsNode: [],
+          toNodeId: 876,
+          type: 8,
+        },
+      ],
+      samples: [],
+      functionInfos: [1],
+    },
+  };
+  it('AllocationTest01', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let nodeById = allocationLogic.getNodeById(12);
+    expect(nodeById).not.toBe();
+  });
 
-    it('AllocationTest02', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let nodeById = allocationLogic.getNodeById(11);
-        expect(nodeById).toBe(null);
-    });
-    it('AllocationTest03', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let nodeStack = allocationLogic.getNodeStack(12);
-        expect(nodeStack.length).toBe(1);
-    });
-    it('AllocationTest04', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let nodeStack = allocationLogic.getFunctionNodeIds(12);
-        expect(nodeStack).not.toBe([]);
-    });
-    it('AllocationTest05', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let parentData = data.snapshotStruct.traceNodes[0];
-        let nodeStack = allocationLogic.getParent(parentData);
-        expect(nodeStack).toBeUndefined();
-    });
-    it('AllocationTest06', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let parentData = {
-            fileId: 0,
-            functionIndex: 0,
-            parentsId: [1],
-            parents: [],
-            combineId: set,
-            status: true,
-            id: '12',
-            name: 'name1',
-            scriptName: 'scriptName1',
-            scriptId: 1,
-            line: 1,
-            column: 1,
-            count: 1,
-            size: 1,
-            liveCount: 1,
-            liveSize: 1,
-            hasParent: true,
-        };
-        let nodeStack = allocationLogic.getParent(parentData);
-        expect(nodeStack).toBeUndefined();
-    });
+  it('AllocationTest02', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let nodeById = allocationLogic.getNodeById(11);
+    expect(nodeById).toBe(null);
+  });
+  it('AllocationTest03', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let nodeStack = allocationLogic.getNodeStack(12);
+    expect(nodeStack.length).toBe(1);
+  });
+  it('AllocationTest04', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let nodeStack = allocationLogic.getFunctionNodeIds(12);
+    expect(nodeStack).not.toBe([]);
+  });
+  it('AllocationTest05', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let parentData = data.snapshotStruct.traceNodes[0];
+    let nodeStack = allocationLogic.getParent(parentData);
+    expect(nodeStack).toBeUndefined();
+  });
+  it('AllocationTest06', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let parentData = {
+      fileId: 23,
+      functionIndex: 35,
+      parentsId: [1],
+      parents: [],
+      combineId: set,
+      status: true,
+      id: '2450',
+      name: 'name9',
+      scriptName: 'scriptName9',
+      scriptId: 981,
+      line: 8341,
+      column: 21,
+      count: 211,
+      size: 134,
+      liveCount: 541,
+      liveSize: 176,
+      hasParent: true,
+    };
+    let nodeStack = allocationLogic.getParent(parentData);
+    expect(nodeStack).toBeUndefined();
+  });
 
-    it('AllocationTest07', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let nodeStack = allocationLogic.getFunctionList();
-        expect(nodeStack.length).not.toEqual(0);
-    });
+  it('AllocationTest07', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let nodeStack = allocationLogic.getFunctionList();
+    expect(nodeStack.length).not.toEqual(0);
+  });
 
-    it('AllocationTest08', () => {
-        let allocationLogic = new AllocationLogic(data);
-        let parentData = data.snapshotStruct.traceNodes[0];
-        let nodeStack = allocationLogic.getFunctionStack(parentData, []);
-        expect(nodeStack).toBeUndefined();
-    });
+  it('AllocationTest08', () => {
+    let allocationLogic = new AllocationLogic(data);
+    let parentData = data.snapshotStruct.traceNodes[0];
+    let nodeStack = allocationLogic.getFunctionStack(parentData, []);
+    expect(nodeStack).toBeUndefined();
+  });
 });
diff --git a/ide/test/js-heap/logic/HeapLoader.test.ts b/ide/test/js-heap/logic/HeapLoader.test.ts
index 922e7c800b10ca3da734dea409bc02006125c013..e8060c1ea9c0e8d4db9f054f99671082a5c3afd0 100644
--- a/ide/test/js-heap/logic/HeapLoader.test.ts
+++ b/ide/test/js-heap/logic/HeapLoader.test.ts
@@ -1,4 +1,5 @@
 
+
 /*
  * Copyright (C) 2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -66,57 +67,57 @@ jest.mock('../../../dist/js-heap/utils/Utils.js', () => {
 
 describe('HeapLoader Test', () => {
     let rootNode = {
-        detachedness: 0,
+        detachedness: 7,
         displayName: '',
-        distance: 100000000,
-        edgeCount: 3575,
-        fileId: 0,
+        distance: 13200000,
+        edgeCount: 215,
+        fileId: 1,
         firstEdgeIndex: 0,
-        flag: 0,
-        id: 1,
+        flag: 1,
+        id: 24,
         name: 'Test',
         nodeIndex: 0,
         nodeOldIndex: 0,
-        retainedSize: 1898167,
+        retainedSize: 728167,
         retainsCount: 0,
-        retainsEdgeIdx: [0],
-        retainsNodeIdx: [0],
+        retainsEdgeIdx: [2],
+        retainsNodeIdx: [0,2],
         selfSize: 0,
         traceNodeId: 0,
         type: 9,
         edges: [
             {
-                edgeIndex: 0,
-                edgeOldIndex: 0,
+                edgeIndex: 43,
+                edgeOldIndex: 3,
                 fromNodeId: 1,
                 nameOrIndex: '-test-',
-                nodeId: 152376,
+                nodeId: 15436,
                 retainEdge: [],
                 retainsNode: [],
-                toNodeId: 43537,
+                toNodeId: 43427,
                 type: 5,
             },
             {
-                edgeIndex: 1,
-                edgeOldIndex: 3,
-                fromNodeId: 1,
+                edgeIndex: 15,
+                edgeOldIndex: 53,
+                fromNodeId: 15,
                 nameOrIndex: '-test-',
-                nodeId: 155414,
+                nodeId: 76,
                 retainEdge: [],
                 retainsNode: [],
-                toNodeId: 44405,
+                toNodeId: 23,
                 type: 5,
             },
         ],
     };
     let data = {
-        end_ts: 88473497504466,
-        id: 0,
+        end_ts: 2206,
+        id: 29,
         isParseSuccess: true,
         name: 'Test',
         path: '',
-        pid: 4243,
-        tart_ts: 88473061693464,
+        pid: 423,
+        tart_ts: 83693464,
         type: 0,
         heapLoader: {
             rootNode: rootNode,
@@ -127,22 +128,22 @@ describe('HeapLoader Test', () => {
             nodeCount: 1,
             edges: [
                 {
-                    edgeIndex: 0,
+                    edgeIndex: 1,
                     edgeOldIndex: 0,
-                    fromNodeId: 1,
-                    nameOrIndex: '-test-',
-                    nodeId: 152376,
+                    fromNodeId: 5,
+                    nameOrIndex: 152,
+                    nodeId: 1436,
                     retainEdge: [],
                     retainsNode: [],
-                    toNodeId: 43537,
-                    type: 5,
+                    toNodeId: 4347,
+                    type: 15,
                 },
                 {
-                    edgeIndex: 1,
-                    edgeOldIndex: 3,
+                    edgeIndex: 31,
+                    edgeOldIndex: 33,
                     fromNodeId: 1,
-                    nameOrIndex: '-test-',
-                    nodeId: 155414,
+                    nameOrIndex: 958,
+                    nodeId: 344,
                     retainEdge: [],
                     retainsNode: [],
                     toNodeId: 44405,
@@ -154,13 +155,13 @@ describe('HeapLoader Test', () => {
     };
 
     let item = {
-        addedCount: 648,
-        addedIndx: [319, 326],
-        addedSize: 38936,
+        addedCount: 1,
+        addedIndx: [30, 326],
+        addedSize: 316,
         childCount: 1296,
         children: [],
         classChildren: [],
-        deletedIdx: [325, 338],
+        deletedIdx: [9, 338],
         deltaCount: 0,
         deltaSize: -16,
         distance: -1,
@@ -168,24 +169,24 @@ describe('HeapLoader Test', () => {
         edgeName: '',
         fileId: 0,
         hasNext: true,
-        id: -1,
+        id: 30,
         index: 0,
         isAdd: false,
         isHover: false,
         isSelected: false,
         nextId: [],
-        nodeName: 'nodeName',
-        objectName: 'objectName',
-        removedCount: 648,
-        removedSize: 38952,
-        retainedSize: -1,
+        nodeName: 'SourceTextModule',
+        objectName: 'SourceTextModule@521',
+        removedCount: 28,
+        removedSize: 332,
+        retainedSize: 32,
         retains: [],
-        shallowSize: -1,
+        shallowSize: 21,
         showBox: false,
         showCut: false,
         status: true,
-        targetFileId: 1,
-        traceNodeId: -1,
+        targetFileId: 211,
+        traceNodeId: 34,
         type: 4,
     };
 
diff --git a/ide/test/trace/SpApplication.test.ts b/ide/test/trace/SpApplication.test.ts
index 6ab32f8b5c9f92da17abcca1fc2bb6ff6c391ae5..29dab57f4e4e06680b629e5c8f52dd957a4809fb 100644
--- a/ide/test/trace/SpApplication.test.ts
+++ b/ide/test/trace/SpApplication.test.ts
@@ -22,13 +22,10 @@ const intersectionObserverMock = () => ({
     observe: () => null,
 });
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
-
 // @ts-ignore
 import { SpApplication } from '../../dist/trace/SpApplication.js';
-
 // @ts-ignore
-window.ResizeObserver =
-    window.ResizeObserver ||
+window.ResizeObserver = window.ResizeObserver ||
     jest.fn().mockImplementation(() => ({
         disconnect: jest.fn(),
         observe: jest.fn(),
@@ -140,244 +137,10 @@ describe('spApplication Test', () => {
         expect(spApplication.showContent).toBeFalsy();
     });
 
-    it('spApplicationTest25', function () {
-        let spApplication = document.querySelector('#sss') as SpApplication;
-        expect(spApplication.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-
-        }
-        .dark{
-        --dark-background: #272C34;
-        --dark-background1: #424851;
-        --dark-background2: #262f3c;
-        --dark-background3: #292D33;
-        --dark-background4: #323841;
-        --dark-background5: #333840;
-        --dark-background6: rgba(82,145,255,0.2);
-        --dark-background7: #494d52;
-        --dark-background8: #5291FF;
-        --dark-color: rgba(255,255,255,0.6);
-        --dark-color1: rgba(255,255,255,0.86);
-        --dark-color2: rgba(255,255,255,0.9);
-        --dark-border: #474F59;
-        --dark-color3:#4694C2;
-        --dark-color4:#5AADA0;
-        --dark-border1: #454E5A;
-        --bark-expansion:#0076FF;
-        --bark-prompt:#9e9e9e;
-        --dark-icon:#adafb3;
-        --dark-img: url('img/dark_pic.png');
-            background: #272C34;
-            color: #FFFFFF;
-        }
-        .root{
-            display: grid;
-            grid-template-rows: min-content 1fr;
-            grid-template-columns: min-content 1fr;
-            grid-template-areas: 'm s'
-                                 'm b';
-            height: 100vh;
-            width: 100vw;
-        }
-        .filedrag::after {
-             content: 'Drop the trace file to open it';
-             position: fixed;
-             z-index: 2001;
-             top: 0;
-             left: 0;
-             right: 0;
-             bottom: 0;
-             border: 5px dashed var(--dark-color1,#404854);
-             text-align: center;
-             font-size: 3rem;
-             line-height: 100vh;
-             background: rgba(255, 255, 255, 0.5);
-        }
-        .menu{
-            grid-area: m;
-            /*transition: all 0.2s;*/
-            box-shadow: 4px 0px 20px rgba(0,0,0,0.05);
-            z-index: 2000;
-        }
-        .search-container{
-            z-index: 10;
-            position: relative;
-        }
-        .progress{
-            bottom: 0;
-            position: absolute;
-            height: 1px;
-            left: 0;
-            right: 0;
-        }
-        :host(:not([search])) .search-container  {
-           display: none;
-        }
-
-        :host(:not([search])) .search-container .search  {
-            background-color: var(--dark-background5,#F6F6F6);
-        }
-        .search{
-            grid-area: s;
-            background-color: var(--dark-background,#FFFFFF);
-            height: 48px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-        }
-        .search .search-bg{
-            background-color: var(--dark-background5,#fff);
-            border-radius: 40px;
-            padding: 3px 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: 1px solid var(--dark-border,#c5c5c5);
-        }
-        .search input{
-            outline: none;
-            border: 0px;
-            background-color: transparent;
-            font-size: inherit;
-            color: var(--dark-color,#666666);
-            width: 30vw;
-            height: auto;
-            vertical-align:middle;
-            line-height:inherit;
-            height:inherit;
-            padding: 6px 6px 6px 6px};
-            max-height: inherit;
-            box-sizing: border-box;
-
-        }
-        ::placeholder { /* CSS 3 標準 */
-          color: #b5b7ba;
-          font-size: 1em;
-        }
-        .search input::placeholder {
-          color: #b5b7ba;
-          font-size: 1em;
-        }
-        .content{
-            grid-area: b;
-            background-color: #ffffff;
-            height: 100%;
-            overflow: auto;
-            position:relative;
-        }
-        .sheet{
-
-        }
-        .sidebar-button{
-            position: absolute;
-            top: 0;
-            left: 0;
-            background-color: var(--dark-background1,#FFFFFF);
-            height: 100%;
-            border-radius: 0 5px 5px 0;
-            width: 48px;
-            display: flex;
-            align-content: center;
-            justify-content: center;
-            cursor: pointer;
-        }
-        :host{
-            font-size: inherit;
-            display: inline-block;
-            transition: .3s;
-         }
-         :host([spin]){
-            animation: rotate 1.75s linear infinite;
-         }
-         @keyframes rotate {
-            to{
-                transform: rotate(360deg);
-            }
-         }
-         .icon{
-            display: block;
-            width: 1em;
-            height: 1em;
-            margin: auto;
-            fill: currentColor;
-            overflow: hidden;
-            font-size: 20px;
-            color: var(--dark-color1,#47A7E0);
-         }
-         .chart-filter {
-            visibility: hidden;
-            z-index: -1;
-        }
-        
-        :host([chart_filter]) .chart-filter {
-            display: grid;
-            grid-template-rows: min-content min-content min-content max-content auto;
-            overflow-y: clip;
-            height: 99%;
-            visibility: visible;
-            position: absolute;
-            width: 40%;
-            right: 0;
-            z-index: 1001;
-            top: 0;
-        }
-        .filter-config {
-            opacity: 1;
-            visibility: hidden;
-        }
-        .filter-config:hover {
-            opacity: 0.7;
-        }
-        </style>
-        <div class="root">
-            <lit-main-menu id="main-menu" class="menu" data=''></lit-main-menu>
-            <div class="search-container">
-                <div class="search" style="position: relative;">
-                    <div class="sidebar-button" style="width: 0">
-                        <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 1024 1024">
-                             <use id="use" xlink:href="./base-ui/icon.svg#icon-menu"></use>
-                        </svg>
-                    </div>
-                    <lit-search id="lit-search"></lit-search>
-                    <lit-search id="lit-record-search"></lit-search>
-                </div>
-                <img class="filter-config" title="Display Template" src="img/config_filter.png" style="display: block;text-align: right;position: absolute;right: 1.2em;cursor: pointer;top: 20px">
-                <lit-progress-bar class="progress"></lit-progress-bar>
-            </div>
-            <div id="app-content" class="content">
-                <sp-welcome style="visibility:visible;top:0px;left:0px;position:absolute;z-index: 100" id="sp-welcome">
-                </sp-welcome>
-                <sp-system-trace style="visibility:visible;" id="sp-system-trace">
-                </sp-system-trace>
-                <sp-record-trace style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 102" id="sp-record-trace">
-                </sp-record-trace>
-                <sp-record-trace record_template='' style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 102" id="sp-record-template">
-                </sp-record-trace>
-                <sp-scheduling-analysis style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;" id="sp-scheduling-analysis"></sp-scheduling-analysis>
-                <sp-metrics style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;z-index: 97" id="sp-metrics">
-                </sp-metrics>
-                <sp-query-sql style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;z-index: 98" id="sp-query-sql">
-                </sp-query-sql>
-                <sp-info-and-stats style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0;left:0;right:0;bottom:0;position:absolute;z-index: 99" id="sp-info-and-stats">
-                </sp-info-and-stats>
-                <sp-help style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 103" id="sp-help">
-                </sp-help>
-                <sp-flags style="width:100%;height:100%;overflow:auto;visibility:hidden;top:0px;left:0px;right:0;bottom:0px;position:absolute;z-index: 104" id="sp-flags">
-                </sp-flags>
-                <trace-row-config class="chart-filter"></trace-row-config>
-            </div>
-        </div>
-        "
-`);
-    });
-
     it('spApplicationTest26', function () {
         let spApplication = document.querySelector('#sss') as SpApplication;
         spApplication.dark = false;
-        spApplication.skinChangeArray = ['item'];
+        spApplication.skinChangeArray = ['value'];
         expect(spApplication.dark).toBeFalsy();
     });
 
diff --git a/ide/test/trace/bean/AbilityMonitor.test.ts b/ide/test/trace/bean/AbilityMonitor.test.ts
index 8a57f6d5f1db712b9554beb7ff291700456607f2..2fa48dbc3252c2f968b3abe7c60150f8de1af813 100644
--- a/ide/test/trace/bean/AbilityMonitor.test.ts
+++ b/ide/test/trace/bean/AbilityMonitor.test.ts
@@ -104,123 +104,32 @@ describe('AbilityMonitor Test', () => {
       writeOutSecStr: 'writeOutSecStr',
     };
     expect(systemDiskIOSummary).not.toBeUndefined();
-    expect(systemDiskIOSummary).toMatchInlineSnapshot(
+    expect(systemDiskIOSummary).toMatchInlineSnapshot(`
 {
-  startTime: expect.any(Number),
-  startTimeStr: expect.any(String),
-  duration: expect.any(Number),
-  durationStr: expect.any(String),
-  dataRead: expect.any(Number),
-  dataReadStr: expect.any(String),
-  dataReadSec: expect.any(Number),
-  dataReadSecStr: expect.any(String),
-  dataWrite: expect.any(Number),
-  dataWriteStr: expect.any(String),
-  dataWriteSec: expect.any(Number),
-  dataWriteSecStr: expect.any(String),
-  readsIn: expect.any(Number),
-  readsInStr: expect.any(String),
-  readsInSec: expect.any(Number),
-  readsInSecStr: expect.any(String),
-  writeOut: expect.any(Number),
-  writeOutStr: expect.any(String),
-  writeOutSec: expect.any(Number),
-  writeOutSecStr: expect.any(String) }, `
-{
-  "dataRead": Any<Number>,
-  "dataReadSec": Any<Number>,
-  "dataReadSecStr": Any<String>,
-  "dataReadStr": Any<String>,
-  "dataWrite": Any<Number>,
-  "dataWriteSec": Any<Number>,
-  "dataWriteSecStr": Any<String>,
-  "dataWriteStr": Any<String>,
-  "duration": Any<Number>,
-  "durationStr": Any<String>,
-  "readsIn": Any<Number>,
-  "readsInSec": Any<Number>,
-  "readsInSecStr": Any<String>,
-  "readsInStr": Any<String>,
-  "startTime": Any<Number>,
-  "startTimeStr": Any<String>,
-  "writeOut": Any<Number>,
-  "writeOutSec": Any<Number>,
-  "writeOutSecStr": Any<String>,
-  "writeOutStr": Any<String>,
+  "dataRead": 1,
+  "dataReadSec": 1,
+  "dataReadSecStr": "dataReadSecStr",
+  "dataReadStr": "dataReadStr",
+  "dataWrite": 1,
+  "dataWriteSec": 1,
+  "dataWriteSecStr": "dataWriteSecStr",
+  "dataWriteStr": "dataWriteStr",
+  "duration": 1,
+  "durationStr": "durationStr",
+  "readsIn": 1,
+  "readsInSec": 1,
+  "readsInSecStr": "readsInSecStr",
+  "readsInStr": "readsInStr",
+  "startTime": 1,
+  "startTimeStr": "startTimeStr",
+  "writeOut": 1,
+  "writeOutSec": 1,
+  "writeOutSecStr": "writeOutSecStr",
+  "writeOutStr": "writeOutStr",
 }
 `);
   });
 
-  it('SystemCpuSummaryTest', function () {
-    systemDiskIOSummary = {
-      startTime: 1,
-      startTimeStr: 'startTimeStr',
-      duration: 1,
-      durationStr: 'durationStr',
-      dataRead: 1,
-      dataReadStr: 'dataReadStr',
-      dataReadSec: 1,
-      dataReadSecStr: 'dataReadSecStr',
-      dataWrite: 1,
-      dataWriteStr: 'dataWriteStr',
-      dataWriteSec: 1,
-      dataWriteSecStr: 'dataWriteSecStr',
-      readsIn: 1,
-      readsInStr: 'readsInStr',
-      readsInSec: 1,
-      readsInSecStr: 'readsInSecStr',
-      writeOut: 1,
-      writeOutStr: 'writeOutStr',
-      writeOutSec: 1,
-      writeOutSecStr: 'writeOutSecStr',
-    };
-    expect(systemDiskIOSummary).not.toBeUndefined();
-    expect(systemDiskIOSummary).toMatchInlineSnapshot(
-{
-  startTime: expect.any(Number),
-  startTimeStr: expect.any(String),
-  duration: expect.any(Number),
-  durationStr: expect.any(String),
-  dataRead: expect.any(Number),
-  dataReadStr: expect.any(String),
-  dataReadSec: expect.any(Number),
-  dataReadSecStr: expect.any(String),
-  dataWrite: expect.any(Number),
-  dataWriteStr: expect.any(String),
-  dataWriteSec: expect.any(Number),
-  dataWriteSecStr: expect.any(String),
-  readsIn: expect.any(Number),
-  readsInStr: expect.any(String),
-  readsInSec: expect.any(Number),
-  readsInSecStr: expect.any(String),
-  writeOut: expect.any(Number),
-  writeOutStr: expect.any(String),
-  writeOutSec: expect.any(Number),
-  writeOutSecStr: expect.any(String) }, `
-{
-  "dataRead": Any<Number>,
-  "dataReadSec": Any<Number>,
-  "dataReadSecStr": Any<String>,
-  "dataReadStr": Any<String>,
-  "dataWrite": Any<Number>,
-  "dataWriteSec": Any<Number>,
-  "dataWriteSecStr": Any<String>,
-  "dataWriteStr": Any<String>,
-  "duration": Any<Number>,
-  "durationStr": Any<String>,
-  "readsIn": Any<Number>,
-  "readsInSec": Any<Number>,
-  "readsInSecStr": Any<String>,
-  "readsInStr": Any<String>,
-  "startTime": Any<Number>,
-  "startTimeStr": Any<String>,
-  "writeOut": Any<Number>,
-  "writeOutSec": Any<Number>,
-  "writeOutSecStr": Any<String>,
-  "writeOutStr": Any<String>,
-}
-`);
-  });
 
   it('ProcessHistoryTest', function () {
     processHistory = {
diff --git a/ide/test/trace/bean/CpuFreqStruct.test.ts b/ide/test/trace/bean/CpuFreqStruct.test.ts
index 5cbeb2f173842aad85c2dfbff50a9f07f550db71..b9aedf224c3358f7d9332074abffb21eff4f30d6 100644
--- a/ide/test/trace/bean/CpuFreqStruct.test.ts
+++ b/ide/test/trace/bean/CpuFreqStruct.test.ts
@@ -25,41 +25,38 @@ describe('CpuFreqStruct Test', () => {
   CpuFreqStruct.hoverCpuFreqStruct = void 0;
   const data = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 244,
+      y: 466,
+      width: 34,
+      height: 600,
     },
-    startNS: 200,
-    value: 50,
+    startNS: 400,
+    value: 43,
   };
 
   const dataSource = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 35,
+      y: 66,
+      width: 560,
+      height: 600,
     },
-    value: 50,
-    maxFreq: 50,
+    value: 60,
+    maxFreq: 88,
   };
 
   it('CpuFreqStructTest01', function () {
     expect(CpuFreqStruct.draw(ctx, data)).toBeUndefined();
-    expect(data).toMatchInlineSnapshot(
-{
-  startNS: expect.any(Number),
-  value: expect.any(Number) }, `
+    expect(data).toMatchInlineSnapshot(`
 {
   "frame": {
-    "height": 100,
-    "width": 100,
-    "x": 20,
-    "y": 20,
+    "height": 600,
+    "width": 34,
+    "x": 244,
+    "y": 466,
   },
-  "startNS": Any<Number>,
-  "value": Any<Number>,
+  "startNS": 400,
+  "value": 43,
 }
 `);
   });
diff --git a/ide/test/trace/bean/CpuStruct.test.ts b/ide/test/trace/bean/CpuStruct.test.ts
index 84d0da4c7249d08b2009caed16de70b5bda51140..da12317c20c6d5fa45a6f5e4c551df9cc0820469 100644
--- a/ide/test/trace/bean/CpuStruct.test.ts
+++ b/ide/test/trace/bean/CpuStruct.test.ts
@@ -25,40 +25,37 @@ describe('CpuStruct Test', () => {
 
   const data = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 653,
+      y: 109,
+      width: 654,
+      height: 332,
     },
     startNS: 200,
     value: 50,
   };
   const data1 = {
     frame: {
-      x: 100,
-      y: 100,
-      width: 10,
-      height: 10,
+      x: 23,
+      y: 9,
+      width: 90,
+      height: 60,
     },
-    startNS: 1000,
-    value: 500,
+    startNS: 132,
+    value: 980,
   };
 
   it('CpuStructTest01', function () {
     expect(CpuStruct.draw(ctx, data)).toBeUndefined();
-    expect(data).toMatchInlineSnapshot(
-{
-  startNS: expect.any(Number),
-  value: expect.any(Number) }, `
+    expect(data).toMatchInlineSnapshot(`
 {
   "frame": {
-    "height": 100,
-    "width": 100,
-    "x": 20,
-    "y": 20,
+    "height": 332,
+    "width": 654,
+    "x": 653,
+    "y": 109,
   },
-  "startNS": Any<Number>,
-  "value": Any<Number>,
+  "startNS": 200,
+  "value": 50,
 }
 `);
   });
@@ -77,39 +74,33 @@ describe('CpuStruct Test', () => {
 
   it('CpuStructTest05', function () {
     expect(CpuStruct.draw(ctx, data1)).toBeUndefined();
-    expect(data1).toMatchInlineSnapshot(
-{
-  startNS: expect.any(Number),
-  value: expect.any(Number) }, `
+    expect(data1).toMatchInlineSnapshot(`
 {
   "frame": {
-    "height": 10,
-    "width": 10,
-    "x": 100,
-    "y": 100,
+    "height": 60,
+    "width": 90,
+    "x": 23,
+    "y": 9,
   },
-  "startNS": Any<Number>,
-  "value": Any<Number>,
+  "startNS": 132,
+  "value": 980,
 }
 `);
   });
 
   it('CpuStructTest06', function () {
-    expect(CpuStruct.equals({}, data)).toBeTruthy();
-    expect(CpuStruct.draw(ctx, data1)).toBeUndefined();
-    expect(data1).toMatchInlineSnapshot(
-{
-  startNS: expect.any(Number),
-  value: expect.any(Number) }, `
+    expect(CpuStruct.equals({}, data1)).toBeTruthy();
+    expect(CpuStruct.draw(ctx, data)).toBeUndefined();
+    expect(data).toMatchInlineSnapshot(`
 {
   "frame": {
-    "height": 10,
-    "width": 10,
-    "x": 100,
-    "y": 100,
+    "height": 332,
+    "width": 654,
+    "x": 653,
+    "y": 109,
   },
-  "startNS": Any<Number>,
-  "value": Any<Number>,
+  "startNS": 200,
+  "value": 50,
 }
 `);
   });
diff --git a/ide/test/trace/bean/FpsStruct.test.ts b/ide/test/trace/bean/FpsStruct.test.ts
index 1176b50e8666f9d5426bd6a7be188716a87f2dd1..f1dc2d5eff021b4de7ef12e81d20cf6676e2662b 100644
--- a/ide/test/trace/bean/FpsStruct.test.ts
+++ b/ide/test/trace/bean/FpsStruct.test.ts
@@ -26,14 +26,14 @@ jest.mock('../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
 
 describe('FpsStruct Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = 4;
+  canvas.height = 2;
   const ctx = canvas.getContext('2d');
 
   const data = {
     frame: {
-      x: 20,
-      y: 20,
+      x: 201,
+      y: 202,
       width: 100,
       height: 100,
     },
diff --git a/ide/test/trace/bean/HeapStruct.test.ts b/ide/test/trace/bean/HeapStruct.test.ts
index dc6b3174d3dace635f291bdde55f30b6c01dbcbf..9cdb6463cf0cd02174a1be67164500a12d87eba3 100644
--- a/ide/test/trace/bean/HeapStruct.test.ts
+++ b/ide/test/trace/bean/HeapStruct.test.ts
@@ -22,31 +22,31 @@ import { HeapStruct } from '../../../dist/trace/bean/HeapStruct.js';
 
 describe('HeapStruct Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = 5;
+  canvas.height = 3;
   const ctx = canvas.getContext('2d');
 
   const dataSource = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 15,
+      y: 53,
+      width: 33,
+      height: 33,
     },
-    value: 50,
-    maxHeapSize: 50,
-    heapsize: 10,
+    value: 9,
+    maxHeapSize: 3,
+    heapsize: 98,
   };
 
   const reachData = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 256,
+      y: 230,
+      width: 322,
+      height: 431,
     },
-    value: 50,
-    startTime: 1,
+    value: 150,
+    startTime: 3461,
   };
 
   const nodeSource = {
diff --git a/ide/test/trace/bean/ProcessMemStruct.test.ts b/ide/test/trace/bean/ProcessMemStruct.test.ts
index 38a8fd976e39618951ee4649621001bfd315e8bf..9fd3e295877b74f980f3049c0af11c5f7f5d1552 100644
--- a/ide/test/trace/bean/ProcessMemStruct.test.ts
+++ b/ide/test/trace/bean/ProcessMemStruct.test.ts
@@ -18,19 +18,19 @@ import { ProcessMemStruct } from '../../../dist/trace/bean/ProcessMemStruct.js';
 
 describe('ProcessMemStruct Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = 2;
+  canvas.height = 3;
   const ctx = canvas.getContext('2d');
 
   const data = {
     frame: {
-      x: 20,
+      x: 43,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 240,
+      height: 140,
     },
-    startNS: 200,
-    value: 50,
+    startNS: 243,
+    value: 4,
   };
   it('ProcessMemStructTest01', function () {
     expect(ProcessMemStruct.draw(ctx, data)).toBeUndefined();
diff --git a/ide/test/trace/bean/ProcessStruct.test.ts b/ide/test/trace/bean/ProcessStruct.test.ts
index c07589cf07b304099ff809fa79fff434562abc36..abc055c7b902f60999681cb44540bb05ed4f2cb9 100644
--- a/ide/test/trace/bean/ProcessStruct.test.ts
+++ b/ide/test/trace/bean/ProcessStruct.test.ts
@@ -26,19 +26,19 @@ jest.mock('../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
 
 describe('ProcessStruct Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
+  canvas.width = 2;
   canvas.height = 1;
   const ctx = canvas.getContext('2d');
 
   const data = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 7,
+      y: 9,
+      width: 80,
+      height: 78,
     },
-    startNS: 200,
-    value: 50,
+    startNS: 870,
+    value: 9,
   };
   it('ProcessStructTest01', function () {
     expect(ProcessStruct.draw(ctx, data)).toBeUndefined();
diff --git a/ide/test/trace/bean/StateProcessThread.test.ts b/ide/test/trace/bean/StateProcessThread.test.ts
index 3b66d46f431a6959808aed525dc36dd81115f0ba..3789e70c6a887cab3a6323c6f8214a7dfe28f200 100644
--- a/ide/test/trace/bean/StateProcessThread.test.ts
+++ b/ide/test/trace/bean/StateProcessThread.test.ts
@@ -18,9 +18,6 @@ import {
   StateProcessThread,
   SPTChild,
   SPT,
-  ThreadState,
-  ThreadProcess,
-  SptSlice,
 } from '../../../dist/trace/bean/StateProcessThread.js';
 
 describe('StateProcessThread Test', () => {
@@ -180,89 +177,4 @@ describe('StateProcessThread Test', () => {
 `
     );
   });
-
-    it('ThreadStateTest04', function () {
-        let threadState = new ThreadState();
-        threadState = {
-            itid: 0,
-            state: 'state',
-            dur: 0,
-            ts: 0,
-            end_ts: 0,
-            start_ts: 0,
-            cpu: 0,
-        };
-        expect(threadState).not.toBeUndefined();
-        expect(threadState).toMatchInlineSnapshot(
-{
-  itid: expect.any(Number),
-  state: expect.any(String),
-  dur: expect.any(Number),
-  ts: expect.any(Number),
-  end_ts: expect.any(Number),
-  start_ts: expect.any(Number),
-  cpu: expect.any(Number) }, `
-{
-  "cpu": Any<Number>,
-  "dur": Any<Number>,
-  "end_ts": Any<Number>,
-  "itid": Any<Number>,
-  "start_ts": Any<Number>,
-  "state": Any<String>,
-  "ts": Any<Number>,
-}
-`
-    );
-  });
-
-    it('ThreadProcessTest05', function () {
-        let threadProcess = new ThreadProcess();
-        threadProcess = {
-            id: 0,
-            threadId: 0,
-            thread: 'thread',
-            processId: 0,
-            process: 'process',
-        };
-        expect(threadProcess).not.toBeUndefined();
-        expect(threadProcess).toMatchInlineSnapshot(
-{
-  id: expect.any(Number),
-  threadId: expect.any(Number),
-  thread: expect.any(String),
-  processId: expect.any(Number),
-  process: expect.any(String) }, `
-{
-  "id": Any<Number>,
-  "process": Any<String>,
-  "processId": Any<Number>,
-  "thread": Any<String>,
-  "threadId": Any<Number>,
-}
-`
-    );
-  });
-
-    it('SptSliceTest06', function () {
-        let sptSlice = new SptSlice();
-        sptSlice = {
-            itid: 0,
-            ts: 0,
-            priority: 0,
-        };
-        expect(sptSlice).not.toBeUndefined();
-        expect(sptSlice).toMatchInlineSnapshot(
-{
-  itid: expect.any(Number),
-  ts: expect.any(Number),
-  priority: expect.any(Number) }, `
-{
-  "itid": Any<Number>,
-  "priority": Any<Number>,
-  "ts": Any<Number>,
-}
-`
-    );
-  });
-
 });
diff --git a/ide/test/trace/bean/ThreadStruct.test.ts b/ide/test/trace/bean/ThreadStruct.test.ts
index 92925b1d71e2a62f0c017cac787c642419e8df33..b7e8c3a87ff45d232becf9c0a0de130477642bf8 100644
--- a/ide/test/trace/bean/ThreadStruct.test.ts
+++ b/ide/test/trace/bean/ThreadStruct.test.ts
@@ -21,17 +21,17 @@ jest.mock('../../../dist/trace/component/trace/base/TraceRow.js', () => {
 
 describe('ThreadStruct Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = 18;
+  canvas.height = 18;
   const ctx = canvas.getContext('2d');
   const dataSource = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 55,
+      y: 55,
+      width: 32,
+      height: 111,
     },
-    startNS: 200,
+    startNS: 2400,
     state: '',
   };
   const equalsData = {
diff --git a/ide/test/trace/component/SpInfoAndStas.test.ts b/ide/test/trace/component/SpInfoAndStas.test.ts
index 8e5320aeb284c02da4c5c3ac13fc173a81111ceb..9b962834f389f07bdcf5f8b23247e3164718fd97 100644
--- a/ide/test/trace/component/SpInfoAndStas.test.ts
+++ b/ide/test/trace/component/SpInfoAndStas.test.ts
@@ -57,130 +57,6 @@ describe('SpInfoAndStasTest', () => {
     expect(spInfoAndStats.attributeChangedCallback([], [], [])).toBeUndefined();
   });
 
-  it('SpInfoAndStasTest05', function () {
-    expect(spInfoAndStats.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            :host{
-              width: 100%;
-              background-color: var(--dark-background5,#F6F6F6);
-              margin: 0;
-              padding: 0;
-            }
-            .info-stats{
-              display: flex;
-              flex-direction: column;
-              background-color: var(--dark-background5,#F6F6F6);
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              grid-row-gap: 30px;
-            }
-            .metadata{
-              width: 90%;
-              color: #121212;
-              padding: 1% 2% 0 2%;
-              margin: 1% 2.5% 0 2.5%;
-              border-radius: 16px;
-              background-color: var(--dark-background3,#FFFFFF);
-              position: relative;
-            }
-            #metaData-table{
-              background-color: var(--dark-background5,#F6F6F6);
-              margin-left: 10px;
-              min-height: inherit;
-              max-height: inherit;
-              padding: 10px;
-              overflow: visible;
-              width: auto;
-            }
-            #stats-table{
-              margin-bottom: 2%;
-              margin-left: 10px;
-              padding: 10px;
-              overflow: visible;
-              width: auto;
-            }
-            #dataValueResult{
-              overflow-y: auto;
-              background-color: var(--dark-background5,#F6F6F6);
-              border-radius: 16px;
-              min-height: inherit;
-              max-height: inherit;
-              margin-bottom: 1%;
-            }
-            
-            #dataKeyResult{
-              overflow-y: auto;
-              background-color: var(--dark-background5,#F6F6F6);
-              border-radius: 16px;
-              min-height: inherit;
-              max-height: inherit;
-              margin-bottom: 2%;
-            }
-            p{
-              display: table-cell;
-              padding: 7px 10px 20px 10px;
-              color: #999999;
-              font-size:14px;
-              line-height: 20px;
-              font-weight: 400;
-              text-align: left;
-            }
-            .stats{
-              flex-grow: 1;
-              height: min-content;
-              margin-bottom: 1%;
-              max-height: 37vh;
-              min-height: inherit;
-              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;
-            }
-        </style>
-        <div class="info-stats">
-            <div class="metadata info">
-                <p>System info and metadata</p>
-                <div id="dataKeyResult">
-                    <lit-table id="metaData-table" hideDownload>
-                            <lit-table-column title="name" data-index="name" key="name" align="flex-start">
-                            </lit-table-column>
-                            <lit-table-column title="value" data-index="value" key="value" align="flex-start">
-                            </lit-table-column>
-                    </lit-table>
-                </div>
-                <lit-progress-bar class="load-metric"></lit-progress-bar>
-            </div>
-            <div class="metadata stats">
-                <p>Debugging stats</p>
-                <div id="dataValueResult">
-                    <lit-table id="stats-table" hideDownload>
-                            <lit-table-column title="name" data-index="eventName" key="eventName" align="flex-start">
-                            </lit-table-column>
-                            <lit-table-column title="value" data-index="count" key="count" align="flex-start">
-                            </lit-table-column>
-                            <lit-table-column title="type" data-index="statType" key="statType" align="flex-start">
-                            </lit-table-column>
-                    </lit-table>
-                </div>
-            </div>
-        </div>
-        "
-`);
-  });
-
   it('SpInfoAndStasTest9', function () {
     expect(spInfoAndStats.initMetricItemData()).toBeTruthy();
   });
diff --git a/ide/test/trace/component/SpMetrics.test.ts b/ide/test/trace/component/SpMetrics.test.ts
index a075ea32c5b83d8a217043cbef3ffac5d6122653..5037d5624f3286db06444627cf848a25cd47de1e 100644
--- a/ide/test/trace/component/SpMetrics.test.ts
+++ b/ide/test/trace/component/SpMetrics.test.ts
@@ -44,136 +44,6 @@ describe('SpMetrics Test', () => {
     expect(spMetrics.attributeChangedCallback('metricResult')).toBeUndefined();
   });
 
-  it('SpMetricsTest08', function () {
-    expect(spMetrics.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            width: 100%;
-            height: 100%;
-            background-color: var(--dark-background5,#F6F6F6);
-            margin: 0;
-            padding: 0;
-            font-size:16px;
-        }
-        .metric{
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: var(--dark-background5,#F6F6F6);
-        }
-        .metric-select{
-            color: #121212;
-            border-radius: 16px;
-            background-color: var(--dark-background3,#FFFFFF);
-            padding: 1% 2%;
-            margin: 2% 2.5% 0 2.5%;
-            grid-row-gap: 30px;
-        }
-        .request{
-            min-height: 15vh;
-            overflow: auto;
-            position: relative;
-        }
-        .sql-select{
-            font-family: Helvetica,serif;
-            color: var(--dark-color1,#212121);
-            font-size:0.875em;
-            line-height: 16px;
-            font-weight: 400;
-            text-align: left;
-            width: 50%;
-            height: 32px;
-            flex-wrap: wrap;
-            margin-top: 1%;
-            border: 1px solid var(--dark-color1,#4D4D4D);
-            border-radius: 16px;
-            padding: 5px 10px 5px 10px;
-            -webkit-appearance: none;
-            background: url('img/down.png') no-repeat 98% center var(--dark-background3,#FFFFFF);
-        }
-        button{
-            border-radius: 16px;
-            flex-grow: 1;
-            background-color: #0A59F7;
-            height: 32px;
-            width: 96px;
-            font-size: 0.875em;
-            color: var(--dark-background3,#FFFFFF);
-            text-align: center;
-            line-height: 20px;
-            font-weight: 400;
-            border:0 solid;
-            margin-left: 2%;
-            opacity: 0.6;
-            cursor:pointer;
-        }
-        .response{
-            flex-grow: 1;
-            margin-bottom: 1%;
-        }
-        .response-json{
-            background-color: var(--dark-background3,#FFFFFF);
-            border-radius: 16px;
-            display: table-cell;
-            font-family: Helvetica,serif;
-            color: var(--dark-color1,#212121);
-            font-size:0.875em;
-            line-height: 20px;
-            font-weight: 400;
-            text-align: left;
-            height: 90%;
-            width: 100%;
-            border: none;
-            outline:none;
-            resize:none;
-        }
-        p{
-             display: table-cell;
-             padding: 20% 0;
-             color: #999999;
-             font-size:0.875em;
-             line-height: 20px;
-             font-weight: 400;
-             text-align: left;
-             width: 100%;
-        }
-        ::-webkit-scrollbar
-        {
-          width: 8px;
-          background-color: var(--dark-background3,#FFFFFF);
-        }
-        ::-webkit-scrollbar-thumb
-        {
-          border-radius: 6px;
-          background-color: var(--dark-background7,rgba(0,0,0,0.1));
-        }
-        .sp-load-metric{
-            width: 95%;
-            bottom: 0;
-        }
-        </style>
-        <div class="metric">
-            <div class="metric-select request">
-                <p>Select a metric</p>
-                <select class="sql-select">
-                </select>
-                <button class="sql-select-button">&nbsp;&nbsp; Run &nbsp;&nbsp;</button>
-                <lit-progress-bar class="sp-load-metric"></lit-progress-bar>
-            </div>
-            <div class="metric-select response">
-                 <textarea class="response-json" readonly>
-                 </textarea>
-            </div>
-        </div>
-        "
-`);
-  });
-
   it('SpMetricsTest09', function () {
     expect(spMetrics.reset()).toBeUndefined();
   });
diff --git a/ide/test/trace/component/SpQuerySQL.test.ts b/ide/test/trace/component/SpQuerySQL.test.ts
index 22ee564716d39de015a061e04215c9bb28df4d6b..178c4790a5f624695b3ba0a27cfd39ab24a6fb3a 100644
--- a/ide/test/trace/component/SpQuerySQL.test.ts
+++ b/ide/test/trace/component/SpQuerySQL.test.ts
@@ -44,149 +44,6 @@ describe('SpQuerySQL Test', () => {
     expect(spQuerySQL.attributeChangedCallback()).toBeUndefined();
   });
 
-  it('SpQuerySQLTest04', function () {
-    expect(spQuerySQL.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-          width: 100%;
-          height: 100%;
-          font-size: 16px;
-          background-color: var(--dark-background5,#F6F6F6);
-          margin: 0;
-          padding: 0;
-        }
-        .sql-select{
-          box-sizing: border-box;
-          width: 95%;
-          font-family: Helvetica,serif;
-          font-size: inherit;
-          color: var(--dark-color1,#212121);
-          text-align: left;
-          line-height: 1.2em;
-          font-weight: 400;
-          height: 3.2em;
-          margin-left: 10px;
-          resize: vertical;
-          border-width: 2px;
-        }
-        .query{
-          display: flex;
-          flex-direction: column;
-          background-color: var(--dark-background5,#F6F6F6);
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-        .query-message{
-          background-color: var(--dark-background3,#FFFFFF);
-          padding: 1% 2%;
-          margin: 2% 2.5% 0 2.5%;
-          border-radius: 16px;
-          width: 90%;
-        }
-        .request{
-          display: flex;
-          flex-direction: column;
-          position: relative;
-        }
-        .response{
-          flex-grow: 1;
-          margin-bottom: 1%;
-          display: flex;
-          flex-direction: column;
-          min-height: inherit;
-          max-height: 70vh;
-        }
-        #dataResult{
-          flex-grow: 1;
-          overflow-y: auto;
-          overflow-x: visible;
-          margin-bottom: 1%;
-          border-radius: 16px;
-        }
-        p{
-          display: table-cell;
-          padding: 7px 10px;
-          font-size:0.875em;
-          line-height: 20px;
-          font-weight: 400;
-          text-align: left;
-        }
-        #response-json{
-          margin-top: 20px;
-          background-color: var(--dark-background5,#F6F6F6);
-          margin-left: 10px;
-          flex-grow: 1;
-          scroll-y: visible;
-        }
-        .sql-select{
-          background-color: var(--dark-background5, #F6F6F6);
-        }
-        ::-webkit-scrollbar
-        {
-          width: 8px;
-          background-color: var(--dark-background3,#FFFFFF);
-        }
-        ::-webkit-scrollbar-thumb
-        {
-          border-radius: 6px;
-          background-color: var(--dark-background7,rgba(0,0,0,0.1));
-        }
-        .load-query-sql{
-          width: 95%;
-          bottom: 0;
-        }
-        #copy-button{
-          margin-right: 10%;
-          cursor:pointer;
-          opacity: 0.6;
-        }
-        #close-button{
-          margin-right: 5%;
-          cursor:pointer;
-          opacity: 0.6;
-        }
-        .button-option{
-          border-radius: 15px;
-          background-color: #0A59F7;
-          width: 120px;
-          height: 25px;
-          font-family: Helvetica-Bold;
-          color: var(--dark-background3,#FFFFFF);
-          text-align: center;
-          line-height: 20px;
-          font-weight: 400;
-          border:0 solid;
-        }
-        .pagination-box {
-          opacity: 0;
-        }
-        </style>
-        <div class="query">
-            <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-query-sql"></lit-progress-bar>
-            </div>
-            <div class="query-message response">
-                   <div style="display: flex;justify-content: space-between">
-                       <p class="query_size" style="color: #999999">Query result - 0 counts</p>
-                       <div style="display: flex; align-items: center">
-                           <button id="copy-button" class="button-option">Copy as.tsv</button>
-                           <button id="close-button" class="button-option">Close</button>
-                        </div>
-                    </div>
-                   <div id="dataResult"></div>
-                   <pagination-box class="pagination-box"></pagination-box>
-            </div>
-        </div>
-        "
-`);
-  });
-
   it('SpQuerySQLTest005', function () {
     expect(spQuerySQL.freshTableHeadResizeStyle()).toBeUndefined();
   });
diff --git a/ide/test/trace/component/SpRecyclerSystemTrace.test.ts b/ide/test/trace/component/SpRecyclerSystemTrace.test.ts
index ba13afd1f65a423dbcac097377a891878ac7edd4..c7c85d3a149b10f1a80284a21fbdc0be5b686e85 100644
--- a/ide/test/trace/component/SpRecyclerSystemTrace.test.ts
+++ b/ide/test/trace/component/SpRecyclerSystemTrace.test.ts
@@ -112,49 +112,6 @@ describe('SpRecyclerSystemTrace Test', () => {
     expect(spRecyclerSystemTrace.loadDatabaseArrayBuffer()).toBeTruthy();
   });
 
-  it('SpRecyclerSystemTraceTest17', function () {
-    expect(spRecyclerSystemTrace.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-        .recycle-timer-shaft{
-            width: 100%;
-            z-index: 2;
-        }
-        .rows{
-            display: flex;
-            box-sizing: border-box;
-            flex-direction: column;
-            overflow-y: auto;
-            max-height: calc(100vh - 150px - 48px);
-            flex: 1;
-            width: 100%;
-        }
-        .container{
-            width: 100%;
-            box-sizing: border-box;
-            height: 100%;
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: min-content 1fr min-content;
-        }
-
-        </style>
-        <div class="container">
-            <timer-shaft-element class="recycle-timer-shaft">
-            </timer-shaft-element>
-            <trace-row-recycler-view class="rows">
-            </trace-row-recycler-view>
-            <trace-sheet class="recycle-trace-sheet" mode="hidden">
-            </trace-sheet>
-        </div>
-        "
-`);
-  });
   it('SpRecyclerSystemTraceTest18', function () {
     const newEl = 1;
     const targetEl = {
diff --git a/ide/test/trace/component/SpSystemTrace.test.ts b/ide/test/trace/component/SpSystemTrace.test.ts
index f93d437d5cbc1b1169b2322c251e53dc9b158e51..9f906685d9cb977f71f3f56bef3815b6e717c309 100644
--- a/ide/test/trace/component/SpSystemTrace.test.ts
+++ b/ide/test/trace/component/SpSystemTrace.test.ts
@@ -21,21 +21,24 @@ import { TraceRow } from '../../../dist/trace/component/trace/base/TraceRow';
 import { procedurePool } from '../../../dist/trace/database/Procedure.js';
 // @ts-ignore
 import { LitTable } from '../../../dist/base-ui/table/lit-table.js';
-jest.mock('../../../dist/base-ui/table/lit-table.js', ()=>{
+jest.mock('../../../dist/base-ui/table/lit-table.js', () => {
   return {
-    recycleDataSource: ()=>{}
-  }
-})
+    recycleDataSource: () => {},
+  };
+});
 // @ts-ignore
 import { HeapLoader } from '../../../dist/js-heap/logic/HeapLoader.js';
-jest.mock('../../../dist/js-heap/logic/HeapLoader.js', ()=>{
-  return {}
-})
+jest.mock('../../../dist/js-heap/logic/HeapLoader.js', () => {
+  return {};
+});
 // @ts-ignore
 import { NodeType } from '../../../dist/js-heap/model/DatabaseStruct.js';
-jest.mock('../../../dist/js-heap/model/DatabaseStruct.js', ()=>{
-  return {}
-})
+jest.mock('../../../dist/js-heap/model/DatabaseStruct.js', () => {
+  return {};
+});
+jest.mock('../../../dist/trace/component/trace/base/TraceSheet.js', () => {
+  return {};
+});
 
 const intersectionObserverMock = () => ({
   observe: () => null,
@@ -43,7 +46,8 @@ const intersectionObserverMock = () => ({
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
+window.ResizeObserver =
+  window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
@@ -51,7 +55,6 @@ window.ResizeObserver = window.ResizeObserver ||
   }));
 
 describe('SpSystemTrace Test', () => {
-  //document.body.innerHTML = `<sp-application></sp-application>`;
   let spSystemTrace = new SpSystemTrace();
   const offset = 1;
   const callback = true;
@@ -159,124 +162,6 @@ describe('SpSystemTrace Test', () => {
     expect(spSystemTrace.searchCPU()).not.toBeUndefined();
   });
 
-  it('SpSystemTraceTest19', function () {
-    expect(spSystemTrace.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-        .timer-shaft{
-            width: 100%;
-            z-index: 2;
-        }
-        .rows-pane{
-            overflow: overlay;
-            overflow-anchor: none;
-            /*height: 100%;*/
-            max-height: calc(100vh - 147px - 48px);
-        }
-        .rows{
-            color: #fff;
-            display: flex;
-            box-sizing: border-box;
-            flex-direction: column;
-            overflow-y: auto;
-            flex: 1;
-            width: 100%;
-            background: var(--dark-background4,#ffffff);
-            /*scroll-behavior: smooth;*/
-        }
-        .favorite-rows{
-            width: 100%;
-            position:fixed;
-            overflow-y: auto;
-            overflow-x: hidden;
-            z-index:1001;
-            background: var(--dark-background5,#ffffff);
-            box-shadow: 0 10px 10px #00000044;
-        }
-        :host([disable]) .container{
-            pointer-events: none;
-        }
-        .container{
-            width: 100%;
-            box-sizing: border-box;
-            height: 100%;
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: min-content 1fr min-content;
-            /*grid-template-areas:    'head'*/
-                                    /*'body'*/
-                                    /*'sheet';*/
-            position:relative;
-        }
-        .panel-canvas{
-            position: absolute;
-            top: 0;
-            right: 0px;
-            bottom: 0px;
-            width: 100%;
-            /*height: calc(100vh - 195px);*/
-            height: 100%;
-            box-sizing: border-box;
-            /*background: #f0f0f0;*/
-            /*border: 1px solid #000000;*/
-            z-index: 0;
-        }
-        .panel-canvas-favorite{
-            width: 100% ;
-            display: block;
-            position: absolute;
-            height: 0;
-            top: 0;
-            right: 0;
-            box-sizing: border-box;
-            z-index: 100;
-        }
-        .trace-sheet{
-            cursor: default;
-        }
-        .tip{
-            z-index: 1001;
-            position: absolute;
-            top: 0;
-            left: 0;
-            /*height: 100%;*/
-            background-color: white;
-            border: 1px solid #f9f9f9;
-            width: auto;
-            font-size: 8px;
-            color: #50809e;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            padding: 2px 10px;
-            box-sizing: border-box;
-            display: none;
-            user-select: none;
-        }
-
-        </style>
-        <div class="container">
-            <timer-shaft-element class="timer-shaft" style="position: relative;top: 0"></timer-shaft-element>
-            <div class="rows-pane" style="position: relative;flex-direction: column;overflow-x: hidden;">
-                <div class="favorite-rows">
-                    <canvas id="canvas-panel-favorite" class="panel-canvas-favorite" ondragstart="return false"></canvas>
-                </div>
-                <canvas id="canvas-panel" class="panel-canvas" ondragstart="return false"></canvas>
-                <div class="spacer" ondragstart="return false"></div>
-                <div class="rows" ondragstart="return false"></div>
-                <div id="tip" class="tip"></div>
-            </div>
-            <trace-sheet class="trace-sheet" mode="hidden" ondragstart="return false"></trace-sheet>
-        </div>
-        "
-`);
-  });
-
   it('SpSystemTraceTest20', function () {
     let spSystemTrace = new SpSystemTrace<any>({
       canvasNumber: 1,
@@ -313,7 +198,9 @@ describe('SpSystemTrace Test', () => {
       isOffScreen: true,
     });
     procedurePool.clearCache = jest.fn(() => true);
-    procedurePool.clearMemory = jest.fn(() => true);
+    spSystemTrace.traceSheetEL = jest.fn(() => true);
+    spSystemTrace.traceSheetEL.clearMemory = jest.fn(() => true);
+    spSystemTrace.traceSheetEL.setAttribute = jest.fn(() => true);
     expect(spSystemTrace.reset()).toBeUndefined();
   });
   it('SpSystemTraceTest23', function () {
@@ -396,7 +283,7 @@ describe('SpSystemTrace Test', () => {
       contextId: '2d',
       isOffScreen: true,
     });
-    expect(spSystemTrace.expansionAllParentRow({id:1})).toBeUndefined();
+    expect(spSystemTrace.expansionAllParentRow({ id: 1 })).toBeUndefined();
   });
   it('SpSystemTraceTest30', function () {
     let spSystemTrace = new SpSystemTrace<any>({
@@ -406,11 +293,11 @@ describe('SpSystemTrace Test', () => {
       isOffScreen: true,
     });
     let it = {
-      name:'',
-      rowType:'',
-      rowId:'FileSystemLogicalWrite',
-      rowParentId:'frameTime'
-  }
+      name: '',
+      rowType: '',
+      rowId: 'FileSystemLogicalWrite',
+      rowParentId: 'frameTime',
+    };
     expect(spSystemTrace.createPointEvent(it)).toBe('');
   });
   it('SpSystemTraceTest31', function () {
@@ -421,22 +308,22 @@ describe('SpSystemTrace Test', () => {
       isOffScreen: true,
     });
     let a = {
-      rowEL:{
-        translateY:1,
-        offsetTop:0,
+      rowEL: {
+        translateY: 1,
+        offsetTop: 0,
       },
-      y:1,
-      offsetY:0
-    }
+      y: 1,
+      offsetY: 0,
+    };
     let b = {
-      rowEL:{
-        translateY:1,
-        offsetTop:0,
+      rowEL: {
+        translateY: 1,
+        offsetTop: 0,
       },
-      y:1,
-      offsetY:0
-    }
-    expect(spSystemTrace.addPointPair(a,b)).toBeUndefined();
+      y: 1,
+      offsetY: 0,
+    };
+    expect(spSystemTrace.addPointPair(a, b)).toBeUndefined();
   });
   it('SpSystemTraceTest32', function () {
     let spSystemTrace = new SpSystemTrace<any>({
@@ -474,27 +361,27 @@ describe('SpSystemTrace Test', () => {
     });
     let endParentRow = {
       expansion: true,
-      childrenList:[]
-    }
+      childrenList: [],
+    };
     let selectJankStruct = {
-      frame_type:'frameTime',
-      type:'',
-      pid:1,
-      ts:1,
-      dur:0,
-      depth:1,
-    }
+      frame_type: 'frameTime',
+      type: '',
+      pid: 1,
+      ts: 1,
+      dur: 0,
+      depth: 1,
+    };
     let data = {
-      frame_type:'frameTime',
-      type:'',
-      pid:1,
-      name:'',
-      children:{
-        frame_type:'frameTime',
-        pid:1,
-        length:1
-      }
-    }
+      frame_type: 'frameTime',
+      type: '',
+      pid: 1,
+      name: '',
+      children: {
+        frame_type: 'frameTime',
+        pid: 1,
+        length: 1,
+      },
+    };
 
     expect(spSystemTrace.drawJankLine(endParentRow, selectJankStruct, data)).toBeUndefined();
   });
@@ -506,9 +393,9 @@ describe('SpSystemTrace Test', () => {
       isOffScreen: true,
     });
     let ev = {
-      maxDuration:1,
-      timestamp:''
-    }
+      maxDuration: 1,
+      timestamp: '',
+    };
     expect(spSystemTrace.sliceMarkEventHandler(ev)).toBeUndefined();
   });
   it('SpSystemTraceTest37', function () {
@@ -518,7 +405,7 @@ describe('SpSystemTrace Test', () => {
       contextId: '2d',
       isOffScreen: true,
     });
-    expect(spSystemTrace.searchSdk([''],'')).toStrictEqual(['']);
+    expect(spSystemTrace.searchSdk([''], '')).toStrictEqual(['']);
   });
   it('SpSystemTraceTest38', function () {
     let spSystemTrace = new SpSystemTrace<any>({
@@ -528,14 +415,14 @@ describe('SpSystemTrace Test', () => {
       isOffScreen: true,
     });
     let funcStract = {
-      tid:1,
-      pid:0,
-      cookie:'',
-      funName:'',
-      type:'',
-      startTime:2,
-      depth:1
-    }
-    expect(spSystemTrace.scrollToActFunc(funcStract,true)).toBeUndefined();
+      tid: 1,
+      pid: 0,
+      cookie: '',
+      funName: '',
+      type: '',
+      startTime: 2,
+      depth: 1,
+    };
+    expect(spSystemTrace.scrollToActFunc(funcStract, true)).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/component/SpWelcomePage.test.ts b/ide/test/trace/component/SpWelcomePage.test.ts
index 760a213c94fc972e7e68d70e5f0f720034b855b4..10e0f52c87d1ccd1f6bc505109f087721900cfe6 100644
--- a/ide/test/trace/component/SpWelcomePage.test.ts
+++ b/ide/test/trace/component/SpWelcomePage.test.ts
@@ -22,27 +22,4 @@ describe('SpWelcomePage Test', () => {
   it('SpWelcomePageTest01', function () {
     expect(spWelcomePage.initElements()).toBeUndefined();
   });
-
-  it('SpWelcomePageTest01', function () {
-    expect(spWelcomePage.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host {
-            width: 100%;
-            height: 100%;
-            display: grid;
-            justify-content: center;
-            align-content: center;
-            background: var(--dark-background5,#F6F6F6);
-        }
-        .lit-icon{
-            content: var(--dark-img,url('img/pic.png'));
-        }
-        </style>
-        <div>
-            <img class="lit-icon" >
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/StackBar.test.ts b/ide/test/trace/component/StackBar.test.ts
index e92ae74d16b3ea7d2e2bbb03e8abb790cf1f29c7..9718580fc78d571b184c2c8f87d04aa8aaae857c 100644
--- a/ide/test/trace/component/StackBar.test.ts
+++ b/ide/test/trace/component/StackBar.test.ts
@@ -45,25 +45,4 @@ describe('StackBar Test', () => {
     let hasDivEl = htmlDivElement.toLocaleString().length > 5;
     expect(hasDivEl).toBeTruthy();
   });
-
-  it('StackBarTest05', function () {
-    expect(stackBar.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            :host([mode='hidden']){
-                display: none;
-            }
-            :host{
-                display: block;
-                /*background-color: rebeccapurple;*/
-            }
-            .state-text{
-                width: 10%;display: inline-block;overflow: hidden;white-space: nowrap;padding: 5px; margin-right: 2px;font-size: 9pt;
-            }
-            </style>
-            <div style="display: flex;flex-direction: row;" id="container">
-            </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/chart/FrameChart.test.ts b/ide/test/trace/component/chart/FrameChart.test.ts
index 174394b860377a3db6efdbd3b674448a70e72c85..2597a9b815100ec57bd04444b924b1ad27b86b12 100644
--- a/ide/test/trace/component/chart/FrameChart.test.ts
+++ b/ide/test/trace/component/chart/FrameChart.test.ts
@@ -130,39 +130,6 @@ describe('FrameChart Test', () => {
         expect(frameChart.onMouseClick({ button: 0 })).toBeUndefined();
     });
 
-    it('FrameChartTest17', function () {
-        let frameChart = new FrameChart();
-        expect(frameChart.initHtml()).toMatchInlineSnapshot(`
-"
-            <style>
-            .frame-tip{
-                position:absolute;
-                left: 0;
-                background-color: white;
-                border: 1px solid #f9f9f9;
-                width: auto;
-                font-size: 8px;
-                color: #50809e;
-                padding: 2px 10px;
-                display: none;
-                max-width:400px;
-            }
-            .bold{
-                font-weight: bold;
-            }
-            .text{
-                max-width:350px;
-                word-break: break-all;
-            }
-            :host{
-                display: flex;
-                padding: 10px 10px;
-            }
-            </style>
-            <canvas id="canvas"></canvas>
-            <div id ="float_hint" class="frame-tip"></div>"
-`);
-  });
 
   it('FrameChartTest18', function () {
     let frameChart = new FrameChart();
diff --git a/ide/test/trace/component/chart/SpAbilityMonitor.test.ts b/ide/test/trace/component/chart/SpAbilityMonitor.test.ts
index 6b029414fcb45dcb1eb7fd76f1090fd6d0b93b87..0a3ce49e57fd7879965be841154141b22e334fa5 100644
--- a/ide/test/trace/component/chart/SpAbilityMonitor.test.ts
+++ b/ide/test/trace/component/chart/SpAbilityMonitor.test.ts
@@ -18,24 +18,22 @@ import { SpAbilityMonitorChart } from '../../../../dist/trace/component/chart/Sp
 import '../../../../dist/trace/component/chart/SpAbilityMonitorChart.js';
 // @ts-ignore
 import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
-const sqlit = require('../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../dist/trace/database/SqlLite.js');
-
 jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
-
+const sqlit = require('../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../dist/trace/database/SqlLite.js');
 const intersectionObserverMock = () => ({
   observe: () => null,
 });
+jest.mock('../../../../dist/trace/database/SqlLite.js');
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
-
-window.ResizeObserver =
-  window.ResizeObserver ||
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
+    disconnect: jest.fn(),
   }));
 describe('SpAbilityMonitorChart Test', () => {
   let MockqueryAbilityExits = sqlit.queryAbilityExits;
@@ -103,7 +101,7 @@ describe('SpAbilityMonitorChart Test', () => {
       value: 1,
       flag: 1,
       ipid: 1,
-      expTaskComm: ''
+      expTaskComm: '',
     },
   ]);
   let queryGpuMemoryAbilityData = sqlit.queryGpuMemoryAbilityData;
diff --git a/ide/test/trace/component/chart/SpArkTsChart.test.ts b/ide/test/trace/component/chart/SpArkTsChart.test.ts
index dcea92c215bbaabf7ba605be52199ccff25a4e7f..8e276c1816b8d0621022c3553fb3330ea33de4b7 100644
--- a/ide/test/trace/component/chart/SpArkTsChart.test.ts
+++ b/ide/test/trace/component/chart/SpArkTsChart.test.ts
@@ -24,17 +24,21 @@ describe('SpClockChart Test', () => {
   let arkTsChart = new SpArkTsChart(new SpChartManager());
 
   let jsCpuProfilerConfig = sqlite.queryJsCpuProfilerConfig;
-  let cpuProfilerConfigData = [{
-    enableCpuProfiler: 1,
-    pid:1553,
-    type  : -1
-  }];
+  let cpuProfilerConfigData = [
+    {
+      enableCpuProfiler: 1,
+      pid: 1553,
+      type: -1,
+    },
+  ];
   jsCpuProfilerConfig.mockResolvedValue(cpuProfilerConfigData);
 
   let jsCpuProfiler = sqlite.queryJsCpuProfilerData;
-  let cpuProfilerData = [{
-    1: 1
-  }];
+  let cpuProfilerData = [
+    {
+      1: 1,
+    },
+  ];
   jsCpuProfiler.mockResolvedValue(cpuProfilerData);
 
   let jsMemory = sqlite.queryJsMemoryData;
@@ -50,4 +54,4 @@ describe('SpClockChart Test', () => {
   it('SpClockChart03', function () {
     expect(arkTsChart.initSnapshotChart()).not.toBeUndefined();
   });
-});
\ No newline at end of file
+});
diff --git a/ide/test/trace/component/chart/SpChartManager.test.ts b/ide/test/trace/component/chart/SpChartManager.test.ts
index 7285001a215cc1edbf7a06af385a3f7a2310b370..dff906c2daddcca40f04298429275991c0730e7c 100644
--- a/ide/test/trace/component/chart/SpChartManager.test.ts
+++ b/ide/test/trace/component/chart/SpChartManager.test.ts
@@ -18,14 +18,6 @@ const intersectionObserverMock = () => ({
 });
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
-
 // @ts-ignore
 import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
 // @ts-ignore
@@ -34,6 +26,13 @@ import { SpSystemTrace } from '../../../../dist/trace/component/SpSystemTrace.js
 const sqlite = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
 
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+    }));
 describe('SpChartManager Test', () => {
   let chartManager = new SpChartManager();
   let queryDataDICT = sqlite.queryDataDICT;
diff --git a/ide/test/trace/component/chart/SpCpuChart.test.ts b/ide/test/trace/component/chart/SpCpuChart.test.ts
index 5272db4826be2689a22f64c7bc3c6f8cc326d930..da1afbbf5c19da2710ece0f572c7510800faf1ce 100644
--- a/ide/test/trace/component/chart/SpCpuChart.test.ts
+++ b/ide/test/trace/component/chart/SpCpuChart.test.ts
@@ -24,33 +24,35 @@ const sqlit = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
 
 window.ResizeObserver =
-    window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 
 jest.mock('../../../../dist/js-heap/utils/Utils.js', () => {
-    return {
-        HeapNodeToConstructorItem: (node: HeapNode) => {},
-    };
+  return {
+    HeapNodeToConstructorItem: (node: HeapNode) => {},
+  };
 });
 describe('SpCpuChart Test', () => {
-    let MockqueryCpuMax = sqlit.queryCpuMax;
-    MockqueryCpuMax.mockResolvedValue([{ cpu: 1 }]);
+  let MockqueryCpuMax = sqlit.queryCpuMax;
+  MockqueryCpuMax.mockResolvedValue([{ cpu: 1 }]);
 
-    let mockCpuSlice = sqlit.queryCpuSchedSlice;
-    mockCpuSlice.mockResolvedValue([]);
-    let queryCpuData = sqlit.queryCpuDataCount;
-    queryCpuData.mockResolvedValue([{
-        count: 2,
-        cpu: 3
-    }]);
-    let ss = new SpChartManager();
-    let trace = new SpCpuChart(ss);
-    it('SpMpsChart01', async function () {
-        await trace.init();
-        expect(trace).toBeDefined();
-    });
+  let mockCpuSlice = sqlit.queryCpuSchedSlice;
+  mockCpuSlice.mockResolvedValue([]);
+  let queryCpuData = sqlit.queryCpuDataCount;
+  queryCpuData.mockResolvedValue([
+    {
+      count: 2,
+      cpu: 3,
+    },
+  ]);
+  let ss = new SpChartManager();
+  let trace = new SpCpuChart(ss);
+  it('SpMpsChart01', async function () {
+    await trace.init();
+    expect(trace).toBeDefined();
+  });
 });
diff --git a/ide/test/trace/component/chart/SpFpsChart.test.ts b/ide/test/trace/component/chart/SpFpsChart.test.ts
index 9cc5acbbd2c014fae20aacf080c5e8487090b109..1eb60bf97ed90d6c336ff2d7420b9491ea89652d 100644
--- a/ide/test/trace/component/chart/SpFpsChart.test.ts
+++ b/ide/test/trace/component/chart/SpFpsChart.test.ts
@@ -21,7 +21,7 @@ import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartMa
 const sqlit = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
+  return {};
 });
 
 window.ResizeObserver =
diff --git a/ide/test/trace/component/chart/SpFrameTimeChart.test.ts b/ide/test/trace/component/chart/SpFrameTimeChart.test.ts
index 127fee8032fd7ac3c58a893346678a14b8c6a8fc..f391b7b1ef554f1404b66a7b53ed1f106ea90e0a 100644
--- a/ide/test/trace/component/chart/SpFrameTimeChart.test.ts
+++ b/ide/test/trace/component/chart/SpFrameTimeChart.test.ts
@@ -97,7 +97,7 @@ describe('SpFrameTimeChart Test', () => {
 
   let frameAnimation = sqlite.queryFrameAnimationData;
   let frameAnimationData = [
-    {animationId: 1, dynamicEndTs: 4774481414, dynamicStartTs: 4091445476, ts: 4091445476},
+    { animationId: 1, dynamicEndTs: 4774481414, dynamicStartTs: 4091445476, ts: 4091445476 },
     {
       animationId: 2,
       dynamicEndTs: 8325095997,
@@ -109,7 +109,7 @@ describe('SpFrameTimeChart Test', () => {
 
   let frameDynamic = sqlite.queryFrameDynamicData;
   let frameDynamicData = [
-    {alpha: '1.00', appName: 'test0', height: 2772, id: 74, ts: 28565790, width: 1344, x: 0, y: 0},
+    { alpha: '1.00', appName: 'test0', height: 2772, id: 74, ts: 28565790, width: 1344, x: 0, y: 0 },
     {
       alpha: '1.00',
       appName: 'test0',
@@ -155,7 +155,7 @@ describe('SpFrameTimeChart Test', () => {
   frameSpacing.mockResolvedValue(frameSpacingData);
 
   let physical = sqlite.queryPhysicalData;
-  let physicalData = [{physicalFrameRate: 90, physicalHeight: 2772, physicalWidth: 1344}];
+  let physicalData = [{ physicalFrameRate: 90, physicalHeight: 2772, physicalWidth: 1344 }];
   physical.mockResolvedValue(physicalData);
 
   it('TabPaneFramesTest01', function () {
@@ -164,10 +164,14 @@ describe('SpFrameTimeChart Test', () => {
 
   it('TabPaneFramesTest02', function () {
     FlagsConfig.updateFlagsConfig('AnimationAnalysis', 'Enabled');
-    spFrameTimeChart.initAnimatedScenesChart(TraceRow.skeleton(), {
-      pid: 1,
-      processName: 'render_service'
-    }, TraceRow.skeleton());
+    spFrameTimeChart.initAnimatedScenesChart(
+      TraceRow.skeleton(),
+      {
+        pid: 1,
+        processName: 'render_service',
+      },
+      TraceRow.skeleton()
+    );
     expect(spFrameTimeChart.flagConfig?.AnimationAnalysis).toEqual('Enabled');
   });
 });
diff --git a/ide/test/trace/component/chart/SpFreqChart.test.ts b/ide/test/trace/component/chart/SpFreqChart.test.ts
index bbe6e332155a99f21e7ede500d84ee856c9bf832..867a4be34134f92894ffbc0e0296141fbfb91743 100644
--- a/ide/test/trace/component/chart/SpFreqChart.test.ts
+++ b/ide/test/trace/component/chart/SpFreqChart.test.ts
@@ -14,20 +14,18 @@
  */
 
 // @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+    }));
 import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
 // @ts-ignore
 import { SpFreqChart } from '../../../../dist/trace/component/chart/SpFreqChart.js';
 
 const sqlit = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
-
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
 describe('spFpsChart Test', () => {
   let spFpsChart = new SpFreqChart(new SpChartManager());
 
diff --git a/ide/test/trace/component/chart/SpHiSysEventChart.test.ts b/ide/test/trace/component/chart/SpHiSysEventChart.test.ts
index f8879a44fe5c5916fc987453b38ae042f1f0cf70..795e083ab7c7aa9c97b9149db8018214c3385a39 100644
--- a/ide/test/trace/component/chart/SpHiSysEventChart.test.ts
+++ b/ide/test/trace/component/chart/SpHiSysEventChart.test.ts
@@ -73,13 +73,13 @@ describe('SpHiSysEventChart Test', () => {
   let powerData = sqlite.queryPowerData;
   let power = [
     {
-      startNS: 5999127353,
+      startNS: 5999127351,
       eventName: 'POWER_IDE_AUDIO',
       appKey: 'APPNAME',
       eventValue: 'com.example.himusicdemo,com.example.himusicdemo_js,com.example.himusicdemo_app',
     },
     {
-      startNS: 5999127353,
+      startNS: 1291120516,
       eventName: 'POWER_IDE_AUDIO',
       appKey: 'BACKGROUND_ENERGY',
       eventValue: '854,258,141',
@@ -104,13 +104,13 @@ describe('SpHiSysEventChart Test', () => {
   let queryConfigSysEventAppName = sqlite.queryConfigSysEventAppName;
   let location = [
     {
-      ts: 1005938319,
+      ts: 100652222,
       eventName: 'GNSS_STATE',
       appKey: 'TYPE',
       Value: '1',
     },
     {
-      ts: 3005933657,
+      ts: 3333332224,
       eventName: 'GNSS_STATE',
       appKey: 'TAG',
       Value: '2',
@@ -119,13 +119,13 @@ describe('SpHiSysEventChart Test', () => {
 
   let lock = [
     {
-      ts: 1005938319,
+      ts: 96555551,
       eventName: 'POWER_RUNNINGLOCK',
       appKey: 'TYPE',
       Value: '1',
     },
     {
-      ts: 3005933657,
+      ts: 333234222,
       eventName: 'POWER_RUNNINGLOCK',
       appKey: 'TAG',
       Value: '2',
@@ -134,13 +134,13 @@ describe('SpHiSysEventChart Test', () => {
 
   let work = [
     {
-      ts: 1005938319,
+      ts: 100593835619,
       eventName: 'WORK_ADD',
       appKey: 'TYPE',
       Value: '1',
     },
     {
-      ts: 3005933657,
+      ts: 2315652241,
       eventName: 'WORK_STOP',
       appKey: 'TAG',
       Value: '2',
@@ -165,7 +165,7 @@ describe('SpHiSysEventChart Test', () => {
   it('spHiSysEventChartTest02', function () {
     let result = [
       {
-        ts: 1005938319,
+        ts: 210000001,
         eventName: 'WORK_START',
         appKey: 'TYPE',
         Value: '1',
@@ -213,7 +213,7 @@ describe('SpHiSysEventChart Test', () => {
         { count: 0, startNs: 6005938319, token: undefined, type: 1 },
       ],
       '1': [
-        { count: 1, startNs: 1005938319, state: 'start', type: 2 },
+        { count: 1, startNs: 210000001, state: 'start', type: 2 },
         { count: 2, startNs: 3005933657, state: 'start', type: 2 },
         { count: 1, startNs: 4005938319, state: 'stop', type: 2 },
         { count: 2, startNs: 5005933657, state: 'start', type: 2 },
@@ -222,7 +222,7 @@ describe('SpHiSysEventChart Test', () => {
         { count: 5, startNs: 10005938319, state: 'start', type: 2 },
       ],
       '2': [
-        { count: 1, startNs: 1005938319, type: 0 },
+        { count: 1, startNs: 210000001, type: 0 },
         { count: 0, startNs: undefined, type: 0 },
       ],
     });
@@ -235,37 +235,37 @@ describe('SpHiSysEventChart Test', () => {
   it('spHiSysEventChartTest04', function () {
     let result = [
       {
-        startNS: 5999127353,
+        startNS: 33255112,
         eventName: 'POWER_IDE_AUDIO',
         appKey: 'APPNAME',
         eventValue: 'com.example.himusicdemo,com.example.himusicdemo_js,com.example.himusicdemo_app',
       },
       {
-        startNS: 5999127353,
+        startNS: 5999127352,
         eventName: 'POWER_IDE_AUDIO',
         appKey: 'BACKGROUND_ENERGY',
         eventValue: '854,258,141',
       },
       {
-        startNS: 5999127353,
+        startNS: 223224352,
         eventName: 'POWER_IDE_BLUETOOTH',
         appKey: 'APPNAME',
         eventValue: 'com.ohos.settings,bt_switch,bt_switch_js,bt_switch_app',
       },
       {
-        startNS: 5999127353,
+        startNS: 86222222,
         eventName: 'POWER_IDE_BLUETOOTH',
         appKey: 'BACKGROUND_ENERGY',
         eventValue: '76,12,43,431',
       },
       {
-        startNS: 5999127388,
+        startNS: 5999127382,
         eventName: 'POWER_IDE_CAMERA',
         appKey: 'APPNAME',
         eventValue: 'com.ohos.camera,com.ohos.camera_app,com.ohos.camera_js,com.ohos.camera_ts',
       },
       {
-        startNS: 5999127388,
+        startNS: 264166822,
         eventName: 'POWER_IDE_CAMERA',
         appKey: 'BACKGROUND_ENERGY',
         eventValue: '375,475,255,963',
diff --git a/ide/test/trace/component/chart/SpJsMemoryChart.test.ts b/ide/test/trace/component/chart/SpJsMemoryChart.test.ts
index a461e6cdad84ae9ba6f61a364c1f5ab0dccbc3d2..d11feb5e6b93ea50f27c2c30b0ec3f63bdaed57f 100644
--- a/ide/test/trace/component/chart/SpJsMemoryChart.test.ts
+++ b/ide/test/trace/component/chart/SpJsMemoryChart.test.ts
@@ -17,12 +17,13 @@ const sqlite = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 
 // @ts-ignore
 import { SpArkTsChart } from '../../../../dist/trace/component/chart/SpArkTsChart.js';
@@ -30,20 +31,20 @@ import { SpArkTsChart } from '../../../../dist/trace/component/chart/SpArkTsChar
 import { SpIrqChart } from '../../../../dist/trace/component/chart/SpIrqChart.js';
 
 jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
+  return {};
 });
 
 describe('SpIrqChart Test', () => {
-    let spArkTsChart = new SpArkTsChart();
-    let irqList = sqlite.queryIrqList;
-    let irqListData = [
-        {
-            name: 'test',
-            cpu: 0,
-        },
-    ];
-    irqList.mockResolvedValue(irqListData);
-    it('SpArkTsChart01', function () {
-        expect(spArkTsChart).not.toBe({"initChart": [], "loadJsDatabase": {}, "trace": undefined});
-    });
-})
\ No newline at end of file
+  let spArkTsChart = new SpArkTsChart();
+  let irqList = sqlite.queryIrqList;
+  let irqListData = [
+    {
+      name: 'test',
+      cpu: 0,
+    },
+  ];
+  irqList.mockResolvedValue(irqListData);
+  it('SpArkTsChart01', function () {
+    expect(spArkTsChart).not.toBe({ initChart: [], loadJsDatabase: {}, trace: undefined });
+  });
+});
diff --git a/ide/test/trace/component/chart/SpNativeMemoryChart.test.ts b/ide/test/trace/component/chart/SpNativeMemoryChart.test.ts
index cda2ea5bbb0037436a914684c283d2cfba2faa42..b84fe247612694fe290743f05913a86e70a0d2ce 100644
--- a/ide/test/trace/component/chart/SpNativeMemoryChart.test.ts
+++ b/ide/test/trace/component/chart/SpNativeMemoryChart.test.ts
@@ -18,21 +18,19 @@ import { SpSystemTrace } from '../../../../dist/trace/component/SpSystemTrace.js
 // @ts-ignore
 import { SpNativeMemoryChart } from '../../../../dist/trace/component/chart/SpNativeMemoryChart.js';
 // @ts-ignore
-import {SpChartManager} from "../../../../dist/trace/component/chart/SpChartManager.js";
+import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
 const sqlit = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
-
+window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 const intersectionObserverMock = () => ({
   observe: () => null,
 });
-window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
-
-window.ResizeObserver =
-  window.ResizeObserver ||
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
-    observe: jest.fn(),
     unobserve: jest.fn(),
+    observe: jest.fn(),
   }));
 describe('SpNativeMemoryChart Test', () => {
   let chartManager = new SpChartManager();
@@ -41,27 +39,26 @@ describe('SpNativeMemoryChart Test', () => {
   let queryNativeHookStatisticsCount = sqlit.queryNativeHookStatisticsCount;
   queryNativeHookStatisticsCount.mockResolvedValue([
     {
-      num: 2
-    }
+      num: 2,
+    },
   ]);
 
   let queryNativeMemoryRealTime = sqlit.queryNativeMemoryRealTime;
   queryNativeMemoryRealTime.mockResolvedValue([
     {
-      "ts": 1502013097360370200,
-      "clock_name": "realtime"
-    }
+      ts: 1502013097360370200,
+      clock_name: 'realtime',
+    },
   ]);
 
   let queryBootTime = sqlit.queryBootTime;
   queryBootTime.mockResolvedValue([
     {
-      "ts": -557295431,
-      "clock_name": "boottime"
-    }
+      ts: -557295431,
+      clock_name: 'boottime',
+    },
   ]);
 
-
   let nativeHookProcess = sqlit.queryNativeHookProcess;
   nativeHookProcess.mockResolvedValue([
     {
diff --git a/ide/test/trace/component/chart/SpProcessChart.test.ts b/ide/test/trace/component/chart/SpProcessChart.test.ts
index 634cb938b080d92b1adc067bec029e27827e0e6d..46a329ec8532c13d0dc4d89484c667fd3842ec36 100644
--- a/ide/test/trace/component/chart/SpProcessChart.test.ts
+++ b/ide/test/trace/component/chart/SpProcessChart.test.ts
@@ -15,9 +15,6 @@
 
 // @ts-ignore
 import { SpProcessChart } from '../../../../dist/trace/component/chart/SpProcessChart.js';
-// @ts-ignore
-import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
-
 const sqlit = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
 
@@ -29,13 +26,12 @@ const intersectionObserverMock = () => ({
   observe: () => null,
 });
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
-
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
+import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
     observe: jest.fn(),
     unobserve: jest.fn(),
+    disconnect: jest.fn(),
   }));
 
 describe('SpProcessChart Test', () => {
diff --git a/ide/test/trace/component/chart/SpSdkChart.test.ts b/ide/test/trace/component/chart/SpSdkChart.test.ts
index d6ae6830d7972e247ab72744c855497f3a14d872..3462134186ad62231cc02b03cdc39c490e20bffd 100644
--- a/ide/test/trace/component/chart/SpSdkChart.test.ts
+++ b/ide/test/trace/component/chart/SpSdkChart.test.ts
@@ -65,22 +65,22 @@ describe('SpSdkChart Test', () => {
     let spSystemTrace = new SpSdkChart();
     let sdkChart = new SpSdkChart(spSystemTrace);
     let map = new Map();
-    let jsonCofigStr =
+    let jsoSdknCofigStr =
       '{"settingConfig":{"configuration":{"counters":{"enum":["ARM_Mali-TTRx_JS1_ACTIVE","ARM_Mali-TTRx_JS0_ACTIVE","ARM_Mali-TTRx_GPU_ACTIVE","ARM_Mali-TTRx_FRAG_ACTIVE"],\n' +
-      '    "type":"string"},"stop_gator":{"default":"true","description":"stop_gator","type":"boolean"},"version":{"default":"1","description":"gatordversion","type":"number"}},"name":"mailG77"},\n' +
+      '    "type":"string"},"stop_gator":{"default":"true","description":"stop_gator","type":"boolean"},"version":{"default":"7","description":"gatordversion","type":"number"}},"name":"mailG77"},\n' +
       '    "tableConfig":{"showType":[{"columns":[{"column":"ts","displayName":"TimeStamp","showType":[1,3],"type":"INTEGER"},{"column":"counter_id","displayName":"MonitorValue","showType":[1,3],"type":"INTEGER"},\n' +
       '    {"column":"value","displayName":"Value","showType":[1,3],"type":"INTEGER"}],"inner":{"columns":[{"column":"counter_name","displayName":"","showType":[0],"type":"STRING"},\n' +
-      '    {"column":"counter_id","displayName":"","showType":[0],"type":"INTEGER"}],"tableName":"mock_plugin_counterobj_table"},"tableName":"mock_plugin_counter_table"},\n' +
+      '    {"column":"counter_id","displayName":"","showType":[96,6],"type":"INTEGER"}],"tableName":"mock_plugin_counterobj_table"},"tableName":"mock_plugin_counter_table"},\n' +
       '    {"columns":[{"column":"start_ts","displayName":"startts","showType":[2,3],"type":"INTEGER"},{"column":"end_ts","displayName":"endts","showType":[2,3],"type":"INTEGER"},\n' +
-      '    {"column":"slice_id","displayName":"slice_id","showType":[2,3],"type":"INTEGER"},{"column":"value","displayName":"Value","showType":[2,3],"type":"INTEGER"}],\n' +
-      '    "inner":{"columns":[{"column":"slice_name","displayName":"","showType":[0],"type":"STRING"},{"column":"slice_id","displayName":"","showType":[0],"type":"INTEGER"}],\n' +
+      '    {"column":"slice_id","displayName":"slice_id","showType":[2,154,3],"type":"INTEGER"},{"column":"value","displayName":"Value","showType":[2,3],"type":"INTEGER"}],\n' +
+      '    "inner":{"columns":[{"column":"slice_name","displayName":"","showType":[313],"type":"STRING"},{"column":"slice_id","displayName":"","showType":[0],"type":"INTEGER"}],\n' +
       '    "tableName":"mock_plugin_sliceobj_table"},"tableName":"mock_plugin_slice_table"}]}}';
-    let datamap = {
-      jsonConfig: jsonCofigStr,
+    let dataSdkMap = {
+      jsonConfig: jsoSdknCofigStr,
       disPlayName: 'common_mock',
       pluginName: 'mock-plugin',
     };
-    map.set('1', datamap);
+    map.set('1', dataSdkMap);
     SpSystemTrace.SDK_CONFIG_MAP = map;
     sdkChart.parseJson(58512, map);
   });
diff --git a/ide/test/trace/component/chart/SpVirtualMemChart.test.ts b/ide/test/trace/component/chart/SpVirtualMemChart.test.ts
index 89e08b161f9af8264f30c127ee84060c724864e2..48e7f080e003d0637e908b58646ec59dd8ba8c17 100644
--- a/ide/test/trace/component/chart/SpVirtualMemChart.test.ts
+++ b/ide/test/trace/component/chart/SpVirtualMemChart.test.ts
@@ -12,7 +12,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(), observe: jest.fn(), unobserve: jest.fn(),
+    }));
 // @ts-ignore
 import { SpVirtualMemChart } from '../../../../dist/trace/component/chart/SpVirtualMemChart.js';
 // @ts-ignore
@@ -20,28 +24,17 @@ import { SpSystemTrace } from '../../../../dist/trace/component/SpSystemTrace.js
 // @ts-ignore
 import { TraceRow } from '../../../../dist/trace/component/trace/base/TraceRow.js';
 // @ts-ignore
-import {SpChartManager} from "../../../../dist/trace/component/chart/SpChartManager.js";
+import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartManager.js';
 
 jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
-
-
+window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 const sqlit = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
-
 const intersectionObserverMock = () => ({
   observe: () => null,
 });
-window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
-
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
 
 describe('SpVirtualMemChart Test', () => {
   let manager = new SpChartManager();
diff --git a/ide/test/trace/component/chart/SpVmTrackerChart.test.ts b/ide/test/trace/component/chart/SpVmTrackerChart.test.ts
index ad5cc8e9459bc21d89d7b72bb13e710bdc76eab5..8ee433a39cbde2c1848eeb657825a1034fb8188d 100644
--- a/ide/test/trace/component/chart/SpVmTrackerChart.test.ts
+++ b/ide/test/trace/component/chart/SpVmTrackerChart.test.ts
@@ -20,150 +20,175 @@ import { SpChartManager } from '../../../../dist/trace/component/chart/SpChartMa
 const sqlite = require('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
+  return {};
 });
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 
 describe('SpVmTrackerChart Test', () => {
-    let smapsData = sqlite.querySmapsData;
-    let smapsSixData = [{
-        startNs:0,
-        value:1024,
-        name:'dirty',
-    }];
-    smapsData.mockResolvedValue(smapsSixData);
-    let dmaSmapsData = sqlite.queryDmaSampsData;
-    let smapsDmaData = [{
-        startNs:0,
-        value:1024,
-        flag:1,
-        ipid:1,
-        expTaskComm:'delay',
-    }];
-    dmaSmapsData.mockResolvedValue(smapsDmaData);
-    let gpuMemoryData = sqlite.queryGpuMemoryData;
-    let gpuData = [{
-        startNs:0,
-        value:1024,
-        ipid:1,
-    }];
-    gpuMemoryData.mockResolvedValue(gpuData);
-    let smapsExits = sqlite.querySmapsExits;
-    let exits = [{
-        event_name:'trace_smaps',
-    }];
-    smapsExits.mockResolvedValue(exits);
-    let vmTrackerShmData = sqlite.queryVmTrackerShmData;
-    let shmData = [{
-        startNs:0,
-        value:1024,
-    }];
-    vmTrackerShmData.mockResolvedValue(shmData);
-    let purgeableProcessData = sqlite.queryPurgeableProcessData;
-    let processData = [{
-        startNs:0,
-        value:1024,
-    }];
-    purgeableProcessData.mockResolvedValue(processData);
-    let gpuGlData = sqlite.queryGpuGLData;
-    let glData = [{
-        startNs:0,
-        value:1024,
-    }];
-    gpuGlData.mockResolvedValue(glData);
-    let gpuTotalData = sqlite.queryGpuTotalData;
-    let totalData = [{
-        startNs:0,
-        value:1024,
-    }];
-    gpuTotalData.mockResolvedValue(totalData);
-    let gpuTotalType = sqlite.queryGpuTotalType;
-    let totalType = [{
-        id:1,
-        data:'delay'
-    }];
-    gpuTotalType.mockResolvedValue(totalType);
-    let gpuWindowData = sqlite.queryGpuWindowData;
-    let windowsData = [{
-        startNs:0,
-        value:1024,
-    }];
-    gpuWindowData.mockResolvedValue(windowsData);
-    let gpuWindowType = sqlite.queryGpuWindowType;
-    let windowsType = [{
-        id:1,
-        data:'delay',
-        pid:1,
-    }];
-    gpuWindowType.mockResolvedValue(windowsType);
-    let manager = new SpChartManager();
-    let spVmTrackerChart = new VmTrackerChart(manager);
-    let memoryData = [{
-        startNs:0,
-        endNs: 0,
-        dur:0,
-        name: '',
-        textWidth: 0,
-        value: 0,
-        type: '',
-    }]
-    it('SpVmTrackerChart01', function () {
-        spVmTrackerChart.initVmTrackerFolder();
-        expect(spVmTrackerChart).toBeDefined();
-    });
-    it('SpVmTrackerChart02', function () {
-        expect(spVmTrackerChart.getSmapsKeyName('USS')).toBeDefined();
-    });
-    it('SpVmTrackerChart07', function () {
-        expect(spVmTrackerChart.getSmapsKeyName('RSS')).toBeDefined();
-    });
-    it('SpVmTrackerChart08', function () {
-        expect(spVmTrackerChart.getSmapsKeyName('')).toBeDefined();
-    });
-    it('SpVmTrackerChart03', function () {
-        expect(spVmTrackerChart.initTraceRow('dirty','smaps','VmTracker')).toBeDefined();
-    });
-    it('SpVmTrackerChart04', function () {
-        expect(spVmTrackerChart.initPurgeablePin()).toBeDefined();
-    });
-    it('SpVmTrackerChart05', function () {
-        expect(spVmTrackerChart.initPurgeableTotal()).toBeDefined();
-    });
-    it('SpVmTrackerChart06', function () {
-        expect(spVmTrackerChart.showTip).toBeDefined();
-    });
-    it('SpVmTrackerChart09', function () {
-        expect(spVmTrackerChart.initGpuFolder()).toBeDefined();
-    });
-    it('SpVmTrackerChart09', function () {
-        expect(spVmTrackerChart.initSMapsFolder()).toBeDefined();
-    });
-    it('SpVmTrackerChart10', function () {
-        expect(spVmTrackerChart.initVmTrackerFolder()).toBeDefined();
-    });
-    it('SpVmTrackerChart11', function () {
-        expect(spVmTrackerChart.initDmaRow()).toBeDefined();
-    });
-    it('SpVmTrackerChart12', function () {
-        expect(spVmTrackerChart.initSmapsRows('Swapped')).toBeDefined();
-    });
-    it('SpVmTrackerChart13', function () {
-        expect(spVmTrackerChart.initShmRows()).toBeDefined();
-    });
-    it('SpVmTrackerChart14', function () {
-        expect(spVmTrackerChart.initGpuMemoryRow(memoryData)).toBeDefined();
-    });
-    it('SpVmTrackerChart15', function () {
-        expect(spVmTrackerChart.addGpuGLRow(memoryData)).toBeDefined();
-    });
-    it('SpVmTrackerChart16', function () {
-        expect(spVmTrackerChart.addGpuTotalRow()).toBeDefined();
-    });
-});
\ No newline at end of file
+  let smapsData = sqlite.querySmapsData;
+  let smapsSixData = [
+    {
+      startNs: 0,
+      value: 1024,
+      name: 'dirty',
+    },
+  ];
+  smapsData.mockResolvedValue(smapsSixData);
+  let dmaSmapsData = sqlite.queryDmaSampsData;
+  let smapsDmaData = [
+    {
+      startNs: 0,
+      value: 1024,
+      flag: 1,
+      ipid: 1,
+      expTaskComm: 'delay',
+    },
+  ];
+  dmaSmapsData.mockResolvedValue(smapsDmaData);
+  let gpuMemoryData = sqlite.queryGpuMemoryData;
+  let gpuData = [
+    {
+      startNs: 0,
+      value: 1024,
+      ipid: 1,
+    },
+  ];
+  gpuMemoryData.mockResolvedValue(gpuData);
+  let smapsExits = sqlite.querySmapsExits;
+  let exits = [
+    {
+      event_name: 'trace_smaps',
+    },
+  ];
+  smapsExits.mockResolvedValue(exits);
+  let vmTrackerShmData = sqlite.queryVmTrackerShmData;
+  let shmData = [
+    {
+      startNs: 0,
+      value: 1024,
+    },
+  ];
+  vmTrackerShmData.mockResolvedValue(shmData);
+  let purgeableProcessData = sqlite.queryPurgeableProcessData;
+  let processData = [
+    {
+      startNs: 0,
+      value: 1024,
+    },
+  ];
+  purgeableProcessData.mockResolvedValue(processData);
+  let gpuGlData = sqlite.queryGpuGLData;
+  let glData = [
+    {
+      startNs: 0,
+      value: 1024,
+    },
+  ];
+  gpuGlData.mockResolvedValue(glData);
+  let gpuTotalData = sqlite.queryGpuTotalData;
+  let totalData = [
+    {
+      startNs: 0,
+      value: 1024,
+    },
+  ];
+  gpuTotalData.mockResolvedValue(totalData);
+  let gpuTotalType = sqlite.queryGpuTotalType;
+  let totalType = [
+    {
+      id: 1,
+      data: 'delay',
+    },
+  ];
+  gpuTotalType.mockResolvedValue(totalType);
+  let gpuWindowData = sqlite.queryGpuWindowData;
+  let windowsData = [
+    {
+      startNs: 0,
+      value: 1024,
+    },
+  ];
+  gpuWindowData.mockResolvedValue(windowsData);
+  let gpuWindowType = sqlite.queryGpuWindowType;
+  let windowsType = [
+    {
+      id: 1,
+      data: 'delay',
+      pid: 1,
+    },
+  ];
+  gpuWindowType.mockResolvedValue(windowsType);
+  let manager = new SpChartManager();
+  let spVmTrackerChart = new VmTrackerChart(manager);
+  let memoryData = [
+    {
+      startNs: 0,
+      endNs: 0,
+      dur: 0,
+      name: '',
+      textWidth: 0,
+      value: 0,
+      type: '',
+    },
+  ];
+  it('SpVmTrackerChart01', function () {
+    spVmTrackerChart.initVmTrackerFolder();
+    expect(spVmTrackerChart).toBeDefined();
+  });
+  it('SpVmTrackerChart02', function () {
+    expect(spVmTrackerChart.getSmapsKeyName('USS')).toBeDefined();
+  });
+  it('SpVmTrackerChart07', function () {
+    expect(spVmTrackerChart.getSmapsKeyName('RSS')).toBeDefined();
+  });
+  it('SpVmTrackerChart08', function () {
+    expect(spVmTrackerChart.getSmapsKeyName('')).toBeDefined();
+  });
+  it('SpVmTrackerChart03', function () {
+    expect(spVmTrackerChart.initTraceRow('dirty', 'smaps', 'VmTracker')).toBeDefined();
+  });
+  it('SpVmTrackerChart04', function () {
+    expect(spVmTrackerChart.initPurgeablePin()).toBeDefined();
+  });
+  it('SpVmTrackerChart05', function () {
+    expect(spVmTrackerChart.initPurgeableTotal()).toBeDefined();
+  });
+  it('SpVmTrackerChart06', function () {
+    expect(spVmTrackerChart.showTip).toBeDefined();
+  });
+  it('SpVmTrackerChart09', function () {
+    expect(spVmTrackerChart.initGpuFolder()).toBeDefined();
+  });
+  it('SpVmTrackerChart09', function () {
+    expect(spVmTrackerChart.initSMapsFolder()).toBeDefined();
+  });
+  it('SpVmTrackerChart10', function () {
+    expect(spVmTrackerChart.initVmTrackerFolder()).toBeDefined();
+  });
+  it('SpVmTrackerChart11', function () {
+    expect(spVmTrackerChart.initDmaRow()).toBeDefined();
+  });
+  it('SpVmTrackerChart12', function () {
+    expect(spVmTrackerChart.initSmapsRows('Swapped')).toBeDefined();
+  });
+  it('SpVmTrackerChart13', function () {
+    expect(spVmTrackerChart.initShmRows()).toBeDefined();
+  });
+  it('SpVmTrackerChart14', function () {
+    expect(spVmTrackerChart.initGpuMemoryRow(memoryData)).toBeDefined();
+  });
+  it('SpVmTrackerChart15', function () {
+    expect(spVmTrackerChart.addGpuGLRow(memoryData)).toBeDefined();
+  });
+  it('SpVmTrackerChart16', function () {
+    expect(spVmTrackerChart.addGpuTotalRow()).toBeDefined();
+  });
+});
diff --git a/ide/test/trace/component/metrics/DistributeTermStrategy.test.ts b/ide/test/trace/component/metrics/DistributeTermStrategy.test.ts
deleted file mode 100644
index 632af51c348f1fe8f4cfc6dc6c764ef24452245d..0000000000000000000000000000000000000000
--- a/ide/test/trace/component/metrics/DistributeTermStrategy.test.ts
+++ /dev/null
@@ -1,39 +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.
- */
-// @ts-ignore
-import { initDistributedTermData } from '../../../../dist/trace/component/metrics/DistributeTermStrategy.js';
-
-describe('DistributeTermStrategy Test', () => {
-  let metricData = [
-    {
-      length: 1,
-      funName: 'name',
-      ts: 'ts',
-      dur: '',
-      flag: 'fd,fdsf.fds',
-      trace_name: 'name1',
-      chainId: '1',
-      spanId: 'span',
-      parentSpanId: '',
-      processId: '',
-      threadId: '',
-      threadName: '',
-      processName: '',
-    },
-  ];
-  it('initDistributedTermDataTest01', () => {
-    expect(initDistributedTermData(metricData)).toBeTruthy();
-  });
-});
diff --git a/ide/test/trace/component/metrics/MemAggStrategy.test.ts b/ide/test/trace/component/metrics/MemAggStrategy.test.ts
index 62017c3a85d5ca50cd016a6a230a2462945cadc3..7f567100262eb7cc714714888f4661613d557de0 100644
--- a/ide/test/trace/component/metrics/MemAggStrategy.test.ts
+++ b/ide/test/trace/component/metrics/MemAggStrategy.test.ts
@@ -16,10 +16,19 @@
 import { initMemoryAggStrategy } from '../../../../dist/trace/component/metrics/MemAggStrategy.js';
 
 describe('MemAggStrategy Test', () => {
+  let metricData = [
+    {
+      length: 1,
+      processName: 'name',
+      name: 'oom_score_adj',
+      value: '',
+      ts: '',
+    },
+  ];
   it('initMemoryAggStrategyTest01', () => {
     const metricData = [
       {
-        length: 1,
+        length: 11,
         processName: 'name',
         name: 'oom_score_adj',
         value: '',
@@ -32,7 +41,7 @@ describe('MemAggStrategy Test', () => {
   it('initMemoryAggStrategyTest02', () => {
     const metricData = [
       {
-        length: 1,
+        length: 12,
         processName: 'name',
         name: 'mem.rss.anon',
         value: '',
@@ -45,7 +54,7 @@ describe('MemAggStrategy Test', () => {
   it('initMemoryAggStrategyTest03', () => {
     const metricData = [
       {
-        length: 1,
+        length: 13,
         processName: 'name',
         name: 'mem.swap',
         value: '',
@@ -58,7 +67,7 @@ describe('MemAggStrategy Test', () => {
   it('initMemoryAggStrategyTest04', () => {
     const metricData = [
       {
-        length: 1,
+        length: 14,
         processName: 'name',
         name: 'mem.rss.file',
         value: '',
@@ -71,7 +80,7 @@ describe('MemAggStrategy Test', () => {
   it('initMemoryAggStrategyTest05', () => {
     const metricData = [
       {
-        length: 1,
+        length: 15,
         processName: 'name',
         name: 'oom_score_adj',
         value: '',
diff --git a/ide/test/trace/component/schedulingAnalysis/CheckCpuSetting.test.ts b/ide/test/trace/component/schedulingAnalysis/CheckCpuSetting.test.ts
index b626bb36d8929f7126acdb01135ce2222776decd..85806d2339c916b291a767e1e2ef170c03fb2ef5 100644
--- a/ide/test/trace/component/schedulingAnalysis/CheckCpuSetting.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/CheckCpuSetting.test.ts
@@ -16,45 +16,47 @@
 import { CpuSetting, CheckCpuSetting } from '../../../../dist/trace/component/schedulingAnalysis/CheckCpuSetting.js';
 import '../../../../dist/trace/component/schedulingAnalysis/CheckCpuSetting.js';
 //@ts-ignore
-import {SpSchedulingAnalysis} from "../../../../dist/trace/component/schedulingAnalysis/SpSchedulingAnalysis.js";
+import { SpSchedulingAnalysis } from '../../../../dist/trace/component/schedulingAnalysis/SpSchedulingAnalysis.js';
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('CheckCpuSetting Test', () => {
-    it('CheckCpuSettingTest01', () => {
-        let cpuSetting = new CpuSetting();
-        expect(cpuSetting).not.toBeUndefined();
-    });
-    it('CheckCpuSettingTest02', () => {
-        let checkCpuSetting = new CheckCpuSetting();
-        expect(checkCpuSetting.init()).toBeUndefined();
-    });
-    it('CheckCpuSettingTest03', () => {
-        let checkCpuSetting = new CheckCpuSetting();
-        expect(checkCpuSetting.initDefaultSetting()).toBeUndefined();
-    });
-    it('CheckCpuSettingTest04', () => {
-        let checkCpuSetting = new CheckCpuSetting();
-        let cpuSetting = {
-            cpu: 1,
-            big: true,
-            middle: true,
-            small: true,
-        }
-        expect(checkCpuSetting.createTableLine(cpuSetting)).toBeUndefined();
-    });
-    it('CheckCpuSettingTest05', () => {
-        let checkCpuSetting = new CheckCpuSetting();
-        expect(checkCpuSetting.createHeaderDiv()).toBeUndefined();
-    });
+  it('CheckCpuSettingTest01', () => {
+    let cpuSetting = new CpuSetting();
+    expect(cpuSetting).not.toBeUndefined();
+  });
+  it('CheckCpuSettingTest02', () => {
+    let checkCpuSetting = new CheckCpuSetting();
+    expect(checkCpuSetting.init()).toBeUndefined();
+  });
+  it('CheckCpuSettingTest03', () => {
+    let checkCpuSetting = new CheckCpuSetting();
+    expect(checkCpuSetting.initDefaultSetting()).toBeUndefined();
+  });
+  it('CheckCpuSettingTest04', () => {
+    let checkCpuSetting = new CheckCpuSetting();
+    let cpuSetting = {
+      cpu: 1,
+      big: true,
+      middle: true,
+      small: true,
+    };
+    expect(checkCpuSetting.createTableLine(cpuSetting)).toBeUndefined();
+  });
+  it('CheckCpuSettingTest05', () => {
+    let checkCpuSetting = new CheckCpuSetting();
+    expect(checkCpuSetting.createHeaderDiv()).toBeUndefined();
+  });
 
-    it('CheckCpuSettingTest06', () => {
-        CheckCpuSetting.resetCpuSettings();
-        expect(CheckCpuSetting.init_setting).toBeFalsy();
-    });
-})
\ No newline at end of file
+  it('CheckCpuSettingTest06', () => {
+    CheckCpuSetting.resetCpuSettings();
+    expect(CheckCpuSetting.init_setting).toBeFalsy();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/DrawerCpuTabs.test.ts b/ide/test/trace/component/schedulingAnalysis/DrawerCpuTabs.test.ts
index d72e27874584e03defe0dc8dd050d06896f1a593..faacafb07ff797c43ca51aa4fd93d0ca34dbfe13 100644
--- a/ide/test/trace/component/schedulingAnalysis/DrawerCpuTabs.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/DrawerCpuTabs.test.ts
@@ -14,37 +14,39 @@
  */
 //@ts-ignore
 import { DrawerCpuTabs } from '../../../../dist/trace/component/schedulingAnalysis/DrawerCpuTabs.js';
-import crypto from "crypto";
+import crypto from 'crypto';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 Object.defineProperty(global.self, 'crypto', {
-    value: {
-        getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
-    },
+  value: {
+    getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
+  },
 });
 
 describe('DrawerCpuTabs Test', () => {
-    it('DrawerCpuTabsTest01', () => {
-        let drawerCpuTabs = new DrawerCpuTabs();
-        expect(drawerCpuTabs.init(1,'1')).not.toBe(0);
-    });
-    it('DrawerCpuTabsTest02', () => {
-        let drawerCpuTabs = new DrawerCpuTabs();
-        drawerCpuTabs.init(1,'2');
-        expect(drawerCpuTabs.cpuNumber).toEqual(1);
-    });
-    it('DrawerCpuTabsTest03', () => {
-        let drawerCpuTabs = new DrawerCpuTabs();
-        drawerCpuTabs.init(1,'3');
-        expect(drawerCpuTabs.cpuNumber).toEqual(1);
-    });
-    it('DrawerCpuTabsTest04', () => {
-        let drawerCpuTabs = new DrawerCpuTabs();
-        expect(drawerCpuTabs.clearData()).toBeUndefined()
-    });
-})
\ No newline at end of file
+  it('DrawerCpuTabsTest01', () => {
+    let drawerCpuTabs = new DrawerCpuTabs();
+    expect(drawerCpuTabs.init(1, '1')).not.toBe(0);
+  });
+  it('DrawerCpuTabsTest02', () => {
+    let drawerCpuTabs = new DrawerCpuTabs();
+    drawerCpuTabs.init(1, '2');
+    expect(drawerCpuTabs.cpuNumber).toEqual(1);
+  });
+  it('DrawerCpuTabsTest03', () => {
+    let drawerCpuTabs = new DrawerCpuTabs();
+    drawerCpuTabs.init(1, '3');
+    expect(drawerCpuTabs.cpuNumber).toEqual(1);
+  });
+  it('DrawerCpuTabsTest04', () => {
+    let drawerCpuTabs = new DrawerCpuTabs();
+    expect(drawerCpuTabs.clearData()).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/SpSchedulingAnalysis.test.ts b/ide/test/trace/component/schedulingAnalysis/SpSchedulingAnalysis.test.ts
index 2f8e0ddf85bea6a53f085048fb40ef05d2f5ffc7..97b28ea49268ea01e0798166e7c2ac8e716148ed 100644
--- a/ide/test/trace/component/schedulingAnalysis/SpSchedulingAnalysis.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/SpSchedulingAnalysis.test.ts
@@ -17,19 +17,16 @@ import { SpSchedulingAnalysis } from '../../../../dist/trace/component/schedulin
 import '../../../../dist/trace/component/schedulingAnalysis/SpSchedulingAnalysis.js';
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('SpSchedulingAnalysis Test', () => {
-    it('SpSchedulingAnalysisTest01', () => {
-        let spSchedulingAnalysis = new SpSchedulingAnalysis();
-        SpSchedulingAnalysis.traceChange = true
-        expect(spSchedulingAnalysis.init()).toBeUndefined();
-    });
-    it('SpSchedulingAnalysisTest02', () => {
-        expect(SpSchedulingAnalysis.resetCpu()).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('SpSchedulingAnalysisTest02', () => {
+    expect(SpSchedulingAnalysis.resetCpu()).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/TabCpuAnalysis.test.ts b/ide/test/trace/component/schedulingAnalysis/TabCpuAnalysis.test.ts
index 2300c3d8fc0c13bfffd9b2ef11e61cfc211b14f6..4682a145dcb0397c2a2f511d4bc6b6df04fd1e53 100644
--- a/ide/test/trace/component/schedulingAnalysis/TabCpuAnalysis.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/TabCpuAnalysis.test.ts
@@ -15,28 +15,30 @@
 //@ts-ignore
 import { TabCpuAnalysis } from '../../../../dist/trace/component/schedulingAnalysis/TabCpuAnalysis.js';
 //@ts-ignore
-import {SpSchedulingAnalysis} from "../../../../dist/trace/component/schedulingAnalysis/SpSchedulingAnalysis.js";
+import { SpSchedulingAnalysis } from '../../../../dist/trace/component/schedulingAnalysis/SpSchedulingAnalysis.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('TabCpuAnalysis Test', () => {
-    it('TabCpuAnalysisTest01', () => {
-        let tabCpuAnalysis = new TabCpuAnalysis();
-        expect(tabCpuAnalysis).not.toBeUndefined();
-    });
-    it('TabCpuAnalysisTest02', () => {
-        let tabCpuAnalysis = new TabCpuAnalysis();
-        tabCpuAnalysis.queryLogicWorker = jest.fn();
-        SpSchedulingAnalysis.cpuCount = 3
-        expect(tabCpuAnalysis.init()).toBeUndefined();
-    });
-    it('TabCpuAnalysisTest04', () => {
-        let tabCpuAnalysis = new TabCpuAnalysis();
-        tabCpuAnalysis.queryLogicWorker = jest.fn();
-        expect(tabCpuAnalysis.queryLogicWorker('','',{})).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('TabCpuAnalysisTest01', () => {
+    let tabCpuAnalysis = new TabCpuAnalysis();
+    expect(tabCpuAnalysis).not.toBeUndefined();
+  });
+  it('TabCpuAnalysisTest02', () => {
+    let tabCpuAnalysis = new TabCpuAnalysis();
+    tabCpuAnalysis.queryLogicWorker = jest.fn();
+    SpSchedulingAnalysis.cpuCount = 3;
+    expect(tabCpuAnalysis.init()).toBeUndefined();
+  });
+  it('TabCpuAnalysisTest04', () => {
+    let tabCpuAnalysis = new TabCpuAnalysis();
+    tabCpuAnalysis.queryLogicWorker = jest.fn();
+    expect(tabCpuAnalysis.queryLogicWorker('', '', {})).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.test.ts b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.test.ts
index 22a6931a65bb2d9abdf763beb186512e701db1e4..42c4a0c267817dcc2b322b1e5412fe9ffb2cb66f 100644
--- a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.test.ts
@@ -15,23 +15,25 @@
 //@ts-ignore
 import { TabCpuDetailsFrequency } from '../../../../dist/trace/component/schedulingAnalysis/TabCpuDetailsFrequency.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('SpSchedulingAnalysis Test', () => {
-    it('SpSchedulingAnalysisTest01', () => {
-        let tabCpuDetailsFrequency = new TabCpuDetailsFrequency();
-        expect(tabCpuDetailsFrequency.clearData()).toBeUndefined();
-    });
-    it('SpSchedulingAnalysisTest02', () => {
-        let tabCpuDetailsFrequency = new TabCpuDetailsFrequency();
-        expect(
-            tabCpuDetailsFrequency.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('SpSchedulingAnalysisTest01', () => {
+    let tabCpuDetailsFrequency = new TabCpuDetailsFrequency();
+    expect(tabCpuDetailsFrequency.clearData()).toBeUndefined();
+  });
+  it('SpSchedulingAnalysisTest02', () => {
+    let tabCpuDetailsFrequency = new TabCpuDetailsFrequency();
+    expect(
+      tabCpuDetailsFrequency.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIdle.test.ts b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIdle.test.ts
index e4694a10b98a8b71e677d7b13ad4a17a88aa3c8c..a4ab3576c45d8aef4ef77b87450cea51ff4f4d40 100644
--- a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIdle.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIdle.test.ts
@@ -15,23 +15,25 @@
 //@ts-ignore
 import { TabCpuDetailsIdle } from '../../../../dist/trace/component/schedulingAnalysis/TabCpuDetailsIdle.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('TabCpuDetailsIdle Test', () => {
-    it('TabCpuDetailsIdleTest01', () => {
-        let tabCpuDetailsIdle = new TabCpuDetailsIdle();
-        expect(tabCpuDetailsIdle.clearData()).toBeUndefined();
-    });
-    it('TabCpuDetailsIdleTest02', () => {
-        let tabCpuDetailsIdle = new TabCpuDetailsIdle();
-        expect(
-            tabCpuDetailsIdle.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('TabCpuDetailsIdleTest01', () => {
+    let tabCpuDetailsIdle = new TabCpuDetailsIdle();
+    expect(tabCpuDetailsIdle.clearData()).toBeUndefined();
+  });
+  it('TabCpuDetailsIdleTest02', () => {
+    let tabCpuDetailsIdle = new TabCpuDetailsIdle();
+    expect(
+      tabCpuDetailsIdle.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIrq.test.ts b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIrq.test.ts
index 9cf49385cad9dad224dfb77146f05ba709c6e0a4..c6bceeb2e3815770983a691f0933cc648a67be82 100644
--- a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIrq.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsIrq.test.ts
@@ -15,23 +15,25 @@
 //@ts-ignore
 import { TabCpuDetailsIrq } from '../../../../dist/trace/component/schedulingAnalysis/TabCpuDetailsIrq.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('TabCpuDetailsIrq Test', () => {
-    it('TabCpuDetailsIrqTest01', () => {
-        let tabCpuDetailsIrq = new TabCpuDetailsIrq();
-        expect(tabCpuDetailsIrq.clearData()).toBeUndefined();
-    });
-    it('TabCpuDetailsIrqTest02', () => {
-        let tabCpuDetailsIrq = new TabCpuDetailsIrq();
-        expect(
-            tabCpuDetailsIrq.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('TabCpuDetailsIrqTest01', () => {
+    let tabCpuDetailsIrq = new TabCpuDetailsIrq();
+    expect(tabCpuDetailsIrq.clearData()).toBeUndefined();
+  });
+  it('TabCpuDetailsIrqTest02', () => {
+    let tabCpuDetailsIrq = new TabCpuDetailsIrq();
+    expect(
+      tabCpuDetailsIrq.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsThreads.test.ts b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsThreads.test.ts
index 9819a5f4d647dd39e6d21f200ab7919271831bfe..7e6a191c4114aa80ba17621127cc3e6815a0b4c7 100644
--- a/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsThreads.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/TabCpuDetailsThreads.test.ts
@@ -15,41 +15,43 @@
 //@ts-ignore
 import { TabCpuDetailsThreads } from '../../../../dist/trace/component/schedulingAnalysis/TabCpuDetailsThreads.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('TabCpuDetailsThreads Test', () => {
-    it('TabCpuDetailsThreadsTest01', () => {
-        let tabCpuDetailsThreads = new TabCpuDetailsThreads();
-        expect(
-            tabCpuDetailsThreads.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-    it('TabCpuDetailsThreadsTest02', () => {
-        let tabCpuDetailsThreads = new TabCpuDetailsThreads();
-        let data = [
-            {
-                pid: 1,
-                pName: 1,
-                tid: 2,
-                tName: '',
-                total: 1,
-                size: 'middle core',
-                no: '',
-                timeStr: '',
-            }
-        ]
-        tabCpuDetailsThreads.cpuDetailsThreadUsageTbl.reMeauseHeight = jest.fn();
-        expect(tabCpuDetailsThreads.queryPieChartDataByType(data)).toBeUndefined();
-    });
-    it('TabCpuDetailsThreadsTest02', () => {
-        let tabCpuDetailsThreads = new TabCpuDetailsThreads();
-        tabCpuDetailsThreads.init = jest.fn();
-        expect(tabCpuDetailsThreads.init(1,{})).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('TabCpuDetailsThreadsTest01', () => {
+    let tabCpuDetailsThreads = new TabCpuDetailsThreads();
+    expect(
+      tabCpuDetailsThreads.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+  it('TabCpuDetailsThreadsTest02', () => {
+    let tabCpuDetailsThreads = new TabCpuDetailsThreads();
+    let data = [
+      {
+        pid: 32,
+        pName: 22,
+        tid: 162,
+        tName: '',
+        total: 132,
+        size: 'middle core',
+        no: '',
+        timeStr: '56.09kb',
+      },
+    ];
+    tabCpuDetailsThreads.cpuDetailsThreadUsageTbl.reMeauseHeight = jest.fn();
+    expect(tabCpuDetailsThreads.queryPieChartDataByType(data)).toBeUndefined();
+  });
+  it('TabCpuDetailsThreadsTest02', () => {
+    let tabCpuDetailsThreads = new TabCpuDetailsThreads();
+    tabCpuDetailsThreads.init = jest.fn();
+    expect(tabCpuDetailsThreads.init(1, {})).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/TabThreadAnalysis.test.ts b/ide/test/trace/component/schedulingAnalysis/TabThreadAnalysis.test.ts
index 1a3b38e7e03559e80220bff9342c15bc45a8c9af..839958c129189c50d06b213ea7fe034a14c795c7 100644
--- a/ide/test/trace/component/schedulingAnalysis/TabThreadAnalysis.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/TabThreadAnalysis.test.ts
@@ -15,19 +15,28 @@
 //@ts-ignore
 import { TabThreadAnalysis } from '../../../../dist/trace/component/schedulingAnalysis/TabThreadAnalysis.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
+jest.mock('../../../../dist/trace/component/schedulingAnalysis/Top20FrequencyThread.js', () => {
+  return {
+    clearData: () => {},
+  };
+});
 
 describe('TabThreadAnalysis Test', () => {
-    it('TabThreadAnalysisTest01', () => {
-        let tabThreadAnalysis = new TabThreadAnalysis();
-        expect(tabThreadAnalysis.init()).toBeUndefined();
-    });
-    it('TabThreadAnalysisTest02', () => {
-        let tabThreadAnalysis = new TabThreadAnalysis();
-        expect(tabThreadAnalysis.hideCurrentTab()).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('TabThreadAnalysisTest01', () => {
+    let tabThreadAnalysis = new TabThreadAnalysis();
+    tabThreadAnalysis.top20FrequencyThread = jest.fn(() => true);
+    tabThreadAnalysis.top20FrequencyThread.clearData = jest.fn(() => true);
+    expect(tabThreadAnalysis.init()).toBeUndefined();
+  });
+  it('TabThreadAnalysisTest02', () => {
+    let tabThreadAnalysis = new TabThreadAnalysis();
+    expect(tabThreadAnalysis.hideCurrentTab()).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/Top20FrequencyThread.test.ts b/ide/test/trace/component/schedulingAnalysis/Top20FrequencyThread.test.ts
index 53c9a7c76c132c76d18f479e933c40f715e698c9..91aeb1464eb87e59bf2efcea061e31af63b42699 100644
--- a/ide/test/trace/component/schedulingAnalysis/Top20FrequencyThread.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/Top20FrequencyThread.test.ts
@@ -14,51 +14,43 @@
  */
 //@ts-ignore
 import { Top20FrequencyThread } from '../../../../dist/trace/component/schedulingAnalysis/Top20FrequencyThread.js';
+import '../../../../dist/trace/component/schedulingAnalysis/Top20FrequencyThread.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('Top20FrequencyThread Test', () => {
-    it('Top20FrequencyThreadTest01', () => {
-        let top20FrequencyThread = new Top20FrequencyThread();
-        expect(top20FrequencyThread).not.toBeUndefined();
-    });
-    it('Top20FrequencyThreadTest02', () => {
-        let top20FrequencyThread = new Top20FrequencyThread();
-        expect(
-            top20FrequencyThread.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-    it('Top20FrequencyThreadTest03', () => {
-        let top20FrequencyThread = new Top20FrequencyThread();
-        top20FrequencyThread.queryLogicWorker = jest.fn();
-        expect(top20FrequencyThread.queryData()).toBeUndefined();
-    });
-    it('Top20FrequencyThreadTest04', () => {
-        let top20FrequencyThread = new Top20FrequencyThread();
-        top20FrequencyThread.queryLogicWorker = jest.fn();
-        let res = [
-            {
-                length:21,
-                time:'',
-                totalDur:1
-            }
-        ]
-        expect(top20FrequencyThread.getPieChartData(res)).toStrictEqual([{"length": 21, "time": "", "totalDur": 1}]);
-    });
-    it('Top20FrequencyThreadTest05', () => {
-        let top20FrequencyThread = new Top20FrequencyThread();
-        top20FrequencyThread.queryLogicWorker = jest.fn();
-        expect(top20FrequencyThread.queryLogicWorker('','',{})).toBeUndefined();
-    });
-    it('Top20FrequencyThreadTest06', () => {
-        let top20FrequencyThread = new Top20FrequencyThread();
-        top20FrequencyThread.init = jest.fn();
-        expect(top20FrequencyThread.init()).toBeUndefined();
-    });
-})
\ No newline at end of file
+  document.body.innerHTML = `<tabpane-frequency-thread id="thread"></tabpane-frequency-thread>`;
+  let top20FrequencyThread = document.querySelector<Top20FrequencyThread>('#thread');
+  window.postMessage = jest.fn(() => true);
+  top20FrequencyThread.frequencyThreadTbl = jest.fn(() => true);
+  top20FrequencyThread.frequencyThreadTbl.itemTextHandleMap = new Map();
+  top20FrequencyThread.frequencyThreadTbl.itemTextHandleMap.set('freq', 1);
+  it('Top20FrequencyThreadTest01', () => {
+    expect(top20FrequencyThread).not.toBeUndefined();
+  });
+  it('Top20FrequencyThreadTest02', () => {
+    expect(top20FrequencyThread.sortByColumn).toBeUndefined();
+  });
+  it('Top20FrequencyThreadTest03', () => {
+    top20FrequencyThread.queryLogicWorker = jest.fn();
+    expect(top20FrequencyThread.queryData).toBeUndefined();
+  });
+  it('Top20FrequencyThreadTest04', () => {
+    top20FrequencyThread.queryLogicWorker = jest.fn();
+    expect(top20FrequencyThread.getPieChartData).toBeUndefined();
+  });
+  it('Top20FrequencyThreadTest05', () => {
+    top20FrequencyThread.queryLogicWorker = jest.fn();
+    expect(top20FrequencyThread.queryLogicWorker('', '', {})).toBeUndefined();
+  });
+  it('Top20FrequencyThreadTest06', () => {
+    top20FrequencyThread.init = jest.fn();
+    expect(top20FrequencyThread.init()).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.test.ts b/ide/test/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.test.ts
index c97121f96214410e2aba814d5f138a5f08996f9e..aa764223304243fabae5c4311c766f7f122f419a 100644
--- a/ide/test/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.test.ts
@@ -15,28 +15,30 @@
 //@ts-ignore
 import { Top20ProcessSwitchCount } from '../../../../dist/trace/component/schedulingAnalysis/Top20ProcessSwitchCount.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('Top20ProcessSwitchCount Test', () => {
-    it('Top20ProcessSwitchCountTest01', () => {
-        let top20ProcessSwitchCount = new Top20ProcessSwitchCount();
-        expect(top20ProcessSwitchCount).not.toBeUndefined();
-    });
-    it('Top20ProcessSwitchCountTest02', () => {
-        let top20ProcessSwitchCount = new Top20ProcessSwitchCount();
-        expect(
-            top20ProcessSwitchCount.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-    it('Top20ProcessSwitchCountTest03', () => {
-        let top20ProcessSwitchCount = new Top20ProcessSwitchCount();
-        top20ProcessSwitchCount.queryLogicWorker = jest.fn();
-        expect(top20ProcessSwitchCount.queryLogicWorker('','',{})).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('Top20ProcessSwitchCountTest01', () => {
+    let top20ProcessSwitchCount = new Top20ProcessSwitchCount();
+    expect(top20ProcessSwitchCount).not.toBeUndefined();
+  });
+  it('Top20ProcessSwitchCountTest02', () => {
+    let top20ProcessSwitchCount = new Top20ProcessSwitchCount();
+    expect(
+      top20ProcessSwitchCount.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+  it('Top20ProcessSwitchCountTest03', () => {
+    let top20ProcessSwitchCount = new Top20ProcessSwitchCount();
+    top20ProcessSwitchCount.queryLogicWorker = jest.fn();
+    expect(top20ProcessSwitchCount.queryLogicWorker('', '', {})).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/Top20ProcessThreadCount.test.ts b/ide/test/trace/component/schedulingAnalysis/Top20ProcessThreadCount.test.ts
index c51a9631d10f76a210776a14039248030317c115..e80515d96e756b46cdab79d0f23e13644e79a998 100644
--- a/ide/test/trace/component/schedulingAnalysis/Top20ProcessThreadCount.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/Top20ProcessThreadCount.test.ts
@@ -15,28 +15,30 @@
 //@ts-ignore
 import { Top20ProcessThreadCount } from '../../../../dist/trace/component/schedulingAnalysis/Top20ProcessThreadCount.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('Top20ProcessSwitchCount Test', () => {
-    it('Top20ProcessSwitchCountTest01', () => {
-        let top20ProcessThreadCount = new Top20ProcessThreadCount();
-        expect(top20ProcessThreadCount).not.toBeUndefined();
-    });
-    it('Top20ProcessSwitchCountTest02', () => {
-        let top20ProcessThreadCount = new Top20ProcessThreadCount();
-        expect(
-            top20ProcessThreadCount.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-    it('Top20ProcessSwitchCountTest03', () => {
-        let top20ProcessThreadCount = new Top20ProcessThreadCount();
-        top20ProcessThreadCount.queryLogicWorker = jest.fn();
-        expect(top20ProcessThreadCount.queryLogicWorker('','',{})).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('Top20ProcessSwitchCountTest01', () => {
+    let top20ProcessThreadCount = new Top20ProcessThreadCount();
+    expect(top20ProcessThreadCount).not.toBeUndefined();
+  });
+  it('Top20ProcessSwitchCountTest02', () => {
+    let top20ProcessThreadCount = new Top20ProcessThreadCount();
+    expect(
+      top20ProcessThreadCount.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+  it('Top20ProcessSwitchCountTest03', () => {
+    let top20ProcessThreadCount = new Top20ProcessThreadCount();
+    top20ProcessThreadCount.queryLogicWorker = jest.fn();
+    expect(top20ProcessThreadCount.queryLogicWorker('', '', {})).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.test.ts b/ide/test/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.test.ts
index 8c9e897f6f829801aca7d41835126e3f39803ecc..0927b0cee4f654e85d81f4d40a78577bb6e27eec 100644
--- a/ide/test/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.test.ts
@@ -15,107 +15,113 @@
 //@ts-ignore
 import { Top20ThreadCpuUsage } from '../../../../dist/trace/component/schedulingAnalysis/Top20ThreadCpuUsage.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('Top20ThreadCpuUsage Test', () => {
-    it('Top20ThreadCpuUsageTest01', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        expect(top20ThreadCpuUsage).not.toBeUndefined();
-    });
-    it('Top20ThreadCpuUsageTest02', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        let data = [
-            {
-                pid: 1,
-                pName: 1,
-                tid: 2,
-                tName: '',
-                total: 1,
-                size: 'middle core',
-                no: '',
-                timeStr: '',
-            }
-        ]
-        expect(top20ThreadCpuUsage.sortByColumn({key: 'bigTimeStr'},{},data)).toBeUndefined();
-    });
-    it('Top20ThreadCpuUsageTest03', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        top20ThreadCpuUsage.queryLogicWorker = jest.fn();
-        expect(top20ThreadCpuUsage.queryData()).toBeUndefined();
-    });
-    it('Top20ThreadCpuUsageTest04', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        let data = [
-            {
-                pid: 1,
-                pName: 1,
-                tid: 2,
-                tName: '',
-                total: 1,
-                size: 'middle core',
-                no: '',
-                timeStr: '',
-            }
-        ]
-        expect(top20ThreadCpuUsage.getArrayDataBySize('total',data)).toStrictEqual(
-            [{"no": "", "pName": 1, "pid": 1, "size": "big core", "tName": "", "tid": 2, "timeStr": undefined, "total": undefined}, {"no": "", "pName": 1, "pid": 1, "size": "middle core", "tName": "", "tid": 2, "timeStr": undefined, "total": undefined}, {"no": "", "pName": 1, "pid": 1, "size": "small core", "tName": "", "tid": 2, "timeStr": undefined, "total": undefined}]
-        );
-    });
-    it('Top20ThreadCpuUsageTest05', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        let data = [
-            {
-                pid: 1,
-                pName: 1,
-                tid: 2,
-                tName: '',
-                total: 1,
-                size: 'middle core',
-                no: '',
-                timeStr: '',
-            }
-        ]
-        expect(top20ThreadCpuUsage.sortByColumn({key: 'midTimeStr'},{},data)).toBeUndefined();
-    });
-    it('Top20ThreadCpuUsageTest06', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        let data = [
-            {
-                pid: 1,
-                pName: 1,
-                tid: 2,
-                tName: '',
-                total: 1,
-                size: 'middle core',
-                no: '',
-                timeStr: '',
-            }
-        ]
-        expect(top20ThreadCpuUsage.sortByColumn({key: 'smallTimeStr'},{},data)).toBeUndefined();
-    });
-    it('Top20ThreadCpuUsageTest07', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        let data = [
-            {
-                pid: 1,
-                pName: 1,
-                tid: 2,
-                tName: '',
-                total: 1,
-                size: 'middle core',
-                no: '',
-                timeStr: '',
-            }
-        ]
-        expect(top20ThreadCpuUsage.sortByColumn({key: 'bigPercent'},{},data)).toBeUndefined();
-    });
-    it('Top20ThreadCpuUsageTest08', () => {
-        let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
-        top20ThreadCpuUsage.queryLogicWorker = jest.fn();
-        expect(top20ThreadCpuUsage.queryLogicWorker('','',{})).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('Top20ThreadCpuUsageTest01', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    expect(top20ThreadCpuUsage).not.toBeUndefined();
+  });
+  it('Top20ThreadCpuUsageTest02', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    let data = [
+      {
+        pid: 101,
+        pName: 4,
+        tid: 311,
+        tName: '',
+        total: 112,
+        size: 'middle core',
+        no: '',
+        timeStr: '120.00kb',
+      },
+    ];
+    expect(top20ThreadCpuUsage.sortByColumn({ key: 'bigTimeStr' }, {}, data)).toBeUndefined();
+  });
+  it('Top20ThreadCpuUsageTest03', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    top20ThreadCpuUsage.queryLogicWorker = jest.fn();
+    expect(top20ThreadCpuUsage.queryData()).toBeUndefined();
+  });
+  it('Top20ThreadCpuUsageTest04', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    let data = [
+      {
+        pid: 32,
+        pName: 21,
+        tid: 224,
+        tName: 'thread1',
+        total: 1,
+        size: 'middle core',
+        no: '',
+        timeStr: '19.00kb',
+      },
+    ];
+    expect(top20ThreadCpuUsage.getArrayDataBySize('total', data)).toStrictEqual(
+        [
+          {"no": "", "pName": 21, "pid": 32, "size": "big core", "tName": "thread1", "tid": 224, "timeStr": undefined, "total": undefined},
+          {"no": "", "pName": 21, "pid": 32, "size": "middle core", "tName": "thread1", "tid": 224, "timeStr": undefined, "total": undefined},
+          {"no": "", "pName": 21, "pid": 32, "size": "small core", "tName": "thread1", "tid": 224, "timeStr": undefined, "total": undefined}
+          ]
+    );
+  });
+  it('Top20ThreadCpuUsageTest05', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    let data = [
+      {
+        pid: 35,
+        pName: 651,
+        tid: 43,
+        tName: 'thread3',
+        total: 65,
+        size: 'middle core',
+        no: '',
+        timeStr: '123.0kb',
+      },
+    ];
+    expect(top20ThreadCpuUsage.sortByColumn({ key: 'midTimeStr' }, {}, data)).toBeUndefined();
+  });
+  it('Top20ThreadCpuUsageTest06', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    let data = [
+      {
+        pid: 32,
+        pName: 2342,
+        tid: 543,
+        tName: 'thread6',
+        total: 120,
+        size: 'middle core',
+        no: '',
+        timeStr: '133.320kb',
+      },
+    ];
+    expect(top20ThreadCpuUsage.sortByColumn({ key: 'smallTimeStr' }, {}, data)).toBeUndefined();
+  });
+  it('Top20ThreadCpuUsageTest07', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    let data = [
+      {
+        pid: 67,
+        pName: 161,
+        tid: 87,
+        tName: 'thread90',
+        total: 322,
+        size: 'middle core',
+        no: '',
+        timeStr: '190.32kb',
+      },
+    ];
+    expect(top20ThreadCpuUsage.sortByColumn({ key: 'bigPercent' }, {}, data)).toBeUndefined();
+  });
+  it('Top20ThreadCpuUsageTest08', () => {
+    let top20ThreadCpuUsage = new Top20ThreadCpuUsage();
+    top20ThreadCpuUsage.queryLogicWorker = jest.fn();
+    expect(top20ThreadCpuUsage.queryLogicWorker('', '', {})).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/schedulingAnalysis/Top20ThreadRunTime.test.ts b/ide/test/trace/component/schedulingAnalysis/Top20ThreadRunTime.test.ts
index aab3af83c011c973f5d4b67c8fbd3abb4960f8e5..1a0e34d2eaaf6cd6f94eada84d54b49a5755238c 100644
--- a/ide/test/trace/component/schedulingAnalysis/Top20ThreadRunTime.test.ts
+++ b/ide/test/trace/component/schedulingAnalysis/Top20ThreadRunTime.test.ts
@@ -15,34 +15,36 @@
 //@ts-ignore
 import { Top20ThreadRunTime } from '../../../../dist/trace/component/schedulingAnalysis/Top20ThreadRunTime.js';
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
-}));
+  }));
 
 describe('Top20ThreadRunTime Test', () => {
-    it('Top20ThreadRunTimeTest01', () => {
-        let top20ThreadRunTime = new Top20ThreadRunTime();
-        expect(top20ThreadRunTime).not.toBeUndefined();
-    });
-    it('Top20ThreadRunTimeTest02', () => {
-        let top20ThreadRunTime = new Top20ThreadRunTime();
-        expect(
-            top20ThreadRunTime.sortByColumn({
-                key: 'number',
-            })
-        ).toBeUndefined();
-    });
-    it('Top20ThreadRunTimeTest03', () => {
-        let top20ThreadRunTime = new Top20ThreadRunTime();
-        top20ThreadRunTime.queryLogicWorker = jest.fn();
-        expect(top20ThreadRunTime.queryLogicWorker('','',{})).toBeUndefined();
-    });
-    it('Top20ThreadRunTimeTest04', () => {
-        let top20ThreadRunTime = new Top20ThreadRunTime();
-        top20ThreadRunTime.queryLogicWorker = jest.fn();
-        top20ThreadRunTime.init = jest.fn();
-        expect(top20ThreadRunTime.init()).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('Top20ThreadRunTimeTest01', () => {
+    let top20ThreadRunTime = new Top20ThreadRunTime();
+    expect(top20ThreadRunTime).not.toBeUndefined();
+  });
+  it('Top20ThreadRunTimeTest02', () => {
+    let top20ThreadRunTime = new Top20ThreadRunTime();
+    expect(
+      top20ThreadRunTime.sortByColumn({
+        key: 'number',
+      })
+    ).toBeUndefined();
+  });
+  it('Top20ThreadRunTimeTest03', () => {
+    let top20ThreadRunTime = new Top20ThreadRunTime();
+    top20ThreadRunTime.queryLogicWorker = jest.fn();
+    expect(top20ThreadRunTime.queryLogicWorker('', '', {})).toBeUndefined();
+  });
+  it('Top20ThreadRunTimeTest04', () => {
+    let top20ThreadRunTime = new Top20ThreadRunTime();
+    top20ThreadRunTime.queryLogicWorker = jest.fn();
+    top20ThreadRunTime.init = jest.fn();
+    expect(top20ThreadRunTime.init()).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/setting/SpAllocations.test.ts b/ide/test/trace/component/setting/SpAllocations.test.ts
index 42a00a54f169aa7421fb72279d0bedc24399a806..974402d73574727605a2d998d1a0970463cce8e5 100644
--- a/ide/test/trace/component/setting/SpAllocations.test.ts
+++ b/ide/test/trace/component/setting/SpAllocations.test.ts
@@ -81,240 +81,6 @@ describe('SpAllocations Test', () => {
     expect(spEle.filter).toEqual(111);
   });
 
-  it('SpAllocations test04', function () {
-    let spEle = document.querySelector('#sp') as SpAllocations;
-    expect(spEle.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .root {
-            padding-top: 45px;
-            margin-left: 40px;
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            grid-template-rows: min-content 1fr min-content;
-            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;
-        }
-
-        .font-style{
-            font-family: Helvetica-Bold;
-            font-size: 1em;
-            color: var(--dark-color1,#000000);
-            line-height: 28px;
-            font-weight: 700;
-        }
-        .inner-font-style {
-            font-family: Helvetica,serif;
-            font-size: 1em;
-            color: var(--dark-color1,#000000);
-            text-align: left;
-            line-height: 20px;
-            font-weight: 400;
-            display:flex;
-            width:75%; 
-            margin-top: 3px;
-           
-        }
-        input {
-           width: 72%;
-           height: 25px;
-           border:0;
-           outline:none;
-           border-radius: 16px;
-           text-indent:2%
-        }
-        input::-webkit-input-placeholder{
-            color:var(--bark-prompt,#999999);
-        }
-        .select {
-            height: 30px;
-            border:0;
-            border-radius: 3px;
-            outline:none;
-            border: 1px solid var(--dark-border,#B3B3B3);
-            width: 60px;
-            background-color:var(--dark-background5, #FFFFFF)
-            font-family: Helvetica;
-            font-size: 14px;
-            color:var(--dark-color,#212121)
-            text-align: center;
-            line-height: 16px;
-            font-weight: 400;
-            border-radius: 16px;
-        }
-        .application{
-           display: flex;
-           flex-direction: column;
-           grid-gap: 15px;
-           margin-top: 40px;
-        }
-        .switchstyle{
-           margin-top: 40px;
-           display: flex;
-        }
-        .inputstyle{
-            background: var(--dark-background5,#FFFFFF);
-            border: 1px solid var(--dark-background5,#999999);
-            font-family: Helvetica;
-            font-size: 14px;
-            color: var(--dark-color1,#212121);
-            text-align: left;
-            line-height: 16px;
-            font-weight: 400;
-        }
-        .inputstyle::-webkit-input-placeholder {
-           background: var(--dark-background5,#FFFFFF);
-        }
-        #one_mb{
-            background-color:var(--dark-background5, #FFFFFF)
-        }
-        #one_kb{
-            background-color:var(--dark-background5, #FFFFFF)
-        }
-        #two_mb{
-            background-color:var(--dark-background5, #FFFFFF)
-        }
-        #two_kb{
-            background-color:var(--dark-background5, #FFFFFF)
-        }
-        .processSelect {
-          border-radius: 15px;
-          width: 84%;
-        }
-        .value-range {
-          opacity: 0.6;
-          font-family: Helvetica;
-          font-size: 1em;
-          color: var(--dark-color,#000000);
-          text-align: left;
-          line-height: 20px;
-          font-weight: 400;
-        }
-        .record-title{
-            margin-bottom: 16px;
-            grid-column: span 3;
-        }
-        #interval-slider {
-            margin: 0 8px;
-            grid-column: span 2;
-        }
-        .resultSize{
-            display: grid;
-            grid-template-rows: 1fr;
-            grid-template-columns:  min-content min-content;
-            background-color: var(--dark-background5,#F2F2F2);
-            -webkit-appearance:none;
-            color:var(--dark-color,#6a6f77);
-            width: 150px;
-            margin: 0 30px 0 0;
-            height: 40px;
-            border-radius:20px;
-            outline:0;
-            border:1px solid var(--dark-border,#c8cccf);
-        }
-        .record-mode{
-            font-family: Helvetica-Bold;
-            font-size: 1em;
-            color: var(--dark-color1,#000000);
-            line-height: 28px;
-            font-weight: 400;
-            margin-bottom: 16px;
-            grid-column: span 1;
-        }
-        .record-prompt{
-              opacity: 0.6;
-              font-family: Helvetica;
-              font-size: 14px;
-              text-align: center;
-              line-height: 35px;
-              font-weight: 400;
-        }
-        .interval-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;
-        }
-        
-        </style>
-        <div class="root">
-          <div class = "title">
-            <span class="font-style">Native Memory</span>
-          </div>
-          <div class="application">
-             <span class="inner-font-style">ProcessId or ProcessName</span>
-             <span class="value-range">Record process</span>
-             <lit-allocation-select show-search class="processSelect" rounded default-value="" id="pid" placement="bottom" title="process" placeholder="please select process">
-             </lit-allocation-select>
-          </div>
-          <div class="application">
-            <span class="inner-font-style" >Max unwind level</span>
-            <span class="value-range">Max Unwind Level Rang is 0 - 512, default 10</span>
-            <input id= "unwind"  class="inputstyle" type="text" placeholder="Enter the Max Unwind Level" oninput="if(this.value > 512) this.value = '512'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="10">
-          </div>
-          <div class="application">
-            <span class="inner-font-style">Shared Memory Size (One page equals 4 KB)</span>
-            <span class="value-range">Shared Memory Size Range is 0 - 131072 page, default 16384 page</span>
-            <div>
-              <input id = "shareMemory" class="inputstyle" type="text" placeholder="Enter the Shared Memory Size" oninput="if(this.value > 131072) this.value = '131072'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="16384">
-              <span>Page</span>
-            </div>
-          </div>
-          <div class="application">
-            <span class="inner-font-style" >Filter Memory Size </span>
-            <span class="value-range">Filter size Range is 0 - 65535 byte, default 4096 byte</span> 
-            <div>
-                <input id = "filterSized" class="inputstyle" type="text" placeholder="Enter the Filter Memory Size" oninput="if(this.value > 65535) this.value = '65535'" onkeyup="this.value=this.value.replace(/\\D/g,'')" value="4096">
-                 <span>Byte</span>
-            </div>
-          </div>
-          <div class="switchstyle">
-              <span class="inner-font-style" id="fp-unwind">Use Fp Unwind</span>               
-              <lit-switch class="lts" id="use_fp_unwind" title="fp unwind" checked="true"></lit-switch>
-          </div>
-          <div class="switchstyle">
-              <span class="inner-font-style" id="record_accurately ">Use Record Accurately (Available on recent OpenHarmony 4.0)</span> 
-              <lit-switch   class="lts" id="use_record_accurately" title="record_accurately" checked="true"></lit-switch>
-          </div>
-          <div class="switchstyle">
-              <span class="inner-font-style" id="offline_symbolization">Use Offline Symbolization (Available on recent OpenHarmony 4.0)</span> 
-              <lit-switch class="lts" id="use_offline_symbolization" title="offline_symbolization" checked="true"></lit-switch>
-          </div>
-           <div class="switchstyle">
-              <span class="inner-font-style" id="startup_mode">Use Startup Mode (Available on recent OpenHarmony 4.0)</span> 
-              <lit-switch class="lts" id="use_startup_mode" title="startup_mode"></lit-switch>
-          </div>   
-          <div class="switchstyle record-statistics-result" style="grid-row: 6; grid-column: 1 / 3;height: min-content;display: grid;grid-template-rows: 1fr;grid-template-columns: 1fr min-content;">
-            <div class="record-title">
-                <span class="record-mode">Use Record Statistics (Available on recent OpenHarmony 4.0)</span> 
-                <span class="record-prompt"> Time between following interval (0 = disabled) </span>
-            </div>
-            <lit-slider id="interval-slider" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
-            </lit-slider>
-            <div class='resultSize'>
-                <input class="interval-result" type="text" value='0' onkeyup="this.value=this.value.replace(/\\D/g,'')">
-                <span style="text-align: center; margin: 8px"> S </span>
-            </div>
-          </div>
-        </div>
-        "
-`);
-  });
-
   it('SpAllocations test05', function () {
     let spAllocations = document.querySelector('#sp') as SpAllocations;
     expect(spAllocations.appProcess).toBe('3');
diff --git a/ide/test/trace/component/setting/SpFileSystem.test.ts b/ide/test/trace/component/setting/SpFileSystem.test.ts
index 0e95ad6e435a07f2531cf8b5dc2cf0a4047b8537..af7c78bac06d496701513f1a00c52dbff09fcfbd 100644
--- a/ide/test/trace/component/setting/SpFileSystem.test.ts
+++ b/ide/test/trace/component/setting/SpFileSystem.test.ts
@@ -42,10 +42,6 @@ describe('spFileSystem Test', () => {
     expect(spFileSystem.disable()).toBeUndefined();
   });
 
-  it('SpFileSystemTest06', function () {
-    expect(spFileSystem.initConfigList()).toBeUndefined();
-  });
-
   it('SpFileSystemTest07', function () {
     spFileSystem.startRecord = true;
     expect(spFileSystem.startRecord).toBeTruthy();
diff --git a/ide/test/trace/component/setting/SpProbesConfig.test.ts b/ide/test/trace/component/setting/SpProbesConfig.test.ts
index fb46b95f5822b9a5e870496114b5cd0b7f422903..d34eba50a18908b2bdf39fd66366d08b32f7e264 100644
--- a/ide/test/trace/component/setting/SpProbesConfig.test.ts
+++ b/ide/test/trace/component/setting/SpProbesConfig.test.ts
@@ -15,7 +15,6 @@
 
 // @ts-ignore
 import { SpProbesConfig } from '../../../../dist/trace/component/setting/SpProbesConfig.js';
-import { LitCheckBox } from '../../../../src/base-ui/checkbox/LitCheckBox';
 
 describe('SpProbesConfig Test', () => {
   beforeAll(() => {
@@ -30,206 +29,7 @@ describe('SpProbesConfig Test', () => {
   it(' SpProbesConfig get Default attrValue', function () {
     let spEle = document.querySelector('#spconfig') as SpProbesConfig;
     expect(spEle.traceConfig).toEqual(['Scheduling details', 'CPU Frequency and idle states', 'Hitrace categories']);
-    expect(spEle.traceEvents).toEqual([
-      'ability',
-      'ace',
-      'app',
-      'ark',
-      'binder',
-      'disk',
-      'freq',
-      'graphic',
-      'idle',
-      'irq',
-      'memreclaim',
-      'mmc',
-      'multimodalinput',
-      'ohos',
-      'pagecache',
-      'rpc',
-      'sched',
-      'sync',
-      'window',
-      'workq',
-      'zaudio',
-      'zcamera',
-      'zimage',
-      'zmedia',
-    ]);
+    expect(spEle.traceEvents.length).toEqual(24);
     expect(spEle.memoryConfig).toEqual([]);
   });
-
-  it(' SpProbesConfig test', function () {
-    let spEle = document.querySelector('#spconfig') as SpProbesConfig;
-    expect(spEle.initHtml()).toMatchInlineSnapshot(`
-"
-        <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%;
-            border-radius: 0px 16px 16px 0px;
-        }
-
-        .root {
-            margin-right: 30px;
-            padding-top: 30px;
-            padding-left: 54px;
-            margin-bottom: 30px;
-            font-size:16px;
-        }
-        
-        .config-page {
-            height: 95%;
-            font-size: 0.875em;
-        }
-
-        .trace-config{
-           display: flex;
-           flex-direction: column;
-           width: 50%;
-           gap: 10px;
-           margin-bottom: 20px;
-        }
-
-        .memory-config{
-           display: grid;
-           grid-template-columns: repeat(2, 1fr);
-           border-style: solid none none none;
-           border-color: #D5D5D5;
-           padding-top: 15px;
-           margin-top: 15px;
-           gap: 10px;
-        }
-        
-        .ability-config{
-           display: grid;
-           grid-template-columns: repeat(2, 1fr);
-           border-style: solid none none none;
-           border-color: #D5D5D5;
-           padding-top: 15px;
-           margin-top: 15px;
-           gap: 10px;
-        }
-
-        .span-col-2{
-           grid-column: span 2 / auto;
-        }
-
-        .log-config{
-           display: grid;
-           grid-template-columns: repeat(2, 1fr);
-           border-style: solid none none none;
-           border-color: #D5D5D5;
-           padding-top: 15px;
-           gap: 10px;
-        }
-
-        #hitrace-cat{
-           display: grid;
-           grid-template-columns: 1fr 1fr;
-        }
-        .user-events{
-           display: grid;
-           grid-template-columns: repeat(4, 1fr);
-           grid-template-rows: repeat(2, 1fr);
-           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>
-            <div class="config-page">
-                <div>
-                    <div class="trace-config"></div>
-                    <div class="span-col-2" id="hitrace-cat">
-                      <check-des-box id="hitrace" checked="true" value ="Hitrace categories" des="Enables C++ codebase annotations (HTRACE_BEGIN() / os.Trace())">
-                      </check-des-box>
-                      <div class="user-events">
-                          <slot></slot>
-                      </div>
-                    </div>
-                    <div>
-                       <div>
-                          <p>Buffer Size</p>
-                          <p class="buffer-size-des">The ftrace buffer size range is 2048 KB to 307200 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='20480' 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">
-                      <span>Memory Config</span>
-                    </div>
-                </div>
-                <div class="ability-config">
-                    <div class="span-col-2">
-                      <span>Ability Config</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/setting/SpRecordPerf.test.ts b/ide/test/trace/component/setting/SpRecordPerf.test.ts
index 32acf15ba788a2cbae08a63d3c259a7556d878a8..800a02432555679fd6a8ea9eafaf276600aebdf5 100644
--- a/ide/test/trace/component/setting/SpRecordPerf.test.ts
+++ b/ide/test/trace/component/setting/SpRecordPerf.test.ts
@@ -54,159 +54,6 @@ describe('SpRecordPerf Test', () => {
     expect(spRecordPerf.unDisable()).toBeUndefined();
   });
 
-  it('SpRecordPerfTest04', function () {
-    expect(spRecordPerf.initHtml()).toMatchInlineSnapshot(`
-"
-        <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{
-            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;
-            margin-right: 30px;
-            padding-left: 54px;
-            font-size:16px;
-            margin-bottom: 30px;
-        }
-
-        :host([show]) .record-perf-config-div {
-           display: flex;
-           flex-direction: column;
-           margin-bottom: 1vh;
-        }
-
-        :host(:not([show])) .record-perf-config-div {
-           margin-top: 5vh;
-           margin-bottom: 5vh;
-           gap: 25px;
-        }
-
-        :host(:not([show])) .hidden {
-           display: none;
-        }
-
-        #addOptions {
-           border-radius: 15px;
-           border-color:rgb(0,0,0,0.1);
-           width: 150px;
-           height: 40px;
-           font-family: Helvetica;
-           font-size: 1em;
-           color: #FFFFFF;
-           text-align: center;
-           line-height: 20px;
-           font-weight: 400;
-           margin-right: 20%;
-           float: right;
-        }
-        
-        :host(:not([startSamp])) #addOptions {
-           background: #999999;
-        }
-        :host([startSamp]) #addOptions {
-           background: #3391FF;
-        }
-
-        .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;
-        }
-
-        .record-perf-des {
-          opacity: 0.6;
-          font-family: Helvetica;
-          line-height: 35px;
-          font-size: 14px;
-          text-align: center;
-          font-weight: 400;
-        }
-
-        .record-perf-select {
-          border-radius: 15px;
-        }
-
-        lit-switch {
-          height: 38px;
-          margin-top: 10px;
-          display:inline;
-          float: right;
-        }
-     
-        .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;
-        }
-
-        .sliderBody{
-            width: 100%;
-            height: min-content;
-            display: grid;
-            grid-template-columns: 1fr min-content;
-        }
-
-        .sliderInput {
-            margin: 0 0 0 0;
-            height: 40px;
-            background-color: var(--dark-background5,#F2F2F2);
-            -webkit-appearance:none;
-            outline:0;
-            font-size:14px;
-            border-radius:20px;
-            border:1px solid var(--dark-border,#c8cccf);
-            color:var(--dark-color,#6a6f77);
-            text-align: center;
-        }
-        </style>
-        <div class="root">
-            <div class="configList record-perf-config">
-            </div>
-            <button id ="addOptions">Advance Options</button>
-        </div>
-        "
-`);
-  });
-
   it('SpRecordPerfTest06', function () {
     expect(spRecordPerf.startSamp).toBeFalsy();
   });
diff --git a/ide/test/trace/component/setting/SpRecordSetting.test.ts b/ide/test/trace/component/setting/SpRecordSetting.test.ts
index 51b9bd7c91fe93e35f185978319624606898a997..bd91022054da5201f6da53aa49ea403c6c61181b 100644
--- a/ide/test/trace/component/setting/SpRecordSetting.test.ts
+++ b/ide/test/trace/component/setting/SpRecordSetting.test.ts
@@ -33,199 +33,6 @@ describe('SpRecordSetting Test', () => {
     expect(spEle.maxDur).toEqual(30);
   });
 
-  it(' SpRecordSetting test', function () {
-    let spEle = document.querySelector('#setting') as SpRecordSetting;
-    expect(spEle.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .root {
-            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;
-            font-size: 16px;
-            color: var(--dark-color1,#000000);
-            line-height: 28px;
-            font-weight: 700;
-            margin-bottom: 16px;
-            grid-column: span 1;
-        }
-        .record{
-            display:flex;
-            flex-direction: column;
-        }
-        
-        .output{
-            display:grid;
-        }
-
-        .trace_file_span {
-            width: 20%;
-            height: 1em;
-            margin: 0;
-        }
-        
-        #trace_path {
-           background-color: var(--dark-background5,#FFFFFF)
-           font-family: Helvetica-Bold;
-           color:  var(--dark-color1,#8f8c8c);
-           margin: 0;
-           width: 25%;
-           height: 25px;
-           border-radius: 8px;
-           outline: none;
-           border: 1px solid #ccc;
-        }
-        .buffer-size{
-            height: min-content;
-            display: grid;
-            grid-template-rows: 1fr;
-            grid-template-columns: 1fr min-content;
-        }
-
-        .max-duration{
-            height: min-content;
-            display: grid;
-            grid-template-rows: 1fr 1fr;
-            grid-template-columns: 1fr 1fr min-content;
-        }
-
-        #litradio{
-            opacity: 0.9;
-            font-family: Helvetica;
-            font-size: 14px;
-            color: var(--dark-color1,#000000);
-            text-align: left;
-            line-height: 16px;
-            font-weight: 400;
-        }
-
-        button{
-            height: 25px;
-            width: 100%;
-            border: 0;
-            text-align: left;
-            padding-left: 20px;
-            margin-top: 10px;
-            background-color: #E4E3E9;
-        }
-
-        .line{
-            width: 100%;
-            height: 1px;
-            overflow: hidden;
-            border-top: 1px solid #C5C7CF;
-            background: #E4E3E9;
-            margin-top: 4px;
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-        .max_duration_result, .memory_buffer_result{
-            background-color: var(--dark-background5,#F2F2F2);
-            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{
-            -webkit-appearance:none;
-            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 {
-            margin: 0 8px;
-            grid-column: span 2;
-        }
-        
-        .record-title{
-            margin-bottom: 16px;
-            grid-column: span 3;
-        }
-        
-        .record-prompt{
-              opacity: 0.6;
-              font-family: Helvetica;
-              font-size: 14px;
-              text-align: center;
-              line-height: 35px;
-              font-weight: 400;
-        }
-
-        </style>
-        <div class="root">
-          <div class="record">
-            <span class="record-mode">Record mode</span>
-            <lit-radio name="Stop when full" dis="round" id="litradio" checked>Stop when full</lit-radio>
-          </div>
-          <div class="output">
-            <span class="record-mode">output file path</span>
-            <div>
-              <span class="trace_file_span">/data/local/tmp/</span>
-              <input id="trace_path" type="text" value='hiprofiler_data.htrace'onkeydown="this.value.length >= 100 ? this.value = this.value.substring(0,99): 0" oninput="this.value= this.value.replace('__','_')" onkeyup="this.value=this.value.replace(/[^\\w\\.]/g,'')">
-            </div>
-          </div>
-          <div class="buffer-size">
-            <div class="record-title">
-                <span class="record-mode">In-memory buffer size</span> 
-                <span class="record-prompt"> (max memory buffer size is 512 MB) </span>
-            </div>
-            <lit-slider id="memory-buffer" defaultColor="var(--dark-color3,#46B1E3)" open dir="right">
-            </lit-slider>
-            <div class='resultSize'>
-                <input class="memory_buffer_result" type="text" value='64' onkeyup="this.value=this.value.replace(/\\D/g,'')">
-                <span style="text-align: center; margin: 8px"> MB </span>
-            </div>
-          </div>
-          <div class="max-duration">
-            <div class="record-title">
-                <span class="record-mode" >Max duration</span>
-                <span class="record-prompt"> (max duration value is 01:00:00) </span>
-            </div>
-            <lit-slider id="max-duration" defaultColor="var(--dark-color4,#61CFBE)" open dir="right">
-            </lit-slider>
-            <div class='resultValue'>
-                <input class="max_duration_result" type="text" value = '00:00:30' >
-                <span style="text-align: center; margin: 8px 8px 8px 0"> h:m:s </span>
-            </div>
-            
-          </div>
-        </div>
-        "
-`);
-  });
   it(' SpRecordSettingTest04', function () {
     let spEle = document.querySelector('#setting') as SpRecordSetting;
     expect(spEle.resetValue()).toBeUndefined();
diff --git a/ide/test/trace/component/setting/SpTraceCommand.test.ts b/ide/test/trace/component/setting/SpTraceCommand.test.ts
index ac020603bd17a73099774dc5326d0dc26dadae69..ced68ce466fed63afb09582a87376a93de163d4b 100644
--- a/ide/test/trace/component/setting/SpTraceCommand.test.ts
+++ b/ide/test/trace/component/setting/SpTraceCommand.test.ts
@@ -37,100 +37,6 @@ describe('SPTraceCommand Test', () => {
     expect(spEle.hdcCommon).toEqual('test');
   });
 
-  it(' SpTraceCommand test', function () {
-    let spEle = document.querySelector('#command') as SpTraceCommand;
-    expect(spEle.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            width: 100%;
-            position: relative;
-            background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 16px 0px;
-        }
-
-        #code-text{
-            -webkit-appearance:none;
-            opacity: 0.6;
-            font-family: Helvetica;
-            color: var(--dark-color,#000000);
-            padding: 20px 56px 5px 56px;
-            font-size:1em;
-            margin-left: 10px;
-            line-height: 20px;
-            font-weight: 400;
-            border: none;
-            outline:none;
-            resize:none;
-            /*overflow:auto;*/
-            z-index: 2;
-            min-height: 500px;
-            background: var(--dark-background3,#FFFFFF);
-        }
-
-        #copy-image{
-            display: table-cell;
-            white-space: nowrap;
-            outline:0;
-            float:right;
-            z-index: 66;
-            position: relative;
-            top: 56px;
-            right: 40px;
-            cursor:pointer;
-        }
-
-        #copy-button{
-            -webkit-appearance:none;
-            outline:0;
-            border: 0;
-            background: var(--dark-background3,#FFFFFF);
-            justify-content: end;
-            z-index: 55;
-            border-radius: 0px 16px 0px 0px;
-        }
-
-        #text-cmd{
-            /*overflow-y:auto;*/
-            display: grid;
-            justify-content: stretch;
-            align-content:  stretch;
-            font-size:16px;
-            background: var(--dark-background3,#FFFFFF);
-            border-radius: 0px 16px 0px 0px;
-
-        }
-
-        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-        ::-webkit-scrollbar
-        {
-          width: 6px;
-          height: 10px;
-          background-color: var(--dark-background3,#FFFFFF);
-        }
-
-        /*定义滚动条轨道 内阴影+圆角*/
-        ::-webkit-scrollbar-track
-        {
-          background-color: var(--dark-background3,#FFFFFF);
-        }
-
-        /*定义滑块 内阴影+圆角*/
-        ::-webkit-scrollbar-thumb
-        {
-          border-radius: 6px;
-          background-color: var(--dark-background7,#e7c9c9);
-        }
-        </style>
-        <div id="text-cmd">
-            <button id="copy-button">
-                <img id="copy-image" src="img/copy.png">
-            </button>
-            <textarea id="code-text" readonly></textarea>
-        </div>
-        "
-`);
-  });
   it(' SpTraceCommandtest01', function () {
     let spEle = document.querySelector('#command') as SpTraceCommand;
     spEle.show = false;
diff --git a/ide/test/trace/component/trace/TimerShaftElement.test.ts b/ide/test/trace/component/trace/TimerShaftElement.test.ts
index fa9e10f823670bf794f90b1f9e39245ff1c2c722..06fbdd7152e2691828197f717cfd5a467bb2d074 100644
--- a/ide/test/trace/component/trace/TimerShaftElement.test.ts
+++ b/ide/test/trace/component/trace/TimerShaftElement.test.ts
@@ -33,33 +33,28 @@ declare global {
   interface Window {
     SmartEvent: {
       UI: {
-        MenuTrace: string; //selected menu trace
         RefreshCanvas: string; //selected menu trace
-        SliceMark: string; //Set the tag scope
+        MenuTrace: string; //selected menu trace
         TimeRange: string; //Set the timeline range
+        SliceMark: string; //Set the tag scope
         TraceRowComplete: string; //Triggered after the row component has finished loading data
       };
     };
-
     subscribe(evt: string, fn: (b: any) => void): void;
-
-    subscribeOnce(evt: string, fn: (b: any) => void): void;
-
     unsubscribe(evt: string, fn: (b: any) => void): void;
-
+    subscribeOnce(evt: string, fn: (b: any) => void): void;
     publish(evt: string, data: any): void;
-
     clearTraceRowComplete(): void;
   }
 }
 
 window.SmartEvent = {
   UI: {
-    MenuTrace: 'SmartEvent-UI-MenuTrace',
     RefreshCanvas: 'SmartEvent-UI-RefreshCanvas',
     SliceMark: 'SmartEvent-UI-SliceMark',
-    TimeRange: 'SmartEvent-UI-TimeRange',
     TraceRowComplete: 'SmartEvent-UI-TraceRowComplete',
+    TimeRange: 'SmartEvent-UI-TimeRange',
+    MenuTrace: 'SmartEvent-UI-MenuTrace',
   },
 };
 
@@ -119,84 +114,6 @@ describe('TimerShaftElement Test', () => {
     expect(ns2s(1_000_0000)).toBe('10.0 ms');
   });
 
-  it('TimerShaftElementTest15', function () {
-    expect(timerShaftElement.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            box-sizing: border-box;
-            display: flex;
-            width: 100%;
-            height: 148px;
-            border-bottom: 1px solid var(--dark-background,#dadada);
-            border-top: 1px solid var(--dark-background,#dadada);
-        }
-        *{
-            box-sizing: border-box;
-            user-select: none;
-        }
-        .root{
-            width: 100%;
-            height: 100%;
-            display: grid;
-            grid-template-rows: 100%;
-            grid-template-columns: 248px 1fr;
-            background: var(--dark-background4,#FFFFFF);
-        }
-        .total{
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: min-content 1fr;
-            background-color: transparent;
-        }
-        .panel{
-            color: var(--dark-border,#dadada);
-            width: 100%;
-            height: 100%;
-            overflow: visible;
-            background-color: var(--dark-background4,#ffffff);
-        }
-        .time-div{
-            box-sizing: border-box;
-            width: 100%;border-top: 1px solid var(--dark-background,#dadada);height: 100%;display: flex;justify-content: space-between;background-color: var(--dark-background1,white);color: var(--dark-color1,#212121);font-size: 0.7rem;
-            border-right: 1px solid var(--dark-background,#999);
-            padding: 2px 6px;
-            display: flex;justify-content: space-between;
-            user-select: none;
-            position: relative;
-        }
-        .time-total::after{
-            content: " +";
-        }
-        .time-collect{
-            position:absolute;
-            right:5px;
-            bottom:5px;
-            color: #5291FF;
-            display: none;
-        }
-        .time-collect[close] > .time-collect-arrow{
-            transform: rotateZ(-180deg);
-        }
-
-        </style>
-        <div class="root">
-            <div class="total">
-                <div style="width: 100%;height: 100px;background: var(--dark-background4,#F6F6F6)"></div>
-                <div class="time-div">
-                    <span class="time-total">10</span>
-                    <span class="time-offset">0</span>
-                    <div class="time-collect">
-                        <lit-icon class="time-collect-arrow" name="caret-down" size="17"></lit-icon>
-                    </div>
-                </div>
-            </div>
-            <canvas class="panel"></canvas>
-        </div>
-        "
-`);
-  });
-
   it('TimerShaftElementTest16', function () {
     expect(ns2s(1)).toBe('1.0 ns');
   });
diff --git a/ide/test/trace/component/trace/base/RangeSelect.test.ts b/ide/test/trace/component/trace/base/RangeSelect.test.ts
index 7ee15ccc022c81f8fcdbda006934298198796613..ef9ec0460bda43c3e43da02302c10b7bc79cfbaf 100644
--- a/ide/test/trace/component/trace/base/RangeSelect.test.ts
+++ b/ide/test/trace/component/trace/base/RangeSelect.test.ts
@@ -21,7 +21,6 @@ jest.mock('../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', ()
   return {};
 });
 
-
 describe('RangeSelect Test', () => {
   beforeAll(() => {});
 
@@ -34,12 +33,12 @@ describe('RangeSelect Test', () => {
     let rangeSelect = new RangeSelect();
     rangeSelect.rowsEL = document.createElement('div');
     let mouseEvent = new MouseEvent('mousedown', {
-      button: 0,
+      button: 1,
       buttons: 0,
-      clientX: 2,
+      clientX: 21,
       clientY: 100,
       screenX: 255,
-      screenY: 325,
+      screenY: 321,
     });
     let htmlElement = document.createElement('div');
     rangeSelect.rowsPaneEL = htmlElement;
@@ -52,10 +51,10 @@ describe('RangeSelect Test', () => {
     rangeSelect.rowsEL = document.createElement('div');
     let mouseEvent = new MouseEvent('mousedown', {
       button: 0,
-      buttons: 0,
-      clientX: 2,
-      clientY: 100,
-      screenX: 255,
+      buttons: 65,
+      clientX: 63,
+      clientY: 1300,
+      screenX: 325,
       screenY: 325,
     });
     let htmlElement = document.createElement('div');
@@ -68,20 +67,20 @@ describe('RangeSelect Test', () => {
     rangeSelect.isInRowsEl = jest.fn(() => true);
     rangeSelect.rowsEL = {
       // offsetTop: 100,
-      offsetHeight: 200,
-      offsetLeft: 0,
-      offsetWidth: 100,
+      offsetHeight: 71,
+      offsetLeft: 15,
+      offsetWidth: 134,
     };
     let mouseEvent = new MouseEvent('mousedown', {
       // @ts-ignore
       offsetY: 1,
       offsetX: 1,
-      button: 0,
+      button: 1,
       buttons: 0,
       clientX: 2,
-      clientY: 100,
+      clientY: 101,
       screenX: 255,
-      screenY: 325,
+      screenY: 321,
     });
     let divElement = document.createElement('div');
     rangeSelect.rowsPaneEL = divElement;
@@ -100,20 +99,20 @@ describe('RangeSelect Test', () => {
     rangeSelect.isDrag = jest.fn(() => true);
 
     rangeSelect.rowsEL = {
-      offsetTop: 100,
-      offsetHeight: 200,
-      offsetLeft: 0,
-      offsetWidth: 100,
+      offsetTop: 102,
+      offsetHeight: 540,
+      offsetLeft: 390,
+      offsetWidth: 1102,
     };
     let mouseEvent = new MouseEvent('mousedown', {
       // @ts-ignore
       offsetY: 1,
       offsetX: 1,
-      button: 0,
+      button: 2,
       buttons: 0,
       clientX: 2,
       clientY: 100,
-      screenX: 255,
+      screenX: 252,
       screenY: 325,
     });
     rangeSelect.spacerEL = jest.fn(() => true);
@@ -144,13 +143,13 @@ describe('RangeSelect Test', () => {
     ];
     let mouseEvent = new MouseEvent('mousedown', {
       // @ts-ignore
-      offsetY: 1,
+      offsetY: 12,
       offsetX: 1,
       button: 0,
       buttons: 0,
-      clientX: 2,
+      clientX: 3,
       clientY: 100,
-      screenX: 255,
+      screenX: 252,
       screenY: 325,
     });
     rangeSelect.timerShaftDragEL = jest.fn(() => true);
@@ -180,21 +179,21 @@ describe('RangeSelect Test', () => {
     rangeSelect.isDrag = jest.fn(() => true);
 
     rangeSelect.rowsEL = {
-      offsetTop: 100,
-      offsetHeight: 200,
-      offsetLeft: 0,
-      offsetWidth: 100,
+      offsetTop: 93,
+      offsetHeight: 1030,
+      offsetLeft: 93,
+      offsetWidth: 210,
     };
     let mouseEvent = new MouseEvent('mousedown', {
       // @ts-ignore
-      offsetY: 1,
+      offsetY: 123,
       offsetX: 1,
-      button: 0,
+      button: 3,
       buttons: 0,
-      clientX: 2,
+      clientX: 22,
       clientY: 100,
       screenX: 255,
-      screenY: 325,
+      screenY: 322,
     });
     let htmlElement = document.createElement('div');
     rangeSelect.rowsPaneEL = htmlElement;
@@ -208,12 +207,12 @@ describe('RangeSelect Test', () => {
     rangeSelect.isHover = true;
     let mouseEvent = new MouseEvent('mousedown', {
       // @ts-ignore
-      offsetY: 1,
+      offsetY: 14,
       offsetX: 1,
-      button: 0,
+      button: 4,
       buttons: 0,
       clientX: 2,
-      clientY: 100,
+      clientY: 104,
       screenX: 255,
       screenY: 325,
     });
diff --git a/ide/test/trace/component/trace/base/TraceRow.test.ts b/ide/test/trace/component/trace/base/TraceRow.test.ts
index b21af3725724675e84adeb173826fd839e4b8e21..49d7f4926b567206a3599d33cfd2bbd53e2edcda 100644
--- a/ide/test/trace/component/trace/base/TraceRow.test.ts
+++ b/ide/test/trace/component/trace/base/TraceRow.test.ts
@@ -28,76 +28,46 @@ describe('TraceRow Test', () => {
     lineWidth: 1,
     strokeStyle: true,
   };
+  let traceRow = new TraceRow<any>({
+    canvasNumber: 1,
+    alpha: true,
+    contextId: '2d',
+    isOffScreen: true,
+  });
   it('TraceRow Test01', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow).not.toBeUndefined();
   });
 
   it('TraceRow Test02', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.sleeping).toBeFalsy();
   });
 
   it('TraceRow Test03', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.sleeping = true;
     expect(traceRow.sleeping).toBeTruthy();
   });
 
   it('TraceRow Test04', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.sleeping = false;
     expect(traceRow.sleeping).toBeFalsy();
   });
 
   it('TraceRow Test05', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.rangeSelect).toBeFalsy();
   });
 
   it('TraceRow Test06', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rangeSelect = true;
     expect(traceRow.rangeSelect).toBeTruthy();
   });
 
   it('TraceRow Test10', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 10;
+    canvas.height = 10;
     const ctx = canvas.getContext('2d');
     let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
+      canvasNumber: 10,
       alpha: true,
       contextId: '2d',
       isOffScreen: true,
@@ -109,22 +79,27 @@ describe('TraceRow Test', () => {
     traceRow.supplier = true;
     traceRow.isLoading = false;
     traceRow.name = '111';
-    traceRow.height = 20;
-    traceRow.height = 30;
+    traceRow.height = 201;
+    traceRow.height = 301;
     expect(traceRow.clearCanvas(ctx)).toBeUndefined();
   });
 
   it('TraceRow Test11', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 11;
+    canvas.height = 11;
     const ctx = canvas.getContext('2d');
     let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
+      canvasNumber: 11,
       alpha: true,
       contextId: '2d',
       isOffScreen: true,
     });
+    traceRow.supplier = true;
+    traceRow.isLoading = false;
+    traceRow.name = '561';
+    traceRow.height = 33;
+    traceRow.height = 35;
     traceRow.dataList = {
       supplier: true,
       isLoading: false,
@@ -132,18 +107,18 @@ describe('TraceRow Test', () => {
     traceRow.supplier = true;
     traceRow.isLoading = false;
     traceRow.name = '111';
-    traceRow.height = 20;
-    traceRow.height = 30;
+    traceRow.height = 202;
+    traceRow.height = 302;
     expect(traceRow.drawLines(ctx)).toBeUndefined();
   });
 
   it('TraceRow Test12', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 12;
+    canvas.height = 12;
     const ctx = canvas.getContext('2d');
     let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
+      canvasNumber: 12,
       alpha: true,
       contextId: '2d',
       isOffScreen: true,
@@ -154,135 +129,62 @@ describe('TraceRow Test', () => {
     };
     traceRow.supplier = true;
     traceRow.isLoading = false;
-    traceRow.name = '111';
-    traceRow.height = 20;
-    traceRow.height = 30;
+    traceRow.name = '1201';
+    traceRow.height = 554;
     expect(traceRow.drawSelection(ctx)).toBeUndefined();
   });
 
   it('TraceRow Test13', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.collect).toBeFalsy();
   });
 
   it('TraceRow Test14', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.collect = true;
     expect(traceRow.collect).toBeTruthy();
   });
 
   it('TraceRow Test15', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.rowType).toBeFalsy();
   });
 
   it('TraceRow Test16', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowType = true;
     expect(traceRow.rowType).toBeTruthy();
   });
 
   it('TraceRow Test17', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.rowId).toBeFalsy();
   });
 
   it('TraceRow Test18', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowId = true;
     expect(traceRow.rowId).toBeTruthy();
   });
 
   it('TraceRow Test19', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.rowParentId).toBeFalsy();
   });
 
   it('TraceRow Test20', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowParentId = true;
     expect(traceRow.rowParentId).toBeTruthy();
   });
 
   it('TraceRow Test21', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowHidden = true;
     expect(traceRow.rowHidden).toBeUndefined();
   });
 
   it('TraceRow Test22', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.name).toBeFalsy();
   });
 
   it('TraceRow Test23', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.folder = false;
     expect(traceRow.folder).toBeFalsy();
   });
 
   it('TraceRow Test24', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.folder = true;
     expect(traceRow.folder).toBeTruthy();
   });
@@ -294,661 +196,173 @@ describe('TraceRow Test', () => {
   });
 
   it('TraceRow Test27', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.tip = true;
     expect(traceRow.tip).toBeUndefined();
   });
 
   it('TraceRow Test28', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.frame).not.toBeUndefined();
   });
 
   it('TraceRow Test29', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.frame = [0, 0, 0];
     expect(traceRow.frame).toBeTruthy();
   });
 
   it('TraceRow Test60', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.disabledCheck).not.toBeUndefined();
   });
 
   it('TraceRow Test61', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.disabledCheck = true;
     expect(traceRow.disabledCheck).toBeTruthy();
   });
 
   it('TraceRow Test62', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.folderPaddingLeft).toBeUndefined();
   });
 
   it('TraceRow Test30', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.checkType).not.toBeUndefined();
   });
 
   it('TraceRow Test31', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.checkType = '-1';
     expect(traceRow.checkType).toBeTruthy();
   });
 
   it('TraceRow Test32', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.drawType).toBe(0);
   });
 
   it('TraceRow Test33', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.drawType = true;
     expect(traceRow.drawType).toBeTruthy();
   });
 
   it('TraceRow Test34', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.args = jest.fn(() => true);
     traceRow.args.isOffScreen = jest.fn(() => null);
     expect(traceRow.updateWidth(1)).toBeUndefined();
   });
 
   it('TraceRow Test36', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.onMouseHover()).toBeFalsy();
   });
 
   it('TraceRow Test37', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.setTipLeft(1, null)).toBeFalsy();
   });
 
   it('TraceRow Test38', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.onMouseLeave(1, 1)).toBeFalsy();
   });
 
   it('TraceRow Test39', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.draw(false)).toBeFalsy();
   });
 
   it('TraceRow Test40', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.collect = 1;
     expect(traceRow.collect).toBeTruthy();
   });
 
   it('TraceRow Test41', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.collect = 0;
     expect(traceRow.collect).toBeFalsy();
   });
 
   it('TraceRow Test42', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.checkType = '0';
     expect(traceRow.checkType).toBe('0');
   });
 
   it('TraceRow Test43', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.checkType = '1';
     expect(traceRow.checkType).toBe('1');
   });
 
   it('TraceRow Test44', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.checkType = '2';
     expect(traceRow.checkType).toBe('2');
   });
 
   it('TraceRow Test45', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.checkType = 0;
     expect(traceRow.checkType).toBe('');
   });
 
   it('TraceRow Test46', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowHidden = false;
     expect(traceRow.rowHidden).toBeUndefined();
   });
 
   it('TraceRow Test47', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.highlight = false;
     expect(traceRow.highlight).toBeFalsy();
   });
 
   it('TraceRow Test48', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.highlight = true;
     expect(traceRow.highlight).toBeFalsy();
   });
 
   it('TraceRow Test49', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.setCheckBox = true;
     expect(traceRow.highlight).toBeFalsy();
   });
 
   it('TraceRow Test50', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.initCanvas = jest.fn(() => null);
     expect(traceRow.connectedCallback()).toBeUndefined();
   });
 
   it('TraceRow Test51', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.isInTimeRange()).toBe(false);
   });
 
   it('TraceRow Test52', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.getLineColor()).toBe('');
   });
 
   it('TraceRow Test53', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     let value = traceRow.attributeChangedCallback('name');
     expect(value).toBe(undefined);
   });
 
   it('TraceRow Test54', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     let value = traceRow.attributeChangedCallback('height', '1', '2');
     expect(value).toBe(undefined);
   });
 
   it('TraceRow Test55', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     let value = traceRow.attributeChangedCallback('check-type', '1', 'check');
     expect(value).toBe(undefined);
   });
 
-  it('TraceRow Test56', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
-    expect(traceRow.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        *{
-            box-sizing: border-box;
-        }
-        :host(:not([row-hidden])){
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            height: min-content;
-        }
-        :host([row-hidden]){
-            width: 100%;
-            display: none;
-        }
-        .root{
-            height: 100%;
-            width: 100%;
-            display: grid;
-            grid-template-rows: 100%;
-            grid-template-columns: 248px 1fr;
-            border-bottom: 1px solid var(--dark-border1,#dadada);
-            border-right: 1px solid var(--dark-border1,#ffffff);
-            box-sizing: border-box;
-        }
-        .root .drag{
-            background-color: var(--dark-background1,#eee);
-            box-shadow: 0 4px 12px -4px #999 inset;
-        }
-        .root .line-top{
-            box-shadow: 0 4px 2px -1px #4d7ab3 inset; 
-            transition: all 0.2s;
-        }
-        .root .line-bottom{
-            box-shadow: 0 -4px 2px -1px #4d7ab3 inset; 
-            transition: all 0.2s;
-        }
-        .describe{
-            box-sizing: border-box;
-            border-right: 1px solid var(--dark-border1,#c9d0da);
-            background-color: var(--dark-background5,#ffffff);
-            align-items: center;
-            position: relative;
-        }
-        .panel{
-            width: 100%;
-            height: 100%;
-            overflow: visible;
-            background-color: transparent;
-            display: block;
-        }
-        .panel-container{
-            width: 100%;
-            position: relative;
-            pointer-events: none;
-        }
-        .name{
-            color: var(--dark-color1,#4b5766);
-            margin-left: 10px;
-            font-size: .9rem;
-            font-weight: normal;
-            flex: 1;
-            max-height: 100%;
-            text-align: left;
-            overflow: hidden;
-            user-select: none;
-            text-overflow: ellipsis;
-            white-space:nowrap
-        }
-        :host([highlight]) .name{
-            color: #4b5766;
-        }
-        .icon{
-            color: var(--dark-color1,#151515);
-            margin-left: 10px;
-        }
-        .describe:hover {
-            cursor: pointer;
-        }
-        :host([folder]) .describe:hover > .icon{
-            color:#ecb93f;
-            margin-left: 10px;
-        }
-        :host([folder]){
-            /*background-color: var(--dark-background1,#f5fafb);*/
-        }
-        :host([folder]) .icon{
-            display: flex;
-        }
-        :host(:not([folder])){
-            /*background-color: var(--dark-background,#FFFFFF);*/
-        }
-        :host(:not([folder]):not([children])) {
-        }
-        :host(:not([folder]):not([children])) .icon{
-            display: none;
-        }
-        :host(:not([folder])[children]) .icon{
-            display: none;
-            color:#fff
-        }
-
-        :host(:not([folder])[children]) .name{
-        }
-        :host([expansion]) {
-            background-color: var(--bark-expansion,#0C65D1);
-        }
-        :host([expansion]) .name,:host([expansion]) .icon{
-            color: #fff;
-        }
-        :host([expansion]) .describe{
-            border-right: 0px;
-            background-color: var(--bark-expansion,#0C65D1);
-        }
-        :host([expansion]:not(sleeping)) .panel-container{
-            display: none;
-        }
-        :host([expansion]) .children{
-            flex-direction: column;
-            width: 100%;
-        }
-        :host([expansion]) .icon{
-            transform: rotateZ(0deg);
-        }
-        :host(:not([expansion])) .children{
-            display: none;
-            flex-direction: column;
-            width: 100%;
-        }
-        :host(:not([expansion])) .icon{
-            transform: rotateZ(-90deg);
-        }
-        :host([sleeping]) .describe{
-            display: none;
-        }
-        :host([sleeping]) .panel-container{
-            display: none;
-        }
-        :host([sleeping]) .children{
-            display: none;
-        }
-        :host(:not([sleeping])) .describe{
-            display: flex;;
-        }
-        :host(:not([sleeping])) .panel-container{
-            display: block;
-        }
-        :host(:not([sleeping])) .children{
-            display: flex;
-        }
-        :host([folder]) .lit-check-box{
-            display: none;
-        }
-        :host(:not([check-type])) .lit-check-box{
-            display: none;
-        }
-        :host([collect-type]) .setting{
-            position:fixed;
-            z-index:1003;
-            left: 473px;
-        }
-        :host(:not([collect-type])) {
-            /*position:static;*/
-        }
-        :host([collect-type]) .collect{
-            display: block;
-            color: #5291FF;
-        }
-        :host(:not([collect-type])) .collect{
-            display: none;
-            color: var(--dark-icon,#666666);
-        }
-        .collect{
-            margin-right: 5px;
-        }
-        :host(:not([folder])) .describe:hover .collect{
-            display: block;
-        }
-        .popover{
-            color: var(--dark-color1,#4b5766);
-            display: none;
-            justify-content: center;
-            align-items: center;
-            margin-right: 5px;
-        }
-        .setting{
-            position:absolute;
-            left: 225px;
-        }
-        .radio{
-            margin-right: 10px;
-        }
-        #setting{
-            color: var(--dark-color1,#606060);
-        }
-        :host([expansion]) #setting{
-            color: #FFFFFF;
-        }
-        :host([highlight]) .flash{
-            background-color: #ffe263;
-        }
-        :host([row-type="energy"]) #appNameList{
-            display: flex;
-        }
-         #listprocess::-webkit-scrollbar{
-         width: 6px;
-        }
-        /*定义滑块 内阴影+圆角*/
-        #listprocess::-webkit-scrollbar-thumb
-        {
-          border-radius: 6px;
-          background-color: var(--dark-background7,#e7c9c9);
-        }
-        .lit-check-box{
-          margin-right: 15px;
-        }
-        :host([row-setting='enable'][check-type]) .lit-check-box{
-            margin-right: 25px;
-        }
-        :host([row-setting='enable'][check-type='-1']) .collect{
-            margin-right: 20px;
-        }
-        :host([row-setting='enable']) #rowSetting{
-            display: flex;
-        } 
-        :host([row-setting='enable']:not([check-type='-1'])) .collect{
-            margin-right: 5px;
-        } 
-        </style>
-        <div class="root">
-            <div class="describe flash" style="position: inherit">
-                <lit-icon class="icon" name="caret-down" size="19"></lit-icon>
-                <label class="name"></label>
-                <lit-icon class="collect" name="star-fill" size="19"></lit-icon>
-                <lit-popover placement="bottomLeft" trigger="click" id="appNameList" class="popover" haveRadio="true" style="z-index: 1;position: absolute;left: 230px">
-                    <div slot="content" id="listprocess" style="height:200px;overflow-y:auto">
-                    </div>
-                    <lit-icon name="setting" size="19" id="setting"></lit-icon>
-                </lit-popover>
-                <lit-popover placement="bottomLeft" trigger="click" id="rowSetting" class="popover setting" haveRadio="true">
-                    <div slot="content" id="settingList" style="display: block;height: auto;max-height:200px;overflow-y:auto">
-                        <lit-tree id="rowSettingTree" checkable="true"></lit-tree>
-                    </div>
-                    <lit-icon name="setting" size="19" id="setting"></lit-icon>
-                </lit-popover>
-                <lit-check-box class="lit-check-box"></lit-check-box>
-            </div>
-        </div>
-        "
-`);
-  });
   it('TraceRow Test57', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.rowDiscard).toBeFalsy();
   });
   it('TraceRow Test58', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowDiscard = true;
     expect(traceRow.rowDiscard).toBeTruthy();
   });
   it('TraceRow Test58', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.rowDiscard = false;
     expect(traceRow.rowDiscard).toBeFalsy();
   });
   it('TraceRow Test59', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.disabledCheck = false;
     expect(traceRow.disabledCheck).toBeFalsy();
   });
   it('TraceRow Test64', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     traceRow.folderPaddingLeft = 1;
     expect(traceRow.folderPaddingLeft).toBeUndefined();
   });
   it('TraceRow Test65', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.getTransferArray()).toStrictEqual([undefined]);
   });
   it('TraceRow Test67', () => {
-    let traceRow = new TraceRow<any>({
-      canvasNumber: 1,
-      alpha: true,
-      contextId: '2d',
-      isOffScreen: true,
-    });
     expect(traceRow.clearMemory()).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/component/trace/base/TraceRowRecyclerView.test.ts b/ide/test/trace/component/trace/base/TraceRowRecyclerView.test.ts
index 87d4cd3db2ec5677b1b79dd5fc0ca36d7224fe0c..c74d9810e430a2a26a61182de6d47e72a98be19e 100644
--- a/ide/test/trace/component/trace/base/TraceRowRecyclerView.test.ts
+++ b/ide/test/trace/component/trace/base/TraceRowRecyclerView.test.ts
@@ -90,47 +90,4 @@ describe('TraceRow Test', () => {
     let traceRow = new TraceRowRecyclerView();
     expect(traceRow.initUI()).toBeUndefined();
   });
-
-  it('Test09', function () {
-    let traceRow = new TraceRowRecyclerView();
-    expect(traceRow.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            width:100%;
-            height:100%;
-            display: block;
-            position:relative;
-        }
-        .container{
-            width:100%;
-            height:100%;
-            overflow: auto;
-            position: absolute;
-            display: block;
-        }
-        .gasket{
-            width:100%;
-            height:auto;
-            top: 0;
-            left: 0;
-            right:0;
-            bottom:0;
-            visibility: hidden;
-        }
-        .recycler-cell{
-            position: absolute;
-            width:100%;
-            visibility: hidden;
-            top: 0;
-            left: 0;
-        }
-        </style>
-        <div class="container">
-            <div class="gasket"></div>
-        </div>
-
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/base/TraceSheet.test.ts b/ide/test/trace/component/trace/base/TraceSheet.test.ts
index 85113922531cab710125a72a2c0c5a8256579792..91b05df051b93c119168cb7a463ee5a222d56ace 100644
--- a/ide/test/trace/component/trace/base/TraceSheet.test.ts
+++ b/ide/test/trace/component/trace/base/TraceSheet.test.ts
@@ -88,44 +88,6 @@ describe('TraceSheet Test', () => {
     expect(traceSheet.loadTabPaneData()).toBeUndefined();
   });
 
-  it('TraceSheet Test19', () => {
-    let traceSheet = new TraceSheet();
-    expect(traceSheet.initHtml()).toMatchInlineSnapshot(`
-"
-            <style>
-                :host([mode='hidden']){
-                    display: none;
-                }
-                :host{
-                    display: block;
-                    background-color: rebeccapurple;
-                }
-                .tabHeight{
-                    height: 30vh;
-                    background-color: var(--dark-background,#FFFFFF);
-                }
-            </style>
-            <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 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="copy-csv" style="pointer-events: none" size="20">
-                                </lit-icon>
-                            </label>
-                        </div>
-                        <lit-icon title="下载数据" id="export-btn" name="import-so" style="font-weight: bold;cursor: pointer;margin-right: 10px" size="20">
-                        </lit-icon>
-                        <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 title="最小化" id="min-btn" name="down" style="font-weight: bold;cursor: pointer;" size="20">
-                        </lit-icon>
-                    </div>
-                </lit-tabs>
-            </div>"
-`);
-  });
   it('TraceSheet Test10', () => {
     let traceSheet = new TraceSheet();
     expect(traceSheet.updateRangeSelect()).toBeFalsy();
diff --git a/ide/test/trace/component/trace/search/Search.test.ts b/ide/test/trace/component/trace/search/Search.test.ts
index 8bb7079c704313320ce37a0275e8514f094562b4..51825eddf6495a97ce34979907f3f1004c977b37 100644
--- a/ide/test/trace/component/trace/search/Search.test.ts
+++ b/ide/test/trace/component/trace/search/Search.test.ts
@@ -77,105 +77,6 @@ describe(' SearchTest', () => {
     expect(search.blur()).toBeUndefined();
   });
 
-  it('Search Test10', () => {
-    let search = new LitSearch();
-    expect(search.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-        }
-        .root{
-            background-color: var(--dark-background5,#fff);
-            border-radius: 40px;
-            padding: 3px 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border: 1px solid var(--dark-border,#c5c5c5);
-            width: 35vw;
-            overflow: hidden;
-            }
-        .root input{
-            outline: none;
-            border: 0px;
-            background-color: transparent;
-            font-size: inherit;
-            color: var(--dark-color,#666666);
-            flex: 1;
-            height: auto;
-            vertical-align:middle;
-            line-height:inherit;
-            height:inherit;
-            padding: 6px 6px 6px 6px};
-            max-height: inherit;
-            box-sizing: border-box;
-        }
-        ::placeholder {
-          color: #b5b7ba;
-          font-size: 1em;
-        }
-        .write::placeholder {
-          color: #b5b7ba;
-          font-size: 1em;
-        }
-        .readonly::placeholder {
-          color: #4f7ab3;
-          font-size: 1em;
-        }
-        .text-Roll::placeholder {
-          font-weight: 700;
-          color: #DB5860;
-          font-size: 1em;
-        }
-        :host([show-search-info]) .search-info{
-            display: inline-flex;
-        }
-        :host(:not([show-search-info])) .search-info{
-            display: none;
-        }
-        .search-info span{
-            color:#ABABAB;
-        }
-        .search-info lit-icon{
-            font-weight: bold;
-        }
-        
-        :host([textRoll]) input {
-            position: relative;
-            animation: textRoll 5s ease-in-out 0s backwards;
-            white-space: nowrap;
-            overflow: hidden;
-            display: block;
-            text-overflow: ellipsis;
-        }
-      
-        @keyframes textRoll {
-            0% {
-                left: 0;
-            }
-            100% {
-                left: 100%;
-            }
-        }       
-        
-        </style>
-        <div class="root" style="display: none">
-            <lit-icon id="search-icon" name="search" size="22" color="#aaaaaa">
-            </lit-icon>
-            <input class="readonly" placeholder="Search" readonly/>
-            <div class="search-info">
-                <span id="index">0</span><span>/</span><span id="total">0</span>
-                <lit-icon class="icon" id="arrow-left" name="caret-left" color="#AAAAAA" size="26">
-                </lit-icon>
-                <span>|</span>
-                <lit-icon class="icon" id="arrow-right"  name="caret-right" color="#AAAAAA" size="26">
-                </lit-icon>
-            </div>
-        </div>
-        "
-`);
-  });
-
   it('Search Test12', () => {
     let search = new LitSearch();
     expect(search.searchValue).toBe('');
diff --git a/ide/test/trace/component/trace/sheet/TabPaneCurrentSelection.test.ts b/ide/test/trace/component/trace/sheet/TabPaneCurrentSelection.test.ts
index 2f86489ebd228871361ee9f242e2c102165668f1..b8f5651108284ebbc77ab5f150b0451da5d87eba 100644
--- a/ide/test/trace/component/trace/sheet/TabPaneCurrentSelection.test.ts
+++ b/ide/test/trace/component/trace/sheet/TabPaneCurrentSelection.test.ts
@@ -14,541 +14,400 @@
  */
 
 // @ts-ignore
-import { getTimeString, TabPaneCurrentSelection } from '../../../../../dist/trace/component/trace/sheet/TabPaneCurrentSelection.js';
+import {
+  getTimeString,
+  TabPaneCurrentSelection,
+} from '../../../../../dist/trace/component/trace/sheet/TabPaneCurrentSelection.js';
 const sqlite = require('../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../dist/trace/database/SqlLite.js');
 
 describe('TabPaneCurrentSelection Test', () => {
-    let tabPaneCurrentSelection = new TabPaneCurrentSelection();
-
-    const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
-    let context = canvas.getContext('2d');
-
-    let cpuData = [
-        {
-            cpu: 1,
-            dur: 1,
-            end_state: 'string',
-            id: 12,
-            name: 'name',
-            priority: 11,
-            processCmdLine: 'processCmdLine',
-            processId: 111,
-            processName: 'processName',
-            schedId: 22,
-            startTime: 0,
-            tid: 100,
-            type: 'type',
-        },
-    ];
-    let functionData = [
-        {
-            argsetid: 53161,
-            depth: 0,
-            dur: 570000,
-            funName: 'binder transaction',
-            id: 92749,
-            is_main_thread: 0,
-            parent_id: null,
-            startTs: 9729867000,
-            threadName: 'Thread-15',
-            tid: 2785,
-        },
-    ];
-    let memData = [
-        {
-            trackId: 100,
-            processName: 'processName',
-            pid: 11,
-            upid: 1,
-            trackName: 'trackName',
-            type: 'type',
-            track_id: 'track_id',
-            value: 111,
-            startTime: 0,
-            duration: 1000,
-            maxValue: 4000,
-            delta: 2,
-        },
-    ];
-    let threadData = [
-        {
-            hasSched: 14724852000,
-            pid: 2519,
-            processName: null,
-            threadName: 'ACCS0',
-            tid: 2716,
-            upid: 1,
-            utid: 1,
-            cpu: null,
-            dur: 405000,
-            end_ts: null,
-            id: 1,
-            is_main_thread: 0,
-            name: 'ACCS0',
-            startTime: 58000,
-            start_ts: null,
-            state: 'S',
-            type: 'thread',
-        },
-    ];
-    let wakeupBean = [
-        {
-            wakeupTime: 0,
-            cpu: 1,
-            process: 'process',
-            pid: 11,
-            thread: 'thread',
-            tid: 22,
-            schedulingLatency: 33,
-            schedulingDesc: 'schedulingDesc',
-        },
-    ];
-
-    let queryData = [
-        {
-            id: 1,
-            startTime: 0,
-            hasSched: 14724852000,
-            pid: 2519,
-            processName: null,
-            threadName: 'ACCS0',
-            tid: 2716,
-            upid: 1,
-            utid: 1,
-            cpu: null,
-            dur: 405000,
-            end_ts: null,
-            is_main_thread: 0,
-            name: 'ACCS0',
-            start_ts: null,
-            state: 'S',
-            type: 'thread',
-        },
-    ];
-    let scrollWakeUp = [
-        {
-            startTime: 0,
-            pid: 11,
-            tid: 22,
-        },
-    ];
-    let data = [
-        {
-            cpu: 1,
-            dur: 1,
-            end_state: 'string',
-            id: 12,
-            name: 'name',
-            priority: 11,
-            processCmdLine: 'processCmdLine',
-            processId: 111,
-            processName: 'processName',
-            schedId: 22,
-            startTime: 0,
-            tid: 100,
-            type: 'type',
-        },
-    ];
-
-    let jankData = {
-        id: 10,
-        ts: 25415,
-        dur: 1200,
-        name: '1523',
-        depth: 1,
-        jank_tag: true,
-        cmdline: 'com.test',
-        type: '0',
-        pid: 20,
-        frame_type: 'app',
-        app_dur: 110,
-        dst_slice: 488,
+  let tabPaneCurrentSelection = new TabPaneCurrentSelection();
+
+  const canvas = document.createElement('canvas');
+  canvas.width = 1;
+  canvas.height = 1;
+  let context = canvas.getContext('2d');
+
+  let cpuData = [
+    {
+      cpu: 1,
+      dur: 1,
+      end_state: 'string',
+      id: 12,
+      name: 'name',
+      priority: 11,
+      processCmdLine: 'processCmdLine',
+      processId: 1111,
+      processName: 'processName',
+      schedId: 221,
+      startTime: 0,
+      tid: 1001,
+      type: 'type',
+    },
+  ];
+  let functionData = [
+    {
+      argsetid: 53161,
+      depth: 0,
+      dur: 570000,
+      funName: 'binder transaction',
+      id: 92749,
+      is_main_thread: 0,
+      parent_id: null,
+      startTs: 9729867000,
+      threadName: 'Thread-15',
+      tid: 2785,
+    },
+  ];
+  let memData = [
+    {
+      trackId: 100,
+      processName: 'processName',
+      pid: 11,
+      upid: 1,
+      trackName: 'trackName',
+      type: 'type',
+      track_id: 'track_id',
+      value: 111,
+      startTime: 0,
+      duration: 1000,
+      maxValue: 4000,
+      delta: 2,
+    },
+  ];
+  let threadData = [
+    {
+      hasSched: 14724852000,
+      pid: 2519,
+      processName: null,
+      threadName: 'ACCS0',
+      tid: 2716,
+      upid: 1,
+      utid: 1,
+      cpu: null,
+      dur: 405001,
+      end_ts: null,
+      id: 11,
+      is_main_thread: 0,
+      name: 'ACCS0',
+      startTime: 58001,
+      start_ts: null,
+      state: 'S',
+      type: 'thread',
+    },
+  ];
+  let wakeupBean = [
+    {
+      wakeupTime: 0,
+      cpu: 1,
+      process: 'process',
+      pid: 11,
+      thread: 'thread',
+      tid: 22,
+      schedulingLatency: 33,
+      schedulingDesc: 'schedulingDesc',
+    },
+  ];
+
+  let queryData = [
+    {
+      id: 1,
+      startTime: 0,
+      hasSched: 14724852000,
+      pid: 2519,
+      processName: null,
+      threadName: 'ACCS0',
+      tid: 2716,
+      upid: 1,
+      utid: 1,
+      cpu: null,
+      dur: 405002,
+      end_ts: null,
+      is_main_thread: 2,
+      name: 'ACCS0',
+      start_ts: null,
+      state: 'S',
+      type: 'thread',
+    },
+  ];
+  let scrollWakeUp = [
+    {
+      startTime: 0,
+      pid: 11,
+      tid: 22,
+    },
+  ];
+  let data = [
+    {
+      cpu: 1,
+      dur: 1,
+      end_state: 'string',
+      id: 12,
+      name: 'name',
+      priority: 11,
+      processCmdLine: 'processCmdLine',
+      processId: 1112,
+      processName: 'processName',
+      schedId: 222,
+      startTime: 0,
+      tid: 1002,
+      type: 'type',
+    },
+  ];
+
+  let jankData = {
+    id: 10,
+    ts: 25415,
+    dur: 1200,
+    name: '1523',
+    depth: 1,
+    jank_tag: true,
+    cmdline: 'com.test',
+    type: '0',
+    pid: 20,
+    frame_type: 'app',
+    app_dur: 110,
+    dst_slice: 488,
+  };
+
+  let jankDataRender = {
+    id: 22,
+    ts: 254152,
+    dur: 1202,
+    name: '1583',
+    depth: 1,
+    jank_tag: true,
+    cmdline: 'render.test',
+    type: '0',
+    pid: 22,
+    frame_type: 'render_service',
+    src_slice: '525',
+    rs_ts: 2562,
+    rs_vsync: '2562',
+    rs_dur: 1528,
+    rs_pid: 1252,
+    rs_name: 'name',
+    gpu_dur: 2568,
+  };
+
+  let irqData = [
+    {
+      id: 25,
+      startNS: 1526,
+      name: 'test',
+      dur: 125,
+      argSetId: 526,
+    },
+  ];
+
+  let clockData = [
+    {
+      filterId: 96,
+      value: 253,
+      startNS: 25852,
+      dur: 125,
+      delta: 2586,
+    },
+  ];
+
+  let functionDataTest = {
+    argsetid: 53161,
+    depth: 0,
+    dur: 570000,
+    funName: 'binder async',
+    id: 92749,
+    is_main_thread: 0,
+    parent_id: null,
+    startTs: 9729867000,
+    threadName: 'Thread-15',
+    tid: 2785,
+  };
+
+  tabPaneCurrentSelection.queryWakeUpData = jest.fn(() => 'WakeUpData');
+  tabPaneCurrentSelection.queryWakeUpData.wb = jest.fn(() => null);
+  tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1);
+  let argsetTest = sqlite.queryBinderArgsByArgset;
+  let argsetIdTest = sqlite.queryBinderByArgsId;
+  let argsetData = [
+    {
+      argset: 12,
+      keyName: 'test',
+      id: 123,
+      desc: 'desc',
+      strValue: 'value',
+    },
+    {
+      argset: 11,
+      keyName: 'test',
+      id: 113,
+      desc: 'desc',
+      strValue: 'value',
+    },
+  ];
+
+  let argsetIdData = [
+    {
+      type: 'func',
+      startTs: 1258,
+      dur: 25,
+      depth: 1,
+      argsetid: 258,
+    },
+  ];
+  argsetTest.mockResolvedValue(argsetData);
+  argsetIdTest.mockResolvedValue(argsetIdData);
+
+  let gpuDur = sqlite.queryGpuDur;
+  let gpuDurData = [
+    {
+      gpu_dur: 1528,
+    },
+  ];
+  gpuDur.mockResolvedValue(gpuDurData);
+
+  let queryFlows = sqlite.queryFlowsData;
+  let queryFlowsData = [
+    {
+      name: '25962',
+      pid: 1885,
+      cmdline: 'render Test',
+      type: 1,
+    },
+  ];
+  queryFlows.mockResolvedValue(queryFlowsData);
+
+  let queryPreceding = sqlite.queryPrecedingData;
+  let queryPrecedingData = [
+    {
+      name: '2596562',
+      pid: 18854,
+      cmdline: 'app Test',
+      type: 0,
+    },
+  ];
+  queryPreceding.mockResolvedValue(queryPrecedingData);
+
+  tabPaneCurrentSelection.queryWakeUpData = jest.fn(() => 'WakeUpData');
+  tabPaneCurrentSelection.queryWakeUpData.wb = jest.fn(() => null);
+  tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1);
+
+  it('TabPaneCurrentSelectionTest01', function () {
+    let result = tabPaneCurrentSelection.setFunctionData(functionData);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest02', function () {
+    let result = tabPaneCurrentSelection.setMemData(memData);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest03', function () {
+    let result = getTimeString(3600_000_000_002);
+    expect(result).toBe('1h 2ns ');
+  });
+
+  it('TabPaneCurrentSelectionTest04', function () {
+    let result = getTimeString(60000000001);
+    expect(result).toBe('1m 1ns ');
+  });
+
+  it('TabPaneCurrentSelectionTest05', function () {
+    let result = getTimeString(1000000001);
+    expect(result).toBe('1s 1ns ');
+  });
+
+  it('TabPaneCurrentSelectionTest06', function () {
+    let result = getTimeString(1000001);
+    expect(result).toBe('1ms 1ns ');
+  });
+
+  it('TabPaneCurrentSelectionTest07', function () {
+    let result = getTimeString(1001);
+    expect(result).toBe('1μs 1ns ');
+  });
+
+  it('TabPaneCurrentSelectionTest08', function () {
+    let result = getTimeString(101);
+    expect(result).toBe('101ns ');
+  });
+
+  it('TabPaneCurrentSelectionTest09', function () {
+    tabPaneCurrentSelection.setCpuData = jest.fn(() => true);
+    tabPaneCurrentSelection.data = jest.fn(() => true);
+    expect(tabPaneCurrentSelection.data).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest10', function () {
+    expect(tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1)).toBeTruthy();
+  });
+
+  it('TabPaneCurrentSelectionTest13', function () {
+    expect(tabPaneCurrentSelection.initCanvas()).not.toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest14', function () {
+    let str = {
+      length: 0,
     };
-
-    let jankDataRender = {
-        id: 25,
-        ts: 254151,
-        dur: 1202,
-        name: '1583',
-        depth: 1,
-        jank_tag: true,
-        cmdline: 'render.test',
-        type: '0',
-        pid: 20,
+    expect(tabPaneCurrentSelection.transferString(str)).toBe('');
+  });
+
+  it('TabPaneCurrentSelectionTest16', function () {
+    expect(tabPaneCurrentSelection.drawRight(null)).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest01', function () {
+    let result = tabPaneCurrentSelection.setFunctionData(functionData);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest02', function () {
+    let result = tabPaneCurrentSelection.setMemData(memData);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest12', function () {
+    let result = tabPaneCurrentSelection.setJankData(jankData, undefined, 1);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest13', function () {
+    let result = tabPaneCurrentSelection.setJankData(jankDataRender, undefined, 1);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest14', function () {
+    let result = tabPaneCurrentSelection.setIrqData(irqData);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest16', function () {
+    let result = tabPaneCurrentSelection.setClockData(clockData);
+    expect(result).toBeUndefined();
+  });
+
+  it('TabPaneCurrentSelectionTest17', function () {
+    let result = tabPaneCurrentSelection.setFunctionData(functionDataTest);
+    expect(result).toBeUndefined();
+  });
+  it('TabPaneCurrentSelectionTest18', function () {
+    let result = tabPaneCurrentSelection.setStartupData(irqData, 1);
+    expect(result).toBeUndefined();
+  });
+  it('TabPaneCurrentSelectionTest19', function () {
+    let result = tabPaneCurrentSelection.setStaticInitData(irqData, 1);
+    expect(result).toBeUndefined();
+  });
+  it('TabPaneCurrentSelectionTest20', function () {
+    let list: never[] = [];
+    let data = [
+      {
+        jank_tag: 1,
         frame_type: 'render_service',
-        src_slice: '525',
-        rs_ts: 2569,
-        rs_vsync: '2569',
-        rs_dur: 1528,
-        rs_pid: 1252,
-        rs_name: 'name',
-        gpu_dur: 2568,
-    };
-
-    let irqData = [
-        {
-            id: 25,
-            startNS: 1526,
-            name: 'test',
-            dur: 125,
-            argSetId: 526,
-        },
-    ];
-
-    let clockData = [
-        {
-            filterId: 96,
-            value: 253,
-            startNS: 25852,
-            dur: 125,
-            delta: 2586,
-        },
-    ];
-
-    let functionDataTest = {
-        argsetid: 53161,
-        depth: 0,
-        dur: 570000,
-        funName: 'binder async',
-        id: 92749,
-        is_main_thread: 0,
-        parent_id: null,
-        startTs: 9729867000,
-        threadName: 'Thread-15',
-        tid: 2785,
-    };
-
-    tabPaneCurrentSelection.queryWakeUpData = jest.fn(() => 'WakeUpData');
-    tabPaneCurrentSelection.queryWakeUpData.wb = jest.fn(() => null);
-    tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1);
-    let argsetTest = sqlite.queryBinderArgsByArgset;
-    let argsetIdTest = sqlite.queryBinderByArgsId;
-    let argsetData = [
-        {
-            argset: 12,
-            keyName: 'test',
-            id: 123,
-            desc: 'desc',
-            strValue: 'value',
-        },
-        {
-            argset: 11,
-            keyName: 'test',
-            id: 113,
-            desc: 'desc',
-            strValue: 'value',
-        },
-    ];
-
-    let argsetIdData = [
-        {
-            type: 'func',
-            startTs: 1258,
-            dur: 25,
-            depth: 1,
-            argsetid: 258,
-        },
-    ];
-    argsetTest.mockResolvedValue(argsetData);
-    argsetIdTest.mockResolvedValue(argsetIdData);
-
-    let gpuDur = sqlite.queryGpuDur;
-    let gpuDurData = [
-        {
-            gpu_dur: 1528,
-        },
-    ];
-    gpuDur.mockResolvedValue(gpuDurData);
-
-    let queryFlows = sqlite.queryFlowsData;
-    let queryFlowsData = [
-        {
-            name: '25962',
-            pid: 1885,
-            cmdline: 'render Test',
-            type: 1,
-        },
-    ];
-    queryFlows.mockResolvedValue(queryFlowsData);
-
-    let queryPreceding = sqlite.queryPrecedingData;
-    let queryPrecedingData = [
-        {
-            name: '2596562',
-            pid: 18854,
-            cmdline: 'app Test',
-            type: 0,
-        },
+      },
     ];
-    queryPreceding.mockResolvedValue(queryPrecedingData);
-
-    tabPaneCurrentSelection.queryWakeUpData = jest.fn(() => 'WakeUpData');
-    tabPaneCurrentSelection.queryWakeUpData.wb = jest.fn(() => null);
-    tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1);
-
-    it('TabPaneCurrentSelectionTest01', function () {
-        let result = tabPaneCurrentSelection.setFunctionData(functionData);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest02', function () {
-        let result = tabPaneCurrentSelection.setMemData(memData);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest03', function () {
-        let result = getTimeString(3600_000_000_002);
-        expect(result).toBe('1h 2ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest04', function () {
-        let result = getTimeString(60000000001);
-        expect(result).toBe('1m 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest05', function () {
-        let result = getTimeString(1000000001);
-        expect(result).toBe('1s 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest06', function () {
-        let result = getTimeString(1000001);
-        expect(result).toBe('1ms 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest07', function () {
-        let result = getTimeString(1001);
-        expect(result).toBe('1μs 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest08', function () {
-        let result = getTimeString(101);
-        expect(result).toBe('101ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest09', function () {
-        tabPaneCurrentSelection.setCpuData = jest.fn(() => true);
-        tabPaneCurrentSelection.data = jest.fn(() => true);
-        expect(tabPaneCurrentSelection.data).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest10', function () {
-        expect(tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1)).toBeTruthy();
-    });
-
-    it('TabPaneCurrentSelectionTest13', function () {
-        expect(tabPaneCurrentSelection.initCanvas()).not.toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest14', function () {
-        let str = {
-            length: 0,
-        };
-        expect(tabPaneCurrentSelection.transferString(str)).toBe('');
-    });
-
-
-    it('TabPaneCurrentSelectionTest16', function () {
-        expect(tabPaneCurrentSelection.drawRight(null)).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest01', function () {
-        let result = tabPaneCurrentSelection.setFunctionData(functionData);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest02', function () {
-        let result = tabPaneCurrentSelection.setMemData(memData);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest03', function () {
-        let result = getTimeString(3600_000_000_002);
-        expect(result).toBe('1h 2ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest04', function () {
-        let result = getTimeString(60000000001);
-        expect(result).toBe('1m 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest05', function () {
-        let result = getTimeString(1000000001);
-        expect(result).toBe('1s 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest06', function () {
-        let result = getTimeString(1000001);
-        expect(result).toBe('1ms 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest07', function () {
-        let result = getTimeString(1001);
-        expect(result).toBe('1μs 1ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest08', function () {
-        let result = getTimeString(101);
-        expect(result).toBe('101ns ');
-    });
-
-    it('TabPaneCurrentSelectionTest09', function () {
-        tabPaneCurrentSelection.setCpuData = jest.fn(() => true);
-        tabPaneCurrentSelection.data = jest.fn(() => true);
-        expect(tabPaneCurrentSelection.data).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest10', function () {
-        expect(tabPaneCurrentSelection.setCpuData(cpuData, undefined, 1)).toBeTruthy();
-    });
-
-    it('TabPaneCurrentSelectionTest13', function () {
-        expect(tabPaneCurrentSelection.initCanvas()).not.toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest14', function () {
-        let str = {
-            length: 0,
-        };
-        expect(tabPaneCurrentSelection.transferString(str)).toBe('');
-    });
-
-
-    it('TabPaneCurrentSelectionTest16', function () {
-        expect(tabPaneCurrentSelection.drawRight(null)).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest11', function () {
-        expect(tabPaneCurrentSelection.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            .table-title{
-                top: 0;
-                background: var(--dark-background,#ffffff);
-                position: sticky;
-                width: 100%;
-                display: flex;
-            }
-            .table-title > h2{
-                font-size: 16px;
-                font-weight: 400;
-                visibility: visible;
-                width: 50%;
-                padding: 0 10px;
-            }
-            #rightTitle{
-                width: 50%;
-                display: flex;
-                justify-content: space-between;
-                padding: 0 10px;
-                font-size: 16px;
-                font-weight: 400;
-                visibility: visible;
-            }
-            #rightTitle > h2{
-                font-size: 16px;
-                font-weight: 400;
-            }           
-            #rightButton{
-                padding-top:12px;
-            }
-            .right{
-                display: flex;
-            }
-            #right-star{
-                padding-top: 10px;
-                visibility: hidden;
-            }
-            .scroll-area{
-                display: flex;
-                flex-direction: row;
-                flex: 1;
-            }
-            .table-left{
-                width: 50%;
-                height: auto;
-                padding: 0 10px;
-            }
-            .table-right{
-                width: 50%;
-            }
-        </style>
-        <div id="scroll_view" style="display: flex;flex-direction: column;width: 100%;height: 100%;overflow: auto">
-            <div style="width: 100%;height: auto;position: relative">
-                <div class="table-title">
-                    <h2 id="leftTitle"></h2>
-                    <div id="rightTitle" >
-                        <h2 id="rightText">Scheduling Latency</h2>
-                        <div class="right">
-                        <lit-button id="rightButton"  height="32px" width="164px" color="black" font_size="14px" border="1px solid black" 
-                        >GetWakeupList</lit-button>
-                        <lit-icon id="right-star" class="collect" name="star-fill" size="30"></lit-icon>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="scroll-area">
-                <lit-table id="selectionTbl" class="table-left" no-head hideDownload>
-                        <lit-table-column title="name" data-index="name" key="name" align="flex-start"  width="180px">
-                            <template><div>{{name}}</div></template>
-                        </lit-table-column>
-                        <lit-table-column title="value" data-index="value" key="value" align="flex-start" >
-                            <template><div style="display: flex;">{{value}}</div></template>
-                        </lit-table-column>
-                </lit-table>
-                <div class="table-right">
-                    <canvas id="rightDraw" style="width: 100%;height: 100%;"></canvas>
-                </div>
-            </div>
-        </div>
-        </div>
-        "
-`);
-    });
-
-    it('TabPaneCurrentSelectionTest12', function () {
-        let result = tabPaneCurrentSelection.setJankData(jankData, undefined, 1);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest13', function () {
-        let result = tabPaneCurrentSelection.setJankData(jankDataRender, undefined, 1);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest14', function () {
-        let result = tabPaneCurrentSelection.setIrqData(irqData);
-        expect(result).toBeUndefined();
-    });
-
-
-    it('TabPaneCurrentSelectionTest16', function () {
-        let result = tabPaneCurrentSelection.setClockData(clockData);
-        expect(result).toBeUndefined();
-    });
-
-    it('TabPaneCurrentSelectionTest17', function () {
-        let result = tabPaneCurrentSelection.setFunctionData(functionDataTest);
-        expect(result).toBeUndefined();
-    });
-    it('TabPaneCurrentSelectionTest18', function () {
-        let result = tabPaneCurrentSelection.setStartupData(irqData,1);
-        expect(result).toBeUndefined();
-    });
-    it('TabPaneCurrentSelectionTest19', function () {
-        let result = tabPaneCurrentSelection.setStaticInitData(irqData,1);
-        expect(result).toBeUndefined();
-    });
-    it('TabPaneCurrentSelectionTest20', function () {
-        let list: never[] = [];
-        let data =[{
-            jank_tag:1,
-            frame_type:'render_service',
-        }]
-        let result = tabPaneCurrentSelection.setJankType(data,list);
-        expect(result).toBeUndefined();
-    });
+    let result = tabPaneCurrentSelection.setJankType(data, list);
+    expect(result).toBeUndefined();
+  });
 });
diff --git a/ide/test/trace/component/trace/sheet/TabPaneFilter.test.ts b/ide/test/trace/component/trace/sheet/TabPaneFilter.test.ts
index 2454238897c6b359cb8c641db6bd5f494706bef8..53eb61b26952e442d7a282fb344f8b54031dbc60 100644
--- a/ide/test/trace/component/trace/sheet/TabPaneFilter.test.ts
+++ b/ide/test/trace/component/trace/sheet/TabPaneFilter.test.ts
@@ -65,264 +65,6 @@ describe('TabPaneFilter Test', () => {
     expect(tabPaneFilter.icon).toBe('tree');
   });
 
-  it('TabPaneFilterTest07', function () {
-    expect(tabPaneFilter.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            height: 30px;
-            background: var(--dark-background4,#F2F2F2);
-            border-top: 1px solid var(--dark-border1,#c9d0da);display: flex;align-items: center;z-index: 2;
-            margin-left: -10px;
-            width: calc(100% + 20px);
-        }
-
-        .chosen-single {
-            position: relative;
-            display: block;
-            overflow: hidden;
-            text-decoration: none;
-            white-space: nowrap;
-            height: 34px;
-            padding: 3px 6px;
-            font-size: 14px;
-            line-height: 1.42857143;
-            color: #555;
-            background-color: #fff;
-            background-image: none;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
-            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);    
-        }
-        .disabled{
-        color: rgba(0,0,0,0.4);
-        }
-        #filter-input{
-        background: var(--dark-background4,#FFFFFF);
-        border: 1px solid var(--dark-border,rgba(0,0,0,0.60));
-        color: var(--dark-color2,#000000);
-        border-radius: 8px;
-        width: 200px;
-        }
-        #filter-input:focus{
-            outline: none;
-            box-shadow: 1px 1px 1px var(--dark-color,#bebebe);
-        }
-        #filter-input::-webkit-input-placeholder {
-                color: var(--dark-color,#aab2bd);
-            }
-        .describe{
-            /*display: inline-block*/
-            font-size: 0.8rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            min-width: 50px;
-        }
-
-        #mark{
-            border: 1px solid var(--bark-prompt,#999999);
-            border-radius: 1px;
-            background: var(--dark-background4,#F2F2F2);
-            color: var(--dark-color2,rgba(0,0,0,0.9));
-            transition: all 0.1s;
-        }
-        #mark:hover{
-            background: var(--dark-background1,#dfdfdf);
-        }
-        #mark:active{
-            background: var(--dark-background4,#F2F2F2);
-            transition: all 0.05s;
-        }
-        #first-select{
-        width: 200px;
-        }
-        #second-select{
-        width: 200px;
-        }
-        .spacing{
-        margin-left: 10px;
-        }
-        .max-spacing{
-        margin-left: 15px;
-        }
-
-        :host(:not([inputLeftText])) .left-text{
-            display: none;
-        }
-        :host(:not([input])) #filter-input{
-            display: none;
-        }
-        :host(:not([mark])) #mark{
-            display: none;
-        }
-        :host(:not([first])) #first-select{
-            display: none;
-        }
-        :host(:not([second])) #second-select{
-            display: none;
-        }
-        :host(:not([third])) #third-select{
-            display: none;
-        }
-        :host(:not([tree])) .tree{
-            display: none;
-        }
-        :host([disabledMining]) #data-mining{
-            display: none;
-        }
-        :host([disabledMining]) #data-library{
-            display: none;
-        }
-        :host(:not([icon])) #icon{
-            display: none;
-        }
-        #icon[name="statistics"]{
-            margin-left: 12px;
-        }
-        
-        .constraints-input{
-            background: var(--dark-border,#ffffff);
-            color: var(--dark-color1,rgba(0,0,0,0.86));
-            border: 1px solid var(--dark-border,rgba(0,0,0,0.60));
-            border-radius: 10px;
-            width: 40px;
-            margin-left: 10px;
-            outline: none;
-        }
-        .constraints-input[disabled]{
-            background: var(--dark-background5,#ededed);
-        }
-        .reset-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;
-        }
-        
-        #call-tree-popover[visible="true"] #call-tree{
-            color: #0A59F7;
-        }
-        #tree-constraints-popover[visible="true"] #tree-constraints{
-            color: #0A59F7;
-        }
-        #data-mining-popover[visible="true"] #data-mining{
-            color: #0A59F7;
-        }
-        
-        .mining-checked[highlight]{
-            color: #FFFFFF;
-            background: #0C65D1;
-        }
-        #data-library-popover[visible="true"] #data-library{
-            color: #0A59F7;
-        }
-        .library-checked[highlight]{
-            color: #FFFFFF;
-            background: #0C65D1;
-        }
-        #title{
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            flex: 1;
-            text-align: left;
-        }
-        #mining-row{
-            background: var(--dark-background4,#F2F2F2);
-            border-radius: 2px;
-            height: 135px;
-            width: 250px;
-            overflow-y: auto;
-        }
-        #library-row{
-            background: var(--dark-background4,#F2F2F2);
-            border-radius: 2px;
-            height: 135px;
-            width: 250px;
-            overflow-y: auto;
-        }
-        .tree-check{
-            margin-bottom: 5px;
-            display: flex;
-            align-content: center;
-        }
-        .sort{
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-        }
-        :host(:not([sort])) .sort{
-            display: none;
-        }
-        .popover{
-            display: flex;
-        }
-</style>
-    <lit-icon name="menu" class="spacing" id="icon" size="20"></lit-icon>
-    <span class="describe left-text spacing">Input Filter</span>
-    <input id="filter-input" class="spacing" placeholder="Detail Filter"/>
-    <button id="mark" class="spacing">Mark Snapshot</button>
-    <div id="load" style="display: flex">
-    
-    </div>
-        <lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="call-tree-popover">
-             <div slot="content">
-                 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Invert</div></div>
-                 <div class="tree-check"><lit-check-box class="lit-check-box" not-close></lit-check-box><div>Hide System so</div></div>
-             </div>
-             <span class="describe tree max-spacing" id="call-tree">Options</span>
-        </lit-popover>
-        <lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="tree-constraints-popover">
-             <div slot="content" style="display: flex; align-items: flex-end">
-                 <lit-check-box id="constraints-check" not-close></lit-check-box>
-                 <input class="constraints-input" disabled value="0" not-close/>
-                 <lit-popover placement="topLeft" class="popover" haveRadio="true" not-close>
-                     <div slot="content">
-                         <div style="font-size: 0.7rem">Constraints：Only enabled with data and while stopped；</div>
-                         <div style="font-size: 0.7rem">filters data to thresholds. </div>
-                     </div>
-                     <input class="constraints-input" disabled value="∞" not-close/>
-                  </lit-popover>
-             </div>
-             <span class="describe tree max-spacing" id="tree-constraints">Sample Count Filter</span>
-        </lit-popover>
-         <lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="data-mining-popover">
-            <div slot="content">
-                 <div id="mining-row">
-                     
-                 </div>
-                 <div style="display: flex;justify-content: space-around; margin-top: 8px">
-                     <div class="mining-button reset-button">Reset</div>
-                 </div>
-            </div>
-            <span class="describe tree max-spacing" id="data-mining">Symbol Filter</span>
-        </lit-popover>
-        <lit-popover placement="topLeft" class="popover" haveRadio="true" trigger="click" id="data-library-popover">
-            <div slot="content">
-                 <div id="library-row">
-                     
-                 </div>
-                 <div style="display: flex;justify-content: space-around; margin-top: 8px">
-                     <div class="library-button reset-button">Reset</div>
-                 </div>
-            </div>
-            <span class="describe tree max-spacing" id="data-library">Library Filter</span>
-        </lit-popover>
-        <div class="sort">
-            <lit-icon name="swap" class="spacing" size="16"></lit-icon>
-            <div style="margin-left: 5px" class="describe statistics-name">Statistics by Thread</div>
-        </div>
-        "
-`);
-  });
-
   it('TabPaneFilterTest10', function () {
     expect(tabPaneFilter.addDataMining({ name: '' }, '')).toBe(-1);
   });
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbility.test.ts
index 1ce828f66da34005465645919b2a4d3195e5083a..792213e91c326f3b85dcb4f3094321a9cecc9c01 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbility.test.ts
@@ -14,9 +14,6 @@
  */
 // @ts-ignore
 import { TabPaneDmaAbility } from '../../../../../../dist/trace/component/trace/sheet/ability/TabPaneDmaAbility.js';
-
-const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 // @ts-ignore
 window.ResizeObserver = window.ResizeObserver ||
     jest.fn().mockImplementation(() => ({
@@ -24,55 +21,56 @@ window.ResizeObserver = window.ResizeObserver ||
         observe: jest.fn(),
         unobserve: jest.fn(),
     }));
-
+const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 describe('TabPaneDmaAbility Test', () => {
     let tabPaneDmaAbility = new TabPaneDmaAbility();
     let getTabDmaAbilityData = sqlit.getTabDmaAbilityData;
     getTabDmaAbilityData.mockResolvedValue([
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 1111211,
+            avgSizes: "32.00MB",
             expTaskComm: "allocator_host",
             maxSize: 25165822,
             maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            minSize: 32222222,
+            minSizes: "42.00MB",
             process: "com.ohos.camera(22)",
             processId: 22,
             processName: "com.ohos.camera",
             startNs: 4568285416,
-            sumSize: 25165824,
-            sumSizes: "24.00MB",
+            sumSize: 3222225664,
+            sumSizes: "98.00MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 2453422,
+            avgSizes: "7.00MB",
             expTaskComm: "11allocator_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
+            maxSize: 4355333,
+            maxSizes: "55.00MB",
+            minSize: 5333211,
             minSizes: "24.00MB",
             process: "com.ohos.camera(1)",
             processId: 1,
             processName: "com.ohos.camera",
             startNs: 4568285416,
-            sumSize: 25165824,
-            sumSizes: "24.00MB",
+            sumSize: 13335433,
+            sumSizes: "57.00MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 43332178,
+            avgSizes: "85.00MB",
             expTaskComm: "alloca11tor_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
+            maxSize: 7753333,
+            maxSizes: "55.00MB",
+            minSize: 2314425,
             minSizes: "24.00MB",
             process: "com.ohos.c11amera(33)",
             processId: 33,
             processName: "com.ohos.camera",
             startNs: 4568285416,
-            sumSize: 25165824,
-            sumSizes: "24.00MB",
+            sumSize: 23113453,
+            sumSizes: "7.00MB",
         },
     ]);
     tabPaneDmaAbility.init = jest.fn(() => true);
@@ -84,6 +82,12 @@ describe('TabPaneDmaAbility Test', () => {
         cpuFreqLimitDatas: [],
         cpuStateFilterIds: [],
         cpus: [],
+        fsCount:0,
+        funAsync:[],
+        funTids:[],
+        gpu:{gl: false, gpuWindow: false, gpuTotal: false},
+        gpuMemoryAbilityData:[],
+        gpuMemoryTrackerData:[],
         diskAbilityIds: [],
         diskIOLatency: false,
         diskIOReadIds: [],
@@ -91,23 +95,17 @@ describe('TabPaneDmaAbility Test', () => {
         diskIOipids: [],
         dmaAbilityData: [],
         dmaVmTrackerData:[],
-        fsCount:0,
-        funAsync:[],
-        funTids:[],
-        gpu:{gl: false, gpuWindow: false, gpuTotal: false},
-        gpuMemoryAbilityData:[],
-        gpuMemoryTrackerData:[],
         hasFps:false,
         irqMapData:{size: 0},
         isCurrentPane:false,
         jankFramesData:[],
         jsCpuProfilerData:[],
         jsMemory:[],
-        leftNs:486814455,
+        leftNs:42999114455,
         memoryAbilityIds:[],
         networkAbilityIds:[],
-        recordStartNs:333185936669149,
-        rightNs:16125728831,
+        recordStartNs:3133366669149,
+        rightNs:33532121,
         sdkCounterIds:[],
         sdkSliceIds:[],
         smapsType:[],
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.test.ts
index 59ecd003f834c564870698a9fbaa26bb91a970f4..e94c29364fa285d4b0e95a774f6e530c9084f19b 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneDmaAbilityComparison.test.ts
@@ -21,8 +21,8 @@ jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
 });
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
     return {
-        snapshotDataSource: () => {},
         removeAttribute: () => {},
+        snapshotDataSource: () => {},
     };
 });
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
@@ -49,15 +49,15 @@ describe('TabPaneDmaAbilityComparison Test', () => {
     let datalist = [
         {
             name: 'Snapshot2',
-            startNs: 9800526561,
+            startNs: 333526561,
             type: 'ability',
-            value: 0,
+            value: 110,
         },
         {
             name: 'Snapshot1',
-            startNs: 4778214061,
+            startNs: 13454688,
             type: 'ability',
-            value: 0,
+            value: 78,
         },
     ];
     tabPaneDmaComparisonAbility.init = jest.fn(() => true);
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.test.ts
index d2a6e42bf8595b1c6f1fb2ab027c49107f2796e6..2781aa319f958ffa92ed194b7d1b6f03c2248e98 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneDmaSelectAbility.test.ts
@@ -40,13 +40,13 @@ describe('TabPaneDmaSelectAbility Test', () => {
     let dmaSelectionData = [
         {
             startNs: 0,
-            fd: 1,
-            size: 1000,
+            fd: 11,
+            size: 3200,
             ino: 10,
             expPid: 0,
             bufName: 'aa',
             expName: 'bb',
-            expTaskComm: 'cc',
+            expTaskComm: 'expTask',
             processId:2,
             processName:'dd',
             flag:0,
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.test.ts
index 3bf66fe67be0d1897958b31ec2fae0c59e14d5ab..f0f7788f7ac0e9bc8676e7d884f98e2c001c27b1 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryAbility.test.ts
@@ -18,8 +18,7 @@ import { TabPaneGpuMemoryAbility } from '../../../../../../dist/trace/component/
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
-    return {
-    }
+    return {}
 });
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 // @ts-ignore
@@ -68,23 +67,23 @@ describe('TabPaneGpuMemoryAbility Test', () => {
     ]);
     tabPaneGpuMemoryAbility.init = jest.fn(() => true);
     getTabGpuMemoryAbilityData.data = {
+        cpuFreqLimitDatas: [],
+        cpuStateFilterIds: [],
         anomalyEnergy: [],
         clockMapData: {},
         cpuAbilityIds: [],
         cpuFreqFilterIds: [],
-        cpuFreqLimitDatas: [],
-        cpuStateFilterIds: [],
         cpus: [],
         diskAbilityIds: [],
         diskIOLatency: false,
         diskIOReadIds: [],
-        diskIOWriteIds: [],
-        diskIOipids: [],
-        dmaAbilityData: [],
         dmaVmTrackerData:[],
         fsCount:0,
         funAsync:[],
         funTids:[],
+        diskIOWriteIds: [],
+        diskIOipids: [],
+        dmaAbilityData: [],
         gpu:{gl: false, gpuWindow: false, gpuTotal: false},
         gpuMemoryAbilityData:[1,23,''],
         gpuMemoryTrackerData:[],
@@ -94,11 +93,11 @@ describe('TabPaneGpuMemoryAbility Test', () => {
         jankFramesData:[],
         jsCpuProfilerData:[],
         jsMemory:[],
-        leftNs:486814455,
+        leftNs:3244455,
         memoryAbilityIds:[],
         networkAbilityIds:[],
-        recordStartNs:333185936669149,
-        rightNs:16125728831,
+        recordStartNs:44443669149,
+        rightNs:6543728831,
         sdkCounterIds:[],
         sdkSliceIds:[],
         smapsType:[],
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.test.ts
index b02a85804c728a317a85355649ea0118d97fbfab..b60a0b649a152673b6354d86f6ab6d2addf6bb79 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneGpuMemoryComparison.test.ts
@@ -19,12 +19,6 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
     return {};
 });
-jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
-    return {
-        snapshotDataSource: () => {},
-        removeAttribute: () => {},
-    };
-});
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 // @ts-ignore
 window.ResizeObserver =
@@ -34,6 +28,12 @@ window.ResizeObserver =
         observe: jest.fn(),
         unobserve: jest.fn(),
     }));
+jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
+    return {
+        snapshotDataSource: () => {},
+        removeAttribute: () => {},
+    };
+});
 
 describe('TabPaneGpuMemoryComparison Test', () => {
     let tabPaneGpuMemoryComparison = new TabPaneGpuMemoryComparison();
@@ -50,15 +50,15 @@ describe('TabPaneGpuMemoryComparison Test', () => {
     let datalist = [
         {
             name: 'Snapshot2',
-            startNs: 9800526561,
+            startNs: 201326561,
             type: 'ability',
-            value: 0,
+            value: 17,
         },
         {
             name: 'Snapshot1',
-            startNs: 4778214061,
+            startNs: 32110343,
             type: 'ability',
-            value: 0,
+            value: 67,
         },
     ];
     tabPaneGpuMemoryComparison.init = jest.fn(() => true);
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneMemoryAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneMemoryAbility.test.ts
index 8de72fd7e22134574372065bcfd1490d1fa77df1..3a43a6e08cc35d88bc66155242c50afb4491e5d4 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneMemoryAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneMemoryAbility.test.ts
@@ -58,28 +58,28 @@ describe('TabPaneMemoryAbility Test', () => {
   tabPaneMemoryAbility.memoryAbilityTbl = jest.fn(() => true);
   tabPaneMemoryAbility.memoryAbilityTbl.recycleDataSource = jest.fn(() => []);
   tabPaneMemoryAbility.data = {
-    cpus: [],
-    threadIds: [],
-    trackIds: [],
-    funTids: [],
-    heapIds: [],
+    cpus: [1],
+    threadIds: [12,45,5],
+    trackIds: [554,87,5],
+    funTids: [44,90],
+    heapIds: [77,177],
     nativeMemory: [],
-    cpuAbilityIds: [],
-    memoryAbilityIds: [],
-    diskAbilityIds: [],
-    networkAbilityIds: [],
-    leftNs: 0,
-    rightNs: 1000,
-    hasFps: false,
+    cpuAbilityIds: [55,76],
+    memoryAbilityIds: [5],
+    diskAbilityIds: [55,8],
+    networkAbilityIds: [8,0],
+    leftNs: 8540,
+    rightNs: 91000,
+    hasFps: true,
     statisticsSelectData: undefined,
-    perfSampleIds: [],
+    perfSampleIds: [120,56],
     perfCpus: [],
     perfProcess: [],
     perfThread: [],
     perfAll: false,
-    systemEnergy: [0, 1, 2],
-    powerEnergy: [0, 1, 2],
-    anomalyEnergy: [0, 1, 2],
+    systemEnergy: [34, 2],
+    powerEnergy: [0, 234],
+    anomalyEnergy: [2, 5, 6, 6, 2],
   };
 
   it('TabPaneMemoryAbilityTest01', function () {
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPaneNetworkAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPaneNetworkAbility.test.ts
index a67b402101ce75b2d83b602a435865516da1bbc9..6451fc52cdddb10e39f7bb0302b11c8dffbc71f9 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPaneNetworkAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPaneNetworkAbility.test.ts
@@ -47,28 +47,28 @@ describe('TabPaneNetworkAbility Test', () => {
   ]);
 
   tabPaneNetworkAbility.data = {
-    cpus: [],
-    threadIds: [],
-    trackIds: [],
-    funTids: [],
-    heapIds: [],
+    cpus: [0],
+    threadIds: [8,45],
+    trackIds: [10,546],
+    funTids: [96,100],
+    heapIds: [200,4],
     nativeMemory: [],
-    cpuAbilityIds: [],
-    memoryAbilityIds: [],
-    diskAbilityIds: [],
-    networkAbilityIds: [],
-    leftNs: 0,
-    rightNs: 1000,
+    cpuAbilityIds: [54,0],
+    memoryAbilityIds: [0,156,2],
+    diskAbilityIds: [36,100],
+    networkAbilityIds: [54,560],
+    leftNs: 122215,
+    rightNs: 62561000,
     hasFps: false,
     statisticsSelectData: undefined,
-    perfSampleIds: [],
+    perfSampleIds: [23.6,9],
     perfCpus: [],
     perfProcess: [],
     perfThread: [],
     perfAll: false,
-    systemEnergy: [0, 1, 2],
-    powerEnergy: [0, 1, 2],
-    anomalyEnergy: [0, 1, 2],
+    systemEnergy: [54,0],
+    powerEnergy: [0, 456, 5],
+    anomalyEnergy: [45, 56, 2],
   };
 
   it('TabPaneNetworkAbilityTest01', () => {
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPanePurgPin.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPanePurgPin.test.ts
index 0485af9e702754956fdf26ff4edb3de2cf4cac15..a8b5e4e92382a185410b421a8f2abb5eb013f294 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPanePurgPin.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPanePurgPin.test.ts
@@ -30,60 +30,70 @@ describe('TabPanePurgPin Test', () => {
     let querySysPurgeableTab = sqlit.querySysPurgeableTab;
     querySysPurgeableTab.mockResolvedValue([
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 21223420,
+            avgSizes: "34.310MB",
             type: "allocator_host",
-            maxSize: 25165822,
+            maxSize: 3634425822,
             maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            minSize: 7645824,
+            minSizes: "98.80MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 62177543,
+            avgSizes: "87.00MB",
             type: "11allocator_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            maxSize: 34322561,
+            maxSizes: "24.36MB",
+            minSize: 6652824,
+            minSizes: "432.00MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 43221110,
+            avgSizes: "323.00MB",
             type: "alloca11tor_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            maxSize: 75400211,
+            maxSizes: "44.00MB",
+            minSize: 41300064,
+            minSizes: "32.00MB",
         },
     ]);
     let data =  [{
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 2318995,
+            avgSizes: "541.00MB",
             type: "allocator_host",
-            maxSize: 25165822,
+            maxSize: 4565822,
             maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            minSize: 76533,
+            minSizes: "55.00MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 234190,
+            avgSizes: "321.08MB",
             type: "11allocator_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            maxSize: 9781100,
+            maxSizes: "6.00MB",
+            minSize: 12146,
+            minSizes: "4.75MB",
         }]
     tabPanePurgPin.init = jest.fn(() => true);
     tabPanePurgPin.data = {
         anomalyEnergy: [],
         clockMapData:{size: 0},
+        funAsync: [],
+        funTids: [],
+        gpu: {gl: false, gpuWindow: false, gpuTotal: false},
+        gpuMemoryAbilityData: [],
         cpuAbilityIds: [],
         cpuFreqFilterIds: [],
         cpuFreqLimitDatas: [],
         cpuStateFilterIds: [],
         cpus: [],
+        promiseList: [],
+        purgeablePinAbility: data,
+        purgeablePinSelection: [],
+        purgeablePinVM: data,
+        purgeableTotalAbility: [],
+        purgeableTotalSelection: [],
         diskAbilityIds: [],
         diskIOLatency: false,
         diskIOReadIds: [],
@@ -92,10 +102,6 @@ describe('TabPanePurgPin Test', () => {
         dmaAbilityData: [],
         dmaVmTrackerData: [],
         fsCount: 0,
-        funAsync: [],
-        funTids: [],
-        gpu: {gl: false, gpuWindow: false, gpuTotal: false},
-        gpuMemoryAbilityData: [],
         gpuMemoryTrackerData: [],
         hasFps: false,
         irqMapData:{size: 0},
@@ -103,7 +109,7 @@ describe('TabPanePurgPin Test', () => {
         jankFramesData: [],
         jsCpuProfilerData: [],
         jsMemory: [],
-        leftNs: 5050699973,
+        leftNs: 50699973,
         memoryAbilityIds: [],
         nativeMemory: [],
         nativeMemoryStatistic: [],
@@ -116,15 +122,9 @@ describe('TabPanePurgPin Test', () => {
         powerEnergy: [],
         processIds: [],
         processTrackIds: [],
-        promiseList: [],
-        purgeablePinAbility: data,
-        purgeablePinSelection: [],
-        purgeablePinVM: data,
-        purgeableTotalAbility: [],
-        purgeableTotalSelection: [],
         purgeableTotalVM: [],
-        recordStartNs: 333185936669149,
-        rightNs: 20081096280,
+        recordStartNs: 3654444469149,
+        rightNs: 246888888566280,
         sdkCounterIds: [],
         sdkSliceIds: [],
         smapsType: [],
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.test.ts
index 8dcf812c53c114b94b87511b21ce525f6d3820a8..11c0d96c64774f0f146e1932c9e635c152bf8eab 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.test.ts
@@ -12,21 +12,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
+  return {
+    snapshotDataSource: () => {},
+    removeAttribute: () => {},
+  };
+});
 // @ts-ignore
 import { TabPanePurgPinComparisonAbility } from '../../../../../../dist/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.js';
 import '../../../../../../dist/trace/component/trace/sheet/ability/TabPanePurgPinComparisonAbility.js';
-
 const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
   return {};
 });
-jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
-  return {
-    snapshotDataSource: () => {},
-    removeAttribute: () => {},
-  };
-});
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 // @ts-ignore
 window.ResizeObserver =
@@ -42,16 +41,16 @@ describe('TabPanePurgPinComparisonAbility Test', () => {
   let querySysPurgeableSelectionTab = sqlite.querySysPurgeableSelectionTab;
   querySysPurgeableSelectionTab.mockResolvedValue([
     {
-      value: 25165824,
-      name: '24.00MB',
+      value: 24265824,
+      name: '353.00MB',
     },
     {
-      value: 25165824,
-      name: '24.00MB',
+      value: 21456824,
+      name: '3.00MB',
     },
     {
-      value: 25165824,
-      name: '24.00MB',
+      value: 2321134,
+      name: '354.00MB',
     },
   ]);
   let data = [
@@ -71,7 +70,7 @@ describe('TabPanePurgPinComparisonAbility Test', () => {
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 212387543,
       type: 'ability',
       value: 0,
     },
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinSelection.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinSelection.test.ts
index ea9bb62d8a24a057458ff49d8c9ac0ae9401e84f..7dda282ce4f1d692dbf1438169e1a84c37e205c9 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinSelection.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPanePurgPinSelection.test.ts
@@ -62,12 +62,17 @@ describe('TabPanePurgPin Test', () => {
     ]);
     tabPanePurgPinSelection.data = {
         anomalyEnergy: [],
-        clockMapData:{size: 0},
+        clockMapData:{size: 120},
         cpuAbilityIds: [],
         cpuFreqFilterIds: [],
         cpuFreqLimitDatas: [],
         cpuStateFilterIds: [],
         cpus: [],
+        gpu: {gl: false, gpuWindow: false, gpuTotal: false},
+        gpuMemoryAbilityData: [],
+        gpuMemoryTrackerData: [],
+        hasFps: false,
+        irqMapData:{size: 965},
         diskAbilityIds: [],
         diskIOLatency: false,
         diskIOReadIds: [],
@@ -75,19 +80,14 @@ describe('TabPanePurgPin Test', () => {
         diskIOipids: [],
         dmaAbilityData: [],
         dmaVmTrackerData: [],
-        fsCount: 0,
+        fsCount: 410,
         funAsync: [],
         funTids: [],
-        gpu: {gl: false, gpuWindow: false, gpuTotal: false},
-        gpuMemoryAbilityData: [],
-        gpuMemoryTrackerData: [],
-        hasFps: false,
-        irqMapData:{size: 0},
         isCurrentPane: false,
         jankFramesData: [],
         jsCpuProfilerData: [],
         jsMemory: [],
-        leftNs: 5050699973,
+        leftNs: 2199973,
         memoryAbilityIds: [],
         nativeMemory: [],
         nativeMemoryStatistic: [],
@@ -98,23 +98,23 @@ describe('TabPanePurgPin Test', () => {
         perfSampleIds: [],
         perfThread: [],
         powerEnergy: [],
-        processIds: [],
-        processTrackIds: [],
-        promiseList: [],
-        purgeablePinAbility: [],
-        purgeablePinSelection: [],
         purgeablePinVM: [],
         purgeableTotalAbility: [],
         purgeableTotalSelection: [],
         purgeableTotalVM: [],
-        recordStartNs: 333185936669149,
-        rightNs: 20081096280,
+        recordStartNs: 3546410021149,
+        rightNs: 2698537796280,
         sdkCounterIds: [],
         sdkSliceIds: [],
         smapsType: [],
         startup: false,
         staticInit: false,
         statisticsSelectData: undefined,
+        processIds: [],
+        processTrackIds: [],
+        promiseList: [],
+        purgeablePinAbility: [],
+        purgeablePinSelection: [],
     };
 
     it('tabPanePurgPinSelectionTest01', function () {
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotal.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotal.test.ts
index da43a50d6e29b93abce86e40920825e63cf63d35..4e80ccb89638e948fd5061a9a0cd10db5b68449f 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotal.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotal.test.ts
@@ -30,89 +30,89 @@ describe('TabPanePurgTotal Test', () => {
     let querySysPurgeableTab = sqlit.querySysPurgeableTab;
     querySysPurgeableTab.mockResolvedValue([
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 21025824,
+            avgSizes: "321.00MB",
             type: "allocator_host",
-            maxSize: 25165822,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            maxSize: 9165822,
+            maxSizes: "233.00MB",
+            minSize: 35145824,
+            minSizes: "12.00MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 32133321,
+            avgSizes: "320.00MB",
             type: "11allocator_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            maxSize: 23265824,
+            maxSizes: "4.00MB",
+            minSize: 32365824,
+            minSizes: "321.00MB",
         },
         {
-            avgSize: 25165824,
-            avgSizes: "24.00MB",
+            avgSize: 98525824,
+            avgSizes: "3.00MB",
             type: "alloca11tor_host",
-            maxSize: 25165824,
-            maxSizes: "24.00MB",
-            minSize: 25165824,
-            minSizes: "24.00MB",
+            maxSize: 12155824,
+            maxSizes: "6.00MB",
+            minSize: 36545824,
+            minSizes: "66.00MB",
         },
     ]);
     tabPanePurgTotal.init = jest.fn(() => true);
     tabPanePurgTotal.data = {
         anomalyEnergy: [],
-        clockMapData:{size: 0},
+        clockMapData:{size: 321},
         cpuAbilityIds: [],
         cpuFreqFilterIds: [],
         cpuFreqLimitDatas: [],
-        cpuStateFilterIds: [],
-        cpus: [],
-        diskAbilityIds: [],
-        diskIOLatency: false,
         diskIOReadIds: [],
         diskIOWriteIds: [],
         diskIOipids: [],
         dmaAbilityData: [],
         dmaVmTrackerData: [],
-        fsCount: 0,
+        fsCount: 90,
         funAsync: [],
         funTids: [],
         gpu: {gl: false, gpuWindow: false, gpuTotal: false},
         gpuMemoryAbilityData: [],
         gpuMemoryTrackerData: [],
         hasFps: false,
-        irqMapData:{size: 0},
+        irqMapData:{size: 630},
         isCurrentPane: false,
         jankFramesData: [],
         jsCpuProfilerData: [],
         jsMemory: [],
-        leftNs: 5050699973,
+        leftNs: 12120099973,
         memoryAbilityIds: [],
         nativeMemory: [],
         nativeMemoryStatistic: [],
         networkAbilityIds: [],
         perfAll: false,
+        cpuStateFilterIds: [],
+        cpus: [],
+        diskAbilityIds: [],
+        diskIOLatency: false,
         perfCpus: [],
         perfProcess: [],
         perfSampleIds: [],
         perfThread: [],
-        powerEnergy: [],
-        processIds: [],
-        processTrackIds: [],
-        promiseList: [],
-        purgeablePinAbility: [],
-        purgeablePinSelection: [],
-        purgeablePinVM: [],
         purgeableTotalAbility: [],
         purgeableTotalSelection: [],
         purgeableTotalVM: [],
-        recordStartNs: 333185936669149,
-        rightNs: 20081096280,
+        recordStartNs: 396522210669149,
+        rightNs: 21021096280,
         sdkCounterIds: [],
         sdkSliceIds: [],
         smapsType: [],
         startup: false,
         staticInit: false,
         statisticsSelectData: undefined,
+        powerEnergy: [],
+        processIds: [],
+        processTrackIds: [],
+        promiseList: [],
+        purgeablePinAbility: [],
+        purgeablePinSelection: [],
+        purgeablePinVM: [],
     };
 
     it('TabPanePurgTotalTest01', function () {
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.test.ts
index cb43489eb9f50704927e133374d68974b347f13c..b1460997b642e99a997d49f7c0c5f914eb3165d3 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalComparisonAbility.test.ts
@@ -40,22 +40,22 @@ describe('TabPanePurgTotalComparisonAbility Test', () => {
   let querySysPurgeableSelectionTab = sqlite.querySysPurgeableSelectionTab;
   querySysPurgeableSelectionTab.mockResolvedValue([
     {
-      value: 25165824,
-      name: '24.00MB',
+      value: 47865824,
+      name: '22.00MB',
     },
     {
-      value: 25165824,
-      name: '24.00MB',
+      value: 345165824,
+      name: '21.00MB',
     },
     {
-      value: 25165824,
-      name: '24.00MB',
+      value: 23465824,
+      name: '786.00MB',
     },
   ]);
   let data = [
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 4546114061,
       type: 'ability',
       value: 0,
     },
@@ -63,13 +63,13 @@ describe('TabPanePurgTotalComparisonAbility Test', () => {
   let datalist = [
     {
       name: 'Snapshot2',
-      startNs: 9800526561,
+      startNs: 765526561,
       type: 'ability',
       value: 0,
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 476533061,
       type: 'ability',
       value: 0,
     },
diff --git a/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.test.ts b/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.test.ts
index e847d15427d45921e3b5f4b3e6baa8fd16eed2a4..1c95de00625e73ca52066e9eaa5c7fa8079a2c38 100644
--- a/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.test.ts
+++ b/ide/test/trace/component/trace/sheet/ability/TabPanePurgTotalSelection.test.ts
@@ -33,34 +33,41 @@ describe('TabPanePurgTotalSelection Test', () => {
     let querySysPurgeableSelectionTab = sqlit.querySysPurgeableSelectionTab;
     querySysPurgeableSelectionTab.mockResolvedValue([
         {
-            value: 25165824,
-            name: "24.00MB",
+            value: 9854,
+            name: "96.00MB",
         },
         {
-            value: 25165824,
-            name: "24.00MB",
+            value: 4789,
+            name: "52.00MB",
         },
         {
-            value: 25165824,
-            name: "24.00MB",
+            value: 4345621,
+            name: "34.47MB",
         },
     ]);
     let queryProcessPurgeableSelectionTab = sqlit.queryProcessPurgeableSelectionTab;
     queryProcessPurgeableSelectionTab.mockResolvedValue([
         {
-            value: 25165824,
-            name: "24.00MB",
+            value: 15445,
+            name: "9.00MB",
         },
         {
-            value: 25165824,
-            name: "24.00MB",
+            value: 524,
+            name: "89.00MB",
         },
         {
-            value: 25165824,
-            name: "24.00MB",
+            value: 5598,
+            name: "67.00MB",
         },
     ]);
     tabPanePurgTotalSelection.data = {
+        processTrackIds: [],
+        promiseList: [],
+        purgeablePinAbility: [],
+        purgeablePinSelection: [],
+        purgeablePinVM: [],
+        purgeableTotalAbility: [],
+        purgeableTotalSelection: [],
         anomalyEnergy: [],
         clockMapData:{size: 0},
         cpuAbilityIds: [],
@@ -70,51 +77,44 @@ describe('TabPanePurgTotalSelection Test', () => {
         cpus: [],
         diskAbilityIds: [],
         diskIOLatency: false,
-        diskIOReadIds: [],
-        diskIOWriteIds: [],
-        diskIOipids: [],
-        dmaAbilityData: [],
-        dmaVmTrackerData: [],
-        fsCount: 0,
         funAsync: [],
         funTids: [],
         gpu: {gl: false, gpuWindow: false, gpuTotal: false},
         gpuMemoryAbilityData: [],
         gpuMemoryTrackerData: [],
         hasFps: false,
+        diskIOReadIds: [],
+        diskIOWriteIds: [],
+        diskIOipids: [],
+        dmaAbilityData: [],
+        dmaVmTrackerData: [],
+        fsCount: 0,
         irqMapData:{size: 0},
         isCurrentPane: false,
         jankFramesData: [],
         jsCpuProfilerData: [],
         jsMemory: [],
-        leftNs: 5050699973,
+        leftNs: 120699973,
         memoryAbilityIds: [],
         nativeMemory: [],
         nativeMemoryStatistic: [],
         networkAbilityIds: [],
         perfAll: false,
-        perfCpus: [],
-        perfProcess: [],
-        perfSampleIds: [],
         perfThread: [],
         powerEnergy: [],
         processIds: [],
-        processTrackIds: [],
-        promiseList: [],
-        purgeablePinAbility: [],
-        purgeablePinSelection: [],
-        purgeablePinVM: [],
-        purgeableTotalAbility: [],
-        purgeableTotalSelection: [],
         purgeableTotalVM: [],
-        recordStartNs: 333185936669149,
-        rightNs: 20081096280,
+        recordStartNs: 3392146669149,
+        rightNs: 958742096280,
         sdkCounterIds: [],
         sdkSliceIds: [],
         smapsType: [],
         startup: false,
         staticInit: false,
         statisticsSelectData: undefined,
+        perfCpus: [],
+        perfProcess: [],
+        perfSampleIds: [],
     };
 
     it('TabPanePurgTotalSelectionTest01', function () {
diff --git a/ide/test/trace/component/trace/sheet/ark-ts/TabPaneComparison.test.ts b/ide/test/trace/component/trace/sheet/ark-ts/TabPaneComparison.test.ts
index fe8c5f329e29a75b5c60cece9bca50296ef94684..89d0590c40d27e6628e6f67f3aa90d86c50b889a 100644
--- a/ide/test/trace/component/trace/sheet/ark-ts/TabPaneComparison.test.ts
+++ b/ide/test/trace/component/trace/sheet/ark-ts/TabPaneComparison.test.ts
@@ -63,193 +63,193 @@ describe('TabPaneComparison Test', () => {
 
     let childenData = [
         {
-            addedCount: 6491111,
-            addedIndx: [319, 326],
-            addedSize: 38936,
-            childCount: 1296,
+            addedCount: 6061,
+            addedIndx: [319, 16],
+            addedSize: 2036,
+            childCount: 1326,
             children: [],
             classChildren: [],
-            deletedIdx: [325, 338],
-            deltaCount: 0,
+            deletedIdx: [11, 338],
+            deltaCount: 2,
             deltaSize: -16,
             distance: -1,
-            edgeCount: 0,
-            edgeName: 'edgeName',
-            fileId: 0,
+            edgeCount: 11,
+            edgeName: '12',
+            fileId: 10,
             hasNext: true,
-            id: -1,
-            index: 0,
+            id: 124,
+            index: 45,
             isAdd: false,
-            isHover: false,
+            isHover: true,
             isSelected: false,
             nextId: [],
-            nodeName: 'nodeName',
-            objectName: 'objectName',
-            removedCount: 648,
-            removedSize: 38952,
-            retainedSize: -1,
+            nodeName: 'InternalAccessor',
+            objectName: 'InternalAccessor@123',
+            removedCount: 612,
+            removedSize: 3632,
+            retainedSize: 154,
             retains: [],
-            shallowSize: -1,
+            shallowSize: 632,
             showBox: false,
-            showCut: false,
+            showCut: true,
             status: true,
             targetFileId: 1,
-            traceNodeId: -1,
-            type: 4,
+            traceNodeId: 32,
+            type: 43,
         },
         {
-            addedCount: 649,
-            addedIndx: [319, 326],
-            addedSize: 38936,
-            childCount: 1296,
+            addedCount: 659,
+            addedIndx: [5, 3256],
+            addedSize: 1356,
+            childCount: 396,
             children: [],
             classChildren: [],
-            deletedIdx: [325, 338],
-            deltaCount: 0,
+            deletedIdx: [11, 308],
+            deltaCount: 88,
             deltaSize: -16,
-            distance: -1,
-            edgeCount: 0,
-            edgeName: '',
+            distance: 56,
+            edgeCount: 80,
+            edgeName: 'a',
             fileId: 1,
             hasNext: true,
-            id: -1,
-            index: 0,
+            id: 12,
+            index: 310,
             isAdd: false,
             isHover: false,
             isSelected: false,
-            nextId: [],
-            nodeName: 'nodeName',
-            objectName: 'objectName',
-            removedCount: 648,
-            removedSize: 38952,
-            retainedSize: -1,
+            nextId: [1],
+            nodeName: 'JSNativePointer',
+            objectName: 'JSNativePointerX56',
+            removedCount: 6118,
+            removedSize: 3832,
+            retainedSize: 59,
             retains: [],
-            shallowSize: -1,
-            showBox: false,
+            shallowSize: 121,
+            showBox: true,
             showCut: false,
             status: true,
             targetFileId: 1,
-            traceNodeId: -1,
-            type: 4,
+            traceNodeId: 87,
+            type: 74,
         },
     ];
     let ddd = [
         {
-            addedCount: 6482222,
-            addedIndx: [319, 326],
-            addedSize: 38936,
-            childCount: 1296,
+            addedCount: 6432,
+            addedIndx: [19, 16],
+            addedSize: 316,
+            childCount: 1196,
             children: [],
             classChildren: [],
-            deletedIdx: [325, 338],
+            deletedIdx: [1, 318],
             deltaCount: 0,
             deltaSize: -16,
-            distance: -1,
-            edgeCount: 0,
-            edgeName: 'edgeName',
+            distance: 43,
+            edgeCount: 30,
+            edgeName: 'Accessor12',
             fileId: 0,
             hasNext: true,
-            id: -1,
-            index: 0,
+            id: 103,
+            index: 130,
             isAdd: false,
             isHover: false,
             isSelected: false,
             nextId: [],
-            nodeName: 'nodeName',
-            objectName: 'objectName',
-            removedCount: 648,
-            removedSize: 38952,
-            retainedSize: -1,
+            nodeName: 'AccessorData',
+            objectName: 'AccessorDataX32',
+            removedCount: 6328,
+            removedSize: 33252,
+            retainedSize: 21,
             retains: [],
-            shallowSize: -1,
+            shallowSize: 23,
             showBox: false,
             showCut: false,
             status: true,
-            targetFileId: 1,
-            traceNodeId: -1,
-            type: 4,
+            targetFileId: 231,
+            traceNodeId: 3,
+            type: 234,
             isString: jest.fn(() => true),
         },
         {
-            addedCount: 6483333,
-            addedIndx: [319, 326],
-            addedSize: 38936,
-            childCount: 1296,
+            addedCount: 6563,
+            addedIndx: [14, 306],
+            addedSize: 336,
+            childCount: 136,
             children: [],
             classChildren: [],
-            deletedIdx: [325, 338],
+            deletedIdx: [23, 18],
             deltaCount: 0,
             deltaSize: -16,
             distance: -1,
-            edgeCount: 0,
-            edgeName: '',
-            fileId: 1,
+            edgeCount: 31,
+            edgeName: 'GlobalObject56',
+            fileId: 41,
             hasNext: true,
-            id: -1,
-            index: 0,
+            id: 54,
+            index: 40,
             isAdd: false,
             isHover: false,
             isSelected: false,
             nextId: [],
-            nodeName: 'nodeName',
-            objectName: 'objectName',
+            nodeName: 'GlobalObject',
+            objectName: 'GlobalObjectX21',
             removedCount: 648,
-            removedSize: 38952,
-            retainedSize: -1,
+            removedSize: 32,
+            retainedSize: 8,
             retains: [],
             shallowSize: -1,
             showBox: false,
-            showCut: false,
+            showCut: true,
             status: true,
-            targetFileId: 1,
-            traceNodeId: -1,
-            type: 4,
+            targetFileId: 31,
+            traceNodeId: 45,
+            type: 424,
             isString: jest.fn(() => true),
         },
         {
-            addedCount: 6485555,
-            addedIndx: [319, 326],
-            addedSize: 38936,
-            childCount: 1296,
+            addedCount: 5,
+            addedIndx: [67, 326],
+            addedSize: 316,
+            childCount: 66,
             children: [],
             classChildren: [],
-            deletedIdx: [325, 338],
+            deletedIdx: [325, 91],
             deltaCount: 0,
             deltaSize: -16,
-            distance: -1,
+            distance: 33,
             edgeCount: 0,
-            edgeName: '',
-            fileId: 2,
+            edgeName: 'ProtoChangeDetails',
+            fileId: 34,
             hasNext: true,
             id: -1,
-            index: 0,
+            index: 20,
             isAdd: false,
             isHover: false,
             isSelected: false,
             nextId: [],
-            nodeName: 'nodeName',
-            objectName: 'objectName',
+            nodeName: 'ProtoChangeDetails',
+            objectName: 'ProtoChangeDetailsX12',
             removedCount: 648,
-            removedSize: 38952,
-            retainedSize: -1,
+            removedSize: 312,
+            retainedSize: 34,
             retains: [],
-            shallowSize: -1,
+            shallowSize: 56,
             showBox: false,
             showCut: false,
             status: true,
-            targetFileId: 1,
-            traceNodeId: -1,
-            type: 2,
+            targetFileId: 61,
+            traceNodeId: 651,
+            type: 40,
             isString: jest.fn(() => true),
         },
     ];
     let rowObjectData = {
-        top: 0,
+        top: 2,
         height: 0,
-        rowIndex: 0,
+        rowIndex: 2,
         data: {
             status: true,
-            targetFileId: 12,
+            targetFileId: 121,
             children: childenData,
             getChildren: () => {},
         },
@@ -333,14 +333,14 @@ describe('TabPaneComparison Test', () => {
                 children: childenData,
             },
             {
-                shallowSize: 1,
+                shallowSize: 4,
                 retainedSize: 1,
-                shallowPercent: 1,
+                shallowPercent: 4,
                 retainedPercent: 1,
                 distance: 100000000,
-                nodeName: 'nodeName',
-                objectName: 'objectName',
-                edgeName: 'edgeName',
+                nodeName: 'TSObjectType',
+                objectName: 'TSObjectTypeX23',
+                edgeName: 'TSObjectType',
                 children: childenData,
             },
         ];
@@ -377,20 +377,4 @@ describe('TabPaneComparison Test', () => {
         tabPaneComparisons.retainerTableEl!.dispatchEvent(iconClick);
         expect(tabPaneComparisons.retainsData).not.toBe([]);
     });
-
-    it('TabPaneComparisonTest03', () => {
-        let tabPaneComparison = new TabPaneComparison();
-        let data = [
-            {
-                end_time: 5373364415,
-                file_name: 'Snapshot1',
-                frame: { height: 40, width: 24, x: 272, y: 0 },
-                id: 1,
-                pid: 4243,
-                start_time: 4937360912,
-                textMetricsWidth: 60.697265625,
-            },
-        ];
-        expect(tabPaneComparison.initSelect(0, data)).toBeUndefined();
-    });
 });
diff --git a/ide/test/trace/component/trace/sheet/ark-ts/TabPaneSummary.test.ts b/ide/test/trace/component/trace/sheet/ark-ts/TabPaneSummary.test.ts
index 479d00bbc07e074adc13558db2f54b590433fb77..a51223f585909a9f63723a7af9dce7bbfe9a4566 100644
--- a/ide/test/trace/component/trace/sheet/ark-ts/TabPaneSummary.test.ts
+++ b/ide/test/trace/component/trace/sheet/ark-ts/TabPaneSummary.test.ts
@@ -58,74 +58,74 @@ describe('TabPaneSummary Test', () => {
         });
         let childenData = [
             {
-                addedCount: 649,
-                addedIndx: [319, 326],
-                addedSize: 38936,
+                addedCount: 49,
+                addedIndx: [33, 3],
+                addedSize: 336,
                 childCount: 1296,
                 children: [],
                 classChildren: [],
                 deletedIdx: [325, 338],
                 deltaCount: 0,
-                deltaSize: -16,
-                distance: -1,
+                deltaSize: 12,
+                distance: 61,
                 edgeCount: 0,
-                edgeName: 'edgeName',
+                edgeName: 'TSFunctionType',
                 fileId: 0,
                 hasNext: true,
-                id: -1,
-                index: 0,
+                id: 44,
+                index: 30,
                 isAdd: false,
                 isHover: false,
                 isSelected: false,
                 nextId: [],
-                nodeName: 'nodeName',
-                objectName: 'objectName',
-                removedCount: 648,
-                removedSize: 38952,
+                nodeName: 'TSFunctionType',
+                objectName: 'TSFunctionTypeX98',
+                removedCount: 38,
+                removedSize: 3332,
                 retainedSize: -1,
                 retains: [],
-                shallowSize: -1,
+                shallowSize: 414,
                 showBox: false,
                 showCut: false,
                 status: true,
                 targetFileId: 1,
-                traceNodeId: -1,
-                type: 4,
+                traceNodeId: 34,
+                type: 314,
             },
             {
                 addedCount: 649,
-                addedIndx: [319, 326],
-                addedSize: 38936,
-                childCount: 1296,
+                addedIndx: [219, 7],
+                addedSize: 78,
+                childCount: 46,
                 children: [],
                 classChildren: [],
-                deletedIdx: [325, 338],
+                deletedIdx: [6, 787],
                 deltaCount: 0,
-                deltaSize: -16,
+                deltaSize: 87,
                 distance: -1,
-                edgeCount: 0,
-                edgeName: '',
-                fileId: 1,
+                edgeCount: 77,
+                edgeName: 'CompletionRecord',
+                fileId: 23,
                 hasNext: true,
-                id: -1,
-                index: 0,
+                id: 4,
+                index: 70,
                 isAdd: false,
                 isHover: false,
                 isSelected: false,
                 nextId: [],
-                nodeName: 'nodeName',
-                objectName: 'objectName',
+                nodeName: 'CompletionRecord',
+                objectName: 'CompletionRecordX22',
                 removedCount: 648,
-                removedSize: 38952,
+                removedSize: 72,
                 retainedSize: -1,
                 retains: [],
-                shallowSize: -1,
+                shallowSize: 77,
                 showBox: false,
                 showCut: false,
                 status: true,
-                targetFileId: 1,
-                traceNodeId: -1,
-                type: 4,
+                targetFileId:771,
+                traceNodeId: 87,
+                type: 994,
             },
         ];
         let retainsData = [
@@ -135,9 +135,9 @@ describe('TabPaneSummary Test', () => {
                 shallowPercent: 10,
                 retainedPercent: 10,
                 distance: 1000000001,
-                nodeName: 'nodeName',
-                objectName: 'objectName',
-                edgeName: 'edgeName',
+                nodeName: '(system)',
+                objectName: '(system)X23',
+                edgeName: '(system)',
                 children: childenData,
             },
             {
@@ -146,26 +146,26 @@ describe('TabPaneSummary Test', () => {
                 shallowPercent: 1,
                 retainedPercent: 1,
                 distance: 100000000,
-                nodeName: 'nodeName',
-                objectName: 'objectName',
-                edgeName: 'edgeName',
+                nodeName: 'HiddenClass',
+                objectName: 'HiddenClassX34',
+                edgeName: 'HiddenClass',
                 children: childenData,
             },
         ];
         let ddd = [
             {
-                addedCount: 648,
-                addedIndx: [319, 326],
-                addedSize: 38936,
+                addedCount: 6128,
+                addedIndx: [119, 326],
+                addedSize: 652,
                 childCount: 1296,
                 children: [],
                 classChildren: [],
-                deletedIdx: [325, 338],
+                deletedIdx: [225, 338],
                 deltaCount: 0,
                 deltaSize: -16,
                 distance: -1,
                 edgeCount: 0,
-                edgeName: 'edgeName',
+                edgeName: 'JSOBJECT(Ctor=12',
                 fileId: 0,
                 hasNext: true,
                 id: -1,
@@ -174,8 +174,8 @@ describe('TabPaneSummary Test', () => {
                 isHover: false,
                 isSelected: false,
                 nextId: [],
-                nodeName: 'nodeName',
-                objectName: 'objectName',
+                nodeName: 'JSOBJECT(Ctor=',
+                objectName: 'JSOBJECT(Ctor= X34',
                 removedCount: 648,
                 removedSize: 38952,
                 retainedSize: -1,
@@ -184,78 +184,78 @@ describe('TabPaneSummary Test', () => {
                 showBox: false,
                 showCut: false,
                 status: true,
-                targetFileId: 1,
+                targetFileId: 21,
                 traceNodeId: -1,
-                type: 4,
+                type: 224,
             },
             {
                 addedCount: 648,
-                addedIndx: [319, 326],
-                addedSize: 38936,
-                childCount: 1296,
+                addedIndx: [319, 23],
+                addedSize: 37,
+                childCount: 122,
                 children: [],
                 classChildren: [],
-                deletedIdx: [325, 338],
-                deltaCount: 0,
-                deltaSize: -16,
-                distance: -1,
+                deletedIdx: [35, 328],
+                deltaCount: 70,
+                deltaSize: 36,
+                distance: 9,
                 edgeCount: 0,
-                edgeName: '',
+                edgeName: 'Proxy',
                 fileId: 1,
                 hasNext: true,
                 id: -1,
-                index: 0,
+                index: 990,
                 isAdd: false,
                 isHover: false,
                 isSelected: false,
                 nextId: [],
-                nodeName: 'nodeName',
-                objectName: 'objectName',
+                nodeName: 'Proxy',
+                objectName: 'ProxyX21',
                 removedCount: 648,
-                removedSize: 38952,
+                removedSize: 382,
                 retainedSize: -1,
                 retains: [],
-                shallowSize: -1,
+                shallowSize: 981,
                 showBox: false,
                 showCut: false,
                 status: true,
-                targetFileId: 1,
-                traceNodeId: -1,
-                type: 4,
+                targetFileId: 81,
+                traceNodeId: 121,
+                type: 34,
             },
             {
-                addedCount: 648,
-                addedIndx: [319, 326],
-                addedSize: 38936,
-                childCount: 1296,
+                addedCount: 61,
+                addedIndx: [31, 31],
+                addedSize: 86,
+                childCount: 1686,
                 children: [],
                 classChildren: [],
-                deletedIdx: [325, 338],
+                deletedIdx: [123, 108],
                 deltaCount: 0,
-                deltaSize: -16,
-                distance: -1,
+                deltaSize: 996,
+                distance: 91,
                 edgeCount: 0,
-                edgeName: '',
+                edgeName: 'InternalAccessort44',
                 fileId: 2,
                 hasNext: true,
                 id: -1,
-                index: 0,
+                index: 90,
                 isAdd: false,
                 isHover: false,
                 isSelected: false,
                 nextId: [],
-                nodeName: 'nodeName',
-                objectName: 'objectName',
+                nodeName: 'InternalAccessor',
+                objectName: 'InternalAccessorX32',
                 removedCount: 648,
-                removedSize: 38952,
-                retainedSize: -1,
+                removedSize: 31199,
+                retainedSize: 98,
                 retains: [],
-                shallowSize: -1,
+                shallowSize: 91,
                 showBox: false,
                 showCut: false,
                 status: true,
-                targetFileId: 1,
-                traceNodeId: -1,
+                targetFileId: 81,
+                traceNodeId: 1,
                 type: 2,
             },
         ];
@@ -281,22 +281,22 @@ describe('TabPaneSummary Test', () => {
         HeapDataInterface.getInstance().getAllocationStackData = jest.fn(() => {
             return [
                 {
-                    id: 0,
-                    index: 0,
+                    id: 10,
+                    index: 20,
                     name: '',
                     scriptName: '',
-                    scriptId: 0,
-                    line: 0,
-                    column: 0,
+                    scriptId: 50,
+                    line: 30,
+                    column: 670,
                 },
                 {
-                    id: 0,
-                    index: 0,
+                    id: 60,
+                    index: 50,
                     name: '',
                     scriptName: 'string',
-                    scriptId: 0,
-                    line: 0,
-                    column: 0,
+                    scriptId: 40,
+                    line: 980,
+                    column: 90,
                 },
             ];
         });
@@ -310,12 +310,12 @@ describe('TabPaneSummary Test', () => {
             return [];
         });
         let rowObjectData = {
-            top: 0,
+            top: 1,
             height: 0,
-            rowIndex: 0,
+            rowIndex: 1,
             data: {
                 status: true,
-                targetFileId: 12,
+                targetFileId: 123,
                 children: childenData,
                 getChildren: () => {},
             },
@@ -338,6 +338,13 @@ describe('TabPaneSummary Test', () => {
             },
             composed: true,
         });
+        let iconkeyUpClick = new CustomEvent('keyup', <CustomEventInit>{
+            detail: {
+                key: 'addedCount',
+                sort: 1,
+            },
+            composed: true,
+        });
         iconClick.detail.data.isString = jest.fn(() => true);
         tabPaneSummary.tblSummary.dispatchEvent(iconRowClick);
         tabPaneSummary.tblSummary.dispatchEvent(iconClick);
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPaneBoxChild.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneBoxChild.test.ts
index 8a4f4f4c1e700390c05b02408ff056749f3ea366..f26e761e09923a8dd30d441518f0083c51f58f5f 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneBoxChild.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneBoxChild.test.ts
@@ -65,42 +65,4 @@ describe('TabPaneBoxChild Test', () => {
       })
     ).toBeUndefined();
   });
-
-  it('TabPaneCounterTest03', function () {
-    expect(tabPaneBoxChild.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .box-child-label{
-          text-align: end;
-          width: 100%;
-          height: 20px;
-        }
-        :host{
-            padding: 10px 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        </style>
-        <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 title="StartTime(Relative)" width="15%" data-index="startTime" key="startTime" align="flex-start" order >
-            </lit-table-column>
-            <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%" data-index="processName" key="processName" title="Process" align="flex-start" order >
-            </lit-table-column>
-            <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" data-index="state" key="state" align="flex-start" order title="State">
-            </lit-table-column>
-            <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" data-index="prior" title="Priority" key="prior" align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column order width="1fr" data-index="note" key="note" align="flex-start" title="Note">
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPaneCounterSample.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneCounterSample.test.ts
index 684abdd81cd872cfcb68069e46835126b70db551..608a9ccece91e95acf9978c3e3b4308538c8bb62 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneCounterSample.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneCounterSample.test.ts
@@ -18,7 +18,7 @@ import { TabPaneCounterSample } from '../../../../../../dist/trace/component/tra
 // @ts-ignore
 import { SpSystemTrace } from '../../../../../../dist/trace/component/SpSystemTrace.js';
 // @ts-ignore
-import {LitTable} from "../../../../../../dist/base-ui/table/lit-table.js";
+import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
@@ -41,27 +41,27 @@ describe('TabPaneCounterSample Test', () => {
   SpSystemTrace.SPT_DATA = [
     {
       process: '',
-      processId: 0,
+      processId: 1,
       thread: '',
-      threadId: 0,
+      threadId: 1,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
-      priority: '-',
-      note: '-',
+      dur: 12,
+      start_ts: 1,
+      end_ts: 5,
+      cpu: 1,
+      priority: '',
+      note: '',
     },
     {
       process: '',
-      processId: 1,
+      processId: 51,
       thread: '',
-      threadId: 1,
+      threadId: 6,
       state: '',
-      dur: 0,
+      dur: 56,
       start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
+      end_ts: 56,
+      cpu: 56,
       priority: '-',
       note: '-',
     },
@@ -71,31 +71,31 @@ describe('TabPaneCounterSample Test', () => {
       thread: '',
       threadId: 2,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
-      priority: '-',
+      dur: 52,
+      start_ts: 1,
+      end_ts: 53,
+      cpu: 2,
+      priority: '',
       note: '-',
     },
   ];
 
   let dataArray = {
-    id: '',
-    pid: '',
+    id: 0,
+    pid: 0,
     title: '',
     children: [],
     process: '',
-    processId: 0,
+    processId: 3,
     thread: '',
     threadId: 0,
-    state: '',
-    wallDuration: 0,
+    state: 'a',
+    wallDuration: 123222,
     avgDuration: '',
-    count: 0,
-    minDuration: 0,
-    maxDuration: 0,
-    stdDuration: '',
+    count: 10,
+    minDuration: 34445,
+    maxDuration: 56788,
+    stdDuration: 'std',
     cpuStateFilterIds: [1, 2, 3],
   };
 
@@ -121,47 +121,4 @@ describe('TabPaneCounterSample Test', () => {
   it('TabPaneCounterSampleTest02', function () {
     expect(tabPaneCounterSample.initElements()).toBeUndefined();
   });
-
-  it('TabPaneCounterSampleTest03', function () {
-    expect(tabPaneCounterSample.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .progressCounter{
-            height: 1px;
-            left: 0;
-            right: 0;
-            bottom: 5px;
-            position: absolute;
-        }
-        :host{
-            display: flex;
-            padding: 10px 10px;
-            flex-direction: column;
-        }
-        .loadingCounter{
-            left: 0;
-            right: 0;
-            width:100%;
-            bottom: 0;
-            position: absolute;
-            background:transparent;
-            z-index: 999999;
-        }
-        .counter-sample-table{
-            height: auto;
-        }
-        </style>
-        <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 class="counter-sample-column" width="1fr" order data-index="timeStr" key="timeStr" align="flex-start" title="Time(ms)" >
-            </lit-table-column>
-            <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="progressCounter"></lit-progress-bar>
-        <div class="loadingCounter"></div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.test.ts
index 14614c4c585a79bd9ed59fa7c79af6c601ca448c..8a7a1545f04723ca8c703c370f3069c1da238622 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByProcess.test.ts
@@ -52,37 +52,4 @@ describe('TabPaneCpuByProcess Test', () => {
       })
     ).toBeUndefined();
   });
-
-  it('TabPaneCpuByProcessTest04', function () {
-    expect(tabPaneCpuByProcess.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .cpu-process-label{
-            font-size: 10pt;
-            margin-bottom: 5px;
-            text-align: end;
-        }
-        :host{
-            border: 0;
-            padding: 10px 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        </style>
-        <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 class="cpu-process-column" order width="30%" title="Process" data-index="process" key="process" align="flex-start" order>
-            </lit-table-column>
-            <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 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 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 class="cpu-process-column" order width="1fr" title="Occurrences" data-index="occurrences" key="occurrences" align="flex-start" order>
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByThread.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByThread.test.ts
index 5609706c8443fe8ea2f5a919cdc0f479e0edfe15..2fa878bcf2a32a2d165059680a84bb3941c75209 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByThread.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuByThread.test.ts
@@ -63,27 +63,4 @@ describe('TabPaneCpuByThread Test', () => {
     let a = { rightNs: 1, cpus: [11, 12, 13] };
     expect((tabPaneCpuByThread.data = a)).toBeTruthy();
   });
-
-  it('TabPaneCpuByThreadTest05', function () {
-    expect(tabPaneCpuByThread.initHtml()).toMatchInlineSnapshot(`
-"
-        <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" 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>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuUsage.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuUsage.test.ts
index c3b6fbdadd16595a4621878ccb692cc53d681f01..fdd17e3fececed6a7dce5542881d721eb2414f50 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuUsage.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneCpuUsage.test.ts
@@ -36,21 +36,21 @@ describe('TabPaneCpuUsage Test', () => {
   mockGetTabCpuFreq.mockResolvedValue([]);
 
   let selectionData = {
-    cpus: [],
-    threadIds: [],
-    trackIds: [],
-    funTids: [],
-    heapIds: [],
+    cpus: [1, 0],
+    threadIds: [12, 3, 0],
+    trackIds: [3, 789, 89],
+    funTids: [5, 0],
+    heapIds: [0, 43],
     nativeMemory: [],
-    cpuAbilityIds: [],
+    cpuAbilityIds: [10, 45],
     memoryAbilityIds: [],
-    diskAbilityIds: [],
+    diskAbilityIds: [85],
     networkAbilityIds: [],
-    leftNs: 0,
-    rightNs: 0,
+    leftNs: 8540,
+    rightNs: 96440,
     hasFps: false,
     statisticsSelectData: undefined,
-    perfSampleIds: [],
+    perfSampleIds: [1, 4, 44],
     perfCpus: [],
     perfProcess: [],
     perfThread: [],
@@ -64,7 +64,7 @@ describe('TabPaneCpuUsage Test', () => {
           [1, 2, 3, 9, 6, 4],
           [5, 2, 1, 4, 9, 6],
         ],
-        0,
+        3,
         true
       )
     ).toBeUndefined();
@@ -77,7 +77,7 @@ describe('TabPaneCpuUsage Test', () => {
           [1, 2, 3, 9, 6, 4],
           [5, 2, 1, 4, 9, 6],
         ],
-        0,
+        4,
         false
       )
     ).toBeUndefined();
@@ -90,30 +90,17 @@ describe('TabPaneCpuUsage Test', () => {
           [1, 2, 3, 9, 6, 4],
           [5, 2, 1, 4, 9, 6],
         ],
-        2,
+        5,
         true
       )
     ).toBeUndefined();
   });
 
-  it('TabPaneCpuUsageTest10', function () {
-    expect(
-      tabPaneCpuUsage.sortTable(
-        [
-          [1, 2, 3, 9, 6, 4],
-          [5, 2, 1, 4, 9, 6],
-        ],
-        2,
-        false
-      )
-    ).toBeUndefined();
-  });
-
   it('TabPaneCpuUsageTest02', function () {
     expect(
       tabPaneCpuUsage.sortTable(
         [
-          [1, 2, 3, 9, 6, 4],
+          [1, 2, 1, 9, 6, 4],
           [5, 2, 1, 4, 9, 6],
         ],
         1,
@@ -126,10 +113,10 @@ describe('TabPaneCpuUsage Test', () => {
     expect(
       tabPaneCpuUsage.sortTable(
         [
-          [1, 2, 3, 9, 6, 4],
+          [1, 2, 2, 9, 6, 4],
           [5, 2, 1, 4, 9, 6],
         ],
-        1,
+        2,
         false
       )
     ).toBeUndefined();
@@ -138,18 +125,18 @@ describe('TabPaneCpuUsage Test', () => {
     let result = tabPaneCpuUsage.sortFreq([
       {
         cpu: 0,
-        value: 0,
-        startNs: 0,
-        dur: 0,
+        value: 30,
+        startNs: 342,
+        dur: 341,
       },
       {
         cpu: 1,
-        value: 2,
-        startNs: 2,
-        dur: 4,
+        value: 322,
+        startNs: 762,
+        dur: 984,
       },
     ]);
-    expect(result[0][0]).toBe(2);
+    expect(result[0][0]).toBe(322);
   });
   it('TabPaneCpuUsageTest05', function () {
     expect(
@@ -179,57 +166,20 @@ describe('TabPaneCpuUsage Test', () => {
     let result = tabPaneCpuUsage.groupByCpuToMap([
       {
         cpu: 0,
-        value: 0,
-        startNs: 0,
-        dur: 0,
+        value: 90,
+        startNs: 250,
+        dur: 560,
       },
       {
         cpu: 1,
-        value: 2,
-        startNs: 2,
+        value: 782,
+        startNs: 52,
         dur: 4,
       },
     ]);
     expect(result.get(0).length).toBe(1);
   });
 
-  it('TabPaneCurrentSelectionTest07', function () {
-    expect(tabPaneCpuUsage.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .cpu-usage-label{
-            width: 100%;
-            height: 20px;
-        }
-        :host{
-            padding: 10px 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        </style>
-        <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 class="cpu-usage-column" order width="1fr" title="CPU" data-index="cpu" key="cpu" align="flex-start">
-            </lit-table-column>
-            <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 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 class="cpu-usage-column" order width="1fr" title="Top1 percent(%)" data-index="top1PercentStr" key="top1PercentStr" align="flex-start" >
-            </lit-table-column>
-            <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 class="cpu-usage-column" order width="1fr" title="Top2 percent(%)" data-index="top2PercentStr" key="top2PercentStr" align="flex-start" >
-            </lit-table-column>
-            <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 class="cpu-usage-column" order width="1fr" title="Top3 percent(%)" data-index="top3PercentStr" key="top3PercentStr" align="flex-start" >
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
-
   it('TabPaneCpuUsageTest11', function () {
     document.body.innerHTML = `<div id="CpuUsage"></div>`;
     let tabPaneCpuUsage = document.querySelector('#CpuUsage') as TabPaneCpuUsage;
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPaneFrequencySample.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneFrequencySample.test.ts
index 7cac88c46dc715603b4a179acad180352e4f95d5..308d2067b7c4a115ec33838fc14324bd14817788 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneFrequencySample.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneFrequencySample.test.ts
@@ -18,7 +18,7 @@ import { TabPaneFrequencySample } from '../../../../../../dist/trace/component/t
 // @ts-ignore
 import { SpSystemTrace } from '../../../../../../dist/trace/component/SpSystemTrace.js';
 // @ts-ignore
-import {LitTable} from "../../../../../../dist/base-ui/table/lit-table.js";
+import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
@@ -41,62 +41,62 @@ describe('TabPaneFrequencySample Test', () => {
   SpSystemTrace.SPT_DATA = [
     {
       process: '',
-      processId: 0,
-      thread: '',
-      threadId: 0,
+      processId: 252,
+      thread: 'render_service',
+      threadId: 886,
       state: '',
-      dur: 0,
+      dur: 20,
       start_ts: 0,
-      end_ts: 0,
+      end_ts: 20,
       cpu: 0,
       priority: '-',
       note: '-',
     },
     {
       process: '',
-      processId: 1,
-      thread: '',
-      threadId: 1,
+      processId: 178,
+      thread: 'sugov',
+      threadId: 178,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
-      priority: '-',
-      note: '-',
+      dur: 88,
+      start_ts: 5,
+      end_ts: 93,
+      cpu: 1,
+      priority: 'priority',
+      note: 'note',
     },
     {
       process: '',
-      processId: 2,
-      thread: '',
-      threadId: 2,
+      processId: 372,
+      thread: 'download_server',
+      threadId: 696,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
+      dur: 256,
+      start_ts: 2,
+      end_ts: 258,
+      cpu: 20,
       priority: '-',
       note: '-',
     },
   ];
 
   let dataArray = {
-    id: '',
-    pid: '',
-    title: '',
+    id: 1,
+    pid: 1,
+    title: '1',
     children: [],
     process: '',
-    processId: 0,
-    thread: '',
-    threadId: 0,
+    processId: 2452,
+    thread: 'hiprofiler_cmd',
+    threadId: 2452,
     state: '',
-    wallDuration: 0,
+    wallDuration: 565552,
     avgDuration: '',
-    count: 0,
-    minDuration: 0,
-    maxDuration: 0,
+    count: 6,
+    minDuration: 888,
+    maxDuration: 63332,
     stdDuration: '',
-    cpuFreqFilterIds: [1, 2, 3],
+    cpuFreqFilterIds: [1, 2, 9, 3],
   };
 
   it('TabPaneCounterSampleTest01', function () {
@@ -120,44 +120,4 @@ describe('TabPaneFrequencySample Test', () => {
   it('TabPaneCounterSampleTest02', function () {
     expect(tabPaneFreSample.initElements()).toBeUndefined();
   });
-
-  it('TabPaneCounterSampleTest03', function () {
-    expect(tabPaneFreSample.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .progressFre{
-            bottom: 5px;
-            position: absolute;
-            height: 1px;
-            left: 0;
-            right: 0;
-        }
-        :host{
-            padding: 10px 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        .loadingFre{
-            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 class="freq-sample-column" width="20%" title="Cpu" data-index="counter" key="counter" align="flex-start" order>
-            </lit-table-column>
-            <lit-table-column class="freq-sample-column" width="1fr" title="Time(ms)" data-index="timeStr" key="timeStr" align="flex-start" order>
-            </lit-table-column>
-            <lit-table-column class="freq-sample-column" width="1fr" title="Value(kHz)" data-index="valueStr" key="valueStr" align="flex-start" order>
-            </lit-table-column>
-        </lit-table>
-        <lit-progress-bar class="progressFre"></lit-progress-bar>
-        <div class="loadingFre"></div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/cpu/TabPanePTS.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPanePTS.test.ts
index 5606acde5f9b963652eadb823dd72c7e050910a7..be5e953bde8db87311385fa534f360666f4c443c 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPanePTS.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPanePTS.test.ts
@@ -19,21 +19,21 @@ import { TabPanePTS } from '../../../../../../dist/trace/component/trace/sheet/c
 import { SpSystemTrace } from '../../../../../../dist/trace/component/SpSystemTrace.js';
 // @ts-ignore
 import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
-jest.mock('../../../../../../dist/base-ui/table/lit-table.js', ()=>{
+jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {
-    meauseAllRowHeight: ()=>{}
-  }
-})
-jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
+    meauseAllRowHeight: () => {},
+  };
+});
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
+    unobserve: jest.fn(),
     disconnect: jest.fn(),
     observe: jest.fn(),
-    unobserve: jest.fn(),
   }));
 describe('TabPanePTS Test', () => {
   document.body.innerHTML = `<lit-table id="tb-states"></lit-table>`;
@@ -47,62 +47,62 @@ describe('TabPanePTS Test', () => {
 
   SpSystemTrace.SPT_DATA = [
     {
-      process: '',
-      processId: 0,
-      thread: '',
-      threadId: 0,
+      process: 'hiperf 2471',
+      processId: 2471,
+      thread: 'hiperf',
+      threadId: 2471,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
+      dur: 98,
+      start_ts: 8,
+      end_ts: 90,
       cpu: 0,
       priority: '-',
-      note: '-',
+      note: 'note',
     },
     {
       process: '',
-      processId: 1,
-      thread: '',
-      threadId: 1,
+      processId: 372,
+      thread: 'download_server',
+      threadId: 708,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
-      priority: '-',
-      note: '-',
+      dur: 963,
+      start_ts: 6,
+      end_ts: 969,
+      cpu: 1,
+      priority: 'a',
+      note: 'a',
     },
     {
       process: '',
-      processId: 2,
-      thread: '',
-      threadId: 2,
+      processId: 487,
+      thread: 'CellularDataSer',
+      threadId: 1244,
       state: '',
-      dur: 0,
+      dur: 888,
       start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
-      priority: '-',
-      note: '-',
+      end_ts: 888,
+      cpu: 2,
+      priority: '120',
+      note: '2',
     },
   ];
 
   let dataArray = [
     {
-      id: '',
-      pid: '',
+      id: 4,
+      pid: 3,
       title: '',
       children: [],
       process: '',
-      processId: 0,
-      thread: '',
-      threadId: 0,
+      processId: 2452,
+      thread: 'hiprofiler_cmd 2452',
+      threadId: 2452,
       state: '',
-      wallDuration: 0,
+      wallDuration: 5655,
       avgDuration: '',
-      count: 0,
-      minDuration: 0,
-      maxDuration: 0,
+      count: 43,
+      minDuration: 12,
+      maxDuration: 6333,
       stdDuration: '',
     },
   ];
@@ -115,15 +115,15 @@ describe('TabPanePTS Test', () => {
     let source = [
       {
         process: '',
-        processId: 10,
-        thread: '',
-        threadId: 10,
-        state: '',
-        dur: 1000,
-        start_ts: 100_0000,
-        end_ts: 0,
-        cpu: 0,
-        priority: '-',
+        processId: 487,
+        thread: 'CellularDataSer',
+        threadId: 1244,
+        state: '0',
+        dur: 1100,
+        start_ts: 100_0000_0,
+        end_ts: 100_0000_1100,
+        cpu: 1,
+        priority: '118',
         note: '-',
       },
     ];
@@ -135,10 +135,10 @@ describe('TabPanePTS Test', () => {
     mockgetProcessThreadDataByRange.mockResolvedValue([
       {
         process: 'process',
-        processId: 1,
+        processId: 11,
         thread: 'thread',
         state: 'state',
-        threadId: 1,
+        threadId: 11,
         dur: 1000,
         end_ts: 2000,
         start_ts: 2000,
@@ -149,33 +149,4 @@ describe('TabPanePTS Test', () => {
     tabPanePTS.tbl.recycleDataSource = jest.fn(() => dataArray);
     expect((tabPanePTS.data = dataArray)).toBeTruthy();
   });
-
-  it('TabPanePTSTest04', function () {
-    expect(tabPanePTS.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <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 class="pts-column" title="Count" data-index="count" key="count" align="flex-start" width="1fr">
-            </lit-table-column>
-            <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 class="pts-column" title="Min Duration(ns)" data-index="minDuration" key="minDuration" align="flex-start" width="1fr">
-            </lit-table-column>
-            <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 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/test/trace/component/trace/sheet/cpu/TabPaneSPT.test.ts b/ide/test/trace/component/trace/sheet/cpu/TabPaneSPT.test.ts
index b0b88afb0ce37952d68bfd9d09c65dfa2a1ff350..3d7054032249a0d748bb7866dae37f2d6ee4ecfb 100644
--- a/ide/test/trace/component/trace/sheet/cpu/TabPaneSPT.test.ts
+++ b/ide/test/trace/component/trace/sheet/cpu/TabPaneSPT.test.ts
@@ -19,21 +19,21 @@ import { TabPaneSPT } from '../../../../../../dist/trace/component/trace/sheet/c
 import { SpSystemTrace } from '../../../../../../dist/trace/component/SpSystemTrace.js';
 // @ts-ignore
 import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
-jest.mock('../../../../../../dist/base-ui/table/lit-table.js', ()=>{
+jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {
-    meauseTreeRowElement: ()=>{}
-  }
-})
+    meauseTreeRowElement: () => {},
+  };
+});
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
-    observe: jest.fn(),
     unobserve: jest.fn(),
+    observe: jest.fn(),
   }));
 
 describe('TabPaneSPT Test', () => {
@@ -47,29 +47,29 @@ describe('TabPaneSPT Test', () => {
   SpSystemTrace.SPT_DATA = [
     {
       process: '',
-      processId: 0,
-      thread: '',
-      threadId: 0,
+      processId: 602,
+      thread: 'hdcd',
+      threadId: 739,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
+      dur: 233,
+      start_ts: 3,
+      end_ts: 236,
       cpu: 0,
-      priority: '-',
-      note: '-',
+      priority: '10',
+      note: '85',
     },
     {
       process: '',
-      processId: 1,
-      thread: '',
-      threadId: 1,
+      processId: 516,
+      thread: 'foundation',
+      threadId: 516,
       state: '',
-      dur: 0,
-      start_ts: 0,
-      end_ts: 0,
-      cpu: 0,
-      priority: '-',
-      note: '-',
+      dur: 122,
+      start_ts: 22,
+      end_ts: 100,
+      cpu: 1,
+      priority: '114',
+      note: '66',
     },
     {
       process: '',
@@ -88,40 +88,40 @@ describe('TabPaneSPT Test', () => {
 
   let dataList = [
     {
-      id: '',
-      pid: '',
+      id: 78,
+      pid: 55,
       title: '',
       children: [],
       process: '',
-      processId: 0,
-      thread: '',
-      threadId: 0,
+      processId: 1380,
+      thread: 'com.ohos.callui',
+      threadId: 1380,
       state: '',
-      wallDuration: 0,
+      wallDuration: 5220,
       avgDuration: '',
-      count: 0,
-      minDuration: 0,
-      maxDuration: 0,
+      count: 5,
+      minDuration: 440,
+      maxDuration: 36220,
       stdDuration: '',
     },
   ];
 
   let dataArray = [
     {
-      id: '',
-      pid: '',
+      id: 885,
+      pid: 12,
       title: '',
       children: [],
       process: '',
-      processId: 0,
-      thread: '',
-      threadId: 0,
+      processId: 1387,
+      thread: 'com.ohos.callui',
+      threadId: 1387,
       state: '',
-      wallDuration: 0,
+      wallDuration: 666240,
       avgDuration: '',
-      count: 0,
-      minDuration: 0,
-      maxDuration: 0,
+      count: 40,
+      minDuration: 2330,
+      maxDuration: 524660,
       stdDuration: '',
     },
   ];
@@ -133,16 +133,16 @@ describe('TabPaneSPT Test', () => {
   it('TabPaneSPTTest02', function () {
     let source = [
       {
-        process: '',
-        processId: 10,
-        thread: '',
-        threadId: 10,
+        process: 'com.ohos.callui 1387',
+        processId: 1387,
+        thread: 'com.ohos.callui',
+        threadId: 1387,
         state: '',
-        dur: 1000,
-        start_ts: 100_0000,
-        end_ts: 0,
+        dur: 66654,
+        start_ts: 4,
+        end_ts: 66650,
         cpu: 0,
-        priority: '-',
+        priority: '154',
         note: '-',
       },
     ];
@@ -154,10 +154,10 @@ describe('TabPaneSPT Test', () => {
     mockgetProcessThreadDataByRange.mockResolvedValue([
       {
         process: 'process',
-        processId: 1,
+        processId: 13,
         thread: 'thread',
         state: 'state',
-        threadId: 1,
+        threadId: 12,
         dur: 1000,
         end_ts: 2000,
         start_ts: 2000,
@@ -168,33 +168,4 @@ describe('TabPaneSPT Test', () => {
     tabPane.tbl.recycleDataSource = jest.fn(() => []);
     expect((tabPane.data = dataList)).toBeTruthy();
   });
-
-  it('TabPaneSPTTest04', function () {
-    expect(tabPaneSPT.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <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 class="spt-column" width="1fr" data-index="count" key="count" align="flex-start" title="Count">
-            </lit-table-column>
-            <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 class="spt-column" width="1fr" data-index="minDuration" key="minDuration" align="flex-start" title="Min Duration(ns)">
-            </lit-table-column>
-            <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 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/test/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.test.ts b/ide/test/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.test.ts
index 3d7cad42800c216f9bd420e05658dd7891134629..b0b562ffc06e898d44c8a707d174587e579d002c 100644
--- a/ide/test/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.test.ts
+++ b/ide/test/trace/component/trace/sheet/energy/TabPaneEnergyAnomaly.test.ts
@@ -24,12 +24,12 @@ window.ResizeObserver =
     observe: jest.fn(),
     unobserve: jest.fn(),
   }));
-const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
+const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 describe('TabPanePowerBattery Test', () => {
   it('TabPaneEnergyAnomalyTest01', function () {
@@ -84,81 +84,29 @@ describe('TabPanePowerBattery Test', () => {
     MockAnomalyDetailedData.mockResolvedValue(battery);
     let tabPaneAnomalyDetailedData = {
       cpus: [],
-      threadIds: [],
-      trackIds: [],
-      funTids: [],
-      heapIds: [],
+      threadIds: [85,6,9],
+      trackIds: [46,0],
+      funTids: [8,0,76],
+      heapIds: [67,89],
       nativeMemory: [],
-      cpuAbilityIds: [],
-      memoryAbilityIds: [],
-      diskAbilityIds: [],
-      networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 1000,
+      cpuAbilityIds: [21, 54],
+      memoryAbilityIds: [54 ,78],
+      diskAbilityIds: [5,0],
+      networkAbilityIds: [9],
+      leftNs: 3200,
+      rightNs: 425900,
       hasFps: false,
       statisticsSelectData: undefined,
-      perfSampleIds: [],
+      perfSampleIds: [45,85],
       perfCpus: [],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
-      systemEnergy: [0, 1, 2],
-      powerEnergy: [0, 1, 2],
-      anomalyEnergy: [0, 1, 2],
+      systemEnergy: [99,5],
+      powerEnergy: [0, 87, 65],
+      anomalyEnergy: [670, 18, 782],
     };
 
     tabPaneEnergyAnomaly.data = tabPaneAnomalyDetailedData;
   });
-
-  it('TabPaneEnergyAnomalyTest02', function () {
-    let tabPaneEnergyAnomaly = new TabPaneEnergyAnomaly();
-    expect(tabPaneEnergyAnomaly.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            .anomaly-title{
-                display: flex;
-                width: 95%;
-                background: var(--dark-background,#ffffff);
-                top: 0;
-                position: sticky;
-            }
-            .anomaly-title h2{
-                padding: 0 10px;
-                font-size: 16px;
-                font-weight: 400;
-                width: 50%;
-                visibility: visible;
-            }
-            .scroll-area{
-                overflow-y: auto;
-                height: auto;
-                display: flex;
-                
-            }
-            .left-table{
-                padding: 0 10px;
-                width: 50%;
-            }
-            .anomaly-table{
-                height: auto;
-            }
-        </style>
-        <div style="width: 100%;height: auto;position: relative">
-            <div id="anomaly-details" class="anomaly-title" style="margin-left: 12px;display: block">
-                <h2 id="leftTitle"></h2>
-            </div>
-            <div class="scroll-area">
-                <div class="left-table">
-                    <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 key="value" align="flex-start" title="value" data-index="value">
-                        </lit-table-column>
-                    </lit-table>
-                </div>
-            </div>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/energy/TabPanePowerBattery.test.ts b/ide/test/trace/component/trace/sheet/energy/TabPanePowerBattery.test.ts
index d601870c81b14d75315cfaecea1d602456104c54..6a401a65b57e4983f8af630298050a77476184d4 100644
--- a/ide/test/trace/component/trace/sheet/energy/TabPanePowerBattery.test.ts
+++ b/ide/test/trace/component/trace/sheet/energy/TabPanePowerBattery.test.ts
@@ -22,16 +22,15 @@ import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
     observe: jest.fn(),
+    disconnect: jest.fn(),
     unobserve: jest.fn(),
   }));
-const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
+const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 describe('TabPanePowerBattery Test', () => {
   it('TabPanePowerBatteryTest01', function () {
@@ -56,61 +55,30 @@ describe('TabPanePowerBattery Test', () => {
     ];
     MockPowerBatteryData.mockResolvedValue(battery);
     let tabPanePowerBatteryData = {
-      cpus: [],
-      threadIds: [],
-      trackIds: [],
-      funTids: [],
-      heapIds: [],
+      cpus: [0],
+      threadIds: [56],
+      trackIds: [9, 4],
+      funTids: [42, 1],
+      heapIds: [1, 52],
       nativeMemory: [],
-      cpuAbilityIds: [],
-      memoryAbilityIds: [],
-      diskAbilityIds: [],
-      networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 1000,
+      cpuAbilityIds: [88, 10],
+      memoryAbilityIds: [11, 69],
+      diskAbilityIds: [23, 76],
+      networkAbilityIds: [5, 9],
+      leftNs: 10225,
+      rightNs: 965003,
       hasFps: false,
       statisticsSelectData: undefined,
-      perfSampleIds: [],
+      perfSampleIds: [75,9,7],
       perfCpus: [],
       perfProcess: [],
       perfThread: [],
-      perfAll: false,
+      perfAll: true,
       systemEnergy: [0, 1, 2],
-      powerEnergy: [0, 1, 2],
-      anomalyEnergy: [0, 1, 2],
+      powerEnergy: [45, 8, 2],
+      anomalyEnergy: [12, 898, 2],
     };
     tabPanePowerBattery.tblPower.recycleDataSource = jest.fn(() => tabPanePowerBatteryData);
     tabPanePowerBattery.data = tabPanePowerBatteryData;
   });
-
-  it('TabPanePowerBatteryTest02', function () {
-    let tabPanePowerBattery = new TabPanePowerBattery();
-    expect(tabPanePowerBattery.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-            .power-battery-bottom-scroll-area{
-                display: flex;
-                height: auto;
-                overflow-y: auto;
-                margin-top: 1.2em;
-            }
-            .power-battery-battery-canvas{
-                width: 50%;
-                padding: 0 10px;
-            }
-         
-        </style>
-        <div style="width: 100%;height: auto;position: relative">
-            <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>
-                    </lit-table>
-                </div>
-            </div>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/energy/TabPanePowerDetails.test.ts b/ide/test/trace/component/trace/sheet/energy/TabPanePowerDetails.test.ts
index ab68f8b76c38cf2c1c700d74568595aa237eeb8c..3069375535d1c7efb2d28da06223ab79ad57f5e0 100644
--- a/ide/test/trace/component/trace/sheet/energy/TabPanePowerDetails.test.ts
+++ b/ide/test/trace/component/trace/sheet/energy/TabPanePowerDetails.test.ts
@@ -21,7 +21,7 @@ import '../../../../../../dist/trace/component/trace/sheet/energy/TabPanePowerDe
 import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
+  return {};
 });
 
 window.ResizeObserver =
@@ -43,37 +43,37 @@ describe('TabPanePowerDetails Test', () => {
     let MockPowerDetailsData = sqlit.getTabPowerDetailsData;
     let detail = [
       {
-        ts: 5999127353,
+        ts: 23337353,
         eventName: 'POWER_IDE_AUDIO',
         appKey: 'APPNAME',
         eventValue: 'com.example.himusicdemo,com.example.himusicdemo_js,com.example.himusicdemo_app',
       },
       {
-        ts: 5999127353,
+        ts: 32119127353,
         eventName: 'POWER_IDE_AUDIO',
         appKey: 'BACKGROUND_DURATION',
         eventValue: '524,854,612',
       },
       {
-        ts: 5999127353,
+        ts: 3111117353,
         eventName: 'POWER_IDE_BLUETOOTH',
         appKey: 'APPNAME',
         eventValue: 'com.ohos.settings,bt_switch,bt_switch_js,bt_switch_app',
       },
       {
-        ts: 5999127353,
+        ts: 311111137353,
         eventName: 'POWER_IDE_BLUETOOTH',
         appKey: 'BACKGROUND_DURATION',
         eventValue: '325,124,51,52',
       },
       {
-        ts: 5999127353,
+        ts: 1387357353,
         eventName: 'POWER_IDE_CAMERA',
         appKey: 'APPNAME',
         eventValue: 'com.ohos.camera,com.ohos.camera_app,com.ohos.camera_js,com.ohos.camera_ts',
       },
       {
-        ts: 5999127353,
+        ts: 15422127353,
         eventName: 'POWER_IDE_CAMERA',
         appKey: 'BACKGROUND_DURATION',
         eventValue: '356,325,854,365',
@@ -81,101 +81,31 @@ describe('TabPanePowerDetails Test', () => {
     ];
     MockPowerDetailsData.mockResolvedValue(detail);
     let list = {
-      cpus: [],
+      cpus: [3],
       threadIds: [],
-      trackIds: [],
-      funTids: [],
-      heapIds: [],
+      trackIds: [10, 45, 7],
+      funTids: [6, 89, 0],
+      heapIds: [9, 44],
       nativeMemory: [],
-      cpuAbilityIds: [],
-      memoryAbilityIds: [],
-      diskAbilityIds: [],
-      networkAbilityIds: [],
-      leftNs: 0,
+      cpuAbilityIds: [7, 0, 66],
+      memoryAbilityIds: [7,77,0],
+      diskAbilityIds: [5,76],
+      networkAbilityIds: [85,3,56],
+      leftNs: 966,
       rightNs: 1000,
       hasFps: false,
       statisticsSelectData: undefined,
-      perfSampleIds: [],
+      perfSampleIds: [10, 35,7],
       perfCpus: [],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
-      systemEnergy: [0, 1, 2],
-      powerEnergy: [0, 1, 2],
-      anomalyEnergy: [0, 1, 2],
+      systemEnergy: [20, 412, 2],
+      powerEnergy: [564, 2],
+      anomalyEnergy: [145, 56],
     };
     tabPanePowerDetails.tblPowerDetails.recycleDataSource = jest.fn(() => list);
     tabPanePowerDetails.data = list;
     expect(tabPanePowerDetails.data).toBeUndefined();
   });
-
-  it('TabPanePowerDetailsTest02', function () {
-    let tabPanePowerDetails = new TabPanePowerDetails();
-    expect(tabPanePowerDetails.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .power-details-table{
-            height: auto;
-        }
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <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" >
-            </lit-table-column>
-            <lit-table-column order width="80px" title="Charge" data-index="charge" key="charge" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="200px" title="Foreground Duration(ms)" data-index="foreground_duration" key="foreground_duration" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="200px" title="Foreground Energy(mAs)" data-index="foreground_energy" key="foreground_energy" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="200px" title="Background Duration(ms)" data-index="background_duration" key="background_duration" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="200px" title="Background Energy(mAs)" data-index="background_energy" key="background_energy" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="190px" title="Screen On Duration(ms)" data-index="screen_on_duration" key="screen_on_duration" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="180px" title="Screen On Energy(mAs)" data-index="screen_on_energy" key="screen_on_energy" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="190px" title="Screen Off Duration(ms)" data-index="screen_off_duration" key="screen_off_duration" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="190px" title="Screen Off Energy(mAs)" data-index="screen_off_energy" key="screen_off_energy" align="flex-start" >
-            </lit-table-column>
-             <lit-table-column order width="150px" title="Foreground Count" data-index="foreground_count" key="foreground_count" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="150px" title="Background Count" data-index="background_count" key="background_count" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="150px" title="Screen On Count" data-index="screen_on_count" key="screen_on_count" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="150px" title="Screen Off Count" data-index="screen_off_count" key="screen_off_count" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="170px" title="Background Time(ms)" data-index="background_time" key="background_time" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="160px" title="Screen On Time(ms)" data-index="screen_on_time" key="screen_on_time" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="160px" title="Screen Off Time(ms)" data-index="screen_off_time" key="screen_off_time" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="110px" title="Energy(mAs)" data-index="energy" key="energy" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="80px" title="Load(%)" data-index="load" key="load" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="100px" title="Usage(ms)" data-index="usage" key="usage" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="120px" title="Duration(ms)" data-index="duration" key="duration" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="100px" title="Camera Id" data-index="camera_id" key="camera_id" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="80px" title="Count" data-index="count" key="count" align="flex-start" >
-            </lit-table-column>
-            <lit-table-column order width="140px" title="Energy Percent(%)" data-index="energyConsumptionRatio" key="energyConsumptionRatio" align="flex-start" >
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/energy/TabPaneSystemDetails.test.ts b/ide/test/trace/component/trace/sheet/energy/TabPaneSystemDetails.test.ts
index 2dcc0b3736099aec4bd977c696485f7716195548..5a40e51bbbae4353ed904552f7580da7f40a51ee 100644
--- a/ide/test/trace/component/trace/sheet/energy/TabPaneSystemDetails.test.ts
+++ b/ide/test/trace/component/trace/sheet/energy/TabPaneSystemDetails.test.ts
@@ -22,19 +22,17 @@ import { querySysLocationDetailsData, querySysLockDetailsData } from '../../../.
 import { SpHiSysEventChart } from '../../../../../../dist/trace/component/chart/SpHiSysEventChart.js';
 import '../../../../../../dist/trace/component/chart/SpHiSysEventChart.js';
 
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
     observe: jest.fn(),
     unobserve: jest.fn(),
+    disconnect: jest.fn(),
   }));
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 describe('TabPanePowerBattery Test', () => {
   it('TabPaneSystemDetailsTest01', function () {
@@ -145,28 +143,28 @@ describe('TabPanePowerBattery Test', () => {
     MockLocationData.mockResolvedValue(locationDetails);
 
     let tabPaneSystemDetailsData = {
-      cpus: [],
-      threadIds: [],
-      trackIds: [],
-      funTids: [],
-      heapIds: [],
+      cpus: [1],
+      threadIds: [23, 6, 7],
+      trackIds: [57, 67, 1],
+      funTids: [56, 9],
+      heapIds: [9,0],
       nativeMemory: [],
-      cpuAbilityIds: [],
+      cpuAbilityIds: [78],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
+      diskAbilityIds: [43,98],
       networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 300000000000,
+      leftNs: 546,
+      rightNs: 300000000,
       hasFps: false,
       statisticsSelectData: undefined,
       perfSampleIds: [],
-      perfCpus: [],
+      perfCpus: [1,2],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
-      systemEnergy: [0, 1, 2],
-      powerEnergy: [0, 1, 2],
-      anomalyEnergy: [0, 1, 2],
+      systemEnergy: [5,78,1],
+      powerEnergy: [54, 56, 0],
+      anomalyEnergy: [10, 5, 0, 0],
     };
 
     tabPaneSystemDetails.data = tabPaneSystemDetailsData;
@@ -224,13 +222,13 @@ describe('TabPanePowerBattery Test', () => {
       ts: 0,
       eventName: 'Event Name',
       type: 'type',
-      pid: 0,
-      uid: 0,
+      pid: 2,
+      uid: 33,
       state: 0,
-      workId: 'workId',
+      workId: 567,
       name: 'name',
-      interval: 0,
-      level: 0,
+      interval: 112,
+      level: 31,
       tag: 'tag:',
       message: 'message',
       log_level: 'log_level',
@@ -249,13 +247,13 @@ describe('TabPanePowerBattery Test', () => {
       ts: 0,
       eventName: 'GNSS_STATE',
       type: 'type',
-      pid: 0,
-      uid: 0,
+      pid: 23,
+      uid: 11,
       state: 0,
-      workId: 'workId',
+      workId: 123,
       name: 'name',
-      interval: 0,
-      level: 0,
+      interval: 1011,
+      level: 201,
       tag: 'tag:',
       message: 'message',
       log_level: 'log_level',
@@ -271,16 +269,16 @@ describe('TabPanePowerBattery Test', () => {
     tabPaneSystemDetails.tblSystemDetails!.recycleDataSource = jest.fn(() => []);
     tabPaneSystemDetails.detailsTbl!.recycleDataSource = jest.fn(() => []);
     let data = {
-      ts: 0,
+      ts: 2444221,
       eventName: 'POWER_RUNNINGLOCK',
       type: 'type',
-      pid: 0,
-      uid: 0,
-      state: 0,
+      pid: 76,
+      uid: 23,
+      state: 1,
       workId: 'workId',
       name: 'name',
-      interval: 0,
-      level: 0,
+      interval: 1223,
+      level: 3421,
       tag: 'tag:',
       message: 'message',
       log_level: 'log_level',
@@ -295,16 +293,16 @@ describe('TabPanePowerBattery Test', () => {
     tabPaneSystemDetails.tblSystemDetails!.recycleDataSource = jest.fn(() => []);
     tabPaneSystemDetails.detailsTbl!.recycleDataSource = jest.fn(() => []);
     let data = {
-      ts: 0,
+      ts: 4442111,
       eventName: 'POWER',
       type: 'type',
-      pid: 0,
-      uid: 0,
-      state: 0,
+      pid: 23,
+      uid: 337,
+      state: 1,
       workId: 'workId',
       name: 'name',
-      interval: 0,
-      level: 0,
+      interval: 10241,
+      level: 147754,
       tag: 'tag:',
       message: 'message',
       log_level: 'log_level',
@@ -418,48 +416,4 @@ describe('TabPanePowerBattery Test', () => {
 
     expect(systemWorkData).toStrictEqual([]);
   });
-
-  it('TabPaneSystemDetailsTest07', function () {
-    let tabPaneSystemDetails = new TabPaneSystemDetails();
-    expect(tabPaneSystemDetails.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
-        .sys-detail-progress{
-            bottom: 33px;
-            position: absolute;
-            height: 1px;
-            left: 0;
-            right: 0;
-        }
-        </style>
-        <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 class="sys-detail-column" width="300px" title="" data-index="eventName" key="eventName"  align="flex-start" order>
-                            </lit-table-column>
-                            <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 class="sys-detail-column" width="100px" title="" data-index="key" key="key"  align="flex-start" >
-                        </lit-table-column>
-                        <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 sys-detail-progress"></lit-progress-bar>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneCallTree.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneCallTree.test.ts
index db6dab2eb122338827a0c1d1b19e1cf034ca8c4a..4f51db70608b920ba27d7975281a496db5e67163 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneCallTree.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneCallTree.test.ts
@@ -48,7 +48,7 @@ Object.defineProperty(global.self, 'crypto', {
 describe('TabPaneCallTree Test', () => {
   let data = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
+    clockMapData: { size: 12 },
     cpuAbilityIds: [],
     cpuFreqFilterIds: [],
     cpuFreqLimitDatas: [],
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.test.ts
index fe70ccec6ebd68357e440cc385f4fc8207ed578a..aeb7c9de2f1633117704e11f1e51a4c39443aa3a 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemCalltree.test.ts
@@ -43,13 +43,10 @@ const intersectionObserverMock = () => ({
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
 
 import crypto from 'crypto';
-
-window.ResizeObserver =
-  window.ResizeObserver ||
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
     observe: jest.fn(),
-    unobserve: jest.fn(),
   }));
 
 Object.defineProperty(global.self, 'crypto', {
@@ -57,53 +54,52 @@ Object.defineProperty(global.self, 'crypto', {
     getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
   },
 });
-
 describe('TabpaneFilesystemCalltree Test', () => {
   document.body.innerHTML = `<tabpane-filesystem-calltree id="tree"></tabpane-filesystem-calltree>`;
   let tabpaneFilesystemCalltree = document.querySelector<TabpaneFilesystemCalltree>('#tree');
   let val = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
+    clockMapData: { size: 16 },
+    cpuAbilityIds: [12,155,223],
+    cpuFreqFilterIds: [52,122,22],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
-    cpus: [],
-    diskAbilityIds: [],
+    cpuStateFilterIds: [52,566,115],
+    cpus: [1,2],
+    diskAbilityIds: [451,22],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
-    fileSysVirtualMemory: false,
+    diskIOReadIds: [522, 4, 5, 6],
+    diskIOWriteIds: [2, 5621, 5, 6],
+    diskIOipids: [2,120, 5, 6],
+    fileSysVirtualMemory: true,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 32,
     funAsync: [],
-    funTids: [],
+    funTids: [120,55],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 85 },
     jsMemory: [],
-    leftNs: 964699689,
+    leftNs: 555123,
     memoryAbilityIds: [],
     nativeMemory: [],
     nativeMemoryStatistic: [],
     networkAbilityIds: [],
-    perfAll: false,
-    perfCpus: [],
+    perfAll: true,
+    perfCpus: [1,2],
     perfProcess: [],
     perfSampleIds: [],
-    perfThread: [],
+    perfThread: ['hiprofiler_cmd',''],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [552,123],
     promiseList: [],
     recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
-    sdkSliceIds: [],
+    rightNs: 966666666,
+    sdkCounterIds: [120,451,52],
+    sdkSliceIds: [154],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
-    virtualTrackIds: [],
-    vmCount: 0,
+    threadIds: [101,2122,4],
+    virtualTrackIds: [412,85],
+    vmCount: 3,
   };
 
   it('TabpaneFilesystemCalltreeTest02', function () {
@@ -161,40 +157,40 @@ describe('TabpaneFilesystemCalltree Test', () => {
   it('TabpaneFilesystemCalltreeTest08', function () {
     let resultData = [
       {
-        addr: '',
+        addr: 'SpSystemTrace.js',
         canCharge: false,
-        count: 67,
-        depth: 0,
-        drawCount: 0,
-        drawDur: 0,
-        drawSize: 0,
-        dur: 43334510310,
-        frame: { x: 0, y: 30, width: 594, height: 20 },
-        id: '38',
-        ip: '',
+        count: 56,
+        depth: 1,
+        drawCount: 23,
+        drawDur: 32,
+        drawSize: 33,
+        dur: 43331564310,
+        frame: { x: 10, y: 32, width: 522, height: 10 },
+        id: '1',
+        ip: '12',
         isDraw: false,
-        isSearch: false,
+        isSearch: true,
         isSelected: false,
-        isStore: 0,
+        isStore: 1,
         lib: '',
-        libName: '',
-        parentId: '',
+        libName: 'file',
+        parentId: '12',
         path: '',
-        pathId: 0,
-        percent: 0.3642222150324375,
-        pid: 0,
+        pathId: 2,
+        percent: 0.36425651150324375,
+        pid: 23,
         processName: '',
         searchShow: true,
-        self: '0s',
-        selfDur: 0,
-        size: 0,
-        symbol: 'symbol',
-        symbolName: 'symbolName',
-        symbolsId: 0,
-        textMetricsWidth: 62.7783203125,
-        type: 0,
-        weight: '43.33s ',
-        weightPercent: '36.4%',
+        self: '5s',
+        selfDur: 54,
+        size: 443,
+        symbol: 'symsdbl',
+        symbolName: 'symbols',
+        symbolsId: 210,
+        textMetricsWidth: 62.7712033125,
+        type: 10,
+        weight: '66.33s ',
+        weightPercent: '23.4%',
         children: [],
       },
     ];
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.test.ts
index 311d26ac2088e80c5d83eac08c43d13401bb70b6..dce40fda7f220e935b6aa15ba28d90dbb3132788 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescHistory.test.ts
@@ -26,8 +26,8 @@ window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
-    observe: jest.fn(),
     unobserve: jest.fn(),
+    observe: jest.fn(),
   }));
 
 Object.defineProperty(global.self, 'crypto', {
@@ -42,81 +42,81 @@ describe('TabPaneFileSystemDescHistory Test', () => {
 
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
-    cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
-    cpus: [],
-    diskAbilityIds: [],
+    clockMapData: { size: 122},
+    cpuAbilityIds: [222,7],
+    cpuFreqFilterIds: [56,99],
+    cpuFreqLimitDatas: [67,8],
+    cpuStateFilterIds: [558, 66],
+    cpus: [0],
+    diskAbilityIds: [0,8],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
+    diskIOReadIds: [2, 7, 1, 545],
+    diskIOWriteIds: [2, 741, 1, 3, 4, 5, 6],
+    diskIOipids: [2, 7, 444, 6],
     fileSysVirtualMemory: false,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 55,
     funAsync: [],
-    funTids: [],
+    funTids: [133,56,99],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 66 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 964699549,
+    memoryAbilityIds: [34,766],
     nativeMemory: [],
     nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    networkAbilityIds: [34,677],
     perfAll: false,
-    perfCpus: [],
+    perfCpus: [0],
     perfProcess: [],
-    perfSampleIds: [],
-    perfThread: [],
+    perfSampleIds: [234,677],
+    perfThread: [''],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [414,478],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
+    recordStartNs: 780466689228,
+    rightNs: 24269844624,
+    sdkCounterIds: [444,76],
     sdkSliceIds: [],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
-    virtualTrackIds: [],
-    vmCount: 0,
+    threadIds: [534,767],
+    virtualTrackIds: [330,56],
+    vmCount: 66,
   };
   let filterSource = [
     {
       backtrace: ['0x7faa10f228', '(10 other frames)'],
-      callchainId: 13,
+      callchainId: 133,
       depth: 10,
       dur: 240916,
       durStr: '240.92μs ',
-      fd: 14,
+      fd: 143,
       fileId: 546,
       isHover: false,
       path: '/data/local/tmp/test',
       process: 'power_host[911]',
-      startTs: 285141821,
+      startTs: 285141831,
       startTsStr: '285ms 141μs 821ns ',
       symbol: '0x7faa10f228',
-      type: 0,
+      type: 3,
       typeStr: 'OPEN',
     },
     {
       backtrace: ['0x7faa10f228', '(10 other frames)'],
       callchainId: 15,
-      depth: 10,
+      depth: 103,
       dur: 7583,
       durStr: '7.58μs ',
-      fd: 14,
+      fd: 143,
       fileId: null,
       isHover: false,
       path: '-',
       process: 'test[911]',
-      startTs: 285449632,
+      startTs: 285449633,
       startTsStr: '285ms 449μs 821ns ',
       symbol: '0x7faa10f228',
-      type: 1,
+      type: 3,
       typeStr: 'CLOSE',
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.test.ts
index 3622a5953db28fbd7d04bcb48f2807e77fac0d01..e5163127820249de56dc640965cd49200614fcce 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemDescTimeSlice.test.ts
@@ -21,20 +21,20 @@ import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 import crypto from 'crypto';
 // @ts-ignore
 import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/sheet/TabPaneFilter.js';
-// @ts-ignore
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
 
 Object.defineProperty(global.self, 'crypto', {
   value: {
     getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
   },
 });
+// @ts-ignore
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      disconnect: jest.fn(),
+      unobserve: jest.fn(),
+    }));
 
 describe('TabPaneFileSystemDescTimeSlice Test', () => {
   document.body.innerHTML = `<tabpane-filesystem-desc-time-slice id="desc-time-slice"></tabpane-filesystem-desc-time-slice>`;
@@ -42,82 +42,82 @@ describe('TabPaneFileSystemDescTimeSlice Test', () => {
 
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
+    clockMapData: { size: 18 },
+    cpuAbilityIds: [12,67,4],
     cpuFreqFilterIds: [],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
-    cpus: [],
-    diskAbilityIds: [],
+    cpuStateFilterIds: [102,58,145],
+    cpus: [1,3],
+    diskAbilityIds: [41,56],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
+    diskIOReadIds: [643, 6],
+    diskIOWriteIds: [2, 322, 76, 6],
+    diskIOipids: [89, 3, 4, 5, 56],
     fileSysVirtualMemory: false,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 66,
     funAsync: [],
-    funTids: [],
+    funTids: [41,123],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 96 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 964699969,
+    memoryAbilityIds: [452,12],
     nativeMemory: [],
     nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    networkAbilityIds: [45,541],
     perfAll: false,
-    perfCpus: [],
+    perfCpus: [10,55],
     perfProcess: [],
-    perfSampleIds: [],
-    perfThread: [],
+    perfSampleIds: [56,144,12],
+    perfThread: [''],
     powerEnergy: [],
     processTrackIds: [],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
+    recordStartNs: 780423789998,
+    rightNs: 24267566524,
     sdkCounterIds: [],
-    sdkSliceIds: [],
+    sdkSliceIds: [52,68,35],
     smapsType: [],
     systemEnergy: [],
     threadIds: [],
-    virtualTrackIds: [],
-    vmCount: 0,
+    virtualTrackIds: [55,56,14],
+    vmCount: 90,
   };
 
   let filterSource = [
     {
       backtrace: ['0x7faa10f228', '(10 other frames)'],
-      callchainId: 13,
+      callchainId: 132,
       depth: 10,
       dur: 240916,
       durStr: '240.92μs ',
-      fd: 14,
+      fd: 142,
       fileId: 546,
       isHover: false,
       path: '/data/local/tmp/test',
       process: 'power_host[911]',
-      startTs: 285141821,
+      startTs: 285141822,
       startTsStr: '285ms 141μs 821ns ',
       symbol: '0x7faa10f228',
-      type: 0,
+      type: 2,
       typeStr: 'OPEN',
     },
     {
       backtrace: ['0x7faa10f228', '(10 other frames)'],
-      callchainId: 15,
-      depth: 10,
+      callchainId: 152,
+      depth: 102,
       dur: 7583,
       durStr: '7.58μs ',
-      fd: 14,
+      fd: 142,
       fileId: null,
       isHover: false,
       path: '-',
       process: 'test[911]',
-      startTs: 285449632,
+      startTs: 285449622,
       startTsStr: '285ms 449μs 821ns ',
       symbol: '0x7faa10f228',
-      type: 1,
+      type: 2,
       typeStr: 'CLOSE',
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.test.ts
index 4a743ab0d73bed615b7ab96226fccef97534ed43..4ecf3f11f08dc36ce1a55825cb264dd27de8869c 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneFileSystemEvents.test.ts
@@ -26,15 +26,13 @@ import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/shee
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
+    disconnect: jest.fn(),
   }));
 
 Object.defineProperty(global.self, 'crypto', {
-  value: {
-    getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
-  },
+  value: { getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length)},
 });
 describe('TabPaneFileSystemEvents Test', () => {
   document.body.innerHTML = `<tabpane-filesystem-event id="files"></tabpane-filesystem-event>`;
@@ -42,36 +40,36 @@ describe('TabPaneFileSystemEvents Test', () => {
   let filterSource = [
     {
       backtrace: ['0x7faa10f228', '(10 other frames)'],
-      callchainId: 13,
+      callchainId: 131,
       depth: 10,
       dur: 240916,
       durStr: '240.92μs ',
-      fd: 14,
+      fd: 141,
       fileId: 546,
       isHover: false,
       path: '/data/local/tmp/test',
       process: 'power_host[911]',
-      startTs: 285141821,
+      startTs: 285141811,
       startTsStr: '285ms 141μs 821ns ',
       symbol: '0x7faa10f228',
-      type: 0,
+      type: 1,
       typeStr: 'OPEN',
     },
     {
       backtrace: ['0x7faa10f228', '(10 other frames)'],
-      callchainId: 15,
+      callchainId: 151,
       depth: 10,
       dur: 7583,
       durStr: '7.58μs ',
-      fd: 14,
+      fd: 141,
       fileId: null,
       isHover: false,
       path: '-',
       process: 'test[911]',
-      startTs: 285449632,
+      startTs: 285449612,
       startTsStr: '285ms 449μs 821ns ',
       symbol: '0x7faa10f228',
-      type: 1,
+      type: 11,
       typeStr: 'CLOSE',
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.test.ts
index b84b6a49522c7c290d976ff8f2ec8a7d7a157555..2d4b9885dadb7355a549d3845609d0b0fb58d656 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatistics.test.ts
@@ -29,74 +29,64 @@ import '../../../../../../dist/base-ui/table/lit-table.js';
 import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/sheet/TabPaneFilter.js';
 import '../../../../../../dist/trace/component/trace/sheet/TabPaneFilter.js';
 
-// @ts-ignore
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
-
 Object.defineProperty(global.self, 'crypto', {
   value: {
     getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
   },
 });
-
+// @ts-ignore
 window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(), observe: jest.fn(), unobserve: jest.fn(),
+    }));
+
 describe('TabPaneFileStatistics Test', () => {
   document.body.innerHTML = `<div><tabpane-file-statistics id="statistics"></tabpane-file-statistics></div>`;
   let tabPaneFileStatistics = document.querySelector<TabPaneFileStatistics>('#statistics');
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
+    clockMapData: { size: 50 },
+    cpuAbilityIds: [23,25],
+    cpuFreqFilterIds: [34,66],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
-    cpus: [],
-    diskAbilityIds: [],
+    cpuStateFilterIds: [77,96],
+    cpus: [0],
+    diskAbilityIds: [10,34],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
-    fileSysVirtualMemory: false,
+    diskIOReadIds: [2,11, 4, 12],
+    diskIOWriteIds: [2, 54, 64],
+    diskIOipids: [25, 7, 58, 6],
+    fileSysVirtualMemory: true,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 30,
     funAsync: [],
-    funTids: [],
+    funTids: [45,22],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 32 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 964667689,
+    memoryAbilityIds: [23,78,9],
     nativeMemory: [],
     nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    networkAbilityIds: [10,154,55],
     perfAll: false,
-    perfCpus: [],
+    perfCpus: [1],
     perfProcess: [],
-    perfSampleIds: [],
+    perfSampleIds: [233,120,4],
     perfThread: [],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [34,21],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
-    sdkSliceIds: [],
+    recordStartNs: 780423722428,
+    rightNs: 33236556624,
+    sdkCounterIds: [12,56],
+    sdkSliceIds: [45,98],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
-    virtualTrackIds: [],
-    vmCount: 0,
+    threadIds: [88,12],
+    virtualTrackIds: [34,87],
+    vmCount: 31,
   };
 
   it('TabPaneFileStatisticsTest01', function () {
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.test.ts
index 197b8c57cc15d877663abe26794334f4c7edaf90..b3c4ba2f63a182421ce4253405e6a9c149624f7e 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneFilesystemStatisticsAnalysis.test.ts
@@ -22,14 +22,12 @@ import crypto from 'crypto';
 // @ts-ignore
 import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/sheet/TabPaneFilter.js';
 // @ts-ignore
-window.ResizeObserver =
-  window.ResizeObserver ||
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
-    observe: jest.fn(),
     unobserve: jest.fn(),
+    observe: jest.fn(),
   }));
-
 Object.defineProperty(global.self, 'crypto', {
   value: {
     getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
@@ -42,47 +40,47 @@ describe('TabPaneFilesystemStatisticsAnalysis Test', () => {
 
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
+    clockMapData: { size: 193 },
+    cpuAbilityIds: [10,8],
+    cpuFreqFilterIds: [56],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
+    cpuStateFilterIds: [12,98],
     cpus: [],
     diskAbilityIds: [],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
+    diskIOReadIds: [2,33],
+    diskIOWriteIds: [54, 4, 54, 6],
+    diskIOipids: [2, 17, 45, 5, 16],
     fileSysVirtualMemory: false,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 3,
     funAsync: [],
     funTids: [],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 996 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 964699125,
+    memoryAbilityIds: [12,34],
     nativeMemory: [],
     nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    networkAbilityIds: [34,87],
     perfAll: false,
     perfCpus: [],
     perfProcess: [],
-    perfSampleIds: [],
+    perfSampleIds: [67,33],
     perfThread: [],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [122,34],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
-    sdkSliceIds: [],
+    recordStartNs: 780423788588,
+    rightNs: 69267555654,
+    sdkCounterIds: [34,22,12],
+    sdkSliceIds: [221],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
+    threadIds: [12,45],
     virtualTrackIds: [],
-    vmCount: 0,
+    vmCount: 850,
   };
 
   let item = {
@@ -96,26 +94,26 @@ describe('TabPaneFilesystemStatisticsAnalysis Test', () => {
 
   let res = [
     {
-      durFormat: '194.23ms ',
-      duration: 194230478,
+      durFormat: '1334.23ms ',
+      duration: 13230478,
       isHover: true,
-      percent: '99.00',
-      pid: 3744,
-      tableName: 'test(3744)',
+      percent: '232.00',
+      pid: 34,
+      tableName: 'test(3554)',
     },
   ];
 
   let processData = [
     {
-      callChainId: 13,
-      dur: 240916,
+      callChainId: 113,
+      dur: 24010,
       libId: 539,
       libName: 'libName.z.so',
       pid: 911,
-      processName: 'processName(911)',
+      processName: 'ksoftirqd/1',
       symbolId: 799,
-      symbolName: 'symbolName',
-      threadName: 'threadName',
+      symbolName: 'ksoftirqd/1 17',
+      threadName: 'ksoftirqd/1',
       tid: 404,
       type: 0,
     },
@@ -174,7 +172,7 @@ describe('TabPaneFilesystemStatisticsAnalysis Test', () => {
   });
 
   it('systemStatisticsAnalysis10', function () {
-    expect(tabPane.getPieChartData(res).length).toEqual(1);
+    expect(tabPane.getFsPieChartData(res).length).toEqual(1);
   });
 
   it('systemStatisticsAnalysis11', function () {
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.test.ts
index 0cb795ddfec05d274f1369621d6f7c0da8dc7d86..8c2100abe0dc54cfaca82ae1c38e7b99fba9ffe7 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatistics.test.ts
@@ -47,47 +47,47 @@ describe('TabPaneIOTierStatistics Test', () => {
 
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
+    clockMapData: { size: 66 },
+    cpuAbilityIds: [12,4,56,76],
+    cpuFreqFilterIds: [5,78,8],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
-    cpus: [],
-    diskAbilityIds: [],
+    cpuStateFilterIds: [67,22],
+    cpus: [1,0],
+    diskAbilityIds: [56,31],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
+    diskIOReadIds: [12, 9],
+    diskIOWriteIds: [2, 51, 6],
+    diskIOipids: [12, 56],
     fileSysVirtualMemory: false,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 80,
     funAsync: [],
-    funTids: [],
+    funTids: [1,65],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 98 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 921599689,
+    memoryAbilityIds: [12,45],
     nativeMemory: [],
-    nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    nativeMemoryStatistic: [45,10,11],
+    networkAbilityIds: [14,10],
     perfAll: false,
     perfCpus: [],
     perfProcess: [],
-    perfSampleIds: [],
+    perfSampleIds: [32],
     perfThread: [],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [34,6],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
-    sdkSliceIds: [],
+    recordStartNs: 780663789228,
+    rightNs: 24952556624,
+    sdkCounterIds: [22,6],
+    sdkSliceIds: [66,9],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
-    virtualTrackIds: [],
-    vmCount: 0,
+    threadIds: [3,76],
+    virtualTrackIds: [77,90],
+    vmCount: 56,
   };
   it('ioTierStatistics01', function () {
     let queryResult = sqlit.getTabPaneIOTierStatisticsData;
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.test.ts
index a992c416287f2c481dd041d261ebbc4d66d3e8ab..4c39ccbc4d03f0b5bd0ccd009d4444ad1c0d9f36 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.test.ts
@@ -12,7 +12,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+      disconnect: jest.fn(),
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+    }));
 // @ts-ignore
 import { TabPaneIOTierStatisticsAnalysis } from '../../../../../../dist/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.js';
 import '../../../../../../dist/trace/component/trace/sheet/file-system/TabPaneIOTierStatisticsAnalysis.js';
@@ -21,14 +27,6 @@ import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 import crypto from 'crypto';
 // @ts-ignore
 import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/sheet/TabPaneFilter.js';
-// @ts-ignore
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
 Object.defineProperty(global.self, 'crypto', {
   value: {
     getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
@@ -40,79 +38,79 @@ describe('TabPaneIOTierStatisticsAnalysis Test', () => {
   let tabPane = document.querySelector<TabPaneIOTierStatisticsAnalysis>('#statistics-analysis');
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
+    clockMapData: { size: 985 },
+    cpuAbilityIds: [12,45,7],
+    cpuFreqFilterIds: [10,67,9],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
+    cpuStateFilterIds: [23,4],
     cpus: [],
-    diskAbilityIds: [],
+    diskAbilityIds: [43,45,4],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
+    diskIOReadIds: [24, 17, 71],
+    diskIOWriteIds: [2, 14, 5, 36],
+    diskIOipids: [42, 7, 65],
     fileSysVirtualMemory: false,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 44,
     funAsync: [],
-    funTids: [],
+    funTids: [23,78],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 966 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 964696659,
+    memoryAbilityIds: [65,67,89,11],
     nativeMemory: [],
     nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    networkAbilityIds: [12,56,88],
     perfAll: false,
-    perfCpus: [],
+    perfCpus: [0,2],
     perfProcess: [],
-    perfSampleIds: [],
+    perfSampleIds: [11,53,110],
     perfThread: [],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [12,110,889],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
-    sdkSliceIds: [],
+    recordStartNs: 780423782222,
+    rightNs: 24267332224,
+    sdkCounterIds: [12,4,55,1],
+    sdkSliceIds: [45,12],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
+    threadIds: [66,3,10],
     virtualTrackIds: [],
-    vmCount: 0,
+    vmCount: 17,
   };
   let processData = [
     {
-      callChainId: 13,
-      dur: 240916,
-      libId: 539,
+      callChainId: 213,
+      dur: 295432,
+      libId: 511,
       libName: 'libName.z.so',
       pid: 911,
-      processName: 'processName(911)',
+      processName: 'mdss_fb0 8544',
       symbolId: 799,
-      symbolName: 'symbolName',
-      threadName: 'threadName',
-      tid: 404,
-      type: 0,
+      symbolName: 'mdss_fb0',
+      threadName: 'mdss_fb0',
+      tid: 30,
+      type: 90,
     },
   ];
   let item = {
-    durFormat: '194.23ms ',
-    duration: 194230478,
+    durFormat: '183.23ms ',
+    duration: 19965478,
     isHover: true,
-    percent: '99.00',
-    pid: 3744,
-    tableName: 'test(3744)',
+    percent: '502.00',
+    pid: 320,
+    tableName: 'sumb(3745)',
   };
   let res = [
     {
-      durFormat: '194.23ms ',
-      duration: 194230478,
+      durFormat: '201.33ms ',
+      duration: 365130478,
       isHover: true,
-      percent: '99.00',
-      pid: 3744,
-      tableName: 'test(3744)',
+      percent: '3599.00',
+      pid: 301,
+      tableName: 'test(3204)',
     },
   ];
   let itemClick = new CustomEvent('click', <CustomEventInit>{
@@ -202,7 +200,7 @@ describe('TabPaneIOTierStatisticsAnalysis Test', () => {
     expect(tabPane.typeIdToString(4)).toEqual('METADATA_WRITE');
   });
   it('tabPaneIOTierStatisticsAnalysis12', function () {
-    expect(tabPane.getPieChartData(res).length).toEqual(1);
+    expect(tabPane.getIOTierPieChartData(res).length).toEqual(1);
   });
 
   it('tabPaneIOTierStatisticsAnalysis13', function () {
diff --git a/ide/test/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.test.ts b/ide/test/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.test.ts
index e5f366c77fd7069a2e876154b74bda8c8e43755a..84977099f1c8d1e29fe16d64f9fa6197d8723635 100644
--- a/ide/test/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.test.ts
+++ b/ide/test/trace/component/trace/sheet/file-system/TabPaneVirtualMemoryStatisticsAnalysis.test.ts
@@ -23,16 +23,12 @@ import crypto from 'crypto';
 import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/sheet/TabPaneFilter.js';
 // @ts-ignore
 window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
+  window.ResizeObserver || jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
+    unobserve: jest.fn(), observe: jest.fn(),
+    }));
 Object.defineProperty(global.self, 'crypto', {
-  value: {
-    getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
-  },
+  value: { getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length)},
 });
 
 describe('TabPaneVirtualMemoryStatisticsAnalysis Test', () => {
@@ -40,79 +36,79 @@ describe('TabPaneVirtualMemoryStatisticsAnalysis Test', () => {
   let tabPane = document.querySelector<TabPaneVirtualMemoryStatisticsAnalysis>('#statistics-analysis');
   let param = {
     anomalyEnergy: [],
-    clockMapData: { size: 0 },
-    cpuAbilityIds: [],
-    cpuFreqFilterIds: [],
+    clockMapData: { size: 623 },
+    cpuAbilityIds: [234,56],
+    cpuFreqFilterIds: [46,87,9],
     cpuFreqLimitDatas: [],
-    cpuStateFilterIds: [],
-    cpus: [],
-    diskAbilityIds: [],
+    cpuStateFilterIds: [77,97,3],
+    cpus: [2,1],
+    diskAbilityIds: [43,98],
     diskIOLatency: false,
-    diskIOReadIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOWriteIds: [2, 7, 1, 3, 4, 5, 6],
-    diskIOipids: [2, 7, 1, 3, 4, 5, 6],
-    fileSysVirtualMemory: false,
+    diskIOReadIds: [1],
+    diskIOWriteIds: [12, 4 ,55, 6],
+    diskIOipids: [6,88, 3, 551, 6],
+    fileSysVirtualMemory: true,
     fileSystemType: [],
-    fsCount: 0,
+    fsCount: 56,
     funAsync: [],
-    funTids: [],
+    funTids: [6,87,2],
     hasFps: false,
-    irqMapData: { size: 0 },
+    irqMapData: { size: 158 },
     jsMemory: [],
-    leftNs: 964699689,
-    memoryAbilityIds: [],
+    leftNs: 964699699,
+    memoryAbilityIds: [25,87,8],
     nativeMemory: [],
     nativeMemoryStatistic: [],
-    networkAbilityIds: [],
+    networkAbilityIds: [67,12,9],
     perfAll: false,
     perfCpus: [],
     perfProcess: [],
-    perfSampleIds: [],
+    perfSampleIds: [12,66,6],
     perfThread: [],
     powerEnergy: [],
-    processTrackIds: [],
+    processTrackIds: [42,87,43],
     promiseList: [],
-    recordStartNs: 780423789228,
-    rightNs: 24267556624,
-    sdkCounterIds: [],
-    sdkSliceIds: [],
+    recordStartNs: 780621789228,
+    rightNs: 24269616624,
+    sdkCounterIds: [33,87,21],
+    sdkSliceIds: [2,7,2],
     smapsType: [],
     systemEnergy: [],
-    threadIds: [],
+    threadIds: [2,9,1],
     virtualTrackIds: [],
-    vmCount: 0,
+    vmCount: 450,
   };
   let processData = [
     {
-      callChainId: 13,
-      dur: 240916,
-      libId: 539,
-      libName: 'libName.z.so',
-      pid: 911,
-      processName: 'processName(911)',
-      symbolId: 799,
-      symbolName: 'symbolName',
-      threadName: 'threadName',
-      tid: 404,
-      type: 0,
+      callChainId: 154,
+      dur: 240768,
+      libId: 102,
+      libName: 'libName.com',
+      pid: 91,
+      processName: 'ssioncontroller 3675',
+      symbolId: 320,
+      symbolName: 'ssioncontroller',
+      threadName: 'ssioncontroller',
+      tid: 920,
+      type: 20,
     },
   ];
   let item = {
-    durFormat: '194.23ms ',
-    duration: 194230478,
+    durFormat: '133.23ms ',
+    duration: 265930478,
     isHover: true,
-    percent: '99.00',
-    pid: 3744,
-    tableName: 'test(3744)',
+    percent: '8023.00',
+    pid: 1520,
+    tableName: 'test(6124)',
   };
   let res = [
     {
-      durFormat: '194.23ms ',
-      duration: 194230478,
+      durFormat: '1964.3ms ',
+      duration: 210230478,
       isHover: true,
-      percent: '99.00',
-      pid: 3744,
-      tableName: 'test(3744)',
+      percent: '1099.00',
+      pid: 5214,
+      tableName: 'test(5624)',
     },
   ];
   it('tabPaneVirtualMemoryStatisticsAnalysis01', function () {
@@ -188,7 +184,7 @@ describe('TabPaneVirtualMemoryStatisticsAnalysis Test', () => {
     expect(tabPane.typeIdToString(7)).toEqual('Copy On Writer');
   });
   it('tabPaneVirtualMemoryStatisticsAnalysis10', function () {
-    expect(tabPane.getPieChartData(res).length).toEqual(1);
+    expect(tabPane.getVmPieChartData(res).length).toEqual(1);
   });
   it('tabPaneVirtualMemoryStatisticsAnalysis11', function () {
     tabPane.currentLevel = 0;
diff --git a/ide/test/trace/component/trace/sheet/fps/TabPaneCpuFreqLimits.test.ts b/ide/test/trace/component/trace/sheet/fps/TabPaneCpuFreqLimits.test.ts
index 018150fabd8be9d69f1db542a2f098e257c45c5d..e8ece1cf8ce3d7d859bee487bc06d27eda598d6b 100644
--- a/ide/test/trace/component/trace/sheet/fps/TabPaneCpuFreqLimits.test.ts
+++ b/ide/test/trace/component/trace/sheet/fps/TabPaneCpuFreqLimits.test.ts
@@ -18,23 +18,24 @@ const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 
 describe('TabPaneCpuFreqLimits Test', () => {
-    let tabPaneCpuFreqLimits = new TabPaneCpuFreqLimits();
+  let tabPaneCpuFreqLimits = new TabPaneCpuFreqLimits();
 
-    it('TabPaneCpuFreqLimitsTest01', function () {
-        expect((tabPaneCpuFreqLimits.formatData([],1,1))).toBeUndefined();
-    });
-    it('TabPaneCpuFreqLimitsTest02', function () {
-        expect((tabPaneCpuFreqLimits.sortCpuFreqLimitTable('',0))).toBeUndefined();
-    });
-    it('TabPaneCpuFreqLimitsTest03', function () {
-        expect((tabPaneCpuFreqLimits.sortCpuFreqLimitTable('timeStr',1))).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('TabPaneCpuFreqLimitsTest01', function () {
+    expect(tabPaneCpuFreqLimits.formatData([], 1, 1)).toBeUndefined();
+  });
+  it('TabPaneCpuFreqLimitsTest02', function () {
+    expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('', 0)).toBeUndefined();
+  });
+  it('TabPaneCpuFreqLimitsTest03', function () {
+    expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('timeStr', 1)).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/trace/sheet/fps/TabPaneFps.test.ts b/ide/test/trace/component/trace/sheet/fps/TabPaneFps.test.ts
index 2b2d38fabf40eef3a00bc0cd30620bc59f3436dc..1f7ff62cb88401cb408955f5744fcf777d23e9a8 100644
--- a/ide/test/trace/component/trace/sheet/fps/TabPaneFps.test.ts
+++ b/ide/test/trace/component/trace/sheet/fps/TabPaneFps.test.ts
@@ -41,28 +41,4 @@ describe('TabPaneFps Test', () => {
     let a = { rightNs: 1, leftNs: 1 };
     expect((tabPaneFps.data = a)).toBeTruthy();
   });
-
-  it('TabPaneFpsTest03', function () {
-    expect(tabPaneFps.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .fps-label{
-            text-align: end;
-        }
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <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 class="fps-column" width="1fr" title="Time" data-index="timeStr" key="timeStr" align="flex-start">
-            </lit-table-column>
-            <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/test/trace/component/trace/sheet/frame/TabPaneFrameDynamic.test.ts b/ide/test/trace/component/trace/sheet/frame/TabPaneFrameDynamic.test.ts
index 9dbe8c7054b8c190758f8966d0fe9e259fce3f08..cb0e8ff1c0a4e4daeb8bf3fb24171d34cf1ee83d 100644
--- a/ide/test/trace/component/trace/sheet/frame/TabPaneFrameDynamic.test.ts
+++ b/ide/test/trace/component/trace/sheet/frame/TabPaneFrameDynamic.test.ts
@@ -21,18 +21,20 @@ describe('TabPaneFrameDynamic Test', () => {
   let frameDynamicParam = {
     leftNs: 211,
     rightNs: 1252,
-    frameDynamic: [{
-      ts: 4153254331,
-      id: 288,
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      alpha: 0,
-      appName: 'test',
-      groupId: 4153254331,
-      typeValue: 2,
-    }],
+    frameDynamic: [
+      {
+        ts: 4153254331,
+        id: 288,
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        alpha: 0,
+        appName: 'test',
+        groupId: 4153254331,
+        typeValue: 2,
+      },
+    ],
   };
 
   it('TabPaneFrameDynamicTest01', function () {
diff --git a/ide/test/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.test.ts b/ide/test/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.test.ts
index d1f12c13c4ad37053528f345785c2e5a31b64977..5ba883b1743b5aca7d430168d688ccaa850ce8ee 100644
--- a/ide/test/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.test.ts
+++ b/ide/test/trace/component/trace/sheet/freq/TabPaneCpuFreqLimits.test.ts
@@ -17,35 +17,36 @@ import { TabPaneCpuFreqLimits } from '../../../../../../dist/trace/component/tra
 const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
+  return {};
 });
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
-    return {};
+  return {};
 });
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
-    return {};
+  return {};
 });
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
+window.ResizeObserver =
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 describe('TabPaneCpuFreqLimits Test', () => {
-    let tabPaneCpuFreqLimits = new TabPaneCpuFreqLimits();
-    it('TabPaneCpuFreqLimits01', function () {
-        expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('timeStr',1)).toBeUndefined();
-    });
-    it('TabPaneCpuFreqLimits02', function () {
-        expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('valueStr',1)).toBeUndefined();
-    });
-    it('TabPaneCpuFreqLimits03', function () {
-        expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('cpu',1)).toBeUndefined();
-    });
-    it('TabPaneCpuFreqLimits04', function () {
-        expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('type',1)).toBeUndefined();
-    });
-})
\ No newline at end of file
+  let tabPaneCpuFreqLimits = new TabPaneCpuFreqLimits();
+  it('TabPaneCpuFreqLimits01', function () {
+    expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('timeStr', 1)).toBeUndefined();
+  });
+  it('TabPaneCpuFreqLimits02', function () {
+    expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('valueStr', 1)).toBeUndefined();
+  });
+  it('TabPaneCpuFreqLimits03', function () {
+    expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('cpu', 1)).toBeUndefined();
+  });
+  it('TabPaneCpuFreqLimits04', function () {
+    expect(tabPaneCpuFreqLimits.sortCpuFreqLimitTable('type', 1)).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuClickSelect.test.ts b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuClickSelect.test.ts
index 558fa9fe4105d6ceb37864ed57dbb2cdc7862ccc..3252eaca91d1dc9091ce37f506105c4a75a33d5d 100644
--- a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuClickSelect.test.ts
+++ b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuClickSelect.test.ts
@@ -16,16 +16,17 @@
 import { TabPaneGpuClickSelect } from '../../../../../../dist/trace/component/trace/sheet/gpu/TabPaneGpuClickSelect.js';
 
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
-});
-jest.mock('../../../../../../dist/trace/component/trace/sheet/gpu/TabPaneGpuClickSelectComparison.js', () => {
   return {};
 });
 const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/component/trace/sheet/gpu/TabPaneGpuClickSelectComparison.js', () => {
+  return {};
+});
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
+window.ResizeObserver =
+  window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
@@ -35,33 +36,35 @@ window.ResizeObserver = window.ResizeObserver ||
 describe('TabPaneGpuClickSelect Test', () => {
   document.body.innerHTML = `<div><tabpane-gpu-click-select id="tree"></tabpane-gpu-click-select></div>`;
   let tabPaneGpuClickSelect = document.querySelector<TabPaneGpuClickSelect>('#tree');
-    let queryGpuDataByTs = sqlite.queryGpuDataByTs;
-     queryGpuDataByTs.mockResolvedValue([
-      {
-          windowId:1,
-          moduleId:2,
-          categoryId:0,
-          size:123
-      },
-      {
-          windowId:7,
-          moduleId:8,
-          categoryId:2,
-          size:1213
-      }
-  ])
+  let queryGpuDataByTs = sqlite.queryGpuDataByTs;
+  queryGpuDataByTs.mockResolvedValue([
+    {
+      windowId: 1,
+      moduleId: 2,
+      categoryId: 0,
+      size: 123,
+    },
+    {
+      windowId: 7,
+      moduleId: 8,
+      categoryId: 2,
+      size: 1213,
+    },
+  ]);
   it('TabPaneGpuClickSelectTest01', () => {
-    tabPaneGpuClickSelect.data = {
+    let data = {
       type: '',
       startTs: 1,
     };
-    expect(tabPaneGpuClickSelect.data).toBeTruthy();
+    expect(tabPaneGpuClickSelect.gpuClickData(data)).toBeUndefined();
+  });
+  it('TabPaneGpuClickSelectTest02', () => {
+    let tabPaneGpuClickSelects = new TabPaneGpuClickSelect();
+    tabPaneGpuClickSelects.gpuTbl = jest.fn(() => true);
+    expect(
+      tabPaneGpuClickSelects.sortByColumn({
+        sort: 0,
+      })
+    ).toBeUndefined();
   });
-    it('TabPaneGpuClickSelectTest02', () => {
-        let tabPaneGpuClickSelects = new TabPaneGpuClickSelect();
-        tabPaneGpuClickSelects.gpuTbl = jest.fn(()=>true)
-        expect(tabPaneGpuClickSelects.sortByColumn({
-            sort:0
-        })).toBeUndefined();
-    });
 });
diff --git a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuGL.test.ts b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuGL.test.ts
index 2cc4ee01ac0901d88d95ea8cd495ad5a8b022b32..344a45ef768ede33e8e52caaf792cdd59c939b6c 100644
--- a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuGL.test.ts
+++ b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuGL.test.ts
@@ -15,11 +15,12 @@
 //@ts-ignore
 import { TabPaneGpuGL } from '../../../../../../dist/trace/component/trace/sheet/gpu/TabPaneGpuGL.js';
 
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
+
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
 window.ResizeObserver =
diff --git a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.test.ts b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.test.ts
index c1cde77883db5e914f811ab33d84c9af90eb79c4..0d37d22fc29d3ff51049cccd3921552e83774e60 100644
--- a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.test.ts
+++ b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuTotalBoxSelect.test.ts
@@ -25,9 +25,9 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
+    unobserve: jest.fn(),
     disconnect: jest.fn(),
     observe: jest.fn(),
-    unobserve: jest.fn(),
   }));
 
 describe('TabPaneGpuTotalBoxSelect Test', () => {
diff --git a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuWindowBoxSelect.test.ts b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuWindowBoxSelect.test.ts
index ab1fae97be0cacb39614309d7e4b76124212dc9b..77eb930f31d34920ebec05c187b999d632e9000b 100644
--- a/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuWindowBoxSelect.test.ts
+++ b/ide/test/trace/component/trace/sheet/gpu/TabPaneGpuWindowBoxSelect.test.ts
@@ -12,14 +12,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 //@ts-ignore
 import { TabPaneGpuWindowBoxSelect } from '../../../../../../dist/trace/component/trace/sheet/gpu/TabPaneGpuWindowBoxSelect.js';
 
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
 window.ResizeObserver =
@@ -36,21 +36,21 @@ describe('TabPaneGpuWindowBoxSelect Test', () => {
   let queryGpuDataByRange = sqlite.queryGpuDataByRange;
   queryGpuDataByRange.mockResolvedValue([
     {
-      startTs: 23,
-      windowId: 1,
+      startTs: 34,
+      windowId: 53,
       moduleId: 2,
       categoryId: 0,
-      sumSize: 10,
+      sumSize: 20,
       avgSize: 1,
-      maxSize: 1,
+      maxSize: 11,
       minSize: 0,
     },
     {
-      startTs: 23,
+      startTs: 48,
       windowId: 1,
-      moduleId: 2,
+      moduleId: 28,
       categoryId: 0,
-      sumSize: 10,
+      sumSize: 51,
       avgSize: 1,
       maxSize: 1,
       minSize: 0,
diff --git a/ide/test/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.test.ts b/ide/test/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.test.ts
index 5d782d8ded4484601ba45c275f568ad4b7ba7968..909b6655d920a37c6d7198e4ffe62710df110725 100644
--- a/ide/test/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.test.ts
+++ b/ide/test/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.test.ts
@@ -15,518 +15,532 @@
 
 //@ts-ignore
 import { TabPanePerfAnalysis } from '../../../../../../dist/trace/component/trace/sheet/hiperf/TabPanePerfAnalysis.js';
-//@ts-ignore
-import {queryHiPerfProcessCount} from "../../../../../../dist/trace/database/SqlLite.js";
 import crypto from 'crypto';
+//@ts-ignore
+import { queryHiPerfProcessCount } from '../../../../../../dist/trace/database/SqlLite.js';
 
 // @ts-ignore
-window.ResizeObserver = window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
-
+window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 
 Object.defineProperty(global.self, 'crypto', {
-    value: {
-        getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
-    },
+  value: {
+    getRandomValues: (arr: string | any[]) => crypto.randomBytes(arr.length),
+  },
 });
 
 jest.mock('../../../../../../dist/base-ui/chart/pie/LitChartPie.js', () => {
-    return {};
+  return {};
 });
 
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
-    return {};
+  return {};
 });
 
 const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
+  return {};
 });
 
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
-    return {};
+  return {};
 });
 
-
 describe('TabPanePerfAnalysis Test', () => {
-    it('TabPanePerfAnalysisTest01 ', function () {
-       let tabPanePerfAnalysis = new TabPanePerfAnalysis()
-        expect(tabPanePerfAnalysis.clearData()).toBeUndefined();
+  it('TabPanePerfAnalysisTest01 ', function () {
+    let tabPanePerfAnalysis = new TabPanePerfAnalysis();
+    expect(tabPanePerfAnalysis.clearData()).toBeUndefined();
+  });
+  it('TabPanePerfAnalysisTest02 ', function () {
+    let itemClick = new CustomEvent('click', <CustomEventInit>{
+      detail: {
+        ...{},
+        data: {},
+      },
+      composed: true,
     });
-    it('TabPanePerfAnalysisTest02 ', function () {
-        let itemClick = new CustomEvent('click', <CustomEventInit>{
-            detail: {
-                ...{},
-                data: {},
-            },
-            composed: true,
-        });
-        document.body.innerHTML = `
+    document.body.innerHTML = `
         <tabpane-perf-analysis id="stc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('stc') as TabPanePerfAnalysis;
-        tabPanePerfAnalysis.tabName!.textContent = "Statistic By Thread Count";
-        tabPanePerfAnalysis.allProcessCount = {
-            "countFormat": "14.00s",
-            "percent": "100.00",
-            "count": 0,
-            "allCount": 13773,
-            "pid": ""
-        };
-        tabPanePerfAnalysis.pidData = [{
-            "tableName": "hiperf(28917)",
-            "pid": 28917,
-            "percent": "43.42",
-            "countFormat": "10.00s",
-            "count": 10387
-        },{
-            "tableName": "render_service(388)",
-            "pid": 388,
-            "percent": "17.99",
-            "countFormat": "4.00s",
-            "count": 4303
-        },{
-            "tableName": "hilogd(233)",
-            "pid": 233,
-            "percent": "6.76",
-            "countFormat": "2.00s",
-            "count": 1616
-        },{
-            "tableName": "power_host(374)",
-            "pid": 374,
-            "percent": "0.25",
-            "countFormat": "59.00ms",
-            "count": 59
-        }];
-        tabPanePerfAnalysis.tableProcess.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.back!.dispatchEvent(itemClick);
-        expect(tabPanePerfAnalysis.getBack()).toBeUndefined();
-    });
-    it('TabPanePerfAnalysisTest03', function () {
-        let itemClick = new CustomEvent('click', <CustomEventInit>{
-            detail: {
-                ...{},
-                data: {},
-            },
-            composed: true,
-        });
-        document.body.innerHTML = `
-        <tabpane-perf-analysis id="slc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
-        tabPanePerfAnalysis.tabName!.textContent = "Statistic By Library Count";
-        tabPanePerfAnalysis.allThreadCount = {
-            "countFormat": "24.00s",
-            "percent": "100.00",
-            "count": 0,
-            "allCount": 23922,
-            "pid": ""
-        };
-        tabPanePerfAnalysis.threadData = [{
-            "tableName": "kworker/0:0H-mmc_complete(28750)",
-            "pid": 28750,
-            "percent": "0.10",
-            "countFormat": "24.00ms",
-            "count": 24
-        },{
-            "tableName": "com.ohos.callui(1362)",
-            "pid": 1362,
-            "percent": "0.09",
-            "countFormat": "22.00ms",
-            "count": 22
-        }];
-        tabPanePerfAnalysis.currentSelection = {
-            leftNs: 14957548626,
-            recordStartNs: 30369799963682,
-            rightNs: 21422844177,
-            perfThread:[]
-        };
-        tabPanePerfAnalysis.perfTableThread.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.back!.dispatchEvent(itemClick);
-        expect(tabPanePerfAnalysis.getBack()).toBeUndefined();
+    let tabPanePerfAnalysis = document.getElementById('stc') as TabPanePerfAnalysis;
+    tabPanePerfAnalysis.tabName!.textContent = 'Statistic By Thread Count';
+    tabPanePerfAnalysis.allProcessCount = {
+      countFormat: '14.00s',
+      percent: '100.00',
+      count: 0,
+      allCount: 13773,
+      pid: '',
+    };
+    tabPanePerfAnalysis.pidData = [
+      {
+        tableName: 'hiperf(28917)',
+        pid: 28917,
+        percent: '43.42',
+        countFormat: '10.00s',
+        count: 10387,
+      },
+      {
+        tableName: 'render_service(388)',
+        pid: 388,
+        percent: '17.99',
+        countFormat: '4.00s',
+        count: 4303,
+      },
+      {
+        tableName: 'hilogd(233)',
+        pid: 233,
+        percent: '6.76',
+        countFormat: '2.00s',
+        count: 1616,
+      },
+      {
+        tableName: 'power_host(374)',
+        pid: 374,
+        percent: '0.25',
+        countFormat: '59.00ms',
+        count: 59,
+      },
+    ];
+    tabPanePerfAnalysis.perfTableProcess.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.back!.dispatchEvent(itemClick);
+    expect(tabPanePerfAnalysis.getBack()).toBeUndefined();
+  });
+  it('TabPanePerfAnalysisTest03', function () {
+    let itemClick = new CustomEvent('click', <CustomEventInit>{
+      detail: {
+        ...{},
+        data: {},
+      },
+      composed: true,
     });
+    document.body.innerHTML = `
+        <tabpane-perf-analysis id="library"></tabpane-perf-analysis>`;
+    let tabPanePerfAnalysis = document.getElementById('library') as TabPanePerfAnalysis;
+    tabPanePerfAnalysis.tabName!.textContent = 'Statistic By Library Count';
+    tabPanePerfAnalysis.allThreadCount = {
+      countFormat: '24.00s',
+      percent: '100.00',
+      count: 13,
+      allCount: 23922,
+      pid: 1,
+    };
+    tabPanePerfAnalysis.threadData = [
+      {
+        tableName: 'kworker/0:0H-mmc_complete(28750)',
+        pid: 287501,
+        percent: '0.10',
+        countFormat: '24.00ms',
+        count: 241,
+      },
+      {
+        tableName: 'com.ohos.callui(1362)',
+        pid: 13621,
+        percent: '0.09',
+        countFormat: '22.00ms',
+        count: 221,
+      },
+    ];
+    tabPanePerfAnalysis.currentSelection = {
+      leftNs: 14957548626,
+      recordStartNs: 30369799963682,
+      rightNs: 21422844177,
+      perfThread: [],
+    };
+    tabPanePerfAnalysis.perfTableThread.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.back!.dispatchEvent(itemClick);
+    expect(tabPanePerfAnalysis.getBack()).toBeUndefined();
+  });
 
-    it('TabPanePerfAnalysisTest04', function () {
-        let itemClick = new CustomEvent('click', <CustomEventInit>{
-            detail: {
-                ...{},
-                data: {},
-            },
-            composed: true,
-        });
-        document.body.innerHTML = `
-        <tabpane-perf-analysis id="slc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
-        tabPanePerfAnalysis.tabName!.textContent = "Statistic By Function Count";
-        tabPanePerfAnalysis.allLibCount = {
-            "countFormat": "28.00s",
-            "percent": "200.00",
-            "count": 1,
-            "allCount": 23966,
-            "pid": ""
-        };
-        tabPanePerfAnalysis.soData = [{
-            "tableName": "kworker/0:0H-mmc_complete(28750)",
-            "pid": 28750,
-            "percent": "0.10",
-            "countFormat": "24.00ms",
-            "count": 24
-        },{
-            "tableName": "com.ohos.callui(1362)",
-            "pid": 1362,
-            "percent": "0.09",
-            "countFormat": "22.00ms",
-            "count": 22
-        }];
-        tabPanePerfAnalysis.currentSelection = {
-            leftNs: 1495754,
-            recordStartNs: 30369799,
-            rightNs: 214228,
-            perfThread:[]
-        };
-        tabPanePerfAnalysis.tableSo.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.back!.dispatchEvent(itemClick);
-        expect(tabPanePerfAnalysis.getBack()).toBeUndefined();
+  it('TabPanePerfAnalysisTest04', function () {
+    let itemClick = new CustomEvent('click', <CustomEventInit>{
+      detail: {
+        ...{},
+        data: {},
+      },
+      composed: true,
     });
+    document.body.innerHTML = `<tabpane-perf-analysis id="function"></tabpane-perf-analysis>`;
+    let tabPanePerfAnalysis = document.getElementById('function') as TabPanePerfAnalysis;
+    tabPanePerfAnalysis.tabName!.textContent = 'Statistic By Function Count';
+    tabPanePerfAnalysis.allLibCount = {
+      countFormat: '28.00s',
+      percent: '200.00',
+      count: 12,
+      allCount: 23966,
+      pid: 2,
+    };
+    tabPanePerfAnalysis.soData = [
+      {
+        tableName: 'kworker/0:0H-mmc_complete(28750)',
+        pid: 287502,
+        percent: '0.10',
+        countFormat: '24.00ms',
+        count: 242,
+      },
+      {
+        tableName: 'com.ohos.callui(1362)',
+        pid: 13622,
+        percent: '0.09',
+        countFormat: '22.00ms',
+        count: 222,
+      },
+    ];
+    tabPanePerfAnalysis.currentSelection = {
+      leftNs: 1495754,
+      recordStartNs: 30369799,
+      rightNs: 214228,
+      perfThread: [],
+    };
+    tabPanePerfAnalysis.perfTableSo.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.back!.dispatchEvent(itemClick);
+    expect(tabPanePerfAnalysis.getBack()).toBeUndefined();
+  });
 
-    it('TabPanePerfAnalysisTest05', function () {
-        let tabPanePerfAnalysis = new TabPanePerfAnalysis()
-        expect(tabPanePerfAnalysis.sortByColumn({key: 'startTime'}, {sort: 1})).toBeUndefined();
-    });
-    it('TabPanePerfAnalysisTest06', function () {
-        let tabPanePerfAnalysis = new TabPanePerfAnalysis()
-        expect(tabPanePerfAnalysis.totalCountData(1)).toStrictEqual(
-            {"allCount": 1, "count": 0, "countFormat": "1.00ms", "percent": "100.00", "pid": ""}
-        );
-    });
-    it('TabPanePerfAnalysisTest07', function () {
-        let tabPanePerfAnalysis = new TabPanePerfAnalysis();
-        let res = [{
-            count:1,
-            length:1
-        }]
-        expect(tabPanePerfAnalysis.getPieChartData(res)).toStrictEqual(
-            [{"count": 1, "length": 1}]
-        );
+  it('TabPanePerfAnalysisTest05', function () {
+    let tabPanePerfAnalysis = new TabPanePerfAnalysis();
+    expect(tabPanePerfAnalysis.sortByColumn({ key: 'startTime' }, { sort: 1 })).toBeUndefined();
+  });
+  it('TabPanePerfAnalysisTest06', function () {
+    let tabPanePerfAnalysis = new TabPanePerfAnalysis();
+    expect(tabPanePerfAnalysis.totalCountData(1)).toStrictEqual({
+      allCount: 1,
+      count: 0,
+      countFormat: '1.00ms',
+      percent: '100.00',
+      pid: '',
     });
+  });
+  it('TabPanePerfAnalysisTest07', function () {
+    let tabPanePerfAnalysis = new TabPanePerfAnalysis();
+    let res = [
+      {
+        count: 1,
+        length: 1,
+      },
+    ];
+    expect(tabPanePerfAnalysis.getPerfPieChartData(res)).toStrictEqual([{ count: 1, length: 1 }]);
+  });
 
-    it('TabPanePerfAnalysisTest08', function () {
-        let tabPanePerfAnalysis = new TabPanePerfAnalysis()
-        let queryHiPerf = sqlit.queryHiPerfProcessCount;
-        queryHiPerf.mockResolvedValue([
-            {
-                "pid": 174,
-                "time": 11799859602,
-                "threadName": "sugov:0",
-                "tid": 174,
-                "id": 28347,
-                "callchain_id": 10972,
-                "processName": "sugov:0(174)"
-            },
-            {
-                "pid": 388,
-                "time": 11811453353,
-                "threadName": "render_service",
-                "tid": 871,
-                "id": 28355,
-                "callchain_id": 10974,
-                "processName": "render_service(388)"
-            },
-            {
-                "pid": 28826,
-                "time": 11820687229,
-                "threadName": "kworker/2:2-events_freezable",
-                "tid": 28826,
-                "id": 28361,
-                "callchain_id": 10976,
-                "processName": "kworker/2:2-events_freezable(28826)"
-            },
-            {
-                "pid": 28917,
-                "time": 11831719814,
-                "threadName": "hiperf",
-                "tid": 28922,
-                "id": 28372,
-                "callchain_id": 51,
-                "processName": "hiperf(28917)"
-            }
-        ])
-        let para = {
-            leftNs:11799195238,
-            rightNs:16844304830,
-            cpus: [1,2,3],
-            threads: [4,5,6],
-            processes: [7,8,9],
-            perfThread:[4,5,6],
-            perfProcess:[4,5,6]
-        }
-        tabPanePerfAnalysis.tableProcess.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.getHiperfProcess(para)
-        expect(tabPanePerfAnalysis.clearData()).toBeUndefined();
-    });
+  it('TabPanePerfAnalysisTest08', function () {
+    let tabPanePerfAnalysis = new TabPanePerfAnalysis();
+    let queryHiPerf = sqlit.queryHiPerfProcessCount;
+    queryHiPerf.mockResolvedValue([
+      {
+        pid: 174,
+        time: 11799859602,
+        threadName: 'sugov:0',
+        tid: 174,
+        id: 28347,
+        callchain_id: 10972,
+        processName: 'sugov:0(174)',
+      },
+      {
+        pid: 388,
+        time: 11811453353,
+        threadName: 'render_service',
+        tid: 871,
+        id: 28355,
+        callchain_id: 10974,
+        processName: 'render_service(388)',
+      },
+      {
+        pid: 28826,
+        time: 11820687229,
+        threadName: 'kworker/2:2-events_freezable',
+        tid: 28826,
+        id: 28361,
+        callchain_id: 10976,
+        processName: 'kworker/2:2-events_freezable(28826)',
+      },
+      {
+        pid: 28917,
+        time: 11831719814,
+        threadName: 'hiperf',
+        tid: 28922,
+        id: 28372,
+        callchain_id: 51,
+        processName: 'hiperf(28917)',
+      },
+    ]);
+    let para = {
+      leftNs: 11799195238,
+      rightNs: 16844304830,
+      cpus: [1, 2, 3],
+      threads: [4, 5, 6],
+      processes: [7, 8, 9],
+      perfThread: [4, 5, 6],
+      perfProcess: [4, 5, 6],
+    };
+    tabPanePerfAnalysis.perfTableProcess.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.getHiperfProcess(para);
+    expect(tabPanePerfAnalysis.clearData()).toBeUndefined();
+  });
 
-    it('TabPanePerfAnalysisTest09', function () {
-        let tabPanePerfAnalysis = new TabPanePerfAnalysis()
-        let para = {
-            count: 5,
-            tid: 1,
-            pid: 2,
-            libId: 3
-        }
-        let processArr = [
-            {
-                "pid": 233,
-                "time": 7978660718,
-                "threadName": "hilogd",
-                "tid": 235,
-                "id": 19165,
-                "callchain_id": 7492
-            },
-            {
-                "pid": 233,
-                "time": 8092040146,
-                "threadName": "hilogd",
-                "tid": 235,
-                "id": 19408,
-                "callchain_id": 7578
-            },
-            {
-                "pid": 233,
-                "time": 8117205732,
-                "threadName": "hilogd",
-                "tid": 235,
-                "id": 19496,
-                "callchain_id": 7618
-            }
-        ];
-        tabPanePerfAnalysis.processData = processArr;
-        tabPanePerfAnalysis.tableFunction.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.getHiperfFunction(para, null);
-        expect(tabPanePerfAnalysis.clearData()).toBeUndefined();
-    });
+  it('TabPanePerfAnalysisTest09', function () {
+    let tabPanePerfAnalysis = new TabPanePerfAnalysis();
+    let para = {
+      count: 5,
+      tid: 1,
+      pid: 2,
+      libId: 3,
+    };
+    let processArr = [
+      {
+        pid: 233,
+        time: 7978660718,
+        threadName: 'hilogd',
+        tid: 235,
+        id: 19165,
+        callchain_id: 7492,
+      },
+      {
+        pid: 233,
+        time: 8092040146,
+        threadName: 'hilogd',
+        tid: 235,
+        id: 19408,
+        callchain_id: 7578,
+      },
+      {
+        pid: 233,
+        time: 8117205732,
+        threadName: 'hilogd',
+        tid: 235,
+        id: 19496,
+        callchain_id: 7618,
+      },
+    ];
+    tabPanePerfAnalysis.processData = processArr;
+    tabPanePerfAnalysis.tableFunction.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.getHiperfFunction(para, null);
+    expect(tabPanePerfAnalysis.clearData()).toBeUndefined();
+  });
 
-    it('TabPanePerfAnalysisTest10', function () {
-        document.body.innerHTML = `
+  it('TabPanePerfAnalysisTest10', function () {
+    document.body.innerHTML = `
         <tabpane-perf-analysis id="slc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
-        tabPanePerfAnalysis.currentLevel = 0;
-        tabPanePerfAnalysis.currentLevelData = [
-            {
-                "pid": 28917,
-                "tid": 28922,
-                "percent": "93.37",
-                "countFormat": "3.00s",
-                "count": 3339,
-                "tableName": "ld-musl-aarch64.so.1",
-                "libId": 10,
-                "isHover": false
-            },
-            {
-                "pid": 28917,
-                "tid": 28922,
-                "percent": "0.73",
-                "countFormat": "26.00ms",
-                "count": 26,
-                "tableName": "libc++.so",
-                "libId": 6,
-                "isHover": false
-            }
-        ];
-        tabPanePerfAnalysis.allProcessCount = {
-            "countFormat": "13.00s",
-            "percent": "100.00",
-            "count": 0,
-            "allCount": 13186,
-            "pid": "",
-            "isHover": false
-        };
-        tabPanePerfAnalysis.allThreadCount = {
-            "countFormat": "6.00s",
-            "percent": "100.00",
-            "count": 0,
-            "allCount": 5662,
-            "pid": "",
-            "isHover": false
-        };
-        tabPanePerfAnalysis.allLibCount = {
-            "countFormat": "5.00s",
-            "percent": "100.00",
-            "count": 0,
-            "allCount": 4840,
-            "pid": "",
-            "isHover": false
-        };
-        tabPanePerfAnalysis.allSymbolCount = {
-            "countFormat": "4.00s",
-            "percent": "100.00",
-            "count": 0,
-            "allCount": 4489,
-            "pid": "",
-            "isHover": false
-        };
-        tabPanePerfAnalysis.sortByColumn("tableName", 0);
-        tabPanePerfAnalysis.sortByColumn("tableName", 1);
-        tabPanePerfAnalysis.sortByColumn("countFormat", 2);
-        tabPanePerfAnalysis.sortByColumn("percent", 3);
-        tabPanePerfAnalysis.currentLevel = 1;
-        tabPanePerfAnalysis.sortByColumn("tableName", 0);
-        tabPanePerfAnalysis.sortByColumn("tableName", 1);
-        tabPanePerfAnalysis.sortByColumn("countFormat", 2);
-        tabPanePerfAnalysis.sortByColumn("percent", 3);
-        tabPanePerfAnalysis.currentLevel = 2;
-        tabPanePerfAnalysis.sortByColumn("tableName", 0);
-        tabPanePerfAnalysis.sortByColumn("tableName", 1);
-        tabPanePerfAnalysis.sortByColumn("countFormat", 2);
-        tabPanePerfAnalysis.sortByColumn("percent", 3);
-        tabPanePerfAnalysis.currentLevel = 3;
-        tabPanePerfAnalysis.sortByColumn("tableName", 0);
-        tabPanePerfAnalysis.sortByColumn("tableName", 1);
-        tabPanePerfAnalysis.sortByColumn("countFormat", 2);
-        tabPanePerfAnalysis.sortByColumn("percent", 3);
-        expect(tabPanePerfAnalysis).toBeTruthy();
-    });
+    let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
+    tabPanePerfAnalysis.currentLevel = 0;
+    tabPanePerfAnalysis.currentLevelData = [
+      {
+        pid: 28917,
+        tid: 28922,
+        percent: '93.37',
+        countFormat: '3.00s',
+        count: 3339,
+        tableName: 'ld-musl-aarch64.so.1',
+        libId: 10,
+        isHover: false,
+      },
+      {
+        pid: 28917,
+        tid: 28922,
+        percent: '0.73',
+        countFormat: '26.00ms',
+        count: 26,
+        tableName: 'libc++.so',
+        libId: 6,
+        isHover: false,
+      },
+    ];
+    tabPanePerfAnalysis.allProcessCount = {
+      countFormat: '13.00s',
+      percent: '100.00',
+      count: 0,
+      allCount: 13186,
+      pid: '',
+      isHover: false,
+    };
+    tabPanePerfAnalysis.allThreadCount = {
+      countFormat: '6.00s',
+      percent: '100.00',
+      count: 0,
+      allCount: 5662,
+      pid: '',
+      isHover: false,
+    };
+    tabPanePerfAnalysis.allLibCount = {
+      countFormat: '5.00s',
+      percent: '100.00',
+      count: 0,
+      allCount: 4840,
+      pid: '',
+      isHover: false,
+    };
+    tabPanePerfAnalysis.allSymbolCount = {
+      countFormat: '4.00s',
+      percent: '100.00',
+      count: 0,
+      allCount: 4489,
+      pid: '',
+      isHover: false,
+    };
+    tabPanePerfAnalysis.sortByColumn('tableName', 0);
+    tabPanePerfAnalysis.sortByColumn('tableName', 1);
+    tabPanePerfAnalysis.sortByColumn('countFormat', 2);
+    tabPanePerfAnalysis.sortByColumn('percent', 3);
+    tabPanePerfAnalysis.currentLevel = 1;
+    tabPanePerfAnalysis.sortByColumn('tableName', 0);
+    tabPanePerfAnalysis.sortByColumn('tableName', 1);
+    tabPanePerfAnalysis.sortByColumn('countFormat', 2);
+    tabPanePerfAnalysis.sortByColumn('percent', 3);
+    tabPanePerfAnalysis.currentLevel = 2;
+    tabPanePerfAnalysis.sortByColumn('tableName', 0);
+    tabPanePerfAnalysis.sortByColumn('tableName', 1);
+    tabPanePerfAnalysis.sortByColumn('countFormat', 2);
+    tabPanePerfAnalysis.sortByColumn('percent', 3);
+    tabPanePerfAnalysis.currentLevel = 3;
+    tabPanePerfAnalysis.sortByColumn('tableName', 0);
+    tabPanePerfAnalysis.sortByColumn('tableName', 1);
+    tabPanePerfAnalysis.sortByColumn('countFormat', 2);
+    tabPanePerfAnalysis.sortByColumn('percent', 3);
+    expect(tabPanePerfAnalysis).toBeTruthy();
+  });
 
-    it('TabPanePerfAnalysisTest11', function () {
-        document.body.innerHTML = `
+  it('TabPanePerfAnalysisTest11', function () {
+    document.body.innerHTML = `
         <tabpane-perf-analysis id="slc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
-        let item = {
-            "tableName": "hiperf(28917)",
-            "pid": 28917,
-            "percent": "43.53",
-            "countFormat": "8.00s",
-            "count": 8460,
-            "isHover": true
-        };
-        let val = {
-            perfThread: [],
-            perfProcess: [],
-        }
-        tabPanePerfAnalysis.processData = [
-            {
-                "sampleId": 0,
-                "tid": 12,
-                "count": 1,
-                "threadState": "Running",
-                "pid": 12,
-                "eventCount": 14,
-                "threadName": "rcu_sched",
-                "processName": "rcu_sched",
-                "libId": 106,
-                "libName": "[kernel.kallsyms]",
-                "symbolId": 148,
-                "symbolName": "perf_trace_sched_wakeup_template"
-            },
-            {
-                "sampleId": 0,
-                "tid": 193,
-                "count": 1,
-                "threadState": "Running",
-                "pid": 193,
-                "eventCount": 14,
-                "threadName": "irq/31-rga",
-                "processName": "irq/31-rga",
-                "libId": 106,
-                "libName": "[kernel.kallsyms]",
-                "symbolId": 148,
-                "symbolName": "perf_trace_sched_wakeup_template"
-            }];
-        tabPanePerfAnalysis.perfTableThread.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.getHiperfThread(item, val);
-        expect(tabPanePerfAnalysis).toBeTruthy();
-    });
-    it('TabPanePerfAnalysisTest12', function () {
-        document.body.innerHTML = `
+    let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
+    let item = {
+      tableName: 'hiperf(28917)',
+      pid: 28917,
+      percent: '43.53',
+      countFormat: '8.00s',
+      count: 8460,
+      isHover: true,
+    };
+    let val = {
+      perfThread: [],
+      perfProcess: [],
+    };
+    tabPanePerfAnalysis.processData = [
+      {
+        sampleId: 0,
+        tid: 12,
+        count: 1,
+        threadState: 'Running',
+        pid: 12,
+        eventCount: 14,
+        threadName: 'rcu_sched',
+        processName: 'rcu_sched',
+        libId: 106,
+        libName: '[kernel.kallsyms]',
+        symbolId: 148,
+        symbolName: 'perf_trace_sched_wakeup_template',
+      },
+      {
+        sampleId: 0,
+        tid: 193,
+        count: 1,
+        threadState: 'Running',
+        pid: 193,
+        eventCount: 14,
+        threadName: 'irq/31-rga',
+        processName: 'irq/31-rga',
+        libId: 106,
+        libName: '[kernel.kallsyms]',
+        symbolId: 148,
+        symbolName: 'perf_trace_sched_wakeup_template',
+      },
+    ];
+    tabPanePerfAnalysis.perfTableThread.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.getHiperfThread(item, val);
+    expect(tabPanePerfAnalysis).toBeTruthy();
+  });
+  it('TabPanePerfAnalysisTest12', function () {
+    document.body.innerHTML = `
         <tabpane-perf-analysis id="slc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
-        let item = {
-            "tableName": "hiperf(28917)",
-            "pid": 28917,
-            "percent": "43.53",
-            "countFormat": "8.00s",
-            "count": 8460,
-            "isHover": true
-        };
-        let val = {
-            perfThread: [],
-            perfProcess: [],
-        }
-        tabPanePerfAnalysis.processData = [
-            {
-                "sampleId": 0,
-                "tid": 12,
-                "count": 1,
-                "threadState": "Running",
-                "pid": 12,
-                "eventCount": 14,
-                "threadName": "rcu_sched",
-                "processName": "rcu_sched",
-                "libId": 106,
-                "libName": "[kernel.kallsyms]",
-                "symbolId": 148,
-                "symbolName": "perf_trace_sched_wakeup_template"
-            },
-            {
-                "sampleId": 0,
-                "tid": 193,
-                "count": 1,
-                "threadState": "Running",
-                "pid": 193,
-                "eventCount": 14,
-                "threadName": "irq/31-rga",
-                "processName": "irq/31-rga",
-                "libId": 106,
-                "libName": "[kernel.kallsyms]",
-                "symbolId": 148,
-                "symbolName": "perf_trace_sched_wakeup_template"
-            }];
-        tabPanePerfAnalysis.tableSo.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.getHiperfSo(item, val);
-        expect(tabPanePerfAnalysis).toBeTruthy();
-    });
-    it('TabPanePerfAnalysisTest13', function () {
-        document.body.innerHTML = `
+    let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
+    let item = {
+      tableName: 'hiperf(28917)',
+      pid: 28917,
+      percent: '43.53',
+      countFormat: '8.00s',
+      count: 8460,
+      isHover: true,
+    };
+    let val = {
+      perfThread: [],
+      perfProcess: [],
+    };
+    tabPanePerfAnalysis.processData = [
+      {
+        sampleId: 0,
+        tid: 12,
+        count: 1,
+        threadState: 'Running',
+        pid: 12,
+        eventCount: 14,
+        threadName: 'rcu_sched',
+        processName: 'rcu_sched',
+        libId: 106,
+        libName: '[kernel.kallsyms]',
+        symbolId: 148,
+        symbolName: 'perf_trace_sched_wakeup_template',
+      },
+      {
+        sampleId: 0,
+        tid: 193,
+        count: 1,
+        threadState: 'Running',
+        pid: 193,
+        eventCount: 14,
+        threadName: 'irq/31-rga',
+        processName: 'irq/31-rga',
+        libId: 106,
+        libName: '[kernel.kallsyms]',
+        symbolId: 148,
+        symbolName: 'perf_trace_sched_wakeup_template',
+      },
+    ];
+    tabPanePerfAnalysis.perfTableSo.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.getHiperfSo(item, val);
+    expect(tabPanePerfAnalysis).toBeTruthy();
+  });
+  it('TabPanePerfAnalysisTest13', function () {
+    document.body.innerHTML = `
         <tabpane-perf-analysis id="slc"></tabpane-perf-analysis>`;
-        let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
-        let val = {
-            perfThread: [],
-            perfProcess: [],
-        }
-        tabPanePerfAnalysis.processData = [
-            {
-                "sampleId": 0,
-                "tid": 12,
-                "count": 1,
-                "threadState": "Running",
-                "pid": 12,
-                "eventCount": 14,
-                "threadName": "rcu_sched",
-                "processName": "rcu_sched",
-                "libId": 106,
-                "libName": "[kernel.kallsyms]",
-                "symbolId": 148,
-                "symbolName": "perf_trace_sched_wakeup_template"
-            },
-            {
-                "sampleId": 0,
-                "tid": 193,
-                "count": 1,
-                "threadState": "Running",
-                "pid": 193,
-                "eventCount": 14,
-                "threadName": "irq/31-rga",
-                "processName": "irq/31-rga",
-                "libId": 106,
-                "libName": "[kernel.kallsyms]",
-                "symbolId": 148,
-                "symbolName": "perf_trace_sched_wakeup_template"
-            }];
-        tabPanePerfAnalysis.tableSo.reMeauseHeight = jest.fn(() => true);
-        tabPanePerfAnalysis.data = jest.fn(() => true);
-        expect(tabPanePerfAnalysis).toBeTruthy();
-    });
-})
\ No newline at end of file
+    let tabPanePerfAnalysis = document.getElementById('slc') as TabPanePerfAnalysis;
+    let val = {
+      perfThread: [],
+      perfProcess: [],
+    };
+    tabPanePerfAnalysis.processData = [
+      {
+        sampleId: 0,
+        tid: 12,
+        count: 1,
+        threadState: 'Running',
+        pid: 12,
+        eventCount: 14,
+        threadName: 'rcu_sched',
+        processName: 'rcu_sched',
+        libId: 106,
+        libName: '[kernel.kallsyms]',
+        symbolId: 148,
+        symbolName: 'perf_trace_sched_wakeup_template',
+      },
+      {
+        sampleId: 0,
+        tid: 193,
+        count: 1,
+        threadState: 'Running',
+        pid: 193,
+        eventCount: 14,
+        threadName: 'irq/31-rga',
+        processName: 'irq/31-rga',
+        libId: 106,
+        libName: '[kernel.kallsyms]',
+        symbolId: 148,
+        symbolName: 'perf_trace_sched_wakeup_template',
+      },
+    ];
+    tabPanePerfAnalysis.perfTableSo.reMeauseHeight = jest.fn(() => true);
+    tabPanePerfAnalysis.data = jest.fn(() => true);
+    expect(tabPanePerfAnalysis).toBeTruthy();
+  });
+});
diff --git a/ide/test/trace/component/trace/sheet/hiperf/TabPerfBottomUp.test.ts b/ide/test/trace/component/trace/sheet/hiperf/TabPerfBottomUp.test.ts
index c658ffd89671584c572ecfd6cae01767ea57fe44..dae6ba3792ada0862eb9b33942375c8686cb83be 100644
--- a/ide/test/trace/component/trace/sheet/hiperf/TabPerfBottomUp.test.ts
+++ b/ide/test/trace/component/trace/sheet/hiperf/TabPerfBottomUp.test.ts
@@ -16,34 +16,33 @@
 //@ts-ignore
 import { TabpanePerfBottomUp } from '../../../../../../dist/trace/component/trace/sheet/hiperf/TabPerfBottomUp.js';
 //@ts-ignore
-import {showButtonMenu} from "../../../../../../dist/trace/component/trace/sheet/SheetUtils.js";
+import { showButtonMenu } from '../../../../../../dist/trace/component/trace/sheet/SheetUtils.js';
 
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
-    return {}
+  return {};
 });
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
-    return {
-        snapshotDataSource: () => {},
-        removeAttribute: () => {},
-
-    };
+  return {
+    snapshotDataSource: () => {},
+    removeAttribute: () => {},
+  };
 });
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 window.ResizeObserver =
-    window.ResizeObserver ||
-    jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-    }));
+  window.ResizeObserver ||
+  jest.fn().mockImplementation(() => ({
+    disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+  }));
 describe('TabPanePerfBottomUp Test', () => {
-    let tabPanePerfBottomUp = new TabpanePerfBottomUp();
-    let data = {
-        leftNs: 1222,
-        rightNs: 5286,
-    };
-    it('TabPanePerfBottomUp02 ', function () {
-        tabPanePerfBottomUp.data = data
-        expect(tabPanePerfBottomUp.data).toBeUndefined();
-    });
-})
\ No newline at end of file
+  let tabPanePerfBottomUp = new TabpanePerfBottomUp();
+  let data = {
+    leftNs: 1222,
+    rightNs: 5286,
+  };
+  it('TabPanePerfBottomUp02 ', function () {
+    tabPanePerfBottomUp.data = data;
+    expect(tabPanePerfBottomUp.data).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/component/trace/sheet/hiperf/TabPerfProfile.test.ts b/ide/test/trace/component/trace/sheet/hiperf/TabPerfProfile.test.ts
index 77dfd36212a5f5a341fd1be73436ad32f0167d92..45029d5c9b8b1a07b6ad90bed88a8ff05faac5c9 100644
--- a/ide/test/trace/component/trace/sheet/hiperf/TabPerfProfile.test.ts
+++ b/ide/test/trace/component/trace/sheet/hiperf/TabPerfProfile.test.ts
@@ -16,12 +16,12 @@
 //@ts-ignore
 import { TabpanePerfProfile } from '../../../../../../dist/trace/component/trace/sheet/hiperf/TabPerfProfile.js';
 //@ts-ignore
-import {showButtonMenu} from "../../../../../../dist/trace/component/trace/sheet/SheetUtils.js";
+import { showButtonMenu } from '../../../../../../dist/trace/component/trace/sheet/SheetUtils.js';
 
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
-  return {}
+  return {};
 });
-
+// @ts-ignore
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
@@ -92,14 +92,14 @@ describe('TabPerfProfile Test', () => {
   it('TabpanePerfProfileTest09 ', function () {
     tabpanePerfProfile.sortTree = jest.fn(() => true);
     tabpanePerfProfile.sortTree.sort = jest.fn(() => true);
-    tabpanePerfProfile.perfProfilerTbl  = jest.fn(() => true);
-    tabpanePerfProfile.perfProfilerTbl.recycleDataSource  = jest.fn(() => true);
+    tabpanePerfProfile.perfProfilerTbl = jest.fn(() => true);
+    tabpanePerfProfile.perfProfilerTbl.recycleDataSource = jest.fn(() => true);
     expect(tabpanePerfProfile.setPerfProfilerLeftTableData([])).toBeUndefined();
   });
   it('TabpanePerfProfileTest10 ', function () {
     tabpanePerfProfile.getDataByWorker = jest.fn();
-    tabpanePerfProfile.perfProfilerTbl  = jest.fn(() => true);
-    tabpanePerfProfile.perfProfilerTbl.style  = jest.fn(() => true);
+    tabpanePerfProfile.perfProfilerTbl = jest.fn(() => true);
+    tabpanePerfProfile.perfProfilerTbl.style = jest.fn(() => true);
     tabpanePerfProfile.data = [
       {
         leftNs: 2565,
diff --git a/ide/test/trace/component/trace/sheet/hiperf/TabPerfSampleList.test.ts b/ide/test/trace/component/trace/sheet/hiperf/TabPerfSampleList.test.ts
index 45ddef26043bcd5f7c2fa8fbabe97da5633ee415..76453874b71a6b6710de18c40e227a9048a63293 100644
--- a/ide/test/trace/component/trace/sheet/hiperf/TabPerfSampleList.test.ts
+++ b/ide/test/trace/component/trace/sheet/hiperf/TabPerfSampleList.test.ts
@@ -16,20 +16,15 @@
 //@ts-ignore
 import { TabPerfSampleList } from '../../../../../../dist/trace/component/trace/sheet/hiperf/TabPerfSampleList.js';
 import '../../../../../../dist/trace/component/trace/sheet/hiperf/TabPerfSampleList.js';
-
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
-  return {}
+  return {};
 });
-
-window.ResizeObserver =
-  window.ResizeObserver ||
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
+    unobserve: jest.fn(), disconnect: jest.fn(), observe: jest.fn(),
   }));
 
 describe('TabPerfSampleList Test', () => {
diff --git a/ide/test/trace/component/trace/sheet/irq/TabPaneIrqCounter.test.ts b/ide/test/trace/component/trace/sheet/irq/TabPaneIrqCounter.test.ts
index f3156f64ecd2777206850c09e6f00f830f71341c..dfb86e7e256cc50c7341db01b6aba3914ddfeb95 100644
--- a/ide/test/trace/component/trace/sheet/irq/TabPaneIrqCounter.test.ts
+++ b/ide/test/trace/component/trace/sheet/irq/TabPaneIrqCounter.test.ts
@@ -16,11 +16,10 @@
 // @ts-ignore
 import { TabPaneIrqCounter } from '../../../../../../dist/trace/component/trace/sheet/irq/TabPaneIrqCounter.js';
 // @ts-ignore
-import { IrqStruct } from '../../../../../../dist/trace/database/ui-worker/ProcedureWorkerIrq.js';
-
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
+import { IrqStruct } from '../../../../../../dist/trace/database/ui-worker/ProcedureWorkerIrq.js';
 
 window.ResizeObserver =
   window.ResizeObserver ||
diff --git a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.test.ts b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.test.ts
index 9975487901fe06deb84c6257a51ab8aab854e590..974fb4fe86b7c1b89280f62c3636d2c19d0ac0fc 100644
--- a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.test.ts
+++ b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMCallTree.test.ts
@@ -21,25 +21,22 @@ import { TabPaneFilter } from '../../../../../../dist/trace/component/trace/shee
 import { FrameChart } from '../../../../../../dist/trace/component/chart/FrameChart.js';
 // @ts-ignore
 import { DisassemblingWindow } from '../../../../../../dist/trace/component/DisassemblingWindow.js';
-
-const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
+const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
 
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
     observe: jest.fn(),
     unobserve: jest.fn(),
+    disconnect: jest.fn(),
   }));
 
 describe('TabPaneNMCallTree Test', () => {
-  document.body.innerHTML = '<div><tabpane-nm-calltree id="ddd"></tabpane-nm-calltree></div>';
-  let tabPaneNMCallTree = document.querySelector<TabPaneNMCallTree>('#ddd');
+  document.body.innerHTML = '<div><tabpane-nm-calltree id="tree"></tabpane-nm-calltree></div>';
+  let tabPaneNMCallTree = document.querySelector<TabPaneNMCallTree>('#tree');
   let dom = new FrameChart();
   dom.setAttribute('id', 'framechart');
   tabPaneNMCallTree.frameChart = dom;
@@ -72,96 +69,6 @@ describe('TabPaneNMCallTree Test', () => {
 
   it('TabPaneNMCallTreeTest03', function () {});
 
-  it('TabPaneNMCallTreeTest04', function () {
-    expect(tabPaneNMCallTree.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            padding: 10px 10px 0 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        .show{
-            display: flex;
-            flex: 1;
-        }
-        #nm-call-tree-filter {
-            border: solid rgb(216,216,216) 1px;
-            float: left;
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-        }
-        selector{
-            display: none;
-        }
-        .nm-call-tree-progress{
-            bottom: 33px;
-            position: absolute;
-            height: 1px;
-            left: 0;
-            right: 0;
-        }
-        .nm-call-tree-loading{
-            bottom: 0;
-            position: absolute;
-            left: 0;
-            right: 0;
-            width:100%;
-            background:transparent;
-            z-index: 999999;
-        }
-    </style>
-    <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 class="nm-call-tree-column" width="60%" title="Symbol Name" data-index="symbolName" key="symbolName"  align="flex-start">
-                </lit-table-column>
-                <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 class="nm-call-tree-column" width="1fr" title="%" data-index="heapPercent" key="heapPercent" align="flex-start"  order>
-                </lit-table-column>
-                <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 class="nm-call-tree-column" width="1fr" title="%" data-index="countPercent" key="countPercent" align="flex-start" order>
-                </lit-table-column>
-                <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 ">
-                        <div v-if=" type == - 1 "></div>
-                    </template>
-                </lit-table-column>
-            </lit-table>
-            
-        </div>
-        <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 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 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="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 nm-call-tree-loading"></div>
-    </div>"
-`);
-  });
   it('TabPaneNMCallTreeTest05', function () {
     let hook = {
       id: '1',
diff --git a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.test.ts b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.test.ts
index 0074f02394febac065362770d8d3a9b1e9fa962f..0d1f4ed0a934f2c612e0983fe7e5ae3c6f6274cf 100644
--- a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.test.ts
+++ b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMSampleList.test.ts
@@ -22,20 +22,18 @@ import { NativeHookSampleQueryInfo, NativeHookSamplerInfo } from '../../../../..
 // @ts-ignore
 import { NativeMemory } from '../../../../../../dist/trace/bean/NativeHook.js';
 // @ts-ignore
-import { queryAllHookData } from '../../../../../../dist/trace/database/SqlLite.js';
-const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
-
-window.ResizeObserver =
-  window.ResizeObserver ||
+const sqlit = require('../../../../../../dist/trace/database/SqlLite.js');
+import { queryAllHookData } from '../../../../../../dist/trace/database/SqlLite.js';
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
+// @ts-ignore
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
+    unobserve: jest.fn(),
     disconnect: jest.fn(),
     observe: jest.fn(),
-    unobserve: jest.fn(),
   }));
 describe('TabPaneNMSampleList Test', () => {
   document.body.innerHTML = '<tabpane-native-sample id="ddt"></tabpane-native-sample>';
@@ -44,18 +42,18 @@ describe('TabPaneNMSampleList Test', () => {
   TabPaneNMSampleList.source = [
     {
       current: '',
-      currentSize: 0,
-      startTs: 0,
-      heapSize: 0,
-      snapshot: '',
+      currentSize: 101,
+      startTs: 110,
+      heapSize: 10,
+      snapshot: 'snapshot01',
       growth: '',
-      total: 0,
+      total: 980,
       totalGrowth: '',
-      existing: 0,
+      existing: 7810,
       children: [],
       tempList: [],
       timestamp: '',
-      eventId: -1,
+      eventId: 320,
     },
   ];
   TabPaneNMSampleList.filterSelect = '0';
@@ -63,13 +61,13 @@ describe('TabPaneNMSampleList Test', () => {
   tabPaneNMSampleList.currentSelection = jest.fn(() => true);
   let dat = {
     cpus: [],
-    threadIds: [],
-    trackIds: [],
-    funTids: [],
-    heapIds: [],
+    threadIds: [1,2,3],
+    trackIds: [23,56,77],
+    funTids: [675,75],
+    heapIds: [11,223],
     nativeMemory: [],
-    leftNs: 0,
-    rightNs: 0,
+    leftNs: 12222,
+    rightNs: 654233,
     hasFps: false,
     statisticsSelectData: undefined,
   };
@@ -97,36 +95,36 @@ describe('TabPaneNMSampleList Test', () => {
   let samplerInfo = [
     {
       current: '',
-      currentSize: 0,
-      startTs: 0,
-      heapSize: 0,
-      snapshot: '',
+      currentSize: 102,
+      startTs: 540,
+      heapSize: 23,
+      snapshot: 'snapshot02',
       growth: '',
-      total: 0,
+      total: 332,
       totalGrowth: '',
-      existing: 0,
+      existing: 60,
       children: [],
       tempList: [],
       timestamp: '',
-      eventId: -1,
-      threadId: 0,
+      eventId: 55,
+      threadId: 33,
       threadName: '',
     },
     {
       current: '',
-      currentSize: 0,
-      startTs: 0,
-      heapSize: 0,
-      snapshot: '',
+      currentSize: 103,
+      startTs: 369,
+      heapSize: 98,
+      snapshot: 'snapshot03',
       growth: '',
-      total: 0,
+      total: 9855,
       totalGrowth: '',
-      existing: 0,
+      existing: 10,
       children: [],
       tempList: [],
       timestamp: '',
-      eventId: -1,
-      threadId: 0,
+      eventId: 132,
+      threadId: 130,
       threadName: '',
     },
   ];
@@ -148,28 +146,28 @@ describe('TabPaneNMSampleList Test', () => {
   it('TabPaneNMSampleListTest04', function () {
     let snapshot = {
       current: '',
-      currentSize: 0,
-      startTs: 0,
-      heapSize: 0,
-      snapshot: '',
+      currentSize: 104,
+      startTs: 960,
+      heapSize: 99,
+      snapshot: 'snapshot04',
       growth: '',
-      total: 0,
+      total: 990,
       totalGrowth: '',
-      existing: 0,
+      existing: 634,
       children: [],
       tempList: [],
       timestamp: '',
-      eventId: -1,
+      eventId: 22,
     };
 
     let snapshotLeft = {
-      current: '',
+      current: 'left',
       currentSize: 0,
-      startTs: 0,
-      heapSize: 0,
+      startTs: 4,
+      heapSize: 40,
       snapshot: '',
       growth: '',
-      total: 0,
+      total: 400,
       totalGrowth: '',
       existing: 0,
       children: [snapshot],
@@ -179,13 +177,13 @@ describe('TabPaneNMSampleList Test', () => {
     };
 
     let snapshotRight = {
-      current: '',
+      current: 'right',
       currentSize: 0,
-      startTs: 0,
-      heapSize: 0,
+      startTs: 5,
+      heapSize: 50,
       snapshot: '',
       growth: '',
-      total: 0,
+      total: 500,
       totalGrowth: '',
       existing: 0,
       children: [snapshot],
@@ -204,51 +202,6 @@ describe('TabPaneNMSampleList Test', () => {
     expect(TabPaneNMSampleList.initTypes()).toBeUndefined();
   });
 
-  it('TabPaneNMSampleListTest05', function () {
-    expect(tabPaneNMSampleList.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .nm-sample-tbl {
-            height: auto;
-        }
-        :host{
-            padding: 10px 10px 0 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        </style>
-        <lit-slicer style="width:100%">
-        <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 class="nm-sample-column" width="1fr" title="Timestamp" data-index="timestamp" key="timestamp"  align="flex-start"  >
-                </lit-table-column>
-                <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 class="nm-sample-column" width="1fr" title="Total Growth" data-index="totalGrowth" key="totalGrowth"  align="flex-start"  >
-                </lit-table-column>
-                <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 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 class="nm-sample-column" width="1fr" title="" data-index="title" key="title"  align="flex-start">
-            </lit-table-column>
-        </lit-table>
-        </lit-slicer>
-        "
-`);
-  });
 
   it('TabPaneNMSampleListTest09', function () {
     let rootSample = new NativeHookSamplerInfo();
@@ -287,18 +240,18 @@ describe('TabPaneNMSampleList Test', () => {
       {
         current: '',
         currentSize: 0,
-        startTs: 0,
-        heapSize: 0,
+        startTs: 1,
+        heapSize: 10,
         snapshot: '',
         growth: '',
-        total: 0,
+        total: 100,
         totalGrowth: '',
         existing: 0,
         children: samplerInfo,
         tempList: samplerInfo,
         timestamp: '',
         eventId: -1,
-        threadId: 0,
+        threadId: 1,
         threadName: '',
       },
     ];
@@ -311,18 +264,18 @@ describe('TabPaneNMSampleList Test', () => {
       {
         current: '',
         currentSize: 0,
-        startTs: 0,
-        heapSize: 0,
+        startTs: 2,
+        heapSize: 20,
         snapshot: '',
         growth: '',
-        total: 0,
+        total: 200,
         totalGrowth: '',
         existing: 0,
         children: samplerInfo,
         tempList: samplerInfo,
         timestamp: '',
         eventId: -1,
-        threadId: 0,
+        threadId: 2,
         threadName: '',
       },
     ];
@@ -334,19 +287,19 @@ describe('TabPaneNMSampleList Test', () => {
     TabPaneNMSampleList.samplerInfoSource = [
       {
         current: '',
-        currentSize: 0,
-        startTs: 0,
-        heapSize: 0,
-        snapshot: '',
+        currentSize: 108,
+        startTs: 9951,
+        heapSize: 123,
+        snapshot: 'snapshot06',
         growth: '',
-        total: 0,
+        total: 70,
         totalGrowth: '',
-        existing: 0,
+        existing: 50,
         children: [],
         tempList: [],
         timestamp: '',
-        eventId: -1,
-        threadId: 0,
+        eventId: 5,
+        threadId: 57,
         threadName: '',
       },
     ];
@@ -359,18 +312,18 @@ describe('TabPaneNMSampleList Test', () => {
       {
         current: '',
         currentSize: 0,
-        startTs: 0,
-        heapSize: 0,
+        startTs: 3,
+        heapSize: 30,
         snapshot: '',
         growth: '',
-        total: 0,
+        total: 300,
         totalGrowth: '',
         existing: 0,
         children: samplerInfo,
         tempList: samplerInfo,
         timestamp: '',
         eventId: -1,
-        threadId: 0,
+        threadId: 3,
         threadName: '',
       },
     ];
@@ -382,19 +335,19 @@ describe('TabPaneNMSampleList Test', () => {
     TabPaneNMSampleList.samplerInfoSource = [
       {
         current: '',
-        currentSize: 0,
-        startTs: 0,
-        heapSize: 0,
-        snapshot: '',
+        currentSize: 109,
+        startTs: 95,
+        heapSize: 987,
+        snapshot: 'snapshot08',
         growth: '',
-        total: 0,
+        total: 52,
         totalGrowth: '',
-        existing: 0,
+        existing: 1002,
         children: [],
         tempList: [],
         timestamp: '',
-        eventId: -1,
-        threadId: 0,
+        eventId: 106,
+        threadId: 980,
         threadName: '',
       },
     ];
diff --git a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.test.ts b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.test.ts
index 232afac119a187b639e84ecae3244d60086497f1..002e7cb0d4689c657b5c71a3abcccc084e17bfd5 100644
--- a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.test.ts
+++ b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatisticAnalysis.test.ts
@@ -79,20 +79,20 @@ describe('TabPaneNMStatisticAnalysis Test', () => {
   };
   let processData = [
     {
-      applyId: 22945,
-      callChainId: 91,
-      count: 1,
-      endTs: 4831690110,
-      id: 22945,
-      libId: 420,
-      libName: 'test.z.so',
+      applyId: 215,
+      callChainId: 11,
+      count: 31,
+      endTs: 498010,
+      id: 2095,
+      libId: 220,
+      libName: '[ld-musl-arm.so.1+0xbd94f] ld-musl-arm.so.1',
       pid: 1,
       size: 304,
-      startTs: 4806916233,
-      symbolId: 429,
-      symbolName: 'test',
-      tid: 5211,
-      type: 0,
+      startTs: 421203,
+      symbolId: 201,
+      symbolName: '[ld-musl-arm.so.1+0xbd94f]',
+      tid: 2011,
+      type: 130,
     },
   ];
   tabStatisticAnalysis.processData = processData;
@@ -128,20 +128,20 @@ describe('TabPaneNMStatisticAnalysis Test', () => {
   it('statisticAnalysis06', function () {
     let processData = [
       {
-        applyId: 22945,
-        callChainId: 91,
-        count: 1,
-        endTs: 4831690110,
+        applyId: 2345,
+        callChainId: 31,
+        count: 121,
+        endTs: 4841020,
         id: 22945,
         libId: 420,
-        libName: 'test.z.so',
+        libName: '[mmap] ld-musl-arm.so.1',
         pid: 1,
         size: 304,
-        startTs: 4806916233,
-        symbolId: 429,
-        symbolName: 'test',
-        tid: 5211,
-        type: 1,
+        startTs: 6210233,
+        symbolId: 321,
+        symbolName: '[mmap] ld-musl-arm.so.1',
+        tid: 213,
+        type: 11,
       },
     ];
     tabStatisticAnalysis.calTypeSize(select, processData);
@@ -151,20 +151,20 @@ describe('TabPaneNMStatisticAnalysis Test', () => {
   it('statisticAnalysis07', function () {
     let processData = [
       {
-        applyId: 22945,
-        callChainId: 91,
-        count: 1,
-        endTs: 4831690110,
-        id: 22945,
-        libId: 420,
-        libName: 'test.z.so',
-        pid: 1,
+        applyId: 632,
+        callChainId: 120,
+        count: 21,
+        endTs: 46201110,
+        id: 92045,
+        libId: 20,
+        libName: '[ThreadFuncC] nativetest_c',
+        pid: 15,
         size: 304,
-        startTs: 4806916233,
+        startTs: 4533,
         symbolId: 429,
-        symbolName: 'test',
+        symbolName: '[ThreadFuncC] nativetest_c',
         tid: 5211,
-        type: 2,
+        type: 92,
       },
     ];
     tabStatisticAnalysis.calTypeSize(select, processData);
@@ -174,20 +174,20 @@ describe('TabPaneNMStatisticAnalysis Test', () => {
   it('statisticAnalysis08', function () {
     let processData = [
       {
-        applyId: 22945,
-        callChainId: 91,
+        applyId: 2652,
+        callChainId: 3,
         count: 1,
-        endTs: 4831690110,
-        id: 22945,
-        libId: 420,
-        libName: 'test.z.so',
-        pid: 1,
-        size: 304,
-        startTs: 4806916233,
-        symbolId: 429,
-        symbolName: 'test',
-        tid: 5211,
-        type: 3,
+        endTs: 4865410,
+        id: 2235,
+        libId: 210,
+        libName: '[DepthMalloc] nativetest_c',
+        pid: 10,
+        size: 3014,
+        startTs: 4116233,
+        symbolId: 40,
+        symbolName: 'DepthMalloc',
+        tid: 501,
+        type: 30,
       },
     ];
     tabStatisticAnalysis.calTypeSize(select, processData);
diff --git a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.test.ts b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.test.ts
index 5fed27a67a4dc8f349f39a65156a5673173bbf7e..60bd93dbac4ee0f8a24952c601c43a778443c1fb 100644
--- a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.test.ts
+++ b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMStatstics.test.ts
@@ -50,25 +50,29 @@ describe('TabPaneNMStatstics Test', () => {
       {
         eventType: '',
         subType: '',
+        subTypeId: 0,
         heapSize: 0,
         allocByte: 0,
         allocCount: 0,
         freeByte: 0,
         freeCount: 0,
+        max: 0,
       },
     ];
     let nativeHookStatisticsTableData: Array<NativeHookStatisticsTableData> = [
       {
-        memoryTap: '',
-        existing: 0,
+        memoryTap: '12',
+        existing: 50,
         existingString: '',
-        allocCount: 0,
-        freeCount: 0,
-        totalBytes: 0,
+        freeByteString: '',
+        allocCount: 254,
+        freeCount: 43,
+        freeByte: 23,
+        totalBytes: 1,
         totalBytesString: '',
         maxStr: '',
-        max: 0,
-        totalCount: 0,
+        max: 110,
+        totalCount: 1150,
         existingValue: [],
       },
     ];
@@ -76,63 +80,34 @@ describe('TabPaneNMStatstics Test', () => {
     expect(tabPaneNMStatstics.setSubTypeTableData(nativeHookMalloc, nativeHookStatisticsTableData)).toBeUndefined();
   });
 
-  it('TabPaneNMStatsticsTest03', function () {
-    expect(tabPaneNMStatstics.initHtml()).toMatchInlineSnapshot(`
-"
-<style>
-.nm-stat-tbl {
-    height: auto
-}
-:host{
-    display: flex;
-    flex-direction: column;
-    padding: 10px 10px;
-}
-</style>
-<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>
-        "
-`);
-  });
-
   it('TabPaneNMStatsticsTest04', function () {
     let valData = {
       cpus: [],
       threadIds: [],
-      trackIds: [],
-      funTids: [],
-      heapIds: [],
+      trackIds: [21, 45, 6],
+      funTids: [111, 4, 43],
+      heapIds: [5, 77, 67, 0],
       nativeMemory: ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'],
       cpuAbilityIds: [],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
+      diskAbilityIds: [88, 56, 7],
       networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      leftNs: 1110,
+      rightNs: 15600,
       hasFps: false,
       statisticsSelectData: undefined,
       perfSampleIds: [],
       perfCpus: [],
       perfProcess: [],
       perfThread: [],
-      perfAll: false,
+      perfAll: true,
     };
     let nativeHookStatistics: Array<NativeHookStatistics> = [
       {
         eventId: 0,
         eventType: 'AllocEvent',
         subType: '',
+        subTypeId: 0,
         heapSize: 0,
         addr: '',
         startTs: 0,
@@ -141,6 +116,7 @@ describe('TabPaneNMStatstics Test', () => {
         max: 100000,
         count: 0,
         tid: 0,
+        threadName: '',
         isSelected: false,
       },
     ];
@@ -148,15 +124,17 @@ describe('TabPaneNMStatstics Test', () => {
     let nativeHookStatisticsTableData: Array<NativeHookStatisticsTableData> = [
       {
         memoryTap: '',
-        existing: 0,
+        existing: 540,
         existingString: '',
-        allocCount: 0,
-        freeCount: 0,
-        totalBytes: 0,
+        freeByteString: '',
+        allocCount: 20,
+        freeCount: 10,
+        freeByte: 20,
+        totalBytes: 20,
         totalBytesString: '',
         maxStr: '',
-        max: 0,
-        totalCount: 0,
+        max: 50,
+        totalCount: 40,
         existingValue: [],
       },
     ];
@@ -168,39 +146,41 @@ describe('TabPaneNMStatstics Test', () => {
 
   it('TabPaneNMStatsticsTest05', function () {
     let valData = {
-      cpus: [],
+      cpus: [3],
       threadIds: [],
-      trackIds: [],
-      funTids: [],
+      trackIds: [12,4],
+      funTids: [12,345],
       heapIds: [],
       nativeMemory: ['All Heap'],
-      cpuAbilityIds: [],
+      cpuAbilityIds: [10,56,1],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
+      diskAbilityIds: [12,76],
       networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      leftNs: 2330,
+      rightNs: 56670,
       hasFps: false,
       statisticsSelectData: undefined,
       perfSampleIds: [],
-      perfCpus: [],
+      perfCpus: [0,3],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
     };
     let nativeHookStatistics: Array<NativeHookStatistics> = [
       {
-        eventId: 0,
+        eventId: 980,
         eventType: 'FreeEvent',
         subType: '',
-        heapSize: 0,
+        subTypeId: 0,
+        heapSize: 7,
         addr: '',
-        startTs: 0,
-        endTs: 0,
+        startTs: 77,
+        endTs: 6,
         sumHeapSize: 0,
-        max: 100000,
-        count: 0,
-        tid: 0,
+        max: 100654,
+        count: 40,
+        tid: 660,
+        threadName: '',
         isSelected: false,
       },
     ];
@@ -208,15 +188,17 @@ describe('TabPaneNMStatstics Test', () => {
     let nativeHookStatisticsTableData: Array<NativeHookStatisticsTableData> = [
       {
         memoryTap: '',
-        existing: 0,
+        existing: 20,
         existingString: '',
-        allocCount: 0,
-        freeCount: 0,
-        totalBytes: 0,
+        freeByteString: '',
+        allocCount: 12,
+        freeCount: 121,
+        freeByte: 221,
+        totalBytes: 21,
         totalBytesString: '',
         maxStr: '',
-        max: 0,
-        totalCount: 0,
+        max: 220,
+        totalCount: 465,
         existingValue: [],
       },
     ];
@@ -228,39 +210,41 @@ describe('TabPaneNMStatstics Test', () => {
 
   it('TabPaneNMStatsticsTest06', function () {
     let valData = {
-      cpus: [],
+      cpus: [1,3],
       threadIds: [],
       trackIds: [],
-      funTids: [],
+      funTids: [543,76],
       heapIds: [],
       nativeMemory: ['All Anonymous VM'],
       cpuAbilityIds: [],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
-      networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      diskAbilityIds: [23, 56, 7],
+      networkAbilityIds: [100, 156],
+      leftNs: 450,
+      rightNs: 5210,
       hasFps: false,
       statisticsSelectData: undefined,
-      perfSampleIds: [],
-      perfCpus: [],
+      perfSampleIds: [12, 56],
+      perfCpus: [0],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
     };
     let nativeHookStatistics: Array<NativeHookStatistics> = [
       {
-        eventId: 0,
+        eventId: 90,
         eventType: 'MmapEvent',
         subType: '',
-        heapSize: 0,
+        subTypeId: 21,
+        heapSize: 97,
         addr: '',
-        startTs: 0,
-        endTs: 0,
+        startTs: 77,
+        endTs: 6,
         sumHeapSize: 0,
-        max: 100000,
-        count: 0,
-        tid: 0,
+        max: 10114,
+        count: 10,
+        tid: 611,
+        threadName: '',
         isSelected: false,
       },
     ];
@@ -268,15 +252,17 @@ describe('TabPaneNMStatstics Test', () => {
     let nativeHookStatisticsTableData: Array<NativeHookStatisticsTableData> = [
       {
         memoryTap: '',
-        existing: 0,
+        existing: 510,
         existingString: '',
-        allocCount: 0,
-        freeCount: 0,
-        totalBytes: 0,
+        freeByteString: '',
+        allocCount: 2312,
+        freeCount: 51,
+        freeByte: 321,
+        totalBytes: 90,
         totalBytesString: '',
-        maxStr: '',
-        max: 0,
-        totalCount: 0,
+        maxStr: '02',
+        max: 2082,
+        totalCount: 55,
         existingValue: [],
       },
     ];
@@ -289,38 +275,40 @@ describe('TabPaneNMStatstics Test', () => {
   it('TabPaneNMStatsticsTest07', function () {
     let valData = {
       cpus: [],
-      threadIds: [],
+      threadIds: [12, 43, 5],
       trackIds: [],
-      funTids: [],
+      funTids: [22,29,20],
       heapIds: [],
       nativeMemory: ['All Anonymous VM'],
-      cpuAbilityIds: [],
+      cpuAbilityIds: [133,54,5],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
+      diskAbilityIds: [13, 14, 19],
       networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      leftNs: 2211,
+      rightNs: 433111,
       hasFps: false,
       statisticsSelectData: undefined,
-      perfSampleIds: [],
+      perfSampleIds: [520, 88, 1],
       perfCpus: [],
-      perfProcess: [],
-      perfThread: [],
+      perfProcess: ['ssioncontroller', 'ndroid.settings'],
+      perfThread: ['ndroid.settings'],
       perfAll: false,
     };
     let nativeHookStatistics: Array<NativeHookStatistics> = [
       {
-        eventId: 0,
-        eventType: 'MunmapEvent',
+        eventId: 60,
+        eventType: 'MmapEvent',
         subType: '',
-        heapSize: 0,
+        subTypeId: 13,
+        heapSize: 31,
         addr: '',
-        startTs: 0,
-        endTs: 0,
-        sumHeapSize: 0,
-        max: 100000,
-        count: 0,
-        tid: 0,
+        startTs: 137,
+        endTs: 61,
+        sumHeapSize: 34,
+        max: 214,
+        count: 10,
+        tid: 64,
+        threadName: '',
         isSelected: false,
       },
     ];
@@ -328,19 +316,20 @@ describe('TabPaneNMStatstics Test', () => {
     let nativeHookStatisticsTableData: Array<NativeHookStatisticsTableData> = [
       {
         memoryTap: '',
-        existing: 0,
+        existing: 210,
         existingString: '',
-        allocCount: 0,
-        freeCount: 0,
-        totalBytes: 0,
+        freeByteString: '',
+        allocCount: 92,
+        freeCount: 51,
+        freeByte: 2,
+        totalBytes: 23,
         totalBytesString: '',
-        maxStr: '',
-        max: 0,
-        totalCount: 0,
+        maxStr: '20',
+        max: 232,
+        totalCount: 9,
         existingValue: [],
       },
     ];
-
     expect(
       tabPaneNMStatstics.setMemoryTypeData(valData, nativeHookStatistics, nativeHookStatisticsTableData)
     ).toBeUndefined();
@@ -348,55 +337,59 @@ describe('TabPaneNMStatstics Test', () => {
 
   it('TabPaneNMStatsticsTest08', function () {
     let valData = {
-      cpus: [],
-      threadIds: [],
+      cpus: [0],
+      threadIds: [2,90,0],
       trackIds: [],
-      funTids: [],
-      heapIds: [],
+      funTids: [23,44],
+      heapIds: [2,9],
       nativeMemory: ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'],
-      cpuAbilityIds: [],
+      cpuAbilityIds: [33,22],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
+      diskAbilityIds: [56,87,45],
       networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      leftNs: 52540,
+      rightNs: 9654120,
       hasFps: false,
       statisticsSelectData: undefined,
-      perfSampleIds: [],
-      perfCpus: [],
+      perfSampleIds: [12,45,87],
+      perfCpus: [1,3],
       perfProcess: [],
       perfThread: [],
-      perfAll: false,
+      perfAll: true,
     };
     let nativeHookStatistics: Array<NativeHookStatistics> = [
       {
-        eventId: 0,
+        eventId: 30,
         eventType: 'FreeEvent',
         subType: '',
-        heapSize: 0,
-        addr: '',
-        startTs: 0,
-        endTs: 0,
-        sumHeapSize: 0,
-        max: 100000,
-        count: 0,
-        tid: 0,
-        isSelected: false,
+        subTypeId: 13,
+        heapSize: 31,
+        addr: 'test/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.test.ts',
+        startTs: 33,
+        endTs: 31,
+        sumHeapSize: 90,
+        max: 4,
+        count: 40,
+        tid: 14,
+        threadName: 'NativeNemory',
+        isSelected: true,
       },
     ];
 
     let nativeHookStatisticsTableData: Array<NativeHookStatisticsTableData> = [
       {
         memoryTap: '',
-        existing: 0,
-        existingString: '',
-        allocCount: 0,
-        freeCount: 0,
-        totalBytes: 0,
+        existing: 330,
+        existingString: 'nativeHookStatistics',
+        freeByteString: '',
+        allocCount: 72,
+        freeCount: 23,
+        freeByte: 11,
+        totalBytes: 3,
         totalBytesString: '',
-        maxStr: '',
-        max: 100,
-        totalCount: 0,
+        maxStr: '33',
+        max: 3,
+        totalCount: 42,
         existingValue: [],
       },
     ];
diff --git a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMemory.test.ts b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMemory.test.ts
index 1f043a7c82a6f2545a2bd30b38696541177f857b..806451dc7b3e11329ab8a4ec2fe9d0b49182a8d9 100644
--- a/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMemory.test.ts
+++ b/ide/test/trace/component/trace/sheet/native-memory/TabPaneNMemory.test.ts
@@ -66,20 +66,6 @@ describe('TabPaneNMemory Test', () => {
   });
 
   it('TabPaneNMemoryTest02', function () {
-    let MockqueryNativeHookEventTid = sqlit.queryNativeHookEventTid;
-    MockqueryNativeHookEventTid.mockResolvedValue([
-      {
-        eventId: 0,
-        eventType: 'MmapEvent',
-        heap_size: 2,
-        addr: 'addr',
-        startTs: 0,
-        endTs: 500,
-        tid: 2,
-        threadName: 'threadName',
-      },
-    ]);
-
     let MockNativeHookSnapshotTypes = sqlit.queryNativeHookSnapshotTypes;
     MockNativeHookSnapshotTypes.mockResolvedValue([
       {
@@ -92,155 +78,12 @@ describe('TabPaneNMemory Test', () => {
     expect(tabPaneNMemory.initFilterTypes()).toBeUndefined();
   });
 
-  it('TabPaneNMemoryTest08', function () {
-    expect(tabPaneNMemory.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px 0 10px;
-        }
-        .nm-memory-loading{
-            bottom: 0;
-            position: absolute;
-            left: 0;
-            right: 0;
-            width:100%;
-            background:transparent;
-            z-index: 999999;
-        }
-        .nm-memory-progress{
-            bottom: 33px;
-            position: absolute;
-            height: 1px;
-            left: 0;
-            right: 0;
-        }
-        .nm-memory-filter {
-            border: solid rgb(216,216,216) 1px;
-            float: left;
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-        }
-        </style>
-        <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 class="nm-memory-column" width="60px" title="#" data-index="index" key="index"  align="flex-start" order>
-                            </lit-table-column>
-                            <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 class="nm-memory-column" width="1fr" title="Memory Type" data-index="eventType" key="eventType"  align="flex-start">
-                            </lit-table-column>
-                            <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 class="nm-memory-column" width="1fr" title="State" data-index="state" key="state"  align="flex-start">
-                            </lit-table-column>
-                            <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 class="nm-memory-column" width="20%" title="Responsible Library" data-index="library" key="library"  align="flex-start" order>
-                            </lit-table-column>
-                            <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 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 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 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>
-        "
-`);
-  });
-
   it('TabPaneNMemoryTest09', function () {
     tabPaneNMemory.tblData = jest.fn(() => undefined);
     tabPaneNMemory.tblData.recycleDataSource = jest.fn(() => true);
     tabPaneNMemory.startWorker = jest.fn(() => true);
     expect(tabPaneNMemory.setRightTableData(hook)).toBeUndefined();
   });
-  it('TabPaneNMemoryTest010', function () {
-    let column = 'index';
-    let sort = 0;
-    tabPaneNMemory.memoryTbl = jest.fn(() => true);
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-  it('TabPaneNMemoryTest011', function () {
-    let column = 'index';
-    let sort = 1;
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-  it('TabPaneNMemoryTest012', function () {
-    let column = 'addr';
-    let sort = 1;
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-  it('TabPaneNMemoryTest013', function () {
-    let column = 'timestamp';
-    let sort = 1;
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-  it('TabPaneNMemoryTest014', function () {
-    let column = 'heapSizeUnit';
-    let sort = 1;
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-  it('TabPaneNMemoryTest015', function () {
-    let column = 'library';
-    let sort = 1;
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-  it('TabPaneNMemoryTest016', function () {
-    let column = 'symbol';
-    let sort = 1;
-    expect(tabPaneNMemory.sortByColumn(column, sort)).toBeUndefined();
-  });
-
-  it('TabPaneNMemoryTest017', function () {
-    let a = {
-      recordStartNs: 1502031374794922000,
-      rightNs: 1,
-      leftNs: 0,
-      nativeMemory: ['All Heap & Anonymous VM', 'All Heap', 'All Anonymous VM'],
-    };
-    let queryNativeHookSnapshotTypes = sqlit.queryNativeHookSnapshotTypes;
-    queryNativeHookSnapshotTypes.mockResolvedValue(
-      { event_type: 11, data: 111 },
-      {
-        event_type: 222,
-        data: 142446,
-      }
-    );
-    let queryNativeHookEventTid = sqlit.queryNativeHookEventTid;
-    queryNativeHookEventTid.mockResolvedValue(
-      { callchain_id: 1, event_type: '2', heap_size: 66 },
-      {
-        callchain_id: 2,
-        event_type: '5',
-        heap_size: 666,
-      }
-    );
-    TabPaneNMSampleList.serSelection = jest.fn().mockResolvedValue({});
-    tabPaneNMemory.data = a;
-    expect(tabPaneNMemory).toBeTruthy();
-  });
 
   it('TabPaneNMemoryTest018', function () {
     expect(tabPaneNMemory.fromStastics(val)).toBeUndefined();
diff --git a/ide/test/trace/component/trace/sheet/process/TabPaneCounter.test.ts b/ide/test/trace/component/trace/sheet/process/TabPaneCounter.test.ts
index 13dbe428cbae719e00fdd79df7c67477c88424e6..8a90fde2313e701788591b17204dc6650315626f 100644
--- a/ide/test/trace/component/trace/sheet/process/TabPaneCounter.test.ts
+++ b/ide/test/trace/component/trace/sheet/process/TabPaneCounter.test.ts
@@ -94,42 +94,4 @@ describe('TabPaneCounter Test', () => {
     let a = { rightNs: 1, trackIds: [11, 12, 13] };
     expect((tabPaneCounter.data = a)).toBeTruthy();
   });
-
-  it('TabPaneCounterTest06', function () {
-    expect(tabPaneCounter.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .counter-label{
-            width: 100%;
-        }
-        :host{
-            flex-direction: column;
-            display: flex;
-            padding: 10px 10px;
-        }
-        </style>
-        <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>
-            <lit-table-column width="1fr" title="Delta value" data-index="delta" key="delta"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Rate /s" data-index="rate" key="rate"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Weighted avg value" data-index="avgWeight" key="avgWeight"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Count" data-index="count" key="count"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="First value" data-index="first" key="first"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Last value" data-index="last" key="last"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Min value" data-index="min" key="min"  align="flex-start" order >
-            </lit-table-column>
-            <lit-table-column width="1fr" title="Max value" data-index="max" key="max"  align="flex-start" order >
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/process/TabPaneSlices.test.ts b/ide/test/trace/component/trace/sheet/process/TabPaneSlices.test.ts
index aace8124083a3a3152d4a48887699b547be4b792..00de1753d4ac63ecc773477c558afd9c29a92077 100644
--- a/ide/test/trace/component/trace/sheet/process/TabPaneSlices.test.ts
+++ b/ide/test/trace/component/trace/sheet/process/TabPaneSlices.test.ts
@@ -32,49 +32,44 @@ describe('TabPaneSlices Test', () => {
   sqlit.getTabSlicesAsyncFunc.mockResolvedValue([]);
   sqlit.getTabSlices.mockResolvedValue([
     {
-      "name": "binder reply",
-      "wallDuration": 61.847,
-      "avgDuration": 30.9235,
-      "occurrences": 2,
-      "isHover": false
+      name: 'binder reply',
+      wallDuration: 61.847,
+      avgDuration: 30.9235,
+      occurrences: 2,
+      isHover: false,
     },
     {
-      "name": "binder transaction",
-      "wallDuration": 1.64,
-      "avgDuration": 0.54667,
-      "occurrences": 3,
-      "isHover": false
-    }
+      name: 'binder transaction',
+      wallDuration: 1.64,
+      avgDuration: 0.54667,
+      occurrences: 3,
+      isHover: false,
+    },
   ]);
   it('TabPaneSlicesTest01', function () {
-
     expect(
-      tabPaneSlices.data = {
-        "recordStartNs": 26014913992000,
-        "leftNs": 530809208,
-        "rightNs": 532115193,
-        "hasFps": false,
-        "perfAll": false,
-        "fileSysVirtualMemory": false,
-        "diskIOLatency": false,
-        "fsCount": 0,
-        "vmCount": 0,
-        "isCurrentPane": false,
-        "startup": false,
-        "staticInit": false,
-        "cpus": [],
-        "cpuStateFilterIds": [],
-        "cpuFreqFilterIds": [],
-        "cpuFreqLimitDatas": [],
-        "threadIds": [],
-        "processIds": [
-          578
-        ],
-        "funTids": [
-          915
-        ],
-        "funAsync": [],
-      }
+      (tabPaneSlices.data = {
+        recordStartNs: 26014913992000,
+        leftNs: 530809208,
+        rightNs: 532115193,
+        hasFps: false,
+        perfAll: false,
+        fileSysVirtualMemory: false,
+        diskIOLatency: false,
+        fsCount: 0,
+        vmCount: 0,
+        isCurrentPane: false,
+        startup: false,
+        staticInit: false,
+        cpus: [],
+        cpuStateFilterIds: [],
+        cpuFreqFilterIds: [],
+        cpuFreqLimitDatas: [],
+        threadIds: [],
+        processIds: [578],
+        funTids: [915],
+        funAsync: [],
+      })
     );
   });
 
@@ -95,32 +90,4 @@ describe('TabPaneSlices Test', () => {
       })
     ).toBeUndefined();
   });
-
-  it('TabPaneSlicesTest04', function () {
-    expect(tabPaneSlices.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .slice-label{
-            height: 20px;
-        }
-        :host{
-            display: flex;
-            padding: 10px 10px;
-            flex-direction: column;
-        }
-        </style>
-        <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 class="slices-column" title="Name" width="500px" data-index="name" key="name"  align="flex-start" order>
-            </lit-table-column>
-            <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 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 class="slices-column" title="Occurrences" width="1fr" data-index="occurrences" key="occurrences"  align="flex-start" order >
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/process/TabPaneStartup.test.ts b/ide/test/trace/component/trace/sheet/process/TabPaneStartup.test.ts
index 8b043541a1725bb610b2f8cf11db67d4d61d8331..adedda1edff1cac9bd4dd1447dfbe51d092e1b38 100644
--- a/ide/test/trace/component/trace/sheet/process/TabPaneStartup.test.ts
+++ b/ide/test/trace/component/trace/sheet/process/TabPaneStartup.test.ts
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-
 // @ts-ignore
 import { TabPaneStartup } from '../../../../../../dist/trace/component/trace/sheet/process/TabPaneStartup.js';
 
@@ -31,8 +30,8 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorkerAppStartup.js', () => {
   return {
     AppStartupStruct: {
-      getStartupName: jest.fn().mockReturnValue('Unknown Start Step')
-    }
+      getStartupName: jest.fn().mockReturnValue('Unknown Start Step'),
+    },
   };
 });
 describe('TabPaneStartup Test', () => {
@@ -41,68 +40,65 @@ describe('TabPaneStartup Test', () => {
 
   getTabStartups.mockResolvedValue([
     {
-      'pid': 3913,
-      'process': 'com.ohos.smartperf',
-      'startTs': 5651745832,
-      'dur': 38654167,
-      'startName': 0
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5651745832,
+      dur: 38654167,
+      startName: 0,
     },
     {
-      'pid': 3913,
-      'process': 'com.ohos.smartperf',
-      'startTs': 5690399999,
-      'dur': 43619792,
-      'startName': 1
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5690399999,
+      dur: 43619792,
+      startName: 1,
     },
     {
-      'pid': 3913,
-      'process': 'com.ohos.smartperf',
-      'startTs': 5734019791,
-      'dur': 23194270,
-      'startName': 2
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5734019791,
+      dur: 23194270,
+      startName: 2,
     },
     {
-      'pid': 3913,
-      'process': 'com.ohos.smartperf',
-      'startTs': 5757214061,
-      'dur': 115679167,
-      'startName': 3
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5757214061,
+      dur: 115679167,
+      startName: 3,
     },
     {
-      'pid': 3913,
-      'process': 'com.ohos.smartperf',
-      'startTs': 5872893228,
-      'dur': 62756250,
-      'startName': 4
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5872893228,
+      dur: 62756250,
+      startName: 4,
     },
     {
-      'pid': 3913,
-      'process': 'com.ohos.smartperf',
-      'startTs': 5968040103,
-      'dur': 29438021,
-      'startName': 5
-    }
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5968040103,
+      dur: 29438021,
+      startName: 5,
+    },
   ]);
   it('TabPaneStartupTest01', function () {
-
     expect(
-      tabPaneStartup.data = {
-        'recordStartNs': 94574874464,
-        'leftNs': 5521679251,
-        'rightNs': 6407693386,
-        'hasFps': false,
-        'perfAll': false,
-        'fileSysVirtualMemory': false,
-        'diskIOLatency': false,
-        'fsCount': 0,
-        'vmCount': 0,
-        'isCurrentPane': false,
-        'startup': true,
-        'staticInit': true,
-        'processIds': [
-          3913
-        ]
-      }
+      (tabPaneStartup.data = {
+        recordStartNs: 94574874464,
+        leftNs: 5521679251,
+        rightNs: 6407693386,
+        hasFps: false,
+        perfAll: false,
+        fileSysVirtualMemory: false,
+        diskIOLatency: false,
+        fsCount: 0,
+        vmCount: 0,
+        isCurrentPane: false,
+        startup: true,
+        staticInit: true,
+        processIds: [3913],
+      })
     );
   });
 
@@ -114,37 +110,4 @@ describe('TabPaneStartup Test', () => {
       })
     ).toBeUndefined();
   });
-
-
-  it('TabPaneStartupTest03', function () {
-    expect(tabPaneStartup.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .startup-table{
-          flex-direction: row;
-          margin-bottom: 5px;
-        }
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <div class="startup-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
-            <div style="flex: 1"></div>
-            <label id="startup-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-startup" style="height: auto" tree>
-                <lit-table-column width="600px" title="Process / Startup"  data-index="name" key="name"  align="flex-start" >
-                </lit-table-column>
-                <lit-table-column width="200px" title="Duration" data-index="durStr" key="durStr"  align="flex-start" order >
-                </lit-table-column>
-                <lit-table-column width="200px" title="%" data-index="ratio" key="ratio"  align="flex-start" order >
-                </lit-table-column>
-            </lit-table>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/process/TabPaneStaticInit.test.ts b/ide/test/trace/component/trace/sheet/process/TabPaneStaticInit.test.ts
index ba7a7896f1480723cbb410c04b7c647349dce6ee..d93db176138ff4150a9257e02f5f13f40db9e772 100644
--- a/ide/test/trace/component/trace/sheet/process/TabPaneStaticInit.test.ts
+++ b/ide/test/trace/component/trace/sheet/process/TabPaneStaticInit.test.ts
@@ -13,11 +13,9 @@
  * limitations under the License.
  */
 
-
 // @ts-ignore
 import { TabPaneStaticInit } from '../../../../../../dist/trace/component/trace/sheet/process/TabPaneStaticInit.js';
 
-
 window.ResizeObserver =
   window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
@@ -32,8 +30,8 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorkerAppStartup.js', () => {
   return {
     AppStartupStruct: {
-      getStartupName: jest.fn().mockReturnValue('Unknown Start Step')
-    }
+      getStartupName: jest.fn().mockReturnValue('Unknown Start Step'),
+    },
   };
 });
 describe('TabPaneStaticInit Test', () => {
@@ -42,40 +40,37 @@ describe('TabPaneStaticInit Test', () => {
 
   getTabStaticInit.mockResolvedValue([
     {
-      "pid": 3913,
-      "process": "com.ohos.smartperf",
-      "startTs": 5769042707,
-      "dur": 6701042,
-      "soName": "dlopen:  /system/lib64/module/net/libsocket.z.so"
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5769042707,
+      dur: 6701042,
+      soName: 'dlopen:  /system/lib64/module/net/libsocket.z.so',
     },
     {
-      "pid": 3913,
-      "process": "com.ohos.smartperf",
-      "startTs": 5696226041,
-      "dur": 4319791,
-      "soName": "dlopen:  system/lib64/extensionability/libinputmethod_extension_module.z.so"
-    }
+      pid: 3913,
+      process: 'com.ohos.smartperf',
+      startTs: 5696226041,
+      dur: 4319791,
+      soName: 'dlopen:  system/lib64/extensionability/libinputmethod_extension_module.z.so',
+    },
   ]);
   it('TabPaneStaticInit01', function () {
-
     expect(
-      tabPaneStaticInit.data = {
-        'recordStartNs': 94574874464,
-        'leftNs': 5521679251,
-        'rightNs': 6407693386,
-        'hasFps': false,
-        'perfAll': false,
-        'fileSysVirtualMemory': false,
-        'diskIOLatency': false,
-        'fsCount': 0,
-        'vmCount': 0,
-        'isCurrentPane': false,
-        'startup': true,
-        'staticInit': true,
-        'processIds': [
-          3913
-        ]
-      }
+      (tabPaneStaticInit.data = {
+        recordStartNs: 94574874464,
+        leftNs: 5521679251,
+        rightNs: 6407693386,
+        hasFps: false,
+        perfAll: false,
+        fileSysVirtualMemory: false,
+        diskIOLatency: false,
+        fsCount: 0,
+        vmCount: 0,
+        isCurrentPane: false,
+        startup: true,
+        staticInit: true,
+        processIds: [3913],
+      })
     );
   });
 
@@ -87,35 +82,4 @@ describe('TabPaneStaticInit Test', () => {
       })
     ).toBeUndefined();
   });
-
-
-  it('TabPaneStartupTest03', function () {
-    expect(tabPaneStaticInit.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .staticinit-table{
-          flex-direction: row;
-          margin-bottom: 5px;
-        }
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <div class="staticinit-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px">
-            <div style="flex: 1"></div>
-            <label id="staticinit-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-staticinit" style="height: auto" tree>
-                <lit-table-column width="700px" title="Process / Lib"  data-index="name" key="name"  align="flex-start" order>
-                </lit-table-column>
-                <lit-table-column width="200px" title="Duration" data-index="durStr" key="durStr"  align="flex-start" order >
-                </lit-table-column>
-            </lit-table>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/process/TabPaneThreadStates.test.ts b/ide/test/trace/component/trace/sheet/process/TabPaneThreadStates.test.ts
index 1ec0093c0a405fecc8adf454674ad05b9744e57d..c9f2ebe86743e0020544ff2d2cf7d6f00f6924bb 100644
--- a/ide/test/trace/component/trace/sheet/process/TabPaneThreadStates.test.ts
+++ b/ide/test/trace/component/trace/sheet/process/TabPaneThreadStates.test.ts
@@ -68,7 +68,7 @@ describe('TabPaneThreadStates Test', () => {
         stateJX: 'mm',
       },
     ]);
-    let a = { rightNs: 1, leftNs: 0, threadIds: [11, 12, 13], processIds:[11,12,13] };
+    let a = { rightNs: 1, leftNs: 0, threadIds: [11, 12, 13], processIds: [11, 12, 13] };
     expect((tabPaneThreadStates.data = a)).toBeTruthy();
   });
 
@@ -76,47 +76,7 @@ describe('TabPaneThreadStates Test', () => {
     // @ts-ignore
     let mockgetTabThreadStates = sqlit.getTabThreadStates;
     mockgetTabThreadStates.mockResolvedValue([]);
-    let a = { rightNs: 1, leftNs: 0, threadIds: [11, 12, 13], processIds:[11,12,13] };
+    let a = { rightNs: 1, leftNs: 0, threadIds: [11, 12, 13], processIds: [11, 12, 13] };
     expect((tabPaneThreadStates.data = a)).toBeTruthy();
   });
-
-  it('TabPaneThreadStatesTest04', function () {
-    expect(tabPaneThreadStates.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .tread-states-table{
-            display: flex;
-            height: 20px;
-        }
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <div class="tread-states-table" style="display: flex;height: 20px;align-items: center;flex-direction: row;margin-bottom: 5px;justify-content: space-between">
-            <stack-bar id="thread-states-stack-bar" style="width: calc(100vw - 520px)"></stack-bar>
-            <label id="thread-states-time-range"  style="width: 250px;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;width: calc(100vw - 270px)">
-            <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 class="tread-states-column" width="120px" title="PID" data-index="pid" key="pid"  align="flex-start" order >
-            </lit-table-column>
-            <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 class="tread-states-column" width="120px" title="TID" data-index="tid" key="tid"  align="flex-start" order >
-            </lit-table-column>
-            <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 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 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 class="tread-states-column" width="120px" title="Occurrences" data-index="occurrences" key="occurrences"  align="flex-start" order >
-            </lit-table-column>
-        </lit-table>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/process/TabPaneThreadUsage.test.ts b/ide/test/trace/component/trace/sheet/process/TabPaneThreadUsage.test.ts
index 43f94e46594970132c8342e8fa010b490fbaea6a..6045eb53e1ed4c527b2ce5a1320afcd9f6d48fa8 100644
--- a/ide/test/trace/component/trace/sheet/process/TabPaneThreadUsage.test.ts
+++ b/ide/test/trace/component/trace/sheet/process/TabPaneThreadUsage.test.ts
@@ -29,8 +29,8 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorkerCPU.js', () => {
   return {
     CpuStruct: {
-      cpuCount: 0
-    }
+      cpuCount: 0,
+    },
   };
 });
 
@@ -38,51 +38,46 @@ describe('TabPaneThreadUsage Test', () => {
   let threadUsage = new TabPaneThreadUsage();
   sqlit.getTabThreadStatesCpu.mockResolvedValue([
     {
-      'pid': 28549,
-      'tid': 28549,
-      'cpu': 0,
-      'wallDuration': 6447000
+      pid: 28549,
+      tid: 28549,
+      cpu: 0,
+      wallDuration: 6447000,
     },
     {
-      'pid': 28549,
-      'tid': 28549,
-      'cpu': 1,
-      'wallDuration': 4402000
+      pid: 28549,
+      tid: 28549,
+      cpu: 1,
+      wallDuration: 4402000,
     },
     {
-      'pid': 28549,
-      'tid': 28549,
-      'cpu': 3,
-      'wallDuration': 41852000
-    }
+      pid: 28549,
+      tid: 28549,
+      cpu: 3,
+      wallDuration: 41852000,
+    },
   ]);
 
-
   it('TabPaneThreadUsageTest01', function () {
     let a = {
-      'recordStartNs': 26014913992000,
-      'leftNs': 341320659,
-      'rightNs': 7402391794,
-      'hasFps': false,
-      'perfAll': false,
-      'fileSysVirtualMemory': false,
-      'diskIOLatency': false,
-      'fsCount': 0,
-      'vmCount': 0,
-      'isCurrentPane': false,
-      'startup': false,
-      'staticInit': false,
-      'cpus': [],
-      'cpuStateFilterIds': [],
-      'cpuFreqFilterIds': [],
-      'cpuFreqLimitDatas': [],
-      'threadIds': [
-        28549
-      ],
-      'processIds': [
-        28549
-      ],
-      'processTrackIds': [],
+      recordStartNs: 26014913992000,
+      leftNs: 341320659,
+      rightNs: 7402391794,
+      hasFps: false,
+      perfAll: false,
+      fileSysVirtualMemory: false,
+      diskIOLatency: false,
+      fsCount: 0,
+      vmCount: 0,
+      isCurrentPane: false,
+      startup: false,
+      staticInit: false,
+      cpus: [],
+      cpuStateFilterIds: [],
+      cpuFreqFilterIds: [],
+      cpuFreqLimitDatas: [],
+      threadIds: [28549],
+      processIds: [28549],
+      processTrackIds: [],
     };
     expect((threadUsage.data = a)).toBeTruthy();
   });
@@ -95,30 +90,4 @@ describe('TabPaneThreadUsage Test', () => {
       })
     ).toBeUndefined();
   });
-
-
-  it('TabPaneThreadStatesTest04', function () {
-    expect(threadUsage.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        .thread-usage-table{
-          flex-direction: row;
-          margin-bottom: 5px;
-        }
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        </style>
-        <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>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkCounter.test.ts b/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkCounter.test.ts
index fe4dcc133dd789ded036f23992b0ad5ad5570145..8aaa205ecefa3f68d4a7f60313e8b620e761ebb4 100644
--- a/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkCounter.test.ts
+++ b/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkCounter.test.ts
@@ -113,22 +113,22 @@ describe('TabPaneSdkCounter Test', () => {
     tabSdkCounterData.mockResolvedValue(counter);
 
     let d = {
-      cpus: [],
+      cpus: [45,1],
       threadIds: [],
-      trackIds: [],
+      trackIds: [45,1,22],
       funTids: [],
-      heapIds: [],
+      heapIds: [78,7],
       nativeMemory: [],
-      cpuAbilityIds: [],
+      cpuAbilityIds: [41,1],
       memoryAbilityIds: [],
-      diskAbilityIds: [],
+      diskAbilityIds: [45,5],
       networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      leftNs: 23,
+      rightNs: 67,
       hasFps: false,
       statisticsSelectData: [],
-      perfSampleIds: [],
-      perfCpus: [],
+      perfSampleIds: [145,56,6],
+      perfCpus: [3],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
@@ -158,30 +158,6 @@ describe('TabPaneSdkCounter Test', () => {
     expect(tabPaneSdkCounter.initDataElement()).toBeUndefined();
   });
 
-  it('TabPaneSdkCounterTest05', () => {
-    let tabPaneSdkCounter = new TabPaneSdkCounter();
-    expect(tabPaneSdkCounter.initHtml()).toMatchInlineSnapshot(`
-"
-<style>
-.sdk-counter-table{
-    display: flex;
-    margin-bottom: 5px;
-}
-:host{
-    padding: 10px 10px;
-    display: flex;
-    flex-direction: column;
-}
-</style>
-<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" class="sdk-counter-tbl" style="height: auto">
-</lit-table>
-        "
-`);
-  });
 
   it('TabPaneSdkCounterTest04', function () {
     let tabPaneSdkCounter = new TabPaneSdkCounter();
diff --git a/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkSlice.test.ts b/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkSlice.test.ts
index 4c9c1501c2aead63f33732f80cf856e524020a62..789136784f6f27da5b587fad2c4618029f3a5a49 100644
--- a/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkSlice.test.ts
+++ b/ide/test/trace/component/trace/sheet/sdk/TabPaneSdkSlice.test.ts
@@ -21,7 +21,7 @@ import { LitTable } from '../../../../../../dist/base-ui/table/lit-table.js';
 import { SpSystemTrace } from '../../../../../../dist/trace/component/SpSystemTrace.js';
 
 // @ts-ignore
-import {TabUtil} from "../../../../../../dist/trace/component/trace/sheet/sdk/TabUtil.js";
+import { TabUtil } from '../../../../../../dist/trace/component/trace/sheet/sdk/TabUtil.js';
 
 window.ResizeObserver =
   window.ResizeObserver ||
@@ -93,45 +93,50 @@ describe('TabPaneSdkSlice Test', () => {
     slice.tblSdkSlice = jest.fn(() => litTable);
     slice.tblSdkSlice.appendChild = jest.fn(() => true);
     let map = new Map();
-    let jsonCofigStr =
+    let sdkSliceJsonCofigStr =
       '{"settingConfig":{"configuration":{"counters":{"enum":["ARM_Mali-TTRx_JS1_ACTIVE","ARM_Mali-TTRx_JS0_ACTIVE","ARM_Mali-TTRx_GPU_ACTIVE","ARM_Mali-TTRx_FRAG_ACTIVE"],\n' +
       '    "type":"string"},"stop_gator":{"default":"true","description":"stop_gator","type":"boolean"},"version":{"default":"1","description":"gatordversion","type":"number"}},"name":"mailG77"},\n' +
-      '    "tableConfig":{"showType":[{"columns":[{"column":"ts","displayName":"TimeStamp","showType":[1,3],"type":"INTEGER"},{"column":"counter_id","displayName":"MonitorValue","showType":[1,3],"type":"INTEGER"},\n' +
-      '    {"column":"value","displayName":"Value","showType":[1,3],"type":"INTEGER"}],"inner":{"columns":[{"column":"counter_name","displayName":"","showType":[0],"type":"STRING"},\n' +
-      '    {"column":"counter_id","displayName":"","showType":[0],"type":"INTEGER"}],"tableName":"mock_plugin_counterobj_table"},"tableName":"mock_plugin_counter_table"},\n' +
-      '    {"columns":[{"column":"start_ts","displayName":"startts","showType":[2,3],"type":"INTEGER"},{"column":"end_ts","displayName":"endts","showType":[2,3],"type":"INTEGER"},\n' +
-      '    {"column":"slice_id","displayName":"slice_id","showType":[2,3],"type":"INTEGER"},{"column":"value","displayName":"Value","showType":[2,3],"type":"INTEGER"}],\n' +
-      '    "inner":{"columns":[{"column":"slice_name","displayName":"","showType":[0],"type":"STRING"},{"column":"slice_id","displayName":"","showType":[0],"type":"INTEGER"}],\n' +
+      '    "tableConfig":{"showType":[{"columns":[{"column":"ts","displayName":"TimeStamp","showType":[2,1,3],"type":"INTEGER"},{"column":"counter_id","displayName":"MonitorValue","showType":[1,96,3],"type":"INTEGER"},\n' +
+      '    {"column":"value","displayName":"Value","showType":[0,1,3],"type":"INTEGER"}],"inner":{"columns":[{"column":"counter_name","displayName":"","showType":[63],"type":"STRING"},\n' +
+      '    {"column":"counter_id","displayName":"","showType":[0,2],"type":"INTEGER"}],"tableName":"mock_plugin_counterobj_table"},"tableName":"mock_plugin_counter_table"},\n' +
+      '    {"columns":[{"column":"start_ts","displayName":"startts","showType":[2,3],"type":"INTEGER"},{"column":"end_ts","displayName":"endts","showType":[2,10,3],"type":"INTEGER"},\n' +
+      '    {"column":"slice_id","displayName":"slice_id","showType":[2,4,3],"type":"INTEGER"},{"column":"value","displayName":"Value","showType":[2,3],"type":"INTEGER"}],\n' +
+      '    "inner":{"columns":[{"column":"slice_name","displayName":"","showType":[6],"type":"STRING"},{"column":"slice_id","displayName":"","showType":[12,0],"type":"INTEGER"}],\n' +
       '    "tableName":"mock_plugin_sliceobj_table"},"tableName":"mock_plugin_slice_table"}]}}';
+    let dataSliceMap = {
+      jsonConfig: sdkSliceJsonCofigStr,
+    };
     let datamap = {
-      jsonConfig: jsonCofigStr,
       disPlayName: 'common_mock',
       pluginName: 'mock-plugin',
+      jsonConfig: sdkSliceJsonCofigStr,
     };
-    map.set('1', datamap);
+    map.set('1', dataSliceMap);
     SpSystemTrace.SDK_CONFIG_MAP = map;
     let data = {
       cpus: [],
-      threadIds: [],
-      trackIds: [],
-      funTids: [],
-      heapIds: [],
+      threadIds: [12, 787, 56, 11],
+      trackIds: [52, 652, 23, 2],
+      funTids: [4, 45, 9],
+      heapIds: [95, 4],
       nativeMemory: [],
-      cpuAbilityIds: [],
-      memoryAbilityIds: [],
-      diskAbilityIds: [],
-      networkAbilityIds: [],
-      leftNs: 0,
-      rightNs: 0,
+      cpuAbilityIds: [120, 41, 2],
+      memoryAbilityIds: [63, 1],
+      diskAbilityIds: [56, 1],
+      networkAbilityIds: [36, 11],
+      leftNs: 1236461,
+      rightNs: 96641021,
       hasFps: false,
       statisticsSelectData: [],
-      perfSampleIds: [],
-      perfCpus: [],
+      perfSampleIds: [12, 15, 112],
+      perfCpus: [0, 1],
       perfProcess: [],
       perfThread: [],
       perfAll: false,
-      sdkSliceIds: ['a-b', 'b-c', 'd-e'],
+      sdkSliceIds: ['a-b', 'd-e', 'a'],
     };
+    map.set('1', datamap);
+    SpSystemTrace.SDK_CONFIG_MAP = map;
     slice.tblSdkSlice.recycleDataSource = jest.fn(() => data);
     slice.data = data;
     expect(slice.data).toBeUndefined();
@@ -163,36 +168,13 @@ describe('TabPaneSdkSlice Test', () => {
     ).toBeUndefined();
   });
 
-  it('TabPaneSdkSliceTest05', () => {
-    expect(tabPaneSdkSlice.initHtml()).toMatchInlineSnapshot(`
-"
-<style>
-.sdk-slice-table{
-    height: 20px;
-    margin-bottom: 5px;
-}
-:host{
-    padding: 10px 10px;
-    flex-direction: column;
-    display: flex;
-}
-</style>
-<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" class="sdk-slice-tbl" style="height: auto">
-</lit-table>
-        "
-`);
-  });
   it('TabPaneSdkSliceTest06', () => {
-    expect(tabPaneSdkSlice.isDateIntersection(5,5,1,6)).toBeTruthy();
+    expect(tabPaneSdkSlice.isDateIntersection(5, 5, 1, 6)).toBeTruthy();
   });
   it('TabPaneSdkSliceTest07', () => {
-    expect(tabPaneSdkSlice.isDateIntersection(5,5,1,6)).toBeTruthy();
+    expect(tabPaneSdkSlice.isDateIntersection(5, 5, 1, 6)).toBeTruthy();
   });
   it('TabPaneSdkSliceTest08', () => {
-    expect(tabPaneSdkSlice.isDateIntersection(1,5,5,3)).toBeTruthy();
+    expect(tabPaneSdkSlice.isDateIntersection(1, 5, 5, 3)).toBeTruthy();
   });
 });
diff --git a/ide/test/trace/component/trace/sheet/task/TabPaneTaskFrames.test.ts b/ide/test/trace/component/trace/sheet/task/TabPaneTaskFrames.test.ts
index c620becf8a55b0b0b2ea74f008d46717e6890357..cac6170ff3da06802d8ea99c40219a06bf978e14 100644
--- a/ide/test/trace/component/trace/sheet/task/TabPaneTaskFrames.test.ts
+++ b/ide/test/trace/component/trace/sheet/task/TabPaneTaskFrames.test.ts
@@ -18,8 +18,8 @@ import { TabPaneTaskFrames } from '../../../../../../dist/trace/component/trace/
 // @ts-ignore
 import { FuncStruct } from '../../../../../../dist/trace/database/ui-worker/ProcedureWorkerFunc.js';
 // @ts-ignore
-import {SpSystemTrace} from '../../../../../../dist/trace/component/SpSystemTrace.js';
-import {queryTaskListByExecuteTaskIds} from "../../../../../../src/trace/database/SqlLite.js";
+import { SpSystemTrace } from '../../../../../../dist/trace/component/SpSystemTrace.js';
+import { queryTaskListByExecuteTaskIds } from '../../../../../../src/trace/database/SqlLite.js';
 
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
@@ -52,313 +52,311 @@ describe('TabPaneTaskFrames Test', () => {
   ]);
 
   let mockQueryConcurrencyTask = sqlite.queryConcurrencyTask;
-  mockQueryConcurrencyTask.mockResolvedValue(
-      [
-        {
-          "tid": 28573,
-          "ipid": 33,
-          "funName": "H:Task Perform: taskId : 2, executeId : 2",
-          "startTs": 26020542893000,
-          "dur": 4999979000,
-          "id": 310,
-          "priority": 1,
-          "allocationTaskRow": 294,
-          "executeTaskRow": 310,
-          "returnTaskRow": 785,
-          "executeId": 2
-        },
-        {
-          "tid": 28599,
-          "ipid": 33,
-          "funName": "H:Task Perform: taskId : 3, executeId : 3",
-          "startTs": 26020550419000,
-          "dur": 5001432000,
-          "id": 321,
-          "priority": 1,
-          "allocationTaskRow": 297,
-          "executeTaskRow": 321,
-          "returnTaskRow": 797,
-          "executeId": 3
-        },
-        {
-          "tid": 28600,
-          "ipid": 33,
-          "funName": "H:Task Perform: taskId : 4, executeId : 4",
-          "startTs": 26020550826000,
-          "dur": 5001023000,
-          "id": 331,
-          "priority": 1,
-          "allocationTaskRow": 300,
-          "executeTaskRow": 331,
-          "returnTaskRow": 799,
-          "executeId": 4
-        }
-      ]
-  );
+  mockQueryConcurrencyTask.mockResolvedValue([
+    {
+      tid: 28573,
+      ipid: 33,
+      funName: 'H:Task Perform: taskId : 2, executeId : 2',
+      startTs: 26020542893000,
+      dur: 4999979000,
+      id: 310,
+      priority: 1,
+      allocationTaskRow: 294,
+      executeTaskRow: 310,
+      returnTaskRow: 785,
+      executeId: 2,
+    },
+    {
+      tid: 28599,
+      ipid: 33,
+      funName: 'H:Task Perform: taskId : 3, executeId : 3',
+      startTs: 26020550419000,
+      dur: 5001432000,
+      id: 321,
+      priority: 1,
+      allocationTaskRow: 297,
+      executeTaskRow: 321,
+      returnTaskRow: 797,
+      executeId: 3,
+    },
+    {
+      tid: 28600,
+      ipid: 33,
+      funName: 'H:Task Perform: taskId : 4, executeId : 4',
+      startTs: 26020550826000,
+      dur: 5001023000,
+      id: 331,
+      priority: 1,
+      allocationTaskRow: 300,
+      executeTaskRow: 331,
+      returnTaskRow: 799,
+      executeId: 4,
+    },
+  ]);
 
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK = new Map();
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(87, {
-    "id": 87,
-    "ts": 26015536047000,
-    "dur": 168000,
-    "callid": 63,
-    "cat": null,
-    "identify": 7,
-    "name": "H:Task Allocation: taskId : 1, executeId : 1, priority : 1, executeState : 1",
-    "depth": 3,
-    "cookie": null,
-    "parent_id": 86,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 87,
+    ts: 26015536047000,
+    dur: 168000,
+    callid: 63,
+    cat: null,
+    identify: 7,
+    name: 'H:Task Allocation: taskId : 1, executeId : 1, priority : 1, executeState : 1',
+    depth: 3,
+    cookie: null,
+    parent_id: 86,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
+  });
+  SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(99, {
+    id: 99,
+    ts: 26015539134000,
+    dur: 5001738000,
+    callid: 111,
+    cat: null,
+    identify: 10,
+    name: 'H:Task Perform: taskId : 1, executeId : 1',
+    depth: 1,
+    cookie: null,
+    parent_id: 95,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
-  SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(99 , {
-    "id": 99,
-    "ts": 26015539134000,
-    "dur": 5001738000,
-    "callid": 111,
-    "cat": null,
-    "identify": 10,
-    "name": "H:Task Perform: taskId : 1, executeId : 1",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 95,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
-  } );
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(292, {
-    "id": 292,
-    "ts": 26020541020000,
-    "dur": 2526000,
-    "callid": 63,
-    "cat": null,
-    "identify": 15,
-    "name": "H:Task PerformTask End: taskId : 1, executeId : 1, performResult : IsCanceled",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 291,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 292,
+    ts: 26020541020000,
+    dur: 2526000,
+    callid: 63,
+    cat: null,
+    identify: 15,
+    name: 'H:Task PerformTask End: taskId : 1, executeId : 1, performResult : IsCanceled',
+    depth: 1,
+    cookie: null,
+    parent_id: 291,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(294, {
-    "id": 294,
-    "ts": 26020541698000,
-    "dur": 44000,
-    "callid": 63,
-    "cat": null,
-    "identify": 7,
-    "name": "H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1",
-    "depth": 3,
-    "cookie": null,
-    "parent_id": 293,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 294,
+    ts: 26020541698000,
+    dur: 44000,
+    callid: 63,
+    cat: null,
+    identify: 7,
+    name: 'H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1',
+    depth: 3,
+    cookie: null,
+    parent_id: 293,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(297, {
-    "id": 297,
-    "ts": 26020541828000,
-    "dur": 196000,
-    "callid": 63,
-    "cat": null,
-    "identify": 7,
-    "name": "H:Task Allocation: taskId : 3, executeId : 3, priority : 1, executeState : 1",
-    "depth": 3,
-    "cookie": null,
-    "parent_id": 295,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 297,
+    ts: 26020541828000,
+    dur: 196000,
+    callid: 63,
+    cat: null,
+    identify: 7,
+    name: 'H:Task Allocation: taskId : 3, executeId : 3, priority : 1, executeState : 1',
+    depth: 3,
+    cookie: null,
+    parent_id: 295,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(300, {
-    "id": 300,
-    "ts": 26020542123000,
-    "dur": 572000,
-    "callid": 63,
-    "cat": null,
-    "identify": 7,
-    "name": "H:Task Allocation: taskId : 4, executeId : 4, priority : 1, executeState : 1",
-    "depth": 3,
-    "cookie": null,
-    "parent_id": 298,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 300,
+    ts: 26020542123000,
+    dur: 572000,
+    callid: 63,
+    cat: null,
+    identify: 7,
+    name: 'H:Task Allocation: taskId : 4, executeId : 4, priority : 1, executeState : 1',
+    depth: 3,
+    cookie: null,
+    parent_id: 298,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(310, {
-    "id": 310,
-    "ts": 26020542893000,
-    "dur": 4999979000,
-    "callid": 111,
-    "cat": null,
-    "identify": 10,
-    "name": "H:Task Perform: taskId : 2, executeId : 2",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 309,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 310,
+    ts: 26020542893000,
+    dur: 4999979000,
+    callid: 111,
+    cat: null,
+    identify: 10,
+    name: 'H:Task Perform: taskId : 2, executeId : 2',
+    depth: 1,
+    cookie: null,
+    parent_id: 309,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(321, {
-    "id": 321,
-    "ts": 26020550419000,
-    "dur": 5001432000,
-    "callid": 152,
-    "cat": null,
-    "identify": 10,
-    "name": "H:Task Perform: taskId : 3, executeId : 3",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 320,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 321,
+    ts: 26020550419000,
+    dur: 5001432000,
+    callid: 152,
+    cat: null,
+    identify: 10,
+    name: 'H:Task Perform: taskId : 3, executeId : 3',
+    depth: 1,
+    cookie: null,
+    parent_id: 320,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(331, {
-    "id": 331,
-    "ts": 26020550826000,
-    "dur": 5001023000,
-    "callid": 153,
-    "cat": null,
-    "identify": 10,
-    "name": "H:Task Perform: taskId : 4, executeId : 4",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 329,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 331,
+    ts: 26020550826000,
+    dur: 5001023000,
+    callid: 153,
+    cat: null,
+    identify: 10,
+    name: 'H:Task Perform: taskId : 4, executeId : 4',
+    depth: 1,
+    cookie: null,
+    parent_id: 329,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(785, {
-    "id": 785,
-    "ts": 26025543022000,
-    "dur": 30000,
-    "callid": 63,
-    "cat": null,
-    "identify": 4,
-    "name": "H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 784,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 785,
+    ts: 26025543022000,
+    dur: 30000,
+    callid: 63,
+    cat: null,
+    identify: 4,
+    name: 'H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful',
+    depth: 1,
+    cookie: null,
+    parent_id: 784,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(797, {
-    "id": 797,
-    "ts": 26025551976000,
-    "dur": 28000,
-    "callid": 63,
-    "cat": null,
-    "identify": 4,
-    "name": "H:Task PerformTask End: taskId : 3, executeId : 3, performResult : Successful",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 794,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 797,
+    ts: 26025551976000,
+    dur: 28000,
+    callid: 63,
+    cat: null,
+    identify: 4,
+    name: 'H:Task PerformTask End: taskId : 3, executeId : 3, performResult : Successful',
+    depth: 1,
+    cookie: null,
+    parent_id: 794,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
   SpSystemTrace.DATA_TASK_POOL_CALLSTACK.set(799, {
-    "id": 799,
-    "ts": 26025552025000,
-    "dur": 13000,
-    "callid": 63,
-    "cat": null,
-    "identify": 4,
-    "name": "H:Task PerformTask End: taskId : 4, executeId : 4, performResult : Successful",
-    "depth": 1,
-    "cookie": null,
-    "parent_id": 798,
-    "argsetid": null,
-    "chainId": null,
-    "spanId": null,
-    "parentSpanId": null,
-    "flag": null,
-    "args": null
+    id: 799,
+    ts: 26025552025000,
+    dur: 13000,
+    callid: 63,
+    cat: null,
+    identify: 4,
+    name: 'H:Task PerformTask End: taskId : 4, executeId : 4, performResult : Successful',
+    depth: 1,
+    cookie: null,
+    parent_id: 798,
+    argsetid: null,
+    chainId: null,
+    spanId: null,
+    parentSpanId: null,
+    flag: null,
+    args: null,
   });
 
   it('TabPaneTaskFrames Test01', function () {
     TabPaneTaskFrames.TaskArray = [
       {
-        "startTs": 5628901000,
-        "dur": 4999979000,
-        "funName": "H:Task Perform: taskId : 2, executeId : 2",
-        "argsetid": null,
-        "depth": 1,
-        "id": 310,
-        "frame": {
-          "x": 526,
-          "y": 20,
-          "width": 469,
-          "height": 20
+        startTs: 5628901000,
+        dur: 4999979000,
+        funName: 'H:Task Perform: taskId : 2, executeId : 2',
+        argsetid: null,
+        depth: 1,
+        id: 310,
+        frame: {
+          x: 526,
+          y: 20,
+          width: 469,
+          height: 20,
         },
-        "textMetricsWidth": 185.634765625
+        textMetricsWidth: 185.634765625,
       },
       {
-        "startTs": 5627706000,
-        "dur": 44000,
-        "funName": "H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1",
-        "argsetid": null,
-        "depth": 3,
-        "id": 294,
-        "frame": {
-          "x": 526,
-          "y": 60,
-          "width": 1,
-          "height": 20
-        }
+        startTs: 5627706000,
+        dur: 44000,
+        funName: 'H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1',
+        argsetid: null,
+        depth: 3,
+        id: 294,
+        frame: {
+          x: 526,
+          y: 60,
+          width: 1,
+          height: 20,
+        },
       },
       {
-        "startTs": 10629030000,
-        "dur": 30000,
-        "funName": "H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful",
-        "argsetid": null,
-        "depth": 1,
-        "id": 785,
-        "frame": {
-          "x": 995,
-          "y": 20,
-          "width": 1,
-          "height": 20
-        }
-      }
+        startTs: 10629030000,
+        dur: 30000,
+        funName: 'H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful',
+        argsetid: null,
+        depth: 1,
+        id: 785,
+        frame: {
+          x: 995,
+          y: 20,
+          width: 1,
+          height: 20,
+        },
+      },
     ];
 
     tabPaneTaskFrames.taskFramesTbl = jest.fn(() => true);
@@ -371,68 +369,66 @@ describe('TabPaneTaskFrames Test', () => {
   it('TabPaneTaskFrames Test02', function () {
     TabPaneTaskFrames.TaskArray = [];
     let mockQueryTaskListByExecuteTaskIds = sqlite.queryTaskListByExecuteTaskIds;
-    mockQueryTaskListByExecuteTaskIds.mockResolvedValue(
-        [
-          {
-            "ipid": 33,
-            "allocationTaskRow": 294,
-            "executeTaskRow": 310,
-            "returnTaskRow": 785,
-            "executeId": 2,
-            "priority": 1
-          },
-          {
-            "ipid": 36,
-            "allocationTaskRow": 300,
-            "executeTaskRow": 331,
-            "returnTaskRow": 799,
-            "executeId": 4,
-            "priority": 1
-          }
-        ]
-    );
+    mockQueryTaskListByExecuteTaskIds.mockResolvedValue([
+      {
+        ipid: 33,
+        allocationTaskRow: 294,
+        executeTaskRow: 310,
+        returnTaskRow: 785,
+        executeId: 2,
+        priority: 1,
+      },
+      {
+        ipid: 36,
+        allocationTaskRow: 300,
+        executeTaskRow: 331,
+        returnTaskRow: 799,
+        executeId: 4,
+        priority: 1,
+      },
+    ]);
     let frameData1 = {
       recordStartNs: 26014913992000,
       leftNs: 7957675110,
       rightNs: 8705376127,
       taskFramesData: [
         {
-          "startTs": 5628901000,
-          "dur": 4999979000,
-          "funName": "H:Task Perform: taskId : 2, executeId : 2",
-          "argsetid": null,
-          "depth": 1,
-          "id": 310,
-          "itid": 111,
-          "ipid": 33,
-          "frame": {
-            "x": 526,
-            "y": 20,
-            "width": 469,
-            "height": 20
+          startTs: 5628901000,
+          dur: 4999979000,
+          funName: 'H:Task Perform: taskId : 2, executeId : 2',
+          argsetid: null,
+          depth: 1,
+          id: 310,
+          itid: 111,
+          ipid: 33,
+          frame: {
+            x: 526,
+            y: 20,
+            width: 469,
+            height: 20,
           },
-          "textMetricsWidth": 185.634765625,
-          "tid": 28573
+          textMetricsWidth: 185.634765625,
+          tid: 28573,
         },
         {
-          "startTs": 5636834000,
-          "dur": 5001023000,
-          "funName": "H:Task Perform: taskId : 4, executeId : 4",
-          "argsetid": null,
-          "depth": 1,
-          "id": 331,
-          "itid": 153,
-          "ipid": 33,
-          "frame": {
-            "x": 527,
-            "y": 20,
-            "width": 469,
-            "height": 20
+          startTs: 5636834000,
+          dur: 5001023000,
+          funName: 'H:Task Perform: taskId : 4, executeId : 4',
+          argsetid: null,
+          depth: 1,
+          id: 331,
+          itid: 153,
+          ipid: 33,
+          frame: {
+            x: 527,
+            y: 20,
+            width: 469,
+            height: 20,
           },
-          "textMetricsWidth": 185.634765625,
-          "tid": 28600
-        }
-      ]
+          textMetricsWidth: 185.634765625,
+          tid: 28600,
+        },
+      ],
     };
     tabPaneTaskFrames.taskFramesTbl = jest.fn(() => true);
     tabPaneTaskFrames.taskFramesTbl!.recycleDataSource = jest.fn(() => true);
@@ -448,37 +444,35 @@ describe('TabPaneTaskFrames Test', () => {
       rightNs: 2563546344,
       taskFramesData: [
         {
-          "startTs": 625142000,
-          "dur": 5001738000,
-          "funName": "H:Task Perform: taskId : 1, executeId : 1",
-          "argsetid": null,
-          "depth": 1,
-          "id": 99,
-          "itid": 111,
-          "ipid": 33,
-          "frame": {
-            "x": 58,
-            "y": 20,
-            "width": 469,
-            "height": 20
+          startTs: 625142000,
+          dur: 5001738000,
+          funName: 'H:Task Perform: taskId : 1, executeId : 1',
+          argsetid: null,
+          depth: 1,
+          id: 99,
+          itid: 111,
+          ipid: 33,
+          frame: {
+            x: 58,
+            y: 20,
+            width: 469,
+            height: 20,
           },
-          "textMetricsWidth": 185.634765625,
-          "tid": 28573
-        }
-      ]
+          textMetricsWidth: 185.634765625,
+          tid: 28573,
+        },
+      ],
     };
     let mockQueryTaskListByExecuteTaskIds = sqlite.queryTaskListByExecuteTaskIds;
-    mockQueryTaskListByExecuteTaskIds.mockResolvedValue(
-        [
-          {
-            "allocationTaskRow": 87,
-            "executeTaskRow": 99,
-            "returnTaskRow": 292,
-            "executeId": 1,
-            "priority": 1
-          }
-        ]
-    );
+    mockQueryTaskListByExecuteTaskIds.mockResolvedValue([
+      {
+        allocationTaskRow: 87,
+        executeTaskRow: 99,
+        returnTaskRow: 292,
+        executeId: 1,
+        priority: 1,
+      },
+    ]);
     tabPaneTaskFrames.taskFramesTbl = jest.fn(() => true);
     tabPaneTaskFrames.taskFramesTbl!.recycleDataSource = jest.fn(() => true);
     tabPaneTaskFrames.data = frameData;
@@ -488,49 +482,49 @@ describe('TabPaneTaskFrames Test', () => {
   it('TabPaneTaskFrames Test04', function () {
     TabPaneTaskFrames.TaskArray = [
       {
-        "startTs": 10628950000,
-        "dur": 49911000,
-        "funName": "H:Task Perform: taskId : 6, executeId : 8",
-        "argsetid": null,
-        "depth": 1,
-        "id": 782,
-        "frame": {
-          "x": 710,
-          "y": 20,
-          "width": 304,
-          "height": 20
+        startTs: 10628950000,
+        dur: 49911000,
+        funName: 'H:Task Perform: taskId : 6, executeId : 8',
+        argsetid: null,
+        depth: 1,
+        id: 782,
+        frame: {
+          x: 710,
+          y: 20,
+          width: 304,
+          height: 20,
         },
-        "tid": 28573,
-        "textMetricsWidth": 185.634765625
+        tid: 28573,
+        textMetricsWidth: 185.634765625,
       },
       {
-        "startTs": 6631912000,
-        "dur": 74000,
-        "funName": "H:Task Allocation: taskId : 6, executeId : 8, priority : 0, executeState : 1",
-        "argsetid": null,
-        "depth": 2,
-        "id": 372,
-        "frame": {
-          "x": 620,
-          "y": 40,
-          "width": 1,
-          "height": 20
-        }
+        startTs: 6631912000,
+        dur: 74000,
+        funName: 'H:Task Allocation: taskId : 6, executeId : 8, priority : 0, executeState : 1',
+        argsetid: null,
+        depth: 2,
+        id: 372,
+        frame: {
+          x: 620,
+          y: 40,
+          width: 1,
+          height: 20,
+        },
       },
       {
-        "startTs": 10679004000,
-        "dur": 56000,
-        "funName": "H:Task PerformTask End: taskId : 6, executeId : 8, performResult : Successful",
-        "argsetid": null,
-        "depth": 1,
-        "id": 806,
-        "frame": {
-          "x": 999,
-          "y": 20,
-          "width": 1,
-          "height": 20
-        }
-      }
+        startTs: 10679004000,
+        dur: 56000,
+        funName: 'H:Task PerformTask End: taskId : 6, executeId : 8, performResult : Successful',
+        argsetid: null,
+        depth: 1,
+        id: 806,
+        frame: {
+          x: 999,
+          y: 20,
+          width: 1,
+          height: 20,
+        },
+      },
     ];
     TabPaneTaskFrames.IsShowConcurrency = true;
     tabPaneTaskFrames.taskFramesTbl = jest.fn(() => true);
@@ -543,8 +537,6 @@ describe('TabPaneTaskFrames Test', () => {
   it('TabPaneTaskFrames Test05', function () {
     tabPaneTaskFrames.taskFramesTbl = jest.fn(() => true);
     tabPaneTaskFrames.taskFramesTbl!.recycleDataSource = jest.fn(() => true);
-    expect(
-        tabPaneTaskFrames.sortByColumn({sort: 1, key: 'taskPriority'})
-    ).toBeUndefined();
+    expect(tabPaneTaskFrames.sortByColumn({ sort: 1, key: 'taskPriority' })).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.test.ts
index 915cadf3645868b37fc0f7140cdb43767d38eed4..8654eb23039ba1629b31457090ac11a4722a0cea 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaSelectVmTracker.test.ts
@@ -21,16 +21,15 @@ jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
   return {};
 });
-
-jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-  return {};
-});
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {};
 });
+jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
+  return {};
+});
 const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
@@ -47,7 +46,7 @@ describe('TabPaneDmaSelectVmTracker Test', () => {
   let val = [
     {
       leftNs: 0,
-      rightNs: 1000,
+      rightNs: 1040,
       startNs: 0,
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.test.ts
index da41104c731e5d869672092dafa537172d46eac6..53ae67525d9172a8d84d4ea61947c910e12dff58 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.test.ts
@@ -16,6 +16,9 @@
 //@ts-ignore
 import { TabPaneDmaVmTracker } from '../../../../../../dist/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTracker.js';
 
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
+
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
@@ -31,8 +34,6 @@ jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () =>
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {};
 });
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
 window.ResizeObserver =
@@ -47,7 +48,7 @@ describe('TabPaneDmaSelectVmTracker Test', () => {
   let val = [
     {
       leftNs: 0,
-      rightNs: 1000,
+      rightNs: 1030,
       startNs: 0,
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.test.ts
index be6d332e54c79141498b77e9e5aef9f2558cce15..8e3cff74923a8c2e7c802cf0cfeeff06136e47dc 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneDmaVmTrackerComparison.test.ts
@@ -47,13 +47,13 @@ describe('TabPaneDmaVmTrackerComparison Test', () => {
   let datalist = [
     {
       name: 'Snapshot2',
-      startNs: 9800526561,
+      startNs: 980052,
       type: 'VmTracker',
       value: 0,
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 478261,
       type: 'VmTracker',
       value: 0,
     },
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.test.ts
index 5f6cc16950694ab14da7efca2baec1a0303998c9..03e904f18b28b34bf4986423acc4d7d2eb21ca3d 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemorySelectVmTracker.test.ts
@@ -21,14 +21,14 @@ jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {};
 });
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
 window.ResizeObserver =
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.test.ts
index 5b6104cdf93f8e569c7fdb09e3e66075e46d1bba..5cdc69282ae7c493ac7fbb1d90280787389e5e40 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTracker.test.ts
@@ -24,11 +24,11 @@ jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js',
 jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {};
 });
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 // @ts-ignore
 window.ResizeObserver =
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.test.ts
index 521ef27f1a89780157317bda256058e9d9b5f927..1e51f2ca6b89b3fae31f1d3c665ae02c5b6fe429 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.test.ts
@@ -12,7 +12,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// @ts-ignore
 import { TabPaneGpuMemoryVmTrackerComparison } from '../../../../../../dist/trace/component/trace/sheet/vmtracker/TabPaneGpuMemoryVmTrackerComparison.js';
 const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
@@ -25,10 +24,8 @@ jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
     removeAttribute: () => {},
   };
 });
-jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 // @ts-ignore
-window.ResizeObserver =
-  window.ResizeObserver ||
+window.ResizeObserver = window.ResizeObserver ||
   jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
@@ -47,13 +44,13 @@ describe('TabPaneGpuMemoryVmTrackerComparison Test', () => {
   let datalist = [
     {
       name: 'Snapshot2',
-      startNs: 9800526561,
+      startNs: 98012526561,
       type: 'VmTracker',
       value: 0,
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 47735214061,
       type: 'VmTracker',
       value: 0,
     },
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.test.ts
index abe5b570a41b74d177f72cb2b4d3b4432b55b17c..d77d7bc1a587d876495ca412136070c4c582d7e6 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgPinComparisonVM.test.ts
@@ -19,13 +19,13 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
   return {};
 });
+jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {
     snapshotDataSource: () => {},
     removeAttribute: () => {},
   };
 });
-jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 // @ts-ignore
 window.ResizeObserver =
   window.ResizeObserver ||
@@ -45,32 +45,29 @@ describe('TabPanePurgPinComparisonVM Test', () => {
     },
     {
       value: 25165824,
-      name: '24.00MB',
+      name: '25.00MB',
     },
     {
       value: 25165824,
-      name: '24.00MB',
+      name: '26.00MB',
     },
   ]);
   let data = [
     {
-      name: 'Snapshot1',
-      startNs: 4778214061,
-      type: 'ability',
+      name: 'Snapshot0',
+      startNs: 4778211,
       value: 0,
     },
   ];
   let datalist = [
     {
       name: 'Snapshot2',
-      startNs: 9800526561,
-      type: 'ability',
+      startNs: 98526561,
       value: 0,
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
-      type: 'ability',
+      startNs: 48214061,
       value: 0,
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.test.ts
index 8aa8849ff64bbb3d51c893cc97c1ae7e2bc74d3b..1e15d28a14881b57514c4ca3f1743898f2bfc287 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPanePurgTotalComparisonVM.test.ts
@@ -21,13 +21,13 @@ jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
   return {};
 });
+jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {
     snapshotDataSource: () => {},
     removeAttribute: () => {},
   };
 });
-jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 // @ts-ignore
 window.ResizeObserver =
   window.ResizeObserver ||
@@ -42,36 +42,35 @@ describe('TabPanePurgTotalComparisonVM Test', () => {
   let queryProcessPurgeableSelectionTab = sqlite.queryProcessPurgeableSelectionTab;
   queryProcessPurgeableSelectionTab.mockResolvedValue([
     {
-      value: 25165824,
+      value: 21365824,
       name: '24.00MB',
     },
     {
-      value: 25165824,
+      value: 221824,
       name: '24.00MB',
     },
     {
-      value: 25165824,
+      value: 2571824,
       name: '24.00MB',
     },
   ]);
   let data = [
     {
-      name: 'Snapshot1',
-      startNs: 4778214061,
-      type: 'ability',
+      name: 'Snapshot0',
+      startNs: 172161,
       value: 0,
     },
   ];
   let datalist = [
     {
       name: 'Snapshot2',
-      startNs: 9800526561,
+      startNs: 2826561,
       type: 'ability',
       value: 0,
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 5714061,
       type: 'ability',
       value: 0,
     },
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.test.ts
index 65f0de64cee715945269dfec676e602d2b59a626..9f13d387d20c092b33f34ff1009429e7a21a4391 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShm.test.ts
@@ -18,10 +18,6 @@ import { TabPaneVmTrackerShm } from '../../../../../../dist/trace/component/trac
 
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 
-jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
-  return {};
-});
-
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
@@ -33,7 +29,9 @@ jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
 });
 const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
 jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
+jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
+  return {};
+});
 // @ts-ignore
 window.ResizeObserver =
   window.ResizeObserver ||
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmComparison.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmComparison.test.ts
index eac5f4865b5f6561b7cf3ffbe2f6dad2d72a50b3..477974cc2dfe3aabcac494feeddd7328ec45caeb 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmComparison.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmComparison.test.ts
@@ -64,20 +64,20 @@ describe('TabPaneVmTrackerShmComparison Test', () => {
   ]);
   let data = [
     {
-      name: 'Snapshot1',
-      startNs: 4778214061,
+      name: 'Snapshot0',
+      startNs: 8214061,
       value: 0,
     },
   ];
   let datalist = [
     {
       name: 'Snapshot2',
-      startNs: 9800526561,
+      startNs: 9806561,
       value: 0,
     },
     {
       name: 'Snapshot1',
-      startNs: 4778214061,
+      startNs: 47781,
       value: 0,
     },
   ];
diff --git a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.test.ts b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.test.ts
index 1c88d8a53a5bdfd847d22fe2e9e2507a0d3600f6..7b80126edd1dfcb86b07375b83e9d9cbf87b583c 100644
--- a/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.test.ts
+++ b/ide/test/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.test.ts
@@ -15,16 +15,14 @@
 
 //@ts-ignore
 import { TabPaneVmTrackerShmSelection } from '../../../../../../dist/trace/component/trace/sheet/vmtracker/TabPaneVmTrackerShmSelection.js';
-//@ts-ignore
-import { HeapDataInterface } from '../../../../../../dist/js-heap/HeapDataInterface.js';
-//@ts-ignore
-import { SpArkTsChart } from '../../../../../../dist/trace/component/chart/SpArkTsChart.js';
 
 jest.mock('../../../../../../dist/js-heap/model/DatabaseStruct.js', () => {});
 
 jest.mock('../../../../../../dist/base-ui/select/LitSelect.js', () => {
   return {};
 });
+const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
+jest.mock('../../../../../../dist/trace/database/SqlLite.js');
 
 jest.mock('../../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
@@ -35,9 +33,6 @@ jest.mock('../../../../../../dist/trace/component/trace/base/TraceRow.js', () =>
 jest.mock('../../../../../../dist/base-ui/table/lit-table.js', () => {
   return {};
 });
-const sqlite = require('../../../../../../dist/trace/database/SqlLite.js');
-jest.mock('../../../../../../dist/trace/database/SqlLite.js');
-
 // @ts-ignore
 window.ResizeObserver =
   window.ResizeObserver ||
@@ -68,8 +63,8 @@ describe('TabPaneVmTrackerShmSelection Test', () => {
   ]);
   let data = {
     startNs: 0,
-    endNs: 0,
-    dur: 0,
+    endNs: 3421,
+    dur: 3421,
     name: '',
     textWidth: 0,
     value: 0,
@@ -80,10 +75,10 @@ describe('TabPaneVmTrackerShmSelection Test', () => {
       startNs: 0,
       endNs: 0,
       dur: 0,
-      name: '',
+      name: 'b',
       textWidth: 0,
       value: 0,
-      type: '',
+      type: 'b',
     },
     {
       startNs: 1,
diff --git a/ide/test/trace/component/trace/timer-shaft/SportRuler.test.ts b/ide/test/trace/component/trace/timer-shaft/SportRuler.test.ts
index 1419db5143713df9e45f53ca4fb30dc64f1ab6e4..d3f0d5ca888dee08ffa94ddb9fd367f6de47be3f 100644
--- a/ide/test/trace/component/trace/timer-shaft/SportRuler.test.ts
+++ b/ide/test/trace/component/trace/timer-shaft/SportRuler.test.ts
@@ -15,15 +15,12 @@
 
 // @ts-ignore
 import { EventCenter } from '../../../../../dist/trace/component/trace/base/EventCenter.js';
-
 jest.mock('../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
   return {};
 });
-
 jest.mock('../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
   return {};
 });
-
 jest.mock('../../../../../dist/trace/component/SpSystemTrace.js', () => {
   return {
     CurrentSlicesTime:() => {},
@@ -51,46 +48,38 @@ window.ResizeObserver = window.ResizeObserver ||
       observe: jest.fn(),
       unobserve: jest.fn(),
     }));
-
-
 declare global {
   interface Window {
     SmartEvent: {
       UI: {
+        TraceRowComplete: string; //Triggered after the row component has finished loading data
         MenuTrace: string; //selected menu trace
         RefreshCanvas: string; //selected menu trace
-        SliceMark: string; //Set the tag scope
         TimeRange: string; //Set the timeline range
-        TraceRowComplete: string; //Triggered after the row component has finished loading data
+        SliceMark: string; //Set the tag scope
       };
     };
-
-    subscribe(evt: string, fn: (b: any) => void): void;
-
     subscribeOnce(evt: string, fn: (b: any) => void): void;
-
-    unsubscribe(evt: string, fn: (b: any) => void): void;
-
-    publish(evt: string, data: any): void;
-
     clearTraceRowComplete(): void;
+    subscribe(evt: string, fn: (b: any) => void): void;
+    publish(evt: string, data: any): void;
+    unsubscribe(evt: string, fn: (b: any) => void): void;
   }
 }
 
 window.SmartEvent = {
   UI: {
     MenuTrace: 'SmartEvent-UI-MenuTrace',
-    RefreshCanvas: 'SmartEvent-UI-RefreshCanvas',
     SliceMark: 'SmartEvent-UI-SliceMark',
     TimeRange: 'SmartEvent-UI-TimeRange',
+    RefreshCanvas: 'SmartEvent-UI-RefreshCanvas',
     TraceRowComplete: 'SmartEvent-UI-TraceRowComplete',
   },
 };
-
-Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn);
 Window.prototype.unsubscribe = (ev, fn) => EventCenter.unsubscribe(ev, fn);
-Window.prototype.publish = (ev, data) => EventCenter.publish(ev, data);
+Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn);
 Window.prototype.subscribeOnce = (ev, data) => EventCenter.subscribeOnce(ev, data);
+Window.prototype.publish = (ev, data) => EventCenter.publish(ev, data);
 Window.prototype.clearTraceRowComplete = () => EventCenter.clearTraceRowComplete();
 
 describe('SportRuler Test', () => {
@@ -156,26 +145,26 @@ describe('SportRuler Test', () => {
     numbers.push(56);
     sportRuler.flagList = [
       {
-        totalNS: 10000,
-        startX: 0,
-        endX: 1000,
+        totalNS: 10550,
+        startX: 6,
+        endX: 109550,
         startNS: 0,
-        endNS: 10000,
+        endNS: 10550,
         xs: numbers,
-        xsTxt: ['s', 'f'],
+        xsTxt: ['s', 'f', ''],
       },
     ];
     sportRuler.flagList.xs = jest.fn(() => numbers);
     let flags = new Array<Flag>();
     flags.push({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      time: 20,
-      color: '',
+      x: 10,
+      y: 11,
+      width: 10,
+      height: 13,
+      time: 330,
+      color: '#3e340c',
       selected: false,
-      text: '',
+      text: 'w',
       hidden: false,
       type: '',
     });
@@ -186,14 +175,14 @@ describe('SportRuler Test', () => {
   it('SportRulerTest09', function () {
     let flags = new Array<Flag>();
     flags.push({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      time: 20,
-      color: '',
+      x: 6,
+      y: 6,
+      width: 15,
+      height: 15,
+      time: 260,
+      color: '#361f1f',
       selected: false,
-      text: '',
+      text: 'callui',
       hidden: false,
       type: '',
     });
@@ -207,8 +196,8 @@ describe('SportRuler Test', () => {
     sportRuler.draw = jest.fn(() => true);
     expect(
       sportRuler.mouseMove({
-        offsetX: 10000,
-        offsetY: 10000,
+        offsetX: 10005,
+        offsetY: 10005,
       })
     ).toBeUndefined();
   });
@@ -221,14 +210,14 @@ describe('SportRuler Test', () => {
   it('SportRulerTest12', function () {
     let flags = new Array<Flag>();
     flags.push({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
+      x: 3,
+      y: 3,
+      width: 12,
+      height: 12,
       time: 0,
       color: '',
-      selected: false,
-      text: '',
+      selected: true,
+      text: 'abb',
       hidden: false,
       type: '',
     });
@@ -239,14 +228,14 @@ describe('SportRuler Test', () => {
   it('SportRulerTest13', function () {
     let flags = new Array<Flag>();
     flags.push({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      time: 1000,
+      x: 7,
+      y: 7,
+      width: 2,
+      height: 2,
+      time: 102200,
       color: '',
       selected: false,
-      text: '',
+      text: 'com.ohos.callui',
       hidden: false,
       type: 'triangle',
     });
@@ -257,16 +246,16 @@ describe('SportRuler Test', () => {
   it('SportRulerTest14', function () {
     let flags = new Array<Flag>();
     flags.push({
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      time: 0,
-      color: '',
+      x: 3,
+      y: 3,
+      width: 67,
+      height: 67,
+      time: 30,
+      color: '#8e4f22',
       selected: false,
-      text: '',
-      hidden: false,
-      type: 'triangle',
+      text: 'ohos',
+      hidden: true,
+      type: 'triangles',
     });
     sportRuler.flagList = flags;
     sportRuler.drawTriangle(1000, 'square');
@@ -275,19 +264,19 @@ describe('SportRuler Test', () => {
   it('SportRulerTest22', function () {
     let flags = new Array<Flag>();
     flags.push({
-      x: 0,
+      x: 3,
       y: 0,
-      width: 0,
-      height: 0,
+      width: 33,
+      height: 33,
       time: 0,
-      color: '',
-      selected: false,
-      text: '',
+      color: '#689e3e',
+      selected: true,
+      text: 'fase',
       hidden: false,
-      type: 'triangle',
+      type: 'square',
     });
     sportRuler.flagList = flags;
-    sportRuler.drawTriangle(1000, 'inverted');
+    sportRuler.drawTriangle(10000, 'inverted');
   });
 
   it('SportRulerTest17', function () {
diff --git a/ide/test/trace/component/trace/timer-shaft/TabPaneFlag.test.ts b/ide/test/trace/component/trace/timer-shaft/TabPaneFlag.test.ts
index 4326b48b261a34ca047a382fdb74314c083f2c89..08b34f34a5e5bdbd29a4baa65701846243fcbb5d 100644
--- a/ide/test/trace/component/trace/timer-shaft/TabPaneFlag.test.ts
+++ b/ide/test/trace/component/trace/timer-shaft/TabPaneFlag.test.ts
@@ -58,55 +58,4 @@ describe('TabPaneFlag Test', () => {
       })
     ).toBeUndefined();
   });
-
-  it('TabPaneFlagTest04', function () {
-    expect(tabPaneFlag.initHtml()).toMatchInlineSnapshot(`
-"
-        <style>
-        :host{
-            display: flex;
-            flex-direction: column;
-            padding: 10px 10px;
-        }
-        .notes-editor-panel{
-        display: flex;align-items: center
-        }
-        .flag-text{
-        font-size: 14px;color: var(--dark-color1,#363636c7);font-weight: 300;
-        }
-        .flag-input{
-            border-radius: 4px;
-            border: 1px solid var(--dark-border,#dcdcdc);
-            color: var(--dark-color1,#212121);
-            background: var(--dark-background5,#FFFFFF);
-            padding: 3px;
-            margin: 0 10px;
-        }
-        .flag-input:focus{
-            outline: none;
-            box-shadow: 1px 1px 1px var(--bark-prompt,#bebebe);
-        }
-        .notes-editor-panel button {
-            background: var(--dark-border1,#262f3c);
-            color: white;
-            border-radius: 10px;
-            font-size: 10px;
-            height: 22px;
-            line-height: 18px;
-            min-width: 7em;
-            margin: auto 0 auto 1rem;
-
-            border: none;
-            cursor: pointer;
-            outline: inherit;
-        </style>
-        <div class="notes-editor-panel">
-            <div class="flag-text">Annotation at <span id="flag-time"></span></div>
-            <input style="flex: 1" class="flag-input" type="text" id="text-input"/>
-            <span class="flag-text">Change color: <input style="background: var(--dark-background5,#FFFFFF);" type="color" id="color-input"/></span>
-            <button id="remove-flag">Remove</button>
-        </div>
-        "
-`);
-  });
 });
diff --git a/ide/test/trace/component/trace/timer-shaft/TimeRuler.test.ts b/ide/test/trace/component/trace/timer-shaft/TimeRuler.test.ts
index 8fef46046648efae104f2f90542ce55163e56b11..d840f3d20ecdeec6611e2ac99988de495e95839d 100644
--- a/ide/test/trace/component/trace/timer-shaft/TimeRuler.test.ts
+++ b/ide/test/trace/component/trace/timer-shaft/TimeRuler.test.ts
@@ -15,59 +15,49 @@
 
 // @ts-ignore
 import { EventCenter } from '../../../../../dist/trace/component/trace/base/EventCenter.js';
-
-jest.mock('../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
-  return {};
-});
-
 // @ts-ignore
 import { TimeRuler } from '../../../../../dist/trace/component/trace/timer-shaft/TimeRuler.js';
 // @ts-ignore
 import { TimerShaftElement } from '../../../../../dist/trace/component/trace/TimerShaftElement.js';
 
-jest.mock('../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-  return {};
-});
-
 declare global {
   interface Window {
     SmartEvent: {
       UI: {
         MenuTrace: string; //selected menu trace
-        RefreshCanvas: string; //selected menu trace
         SliceMark: string; //Set the tag scope
-        TimeRange: string; //Set the timeline range
+        RefreshCanvas: string; //selected menu trace
         TraceRowComplete: string; //Triggered after the row component has finished loading data
+        TimeRange: string; //Set the timeline range
       };
     };
-
     subscribe(evt: string, fn: (b: any) => void): void;
-
-    subscribeOnce(evt: string, fn: (b: any) => void): void;
-
     unsubscribe(evt: string, fn: (b: any) => void): void;
-
     publish(evt: string, data: any): void;
-
     clearTraceRowComplete(): void;
+    subscribeOnce(evt: string, fn: (b: any) => void): void;
   }
 }
-
+jest.mock('../../../../../dist/trace/component/trace/base/TraceRow.js', () => {
+  return {};
+});
+jest.mock('../../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
+  return {};
+});
 window.SmartEvent = {
   UI: {
     MenuTrace: 'SmartEvent-UI-MenuTrace',
     RefreshCanvas: 'SmartEvent-UI-RefreshCanvas',
-    SliceMark: 'SmartEvent-UI-SliceMark',
     TimeRange: 'SmartEvent-UI-TimeRange',
     TraceRowComplete: 'SmartEvent-UI-TraceRowComplete',
+    SliceMark: 'SmartEvent-UI-SliceMark',
   },
 };
-
 Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn);
 Window.prototype.unsubscribe = (ev, fn) => EventCenter.unsubscribe(ev, fn);
-Window.prototype.publish = (ev, data) => EventCenter.publish(ev, data);
 Window.prototype.subscribeOnce = (ev, data) => EventCenter.subscribeOnce(ev, data);
 Window.prototype.clearTraceRowComplete = () => EventCenter.clearTraceRowComplete();
+Window.prototype.publish = (ev, data) => EventCenter.publish(ev, data);
 
 describe('TimeRuler Test', () => {
   const canvas = document.createElement('canvas');
diff --git a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.test.ts b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.test.ts
index cf49ed5db6c5fbce1af18637cb2a4f213e2c5171..878134525ca15a0ff7578e238c9122e81af902e7 100644
--- a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.test.ts
+++ b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerFileSystem.test.ts
@@ -402,20 +402,20 @@ describe('ProcedureLogicWorkerFileSystem Test', () => {
     expect(virtualMemoryEvent).toBeDefined();
   });
   it('procedureLogicWorkerFileSystemTest47', function () {
-    let procedureLogicWorkerFileSystem   = new ProcedureLogicWorkerFileSystem ();
-    expect(procedureLogicWorkerFileSystem.queryFileSysEvents(1,0,[1],true)).toBeUndefined();
+    let procedureLogicWorkerFileSystem = new ProcedureLogicWorkerFileSystem();
+    expect(procedureLogicWorkerFileSystem.queryFileSysEvents(1, 0, [1], true)).toBeUndefined();
   });
   it('procedureLogicWorkerFileSystemTest48', function () {
-    let procedureLogicWorkerFileSystem   = new ProcedureLogicWorkerFileSystem ();
-    expect(procedureLogicWorkerFileSystem.queryVMEvents(1,0,[1])).toBeUndefined();
+    let procedureLogicWorkerFileSystem = new ProcedureLogicWorkerFileSystem();
+    expect(procedureLogicWorkerFileSystem.queryVMEvents(1, 0, [1])).toBeUndefined();
   });
   it('procedureLogicWorkerFileSystemTest49', function () {
-    let procedureLogicWorkerFileSystem   = new ProcedureLogicWorkerFileSystem ();
-    expect(procedureLogicWorkerFileSystem.queryVMEvents(1,0,[1])).toBeUndefined();
+    let procedureLogicWorkerFileSystem = new ProcedureLogicWorkerFileSystem();
+    expect(procedureLogicWorkerFileSystem.queryVMEvents(1, 0, [1])).toBeUndefined();
   });
   it('procedureLogicWorkerFileSystemTest50', function () {
-    let procedureLogicWorkerFileSystem   = new ProcedureLogicWorkerFileSystem ();
-    expect(procedureLogicWorkerFileSystem.queryIOEvents(1,0,[1])).toBeUndefined();
+    let procedureLogicWorkerFileSystem = new ProcedureLogicWorkerFileSystem();
+    expect(procedureLogicWorkerFileSystem.queryIOEvents(1, 0, [1])).toBeUndefined();
   });
   it('procedureLogicWorkerFileSystemTest51', function () {
     let procedureLogicWorkerFileSystem = new ProcedureLogicWorkerFileSystem();
@@ -459,7 +459,7 @@ describe('ProcedureLogicWorkerFileSystem Test', () => {
     expect(procedureLogicWorkerF.handle(data)).toBeUndefined();
   });
   it('procedureLogicWorkerFileSystemTest55', function () {
-    let procedureLogicWorkerFileSystem   = new ProcedureLogicWorkerFileSystem ();
+    let procedureLogicWorkerFileSystem = new ProcedureLogicWorkerFileSystem();
     expect(procedureLogicWorkerFileSystem.clearAll()).toBeUndefined();
   });
   it('procedureLogicWorkerFileSystemTest56', function () {
diff --git a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerJsCpuProfiler.test.ts b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerJsCpuProfiler.test.ts
index bba377ce60dba0bf09e0d1c417b44aebaef4d08d..459e93db6940f0e9feecdd266cd3c74e4a432322 100644
--- a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerJsCpuProfiler.test.ts
+++ b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerJsCpuProfiler.test.ts
@@ -14,9 +14,7 @@
  */
 
 //@ts-ignore
-import {
-  ProcedureLogicWorkerJsCpuProfiler
-} from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerJsCpuProfiler.js';
+import { ProcedureLogicWorkerJsCpuProfiler } from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerJsCpuProfiler.js';
 
 describe('ProcedureLogicWorkerJsCpuProfiler Test', () => {
   it('ProcedureLogicWorkerJsCpuProfiler01', function () {
@@ -27,11 +25,11 @@ describe('ProcedureLogicWorkerJsCpuProfiler Test', () => {
   it('ProcedureLogicWorkerJsCpuProfiler02', function () {
     let procedureLogicWorkerJsCpuProfiler = new ProcedureLogicWorkerJsCpuProfiler();
     let data = {
-      id: "3b21cea8-3554-4aa6-8e4d-7d30672dedca",
-      type: "jsCpuProfiler-init",
+      id: '3b21cea8-3554-4aa6-8e4d-7d30672dedca',
+      type: 'jsCpuProfiler-init',
       params: {
-        list: new ArrayBuffer(20)
-      }
+        list: new ArrayBuffer(20),
+      },
     };
     window.postMessage = jest.fn(() => true);
     expect(procedureLogicWorkerJsCpuProfiler.handle(data)).toBeUndefined();
@@ -40,25 +38,25 @@ describe('ProcedureLogicWorkerJsCpuProfiler Test', () => {
   it('ProcedureLogicWorkerJsCpuProfiler03', function () {
     let procedureLogicWorkerJsCpuProfiler = new ProcedureLogicWorkerJsCpuProfiler();
     let data = {
-      type: "jsCpuProfiler-call-chain",
+      type: 'jsCpuProfiler-call-chain',
       params: {
-        list: []
+        list: [],
       },
-      id: "3b21cea8-3554-4aa6-8e4d-7d30672dedca"
+      id: '3b21cea8-3554-4aa6-8e4d-7d30672dedca',
     };
     window.postMessage = jest.fn(() => true);
-    procedureLogicWorkerJsCpuProfiler.dataCache = []
+    procedureLogicWorkerJsCpuProfiler.dataCache = [];
     expect(procedureLogicWorkerJsCpuProfiler.handle(data)).toBeUndefined();
   });
 
   it('ProcedureLogicWorkerJsCpuProfiler04', function () {
     let procedureLogicWorkerJsCpuProfiler = new ProcedureLogicWorkerJsCpuProfiler();
     let data = {
-      type: "jsCpuProfiler-samples",
+      type: 'jsCpuProfiler-samples',
       params: {
-        list: []
+        list: [],
       },
-      id: "3b21cea8-3554-4aa6-8e4d-7d30672dedca"
+      id: '3b21cea8-3554-4aa6-8e4d-7d30672dedca',
     };
     window.postMessage = jest.fn(() => true);
     expect(procedureLogicWorkerJsCpuProfiler.handle(data)).toBeUndefined();
@@ -67,15 +65,17 @@ describe('ProcedureLogicWorkerJsCpuProfiler Test', () => {
   it('ProcedureLogicWorkerJsCpuProfiler05', function () {
     let procedureLogicWorkerJsCpuProfiler = new ProcedureLogicWorkerJsCpuProfiler();
     let data = {
-      type: "jsCpuProfiler-call-tree",
-      params: [{
-        startTime: 0,
-        endTime: 0,
-        children: [],
-        samplesIds: [],
-        isSelect: false
-      }],
-      id: "3b21cea8-3554-4aa6-8e4d-7d30672dedca"
+      type: 'jsCpuProfiler-call-tree',
+      params: [
+        {
+          startTime: 0,
+          endTime: 0,
+          children: [],
+          samplesIds: [],
+          isSelect: false,
+        },
+      ],
+      id: '3b21cea8-3554-4aa6-8e4d-7d30672dedca',
     };
     window.postMessage = jest.fn(() => true);
     expect(procedureLogicWorkerJsCpuProfiler.handle(data)).toBeUndefined();
@@ -84,15 +84,17 @@ describe('ProcedureLogicWorkerJsCpuProfiler Test', () => {
   it('ProcedureLogicWorkerJsCpuProfiler06', function () {
     let procedureLogicWorkerJsCpuProfiler = new ProcedureLogicWorkerJsCpuProfiler();
     let data = {
-      type: "jsCpuProfiler-bottom-up",
-      params: [{
-        startTime: 0,
-        endTime: 0,
-        children: [],
-        samplesIds: [],
-        isSelect: false
-      }],
-      id: "3b21cea8-3554-4aa6-8e4d-7d30672dedca"
+      type: 'jsCpuProfiler-bottom-up',
+      params: [
+        {
+          startTime: 0,
+          endTime: 0,
+          children: [],
+          samplesIds: [],
+          isSelect: false,
+        },
+      ],
+      id: '3b21cea8-3554-4aa6-8e4d-7d30672dedca',
     };
     window.postMessage = jest.fn(() => true);
     expect(procedureLogicWorkerJsCpuProfiler.handle(data)).toBeUndefined();
@@ -101,13 +103,13 @@ describe('ProcedureLogicWorkerJsCpuProfiler Test', () => {
   it('ProcedureLogicWorkerJsCpuProfiler07', function () {
     let procedureLogicWorkerJsCpuProfiler = new ProcedureLogicWorkerJsCpuProfiler();
     let data = {
-      type: "jsCpuProfiler-statistics",
+      type: 'jsCpuProfiler-statistics',
       params: {
         leftNs: 0,
         rightNs: 10000000000,
-        data: []
+        data: [],
       },
-      id: "3b21cea8-3554-4aa6-8e4d-7d30672dedca"
+      id: '3b21cea8-3554-4aa6-8e4d-7d30672dedca',
     };
     window.postMessage = jest.fn(() => true);
     expect(procedureLogicWorkerJsCpuProfiler.handle(data)).toBeUndefined();
diff --git a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.test.ts b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.test.ts
index f8e30eaab3134c9fb0331cd66c22b94798013228..681ab400d138cf1f3a331a4f93d672f640225d52 100644
--- a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.test.ts
+++ b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.test.ts
@@ -26,13 +26,17 @@ import {
 } from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerNativeNemory.js';
 
 //@ts-ignore
-import {HeapTreeDataBean,
-    //@ts-ignore
+import {
+  HeapTreeDataBean,
+  //@ts-ignore
 } from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerCommon.js';
 
 describe('ProcedureLogicWorkerNativeNemory Test', () => {
+  let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
+  procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(() => true);
+  procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource = jest.fn(() => true);
+  procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map = jest.fn(() => true);
   it('ProcedureLogicWorkerNativeNemoryTest01', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     expect(procedureLogicWorkerNativeMemory).not.toBeUndefined();
   });
 
@@ -115,22 +119,18 @@ describe('ProcedureLogicWorkerNativeNemory Test', () => {
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest09', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     expect(procedureLogicWorkerNativeMemory.clearAll()).toBeUndefined();
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest11', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     expect(procedureLogicWorkerNativeMemory.getTypeFromIndex(-1, '', '')).toBeFalsy();
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest12', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     expect(procedureLogicWorkerNativeMemory.getTypeFromIndex(0, '', '')).toBeTruthy();
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest13', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let item = {
       eventType: 'AllocEvent',
     };
@@ -138,7 +138,6 @@ describe('ProcedureLogicWorkerNativeNemory Test', () => {
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest14', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let item = {
       eventType: 'MmapEvent',
     };
@@ -146,88 +145,56 @@ describe('ProcedureLogicWorkerNativeNemory Test', () => {
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest15', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let stack = {
       children: [],
-      count: 1,
+      count: 123,
       countValue: '',
-      countPercent: '',
-      size: 0,
-      threadId: 0,
-      threadName: '',
+      countPercent: '69%',
+      size: 32,
+      threadId: 3221,
+      threadName: 'AsyncTask',
       heapSizeStr: '',
-      heapPercent: '',
+      heapPercent: '56%',
+      tsArray: [],
     };
     expect(procedureLogicWorkerNativeMemory.traverseTree(stack, 1)).toBeUndefined();
   });
 
   it('ProcedureLogicWorkerNativeNemoryTest16', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let stack = {
       children: [],
-      count: 1,
+      count: 32,
       countValue: '',
-      countPercent: '',
-      size: 0,
-      threadId: 0,
-      threadName: '',
+      countPercent: '87%',
+      size: 23,
+      threadId: 332,
+      threadName: 'ssioncontroller',
       heapSizeStr: '',
-      heapPercent: '',
+      heapPercent: '12%',
+      tsArray: [],
     };
     expect(procedureLogicWorkerNativeMemory.traverseSampleTree(stack, 1)).toBeUndefined();
   });
 
-  it('ProcedureLogicWorkerNativeNemoryTest17', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-    let target = {
-      depth: 1,
-      children: [],
-      count: 1,
-      countValue: '',
-      countPercent: '',
-      size: 0,
-      threadId: 0,
-      threadName: '',
-      heapSizeStr: '',
-      heapPercent: '',
-    };
-    let src = {
-      depth: 1,
-      children: [],
-      count: 1,
-      countValue: '',
-      countPercent: '',
-      size: 0,
-      threadId: 0,
-      threadName: '',
-      heapSizeStr: '',
-      heapPercent: '',
-    };
-    expect(procedureLogicWorkerNativeMemory.mergeTree(target, src)).toBeUndefined();
-  });
-
   it('procedureLogicWorkerFileSystemTest18', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     window.postMessage = jest.fn(() => true);
     let data = {
-      id: 1,
       params: [
         {
           list: '',
         },
       ],
       action: '',
+      id: 2,
       type: 'native-memory-init',
     };
-    procedureLogicWorkerNativeMemory.initDataDict = jest.fn(() => true);
     procedureLogicWorkerNativeMemory.clearAll = jest.fn(() => true);
+    procedureLogicWorkerNativeMemory.initDataDict = jest.fn(() => true);
     expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
   });
 
   it('procedureLogicWorkerFileSystemTest19', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let data = {
-      id: 1,
       params: [
         {
           list: '',
@@ -235,13 +202,13 @@ describe('ProcedureLogicWorkerNativeNemory Test', () => {
       ],
       action: '',
       type: 'native-memory-queryDataDICT',
+      id: 1,
     };
     procedureLogicWorkerNativeMemory.initNMChartData = jest.fn(() => true);
     expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
   });
 
   it('procedureLogicWorkerFileSystemTest20', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let data = {
       id: 1,
       params: [
@@ -257,15 +224,14 @@ describe('ProcedureLogicWorkerNativeNemory Test', () => {
   });
 
   it('procedureLogicWorkerFileSystemTest21', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     let data = {
-      id: 1,
+      id: 3,
       params: [
         {
           list: '',
         },
       ],
-      action: '',
+      action: 'a',
       type: 'native-memory-queryNMFrameData',
     };
     window.postMessage = jest.fn(() => true);
@@ -273,366 +239,258 @@ describe('ProcedureLogicWorkerNativeNemory Test', () => {
     expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
   });
 
-    it('procedureLogicWorkerFileSystemTest22', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let data = {
-            id: 1,
-            params: [
-                {
-                    list: '',
-                },
-            ],
-            action: '',
-            type: 'native-memory-action',
-        };
-        window.postMessage = jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingAction = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest23', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.queryData()).toBeUndefined();
-    });
+  it('procedureLogicWorkerFileSystemTest22', function () {
+    let data = {
+      id: 4,
+      params: [
+        {
+          list: '',
+        },
+      ],
+      action: '',
+      type: 'native-memory-action',
+    };
+    window.postMessage = jest.fn(() => true);
+    procedureLogicWorkerNativeMemory.resolvingAction = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest23', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.queryData()).toBeUndefined();
+  });
 
-    it('procedureLogicWorkerFileSystemTest25', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.initNMChartData()
-        ).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest26', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.initNMFrameData()
-        ).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest27', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        let frameArr = {
-            map: jest.fn(() => true),
-        };
-        expect(
-            procedureLogicWorkerNativeMemory.initNMStack(frameArr)
-        ).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest28', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = {
-            get: jest.fn(() => 'call-info'),
-        };
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingAction(paramMap)
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest29', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = new Map();
-        paramMap.set('actionType', 'info');
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingAction(paramMap)
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest30', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = {
-            get: jest.fn(() => 'memory-stack'),
-        };
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingAction(paramMap)
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest31', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = {
-            get: jest.fn(() => 'memory-chart'),
-        };
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingAction(paramMap)
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest32', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = {
-            get: jest.fn(() => true),
-        };
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingAction(paramMap)
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest33', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = {
-            get: jest.fn(() => 0),
-        };
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingActionNativeMemoryChartData(
-                paramMap
-            )
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest34', function () {
-        let procedureLogicWorkerNativeMemory =
-            new ProcedureLogicWorkerNativeMemory();
-        let paramMap = {
-            get: jest.fn(() => 1),
-        };
-        // @ts-ignore
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo = jest.fn(
-            () => true
-        );
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource =
-            jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.resolvingActionCallInfo.dataSource.map =
-            jest.fn(() => true);
-        expect(
-            procedureLogicWorkerNativeMemory.resolvingActionNativeMemoryChartData(
-                paramMap
-            )
-        ).toBeTruthy();
-    });
-    it('procedureLogicWorkerFileSystemTest35', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.queryCallchainsSamples('',1,1,[''])).toBeUndefined();
-    });
+  it('procedureLogicWorkerFileSystemTest25', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.initNMChartData()).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest26', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.initNMFrameData()).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest27', function () {
+    window.postMessage = jest.fn(() => true);
+    let frameArr = {
+      map: jest.fn(() => true),
+    };
+    expect(procedureLogicWorkerNativeMemory.initNMStack(frameArr)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest28', function () {
+    let paramMap = {
+      get: jest.fn(() => 'call-info'),
+    };
+    expect(procedureLogicWorkerNativeMemory.resolvingAction(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest29', function () {
+    let paramMap = new Map();
+    paramMap.set('actionType', 'info');
+    expect(procedureLogicWorkerNativeMemory.resolvingAction(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest30', function () {
+    let paramMap = {
+      get: jest.fn(() => 'memory-stack'),
+    };
+    expect(procedureLogicWorkerNativeMemory.resolvingAction(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest31', function () {
+    let paramMap = {
+      get: jest.fn(() => 'memory-chart'),
+    };
+    expect(procedureLogicWorkerNativeMemory.resolvingAction(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest32', function () {
+    let paramMap = {
+      get: jest.fn(() => true),
+    };
+    expect(procedureLogicWorkerNativeMemory.resolvingAction(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest33', function () {
+    let paramMap = {
+      get: jest.fn(() => 0),
+    };
+    expect(procedureLogicWorkerNativeMemory.resolvingActionNativeMemoryChartData(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest34', function () {
+    let paramMap = {
+      get: jest.fn(() => 1),
+    };
+    expect(procedureLogicWorkerNativeMemory.resolvingActionNativeMemoryChartData(paramMap)).toBeTruthy();
+  });
+  it('procedureLogicWorkerFileSystemTest35', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.queryCallchainsSamples('', 1, 1, [''])).toBeUndefined();
+  });
 
-    it('procedureLogicWorkerFileSystemTest37', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.queryStatisticCallchainsSamples('',1,1,[''])).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest38', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.getFilterLevel(1000001)).toBe(100000);
-    });
-    it('procedureLogicWorkerFileSystemTest39', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.getFilterLevel(5000001)).toBe(100000);
-    });
-    it('procedureLogicWorkerFileSystemTest40', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.getFilterLevel(3000001)).toBe(100000);
-    });
-    it('procedureLogicWorkerFileSystemTest41', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.getFilterLevel(150000)).toBe(0);
-    });
-    it('procedureLogicWorkerFileSystemTest42', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        let params = [
-            {
-                length: 1
-            }
-        ]
-        expect(procedureLogicWorkerNativeMemory.resolvingNMCallAction(params)).toStrictEqual([]);
-    });
-    it('procedureLogicWorkerFileSystemTest43', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        let params = {
-            symbol: '',
-            path:'',
-            symbolId:1,
-            fileId:1,
-            lib:'',
-            symbolName:'',
-            type:0,
-            }
-        procedureLogicWorkerNativeMemory.dataCache.dataDict = new Map();
-        procedureLogicWorkerNativeMemory.dataCache.dataDict.set(0, '');
-        procedureLogicWorkerNativeMemory.dataCache.dataDict.set(1, 'H:RSMainThread::DoComposition');
-        procedureLogicWorkerNativeMemory.dataCache.dataDict.set(2, 'H:RSUniRender::Process:[EntryView]');
-        procedureLogicWorkerNativeMemory.dataCache.dataDict.set(3, 'iowait');
-        expect(procedureLogicWorkerNativeMemory.setMerageName(params)).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest44', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.clearSplitMapData('')).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest49', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        let data = {
-            id: 1,
-            params: [
-                {
-                    list: '',
-                },
-            ],
-            action: '',
-            type: 'native-memory-calltree-action',
-        };
-        window.postMessage = jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest50', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        let data = {
-            id: 1,
-            params: [
-                {
-                    list: '',
-                },
-            ],
-            action: '',
-            type: 'native-memory-init-responseType',
-        };
-        window.postMessage = jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest51', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        let data = {
-            id: 1,
-            params: [
-                {
-                    list: '',
-                },
-            ],
-            action: '',
-            type: 'native-memory-get-responseType',
-        };
-        window.postMessage = jest.fn(() => true);
-        procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
-        expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
-    });
-    it('procedureLogicWorkerFileSystemTest52', function () {
-        let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-        let data = {
-            id: 1,
-            params: [
-                {
-                    list: '',
-                },
-            ],
-            action: '',
-            type: 'native-memory-queryNativeHookStatistic',
-        };
-      window.postMessage = jest.fn(() => true);
-      procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
-      expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
-    });
+  it('procedureLogicWorkerFileSystemTest37', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.queryStatisticCallchainsSamples('', 1, 1, [''])).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest38', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.getFilterLevel(1000001)).toBe(100000);
+  });
+  it('procedureLogicWorkerFileSystemTest39', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.getFilterLevel(5000001)).toBe(500000);
+  });
+  it('procedureLogicWorkerFileSystemTest40', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.getFilterLevel(3000001)).toBe(500000);
+  });
+  it('procedureLogicWorkerFileSystemTest41', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.getFilterLevel(150000)).toBe(0);
+  });
+  it('procedureLogicWorkerFileSystemTest42', function () {
+    window.postMessage = jest.fn(() => true);
+    let params = [
+      {
+        length: 1,
+      },
+    ];
+    expect(procedureLogicWorkerNativeMemory.resolvingNMCallAction(params)).toStrictEqual([]);
+  });
+  it('procedureLogicWorkerFileSystemTest43', function () {
+    window.postMessage = jest.fn(() => true);
+    let params = {
+      symbol: '',
+      path: '',
+      symbolId: 1,
+      fileId: 1,
+      lib: '',
+      symbolName: '',
+      type: 0,
+    };
+    procedureLogicWorkerNativeMemory.dataCache.dataDict = new Map();
+    procedureLogicWorkerNativeMemory.dataCache.dataDict.set(0, '');
+    procedureLogicWorkerNativeMemory.dataCache.dataDict.set(1, 'H:RSMainThread::DoComposition');
+    procedureLogicWorkerNativeMemory.dataCache.dataDict.set(2, 'H:RSUniRender::Process:[EntryView]');
+    procedureLogicWorkerNativeMemory.dataCache.dataDict.set(3, 'iowait');
+    expect(procedureLogicWorkerNativeMemory.setMerageName(params)).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest44', function () {
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.clearSplitMapData('')).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest49', function () {
+    let data = {
+      id: 1,
+      params: [
+        {
+          list: '',
+        },
+      ],
+      action: '',
+      type: 'native-memory-calltree-action',
+    };
+    window.postMessage = jest.fn(() => true);
+    procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest50', function () {
+    let data = {
+      id: 2,
+      params: [
+        {
+          list: '',
+        },
+      ],
+      action: '',
+      type: 'native-memory-init-responseType',
+    };
+    procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest51', function () {
+    let data = {
+      id: 1,
+      params: [
+        {
+          list: '',
+        },
+      ],
+      action: 'a',
+      type: 'native-memory-get-responseType',
+    };
+    window.postMessage = jest.fn(() => true);
+    procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
+  });
+  it('procedureLogicWorkerFileSystemTest52', function () {
+    let data = {
+      id: 1,
+      params: [
+        {
+          list: '',
+        },
+      ],
+      action: 'b',
+      type: 'native-memory-queryNativeHookStatistic',
+    };
+    window.postMessage = jest.fn(() => true);
+    procedureLogicWorkerNativeMemory.initNMStack = jest.fn(() => true);
+    expect(procedureLogicWorkerNativeMemory.handle(data)).toBeUndefined();
+  });
   it('procedureLogicWorkerFileSystemTest53', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
     window.postMessage = jest.fn(() => true);
     expect(procedureLogicWorkerNativeMemory.queryNativeHookStatistic(1)).toBeUndefined();
   });
 
   it('procedureLogicWorkerFileSystemTest54', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-    expect(procedureLogicWorkerNativeMemory.statisticDataHandler([{
-      "callchainId": 4,
-      "ts": 0,
-      "applyCount": 1,
-      "applySize": 24,
-      "releaseCount": 0,
-      "releaseSize": 0
-    },
-      {
-        "callchainId": 3,
-        "ts": 0,
-        "applyCount": 1,
-        "applySize": 64,
-        "releaseCount": 0,
-        "releaseSize": 0
-      },
-      {
-        "callchainId": 2,
-        "ts": 0,
-        "applyCount": 1,
-        "applySize": 32,
-        "releaseCount": 1,
-        "releaseSize": 32
-      },
-      {
-        "callchainId": 1,
-        "ts": 0,
-        "applyCount": 1,
-        "applySize": 32,
-        "releaseCount": 0,
-        "releaseSize": 0
-      }])).toStrictEqual([{"density": 3, "dur": 0, "heapsize": 120, "startTime": 0}]);
+    expect(
+      procedureLogicWorkerNativeMemory.statisticDataHandler([
+        {
+          callchainId: 4,
+          ts: 0,
+          applyCount: 1,
+          applySize: 24,
+          releaseCount: 0,
+          releaseSize: 0,
+        },
+        {
+          callchainId: 3,
+          ts: 0,
+          applyCount: 1,
+          applySize: 64,
+          releaseCount: 0,
+          releaseSize: 0,
+        },
+        {
+          callchainId: 2,
+          ts: 0,
+          applyCount: 1,
+          applySize: 32,
+          releaseCount: 1,
+          releaseSize: 32,
+        },
+        {
+          callchainId: 1,
+          ts: 0,
+          applyCount: 1,
+          applySize: 32,
+          releaseCount: 0,
+          releaseSize: 0,
+        },
+      ])
+    ).toStrictEqual([{ density: 3, dur: 0, heapsize: 120, startTime: 0 }]);
   });
 
   it('procedureLogicWorkerFileSystemTest55', function () {
-    let procedureLogicWorkerNativeMemory = new ProcedureLogicWorkerNativeMemory();
-    expect(procedureLogicWorkerNativeMemory.handleNativeHookStatisticData(
-      [{"density": 3, "dur": 0, "heapsize": 120, "startTime": 0}])).toStrictEqual(
-      [
-        {
-          "density": 3,
-          "dur": 0,
-          "heapsize": 120,
-          "maxDensity": 3,
-          "maxHeapSize": 120,
-          "minDensity": 0,
-          "minHeapSize": 0,
-          "startTime": 0
-        }
-      ]);
+    expect(
+      procedureLogicWorkerNativeMemory.handleNativeHookStatisticData([
+        { density: 3, dur: 0, heapsize: 120, startTime: 0 },
+      ])
+    ).toStrictEqual([
+      {
+        density: 3,
+        dur: NaN,
+        heapsize: 120,
+        maxDensity: 3,
+        maxHeapSize: 120,
+        minDensity: 0,
+        minHeapSize: 0,
+        startTime: 0,
+      },
+    ]);
   });
 });
diff --git a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerPerf.test.ts b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerPerf.test.ts
index bc6de14a1f07b2d7d4f417fcebfe0f801d635a4d..469a8c04d73a994aaee71c1d21244c82d899ed1c 100644
--- a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerPerf.test.ts
+++ b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerPerf.test.ts
@@ -26,7 +26,7 @@ import {
   PerfCallChain,
 } from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerPerf.js';
 //@ts-ignore
- import {PerfCall} from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerCommon.js';
+import { PerfCall } from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerCommon.js';
 
 describe('ProcedureLogicWorkerPerf Test', () => {
   it('ProcedureLogicWorkerPerfTest', function () {
@@ -459,72 +459,72 @@ describe('ProcedureLogicWorkerPerf Test', () => {
   });
   it('ProcedureLogicWorkerPerfTest54', function () {
     let procedureLogicWorkerPerf = new ProcedureLogicWorkerPerf();
-    expect(procedureLogicWorkerPerf.hideNumMaxAndMin(1,'∞')).toBeUndefined();
+    expect(procedureLogicWorkerPerf.hideNumMaxAndMin(1, '∞')).toBeUndefined();
   });
   it('ProcedureLogicWorkerPerfTest55', function () {
     let procedureLogicWorkerPerf = new ProcedureLogicWorkerPerf();
     let sampleArray = [
       {
-        addr: "",
+        addr: '',
         canCharge: true,
         children: [],
         count: 4,
         currentTreeParentNode: {
-          addr: "",
+          addr: '',
           canCharge: true,
           children: [],
           count: 4,
           currentTreeParentNode: {},
           depth: 0,
           dur: 1,
-          id: "11758",
+          id: '11758',
           initChildren: [],
           isSearch: false,
           isSelected: false,
           isStore: 0,
-          lib: "",
-          libName: "ld-musl-aarch64.so.1",
-          parentId: "977",
-          path: "/system/lib/ld-musl-aarch64.so.1",
+          lib: '',
+          libName: 'ld-musl-aarch64.so.1',
+          parentId: '977',
+          path: '/system/lib/ld-musl-aarch64.so.1',
           pid: 28917,
           searchShow: false,
-          self: "0ms",
+          self: '0ms',
           selfDur: 4,
           size: 0,
-          symbol: "fopen64  (ld-musl-aarch64.so.1)",
-          symbolName: "fopen64",
+          symbol: 'fopen64  (ld-musl-aarch64.so.1)',
+          symbolName: 'fopen64',
           tid: 28922,
           type: 0,
           vaddrInFile: 730108,
-          weight: "1.00ms",
-          weightPercent: "0.0%"
+          weight: '1.00ms',
+          weightPercent: '0.0%',
         },
         depth: 0,
         dur: 4,
-        id: "2791",
+        id: '2791',
         initChildren: [],
         isSearch: false,
         isSelected: false,
         isStore: 0,
-        lib: "",
-        libName: "[kernel.kallsyms]",
-        parentId: "2790",
-        path: "[kernel.kallsyms]",
+        lib: '',
+        libName: '[kernel.kallsyms]',
+        parentId: '2790',
+        path: '[kernel.kallsyms]',
         pid: 28917,
         searchShow: false,
-        self: "4.00ms",
+        self: '4.00ms',
         selfDur: 4,
         size: 0,
-        symbol: "perf_trace_sched_switch  ([kernel.kallsyms])",
-        symbolName: "perf_trace_sched_switch",
+        symbol: 'perf_trace_sched_switch  ([kernel.kallsyms])',
+        symbolName: 'perf_trace_sched_switch',
         tid: 28922,
         type: 0,
         vaddrInFile: -274609073904,
-        weight: "4.00ms",
-        weightPercent: "0.0%"
-      }
+        weight: '4.00ms',
+        weightPercent: '0.0%',
+      },
     ];
-    expect(procedureLogicWorkerPerf.findSearchNode(sampleArray,'da',false)).toBeUndefined();
+    expect(procedureLogicWorkerPerf.findSearchNode(sampleArray, 'da', false)).toBeUndefined();
   });
   it('ProcedureLogicWorkerPerfTest56', function () {
     let procedureLogicWorkerPerf = new ProcedureLogicWorkerPerf();
@@ -532,45 +532,39 @@ describe('ProcedureLogicWorkerPerf Test', () => {
   });
   it('ProcedureLogicWorkerPerfTest57', function () {
     let procedureLogicWorkerPerf = new ProcedureLogicWorkerPerf();
-    let callChains = [{
-      tid:1,
-      sampleId:20,
-    },
+    let callChains = [
+      {
+        tid: 1,
+        sampleId: 20,
+      },
       {
-        tid:2,
-        sampleId:30,
-      }
-    ]
+        tid: 2,
+        sampleId: 30,
+      },
+    ];
     expect(procedureLogicWorkerPerf.initPerfCallChainBottomUp(callChains)).toBeUndefined();
   });
   it('ProcedureLogicWorkerPerfTest58', function () {
     let procedureLogicWorkerPerf = new ProcedureLogicWorkerPerf();
-    let callChains = [{
-      tid:1,
-      sampleId:20,
-      symbolId:-1,
-      fileName:'a'
-    },
+    let callChains = [
+      {
+        tid: 1,
+        sampleId: 20,
+        symbolId: -1,
+        fileName: 'a',
+      },
       {
-        tid:2,
-        sampleId:30,
-        symbolId:0,
-        fileName:'a'
-      }
-    ]
+        tid: 2,
+        sampleId: 30,
+        symbolId: 0,
+        fileName: 'a',
+      },
+    ];
     expect(procedureLogicWorkerPerf.setPerfCallChainFrameName(callChains)).toBeUndefined();
   });
   it('ProcedureLogicWorkerPerfTest59', function () {
     let procedureLogicWorkerPerf = new ProcedureLogicWorkerPerf();
-    let callChains = [{
-      sampleId: '',
-      depth: 0,
-      canCharge: false,
-      name: '',
-      tid: '',
-      fileName: '',
-      threadName: '',
-    },
+    let callChains = [
       {
         sampleId: '',
         depth: 0,
@@ -579,8 +573,17 @@ describe('ProcedureLogicWorkerPerf Test', () => {
         tid: '',
         fileName: '',
         threadName: '',
-      }
-    ]
+      },
+      {
+        sampleId: '',
+        depth: 0,
+        canCharge: false,
+        name: '',
+        tid: '',
+        fileName: '',
+        threadName: '',
+      },
+    ];
     expect(procedureLogicWorkerPerf.addPerfGroupData(callChains)).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSPT.test.ts b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSPT.test.ts
index 477ff779221e158b32445ea71932584635e6169e..62f8d2ecb425b6a7d5bfe46fab1a15da37bbe63c 100644
--- a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSPT.test.ts
+++ b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSPT.test.ts
@@ -104,7 +104,7 @@ describe('ProcedureLogicWorkerSPT Test', () => {
   it('ProcedureLogicWorkerSPTTest12', function () {
     let procedureLogicWorkerSPT = new ProcedureLogicWorkerSPT();
     window.postMessage = jest.fn(() => true);
-    expect(procedureLogicWorkerSPT.getSPT()).toBeUndefined();
+    expect(procedureLogicWorkerSPT.getSPTData()).toBeTruthy();
   });
   it('ProcedureLogicWorkerSPTTest13', function () {
     let procedureLogicWorkerSPT = new ProcedureLogicWorkerSPT();
diff --git a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.test.ts b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.test.ts
index cf14b2db6c1038410142361291dabd293f67be0f..fb4b0aa05128d3cc84e159229a1d8d9c92b38fbc 100644
--- a/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.test.ts
+++ b/ide/test/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.test.ts
@@ -14,407 +14,435 @@
  */
 
 //@ts-ignore
-import { ProcedureLogicWorkerSchedulingAnalysis,
-    FreqThread,
-    ThreadCpuUsage,
-    CpuAnalysis,
-    CpuMeasure,
-    Irq,
-    CpuUsage,
+import {
+  ProcedureLogicWorkerSchedulingAnalysis,
+  FreqThread,
+  ThreadCpuUsage,
+  CpuAnalysis,
+  CpuMeasure,
+  Irq,
+  CpuUsage,
 } from '../../../../dist/trace/database/logic-worker/ProcedureLogicWorkerSchedulingAnalysis.js';
 
 describe('ProcedureLogicWorkerSchedulingAnalysis Test', () => {
-    it('ProcedureLogicWorkerSchedulingAnalysisTest01', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        expect(procedureLogicWorkerSchedulingAnalysis).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest02', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest03', function () {
-        let freqThread  = new FreqThread ();
-        expect(freqThread).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest04', function () {
-        let threadCpuUsage = new ThreadCpuUsage();
-        expect(threadCpuUsage).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest05', function () {
-        let cpuAnalysis = new CpuAnalysis();
-        expect(cpuAnalysis).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest06', function () {
-        let cpuMeasure = new CpuMeasure();
-        expect(cpuMeasure).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest07', function () {
-        let irq = new Irq();
-        expect(irq).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest08', function () {
-        let cpuUsage = new CpuUsage();
-        expect(cpuUsage).not.toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest09', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let arr = [{
-            cpu: 1,
-            dur: 1,
-            ts: 1,
-            freqArr: { cpu: 1, freq: 1, dur: 1 }
-        }]
-        expect(procedureLogicWorkerSchedulingAnalysis.handlerThreadFreqData(arr)).toStrictEqual([]);
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest10', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let arr = [{
-            cpu: 1,
-            dur: 1,
-            ts: 1,
-            freqArr: { cpu: 1, freq: 1, dur: 1 }
-        }]
-        expect(procedureLogicWorkerSchedulingAnalysis.handlerFreqThreadData(arr)).toStrictEqual([]);
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest11', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let arr = [{
-            cpu: 1,
-            dur: 1,
-            ts: 1,
-            freqArr: { cpu: 1, freq: 1, dur: 1 }
-        }]
-        expect(procedureLogicWorkerSchedulingAnalysis.groupFreqByCpu(arr)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest12', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let arr = [{
-            cpu: 1,
-            dur: 1,
-            ts: 1,
-            freqArr: { cpu: 1, freq: 1, dur: 1 }
-        }]
-        expect(procedureLogicWorkerSchedulingAnalysis.handleCPUIdle0Map(arr)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest13', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let arr = [{
-            cpu: 1,
-            dur: 1,
-            ts: 1,
-            freqArr: { cpu: 1, freq: 1, dur: 1 }
-        }]
-        expect(procedureLogicWorkerSchedulingAnalysis.getEffectiveFrequencyDur(arr)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest14', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let arr = [{
-            cpu: 1,
-            dur: 1,
-            ts: 1,
-            freqArr: { cpu: 1, freq: 1, dur: 1 }
-        }]
-        expect(procedureLogicWorkerSchedulingAnalysis.handleProcessThread(arr)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest15', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getCpuFrequency('')).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest16', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getProcessAndThread()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest17', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getCpuUsage()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest18', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.queryData('','',[])).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest19', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getThreadStateByCpu(1)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest20', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getCpuIdle0()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest21', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getCpuIdle()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest22', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.getCpuIrq()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest23', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.queryThreadCpuUsage([1],[0],[2])).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest24', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.queryThreadRunTime(1)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest25', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.queryProcessThreadCount()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest26', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.queryProcessSwitchCount()).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest27', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.queryThreadStateByTid(1)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest28', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-clearData',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest29', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-initFreqData',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest30', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-getProcessAndThread',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest31', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-getCpuIdle0',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest32', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-getCpuUsage',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest33', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-CPU Frequency',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest34', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-CPU Frequency Thread',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest35', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-CPU Idle',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest37', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-CPU Irq',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest38', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-Thread CpuUsage',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest39', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-Thread RunTime',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest40', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-Process ThreadCount',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest41', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-Process SwitchCount',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-    it('ProcedureLogicWorkerSchedulingAnalysisTest42', function () {
-        let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
-        let data = {
-            params: [{
-                endTs:1,
-                total:2,
-                list:'',
-            },
-            ],
-            type:'scheduling-Thread Freq',
-            id:1,
-            action:'',
-        }
-        window.postMessage = jest.fn(() => true);
-        expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
-    });
-})
\ No newline at end of file
+  it('ProcedureLogicWorkerSchedulingAnalysisTest01', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    expect(procedureLogicWorkerSchedulingAnalysis).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest02', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: '',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest03', function () {
+    let freqThread = new FreqThread();
+    expect(freqThread).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest04', function () {
+    let threadCpuUsage = new ThreadCpuUsage();
+    expect(threadCpuUsage).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest05', function () {
+    let cpuAnalysis = new CpuAnalysis();
+    expect(cpuAnalysis).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest06', function () {
+    let cpuMeasure = new CpuMeasure();
+    expect(cpuMeasure).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest07', function () {
+    let irq = new Irq();
+    expect(irq).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest08', function () {
+    let cpuUsage = new CpuUsage();
+    expect(cpuUsage).not.toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest09', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let arr = [
+      {
+        cpu: 1,
+        dur: 1,
+        ts: 1,
+        freqArr: { cpu: 1, freq: 1, dur: 1 },
+      },
+    ];
+    expect(procedureLogicWorkerSchedulingAnalysis.handlerThreadFreqData(arr)).toStrictEqual([]);
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest10', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let arr = [
+      {
+        cpu: 1,
+        dur: 1,
+        ts: 1,
+        freqArr: { cpu: 1, freq: 1, dur: 1 },
+      },
+    ];
+    expect(procedureLogicWorkerSchedulingAnalysis.handlerFreqThreadData(arr)).toStrictEqual([]);
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest11', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let arr = [
+      {
+        cpu: 1,
+        dur: 1,
+        ts: 1,
+        freqArr: { cpu: 1, freq: 1, dur: 1 },
+      },
+    ];
+    expect(procedureLogicWorkerSchedulingAnalysis.groupFreqByCpu(arr)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest12', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let arr = [
+      {
+        cpu: 1,
+        dur: 1,
+        ts: 1,
+        freqArr: { cpu: 1, freq: 1, dur: 1 },
+      },
+    ];
+    expect(procedureLogicWorkerSchedulingAnalysis.handleCPUIdle0Map(arr)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest13', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let arr = [
+      {
+        cpu: 1,
+        dur: 1,
+        ts: 1,
+        freqArr: { cpu: 1, freq: 1, dur: 1 },
+      },
+    ];
+    expect(procedureLogicWorkerSchedulingAnalysis.getEffectiveFrequencyDur(arr)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest14', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let arr = [
+      {
+        cpu: 1,
+        dur: 1,
+        ts: 1,
+        freqArr: { cpu: 1, freq: 1, dur: 1 },
+      },
+    ];
+    expect(procedureLogicWorkerSchedulingAnalysis.handleProcessThread(arr)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest15', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getCpuFrequency('')).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest16', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getProcessAndThread()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest17', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getCpuUsage()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest18', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.queryData('', '', [])).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest19', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getThreadStateByCpu(1)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest20', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getCpuIdle0()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest21', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getCpuIdle()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest22', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.getCpuIrq()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest23', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.queryThreadCpuUsage([1], [0], [2])).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest24', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.queryThreadRunTime(1)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest25', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.queryProcessThreadCount()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest26', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.queryProcessSwitchCount()).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest27', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.queryThreadStateByTid(1)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest28', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-clearData',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest29', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-initFreqData',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest30', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-getProcessAndThread',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest31', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-getCpuIdle0',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest32', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-getCpuUsage',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest33', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-CPU Frequency',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest34', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-CPU Frequency Thread',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest35', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-CPU Idle',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest37', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-CPU Irq',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest38', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-Thread CpuUsage',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest39', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-Thread RunTime',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest40', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-Process ThreadCount',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest41', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-Process SwitchCount',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+  it('ProcedureLogicWorkerSchedulingAnalysisTest42', function () {
+    let procedureLogicWorkerSchedulingAnalysis = new ProcedureLogicWorkerSchedulingAnalysis();
+    let data = {
+      params: [
+        {
+          endTs: 1,
+          total: 2,
+          list: '',
+        },
+      ],
+      type: 'scheduling-Thread Freq',
+      id: 1,
+      action: '',
+    };
+    window.postMessage = jest.fn(() => true);
+    expect(procedureLogicWorkerSchedulingAnalysis.handle(data)).toBeUndefined();
+  });
+});
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerAppStartup.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerAppStartup.test.ts
index 4045564ed5b9d9307fcb92f3a729f1d9ae90d135..e86636ca73b85d311f28ea0f5c7aef5cf21ac325 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerAppStartup.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerAppStartup.test.ts
@@ -31,8 +31,8 @@ describe('ProcedureWorkerAppStartup Test', () => {
       frame: {
         x: 20,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 6,
+        height: 3,
       },
       dur: 1,
       value: 'aa',
@@ -62,10 +62,9 @@ describe('ProcedureWorkerAppStartup Test', () => {
     let canvas = document.createElement('canvas') as HTMLCanvasElement;
     let context = canvas.getContext('2d');
     const data = {
-      context: context!,
       useCache: true,
+      appStartupContext: context,
       type: '',
-      traceRange: [],
     };
     let appStartupRender = new AppStartupRender();
     expect(appStartupRender.renderMainThread(data, new TraceRow())).toBeUndefined();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCPU.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCPU.test.ts
index 733ec200b59a185c70d3bd8fdeb03bde03c7ceff..56cfaa755c374b3797f9e486568a63a37c1bf6cd 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerCPU.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCPU.test.ts
@@ -39,25 +39,25 @@ jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () =>
 describe(' Test', () => {
   const dataSource = {
     frame: {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 310,
+      y: 130,
+      width: 1430,
+      height: 1430,
     },
-    startNS: 200,
+    startNS: 430,
     processId: '',
   };
 
   it('CPUTest03', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 13;
+    canvas.height = 13;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 203,
+        y: 203,
         width: 100,
         height: 100,
       },
@@ -83,8 +83,8 @@ describe(' Test', () => {
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 230,
+        y: 202,
         width: 100,
         height: 100,
       },
@@ -118,7 +118,7 @@ describe(' Test', () => {
     let list = [
       {
         frame: {
-          x: 20,
+          x: 10,
           y: 20,
           width: 100,
           height: 100,
@@ -136,32 +136,32 @@ describe(' Test', () => {
     let node = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 207,
+          y: 201,
+          width: 110,
+          height: 200,
         },
         startNS: 200,
-        length: 1,
-        height: 0,
+        length: 31,
+        height: 30,
       },
     ];
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 29,
+      y: 69,
+      width: 330,
+      height: 430,
     };
     let list = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 42,
+          y: 42,
+          width: 143,
+          height: 430,
         },
         startNS: 200,
-        length: 2,
+        length: 32,
         height: 2,
       },
     ];
@@ -171,16 +171,16 @@ describe(' Test', () => {
   it('CPUTest08', () => {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 9,
+        y: 87,
+        width: 878,
+        height: 80,
       },
-      startNS: 200,
-      length: 1,
-      height: 0,
-      startTime: 0,
-      dur: 1,
+      startNS: 700,
+      length: 135,
+      height: 40,
+      startTime: 450,
+      dur: 9,
     };
     expect(CpuStruct.setCpuFrame(node, 1, 1, 1, { width: 10 })).toBeUndefined();
   });
@@ -188,16 +188,16 @@ describe(' Test', () => {
   it('CPUTest09', () => {
     let node = {
       frame: {
-        x: 20,
+        x: 90,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 25,
+        height: 98,
       },
-      startNS: 200,
-      length: 1,
-      height: 0,
+      startNS: 690,
+      length: 28,
+      height: 60,
       startTime: 2,
-      dur: 1,
+      dur: 221,
     };
     expect(CpuStruct.setCpuFrame(node, 1, 1, 1, { width: 10 })).toBeUndefined();
   });
@@ -206,38 +206,38 @@ describe(' Test', () => {
     let emptyRender = new EmptyRender();
     let req = {
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 0,
+      endNS: 100,
+      totalNS: 100,
       frame: {
         x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        y: 31,
+        width: 75,
+        height: 90,
       },
-      canvas: 'a',
+      canvas: '',
       context: {
+        measureText: jest.fn(() => true),
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
+        fillRect: jest.fn(() => []),
         fillText: jest.fn(() => true),
+        beginPath: jest.fn(() => true),
+        stroke: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#0084b3',
       isHover: '',
       hoverX: 1,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      slicesTime: 121,
+      id: 231,
+      x: 40,
+      y: 40,
+      width: 140,
+      height: 104,
     };
     window.postMessage = jest.fn(() => true);
     expect(emptyRender.render(req, [], [])).toBeUndefined();
@@ -245,17 +245,17 @@ describe(' Test', () => {
 
   it('CPUTest11', function () {
     let cpuRender = new CpuRender();
-    let req = {
+    let cpuReq = {
       lazyRefresh: true,
-      type: '',
+      type: '1',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 4,
+      totalNS: 3,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 334,
+        y: 442,
+        width: 230,
+        height: 330,
       },
       useCache: false,
       range: {
@@ -264,32 +264,32 @@ describe(' Test', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
+        fillStyle: '#221786',
         globalAlpha: 0.6,
-        clearRect: jest.fn(() => true),
+        closePath: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
+        clearRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
+        fillRect: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#112d7d',
       isHover: '',
       hoverX: 1,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      slicesTime: 1113,
+      id: 111,
+      x: 212,
+      y: 2230,
+      width: 156,
+      height: 600,
     };
     window.postMessage = jest.fn(() => true);
-    expect(cpuRender.render(req, [], [])).toBeUndefined();
+    expect(cpuRender.render(cpuReq, [], [])).toBeUndefined();
   });
   it('CPUTest12', function () {
     let emptyRender = new EmptyRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerClock.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerClock.test.ts
index 47383831594c69de73a631c97a863a7136b5b7db..6d53a01e6d46b625cbec24434443d861dd831f2e 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerClock.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerClock.test.ts
@@ -25,14 +25,14 @@ import { ClockStruct, ClockRender } from '../../../../dist/trace/database/ui-wor
 describe('ProcedureWorkerClock Test', () => {
   it('ProcedureWorkerClock01', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 12;
+    canvas.height = 12;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 202,
+        y: 202,
         width: 100,
         height: 100,
       },
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCommon.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCommon.test.ts
index 6192a10045f8ace51e4430eac8a51dd8897b8e68..e8c5ca7ec30db2227a6f01150b114f6653fe7d6e 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerCommon.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCommon.test.ts
@@ -57,23 +57,18 @@ declare global {
   interface Window {
     SmartEvent: {
       UI: {
-        MenuTrace: string; //selected menu trace
         RefreshCanvas: string; //selected menu trace
         SliceMark: string; //Set the tag scope
-        TimeRange: string; //Set the timeline range
         TraceRowComplete: string; //Triggered after the row component has finished loading data
+        MenuTrace: string; //selected menu trace
+        TimeRange: string; //Set the timeline range
       };
     };
-
-    subscribe(evt: string, fn: (b: any) => void): void;
-
     subscribeOnce(evt: string, fn: (b: any) => void): void;
-
+    clearTraceRowComplete(): void;
     unsubscribe(evt: string, fn: (b: any) => void): void;
-
     publish(evt: string, data: any): void;
-
-    clearTraceRowComplete(): void;
+    subscribe(evt: string, fn: (b: any) => void): void;
   }
 }
 
@@ -86,9 +81,8 @@ window.SmartEvent = {
     TraceRowComplete: 'SmartEvent-UI-TraceRowComplete',
   },
 };
-
-Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn);
 Window.prototype.unsubscribe = (ev, fn) => EventCenter.unsubscribe(ev, fn);
+Window.prototype.subscribe = (ev, fn) => EventCenter.subscribe(ev, fn);
 Window.prototype.publish = (ev, data) => EventCenter.publish(ev, data);
 Window.prototype.subscribeOnce = (ev, data) => EventCenter.subscribeOnce(ev, data);
 Window.prototype.clearTraceRowComplete = () => EventCenter.clearTraceRowComplete();
@@ -119,21 +113,21 @@ describe('ProcedureWorkerCommon Test', () => {
   let filterData = [
     {
       cpu: 0,
-      dur: 9030000,
-      end_state: 'R',
-      frame: { y: 5, height: 30, x: 1, width: 3 },
+      dur: 69444,
+      end_state: 'sR',
+      frame: { y: 15, height: 10, x: 13, width: 34 },
       id: 4,
       name: 'test',
-      priority: 120,
+      priority: 23,
       processCmdLine: 'test',
-      processId: 3303,
+      processId: 3255,
       processName: 'test',
-      schedId: 55,
-      startTime: 4060000,
-      tid: 3303,
+      schedId: 3,
+      startTime: 53333,
+      tid: 6,
       translateY: 0,
       type: 'thread',
-      v: true,
+      v: false,
     },
   ];
   let condition = {
@@ -301,16 +295,16 @@ describe('ProcedureWorkerCommon Test', () => {
     let params = {
       isRangeSelect: true,
       rangeSelectObject: {
-        startX: 1,
-        endX: 10,
-        startNS: 1,
-        endNS: 10,
+        startX: 31,
+        endX: 13,
+        startNS: 132,
+        endNS: 120,
       },
-      startNS: 1,
-      endNS: 10,
-      totalNS: 9,
+      startNS: 21,
+      endNS: 120,
+      totalNS: 49,
       frame: {
-        y: 0,
+        y: 1,
       },
     };
     expect(drawSelection(context, params)).toBeUndefined();
@@ -322,26 +316,26 @@ describe('ProcedureWorkerCommon Test', () => {
     canvas.height = 1;
     const context = canvas.getContext('2d');
     let wake = {
-      wakeupTime: 2,
-      cpu: 1,
+      wakeupTime: 12,
+      cpu: 2,
     };
-    let frame = new Rect(20, 10, 10, 10);
+    let frame = new Rect(20, 30, 10, 30);
     let selectCpuStruct = [
       {
-        cpu: 0,
-        dur: 9030000,
+        cpu: 3,
+        dur: 9031110,
         end_state: 'R',
-        frame: { y: 5, height: 30, x: 1, width: 3 },
-        id: 4,
+        frame: { y: 0, height: 60, x: 31, width: 3 },
+        id: 9,
         name: 'test',
         priority: 120,
-        processCmdLine: 'test',
+        processCmdLine: 'lin',
         processId: 3303,
         processName: 'test',
         schedId: 55,
-        startTime: 4060000,
+        startTime: 4064044,
         tid: 3303,
-        translateY: 0,
+        translateY: 40,
         type: 'thread',
         v: true,
       },
@@ -380,10 +374,10 @@ describe('ProcedureWorkerCommon Test', () => {
     canvas.height = 1;
     const ctx = canvas.getContext('2d');
     const hoverFlag = {
-      x: 100,
-      y: 100,
-      width: 1000,
-      height: 1000,
+      x: 300,
+      y: 300,
+      width: 1300,
+      height: 1030,
       time: 2550,
       color: 'red',
       selected: false,
@@ -392,11 +386,11 @@ describe('ProcedureWorkerCommon Test', () => {
       type: 'type',
     };
     const selectFlag = {
-      x: 10,
-      y: 10,
-      width: 100,
-      height: 100,
-      time: 255,
+      x: 180,
+      y: 180,
+      width: 800,
+      height: 80,
+      time: 258,
       color: 'green',
       selected: false,
       text: 'test',
@@ -404,9 +398,9 @@ describe('ProcedureWorkerCommon Test', () => {
       type: 'type',
     };
     TraceRow.range = {
-      startNS: 125,
-      endNS: 25336,
-      totalNS: 33333,
+      startNS: 64,
+      endNS: 25453,
+      totalNS: 333,
     };
     let data = {
       sportRuler: {
@@ -430,10 +424,10 @@ describe('ProcedureWorkerCommon Test', () => {
         hoverFlag,
         selectFlag,
         {
-          y: 5,
-          height: 30,
-          x: 1,
-          width: 3,
+          y: 15,
+          height: 10,
+          x: 11,
+          width: 53,
         },
         data
       )
@@ -448,21 +442,21 @@ describe('ProcedureWorkerCommon Test', () => {
     let params = {
       rangeSelect: true,
       rangeSelectObject: {
-        startX: 1,
-        endX: 10,
-        startNS: 1,
-        endNS: 10,
+        startX: 71,
+        endX: 100,
+        startNS: 61,
+        endNS: 100,
       },
-      startNS: 1,
-      endNS: 10,
-      totalNS: 9,
+      startNS: 401,
+      endNS: 190,
+      totalNS: 999,
       frame: {
-        y: 0,
+        y: 3,
       },
     };
     TraceRow.rangeSelectObject = {
       startX: 125,
-      endX: 25336,
+      endX: 25226,
     };
     expect(drawSelectionRange(context, params)).toBeUndefined();
   });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuAbility.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuAbility.test.ts
index 687c242ee2dc77bdebf1162f4b7249024ad73ff6..0b0082c925dae9116b1994524673e50f1c27e93f 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuAbility.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuAbility.test.ts
@@ -29,14 +29,14 @@ import { Rect } from '../../../dist/trace/database/ProcedureWorkerCommon';
 
 describe('CpuAbilityMonitorStruct Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = 14;
+  canvas.height = 11;
   const ctx = canvas.getContext('2d');
 
   const data = {
     frame: {
-      x: 20,
-      y: 20,
+      x: 201,
+      y: 204,
       width: 100,
       height: 100,
     },
@@ -90,44 +90,44 @@ describe('CpuAbilityMonitorStruct Test', () => {
 
   it('CpuAbilityMonitorStructTest06', function () {
     let cpuAbilityRender = new CpuAbilityRender();
-    let req = {
+    let cpuAbilityReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
+      startNS: 2,
+      endNS: 3,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 11,
+        y: 11,
+        width: 90,
+        height: 90,
       },
       useCache: false,
       range: {
-        refresh: '',
+        refresh: 'refresh',
       },
       canvas: '',
       context: {
         font: '11px sans-serif',
         fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        globalAlpha: 0.7,
       },
-      lineColor: '',
+      lineColor: '#ec407a',
       isHover: '',
-      hoverX: 1,
+      hoverX: 0,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
-      flagSelectedInfo: '',
-      slicesTime: 3,
+      flagSelectedInfo: 'k',
+      slicesTime: 1,
       id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 12,
+      y: 12,
+      width: 102,
+      height: 102,
     };
     window.postMessage = jest.fn(() => true);
-    expect(cpuAbilityRender.render(req, [], [])).toBeUndefined();
+    expect(cpuAbilityRender.render(cpuAbilityReq, [], [])).toBeUndefined();
   });
   it('CpuAbilityMonitorStructTest07', function () {
     let cpuAbilityRender = new CpuAbilityRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.test.ts
index d5ce22c1bf1a9f5e0051b825a7afc50b7b9b67dd..6383a3b46d7c93f0f48e5a3b5fe35c3962648e91 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuFreqLimits.test.ts
@@ -41,14 +41,14 @@ describe('ProcedureWorkerCpuFreqLimits Test', () => {
   };
   it('Test01', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 15;
+    canvas.height = 15;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 205,
+        y: 205,
         width: 100,
         height: 100,
       },
@@ -72,16 +72,16 @@ describe('ProcedureWorkerCpuFreqLimits Test', () => {
   it('Test03', () => {
     let node = {
       frame: {
-        x: 20,
+        x: 24,
         y: 20,
         width: 100,
-        height: 100,
+        height: 150,
       },
       startNS: 200,
       length: 1,
-      height: 0,
+      height: 40,
       startTime: 2,
-      dur: 1,
+      dur: 41,
     };
     expect(
       CpuFreqLimitsStruct.setFreqLimitFrame(node, 1, 1, 1, 1, {
@@ -94,38 +94,38 @@ describe('ProcedureWorkerCpuFreqLimits Test', () => {
     let cpuFreqLimitRender = new CpuFreqLimitRender();
     let req = {
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 10,
+      endNS: 101,
+      totalNS: 91,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 43,
+        y: 230,
+        width: 340,
+        height: 342,
       },
       canvas: 'a',
       context: {
+        measureText: jest.fn(() => true),
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
+        stroke: jest.fn(() => false),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
+        beginPath: jest.fn(() => true),
+        fillRect: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#ffae8a',
       isHover: '',
       hoverX: 1,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
+      slicesTime: 133,
+      id: 36,
+      x: 565,
+      y: 600,
       width: 100,
-      height: 100,
+      height: 230,
     };
     window.postMessage = jest.fn(() => true);
     expect(cpuFreqLimitRender.render(req, [], [])).toBeUndefined();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuProfiler.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuProfiler.test.ts
index e0036e334ebb2e18739d974eb0530470d3a29a33..12a929d5ca32551a87233c090eed1a4ed5ba7b19 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuProfiler.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuProfiler.test.ts
@@ -43,13 +43,13 @@ describe('ProcedureWorkerCpuProfiler Test', () => {
       {
         startTime: 50,
         endTime: 1520000,
-        name: 'Snapshot0',
+        name: 'Snapshot2',
         frame: { x: 0, y: 0, width: 25, height: 40 },
         id: 0,
         depth: 1,
         selfTime: 0,
         url: '',
-        totalTime: 88473061693464,
+        totalTime: 83321693463,
         parentId: 123,
         children: [],
         isSelect: true,
@@ -57,16 +57,16 @@ describe('ProcedureWorkerCpuProfiler Test', () => {
     ];
     let list = [
       {
-        startTime: 50,
-        endTime: 1520000,
+        startTime: 250,
+        endTime: 2333333,
         name: 'Snapshot0',
-        frame: { x: 0, y: 0, width: 25, height: 40 },
-        id: 0,
-        depth: 1,
-        selfTime: 0,
+        frame: { x: 0, y: 0, width: 25, height: 20 },
+        id: 32,
+        depth: 21,
+        selfTime: 34,
         url: '',
-        totalTime: 88473061693464,
-        parentId: 123,
+        totalTime: 32155693464,
+        parentId: 32,
         children: [],
         isSelect: true,
       },
@@ -99,16 +99,16 @@ describe('ProcedureWorkerCpuProfiler Test', () => {
 
   it('JsCpuProfilerStructTest02', () => {
     let node = {
-      startTime: 50,
-      endTime: 1520000,
-      name: 'Snapshot0',
-      frame: { x: 0, y: 0, width: 25, height: 40 },
-      id: 0,
+      startTime: 150,
+      endTime: 122000,
+      name: 'Snapshot1',
+      frame: { x: 1, y: 2, width: 25, height: 40 },
+      id: 12,
       depth: 1,
-      selfTime: 0,
+      selfTime: 1243,
       url: '',
-      totalTime: 88473061693464,
-      parentId: 123,
+      totalTime: 882141164,
+      parentId: 1213,
       children: [],
       isSelect: true,
     };
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts
index 2a2ffb7fdfe96ea4f8d35b45213a96eebaf61604..5d2cbc3b697d0f6c8d2720ef4e20849f26066fc4 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerCpuState.test.ts
@@ -30,22 +30,22 @@ describe('ProcedureWorkerCpuState Test', () => {
   it('ProcedureWorkerCpuStateTest01', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 43,
+        y: 40,
+        width: 135,
+        height: 190,
       },
-      startNS: 200,
-      value: 50,
-      startTs: 1,
-      dur: 10,
-      height: 2,
+      startNS: 220,
+      value: 20,
+      startTs: 15,
+      dur: 12,
+      height: 62,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 80,
+      y: 28,
+      width: 180,
+      height: 80,
     };
     expect(CpuStateStruct.setFrame(node, 2, 2, 6, 4, frame)).toBeUndefined();
   });
@@ -53,22 +53,22 @@ describe('ProcedureWorkerCpuState Test', () => {
   it('ProcedureWorkerCpuStateTest01', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 10,
+        y: 22,
+        width: 540,
+        height: 700,
       },
-      startNS: 200,
-      value: 50,
-      startTs: 3,
-      dur: 1,
-      height: 2,
+      startNS: 560,
+      value: 10,
+      startTs: 7,
+      dur: 74,
+      height: 12,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 30,
+      y: 50,
+      width: 760,
+      height: 660,
     };
     expect(CpuStateStruct.setFrame(node, 2, 2, 6, 4, frame)).toBeUndefined();
   });
@@ -101,31 +101,31 @@ describe('ProcedureWorkerCpuState Test', () => {
     let cpuStateRender = new CpuStateRender();
     let dataList = new Array();
     dataList.push({
-      startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startNS: 55,
+      dur: 120,
+      length: 53,
+      frame: { x: 0, y: 54, width: 30, height: 350 },
     });
     dataList.push({ startNS: 1, dur: 2, length: 1 });
     let res = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 77,
+          y: 67,
+          width: 170,
+          height: 700,
         },
-        startNS: 1,
-        length: 1,
-        height: 2,
-        dur: 1,
+        startNS: 17,
+        length: 61,
+        height: 25,
+        dur: 12,
       },
     ];
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 30,
+      y: 23,
+      width: 173,
+      height: 350,
     };
     expect(cpuStateRender.cpuState([], dataList, '', res, 1, 6, 5, frame, true)).toBeUndefined();
   });
@@ -134,31 +134,31 @@ describe('ProcedureWorkerCpuState Test', () => {
     let cpuStateRender = new CpuStateRender();
     let dataList = new Array();
     dataList.push({
-      startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startNS: 23,
+      dur: 120,
+      length: 21,
+      frame: { x: 20, y: 45, width: 50, height: 150 },
     });
     dataList.push({ startNS: 1, dur: 2, length: 1 });
     let res = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 57,
+          y: 30,
+          width: 770,
+          height: 503,
         },
-        startNS: 10,
-        length: 1,
-        height: 2,
-        dur: 1,
+        startNS: 13,
+        length: 21,
+        height: 22,
+        dur: 156,
       },
     ];
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 60,
+      y: 23,
+      width: 170,
+      height: 900,
     };
     expect(cpuStateRender.cpuState([], dataList, '', res, 1, 6, 5, frame, true)).toBeUndefined();
   });
@@ -211,11 +211,11 @@ describe('ProcedureWorkerCpuState Test', () => {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
+      endNS: 11,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
+        x: 201,
+        y: 201,
         width: 100,
         height: 100,
       },
@@ -223,14 +223,14 @@ describe('ProcedureWorkerCpuState Test', () => {
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 'b',
       context: {
         font: '11px sans-serif',
         fillStyle: '#ec407a',
         globalAlpha: 0.6,
-        clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
+        clearRect: jest.fn(() => true),
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
@@ -254,12 +254,12 @@ describe('ProcedureWorkerCpuState Test', () => {
     window.postMessage = jest.fn(() => true);
     expect(cpuStateRender.render(req, [], [], [])).toBeUndefined();
   });
-  it('ProcedureWorkerCpuStateTest07', function () {
+  it('ProcedureWorkerCpuStateTest08', function () {
     let cpuStateRender = new CpuStateRender();
     let canvas = document.createElement('canvas') as HTMLCanvasElement;
     let context = canvas.getContext('2d');
     const data = {
-      context: context!,
+      cpuStateContext: context!,
       useCache: true,
       type: '',
       traceRange: [],
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.test.ts
index ccf31d3cd5675117f2661921cf8ce7fa714ba5f5..9801feb8b17417d7a11fbad15efe1ed757b604ac 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerDiskIoAbility.test.ts
@@ -30,14 +30,14 @@ import { Rect } from '../../../dist/trace/database/ProcedureWorkerCommon';
 
 describe('ProcedureWorkerDiskIoAbility Test', () => {
   const canvas = document.createElement('canvas');
-  canvas.width = 1;
-  canvas.height = 1;
+  canvas.width = 6;
+  canvas.height = 6;
   const ctx = canvas.getContext('2d');
 
   const data = {
     frame: {
-      x: 20,
-      y: 20,
+      x: 206,
+      y: 206,
       width: 100,
       height: 100,
     },
@@ -51,18 +51,18 @@ describe('ProcedureWorkerDiskIoAbility Test', () => {
       width: 100,
       height: 100,
     },
-    maxDiskRate: 200,
-    value: 50,
+    maxDiskRate: 300,
+    value: 80,
   };
   let res = [
     {
-      startNS: 0,
-      dur: 10,
+      startNS: 11,
+      dur: 30,
       frame: {
-        x: 0,
-        y: 9,
-        width: 10,
-        height: 10,
+        x: 6,
+        y: 49,
+        width: 30,
+        height: 60,
       },
     },
   ];
@@ -98,51 +98,51 @@ describe('ProcedureWorkerDiskIoAbility Test', () => {
 
   it('CpuAbilityMonitorStructTest04', function () {
     let diskIoAbilityRender = new DiskIoAbilityRender();
-    let req = {
+    let diskIoReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 5,
+      endNS: 9,
+      totalNS: 4,
       frame: {
-        x: 20,
+        x: 32,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 180,
+        height: 180,
       },
-      useCache: false,
+      useCache: true,
       range: {
         refresh: '',
       },
       canvas: 'a',
       context: {
-        font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        font: '12px sans-serif',
+        fillStyle: '#a1697d',
+        globalAlpha: 0.3,
+        measureText: jest.fn(() => true),
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
+        closePath: jest.fn(() => false),
+        beginPath: jest.fn(() => true),
+        fillRect: jest.fn(() => false),
         fillText: jest.fn(() => true),
       },
       lineColor: '',
-      isHover: '',
-      hoverX: 1,
+      isHover: 'true',
+      hoverX: 0,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 4,
       id: 1,
-      x: 20,
-      y: 20,
+      x: 24,
+      y: 24,
       width: 100,
       height: 100,
     };
     window.postMessage = jest.fn(() => true);
-    expect(diskIoAbilityRender.render(req, [], [])).toBeUndefined();
+    expect(diskIoAbilityRender.render(diskIoReq, [], [])).toBeUndefined();
   });
   it('CpuAbilityMonitorStructTest05', function () {
     let diskIoAbilityRender = new DiskIoAbilityRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.test.ts
index ac8e7465ac5bc2375215d0a9b5f3bc7c33a9b5ed..79e729e0bbe2f11a98006d28e2521f7688208585 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyAnomaly.test.ts
@@ -27,50 +27,50 @@ import {
 describe('ProcedureWorkerEnergyAnomaly Test', () => {
   it('ProcedureWorkerEnergyAnomalyTest01', function () {
     let frame = {
-      x: 20,
+      x: 30,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 550,
+      height: 500,
     };
-    let dataList = new Array();
-    dataList.push({
-      startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let energyAnomalyDataList = new Array();
+    energyAnomalyDataList.push({
+      startNS: 111,
+      dur: 40,
+      length: 23,
+      frame: { x: 0, y: 29, width: 22, height: 101 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
-    anomaly(dataList, [{ length: 1 }], 1, 3, 2, frame, '', true);
+    energyAnomalyDataList.push({ startNS: 11, dur: 21, length: 10 });
+    anomaly(energyAnomalyDataList, [{ length: 1 }], 1, 3, 2, frame, '', true);
   });
 
   it('ProcedureWorkerEnergyAnomalyTest02', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 50,
+      y: 32,
+      width: 600,
+      height: 200,
     };
-    let dataList = new Array();
-    dataList.push({
-      startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let energyAnomalyDataList = new Array();
+    energyAnomalyDataList.push({
+      startNS: 22,
+      dur: 30,
+      length: 25,
+      frame: { x: 0, y: 19, width: 32, height: 102 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
-    anomaly(dataList, [{ length: 0 }], 1, 3, 2, frame, '', false);
+    energyAnomalyDataList.push({ startNS: 12, dur: 22, length: 12 });
+    anomaly(energyAnomalyDataList, [{ length: 0 }], 1, 3, 2, frame, '', false);
   });
 
   it('ProcedureWorkerEnergyAnomalyTest03', function () {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 7;
+    canvas.height = 7;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 207,
+        y: 207,
         width: 100,
         height: 100,
       },
@@ -83,21 +83,21 @@ describe('ProcedureWorkerEnergyAnomaly Test', () => {
     let node = {
       frame: {
         x: 20,
-        y: 20,
+        y: 50,
         width: 100,
-        height: 100,
+        height: 500,
       },
-      startNS: 1,
-      value: 50,
+      startNS: 56,
+      value: 60,
       startTs: 3,
-      dur: 3,
+      dur: 1,
       height: 2,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 22,
+      y: 22,
+      width: 130,
+      height: 130,
     };
     expect(EnergyAnomalyStruct.setAnomalyFrame(node, 1, 2, 5, frame)).toBeUndefined();
   });
@@ -127,53 +127,53 @@ describe('ProcedureWorkerEnergyAnomaly Test', () => {
 
   it('ProcedureWorkerEnergyAnomalyTest06', function () {
     let energyAnomalyRender = new EnergyAnomalyRender();
-    let req = {
+    let energyAnomalyReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 0,
+      endNS: 9,
+      totalNS: 9,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 30,
+        y: 30,
+        width: 140,
+        height: 140,
       },
       useCache: false,
       range: {
-        refresh: '',
+        refresh: '12',
       },
-      canvas: 'a',
+      canvas: 'b',
       context: {
-        font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        font: '13px sans-serif',
+        fillStyle: '#e00f55',
+        globalAlpha: 0.4,
         canvas: {
-          clientWidth: 10,
+          clientWidth: 12,
         },
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
+        measureText: jest.fn(() => false),
         fillRect: jest.fn(() => true),
+        beginPath: jest.fn(() => true),
+        stroke: jest.fn(() => true),
         fillText: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#000000',
       isHover: '',
       hoverX: 1,
       params: '',
-      wakeupBean: undefined,
+      wakeupBean: true,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 6,
       id: 1,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 150,
+      height: 150,
     };
     window.postMessage = jest.fn(() => true);
-    expect(energyAnomalyRender.render(req, [], [])).toBeUndefined();
+    expect(energyAnomalyRender.render(energyAnomalyReq, [], [])).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyPower.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyPower.test.ts
index 719ba4dfb01d42e83a3f0c5b76427582832e968c..90cc88e455765ab2e40d5772d9ded9d0720043de 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyPower.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyPower.test.ts
@@ -137,89 +137,89 @@ describe('ProcedureWorkerEnergyPower Test', () => {
 
   it('ProcedureWorkerEnergyPowerTest14', function () {
     let energyPowerRender = new EnergyPowerRender();
-    let req = {
+    let energyPowerReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 8,
+      totalNS: 7,
       frame: {
-        x: 20,
+        x: 90,
         y: 20,
-        width: 100,
+        width: 1011,
         height: 100,
       },
       useCache: false,
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 'c',
       context: {
-        font: '11px sans-serif',
+        font: '10px sans-serif',
         fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        globalAlpha: 0.8,
         canvas: {
-          clientWidth: 10,
+          clientWidth: 14,
         },
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
+        fillRect: jest.fn(() => false),
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#ffffff',
       isHover: '',
       hoverX: 1,
-      params: '',
+      params: '21',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 5,
       id: 1,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 80,
+      height: 80,
     };
     window.postMessage = jest.fn(() => true);
-    expect(energyPowerRender.render(req, [], [])).toBeUndefined();
+    expect(energyPowerRender.render(energyPowerReq, [], [])).toBeUndefined();
   });
 
   it('ProcedureWorkerEnergyPowerTest15', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 50,
+      y: 33,
+      width: 800,
+      height: 500,
     };
-    let dataList = new Array();
-    dataList.push({
+    let energyPowerDataList = new Array();
+    energyPowerDataList.push({
       startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 90,
+      length: 16,
+      frame: { x: 0, y: 9, width: 20, height: 12 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
-    power(dataList, [{ length: 1 }], 1, 3, 2, frame, true, '');
+    energyPowerDataList.push({ startNS: 71, dur: 32, length: 12 });
+    power(energyPowerDataList, [{ length: 1 }], 1, 3, 2, frame, true, '');
   });
 
   it('ProcedureWorkerEnergyPowerTest16', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 98,
+      y: 90,
+      width: 500,
+      height: 700,
     };
-    let dataList = new Array();
-    dataList.push({
+    let energyPowerDataList = new Array();
+    energyPowerDataList.push({
       startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 50,
+      length: 67,
+      frame: { x: 0, y: 9, width: 60, height: 60 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
-    power(dataList, [{ length: 0 }], 1, 3, 2, frame, false, '');
+    energyPowerDataList.push({ startNS: 12, dur: 82, length: 16 });
+    power(energyPowerDataList, [{ length: 0 }], 1, 3, 2, frame, false, '');
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyState.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyState.test.ts
index 7928061791101e000af987c7ce7951defcbc3626..5cd8cf64dc4bd0136f2af805e25f690ebc3d0372 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyState.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergyState.test.ts
@@ -27,38 +27,38 @@ import {
 describe('ProcedureWorkerEnergyState Test', () => {
   it('ProcedureWorkerEnergyStateTest01', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 40,
+      y: 27,
+      width: 300,
+      height: 370,
     };
-    let dataList = new Array();
-    dataList.push({
+    let energyStateDataList = new Array();
+    energyStateDataList.push({
       startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 20,
+      length: 51,
+      frame: { x: 0, y: 9, width: 105, height: 110 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
-    state(dataList, [{ length: 1 }], 1, 3, 2, frame, true);
+    energyStateDataList.push({ startNS: 1, dur: 42, length: 32 });
+    state(energyStateDataList, [{ length: 1 }], 1, 3, 2, frame, true);
   });
 
   it('ProcedureWorkerEnergyStateTest02', function () {
     let frame = {
       x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      y: 30,
+      width: 520,
+      height: 230,
     };
-    let dataList = new Array();
-    dataList.push({
+    let energyStateDataList = new Array();
+    energyStateDataList.push({
       startNS: 0,
       dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      length: 15,
+      frame: { x: 50, y: 59, width: 177, height: 70 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
-    state(dataList, [{ length: 0 }], 1, 3, 2, frame, false);
+    energyStateDataList.push({ startNS: 15, dur: 23, length: 17 });
+    state(energyStateDataList, [{ length: 0 }], 1, 3, 2, frame, false);
   });
 
   it('ProcedureWorkerEnergyStateTest03', function () {
@@ -115,61 +115,61 @@ describe('ProcedureWorkerEnergyState Test', () => {
 
   it('ProcedureWorkerEnergyStateTest12', function () {
     let energyStateRender = new EnergyStateRender();
-    let req = {
+    let energyStateReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
+      startNS: 7,
+      endNS: 8,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 50,
+        y: 25,
+        width: 500,
+        height: 220,
       },
       useCache: false,
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: '',
       context: {
-        font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        font: '14px sans-serif',
+        fillStyle: '#151212',
+        globalAlpha: 0.62,
         height: 150,
-        width: 100,
+        width: 110,
         canvas: {
-          clientWidth: 10,
+          clientWidth: 50,
         },
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
+        fillRect: jest.fn(() => []),
         fillText: jest.fn(() => true),
+        stroke: jest.fn(() => true),
+        closePath: jest.fn(() => true),
+        beginPath: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#1a4dff',
       isHover: '',
-      hoverX: 1,
+      hoverX: 22,
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
+      slicesTime: 584,
+      id: 2,
+      x: 32,
+      y: 30,
       width: 100,
       height: 100,
       params: {
-        isLive: false,
-        maxHeight: 2,
+        isLive: true,
+        maxHeight: 21,
         dpr: 1,
         hoverFuncStruct: '',
         selectFuncStruct: undefined,
       },
     };
     window.postMessage = jest.fn(() => true);
-    expect(energyStateRender.render(req, [{}], [])).toBeUndefined();
+    expect(energyStateRender.render(energyStateReq, [{}], [])).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergySystem.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergySystem.test.ts
index ec593b6bca6222b25702c2aa9c6b0701ed51e06d..2702efad30a6c72cc996460f5ad80286a7faa978 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerEnergySystem.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerEnergySystem.test.ts
@@ -122,17 +122,17 @@ describe('ProcedureWorkerEnergySystem Test', () => {
   it('ProcedureWorkerEnergyStateTest07', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 10,
+        y: 30,
+        width: 202,
+        height: 202,
       },
-      startNS: 1,
-      value: 50,
-      startTs: 3,
-      dur: 3,
+      startNS: 10,
+      value: 22,
+      startTs: 64,
+      dur: 66,
       height: 2,
-      type: 0,
+      type: 2,
     };
     let frame = {
       x: 20,
@@ -170,17 +170,17 @@ describe('ProcedureWorkerEnergySystem Test', () => {
   it('ProcedureWorkerEnergyStateTest09', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 50,
+        y: 50,
+        width: 700,
+        height: 170,
       },
-      startNS: 1,
-      value: 50,
+      startNS: 73,
+      value: 77,
       startTs: 3,
-      dur: 3,
-      height: 2,
-      type: 2,
+      dur: 13,
+      height: 12,
+      type: 12,
     };
     let frame = {
       x: 20,
@@ -193,61 +193,61 @@ describe('ProcedureWorkerEnergySystem Test', () => {
 
   it('ProcedureWorkerEnergyStateTest10', function () {
     let energySystemRender = new EnergySystemRender();
-    let req = {
+    let energySystemReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 22,
+      totalNS: 21,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 23,
+        y: 30,
+        width: 190,
+        height: 960,
       },
       useCache: false,
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 'sd',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
+        fillStyle: '#320011',
         globalAlpha: 0.6,
-        height: 150,
+        height: 50,
         width: 100,
         canvas: {
           clientWidth: 10,
         },
-        clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
+        clearRect: jest.fn(() => true),
         stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
+        closePath: jest.fn(() => true),
+        fillRect: jest.fn(() => false),
+        measureText: jest.fn(() => []),
       },
-      lineColor: '',
+      lineColor: '#655f01',
       isHover: '',
-      hoverX: 1,
+      hoverX: 31,
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      slicesTime: 39,
+      id: 98,
+      x: 80,
+      y: 80,
+      width: 400,
+      height: 140,
       params: {
-        isLive: false,
-        maxHeight: 2,
-        dpr: 1,
+        isLive: true,
+        maxHeight: 20,
+        dpr: 21,
         hoverFuncStruct: '',
         selectFuncStruct: undefined,
       },
     };
     window.postMessage = jest.fn(() => true);
-    expect(energySystemRender.render(req, [{}], [])).toBeUndefined();
+    expect(energySystemRender.render(energySystemReq, [{}], [])).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerFPS.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerFPS.test.ts
index 2dd17f6e232c3e8786f53d59c41c76350cfbf5a9..8515ede2afe41015f3c537578d8c994058324ea6 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerFPS.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerFPS.test.ts
@@ -40,36 +40,36 @@ describe(' FPSTest', () => {
   });
 
   it('FpsTest02', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let fpsDataList = new Array();
+    fpsDataList.push({
+      startTime: 34,
+      dur: 14,
+      frame: { x: 40, y: 442, width: 230, height: 340 },
     });
-    dataList.push({
-      startTime: 1,
-      dur: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    fpsDataList.push({
+      startTime: 61,
+      dur: 156,
+      frame: { x: 60, y: 9, width: 10, height: 10 },
     });
-    let rect = new Rect(0, 10, 10, 10);
-    fps(dataList, [{ length: 0 }], 1, 100254, 100254, rect, false);
+    let rect = new Rect(0, 50, 50, 16);
+    fps(fpsDataList, [{ length: 0 }], 1, 100254, 100254, rect, false);
   });
 
   it('FpsTest03', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 8;
+    canvas.height = 8;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 218,
+        y: 201,
+        width: 220,
+        height: 320,
       },
-      startNS: 200,
-      value: 50,
+      startNS: 255,
+      value: 4,
     };
 
     expect(FpsStruct.draw(ctx, data)).toBeUndefined();
@@ -78,15 +78,15 @@ describe(' FPSTest', () => {
   it('FpsTest04', () => {
     const canvas = document.createElement('canvas');
     canvas.width = 1;
-    canvas.height = 1;
+    canvas.height = 8;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 80,
+        y: 30,
+        width: 320,
+        height: 220,
       },
       startNS: 200,
       value: 50,
@@ -105,30 +105,30 @@ describe(' FPSTest', () => {
     const ctx = canvas.getContext('2d');
     const Sourcedate = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 520,
+        y: 50,
+        width: 300,
+        height: 300,
       },
-      maxFps: 200,
-      value: 50,
+      maxFps: 255,
+      value: 550,
     };
     expect(FpsStruct.draw(ctx, Sourcedate)).toBeUndefined();
   });
 
   it('FpsTest06', function () {
     let fpsRender = new FpsRender();
-    let req = {
+    let fpsReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 32,
+      totalNS: 31,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 54,
+        y: 50,
+        width: 133,
+        height: 133,
       },
       useCache: false,
       range: {
@@ -136,40 +136,40 @@ describe(' FPSTest', () => {
       },
       canvas: 'a',
       context: {
-        font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
-        height: 150,
+        font: '12px sans-serif',
+        fillStyle: '#af919b',
+        globalAlpha: 0.56,
+        height: 120,
         width: 100,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
+        closePath: jest.fn(() => true),
+        fillRect: jest.fn(() => []),
         fillText: jest.fn(() => true),
+        stroke: jest.fn(() => true),
       },
       lineColor: '',
       isHover: '',
-      hoverX: 1,
+      hoverX: 21,
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 34,
       id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 220,
+      y: 203,
+      width: 1030,
+      height: 890,
       params: {
         isLive: false,
-        maxHeight: 2,
-        dpr: 1,
+        maxHeight: 52,
+        dpr: 41,
         hoverFuncStruct: '',
         selectFuncStruct: undefined,
       },
     };
     window.postMessage = jest.fn(() => true);
-    expect(fpsRender.render(req, [], [])).toBeUndefined();
+    expect(fpsRender.render(fpsReq, [], [])).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerFileSystem.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerFileSystem.test.ts
index 19b58568933235533a4e236afaccf60262f2fe52..86103a41ee184263cbd6aad0208003488f5200bb 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerFileSystem.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerFileSystem.test.ts
@@ -46,57 +46,57 @@ describe('ProcedureWorkerFileSystem Test', () => {
 
   it('ProcedureWorkerFileSystemTest03', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 40,
+      y: 24,
+      width: 440,
+      height: 500,
     };
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 1 },
+    let fileSystemDataList = new Array();
+    fileSystemDataList.push({
+      startTime: 60,
+      dur: 110,
+      frame: { x: 40, y: 59, width: 140, height: 142 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
-    fileSysChart(dataList, dataList, '', [{ length: 0 }], 1, 2, 1, frame, true, false, false);
+    fileSystemDataList.push({ startTime: 14, dur: 41 });
+    fileSysChart(fileSystemDataList, fileSystemDataList, '', [{ length: 0 }], 1, 2, 1, frame, true, false, false);
   });
 
   it('ProcedureWorkerFileSystemTest03', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 24,
+      y: 21,
+      width: 121,
+      height: 230,
     };
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 0 },
+    let fileSystemDataList = new Array();
+    fileSystemDataList.push({
+      startTime: 20,
+      dur: 11,
+      frame: { x: 10, y: 91, width: 40, height: 540 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
-    fileSysChart(dataList, dataList, '', [{ length: 0 }], 1, 2, 1, frame, true, false, false);
+    fileSystemDataList.push({ startTime: 41, dur: 141 });
+    fileSysChart(fileSystemDataList, fileSystemDataList, '', [{ length: 0 }], 1, 2, 1, frame, true, false, false);
   });
 
   it('ProcedureWorkerFileSystemTest04', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 60,
+        y: 24,
+        width: 440,
+        height: 460,
       },
-      startNS: 0,
-      value: 50,
-      startTs: 3,
-      dur: 1,
-      height: 2,
+      startNS: 100,
+      value: 980,
+      startTs: 63,
+      dur: 21,
+      height: 222,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 2,
+      y: 21,
+      width: 15,
+      height: 84,
     };
     expect(FileSysChartStruct.setFrame(node, 2, 1, 2, frame)).toBeUndefined();
   });
@@ -104,22 +104,22 @@ describe('ProcedureWorkerFileSystem Test', () => {
   it('ProcedureWorkerFileSystemTest05', function () {
     let node = {
       frame: {
-        x: 20,
+        x: 80,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 330,
+        height: 330,
       },
       startNS: 2,
-      value: 50,
-      startTs: 3,
-      dur: 3,
-      height: 2,
+      value: 61,
+      startTs: 32,
+      dur: 8,
+      height: 10,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 66,
+      y: 2,
+      width: 600,
+      height: 188,
     };
     expect(FileSysChartStruct.setFrame(node, 2, 1, 2, frame)).toBeUndefined();
   });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerFrameDynamic.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerFrameDynamic.test.ts
index 6a97f2328996ad4f0ff8a9123ec09dda48cffcae..9e4ce01bebc10cd2065486ffe2b79f67bf5aa15c 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerFrameDynamic.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerFrameDynamic.test.ts
@@ -54,7 +54,7 @@ describe('FrameDynamic Test', () => {
       y: 0,
     },
     {
-      alpha: '0.00',
+      alpha: '70.00',
       appName: 'test',
       groupId: 6970503809,
       height: 0,
@@ -65,15 +65,15 @@ describe('FrameDynamic Test', () => {
       y: 0,
     },
     {
-      alpha: '1.00',
-      appName: 'test',
+      alpha: '13.00',
+      appName: 'test1',
       frame: rect,
-      groupId: 11095334538,
+      groupId: 32238,
       height: 2766,
       id: 717,
-      ts: 11720232454,
+      ts: 611455,
       typeValue: 0,
-      width: 1343,
+      width: 11223,
       x: 0,
       y: 1,
     },
@@ -99,16 +99,16 @@ describe('FrameDynamic Test', () => {
   });
   it('FrameDynamicTest02', function () {
     let currDynamic = {
-      alpha: '1.00',
-      appName: 'test',
+      alpha: '16.00',
+      appName: 'test2',
       frame: rect,
-      groupId: 11095334538,
-      height: 2766,
-      id: 717,
-      ts: 11720232454,
-      typeValue: 0,
-      width: 1343,
-      x: 0,
+      groupId: 19312108,
+      height: 206,
+      id: 9654,
+      ts: 10242454,
+      typeValue: 10,
+      width: 1233,
+      x: 10,
       y: 1,
     };
     frameDynamicRender.drawDynamicPointYStr(ctx, dataList, rect, 0, 20);
@@ -121,17 +121,17 @@ describe('FrameDynamic Test', () => {
     row.dataListCache = dataList;
     frameDynamicRender.renderMainThread(req, row);
     let currDynamicStruct = {
-      alpha: '1.00',
-      appName: 'test',
+      alpha: '11.00',
+      appName: 'test4',
       frame: rect,
-      groupId: 11095334538,
+      groupId: 2011538,
       height: 2766,
       id: 717,
-      ts: 11720232454,
+      ts: 12100454,
       typeValue: 0,
-      width: 1343,
-      x: 0,
-      y: 1,
+      width: 321,
+      x: 10,
+      y: 11,
     };
 
     let preDynamicStruct = {
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerFreq.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerFreq.test.ts
index 15986dada26213b1c7ebc07cd6dabd0afd385ffe..4c3f114a40e11ad95210706b9a61a39f8f22adaa 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerFreq.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerFreq.test.ts
@@ -27,14 +27,14 @@ import { Rect } from '../../../../dist/trace/component/trace/timer-shaft/Rect.js
 describe('freqTest', () => {
   it('freqTest01', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 10;
+    canvas.height = 10;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 210,
+        y: 210,
         width: 100,
         height: 100,
       },
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerFunc.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerFunc.test.ts
index a50fa820e044216ed6f391def1e78caf6cb28970..3e1a6c457eff32e655d2aee5f7d551f23ad95807 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerFunc.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerFunc.test.ts
@@ -25,59 +25,59 @@ import { markAsUntransferable } from 'worker_threads';
 
 describe(' ProcedureWorkerFuncTest', () => {
   it('FuncTest01', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
+    let funcDataList = new Array();
+    funcDataList.push({
+      startTime: 10,
+      dur: 410,
       frame: { x: 0, y: 9, width: 10, height: 10 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
-    let rect = new Rect(0, 10, 10, 10);
+    funcDataList.push({ startTime: 17, dur: 141 });
+    let rect = new Rect(0, 30, 30, 30);
     let res = [
       {
-        startTs: 0,
-        dur: 10,
-        length: 1,
+        startTs: 31,
+        dur: 140,
+        length: 16,
         frame: '',
       },
     ];
-    func(dataList, res, 1, 100254, 100254, rect, true);
+    func(funcDataList, res, 1, 100254, 100254, rect, true);
   });
 
   it('FuncTest02', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let funcDataList = new Array();
+    funcDataList.push({
+      startTime: 450,
+      dur: 140,
+      frame: { x: 0, y: 93, width: 120, height: 320 },
     });
-    dataList.push({
-      startTime: 1,
-      dur: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    funcDataList.push({
+      startTime: 41,
+      dur: 661,
+      frame: { x: 70, y: 9, width: 16, height: 17 },
     });
-    let rect = new Rect(0, 10, 10, 10);
+    let rect = new Rect(30, 50, 53, 13);
     let res = [
       {
-        startTs: 0,
+        startTs: 10,
         dur: 10,
-        length: 0,
+        length: 60,
         frame: '',
       },
     ];
-    func(dataList, res, 1, 100254, 100254, rect, false);
+    func(funcDataList, res, 1, 100254, 100254, rect, false);
   });
 
   it('FuncTest03', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 9;
+    canvas.height = 9;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 209,
+        y: 209,
         width: 100,
         height: 100,
       },
@@ -97,8 +97,8 @@ describe(' ProcedureWorkerFuncTest', () => {
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 240,
+        y: 240,
         width: 100,
         height: 100,
       },
@@ -128,14 +128,14 @@ describe(' ProcedureWorkerFuncTest', () => {
     let req = {
       lazyRefresh: undefined,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 31,
+      endNS: 71,
+      totalNS: 40,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 30,
+        y: 22,
+        width: 550,
+        height: 150,
       },
       useCache: false,
       range: {
@@ -144,27 +144,27 @@ describe(' ProcedureWorkerFuncTest', () => {
       canvas: '',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
-        height: 150,
-        width: 100,
+        fillStyle: '#30a16f',
+        globalAlpha: 0.556,
+        height: 177,
+        width: 150,
       },
-      lineColor: '',
+      lineColor: '#014d5f',
       isHover: '',
-      hoverX: 1,
+      hoverX: 21,
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      slicesTime: 53,
+      id: 64,
+      x: 760,
+      y: 67,
+      width: 106,
+      height: 170,
       params: {
         isLive: false,
-        maxHeight: 2,
-        dpr: 1,
+        maxHeight: 222,
+        dpr: 431,
         hoverFuncStruct: '',
         selectFuncStruct: undefined,
       },
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHeap.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHeap.test.ts
index 9abbc5d2c884bde29e5cca4fa20516365ae8698f..3bcc815e39ba081674c55b41d30116b0f9a6c2fb 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHeap.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHeap.test.ts
@@ -30,36 +30,36 @@ import { Rect } from '../../../../dist/trace/component/trace/timer-shaft/Rect.js
 
 describe(' Test', () => {
   it('HeapTest01', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let heapDataList = new Array();
+    heapDataList.push({
+      startTime: 40,
+      dur: 150,
+      frame: { x: 0, y: 19, width: 20, height: 10 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
-    let rect = new Rect(0, 10, 10, 10);
+    heapDataList.push({ startTime: 12, dur: 21 });
+    let rect = new Rect(0, 10, 30, 10);
     let res = [
       {
-        startTs: 0,
-        dur: 10,
-        length: 1,
+        startTs: 11,
+        dur: 166,
+        length: 15,
         frame: '',
       },
     ];
-    heap(dataList, res, 1, 100254, 100254, rect, true);
+    heap(heapDataList, res, 1, 100254, 100254, rect, true);
   });
 
   it('HeapTest02', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let heapHataList = new Array();
+    heapHataList.push({
+      startTime: 1,
+      dur: 118,
+      frame: { x: 60, y: 9, width: 10, height: 10 },
     });
-    dataList.push({
+    heapHataList.push({
       startTime: 1,
-      dur: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 15,
+      frame: { x: 0, y: 19, width: 110, height: 130 },
     });
     let rect = new Rect(0, 10, 10, 10);
     let res = [
@@ -70,19 +70,19 @@ describe(' Test', () => {
         frame: '',
       },
     ];
-    heap(dataList, res, 1, 100254, 100254, rect, false);
+    heap(heapHataList, res, 1, 100254, 100254, rect, false);
   });
 
   it('HeapTest03', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 11;
+    canvas.height = 12;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 250,
+        y: 250,
         width: 100,
         height: 100,
       },
@@ -93,14 +93,14 @@ describe(' Test', () => {
   });
   it('HeapTest04', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 11;
+    canvas.height = 11;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 205,
+        y: 205,
         width: 100,
         height: 100,
       },
@@ -111,52 +111,52 @@ describe(' Test', () => {
   });
 
   it('HeapTest05', function () {
-    let nativeMemoryRender = new HeapRender();
-    let req = {
+    let heapRender = new HeapRender();
+    let heapReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 3,
+      endNS: 9,
+      totalNS: 6,
       frame: {
         x: 20,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 200,
+        height: 200,
       },
       useCache: false,
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 'canvas',
       context: {
         font: '11px sans-serif',
         fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        globalAlpha: 0.56,
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
+        beginPath: jest.fn(() => false),
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
+        stroke: jest.fn(() => true),
         fillRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#666666',
       isHover: '',
       hoverX: 1,
-      params: '',
+      params: 'params',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 1,
       id: 1,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 320,
+      height: 320,
     };
     window.postMessage = jest.fn(() => true);
-    expect(nativeMemoryRender.render(req, [], [])).toBeUndefined();
+    expect(heapRender.render(heapReq, [], [])).toBeUndefined();
   });
   it('HeapTest04', () => {
     const canvas = document.createElement('canvas');
@@ -187,7 +187,7 @@ describe(' Test', () => {
     expect(HeapStruct.setFrame(node, 2, 1, 5, 4, data)).toBeUndefined();
   });
   it('HeapTest07', function () {
-    let nativeMemoryRender = new HeapRender();
+    let heapRender = new HeapRender();
     let canvas = document.createElement('canvas') as HTMLCanvasElement;
     let context = canvas.getContext('2d');
     const data = {
@@ -197,6 +197,6 @@ describe(' Test', () => {
       traceRange: [],
     };
     window.postMessage = jest.fn(() => true);
-    expect(nativeMemoryRender.renderMainThread(data, new TraceRow())).toBeUndefined();
+    expect(heapRender.renderMainThread(data, new TraceRow())).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.test.ts
index 1c7fcd0f45162780cd7045e4c1015c6867b29959..274518c535be563055e74d347841e31e7aacf103 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHeapSnapshot.test.ts
@@ -58,13 +58,13 @@ describe('ProcedureWorkerHeapTimeline Test', () => {
       {
         end_time: 50,
         end_ts: 1520000,
-        file_name: 'Snapshot0',
-        frame: { x: 0, y: 0, width: 6222, height: 62222 },
-        id: 0,
         pid: 4243,
         start_time: 0,
         start_ts: 88473061693464,
         textMetricsWidth: 50.5810546875,
+        file_name: 'Snapshot0',
+        frame: { x: 0, y: 0, width: 6222, height: 62222 },
+        id: 0,
       },
     ];
     HeapSnapshot(list, filter, 100254, 100254, rect, { height: 40, width: 1407, x: 0, y: 0 });
@@ -72,19 +72,19 @@ describe('ProcedureWorkerHeapTimeline Test', () => {
 
   it('HeapSnapshotStructTest01', () => {
     const data = {
-      cpu: 1,
-      startNs: 1,
-      value: 1,
+      cpu: 3,
+      startNs: 31,
+      value: 91,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 23,
+        y: 22,
+        width: 200,
+        height: 120,
       },
       maxValue: undefined,
-      startTime: 1,
-      filterID: 2,
-      size: 102,
+      startTime: 31,
+      filterID: 23,
+      size: 106,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -95,22 +95,22 @@ describe('ProcedureWorkerHeapTimeline Test', () => {
 
   it('HeapSnapshotStructTest02', () => {
     const data = {
-      cpu: 1,
-      startNs: 1,
-      value: 1,
+      cpu: 0,
+      startNs: 71,
+      value: 17,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 270,
+        y: 250,
+        width: 500,
+        height: 606,
       },
       maxValue: undefined,
-      startTime: 1,
-      filterID: 2,
+      startTime: 61,
+      filterID: 21,
     };
     let node = {
-      start_time: 1,
-      end_time: 2,
+      start_time: 3,
+      end_time: 4,
       frame: null,
     };
     expect(HeapSnapshotStruct.setFrame(node, 0, 1, 2, data)).toBeUndefined();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHeapTimeline.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHeapTimeline.test.ts
index 5e0c5c6ea88717caaffeba5a842c0184e8f92444..e1914fb3c6044d764359d3fbeccddf27588ddd74 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHeapTimeline.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHeapTimeline.test.ts
@@ -27,34 +27,34 @@ import {
 
 describe('ProcedureWorkerHeapTimeline Test', () => {
   it('HeapTimelineTest', () => {
-    const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
-    const ctx = canvas.getContext('2d');
+    const heapTimelineCanvas = document.createElement('canvas');
+    heapTimelineCanvas.width = 11;
+    heapTimelineCanvas.height = 11;
+    const ctx = heapTimelineCanvas.getContext('2d');
     let dataList = new Array();
     dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startTime: 1,
+      dur: 101,
+      frame: { x: 0, y: 10, width: 10, height: 10 },
     });
     dataList.push({ startTime: 1, dur: 111 });
     let rect = new Rect(0, 10, 10, 10);
-    HeapTimeline(canvas, ctx, 1, 100254, 100254, rect, (e: any) => {});
+    HeapTimeline(heapTimelineCanvas, ctx, 1, 100254, 100254, rect, (e: any) => {});
   });
   it('HeapTimelineStructTest01', () => {
     const data = {
-      cpu: 1,
-      startNs: 1,
-      value: 1,
+      cpu: 3,
+      startNs: 3,
+      value: 111,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 40,
+        y: 40,
+        width: 230,
+        height: 132,
       },
       maxValue: undefined,
       startTime: 1,
-      filterID: 2,
+      filterID: 3,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.test.ts
index 5ba3f244588b669f8dfbd607959ae3a24b3aa460..16534ecbad203b6fb045318b30de52028b27d9b0 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.test.ts
@@ -41,13 +41,13 @@ describe('ProcedureWorkerHiPerfCPU Test', () => {
   it('ProcedureWorkerHiPerfCPUTest01', () => {
     const data = {
       frame: undefined,
-      cpu: 1,
-      startNs: 1,
-      value: 1,
+      cpu: 3,
+      startNs: 56,
+      value: 45,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
-    canvas.height = 1;
+    canvas.height = 4;
     const ctx = canvas.getContext('2d');
     expect(HiPerfCpuStruct.draw(ctx, '', data, true)).toBeUndefined();
   });
@@ -76,7 +76,7 @@ describe('ProcedureWorkerHiPerfCPU Test', () => {
         x: 20,
         y: 20,
         width: 100,
-        height: 100,
+        height: 300,
       },
       useCache: false,
       range: {
@@ -86,14 +86,14 @@ describe('ProcedureWorkerHiPerfCPU Test', () => {
       context: {
         font: '11px sans-serif',
         fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        globalAlpha: 0.7,
+        fill: jest.fn(() => true),
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
-        fill: jest.fn(() => true),
       },
       lineColor: '',
       isHover: '',
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.test.ts
index 215d559250b68025460af3ec17f88599be5a51ca..bac84db25bb04ae3789dde5b993c9411b9ff3069 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfEvent.test.ts
@@ -34,14 +34,14 @@ describe('ProcedureWorkerHiPerfEvent Test', () => {
   it('ProcedureWorkerHiPerfEventTest03', () => {
     const data = {
       frame: {
-        x: 0,
-        y: 9,
-        width: 10,
-        height: 10,
+        x: 50,
+        y: 21,
+        width: 60,
+        height: 16,
       },
-      cpu: 1,
-      startNs: 1,
-      value: 1,
+      cpu: 3,
+      startNs: 41,
+      value: 14,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -53,22 +53,22 @@ describe('ProcedureWorkerHiPerfEvent Test', () => {
   it('ProcedureWorkerHiPerfEventTest04', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 22,
+        y: 30,
+        width: 90,
+        height: 80,
       },
-      startNS: 0,
-      value: 50,
-      startTs: 3,
-      dur: 1,
-      height: 2,
+      startNS: 3,
+      value: 33,
+      startTs: 35,
+      dur: 35,
+      height: 55,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 37,
+      y: 77,
+      width: 460,
+      height: 600,
     };
     expect(HiPerfEventStruct.setFrame(node, 2, 1, 2, frame)).toBeUndefined();
   });
@@ -76,22 +76,22 @@ describe('ProcedureWorkerHiPerfEvent Test', () => {
   it('ProcedureWorkerHiPerfEventTest05', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 30,
+        y: 30,
+        width: 660,
+        height: 660,
       },
-      startNS: 2,
-      value: 50,
+      startNS: 20,
+      value: 60,
       startTs: 3,
-      dur: 3,
-      height: 2,
+      dur: 61,
+      height: 63,
     };
     let frame = {
-      x: 20,
+      x: 10,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 166,
+      height: 330,
     };
     expect(HiPerfEventStruct.setFrame(node, 2, 1, 2, frame)).toBeUndefined();
   });
@@ -110,8 +110,8 @@ describe('ProcedureWorkerHiPerfEvent Test', () => {
       endNS: 1,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
+        x: 234,
+        y: 120,
         width: 100,
         height: 100,
       },
@@ -119,19 +119,19 @@ describe('ProcedureWorkerHiPerfEvent Test', () => {
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 'event',
       context: {
         font: '11px sans-serif',
         fillStyle: '#ec407a',
         globalAlpha: 0.6,
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
         fill: jest.fn(() => true),
+        beginPath: jest.fn(() => true),
+        stroke: jest.fn(() => true),
+        closePath: jest.fn(() => true),
       },
       lineColor: '',
       isHover: '',
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.test.ts
index 11e4afd712fa02d319704a4aa01116d78ce22adb..746b1f3189c37043650514aa560b80340084cca9 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfProcess.test.ts
@@ -31,12 +31,12 @@ describe('ProcedureWorkerHiPerfProcess Test', () => {
     const data = {
       frame: undefined,
       cpu: 1,
-      startNs: 1,
-      value: 1,
+      startNs: 41,
+      value: 41,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
-    canvas.height = 1;
+    canvas.height = 2;
     const ctx = canvas.getContext('2d');
     expect(HiPerfProcessStruct.draw(ctx, '', data, true)).toBeUndefined();
   });
@@ -73,53 +73,53 @@ describe('ProcedureWorkerHiPerfProcess Test', () => {
 
   it('ProcedureWorkerHiPerfProcessTest05', function () {
     let hiperfProcessRender = new HiperfProcessRender();
-    let req = {
+    let hiperfProcessReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 12,
+      totalNS: 11,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 145,
+        y: 202,
+        width: 110,
+        height: 101,
       },
       useCache: false,
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 's',
       context: {
         font: '11px sans-serif',
         fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        globalAlpha: 0.3,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
+        fillText: jest.fn(() => true),
+        fill: jest.fn(() => false),
         stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
+        measureText: jest.fn(() => ''),
         fillRect: jest.fn(() => true),
-        fillText: jest.fn(() => true),
-        fill: jest.fn(() => true),
       },
       lineColor: '',
       isHover: '',
       hoverX: 1,
-      params: '',
+      params: 'q',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 7,
       id: 1,
-      x: 20,
-      y: 20,
+      x: 27,
+      y: 27,
       width: 100,
       height: 100,
-      scale: 100_000_001,
+      scale: 100_070_001,
     };
     window.postMessage = jest.fn(() => true);
-    expect(hiperfProcessRender.render(req, [], [], [])).toBeUndefined();
+    expect(hiperfProcessRender.render(hiperfProcessReq, [], [], [])).toBeUndefined();
   });
   it('ProcedureWorkerHiPerfProcessTest06', function () {
     let hiperfProcessRender = new HiperfProcessRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfReport.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfReport.test.ts
index eaf3b3c79d3cd44ca82a40b0ef40343785b68468..f676f0c9a075c17aace6c0f523f76538fd0d18e6 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfReport.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfReport.test.ts
@@ -30,98 +30,98 @@ import { TraceRow } from '../../../../dist/trace/component/trace/base/TraceRow.j
 describe('ProcedureWorkerHiPerfReport Test', () => {
   it('ProcedureWorkerHiPerfReportTest01', () => {
     let frame = {
-      x: 0,
-      y: 9,
-      width: 10,
+      x: 5,
+      y: 95,
+      width: 50,
       height: 10,
     };
     let dataList = new Array();
     dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startTime: 50,
+      dur: 50,
+      frame: { x: 50, y: 9, width: 105, height: 150 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
+    dataList.push({ startTime: 51, dur: 511 });
     let dataList2 = new Array();
     dataList2.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 1 },
+      startTime: 50,
+      dur: 190,
+      frame: { x: 60, y: 99, width: 610, height: 16 },
     });
-    dataList2.push({ startTime: 1, dur: 111 });
-    let rect = new Rect(0, 10, 10, 10);
+    dataList2.push({ startTime: 61, dur: 691 });
+    let rect = new Rect(0, 10, 60, 10);
     HiPerfReport(dataList, dataList2, '', [{ length: 1 }], 1, 1024, 1024, frame, true, 1, true);
   });
 
   it('ProcedureWorkerHiPerfReportTest02', () => {
     let frame = {
-      x: 0,
-      y: 9,
-      width: 10,
-      height: 10,
+      x: 33,
+      y: 39,
+      width: 130,
+      height: 130,
     };
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
-    });
-    dataList.push({
+    let hiPerfReportDataList = new Array();
+    hiPerfReportDataList.push({
       startTime: 1,
-      dur: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 11,
+      frame: { x: 10, y: 91, width: 110, height: 310 },
+    });
+    hiPerfReportDataList.push({
+      startTime: 31,
+      dur: 131,
+      frame: { x: 30, y: 4, width: 130, height: 103 },
     });
-    let rect = new Rect(0, 10, 10, 10);
+    let rect = new Rect(0, 30, 13, 13);
     let dataList2 = new Array();
     dataList2.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 1 },
+      startTime: 3,
+      dur: 132,
+      frame: { x: 23, y: 32, width: 130, height: 32 },
     });
-    dataList2.push({ startTime: 1, dur: 111 });
-    HiPerfReport(dataList, dataList2, '', [{ length: 0 }], 1, 1024, 1024, frame, true, 1, false);
+    dataList2.push({ startTime: 21, dur: 133 });
+    HiPerfReport(hiPerfReportDataList, dataList2, '', [{ length: 0 }], 1, 1024, 1024, frame, true, 1, false);
   });
 
   it('ProcedureWorkerHiPerfReportTest07', () => {
     let frame = {
-      x: 0,
-      y: 9,
-      width: 10,
-      height: 10,
+      x: 70,
+      y: 97,
+      width: 60,
+      height: 170,
     };
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let hiPerfReportDataList = new Array();
+    hiPerfReportDataList.push({
+      startTime: 5,
+      dur: 5,
+      frame: { x: 4, y: 93, width: 350, height: 130 },
     });
-    dataList.push({
-      startTime: 1,
-      dur: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    hiPerfReportDataList.push({
+      startTime: 12,
+      dur: 21,
+      frame: { x: 50, y: 95, width: 50, height: 640 },
     });
-    let rect = new Rect(0, 10, 10, 10);
+    let rect = new Rect(0, 60, 60, 60);
     let dataList2 = new Array();
     dataList2.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 1 },
+      startTime: 60,
+      dur: 40,
+      frame: { x: 40, y: 49, width: 40, height: 14 },
     });
-    dataList2.push({ startTime: 1, dur: 111 });
-    HiPerfReport(dataList, dataList2, '', [{ length: 0 }], 1, 1024, 1024, frame, false, 1, false);
+    dataList2.push({ startTime: 17, dur: 16 });
+    HiPerfReport(hiPerfReportDataList, dataList2, '', [{ length: 0 }], 1, 1024, 1024, frame, false, 1, false);
   });
 
   it('ProcedureWorkerHiPerfReportTest03', () => {
     const data = {
       frame: {
-        x: 0,
-        y: 9,
-        width: 10,
-        height: 10,
+        x: 15,
+        y: 8,
+        width: 98,
+        height: 80,
       },
       cpu: 1,
-      startNs: 1,
-      value: 1,
+      startNs: 13,
+      value: 198,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -133,22 +133,22 @@ describe('ProcedureWorkerHiPerfReport Test', () => {
   it('ProcedureWorkerHiPerfReportTest04', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 29,
+        y: 27,
+        width: 107,
+        height: 170,
       },
-      startNS: 0,
-      value: 50,
-      startTs: 3,
-      dur: 1,
-      height: 2,
+      startNS: 70,
+      value: 57,
+      startTs: 34,
+      dur: 121,
+      height: 22,
     };
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 30,
+      y: 690,
+      width: 199,
+      height: 109,
     };
     expect(HiPerfReportStruct.setFrame(node, 2, 1, 2, frame)).toBeUndefined();
   });
@@ -156,22 +156,22 @@ describe('ProcedureWorkerHiPerfReport Test', () => {
   it('ProcedureWorkerHiPerfReportTest05', function () {
     let node = {
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 30,
+        y: 90,
+        width: 220,
+        height: 1520,
       },
-      startNS: 2,
-      value: 50,
-      startTs: 3,
-      dur: 3,
-      height: 2,
+      startNS: 55,
+      value: 522,
+      startTs: 19,
+      dur: 98,
+      height: 8
     };
     let frame = {
-      x: 20,
+      x: 150,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 400,
+      height: 400,
     };
     expect(HiPerfReportStruct.setFrame(node, 2, 1, 2, frame)).toBeUndefined();
   });
@@ -190,8 +190,8 @@ describe('ProcedureWorkerHiPerfReport Test', () => {
       endNS: 1,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
+        x: 210,
+        y: 120,
         width: 100,
         height: 100,
       },
@@ -206,12 +206,12 @@ describe('ProcedureWorkerHiPerfReport Test', () => {
         globalAlpha: 0.6,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
         fillText: jest.fn(() => true),
         fill: jest.fn(() => true),
+        stroke: jest.fn(() => true),
+        closePath: jest.fn(() => true),
+        measureText: jest.fn(() => true),
       },
       lineColor: '',
       isHover: '',
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfThread.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfThread.test.ts
index e3cb0ab2f1f1d8cf7a35b27d63c6856a84a6ac57..89f03140c1292ed65e0c309c1304262a8d0c3975 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfThread.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerHiPerfThread.test.ts
@@ -30,25 +30,25 @@ import { hiPerf } from '../../../../dist/trace/database/ui-worker/ProcedureWorke
 describe('ProcedureWorkerHiPerfThread Test', () => {
   let res = [
     {
-      startNS: 0,
-      dur: 10,
+      startNS: 13,
+      dur: 50,
       frame: {
-        x: 0,
-        y: 9,
-        width: 10,
-        height: 10,
+        x: 60,
+        y: 69,
+        width: 16,
+        height: 69,
       },
     },
   ];
   it('ProcedureWorkerHiPerfThreadTest01', () => {
     const data = {
       frame: undefined,
-      cpu: 1,
-      startNs: 1,
-      value: 1,
+      cpu: 0,
+      startNs: 58,
+      value: 5,
     };
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
+    canvas.width = 4;
     canvas.height = 1;
     const ctx = canvas.getContext('2d');
     expect(HiPerfThreadStruct.draw(ctx, '', data, true)).toBeUndefined();
@@ -57,17 +57,17 @@ describe('ProcedureWorkerHiPerfThread Test', () => {
   it('ProcedureWorkerHiPerfThreadTest02', function () {
     let dataList = new Array();
     dataList.push({
-      startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startNS: 80,
+      dur: 17,
+      length: 17,
+      frame: { x: 7, y: 9, width: 17, height: 170 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
+    dataList.push({ startNS: 1, dur: 2, length: 71 });
     let frame = {
-      x: 0,
+      x: 70,
       y: 9,
-      width: 10,
-      height: 10,
+      width: 70,
+      height: 107,
     };
     hiPerf(dataList, [{ length: 0 }], dataList, 8, 3, frame, false, 1, false);
   });
@@ -75,17 +75,17 @@ describe('ProcedureWorkerHiPerfThread Test', () => {
   it('ProcedureWorkerHiPerfThreadTest03', function () {
     let dataList = new Array();
     dataList.push({
-      startNS: 0,
-      dur: 10,
-      length: 1,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startNS: 30,
+      dur: 350,
+      length: 551,
+      frame: { x: 7, y: 76, width: 610, height: 106 },
     });
-    dataList.push({ startNS: 1, dur: 2, length: 1 });
+    dataList.push({ startNS: 1, dur: 62, length: 1 });
     let frame = {
-      x: 0,
-      y: 9,
-      width: 10,
-      height: 10,
+      x: 60,
+      y: 96,
+      width: 160,
+      height: 160,
     };
     hiPerf(dataList, [{ length: 1 }], dataList, 8, 3, frame, true, 1, true);
   });
@@ -98,50 +98,50 @@ describe('ProcedureWorkerHiPerfThread Test', () => {
 
   it('ProcedureWorkerHiPerfThreadTest05', function () {
     let hiperfThreadRender = new HiperfThreadRender();
-    let req = {
+    let hiperfThreadReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 21,
+      endNS: 31,
+      totalNS: 10,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
+        x: 134,
+        y: 120,
+        width: 102,
         height: 100,
       },
       useCache: false,
       range: {
         refresh: '',
       },
-      canvas: 'a',
+      canvas: 'thread',
       context: {
-        font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        font: '15px sans-serif',
+        fillStyle: '#b4617b',
+        globalAlpha: 0.65,
+        closePath: jest.fn(() => true),
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
-        closePath: jest.fn(() => true),
+        stroke: jest.fn(() => []),
         measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
-        fillText: jest.fn(() => true),
+        fillText: jest.fn(() => []),
         fill: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#210202',
       isHover: '',
-      hoverX: 1,
+      hoverX: 3,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
-      x: 20,
-      y: 20,
+      slicesTime: 9,
+      id: 7,
+      x: 71,
+      y: 21,
       width: 100,
-      height: 100,
-      scale: 100_000_001,
+      height: 107,
+      scale: 100_000_006,
     };
     window.postMessage = jest.fn(() => true);
     let a = {
@@ -165,7 +165,7 @@ describe('ProcedureWorkerHiPerfThread Test', () => {
       ],
     };
 
-    expect(hiperfThreadRender.render(req, [], [], [])).toBeUndefined();
+    expect(hiperfThreadRender.render(hiperfThreadReq, [], [], [])).toBeUndefined();
   });
   it('ProcedureWorkerHiPerfThreadTest06', function () {
     let hiperfThreadRender = new HiperfThreadRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerIrq.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerIrq.test.ts
index dd8c74170342e82a8d8045e19947400a76beefaf..ff024dca8c65529c34fc4e2a8b325c941a4ccf3e 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerIrq.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerIrq.test.ts
@@ -23,14 +23,14 @@ import { IrqRender, IrqStruct } from '../../../../dist/trace/database/ui-worker/
 describe('ProcedureWorkerIrq Test', () => {
   it('ProcedureWorkerIrq01', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 4;
+    canvas.height = 4;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 210,
+        y: 210,
         width: 100,
         height: 100,
       },
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerJank.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerJank.test.ts
index 52733574a008de769e97706ebf639fa23c99b469..249cb0d834d4786262645bf0c6292911bd78b5c7 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerJank.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerJank.test.ts
@@ -53,34 +53,34 @@ describe('ProcedureWorkerJank Test', () => {
 
   it('ProcedureWorkerJank01', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 2;
+    canvas.height = 2;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 120,
+        y: 120,
         width: 100,
         height: 100,
       },
-      id: 25,
+      id: 21,
       ts: 254151,
-      dur: 1202,
+      dur: 1201,
       name: '1583',
-      depth: 1,
+      depth: 6,
       jank_tag: true,
       cmdline: 'render.test',
       type: '0',
-      pid: 20,
+      pid: 21,
       frame_type: 'render_service',
-      src_slice: '525',
-      rs_ts: 2569,
-      rs_vsync: '2569',
-      rs_dur: 1528,
-      rs_pid: 1252,
+      src_slice: '5',
+      rs_ts: 3,
+      rs_vsync: '2561',
+      rs_dur: 965,
+      rs_pid: 320,
       rs_name: 'name',
-      gpu_dur: 2568,
+      gpu_dur: 102,
     };
     expect(JankStruct.draw(ctx!, data, 2)).toBeUndefined();
   });
@@ -94,72 +94,72 @@ describe('ProcedureWorkerJank Test', () => {
   });
 
   it('ProcedureWorkerJank09', function () {
-    let node = [
+    let jankNode = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 9,
+          y: 10,
+          width: 21,
+          height: 22,
         },
-        startNS: 200,
-        length: 1,
-        height: 2,
+        startNS: 44,
+        length: 41,
+        height: 422,
       },
     ];
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 220,
+      y: 120,
+      width: 444,
+      height: 4,
     };
     let list = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 7,
+          y: 75,
+          width: 2,
+          height: 12,
         },
-        startNS: 200,
-        length: 2,
-        height: 2,
+        startNS: 45,
+        length: 5,
+        height: 32,
       },
     ];
-    jank(list, node, 1, 1, 1, frame, true);
+    jank(list, jankNode, 1, 1, 1, frame, true);
   });
 
   it('ProcedureWorkerJank10', function () {
     let node = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 90,
+          y: 80,
+          width: 230,
+          height: 300,
         },
-        startNS: 200,
-        length: 1,
-        height: 2,
+        startNS: 800,
+        length: 100,
+        height: 92,
       },
     ];
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 980,
+      y: 980,
+      width: 400,
+      height: 1440,
     };
     let list = [
       {
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          x: 45,
+          y: 50,
+          width: 150,
+          height: 140,
         },
-        startNS: 200,
-        length: 2,
-        height: 2,
+        startNS: 20,
+        length: 72,
+        height: 27,
       },
     ];
     jank(list, node, 1, 1, 1, frame, false);
@@ -168,16 +168,16 @@ describe('ProcedureWorkerJank Test', () => {
   it('ProcedureWorkerJank11', () => {
     let node = {
       frame: {
-        x: 20,
+        x: 65,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 99,
+        height: 330,
       },
       startNS: 200,
       length: 1,
-      height: 0,
+      height: 90,
       startTime: 0,
-      dur: 1,
+      dur: 31,
     };
     expect(JankStruct.setJankFrame(node, 1, 1, 1, 10, { width: 10 })).toBeUndefined();
   });
@@ -199,109 +199,109 @@ describe('ProcedureWorkerJank Test', () => {
       {
         dataList: [
           {
-            id: 7,
-            frame_type: 'frameTime',
-            ipid: 84,
-            name: 36691,
-            app_dur: 16616797,
-            dur: 33234127,
-            ts: 15038992,
-            type: 1,
+            id: 17,
+            frame_type: 'frameTimes',
+            ipid: 34,
+            name: 36331,
+            app_dur: 16616555,
+            dur: 33554127,
+            ts: 15037892,
+            type: 61,
             flag: null,
-            pid: 3420,
-            cmdline: 'com.huawei.wx',
-            rs_ts: 31656322,
-            rs_vsync: 28323,
-            rs_dur: 16616797,
-            rs_ipid: 25,
-            rs_pid: 1263,
-            rs_name: 'render_service',
+            pid: 3467,
+            cmdline: 'com.huawei',
+            rs_ts: 31666322,
+            rs_vsync: 28763,
+            rs_dur: 16617667,
+            rs_ipid: 555,
+            rs_pid: 1253,
+            rs_name: '',
             depth: 0,
             frame: {
-              x: 2,
-              y: 0,
-              width: 5,
-              height: 20,
+              x: 12,
+              y: 10,
+              width: 45,
+              height: 40,
             },
           },
           {
-            id: 11,
-            frame_type: 'frameTime',
-            ipid: 84,
-            name: 36692,
-            app_dur: 16616797,
-            dur: 33233901,
-            ts: 31656322,
-            type: 1,
+            id: 41,
+            frame_type: 'frame',
+            ipid: 81,
+            name: 36612,
+            app_dur: 16616234,
+            dur: 33233432,
+            ts: 31656235,
+            type: 25,
             flag: null,
-            pid: 3420,
-            cmdline: 'com.huawei.wx',
-            rs_ts: 48273426,
-            rs_vsync: 28324,
-            rs_dur: 16616797,
-            rs_ipid: 25,
-            rs_pid: 1263,
-            rs_name: 'render_service',
-            depth: 1,
+            pid: 3435,
+            cmdline: 'com.wx',
+            rs_ts: 48273526,
+            rs_vsync: 25524,
+            rs_dur: 16556797,
+            rs_ipid: 325,
+            rs_pid: 1232,
+            rs_name: 'render',
+            depth: 13,
             frame: {
-              x: 4,
-              y: 20,
-              width: 5,
-              height: 20,
+              x: 43,
+              y: 220,
+              width: 15,
+              height: 210,
             },
           },
           {
-            id: 13,
-            frame_type: 'frameTime',
-            ipid: 84,
-            name: 36693,
-            app_dur: 16616797,
-            dur: 33233626,
-            ts: 48273426,
-            type: 1,
+            id: 14,
+            frame_type: 'time',
+            ipid: 34,
+            name: 33693,
+            app_dur: 1661327,
+            dur: 33236526,
+            ts: 48256426,
+            type: 41,
             flag: null,
             pid: 3420,
-            cmdline: 'com.huawei.wx',
-            rs_ts: 64890255,
-            rs_vsync: 28325,
+            cmdline: 'com.huawei',
+            rs_ts: 68320255,
+            rs_vsync: 28435,
             rs_dur: 16616797,
-            rs_ipid: 25,
-            rs_pid: 1263,
-            rs_name: 'render_service',
-            depth: 0,
+            rs_ipid: 35,
+            rs_pid: 1563,
+            rs_name: 'service',
+            depth: 30,
             frame: {
-              x: 6,
-              y: 0,
-              width: 5,
-              height: 20,
+              x: 63,
+              y: 50,
+              width: 355,
+              height: 230,
             },
           },
         ],
         dataListCache: [
           {
-            id: 7,
+            id: 17,
             frame_type: 'frameTime',
             ipid: 84,
             name: 36691,
             app_dur: 16616797,
-            dur: 33234127,
+            dur: 33567127,
             ts: 15038992,
-            type: 1,
+            type: 81,
             flag: null,
             pid: 3420,
             cmdline: 'com.huawei.wx',
             rs_ts: 31656322,
             rs_vsync: 28323,
-            rs_dur: 16616797,
+            rs_dur: 11116797,
             rs_ipid: 25,
             rs_pid: 1263,
             rs_name: 'render_service',
-            depth: 0,
+            depth: 10,
             frame: {
               x: 2,
               y: 0,
               width: 5,
-              height: 20,
+              height: 40,
             },
           },
           {
@@ -310,8 +310,8 @@ describe('ProcedureWorkerJank Test', () => {
             ipid: 84,
             name: 36692,
             app_dur: 16616797,
-            dur: 33233901,
-            ts: 31656322,
+            dur: 33277901,
+            ts: 31657422,
             type: 1,
             flag: null,
             pid: 3420,
@@ -319,22 +319,22 @@ describe('ProcedureWorkerJank Test', () => {
             rs_ts: 48273426,
             rs_vsync: 28324,
             rs_dur: 16616797,
-            rs_ipid: 25,
+            rs_ipid: 275,
             rs_pid: 1263,
             rs_name: 'render_service',
-            depth: 1,
+            depth: 17,
             frame: {
-              x: 4,
+              x: 47,
               y: 20,
               width: 5,
               height: 20,
             },
           },
           {
-            id: 13,
+            id: 173,
             frame_type: 'frameTime',
             ipid: 84,
-            name: 36693,
+            name: 76693,
             app_dur: 16616797,
             dur: 33233626,
             ts: 48273426,
@@ -346,12 +346,12 @@ describe('ProcedureWorkerJank Test', () => {
             rs_vsync: 28325,
             rs_dur: 16616797,
             rs_ipid: 25,
-            rs_pid: 1263,
+            rs_pid: 1783,
             rs_name: 'render_service',
             depth: 0,
             frame: {
               x: 6,
-              y: 0,
+              y: 70,
               width: 5,
               height: 20,
             },
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerMem.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerMem.test.ts
index 18a03ad220febdb40a664cb93ada5d0d0e0fb860..9cafe9f30b1674068b621ec7692343b104d4f6d6 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerMem.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerMem.test.ts
@@ -32,47 +32,47 @@ describe(' Test', () => {
     height: 10,
   };
   it('MemTest01', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      duration: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let memDataList = new Array();
+    memDataList.push({
+      startTime: 10,
+      duration: 12,
+      frame: { x: 0, y: 12, width: 14, height: 120 },
     });
-    dataList.push({
-      startTime: 1,
-      duration: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    memDataList.push({
+      startTime: 2,
+      duration: 131,
+      frame: { x: 0, y: 3, width: 30, height: 30 },
     });
-    let rect = new Rect(0, 10, 10, 10);
-    mem(dataList, [{ length: 0 }], 2, 100254, 100254, frame, false);
+    let rect = new Rect(0, 33, 10, 7);
+    mem(memDataList, [{ length: 0 }], 2, 100254, 100254, frame, false);
   });
 
   it('MemTest02', () => {
-    let dataList = new Array();
-    dataList.push({
+    let memDataList = new Array();
+    memDataList.push({
       startTime: 0,
-      duration: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      duration: 40,
+      frame: { x: 0, y: 44, width: 144, height: 40 },
     });
-    dataList.push({
-      startTime: 1,
-      duration: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    memDataList.push({
+      startTime: 22,
+      duration: 16,
+      frame: { x: 0, y: 49, width: 130, height: 3 },
     });
-    let rect = new Rect(0, 10, 10, 10);
-    mem(dataList, [{ length: 0 }], 2, 100254, 100254, frame, true);
+    let rect = new Rect(0, 14, 10, 40);
+    mem(memDataList, [{ length: 0 }], 2, 100254, 100254, frame, true);
   });
 
   it('MemTest03', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 4;
+    canvas.height = 4;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 270,
+        y: 207,
         width: 100,
         height: 100,
       },
@@ -84,17 +84,17 @@ describe(' Test', () => {
 
   it('MemTest04', function () {
     let memRender = new MemRender();
-    let req = {
+    let memReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 2,
+      endNS: 45,
+      totalNS: 43,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 150,
+        y: 210,
+        width: 200,
+        height: 220,
       },
       useCache: false,
       range: {
@@ -103,31 +103,31 @@ describe(' Test', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        fillStyle: '#408dec',
+        globalAlpha: 0.49,
         clearRect: jest.fn(() => true),
+        fillRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
-        fillRect: jest.fn(() => true),
+        measureText: jest.fn(() => []),
         fillText: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#d90606',
       isHover: '',
       hoverX: 1,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 5,
       id: 1,
-      x: 20,
-      y: 20,
+      x: 66,
+      y: 66,
       width: 100,
       height: 100,
     };
     window.postMessage = jest.fn(() => true);
-    expect(memRender.render(req, [], [])).toBeUndefined();
+    expect(memRender.render(memReq, [], [])).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerMemoryAbility.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerMemoryAbility.test.ts
index 093d03a92f150d3ee5bcf42875eb9bca7744d54c..0e3141b232c5f3b5af3f5f3377b3aa1a648e7812 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerMemoryAbility.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerMemoryAbility.test.ts
@@ -74,15 +74,15 @@ describe('ProcedureWorkerMemoryAbility Test', () => {
 
   it('ProcedureWorkerMemoryAbilityTest03', function () {
     let memoryAbilityRender = new MemoryAbilityRender();
-    let req = {
+    let memoryAbilityReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 9,
+      totalNS: 8,
       frame: {
         x: 20,
-        y: 20,
+        y: 29,
         width: 100,
         height: 100,
       },
@@ -93,7 +93,7 @@ describe('ProcedureWorkerMemoryAbility Test', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
+        fillStyle: '#7800a8',
         globalAlpha: 0.6,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
@@ -101,24 +101,24 @@ describe('ProcedureWorkerMemoryAbility Test', () => {
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
-        fillText: jest.fn(() => true),
+        fillText: jest.fn(() => []),
       },
-      lineColor: '',
+      lineColor: '#170202',
       isHover: '',
       hoverX: 1,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 0,
       id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 23,
+      y: 21,
+      width: 130,
+      height: 140,
     };
     window.postMessage = jest.fn(() => true);
-    expect(memoryAbilityRender.render(req, [], [])).toBeUndefined();
+    expect(memoryAbilityRender.render(memoryAbilityReq, [], [])).toBeUndefined();
   });
   it('ProcedureWorkerMemoryAbilityTest04', function () {
     let memoryAbilityRender = new MemoryAbilityRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerNetworkAbility.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerNetworkAbility.test.ts
index 9d9bddc77253232b3588ebd1bb44f5096b1ad4ba..ce07a62d8eb281ce3f0303acac48eaedbd7adfee 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerNetworkAbility.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerNetworkAbility.test.ts
@@ -39,18 +39,18 @@ describe('ProcedureWorkerNetworkAbility Test', () => {
       width: 10,
       height: 10,
     },
-    startNS: 21,
-    value: 5,
+    startNS: 11,
+    value: 15,
   };
   let res = [
     {
-      startNS: 0,
-      dur: 10,
+      startNS: 12,
+      dur: 13,
       frame: {
-        x: 0,
-        y: 9,
-        width: 10,
-        height: 10,
+        x: 440,
+        y: 94,
+        width: 40,
+        height: 140,
       },
     },
   ];
@@ -61,17 +61,17 @@ describe('ProcedureWorkerNetworkAbility Test', () => {
 
   it('ProcedureWorkerNetworkAbilityTest02', function () {
     let networkAbilityRender = new NetworkAbilityRender();
-    let req = {
+    let networkAbility = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
+      startNS: 32,
+      endNS: 33,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 23,
+        y: 23,
+        width: 603,
+        height: 103,
       },
       useCache: false,
       range: {
@@ -80,25 +80,25 @@ describe('ProcedureWorkerNetworkAbility Test', () => {
       canvas: '',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
+        fillStyle: '#272822',
         globalAlpha: 0.6,
       },
-      lineColor: '',
+      lineColor: '#120f82',
       isHover: '',
-      hoverX: 1,
+      hoverX: 10,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 13,
       id: 1,
-      x: 20,
-      y: 20,
+      x: 60,
+      y: 60,
       width: 100,
-      height: 100,
+      height: 106,
     };
     window.postMessage = jest.fn(() => true);
-    expect(networkAbilityRender.render(req, [], [])).toBeUndefined();
+    expect(networkAbilityRender.render(networkAbility, [], [])).toBeUndefined();
   });
   it('ProcedureWorkerNetworkAbilityTest03', function () {
     let networkAbilityRender = new NetworkAbilityRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerProcess.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerProcess.test.ts
index 24f3c26e7fef34e208a9c2c55f5f9cbd18458e13..7d90696abf74b2261757c5bdcf6e6b42c7ad2785 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerProcess.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerProcess.test.ts
@@ -33,13 +33,13 @@ jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () =>
 describe(' ProcessTest', () => {
   let res = [
     {
-      startNS: 0,
-      dur: 10,
+      startNS: 6,
+      dur: 650,
       frame: {
-        x: 0,
-        y: 9,
-        width: 10,
-        height: 10,
+        x: 99,
+        y: 92,
+        width: 190,
+        height: 193,
       },
     },
   ];
@@ -56,37 +56,37 @@ describe(' ProcessTest', () => {
   });
 
   it('ProcessTest02', () => {
-    let dataList = new Array();
-    dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+    let processDataList = new Array();
+    processDataList.push({
+      startTime: 450,
+      dur: 150,
+      frame: { x: 32, y: 3, width: 10, height: 120 },
     });
-    dataList.push({
+    processDataList.push({
       startTime: 1,
-      dur: 111,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 51,
+      frame: { x: 30, y: 93, width: 20, height: 10 },
     });
-    let rect = new Rect(0, 10, 10, 10);
-    proc(dataList, res, 1, 100254, 100254, rect);
+    let rect = new Rect(0, 10, 10, 50);
+    proc(processDataList, res, 1, 100254, 100254, rect);
   });
 
   it('ProcessTest04', () => {
     const node = {
       frame: {
-        x: 20,
+        x: 104,
         y: 20,
-        width: 100,
+        width: 105,
         height: 100,
       },
       startNS: 200,
-      value: 50,
+      value: 30,
       startTime: 0,
       dur: 0,
     };
     const frame = {
       x: 20,
-      y: 20,
+      y: 120,
       width: 100,
       height: 100,
     };
@@ -96,9 +96,9 @@ describe(' ProcessTest', () => {
   it('ProcessTest05', () => {
     const node = {
       frame: {
-        x: 20,
+        x: 201,
         y: 20,
-        width: 0,
+        width: 3,
         height: 100,
       },
       startNS: 200,
@@ -108,7 +108,7 @@ describe(' ProcessTest', () => {
     };
     const frame = {
       x: 20,
-      y: 20,
+      y: 40,
       width: 100,
       height: 100,
     };
@@ -117,17 +117,17 @@ describe(' ProcessTest', () => {
 
   it('ProcessTest06', function () {
     let processRender = new ProcessRender();
-    let req = {
+    let processReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
+      startNS: 15,
+      endNS: 16,
       totalNS: 1,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 55,
+        y: 55,
+        width: 125,
+        height: 105,
       },
       useCache: false,
       range: {
@@ -136,31 +136,31 @@ describe(' ProcessTest', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        fillStyle: '#26e2c5',
+        globalAlpha: 0.7,
         clearRect: jest.fn(() => true),
-        beginPath: jest.fn(() => true),
-        stroke: jest.fn(() => true),
+        beginPath: jest.fn(() => false),
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
         fillRect: jest.fn(() => true),
+        stroke: jest.fn(() => []),
         fill: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#a50101',
       isHover: '',
-      hoverX: 1,
+      hoverX: 34,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 55,
       id: 1,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 123,
+      height: 123,
     };
     window.postMessage = jest.fn(() => true);
-    expect(processRender.render(req, [], [])).toBeUndefined();
+    expect(processRender.render(processReq, [], [])).toBeUndefined();
   });
 });
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerSnapshot.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerSnapshot.test.ts
index 58b802788f03467154e60e59428abee93637147c..cde7e26b022616189300398d65373b5c00d8acc3 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerSnapshot.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerSnapshot.test.ts
@@ -25,10 +25,10 @@ jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () =>
 
 describe('ProcedureWorkerSnapshot Test', () => {
     it('HeapSnapshotTest', () => {
-        const canvas = document.createElement('canvas');
-        canvas.width = 1;
-        canvas.height = 1;
-        const ctx = canvas.getContext('2d');
+        const snapshotCanvas = document.createElement('canvas');
+        snapshotCanvas.width = 1;
+        snapshotCanvas.height = 1;
+        const ctx = snapshotCanvas.getContext('2d');
         let dataList = new Array();
         dataList.push({
             startTime: 0,
@@ -68,14 +68,14 @@ describe('ProcedureWorkerSnapshot Test', () => {
 
     it('SnapshotStructTest01', () => {
         const data = {
-            cpu: 1,
+            cpu: 2,
             startNs: 1,
-            value: 1,
+            value: 2444523,
             frame: {
-                x: 20,
-                y: 20,
-                width: 100,
-                height: 100,
+                x: 40,
+                y: 40,
+                width: 650,
+                height: 144,
             },
             maxValue: undefined,
             startTime: 1,
@@ -93,12 +93,12 @@ describe('ProcedureWorkerSnapshot Test', () => {
         const data = {
             cpu: 1,
             startNs: 1,
-            value: 1,
+            value: 1854521,
             frame: {
-                x: 20,
-                y: 20,
+                x: 60,
+                y: 60,
                 width: 100,
-                height: 100,
+                height: 66,
             },
             maxValue: undefined,
             startTime: 1,
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerSoInit.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerSoInit.test.ts
index 9f03cb1831208be53693957dc779b959d9e128fe..2c6c360598c7c6163a8474e986d6a6239dd03b2f 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerSoInit.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerSoInit.test.ts
@@ -35,27 +35,27 @@ describe('ProcedureWorkerSoInit Test', () => {
         let rect = new Rect(0, 10, 10, 10);
         let filter = [
             {
-                startTs: 50,
-                dur: 1520000,
+                startTs: 520,
+                dur: 15400,
                 soName: 'Snapshot0',
                 tid: 0,
-                pid: 4243,
-                depth: 0,
-                itid: 2,
-                textMetricsWidth: 50.5810546875,
+                pid: 21,
+                depth: 5,
+                itid: 42,
+                textMetricsWidth: 52.875,
                 process: ''
             },
         ];
         let list = [
             {
-                startTs: 50,
-                dur: 1520000,
-                soName: 'Snapshot0',
-                tid: 0,
-                pid: 4243,
-                depth: 0,
-                itid: 2,
-                textMetricsWidth: 50.5810546875,
+                startTs: 32,
+                dur: 1320000,
+                soName: 'Snapshot1',
+                tid: 120,
+                pid: 213,
+                depth: 21,
+                itid: 22,
+                textMetricsWidth: 54.6875,
                 process: ''
             },
         ];
@@ -65,19 +65,19 @@ describe('ProcedureWorkerSoInit Test', () => {
     it('SoStructTest01', () => {
         const data = {
             frame: {
-                x: 20,
-                y: 20,
-                width: 100,
+                x: 432,
+                y: 222,
+                width: 340,
                 height: 100,
             },
             startTs: 50,
-            dur: 1520000,
+            dur: 1544000,
             soName: 'Snapshot0',
             tid: 0,
             pid: 4243,
-            depth: 0,
+            depth: 6,
             itid: 2,
-            textMetricsWidth: 50.5810546875,
+            textMetricsWidth: 55.75,
             process: ''
         };
         const canvas = document.createElement('canvas');
@@ -91,35 +91,35 @@ describe('ProcedureWorkerSoInit Test', () => {
         const data = {
             frame: {
                 x: 20,
-                y: 20,
-                width: 100,
+                y: 43,
+                width: 120,
                 height: 100,
             },
             startTs: 50,
-            dur: 1520000,
-            soName: 'Snapshot0',
-            tid: 0,
-            pid: 4243,
-            depth: 0,
+            dur: 152500,
+            soName: 'Snapshot1',
+            tid: 240,
+            pid: 45,
+            depth: 35,
             itid: 2,
-            textMetricsWidth: 50.5810546875,
+            textMetricsWidth: 66.650546875,
             process: ''
         };
         let node = {
             frame: {
                 x: 20,
-                y: 20,
+                y: 90,
                 width: 100,
-                height: 100,
+                height: 500,
             },
-            startTs: 50,
-            dur: 1520000,
-            soName: 'Snapshot0',
-            tid: 0,
-            pid: 4243,
-            depth: 0,
+            startTs: 3200,
+            dur: 42000,
+            soName: 'Snapshot2',
+            tid: 240,
+            pid: 210,
+            depth: 10,
             itid: 2,
-            textMetricsWidth: 50.5810546875,
+            textMetricsWidth: 96.2646875,
             process: ''
         };
         expect(SoStruct.setSoFrame(node, 2, 0, 1, 2, data)).toBeUndefined();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerThread.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerThread.test.ts
index 58124bd7ef92208484491f05ec154d092cdc3290..ed26257296dd04648d56964a3f84f78be04b138b 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerThread.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerThread.test.ts
@@ -35,14 +35,14 @@ describe('ProcedureWorkerThread Test', () => {
 
   it('ProcedureWorkerThreadTest01', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 3;
+    canvas.height = 3;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 201,
+        y: 201,
         width: 100,
         height: 100,
       },
@@ -54,14 +54,14 @@ describe('ProcedureWorkerThread Test', () => {
 
   it('ProcedureWorkerThreadTest02', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 4;
+    canvas.height = 4;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 202,
+        y: 202,
         width: 100,
         height: 100,
       },
@@ -74,14 +74,14 @@ describe('ProcedureWorkerThread Test', () => {
 
   it('ProcedureWorkerThreadTest03', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 5;
+    canvas.height = 5;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 203,
+        y: 203,
         width: 100,
         height: 100,
       },
@@ -94,14 +94,14 @@ describe('ProcedureWorkerThread Test', () => {
 
   it('ProcedureWorkerThreadTest04', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
+    canvas.width = 6;
     canvas.height = 1;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 204,
+        y: 240,
         width: 100,
         height: 100,
       },
@@ -114,14 +114,14 @@ describe('ProcedureWorkerThread Test', () => {
 
   it('ProcedureWorkerThreadTest05', () => {
     const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
+    canvas.width = 7;
+    canvas.height = 7;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 207,
+        y: 201,
         width: 100,
         height: 100,
       },
@@ -135,13 +135,13 @@ describe('ProcedureWorkerThread Test', () => {
   it('ProcedureWorkerThreadTest06', () => {
     const canvas = document.createElement('canvas');
     canvas.width = 1;
-    canvas.height = 1;
+    canvas.height = 2;
     const ctx = canvas.getContext('2d');
 
     const data = {
       frame: {
-        x: 20,
-        y: 20,
+        x: 202,
+        y: 203,
         width: 100,
         height: 100,
       },
@@ -172,16 +172,16 @@ describe('ProcedureWorkerThread Test', () => {
 
   it('ProcedureWorkerThreadTest08', function () {
     let threadRender = new ThreadRender();
-    let req = {
+    let threadReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 19,
+      totalNS: 18,
       frame: {
         x: 20,
         y: 20,
-        width: 100,
+        width: 106,
         height: 100,
       },
       useCache: false,
@@ -191,25 +191,25 @@ describe('ProcedureWorkerThread Test', () => {
       canvas: '',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        fillStyle: '#780229',
+        globalAlpha: 0.62,
       },
-      lineColor: '',
+      lineColor: '#519043',
       isHover: '',
-      hoverX: 1,
+      hoverX: 37,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
-      id: 1,
+      slicesTime: 332,
+      id: 8,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 170,
+      height: 170,
     };
     window.postMessage = jest.fn(() => true);
-    expect(threadRender.render(req, [], [])).toBeUndefined();
+    expect(threadRender.render(threadReq, [], [])).toBeUndefined();
   });
   it('ProcedureWorkerThreadTest08', function () {
     let threadRender = new ThreadRender();
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerTimeline.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerTimeline.test.ts
index b99e75ea07422a27f44624c3db07db93ee3fcb24..e223728fb49f4b9b1edacf6421b1568a12efd08e 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerTimeline.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerTimeline.test.ts
@@ -28,24 +28,23 @@ import {
 import { Rect } from '../../../../dist/trace/component/trace/timer-shaft/Rect.js';
 
 jest.mock('../../../../dist/trace/database/ui-worker/ProcedureWorker.js', () => {
-    return {};
-});
+    return {}; });
 
 describe(' ProcedureWorkerTimelineTest', () => {
   it('timelineTest', () => {
-    const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
-    const ctx = canvas.getContext('2d');
+    const timelineCanvas = document.createElement('canvas');
+    timelineCanvas.width = 12;
+    timelineCanvas.height = 12;
+    const ctx = timelineCanvas.getContext('2d');
     let dataList = new Array();
     dataList.push({
       startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 120,
+      frame: { x: 0, y: 9, width: 120, height: 10 },
     });
     dataList.push({ startTime: 1, dur: 111 });
     let rect = new Rect(0, 10, 10, 10);
-    timeline(canvas, ctx, 1, 100254, 100254, rect, null, null, null, null, null, null, 0, 0, (e: any) => {});
+    timeline(timelineCanvas, ctx, 1, 100254, 100254, rect, null, null, null, null, null, null, 0, 0, (e: any) => {});
   });
 
     it('SportRulerTest01', () => {
@@ -66,20 +65,20 @@ describe(' ProcedureWorkerTimelineTest', () => {
 
     it('SportRulerTest02', () => {
         const canvas = document.createElement('canvas');
-        canvas.width = 1;
+        canvas.width = 2;
         canvas.height = 1;
         const ctx = canvas.getContext('2d');
-        let rect = new Rect(0, 10, 10, 10);
+        let rect = new Rect(0, 20, 10, 20);
         let rangeRuler = new RangeRuler(
             canvas,
             ctx,
             rect,
             {
-                startX: 0,
+                startX: 10,
                 endX: rect.width,
-                startNS: 0,
-                endNS: 111,
-                totalNS: 111,
+                startNS: 40,
+                endNS: 14,
+                totalNS: 155,
                 xs: [],
                 xsTxt: [],
             },
@@ -107,19 +106,19 @@ describe(' ProcedureWorkerTimelineTest', () => {
   it('SportRulerTest03', () => {
     const canvas = document.createElement('canvas');
     canvas.width = 1;
-    canvas.height = 1;
+    canvas.height = 4;
     const ctx = canvas.getContext('2d');
-    let rect = new Rect(0, 10, 10, 10);
+    let rect = new Rect(0, 50, 10, 50);
     let rangeRuler = new RangeRuler(
       canvas,
       ctx,
       rect,
       {
-        startX: 0,
+        startX: 60,
         endX: rect.width,
-        startNS: 0,
-        endNS: 111,
-        totalNS: 111,
+        startNS: 660,
+        endNS: 116,
+        totalNS: 661,
         xs: [],
         xsTxt: [],
       },
diff --git a/ide/test/trace/database/ui-worker/ProcedureWorkerVirtualMemory.test.ts b/ide/test/trace/database/ui-worker/ProcedureWorkerVirtualMemory.test.ts
index a119af59146fe32e1b20802bb0d04b68047b1fe4..c45471a8baf423123f287e830a92862fb7fad594 100644
--- a/ide/test/trace/database/ui-worker/ProcedureWorkerVirtualMemory.test.ts
+++ b/ide/test/trace/database/ui-worker/ProcedureWorkerVirtualMemory.test.ts
@@ -32,52 +32,52 @@ import { mem } from '../../../../dist/trace/database/ui-worker/ProcedureWorkerCo
 describe('ProcedureWorkerVirtualMemory Test', () => {
   it('ProcedureWorkerVirtualMemoryTest01', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 34,
+      y: 44,
+      width: 144,
+      height: 430,
     };
     let dataList = new Array();
     dataList.push({
       startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      dur: 130,
+      frame: { x: 30, y: 44, width: 10, height: 140 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
+    dataList.push({ startTime: 41, dur: 411 });
     mem(dataList, [{ length: 1 }], 1, 1, 1, frame, true);
   });
 
   it('ProcedureWorkerVirtualMemoryTest02', function () {
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 70,
+      y: 77,
+      width: 443,
+      height: 180,
     };
     let dataList = new Array();
     dataList.push({
-      startTime: 0,
-      dur: 10,
-      frame: { x: 0, y: 9, width: 10, height: 10 },
+      startTime: 80,
+      dur: 180,
+      frame: { x: 870, y: 97, width: 177, height: 107 },
     });
-    dataList.push({ startTime: 1, dur: 111 });
+    dataList.push({ startTime: 71, dur: 178 });
     mem(dataList, [{ length: 0 }], 1, 1, 1, frame, false);
   });
 
   it('ProcedureWorkerVirtualMemoryTest03', () => {
     const data = {
       cpu: 1,
-      startNs: 1,
-      value: 1,
+      startNs: 14,
+      value: 143,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 44,
+        y: 43,
+        width: 120,
+        height: 233,
       },
       maxValue: undefined,
       startTime: 1,
-      filterID: 2,
+      filterID: 5,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -88,16 +88,16 @@ describe('ProcedureWorkerVirtualMemory Test', () => {
 
   it('ProcedureWorkerVirtualMemoryTest04', function () {
     let virtualMemoryRender = new VirtualMemoryRender();
-    let req = {
+    let virtualMemoryReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 22,
+      endNS: 155,
+      totalNS: 133,
       frame: {
         x: 20,
         y: 20,
-        width: 100,
+        width: 165,
         height: 100,
       },
       useCache: false,
@@ -107,31 +107,31 @@ describe('ProcedureWorkerVirtualMemory Test', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
+        fillStyle: '#f3a97e',
         globalAlpha: 0.6,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
+        measureText: jest.fn(() => []),
         fillRect: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#ff0000',
       isHover: '',
-      hoverX: 1,
+      hoverX: 71,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 557,
       id: 1,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 121,
+      height: 121,
     };
     window.postMessage = jest.fn(() => true);
-    expect(virtualMemoryRender.render(req, [], [])).toBeUndefined();
+    expect(virtualMemoryRender.render(virtualMemoryReq, [], [])).toBeUndefined();
   });
   it('ProcedureWorkerVirtualMemoryTest05', function () {
     let virtualMemoryRender = new VirtualMemoryRender();
diff --git a/ide/test/trace/database/ui-worker/ProduceWorkerSdkCounter.test.ts b/ide/test/trace/database/ui-worker/ProduceWorkerSdkCounter.test.ts
index bc9f3048fd0553568f252c89075cff885dc78955..87fe5c7d28a475ecf8229cacaae14b127e2c0590 100644
--- a/ide/test/trace/database/ui-worker/ProduceWorkerSdkCounter.test.ts
+++ b/ide/test/trace/database/ui-worker/ProduceWorkerSdkCounter.test.ts
@@ -28,13 +28,13 @@ describe('ProduceWorkerSdkCounter Test', () => {
     let sdkCounterRender = new SdkCounterRender();
     let List = [
       {
-        length: 1,
-        ts: 1,
+        length: 11,
+        ts: 9,
         frame: {
           x: 20,
-          y: 20,
-          width: 100,
-          height: 100,
+          y: 33,
+          width: 600,
+          height: 600,
         },
       },
     ];
@@ -45,10 +45,10 @@ describe('ProduceWorkerSdkCounter Test', () => {
       },
     ];
     let frame = {
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 23,
+      y: 25,
+      width: 200,
+      height: 220,
     };
     expect(sdkCounterRender.counter(List, arr, 1, 1, 1, frame, true)).toBeUndefined();
   });
@@ -57,12 +57,12 @@ describe('ProduceWorkerSdkCounter Test', () => {
     let sdkCounterRender = new SdkCounterRender();
     let List = [
       {
-        length: 1,
-        ts: 1,
+        length: 17,
+        ts: 41,
         frame: {
-          x: 20,
-          y: 20,
-          width: 100,
+          x: 21,
+          y: 32,
+          width: 700,
           height: 100,
         },
       },
@@ -89,11 +89,11 @@ describe('ProduceWorkerSdkCounter Test', () => {
       frame: {
         x: 20,
         y: 20,
-        width: 100,
-        height: 100,
+        width: 160,
+        height: 160,
       },
       startTime: 1,
-      ts: 1,
+      ts: 2,
     };
     const canvas = document.createElement('canvas');
     canvas.width = 1;
@@ -107,10 +107,10 @@ describe('ProduceWorkerSdkCounter Test', () => {
       startNs: 1,
       value: 1,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 13,
+        y: 13,
+        width: 130,
+        height: 130,
       },
       ts: 1,
       dur: 1,
@@ -129,10 +129,10 @@ describe('ProduceWorkerSdkCounter Test', () => {
       startNs: 1,
       value: 1,
       frame: {
-        x: 20,
-        y: 20,
-        width: 100,
-        height: 100,
+        x: 50,
+        y: 50,
+        width: 150,
+        height: 150,
       },
       ts: 0,
       dur: 3,
@@ -148,17 +148,17 @@ describe('ProduceWorkerSdkCounter Test', () => {
 
   it('ProduceWorkerSdkCounterTest06', function () {
     let sdkCounterRender = new SdkCounterRender();
-    let req = {
+    let sdkCounterReq = {
       lazyRefresh: true,
       type: '',
       startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      endNS: 199,
+      totalNS: 198,
       frame: {
         x: 20,
         y: 20,
         width: 100,
-        height: 100,
+        height: 120,
       },
       useCache: false,
       range: {
@@ -167,32 +167,32 @@ describe('ProduceWorkerSdkCounter Test', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        fillStyle: '#effa8e',
+        globalAlpha: 0.71,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
         measureText: jest.fn(() => true),
-        fillText: jest.fn(() => true),
+        fillText: jest.fn(() => false),
         fillRect: jest.fn(() => true),
       },
-      lineColor: '',
+      lineColor: '#78e2ba',
       isHover: '',
-      hoverX: 1,
+      hoverX: 144,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 342,
       id: 1,
       x: 20,
       y: 20,
-      width: 100,
-      height: 100,
+      width: 123,
+      height: 135,
     };
     window.postMessage = jest.fn(() => true);
-    expect(sdkCounterRender.render(req, [], [])).toBeUndefined();
+    expect(sdkCounterRender.render(sdkCounterReq, [], [])).toBeUndefined();
   });
   it('ProduceWorkerSdkCounterTest06', function () {
     let sdkCounterRender = new SdkCounterRender();
diff --git a/ide/test/trace/database/ui-worker/ProduceWorkerSdkSlice.test.ts b/ide/test/trace/database/ui-worker/ProduceWorkerSdkSlice.test.ts
index 211b288ed311c62d7b33ee6063bc9b71dc4adfe0..05e03dea78ed99c24414051ad52393d0010fdfc5 100644
--- a/ide/test/trace/database/ui-worker/ProduceWorkerSdkSlice.test.ts
+++ b/ide/test/trace/database/ui-worker/ProduceWorkerSdkSlice.test.ts
@@ -26,18 +26,18 @@ describe('ProduceWorkerSdkSlice Test', () => {
     let sdkSliceRender = new SdkSliceRender();
     let list = [
       {
-        length: 1,
+        length: 19,
         frame: {
-          x: 1,
-          Y: 10,
-          width: 100,
-          height: 20,
+          x: 46,
+          Y: 140,
+          width: 780,
+          height: 80,
         },
       },
     ];
     let res = [
       {
-        length: 1,
+        length: 81,
         frame: null,
       },
     ];
@@ -48,18 +48,18 @@ describe('ProduceWorkerSdkSlice Test', () => {
     let sdkSliceRender = new SdkSliceRender();
     let list = [
       {
-        length: 1,
+        length: 891,
         frame: {
-          x: 1,
-          Y: 10,
-          width: 100,
-          height: 20,
+          x: 17,
+          Y: 175,
+          width: 550,
+          height: 870,
         },
       },
     ];
     let res = [
       {
-        length: 0,
+        length: 430,
         frame: null,
       },
     ];
@@ -131,17 +131,17 @@ describe('ProduceWorkerSdkSlice Test', () => {
 
   it('ProduceWorkerSdkSliceTest06', function () {
     let sdkSliceRender = new SdkSliceRender();
-    let req = {
+    let sdkSliceReq = {
       lazyRefresh: true,
       type: '',
-      startNS: 1,
-      endNS: 1,
-      totalNS: 1,
+      startNS: 21,
+      endNS: 31,
+      totalNS: 10,
       frame: {
         x: 20,
-        y: 20,
+        y: 10,
         width: 100,
-        height: 100,
+        height: 200,
       },
       useCache: false,
       range: {
@@ -150,32 +150,32 @@ describe('ProduceWorkerSdkSlice Test', () => {
       canvas: 'a',
       context: {
         font: '11px sans-serif',
-        fillStyle: '#ec407a',
-        globalAlpha: 0.6,
+        fillStyle: '#2c441b',
+        globalAlpha: 0.75,
         clearRect: jest.fn(() => true),
         beginPath: jest.fn(() => true),
         stroke: jest.fn(() => true),
         closePath: jest.fn(() => true),
-        measureText: jest.fn(() => true),
+        measureText: jest.fn(() => ''),
         fillRect: jest.fn(() => true),
-        fillText: jest.fn(() => true),
+        fillText: jest.fn(() => false),
       },
-      lineColor: '',
+      lineColor: '#993e00',
       isHover: '',
-      hoverX: 1,
+      hoverX: 51,
       params: '',
       wakeupBean: undefined,
       flagMoveInfo: '',
       flagSelectedInfo: '',
-      slicesTime: 3,
+      slicesTime: 66,
       id: 1,
-      x: 20,
-      y: 20,
-      width: 100,
-      height: 100,
+      x: 70,
+      y: 80,
+      width: 15,
+      height: 15,
     };
     window.postMessage = jest.fn(() => true);
-    expect(sdkSliceRender.render(req, [], [])).toBeUndefined();
+    expect(sdkSliceRender.render(sdkSliceReq, [], [])).toBeUndefined();
   });
   it('ProduceWorkerSdkSliceTest07', function () {
     let sdkSliceRender = new SdkSliceRender();
diff --git a/trace_streamer/BUILD.gn b/trace_streamer/BUILD.gn
index 839a23f8db58935cef8e9b4b095fb2a02026701a..2ef422c519ed4959c08447953484ab992d5f3c4b 100644
--- a/trace_streamer/BUILD.gn
+++ b/trace_streamer/BUILD.gn
@@ -36,3 +36,13 @@ group("trace_streamer") {
     deps = [ "src:trace_streamer" ]
   }
 }
+
+if (!is_independent_compile) {
+  group("trace_streamer_all") {
+    deps = [
+      "src:trace_streamer(//build/toolchain/linux:clang_x64)",
+      "src:trace_streamer(//build/toolchain/mingw:mingw_x86_64)",
+      "src:trace_streamer(//build/toolchain/ohos:ohos_clang_arm64)",
+    ]
+  }
+}
diff --git a/trace_streamer/build/protoc_w.sh b/trace_streamer/build/protoc_w.sh
index c1d2015d8f3dd611c10714bf9478475964a2d4a2..da97a2a1cdf59e5a97baacdd8bd997cabeac3ce9 100644
--- a/trace_streamer/build/protoc_w.sh
+++ b/trace_streamer/build/protoc_w.sh
@@ -12,7 +12,6 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-set -e
 import os
 import subprocess
 import sys
diff --git a/trace_streamer/build/ts.gni b/trace_streamer/build/ts.gni
index 91c0c33e7ab3c10522e5481b60fae296c2fb4af0..81bd060f8d0fa1196bf7519087590c5f668f9c58 100755
--- a/trace_streamer/build/ts.gni
+++ b/trace_streamer/build/ts.gni
@@ -22,6 +22,8 @@ if (is_independent_compile) {
   PERF_DIR = "//third_party"
   clang_x64_folder = "."
   enable_ts_utest = target == "test"
+  TS_DIR = "//."
+  COMMON_LIBRARY = "//commonlibrary"
 } else {
   PERF_DIR = "//developtools"
   with_ebpf_help_table = false
@@ -36,6 +38,8 @@ if (is_independent_compile) {
   use_wasm = false
   enable_ts_utest = false
   is_fuzz = false
+  TS_DIR = "//developtools/smartperf_host/trace_streamer"
+  COMMON_LIBRARY = "//commonlibrary"
 }
 
 script_executable = "/usr/bin/env"
diff --git a/trace_streamer/gn/BUILD.gn b/trace_streamer/gn/BUILD.gn
index f740442674f1381aa7fb91d80d6afb43d97807c4..e1cd19079420214848ed45d4b7087872d0901248 100755
--- a/trace_streamer/gn/BUILD.gn
+++ b/trace_streamer/gn/BUILD.gn
@@ -63,7 +63,7 @@ config("default") {
   if (is_debug && is_win) {
     ldflags += [ "-fstack-protector" ]
   }
-  if (is_debug && is_linux) {
+  if (is_debug && is_linux && !use_wasm) {
     cflags += [
       "-fsanitize=address",
       "-fno-omit-frame-pointer",
@@ -101,7 +101,7 @@ config("default") {
 
       # with_libunwind = true
     }
-    if (!use_wasm && !is_win && !is_macx && !is_test) {
+    if (!use_wasm && !is_win && !is_macx && !is_test && !is_mingw) {
       cflags += [ "-D HAVE_LIBUNWIND" ]
     }
 
@@ -139,11 +139,8 @@ config("default") {
     cflags += [ "-D is_mingw" ]
     defines = [ "WIN32_LEAN_AND_MEAN" ]
     libs += [ "wsock32" ]
-    libs += [ "Ws2_32" ]
-    cflags += [
-      "-D SECUREC_IS_DLL_LIBRARY",
-      "-D __KERNEL__",
-    ]
+    libs += [ "ws2_32" ]
+    cflags += [ "-Wno-attributes" ]
   }
   if (with_ebpf_help_table) {
     cflags += [ "-D WITH_EBPF_HELP" ]
@@ -232,3 +229,44 @@ config("executable") {
     ldflags += [ "-dead_strip" ]
   }
 }
+
+config("ts_config") {
+  ldflags = []
+  cflags = [
+    "-D target_cpu_${target_cpu}",
+    "-std=c++17",
+  ]
+  cflags += [ "-D __LITTLE_ENDIAN_BITFIELD" ]
+
+  if (is_mingw) {
+    cflags += [ "-ffunction-sections" ]
+    cflags += [ "-D is_mingw=1" ]
+    cflags += [ "-Wno-inconsistent-dllimport" ]
+    defines = [ "WIN32_LEAN_AND_MEAN" ]
+    ldflags += [
+      "-Wl,--whole-archive",
+      "-lpthread",
+      "-Wl,--no-whole-archive",
+    ]
+
+    libs = [ "wsock32" ]
+    libs += [ "ws2_32" ]
+  }
+  if (!use_wasm && !is_win && !is_macx && !is_test && !is_mingw) {
+    cflags += [ "-D HAVE_LIBUNWIND" ]
+  }
+  if (enable_ts_utest && !use_wasm) {
+    cflags += [
+      "-fprofile-arcs",
+      "-ftest-coverage",
+    ]
+    ldflags += [
+      "-fprofile-arcs",
+      "-ftest-coverage",
+      "--coverage",
+    ]
+    if (is_test) {
+      cflags += [ "-D IS_UT" ]
+    }
+  }
+}
diff --git a/trace_streamer/pare_third_party.sh b/trace_streamer/pare_third_party.sh
index 2abcfd08f27554bb9f55c817141eb837b3b29c78..a4cfaf12c93d7938a17c8b5319a342f67d416e0a 100755
--- a/trace_streamer/pare_third_party.sh
+++ b/trace_streamer/pare_third_party.sh
@@ -117,3 +117,9 @@ if [ ! -f "hiperf/BUILD.gn" ];then
         $sed -i '/namespace HiPerf {/avoid Report::PrepareConsole(){ return;}' hiperf/src/report.cpp
     fi
 fi
+
+if [ ! -f "bounds_checking_function/BUILD.gn" ];then
+    rm -rf bounds_checking_function
+    git clone git@gitee.com:openharmony/third_party_bounds_checking_function.git bounds_checking_function
+    $cp ../prebuilts/patch_bounds_checking_function/bounds_checking_functionbuild.gn bounds_checking_function/BUILD.gn
+fi
diff --git a/trace_streamer/prebuilts/patch_bounds_checking_function/bounds_checking_functionbuild.gn b/trace_streamer/prebuilts/patch_bounds_checking_function/bounds_checking_functionbuild.gn
new file mode 100644
index 0000000000000000000000000000000000000000..f93a2ee18bee82df47d693d27e78b167d40e2d26
--- /dev/null
+++ b/trace_streamer/prebuilts/patch_bounds_checking_function/bounds_checking_functionbuild.gn
@@ -0,0 +1,71 @@
+#
+# Copyright (c) 2020 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("//build/ohos.gni")
+
+libsec_sources = [
+  "//third_party/bounds_checking_function/src/fscanf_s.c",
+  "//third_party/bounds_checking_function/src/fwscanf_s.c",
+  "//third_party/bounds_checking_function/src/gets_s.c",
+  "//third_party/bounds_checking_function/src/memcpy_s.c",
+  "//third_party/bounds_checking_function/src/memmove_s.c",
+  "//third_party/bounds_checking_function/src/memset_s.c",
+  "//third_party/bounds_checking_function/src/scanf_s.c",
+  "//third_party/bounds_checking_function/src/securecutil.c",
+  "//third_party/bounds_checking_function/src/secureinput_a.c",
+  "//third_party/bounds_checking_function/src/secureinput_w.c",
+  "//third_party/bounds_checking_function/src/secureprintoutput_a.c",
+  "//third_party/bounds_checking_function/src/secureprintoutput_w.c",
+  "//third_party/bounds_checking_function/src/snprintf_s.c",
+  "//third_party/bounds_checking_function/src/sprintf_s.c",
+  "//third_party/bounds_checking_function/src/sscanf_s.c",
+  "//third_party/bounds_checking_function/src/strcat_s.c",
+  "//third_party/bounds_checking_function/src/strcpy_s.c",
+  "//third_party/bounds_checking_function/src/strncat_s.c",
+  "//third_party/bounds_checking_function/src/strncpy_s.c",
+  "//third_party/bounds_checking_function/src/strtok_s.c",
+  "//third_party/bounds_checking_function/src/swprintf_s.c",
+  "//third_party/bounds_checking_function/src/swscanf_s.c",
+  "//third_party/bounds_checking_function/src/vfscanf_s.c",
+  "//third_party/bounds_checking_function/src/vfwscanf_s.c",
+  "//third_party/bounds_checking_function/src/vscanf_s.c",
+  "//third_party/bounds_checking_function/src/vsnprintf_s.c",
+  "//third_party/bounds_checking_function/src/vsprintf_s.c",
+  "//third_party/bounds_checking_function/src/vsscanf_s.c",
+  "//third_party/bounds_checking_function/src/vswprintf_s.c",
+  "//third_party/bounds_checking_function/src/vswscanf_s.c",
+  "//third_party/bounds_checking_function/src/vwscanf_s.c",
+  "//third_party/bounds_checking_function/src/wcscat_s.c",
+  "//third_party/bounds_checking_function/src/wcscpy_s.c",
+  "//third_party/bounds_checking_function/src/wcsncat_s.c",
+  "//third_party/bounds_checking_function/src/wcsncpy_s.c",
+  "//third_party/bounds_checking_function/src/wcstok_s.c",
+  "//third_party/bounds_checking_function/src/wmemcpy_s.c",
+  "//third_party/bounds_checking_function/src/wmemmove_s.c",
+  "//third_party/bounds_checking_function/src/wscanf_s.c",
+]
+
+ohos_source_set("libsec_static") {
+  sources = libsec_sources
+  include_dirs = [ "include" ]
+  cflags = [
+    "-D_INC_STRING_S",
+    "-D_INC_WCHAR_S",
+    "-D_SECIMP=//",
+    "-D_STDIO_S_DEFINED",
+    "-D_INC_STDIO_S",
+    "-D_INC_STDLIB_S",
+    "-D_INC_MEMORY_S",
+  ]
+}
diff --git a/trace_streamer/prebuilts/patch_hiperf/BUILD.gn b/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
index 2a2a8eb3acb2464c34f295ca748b864319329fc1..410881f05588afe28961d5d8301388bf8477c3b0 100644
--- a/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
+++ b/trace_streamer/prebuilts/patch_hiperf/BUILD.gn
@@ -18,6 +18,7 @@ ohos_source_set("elf") {
   part_name = "smartperf_host"
   configs -= [ trace_cfg_path ]
   configs += [ "../../gn:hiperf_trace_cfg" ]
+  cflags = [ "-D is_mingw=${is_mingw}" ]
   sources = [
     "include/elf_parser.h",
     "src/elf_file.cpp",
@@ -32,6 +33,7 @@ ohos_source_set("elf") {
     "include/nonlinux/linux",
     "include/nonlinux",
     "${THIRD_PARTY}/perf_include/musl",
+    "${THIRD_PARTY}/bounds_checking_function/include",
     "${SRC}/../prebuilts/emsdk/node/16.20.0_64bit/include/node",
   ]
 }
@@ -72,6 +74,7 @@ ohos_source_set("hiperf_src") {
     "../../src/trace_streamer",
     "include/nonlinux",
     "include/nonlinux/linux",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
   include_dirs += [
     "${THIRD_PARTY}/perf_include/libbpf",
@@ -86,7 +89,7 @@ group("hiperf_platform_common") {
   deps = [
     ":elf",
     ":hiperf_src",
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
   ]
 }
diff --git a/trace_streamer/prebuilts/patch_protobuf/protobufbuild.gn b/trace_streamer/prebuilts/patch_protobuf/protobufbuild.gn
index cbedb212d1133c4000f1efc8ec6d69f8d3e6f839..c8af4592c9e950c47f4efe5ba4d5a0ae06034343 100755
--- a/trace_streamer/prebuilts/patch_protobuf/protobufbuild.gn
+++ b/trace_streamer/prebuilts/patch_protobuf/protobufbuild.gn
@@ -102,7 +102,7 @@ protobuf_src = [
   "$protobuf_dir/wrappers.pb.cc",
 ]
 if (use_wasm) {
-  source_set("protobuf_lite") {
+  source_set("protobuf_lite_static") {
     sources = protobuf_lite_src
     include_dirs = [
       "$protobuf_dir/**/*.h",
@@ -122,7 +122,7 @@ if (use_wasm) {
     public_configs = [ ":protobuf_config" ]
   }
 } else {
-  source_set("protobuf_lite") {
+  source_set("protobuf_lite_static") {
     sources = protobuf_lite_src
     include_dirs = [
       "$protobuf_dir/**/*.h",
@@ -143,7 +143,7 @@ if (use_wasm) {
   }
 }
 if (use_wasm) {
-  source_set("protobuf") {
+  source_set("protobuf_static") {
     sources = protobuf_src
     include_dirs = [
       "$protobuf_dir/**/*.h",
@@ -157,14 +157,14 @@ if (use_wasm) {
       "-std=c++17",
     ]
 
-    deps = [ ":protobuf_lite" ]
+    deps = [ ":protobuf_lite_static" ]
 
     #configs = default_configs
 
     public_configs = [ ":protobuf_config" ]
   }
 } else {
-  source_set("protobuf") {
+  source_set("protobuf_static") {
     sources = protobuf_src
     include_dirs = [
       "$protobuf_dir/**/*.h",
@@ -210,7 +210,7 @@ if (use_wasm) {
       ]
     }
 
-    deps = [ ":protobuf_lite" ]
+    deps = [ ":protobuf_lite_static" ]
 
     public_configs = [ ":protobuf_config" ]
   }
@@ -330,8 +330,8 @@ if (use_wasm) {
     ]
 
     deps = [
-      ":protobuf",
-      ":protobuf_lite",
+      ":protobuf_static",
+      ":protobuf_lite_static",
     ]
 
     public_configs = [ ":protobuf_config" ]
diff --git a/trace_streamer/sdk/demo_sdk/BUILD.gn b/trace_streamer/sdk/demo_sdk/BUILD.gn
index 979c964f8f20f65ca0a8f300eede8e6d88978aef..200454d52aba606b41336d2f471128e6a7a9260e 100755
--- a/trace_streamer/sdk/demo_sdk/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/BUILD.gn
@@ -34,8 +34,8 @@ ohos_source_set("lib") {
   ]
   deps = [
     ":trace_streamer_sdk",
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
   ]
   include_dirs = [
     "${SRC}/base",
@@ -115,6 +115,7 @@ ohos_source_set("trace_streamer_sdk") {
   }
   deps = [
     "${SRC}/base:base",
+    "${THIRD_PARTY}/bounds_checking_function:libsec_static",
     "${THIRD_PARTY}/sqlite:sqlite",
     "plugin:sdk_plugin",
   ]
diff --git a/trace_streamer/sdk/demo_sdk/protos/BUILD.gn b/trace_streamer/sdk/demo_sdk/protos/BUILD.gn
index 7ab1477c25875f52013def4b2662693d122d597c..5feff386d4eb0409f379a94d9fee5c85b9b42637 100644
--- a/trace_streamer/sdk/demo_sdk/protos/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/protos/BUILD.gn
@@ -21,8 +21,8 @@ config("ts_proto_include_config") {
 }
 source_set("ts_proto_data_cpp") {
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   cflags = [
     "-ftrapv",
diff --git a/trace_streamer/sdk/demo_sdk/protos/types/plugins/mock_data/BUILD.gn b/trace_streamer/sdk/demo_sdk/protos/types/plugins/mock_data/BUILD.gn
index d06e80472cc3ffa9d4ee55706cf1c1bce68ae52b..ea60d11247d9f8666450d7c4b7b157e94a8b88ca 100644
--- a/trace_streamer/sdk/demo_sdk/protos/types/plugins/mock_data/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/protos/types/plugins/mock_data/BUILD.gn
@@ -83,8 +83,8 @@ action("mock_data_cpp_gen") {
 ohos_source_set("mock_data_cpp") {
   deps = [ ":mock_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
@@ -94,8 +94,8 @@ ohos_source_set("mock_data_cpp") {
 ohos_source_set("mock_data_cpp_standard") {
   deps = [ ":mock_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
@@ -105,8 +105,8 @@ ohos_source_set("mock_data_cpp_standard") {
 ohos_source_set("mock_plugin_config_cpp_standard") {
   deps = [ ":mock_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
diff --git a/trace_streamer/sdk/demo_sdk/table/gpu_counter_object_table.h b/trace_streamer/sdk/demo_sdk/table/gpu_counter_object_table.h
index d836d9a2d7a2696e4bc72b772bed7e8bd4ce68e9..721ec37b530251bb1f6c3cfa5b4fc4d3c56b66a9 100644
--- a/trace_streamer/sdk/demo_sdk/table/gpu_counter_object_table.h
+++ b/trace_streamer/sdk/demo_sdk/table/gpu_counter_object_table.h
@@ -28,17 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        };
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/demo_sdk/table/gpu_counter_table.h b/trace_streamer/sdk/demo_sdk/table/gpu_counter_table.h
index 9d7e84cd9f100bc972f44198af8c291f35fd5a2e..2dc0219f3e8d8a956bd271d1686790be7181da0b 100644
--- a/trace_streamer/sdk/demo_sdk/table/gpu_counter_table.h
+++ b/trace_streamer/sdk/demo_sdk/table/gpu_counter_table.h
@@ -28,17 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        };
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/demo_sdk/table/meta_table.h b/trace_streamer/sdk/demo_sdk/table/meta_table.h
index 6269067d1742020d3e4fb82adbf5fdfc42c651c5..91484d952ebca863d1ece01ea321f3b118cc5def 100644
--- a/trace_streamer/sdk/demo_sdk/table/meta_table.h
+++ b/trace_streamer/sdk/demo_sdk/table/meta_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/sdk/demo_sdk/table/slice_object_table.h b/trace_streamer/sdk/demo_sdk/table/slice_object_table.h
index 386161b1cb42f67fe51ee1aeb4bfcb8bbd22e8ef..a510610edeeb578b8c8596aec2e9444bb001eec6 100644
--- a/trace_streamer/sdk/demo_sdk/table/slice_object_table.h
+++ b/trace_streamer/sdk/demo_sdk/table/slice_object_table.h
@@ -28,18 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/demo_sdk/table/slice_table.h b/trace_streamer/sdk/demo_sdk/table/slice_table.h
index 284858143f585c0a1f1adbd106044baf5d41a399..2c24bcff97faf9b5ef06707f96249c11c5f47f4c 100644
--- a/trace_streamer/sdk/demo_sdk/table/slice_table.h
+++ b/trace_streamer/sdk/demo_sdk/table/slice_table.h
@@ -28,18 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/demo_sdk/table/table_base.h b/trace_streamer/sdk/demo_sdk/table/table_base.h
index c66eaa0cbe4d1e3b356af55d38ddabfe10ce1af2..532bcf26d7b722b8e699a28a0d89482e157c1d38 100644
--- a/trace_streamer/sdk/demo_sdk/table/table_base.h
+++ b/trace_streamer/sdk/demo_sdk/table/table_base.h
@@ -77,7 +77,12 @@ public:
         virtual void FilterTS(unsigned char op, sqlite3_value* argv, const std::deque<InternalTime>& times);
 
         virtual int32_t RowId(sqlite3_int64* id);
-        virtual int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) = 0;
+        virtual int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv)
+        {
+            UNUSED(fc);
+            UNUSED(argv);
+            return 0;
+        }
         virtual int32_t Column(int32_t n) const = 0;
         virtual void FilterId(unsigned char op, sqlite3_value* argv);
 
@@ -113,7 +118,11 @@ protected:
     }
     int32_t BestIndex(sqlite3_index_info* idxInfo);
     // needs to correspond to Cursor::Filter()
-    virtual void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) = 0;
+    virtual void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
+    {
+        UNUSED(fc);
+        UNUSED(ei);
+    }
     virtual std::unique_ptr<Cursor> CreateCursor() = 0;
     int32_t Open(sqlite3_vtab_cursor** ppCursor);
     virtual void Init(int32_t, const char* const*)
diff --git a/trace_streamer/sdk/demo_sdk/test/BUILD.gn b/trace_streamer/sdk/demo_sdk/test/BUILD.gn
index af7b065d5704fc8d876180a9e6d76cc042fab858..67d4c941b0cd73004ae161d01d099d8181097a6c 100755
--- a/trace_streamer/sdk/demo_sdk/test/BUILD.gn
+++ b/trace_streamer/sdk/demo_sdk/test/BUILD.gn
@@ -21,8 +21,8 @@ if (target == "sdkdemotest") {
     deps = [
       "${THIRD_PARTY}/googletest:gtest",
       "${THIRD_PARTY}/googletest:gtest_main",
-      "${THIRD_PARTY}/protobuf:protobuf",
-      "${THIRD_PARTY}/protobuf:protobuf_lite",
+      "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+      "${THIRD_PARTY}/protobuf:protobuf_static",
       "${THIRD_PARTY}/sqlite:sqlite",
       "../:trace_streamer_sdk",
     ]
diff --git a/trace_streamer/sdk/dubai_sdk/BUILD.gn b/trace_streamer/sdk/dubai_sdk/BUILD.gn
index 5485ea225b14a8f75a1d745c02d1e4b892fe81b9..5611e8b7d619f01cda303163a3f14fb9a6f1d056 100755
--- a/trace_streamer/sdk/dubai_sdk/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/BUILD.gn
@@ -35,8 +35,8 @@ ohos_source_set("lib") {
   ]
   deps = [
     ":trace_streamer_sdk",
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
   ]
   include_dirs = [
     "${SRC}/base",
@@ -114,6 +114,7 @@ source_set("trace_streamer_sdk") {
   }
   deps = [
     "${SRC}/base:base",
+    "${THIRD_PARTY}/bounds_checking_function:libsec_static",
     "${THIRD_PARTY}/sqlite:sqlite",
     "plugin:sdk_plugin",
   ]
diff --git a/trace_streamer/sdk/dubai_sdk/protos/types/plugins/mock_data/BUILD.gn b/trace_streamer/sdk/dubai_sdk/protos/types/plugins/mock_data/BUILD.gn
index d06e80472cc3ffa9d4ee55706cf1c1bce68ae52b..ea60d11247d9f8666450d7c4b7b157e94a8b88ca 100644
--- a/trace_streamer/sdk/dubai_sdk/protos/types/plugins/mock_data/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/protos/types/plugins/mock_data/BUILD.gn
@@ -83,8 +83,8 @@ action("mock_data_cpp_gen") {
 ohos_source_set("mock_data_cpp") {
   deps = [ ":mock_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
@@ -94,8 +94,8 @@ ohos_source_set("mock_data_cpp") {
 ohos_source_set("mock_data_cpp_standard") {
   deps = [ ":mock_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
@@ -105,8 +105,8 @@ ohos_source_set("mock_data_cpp_standard") {
 ohos_source_set("mock_plugin_config_cpp_standard") {
   deps = [ ":mock_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
diff --git a/trace_streamer/sdk/dubai_sdk/table/gpu_counter_object_table.h b/trace_streamer/sdk/dubai_sdk/table/gpu_counter_object_table.h
index d836d9a2d7a2696e4bc72b772bed7e8bd4ce68e9..721ec37b530251bb1f6c3cfa5b4fc4d3c56b66a9 100644
--- a/trace_streamer/sdk/dubai_sdk/table/gpu_counter_object_table.h
+++ b/trace_streamer/sdk/dubai_sdk/table/gpu_counter_object_table.h
@@ -28,17 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        };
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/dubai_sdk/table/gpu_counter_table.h b/trace_streamer/sdk/dubai_sdk/table/gpu_counter_table.h
index 9d7e84cd9f100bc972f44198af8c291f35fd5a2e..2dc0219f3e8d8a956bd271d1686790be7181da0b 100644
--- a/trace_streamer/sdk/dubai_sdk/table/gpu_counter_table.h
+++ b/trace_streamer/sdk/dubai_sdk/table/gpu_counter_table.h
@@ -28,17 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        };
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/dubai_sdk/table/meta_table.h b/trace_streamer/sdk/dubai_sdk/table/meta_table.h
index 6269067d1742020d3e4fb82adbf5fdfc42c651c5..91484d952ebca863d1ece01ea321f3b118cc5def 100644
--- a/trace_streamer/sdk/dubai_sdk/table/meta_table.h
+++ b/trace_streamer/sdk/dubai_sdk/table/meta_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/sdk/dubai_sdk/table/slice_object_table.h b/trace_streamer/sdk/dubai_sdk/table/slice_object_table.h
index 386161b1cb42f67fe51ee1aeb4bfcb8bbd22e8ef..a510610edeeb578b8c8596aec2e9444bb001eec6 100644
--- a/trace_streamer/sdk/dubai_sdk/table/slice_object_table.h
+++ b/trace_streamer/sdk/dubai_sdk/table/slice_object_table.h
@@ -28,18 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/dubai_sdk/table/slice_table.h b/trace_streamer/sdk/dubai_sdk/table/slice_table.h
index 284858143f585c0a1f1adbd106044baf5d41a399..2c24bcff97faf9b5ef06707f96249c11c5f47f4c 100644
--- a/trace_streamer/sdk/dubai_sdk/table/slice_table.h
+++ b/trace_streamer/sdk/dubai_sdk/table/slice_table.h
@@ -28,18 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/sdk/dubai_sdk/table/table_base.h b/trace_streamer/sdk/dubai_sdk/table/table_base.h
index c66eaa0cbe4d1e3b356af55d38ddabfe10ce1af2..532bcf26d7b722b8e699a28a0d89482e157c1d38 100644
--- a/trace_streamer/sdk/dubai_sdk/table/table_base.h
+++ b/trace_streamer/sdk/dubai_sdk/table/table_base.h
@@ -77,7 +77,12 @@ public:
         virtual void FilterTS(unsigned char op, sqlite3_value* argv, const std::deque<InternalTime>& times);
 
         virtual int32_t RowId(sqlite3_int64* id);
-        virtual int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) = 0;
+        virtual int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv)
+        {
+            UNUSED(fc);
+            UNUSED(argv);
+            return 0;
+        }
         virtual int32_t Column(int32_t n) const = 0;
         virtual void FilterId(unsigned char op, sqlite3_value* argv);
 
@@ -113,7 +118,11 @@ protected:
     }
     int32_t BestIndex(sqlite3_index_info* idxInfo);
     // needs to correspond to Cursor::Filter()
-    virtual void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) = 0;
+    virtual void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
+    {
+        UNUSED(fc);
+        UNUSED(ei);
+    }
     virtual std::unique_ptr<Cursor> CreateCursor() = 0;
     int32_t Open(sqlite3_vtab_cursor** ppCursor);
     virtual void Init(int32_t, const char* const*)
diff --git a/trace_streamer/sdk/dubai_sdk/test/BUILD.gn b/trace_streamer/sdk/dubai_sdk/test/BUILD.gn
index efcb6e4543bb21171f6c4b1e80b3b0eafd924d98..2454379f5e3a6441af00171afb75382670fce29e 100755
--- a/trace_streamer/sdk/dubai_sdk/test/BUILD.gn
+++ b/trace_streamer/sdk/dubai_sdk/test/BUILD.gn
@@ -22,8 +22,8 @@ if (target == "sdkdemotest") {
       "${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}/protobuf:protobuf_lite_static",
+      "${THIRD_PARTY}/protobuf:protobuf_static",
       "${THIRD_PARTY}/sqlite:sqlite",
       "../:trace_streamer_sdk",
     ]
diff --git a/trace_streamer/src/BUILD.gn b/trace_streamer/src/BUILD.gn
index 6f1e0aea720ff7fec99b21491079252908e861de..8005da8138cdfcbd68ba6f83f351afaa2d5e2af3 100644
--- a/trace_streamer/src/BUILD.gn
+++ b/trace_streamer/src/BUILD.gn
@@ -49,6 +49,10 @@ ohos_source_set("ts_sqlite") {
     "-DSQLITE_TEMP_STORE=3",
     "-DSQLITE_OMIT_LOAD_EXTENSION",
   ]
+
+  if (is_mingw) {
+    include_dirs += [ "${THIRD_PARTY}/libbpf/include/uapi" ]
+  }
 }
 
 trace_streamer_include = [
@@ -69,19 +73,20 @@ trace_streamer_include = [
   "parser/htrace_pbreader_parser/htrace_event_parser",
   "parser/htrace_pbreader_parser/htrace_cpu_parser",
   "parser/hiperf_parser",
-  "//developtools/hiperf/include",
+  "${THIRD_PARTY}/bounds_checking_function/include",
   "${THIRD_PARTY}/sqlite/include",
   "${THIRD_PARTY}/json/single_include/nlohmann",
   "${THIRD_PARTY}/protobuf/src",
-  "${THIRD_PARTY}/hiperf/include",
-  "${THIRD_PARTY}/hiperf/include/nonlinux",
-  "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+  "${PERF_DIR}/hiperf/include",
+  "${PERF_DIR}/hiperf/include/nonlinux",
+  "${PERF_DIR}/hiperf/include/nonlinux/linux",
   "${THIRD_PARTY}/perf_include/musl",
   "${THIRD_PARTY}/musl",
   "${THIRD_PARTY}/libunwind/include",
   "${THIRD_PARTY}/libunwind/src",
   "${THIRD_PARTY}/perf_include/libbpf",
   "${THIRD_PARTY}/googletest/googletest/include",
+  "${COMMON_LIBRARY}/c_utils/base/include",
 ]
 
 ohos_source_set("trace_streamer_source") {
@@ -118,23 +123,12 @@ ohos_source_set("trace_streamer_source") {
     include_dirs += [ "../prebuilts/emsdk/emsdk/emscripten/system/include" ]
   }
 
-  cflags = [ "-D target_cpu_${target_cpu}" ]
-  if (!use_wasm && !is_win && !is_macx && !is_test) {
-    cflags += [ "-D HAVE_LIBUNWIND" ]
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
-  if (enable_ts_utest && !use_wasm) {
-    cflags += [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (is_mingw) {
+    include_dirs += [ "${THIRD_PARTY}/libbpf/include/uapi" ]
+    cflags = [ "-includeMingW64Fix.h" ]
   }
 
   public_deps = [
@@ -161,6 +155,7 @@ ohos_source_set("trace_streamer_source") {
     "proto_reader:proto_reader",
     "table:table",
     "trace_data:trace_data",
+    "//third_party/bounds_checking_function:libsec_static",
   ]
 }
 
diff --git a/trace_streamer/src/base/BUILD.gn b/trace_streamer/src/base/BUILD.gn
index 643a88e32336a68b3f641843acc0b84bbd68405a..8981ee3bc36bdc2638e469a7ef5eac7a91245579 100644
--- a/trace_streamer/src/base/BUILD.gn
+++ b/trace_streamer/src/base/BUILD.gn
@@ -16,73 +16,32 @@ import("../../build/ts.gni")
 ohos_source_set("base") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
-  deps = [
-    ":base_parser",
-    ":base_table",
-    ":ibase",
-  ]
   public_deps = [ "sqlite_ext:sqliteext" ]
-  include_dirs = [ "../include" ]
+  include_dirs = [
+    "../include",
+    "//third_party/bounds_checking_function/include",
+  ]
   sources = [
     "clock_filter.cpp",
     "codec_cov.cpp",
     "file.cpp",
+    "filter_constraints.cpp",
+    "htrace_plugin_time_parser.cpp",
+    "index_map.cpp",
     "log.cpp",
     "parting_string.cpp",
     "string_help.cpp",
+    "ts_common.cpp",
   ]
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
+
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
+
 ohos_source_set("string_help") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [ "string_help.cpp" ]
-}
-ohos_source_set("ibase") {
-  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
-  part_name = "${OHOS_PROFILER_PART_NAME}"
-  sources = [
-    "codec_cov.h",
-    "file.h",
-    "log.h",
-    "parting_string.h",
-    "string_to_numerical.h",
-    "ts_common.cpp",
-  ]
-  include_dirs = []
-  public_deps = []
-  deps = []
-  sources += [ "/usr/x86_64-w64-mingw32/include/windows.h" ]
-}
-ohos_source_set("base_parser") {
-  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
-  part_name = "${OHOS_PROFILER_PART_NAME}"
-  sources = [
-    "htrace_plugin_time_parser.cpp",
-    "htrace_plugin_time_parser.h",
-  ]
-  include_dirs = []
-  public_deps = []
-  deps = []
-}
-ohos_source_set("base_table") {
-  subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
-  part_name = "${OHOS_PROFILER_PART_NAME}"
-  sources = [
-    "filter_constraints.cpp",
-    "index_map.cpp",
-  ]
-  include_dirs = [ "${THIRD_PARTY}/sqlite/include" ]
-  public_deps = []
-  deps = []
+  include_dirs = [ "//third_party/bounds_checking_function/include" ]
 }
diff --git a/trace_streamer/src/base/base_map.h b/trace_streamer/src/base/base_map.h
new file mode 100644
index 0000000000000000000000000000000000000000..1c3f922659d29627866093e8d5f87df65b85e6f8
--- /dev/null
+++ b/trace_streamer/src/base/base_map.h
@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+#ifndef SRC_TRACE_BASE_MAP_H
+#define SRC_TRACE_BASE_MAP_H
+
+#define MAP_ERASE_COMMON(...)                           \
+    void Erase(__VA_ARGS__)                             \
+    {                                                   \
+        auto streamIdHookidMap = internalMap_.find(t1); \
+        if (streamIdHookidMap != internalMap_.end()) {
+
+#define MAP_ERASE_WITH_SINGLE_PARME(T1)    \
+    MAP_ERASE_COMMON(T1 t1)                \
+    internalMap_.erase(streamIdHookidMap); \
+    }                                      \
+    }
+
+#define MAP_ERASE_WITH_DOUBLE_PARME(T1, T2) \
+    MAP_ERASE_COMMON(T1 t1, T2 t2)          \
+    (*streamIdHookidMap).second.Erase(t2);  \
+    }                                       \
+    }
+
+#define DOUBLE_MAP_ERASE_WITH_DOUBLE_PARME(T1, T2)      \
+    MAP_ERASE_COMMON(T1 t1, T2 t2)                      \
+    auto hookId = (*streamIdHookidMap).second.find(t2); \
+    if (hookId != (*streamIdHookidMap).second.end()) {  \
+        (*streamIdHookidMap).second.erase(hookId);      \
+    }                                                   \
+    }                                                   \
+    }
+
+#define MAP_ERASE_WITH_TRIPLE_PARME(T1, T2, T3) \
+    MAP_ERASE_COMMON(T1 t1, T2 t2, T3 t3)       \
+    (*streamIdHookidMap).second.Erase(t2, t3);  \
+    }                                           \
+    }
+
+#define MAP_ERASE_WITH_QUATRA_PARME(T1, T2, T3, T4) \
+    MAP_ERASE_COMMON(T1 t1, T2 t2, T3 t3, T4 t4)    \
+    (*streamIdHookidMap).second.Erase(t2, t3, t4);  \
+    }                                               \
+    }
+
+#endif // SRC_TRACE_BASE_MAP_H
diff --git a/trace_streamer/src/base/double_map.h b/trace_streamer/src/base/double_map.h
index 7422a92df3976a880fb744752d0bacb2810b838a..ea5722af8684a3b9fb668b895a6272b51c249c9a 100644
--- a/trace_streamer/src/base/double_map.h
+++ b/trace_streamer/src/base/double_map.h
@@ -17,6 +17,7 @@
 #define SRC_TRACE_BASE_DOUBLEMAP_H
 
 #include <map>
+#include "base_map.h"
 
 template <class T1, class T2, class T3>
 class DoubleMap {
@@ -66,23 +67,8 @@ public:
         }
         return nullptr;
     }
-    void Erase(T1 t1)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            internalMap_.erase(streamIdHookidMap);
-        }
-    }
-    void Erase(T1 t1, T2 t2)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            auto hookId = (*streamIdHookidMap).second.find(t2);
-            if (hookId != (*streamIdHookidMap).second.end()) {
-                (*streamIdHookidMap).second.erase(hookId);
-            }
-        }
-    }
+    MAP_ERASE_WITH_SINGLE_PARME(T1)
+    DOUBLE_MAP_ERASE_WITH_DOUBLE_PARME(T1, T2)
     bool Empty()
     {
         return internalMap_.size() == 0 ? true : false;
diff --git a/trace_streamer/src/base/filter_constraints.cpp b/trace_streamer/src/base/filter_constraints.cpp
index dd79bce8c5f922d97914e2549f6b37ff7400cfb8..69bcbb971e4cb5a605103a60dfba9596b46b6eb7 100644
--- a/trace_streamer/src/base/filter_constraints.cpp
+++ b/trace_streamer/src/base/filter_constraints.cpp
@@ -64,6 +64,24 @@ void FilterConstraints::ToString(std::string& idxStr) const
     }
 }
 
+#define GET_DESC()                                                          \
+    p = pNext;                                                              \
+    errno = 0;                                                              \
+    int32_t col = static_cast<int32_t>(strtol(p, &pNext, 10));              \
+    if (errno != 0) {                                                       \
+        TS_LOGW("strtol failed!");                                          \
+        return;                                                             \
+    }                                                                       \
+    TS_ASSERT(p != pNext);                                                  \
+    p = pNext;                                                              \
+    errno = 0;                                                              \
+    unsigned char desc = static_cast<unsigned char>(strtol(p, &pNext, 10)); \
+    if (errno != 0) {                                                       \
+        TS_LOGW("strtol failed!");                                          \
+        return;                                                             \
+    }                                                                       \
+    TS_ASSERT(p != pNext);
+
 void FilterConstraints::FromString(const std::string& idxStr)
 {
     const char* p = static_cast<const char*>(idxStr.c_str());
@@ -77,24 +95,8 @@ void FilterConstraints::FromString(const std::string& idxStr)
     }
     TS_ASSERT(p != pNext);
     for (int32_t i = 0; i < constraintCount; i++) {
-        p = pNext;
-        errno = 0;
-        int32_t col = static_cast<int32_t>(strtol(p, &pNext, 10));
-        if (errno != 0) {
-            TS_LOGW("strtol failed!");
-            return;
-        }
-        TS_ASSERT(p != pNext);
-        p = pNext;
-        errno = 0;
-        unsigned char op = static_cast<unsigned char>(strtol(p, &pNext, 10));
-        if (errno != 0) {
-            TS_LOGW("strtol failed!");
-            return;
-        }
-        TS_ASSERT(p != pNext);
-
-        AddConstraint(i, col, op);
+        GET_DESC();
+        AddConstraint(i, col, desc);
     }
 
     pNext++; // jump the ' '
@@ -108,23 +110,7 @@ void FilterConstraints::FromString(const std::string& idxStr)
     }
     TS_ASSERT(p != pNext);
     for (int32_t i = 0; i < orderbyCount; i++) {
-        p = pNext;
-        errno = 0;
-        int32_t col = static_cast<int32_t>(strtol(p, &pNext, 10));
-        if (errno != 0) {
-            TS_LOGW("strtol failed!");
-            return;
-        }
-        TS_ASSERT(p != pNext);
-        p = pNext;
-        errno = 0;
-        unsigned char desc = static_cast<unsigned char>(strtol(p, &pNext, 10));
-        if (errno != 0) {
-            TS_LOGW("strtol failed!");
-            return;
-        }
-        TS_ASSERT(p != pNext);
-
+        GET_DESC();
         AddOrderBy(col, desc);
     }
 }
diff --git a/trace_streamer/src/base/index_map.h b/trace_streamer/src/base/index_map.h
index dfe32dcdd91b2f3adb7a51103427c499ae415d05..9a82356a9c13905e914f2c55dcc6e6db2b1e335f 100644
--- a/trace_streamer/src/base/index_map.h
+++ b/trace_streamer/src/base/index_map.h
@@ -39,6 +39,33 @@ public:
     void FilterId(unsigned char op, sqlite3_value* argv);
     void FilterTS(unsigned char op, sqlite3_value* argv, const std::deque<InternalTime>& times);
     template <class T>
+    void ProcessData(const std::deque<T>& dataQueue,
+                     bool remove,
+                     std::function<bool(TableRowId)> firstCheck,
+                     std::function<bool(TableRowId)> scondCheck)
+    {
+        bool changed = false;
+        if (remove) {
+            for (const auto& val : rowIndex_) {
+                if (!firstCheck(val)) {
+                    changed = true;
+                    rowIndexBak_.push_back(val);
+                }
+            }
+            if (changed) {
+                rowIndex_ = rowIndexBak_;
+            }
+        } else {
+            for (auto i = 0; i < dataQueue.size(); i++) {
+                if (scondCheck(i)) {
+                    rowIndex_.push_back(i);
+                }
+            }
+        }
+        indexType_ = INDEX_TYPE_OUTER_INDEX;
+        FixSize();
+    }
+    template <class T>
     void MixRange(unsigned char op, T value, const std::deque<T>& dataQueue)
     {
         filters_++;
@@ -48,203 +75,48 @@ public:
             CovertToIndexMap();
             remove = true;
         }
-        auto size = dataQueue.size();
         rowIndexBak_.clear();
-        bool changed = false;
         switch (op) {
             case SQLITE_INDEX_CONSTRAINT_EQ:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] != value) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] == value) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] != value; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] == value; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_NE:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] == value) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] != value) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] == value; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] != value; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_ISNULL:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] != invalidValue) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] == invalidValue) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] != invalidValue; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] == invalidValue; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_ISNOTNULL:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] == invalidValue) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] != invalidValue) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] == invalidValue; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] != invalidValue; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_GT:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] <= value) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] > value) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] <= value; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] > value; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_GE:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] < value) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] >= invalidValue) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] < value; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] >= invalidValue; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_LE:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] > value) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] < invalidValue) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] > value; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] < invalidValue; });
                 break;
             case SQLITE_INDEX_CONSTRAINT_LT:
-                if (remove) {
-                    for (auto i = rowIndex_.begin(); i != rowIndex_.end();) {
-                        if (dataQueue[*i] >= value) {
-                            i++;
-                        } else {
-                            changed = true;
-                            rowIndexBak_.push_back(*i);
-                            i++;
-                        }
-                    }
-                    if (changed) {
-                        rowIndex_ = rowIndexBak_;
-                    }
-                } else {
-                    for (auto i = 0; i < size; i++) {
-                        if (dataQueue[i] < invalidValue) {
-                            rowIndex_.push_back(i);
-                        }
-                    }
-                }
-                indexType_ = INDEX_TYPE_OUTER_INDEX;
-                FixSize();
+                ProcessData(
+                    dataQueue, remove, [&](TableRowId id) -> bool { return dataQueue[id] >= value; },
+                    [&](TableRowId id) -> bool { return dataQueue[id] < invalidValue; });
                 break;
-
             default:
                 break;
         } // end of switch (op)
diff --git a/trace_streamer/src/base/quatra_map.h b/trace_streamer/src/base/quatra_map.h
index cefafcb95d3e56b3f3b9a9edae528540c134e84c..7492f05d61b4ca1dc0cfa256bd9187d92ead5ec4 100644
--- a/trace_streamer/src/base/quatra_map.h
+++ b/trace_streamer/src/base/quatra_map.h
@@ -49,34 +49,10 @@ public:
             return invalidValue_;
         }
     }
-    void Erase(T1 t1)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            internalMap_.erase(streamIdHookidMap);
-        }
-    }
-    void Erase(T1 t1, T2 t2)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            (*streamIdHookidMap).second.Erase(t2);
-        }
-    }
-    void Erase(T1 t1, T2 t2, T3 t3)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            (*streamIdHookidMap).second.Erase(t2, t3);
-        }
-    }
-    void Erase(T1 t1, T2 t2, T3 t3, T4 t4)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            (*streamIdHookidMap).second.Erase(t2, t3, t4);
-        }
-    }
+    MAP_ERASE_WITH_SINGLE_PARME(T1)
+    MAP_ERASE_WITH_DOUBLE_PARME(T1, T2)
+    MAP_ERASE_WITH_TRIPLE_PARME(T1, T2, T3)
+    MAP_ERASE_WITH_QUATRA_PARME(T1, T2, T3, T4)
     void Clear()
     {
         internalMap_.clear();
diff --git a/trace_streamer/src/base/securec.h b/trace_streamer/src/base/securec.h
deleted file mode 100644
index 6a7687067cd782d6687e33f0f4541e58db671f2b..0000000000000000000000000000000000000000
--- a/trace_streamer/src/base/securec.h
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * 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.
- */
-#ifndef SRC_TRACE_BASE_SECUREC_H
-#define SRC_TRACE_BASE_SECUREC_H
-
-#include <cstdint>
-#include <sys/types.h>
-#define EOK 0
-#include "string_help.h"
-#endif // SRC_TRACE_BASE_SECUREC_H
diff --git a/trace_streamer/src/base/sqlite_ext/BUILD.gn b/trace_streamer/src/base/sqlite_ext/BUILD.gn
index 72de31faab6a43662653242f22f9ecbb95d72012..fc81a20b99f644f2d120052636c2c54b01bc8fcd 100644
--- a/trace_streamer/src/base/sqlite_ext/BUILD.gn
+++ b/trace_streamer/src/base/sqlite_ext/BUILD.gn
@@ -16,12 +16,13 @@ import("../../../build/ts.gni")
 config("sqlite_config") {
   include_dirs = [
     "${THIRD_PARTY}/sqlite/include",
+    "${THIRD_PARTY}/bounds_checking_function/include",
     "..",
   ]
-  cflags = [
-    "-Wno-writable-strings",
-    "-std=c++17",
-  ]
+  cflags = [ "-Wno-attributes" ]
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
+  }
 }
 source_set("sqliteext") {
   sources = [ "sqlite_ext_funcs.cpp" ]
diff --git a/trace_streamer/src/base/string_help.cpp b/trace_streamer/src/base/string_help.cpp
index a3721f0db90d41457fb4599d8af19b620cb7150d..4eae40730d4030e686f87f1c301e98806b1a3098 100644
--- a/trace_streamer/src/base/string_help.cpp
+++ b/trace_streamer/src/base/string_help.cpp
@@ -13,105 +13,18 @@
  * limitations under the License.
  */
 #include "string_help.h"
-#include <cstdio>
-#include <memory.h>
-#define UNUSED(expr)             \
-    do {                         \
-        static_cast<void>(expr); \
-    } while (0)
 
-#if !is_mingw
-int32_t memcpy_s(void* dest, uint32_t destSize, const void* src, size_t srcSize)
-{
-    if (srcSize > destSize || src == nullptr || dest == nullptr) {
-        return -1;
-    } else {
-        if (!memcpy(dest, src, srcSize)) {
-            printf("memcpy fail\n");
-            return -1;
-        }
-    }
-    return 0;
-}
-
-int32_t sscanf_s(const char* buffer, const char* format, ...)
-{
-    va_list ap;
-    __builtin_va_start(ap, format);
-    int32_t ret = scanf(buffer, format, ap);
-    __builtin_va_end(ap);
-    return ret;
-}
-
-int32_t strncpy_s(char* strDest, size_t destMax, const char* strSrc, size_t count)
-{
-    (void)strncpy(strDest, strSrc, destMax);
-    return destMax;
-}
-#endif
-
-void* memset_s(void* dest, size_t destSize, int32_t ch, size_t n)
-{
-    UNUSED(destSize);
-    UNUSED(ch);
-    return memset(dest, 0, n);
-}
-
-int32_t snprintf_s(char* strDest, size_t destMax, size_t count, const char* format, ...)
-{
-    UNUSED(count);
-    int32_t ret;
-    va_list ap;
-    __builtin_va_start(ap, format);
-    ret = vsnprintf(strDest, destMax, format, ap);
-    __builtin_va_end(ap);
-    return ret;
-}
-
-int32_t sprintf_s(char* strDest, size_t destMax, const char* format, ...)
-{
-    va_list ap;
-    __builtin_va_start(ap, format);
-    int32_t ret = vsnprintf(strDest, destMax, format, ap);
-    __builtin_va_end(ap);
-    return ret;
-}
-
-const char* GetDemangleSymbolIndex(const char* mangled)
+char* GetDemangleSymbolIndex(const char* mangled)
 {
     int status = 0;
     auto demangle = abi::__cxa_demangle(mangled, nullptr, nullptr, &status);
     if (status) { // status != 0 failed
-        return mangled;
+        return const_cast<char*>(mangled);
     } else {
         return demangle;
     }
 }
 
-int GetProcessorNumFromString(char* str)
-{
-    int processorNum = 0;
-    int lastNum = -1;
-    char* s = str;
-    while (*s != '\0') {
-        if (isdigit(*s)) {
-            int currentNum = strtol(s, &s, 10);
-            if (lastNum == -1) {
-                processorNum++;
-            } else {
-                processorNum += currentNum - lastNum;
-            }
-            lastNum = currentNum;
-        } else {
-            if (*s == ',') {
-                lastNum = -1;
-            }
-            s++;
-        }
-    }
-    return processorNum;
-}
-
 bool StartWith(const std::string& str, const std::string& res)
 {
     if (res.size() > str.size()) {
diff --git a/trace_streamer/src/base/string_help.h b/trace_streamer/src/base/string_help.h
index 7ac011ecd5df7cd51a61af5cbf907c38f30bc64f..5745c83f221eb62245442ac4f4927e9966fb38e9 100644
--- a/trace_streamer/src/base/string_help.h
+++ b/trace_streamer/src/base/string_help.h
@@ -17,19 +17,10 @@
 
 #include <cstdint>
 #include <cxxabi.h>
-#include <sys/types.h>
 #include <string>
 #include <vector>
-#if !is_mingw
-int32_t memcpy_s(void* dest, uint32_t destSize, const void* src, size_t srcSize);
-int32_t sscanf_s(const char* buffer, const char* format, ...);
-int32_t strncpy_s(char* strDest, size_t destMax, const char* strSrc, size_t count);
-int32_t sprintf_s(char* strDest, size_t destMax, const char* format, ...);
-#endif
-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);
+#include "securec.h"
+char* GetDemangleSymbolIndex(const char* mangled);
 std::vector<std::string> SplitStringToVec(const std::string& str, const std::string& pat);
 bool StartWith(const std::string& str, const std::string& res);
 bool EndWith(const std::string& str, const std::string& res);
diff --git a/trace_streamer/src/base/triple_map.h b/trace_streamer/src/base/triple_map.h
index b815d4a4074e86f776a5eca0399021496459b992..9326eebb705394d44f43fc9ed8f6ad45543282de 100644
--- a/trace_streamer/src/base/triple_map.h
+++ b/trace_streamer/src/base/triple_map.h
@@ -49,27 +49,9 @@ public:
             return invalidValue_;
         }
     }
-    void Erase(T1 t1)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            internalMap_.erase(streamIdHookidMap);
-        }
-    }
-    void Erase(T1 t1, T2 t2)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            (*streamIdHookidMap).second.Erase(t2);
-        }
-    }
-    void Erase(T1 t1, T2 t2, T3 t3)
-    {
-        auto streamIdHookidMap = internalMap_.find(t1);
-        if (streamIdHookidMap != internalMap_.end()) {
-            (*streamIdHookidMap).second.Erase(t2, t3);
-        }
-    }
+    MAP_ERASE_WITH_SINGLE_PARME(T1)
+    MAP_ERASE_WITH_DOUBLE_PARME(T1, T2)
+    MAP_ERASE_WITH_TRIPLE_PARME(T1, T2, T3)
     void Clear()
     {
         internalMap_.clear();
diff --git a/trace_streamer/src/filter/BUILD.gn b/trace_streamer/src/filter/BUILD.gn
index 92facc8e013d8f653dc2ed1161a805185abdcd94..bb1df100a5111db1cee56bfc2da1b3af92177023 100644
--- a/trace_streamer/src/filter/BUILD.gn
+++ b/trace_streamer/src/filter/BUILD.gn
@@ -60,19 +60,8 @@ ohos_source_set("filter") {
     "task_pool_filter.h",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/native_hook:native_hook_data_reader" ]
   deps = []
@@ -88,7 +77,10 @@ ohos_source_set("filter") {
     "${THIRD_PARTY}/protobuf/src",
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/perf_include/musl",
+    "${THIRD_PARTY}/bounds_checking_function/include",
+    "${THIRD_PARTY}/json/single_include/nlohmann",
     "../proto_reader/include",
     ".",
+    "${THIRD_PARTY}/musl",
   ]
 }
diff --git a/trace_streamer/src/filter/animation_filter.cpp b/trace_streamer/src/filter/animation_filter.cpp
index 301cce0b34d4f24d802690cb4f11277b17568f63..559302f0f8a5133d529d1bde5ab68a0eb9c50980 100644
--- a/trace_streamer/src/filter/animation_filter.cpp
+++ b/trace_streamer/src/filter/animation_filter.cpp
@@ -19,7 +19,7 @@
 
 namespace SysTuning {
 namespace TraceStreamer {
-constexpr uint8_t GENERATE_VSYNC_EVENT_MAX = 6;
+constexpr uint8_t GENERATE_VSYNC_EVENT_MAX = 5;
 constexpr uint8_t DYNAMIC_STACK_DEPTH_MIN = 4;
 constexpr uint16_t FPS_60 = 60;
 constexpr uint16_t FPS_70 = 70;
@@ -30,60 +30,71 @@ constexpr uint16_t FPS_120 = 120;
 AnimationFilter::AnimationFilter(TraceDataCache* dataCache, const TraceStreamerFilters* filter)
     : FilterBase(dataCache, filter)
 {
+    dynamicFrame_ = traceDataCache_->GetDynamicFrame();
+    callStackSlice_ = traceDataCache_->GetInternalSlicesData();
+    if (dynamicFrame_ == nullptr || callStackSlice_ == nullptr) {
+        TS_LOGE("dynamicFrame_ or callStackSlice_ is nullptr.");
+    }
 }
-
 AnimationFilter::~AnimationFilter() {}
-
+bool AnimationFilter::UpdateDeviceFps(const BytraceLine& line)
+{
+    generateVsyncCnt_++;
+    if (generateFirstTime_ == INVALID_UINT64) {
+        generateFirstTime_ = line.ts;
+    }
+    if (generateVsyncCnt_ <= GENERATE_VSYNC_EVENT_MAX) {
+        return true;
+    }
+    // calculate the average frame rate
+    uint64_t generateTimePeriod = (line.ts - generateFirstTime_) / GENERATE_VSYNC_EVENT_MAX;
+    uint32_t fps = BILLION_NANOSECONDS / generateTimePeriod;
+    if (fps < FPS_70) {
+        traceDataCache_->GetDeviceInfo()->UpdateFrameRate(FPS_60);
+    } else if (fps < FPS_100) {
+        traceDataCache_->GetDeviceInfo()->UpdateFrameRate(FPS_90);
+    } else {
+        traceDataCache_->GetDeviceInfo()->UpdateFrameRate(FPS_120);
+    }
+    TS_LOGI("physical frame rate is %u", fps);
+    return true;
+}
+bool AnimationFilter::UpdateDeviceScreenSize(const TracePoint& point)
+{
+    // get width and height, eg:funcArgs=(0, 0, 1344, 2772) Alpha: 1.00
+    std::smatch matcheLine;
+    std::regex entryViewArgsPattern(R"(\(\d+,\s*\d+,\s*(\d+),\s*(\d+)\))");
+    if (!std::regex_search(point.funcArgs_, matcheLine, entryViewArgsPattern)) {
+        TS_LOGE("Not support this event: %s\n", point.name_.data());
+        return false;
+    }
+    uint8_t index = 0;
+    uint32_t width = base::StrToInt<uint32_t>(matcheLine[++index].str()).value();
+    uint32_t height = base::StrToInt<uint32_t>(matcheLine[++index].str()).value();
+    traceDataCache_->GetDeviceInfo()->UpdateWidthAndHeight(matcheLine);
+    TS_LOGI("physical width is %u, height is %u", width, height);
+    return true;
+}
 bool AnimationFilter::UpdateDeviceInfoEvent(const TracePoint& point, const BytraceLine& line)
 {
     if (traceDataCache_->GetConstDeviceInfo().PhysicalFrameRate() == INVALID_UINT32 &&
         StartWith(point.name_, generateVsyncCmd_)) {
-        if (generateFirstTime_ == INVALID_UINT64) {
-            generateFirstTime_ = line.ts;
-        }
-        generateVsyncCnt_++;
-        // calculate the average frame rate
-        if (generateVsyncCnt_ == GENERATE_VSYNC_EVENT_MAX) {
-            uint64_t generateTimePeriod = (line.ts - generateFirstTime_) / (GENERATE_VSYNC_EVENT_MAX - 1);
-            uint32_t fps = BILLION_NANOSECONDS / generateTimePeriod;
-            if (fps < FPS_70) {
-                traceDataCache_->GetDeviceInfo()->UpdateFrameRate(FPS_60);
-            } else if (fps < FPS_100) {
-                traceDataCache_->GetDeviceInfo()->UpdateFrameRate(FPS_90);
-            } else {
-                traceDataCache_->GetDeviceInfo()->UpdateFrameRate(FPS_120);
-            }
-            TS_LOGI("physical frame rate is %u", fps);
-        }
-        return true;
+        return UpdateDeviceFps(line);
     } else if (traceDataCache_->GetConstDeviceInfo().PhysicalWidth() == INVALID_UINT32 &&
                point.funcPrefixId_ == entryViewCmd_) {
-        // get width and height, eg:funcArgs=(0, 0, 1344, 2772) Alpha: 1.00
-        std::smatch matcheLine;
-        std::regex entryViewArgsPattern(R"(\(\d+,\s*\d+,\s*(\d+),\s*(\d+)\))");
-        if (!std::regex_search(point.funcArgs_, matcheLine, entryViewArgsPattern)) {
-            TS_LOGE("Not support this event: %s\n", point.name_.data());
-            return false;
-        }
-        uint8_t index = 0;
-        uint32_t width = base::StrToInt<uint32_t>(matcheLine[++index].str()).value();
-        uint32_t height = base::StrToInt<uint32_t>(matcheLine[++index].str()).value();
-        traceDataCache_->GetDeviceInfo()->UpdateWidthAndHeight(matcheLine);
-        TS_LOGI("physical width is %u, height is %u", width, height);
-        return true;
+        return UpdateDeviceScreenSize(point);
     }
     return false;
 }
 bool AnimationFilter::BeginDynamicFrameEvent(const TracePoint& point, size_t callStackRow)
 {
     // get the parent frame of data
-    CallStack* callStackSlice = traceDataCache_->GetInternalSlicesData();
-    const std::optional<uint64_t>& parentId = callStackSlice->ParentIdData()[callStackRow];
-    uint8_t depth = callStackSlice->Depths()[callStackRow];
+    const std::optional<uint64_t>& parentId = callStackSlice_->ParentIdData()[callStackRow];
+    uint8_t depth = callStackSlice_->Depths()[callStackRow];
     if (depth < DYNAMIC_STACK_DEPTH_MIN || !parentId.has_value()) {
         return false;
     }
-    const std::string& curStackName = traceDataCache_->GetDataFromDict(callStackSlice->NamesData()[callStackRow]);
+    const std::string& curStackName = traceDataCache_->GetDataFromDict(callStackSlice_->NamesData()[callStackRow]);
     if (!StartWith(curStackName, leashWindowCmd_)) {
         return false;
     }
@@ -93,7 +104,7 @@ bool AnimationFilter::BeginDynamicFrameEvent(const TracePoint& point, size_t cal
         return false;
     }
     auto nameIndex = traceDataCache_->GetDataIndex(point.funcPrefix_.substr(rsUniProcessCmd_.size(), nameSize));
-    auto dynamicFramRow = traceDataCache_->GetDynamicFrame()->AppendDynamicFrame(nameIndex);
+    auto dynamicFramRow = dynamicFrame_->AppendDynamicFrame(nameIndex);
     callStackRowMap_.emplace(callStackRow, dynamicFramRow);
     return true;
 }
@@ -113,42 +124,44 @@ bool AnimationFilter::FinishAnimationEvent(const BytraceLine& line, size_t callS
     animationCallIds_.erase(iter);
     return true;
 }
+bool AnimationFilter::UpdateDynamicEndTime(const uint64_t curFrameRow, uint64_t curStackRow)
+{
+    // update dynamicFrame endTime, filter up from the curStackRow, until reach the top
+    for (uint8_t stackCurDepth = callStackSlice_->Depths()[curStackRow]; stackCurDepth > 0; stackCurDepth--) {
+        if (!callStackSlice_->ParentIdData()[curStackRow].has_value()) {
+            return false;
+        }
+        curStackRow = callStackSlice_->ParentIdData()[curStackRow].value();
+        // use 'H:RSMainThread::DoComposition' endTime as dynamicFrame endTime
+        if (rsDoCompCmd_ == callStackSlice_->NamesData()[curStackRow]) {
+            auto endTime = callStackSlice_->TimeStampData()[curStackRow] + callStackSlice_->DursData()[curStackRow];
+            dynamicFrame_->UpdateEndTime(curFrameRow, endTime);
+            return true;
+        }
+    }
+    return false;
+}
 void AnimationFilter::UpdateDynamicFrameInfo()
 {
     std::smatch matcheLine;
     std::regex leashWindowPattern(R"((\d+),\s*(\d+),\s*(\d+),\s*(\d+)\)\s+Alpha:\s+-*(\d+\.\d+))");
-    DynamicFrame* dynamicFrame = traceDataCache_->GetDynamicFrame();
-    CallStack* callStackSlice = traceDataCache_->GetInternalSlicesData();
     uint64_t curStackRow = INVALID_UINT64;
     uint64_t curFrameRow = INVALID_UINT64;
     for (const auto& it : callStackRowMap_) {
         curStackRow = it.first;
         curFrameRow = it.second;
-        uint8_t stackDepth = callStackSlice->Depths()[curStackRow];
         // update dynamicFrame pos, eg:H:RSUniRender::Process:[leashWindow25] (0, 0, 1344, 2772) Alpha: 1.00
-        auto nameDataIndex = callStackSlice->NamesData()[curStackRow];
+        auto nameDataIndex = callStackSlice_->NamesData()[curStackRow];
         const std::string& curStackName = traceDataCache_->GetDataFromDict(nameDataIndex);
         const std::string& funcArgs = curStackName.substr(leashWindowCmd_.size());
         if (!std::regex_search(funcArgs, matcheLine, leashWindowPattern)) {
             TS_LOGE("Not support this event: %s\n", funcArgs.data());
             continue;
         }
-        dynamicFrame->UpdatePosition(
+        dynamicFrame_->UpdatePosition(
             curFrameRow, matcheLine,
             traceDataCache_->GetDataIndex((matcheLine[DYNAMICFRAME_MATCH_LAST].str()))); // alpha
-        // update dynamicFrame endTime, filter up from the curStackRow, until reach the top
-        for (uint8_t stackCurDepth = stackDepth; stackCurDepth > 0; stackCurDepth--) {
-            if (!callStackSlice->ParentIdData()[curStackRow].has_value()) {
-                break;
-            }
-            curStackRow = callStackSlice->ParentIdData()[curStackRow].value();
-            // use 'H:RSMainThread::DoComposition' endTime as dynamicFrame endTime
-            if (rsDoCompCmd_ == callStackSlice->NamesData()[curStackRow]) {
-                auto endTime = callStackSlice->TimeStampData()[curStackRow] + callStackSlice->DursData()[curStackRow];
-                dynamicFrame->UpdateEndTime(curFrameRow, endTime);
-                break;
-            }
-        }
+        UpdateDynamicEndTime(curFrameRow, curStackRow);
     }
     TS_LOGI("UpdateDynamicFrame (%zu) endTime and pos finish", callStackRowMap_.size());
     // this can only be cleared by the UpdateDynamicFrameInfo function
diff --git a/trace_streamer/src/filter/animation_filter.h b/trace_streamer/src/filter/animation_filter.h
index ae8ffd3eb057e700bf84fb175e442ce371d7d0a3..7cc162e36915234a1f40c558be35889cc0fa666a 100644
--- a/trace_streamer/src/filter/animation_filter.h
+++ b/trace_streamer/src/filter/animation_filter.h
@@ -35,6 +35,9 @@ public:
     void Clear();
 
 private:
+    bool UpdateDeviceFps(const BytraceLine& line);
+    bool UpdateDeviceScreenSize(const TracePoint& point);
+    bool UpdateDynamicEndTime(const uint64_t curFrameRow, uint64_t curStackRow);
     const std::string generateVsyncCmd_ = "H:GenerateVsyncCount";
     const std::string leashWindowCmd_ = "H:RSUniRender::Process:[leashWindow";
     const std::string rsUniProcessCmd_ = "H:RSUniRender::Process:[";
@@ -46,6 +49,8 @@ private:
     std::unordered_map<uint64_t, uint64_t> animationCallIds_ = {};
     uint64_t generateFirstTime_ = INVALID_UINT64;
     uint8_t generateVsyncCnt_ = 0;
+    DynamicFrame* dynamicFrame_ = nullptr;
+    CallStack* callStackSlice_ = nullptr;
 };
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/filter/hi_sysevent_measure_filter.cpp b/trace_streamer/src/filter/hi_sysevent_measure_filter.cpp
index 352c7b5affe3692dbcc3f551fd825bef1f1ce4ae..4e96427630ddbbc113249c5e4e01875e0267ce4c 100644
--- a/trace_streamer/src/filter/hi_sysevent_measure_filter.cpp
+++ b/trace_streamer/src/filter/hi_sysevent_measure_filter.cpp
@@ -16,6 +16,7 @@
 #include "hi_sysevent_measure_filter.h"
 #include "filter_filter.h"
 #include "log.h"
+#include "stat_filter.h"
 #include "system_event_measure_filter.h"
 #include "ts_common.h"
 
@@ -73,6 +74,46 @@ void HiSysEventMeasureFilter::AppendNewValue(int32_t brightnessState,
         accessibility, recording, streamAll);
     return;
 }
+bool HiSysEventMeasureFilter::JGetData(const json& jMessage,
+                                       JsonData& jData,
+                                       size_t& maxArraySize,
+                                       std::vector<size_t>& noArrayIndex,
+                                       std::vector<size_t>& arrayIndex)
+{
+    streamFilters_->statFilter_->IncreaseStat(TRACE_HISYSEVENT, STAT_EVENT_RECEIVED);
+    for (auto i = jMessage.begin(); i != jMessage.end(); i++) {
+        if (i.key() == "name_") {
+            jData.eventSource = i.value();
+            if (find(eventsAccordingAppNames_.begin(), eventsAccordingAppNames_.end(), jData.eventSource) ==
+                eventsAccordingAppNames_.end()) {
+                streamFilters_->statFilter_->IncreaseStat(TRACE_HISYSEVENT, STAT_EVENT_NOTMATCH);
+                TS_LOGW("event source:%s not supported for hisysevent", jData.eventSource.c_str());
+                return false;
+            }
+            continue;
+        }
+        if (i.key() == "time_") {
+            jData.timeStamp = i.value();
+            continue;
+        }
+        if (i.key() == "tag_" && i.value() != "PowerStats") {
+            TS_LOGW("energy data without PowerStats tag_ would be invalid");
+            return false;
+        }
+        if (i.key() == "APPNAME") {
+            jData.appName.assign(i.value().begin(), i.value().end());
+        }
+        if (i.value().is_array()) {
+            maxArraySize = std::max(maxArraySize, i.value().size());
+            arrayIndex.push_back(jData.key.size());
+        } else {
+            noArrayIndex.push_back(jData.key.size());
+        }
+        jData.key.push_back(i.key());
+        jData.value.push_back(i.value());
+    }
+    return true;
+}
 DataIndex HiSysEventMeasureFilter::GetOrCreateFilterIdInternal(DataIndex appNameId, DataIndex key)
 {
     uint64_t appKeyId = appKey_.Find(appNameId, key);
diff --git a/trace_streamer/src/filter/hi_sysevent_measure_filter.h b/trace_streamer/src/filter/hi_sysevent_measure_filter.h
index 4f75ba9a67a9b3fff3ab63b90855154ec902cdfa..cccbe979160efb41d0dd8aa2e67762ff2182a542 100644
--- a/trace_streamer/src/filter/hi_sysevent_measure_filter.h
+++ b/trace_streamer/src/filter/hi_sysevent_measure_filter.h
@@ -22,12 +22,26 @@
 
 #include "double_map.h"
 #include "filter_base.h"
+#include "json.hpp"
 #include "trace_data_cache.h"
 #include "trace_streamer_filters.h"
 #include "triple_map.h"
 
 namespace SysTuning {
 namespace TraceStreamer {
+
+using json = nlohmann::json;
+typedef struct {
+    std::string eventSource;
+    uint64_t timeStamp;
+    std::vector<std::string> appName;
+    std::vector<std::string> appVersions;
+    std::vector<std::string> key;
+    std::vector<json> value;
+} JsonData;
+
+enum ErrorCode { ERROR_CODE_EXIT = -2, ERROR_CODE_NODATA = -1 };
+
 class HiSysEventMeasureFilter : private FilterBase {
 public:
     HiSysEventMeasureFilter(TraceDataCache* dataCache, const TraceStreamerFilters* filter);
@@ -65,6 +79,11 @@ public:
                         int32_t accessibility,
                         int32_t recording,
                         int32_t streamAll);
+    bool JGetData(const json& jMessage,
+                  JsonData& jData,
+                  size_t& maxArraySize,
+                  std::vector<size_t>& noArrayIndex,
+                  std::vector<size_t>& arrayIndex);
     void Clear();
 
 private:
@@ -72,6 +91,41 @@ private:
     DoubleMap<DataIndex, DataIndex, DataIndex> appKey_;
     DoubleMap<DataIndex, DataIndex, DataIndex> appName_;
     std::map<DataIndex, DataIndex> eventSource_;
+    std::vector<std::string> eventsAccordingAppNames_ = {"POWER_IDE_BATTERY",
+                                                         "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",
+                                                         "BRIGHTNESS_NIT",
+                                                         "SIGNAL_LEVEL",
+                                                         "WIFI_EVENT_RECEIVED",
+                                                         "AUDIO_STREAM_CHANGE",
+                                                         "AUDIO_VOLUME_CHANGE",
+                                                         "WIFI_STATE",
+                                                         "BLUETOOTH_BR_SWITCH_STATE",
+                                                         "LOCATION_SWITCH_STATE",
+                                                         "ENABLE_SENSOR",
+                                                         "DISABLE_SENSOR",
+                                                         "WORK_REMOVE",
+                                                         "WORK_START",
+                                                         "WORK_STOP",
+                                                         "WORK_ADD",
+                                                         "POWER_RUNNINGLOCK",
+                                                         "GNSS_STATE",
+                                                         "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"};
 };
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/filter/native_hook_filter.cpp b/trace_streamer/src/filter/native_hook_filter.cpp
index 03c32eabc8bcec6565fee90f081cfba0135ef37c..d0b83b15b1900f0eb8fc3f52509df0ac0bc702b7 100644
--- a/trace_streamer/src/filter/native_hook_filter.cpp
+++ b/trace_streamer/src/filter/native_hook_filter.cpp
@@ -16,6 +16,7 @@
 #include "native_hook_filter.h"
 #include "native_hook_config.pbreader.h"
 #include <cstddef>
+#include <cinttypes>
 namespace SysTuning {
 namespace TraceStreamer {
 NativeHookFilter::NativeHookFilter(TraceDataCache* dataCache, const TraceStreamerFilters* filter)
@@ -126,6 +127,9 @@ void NativeHookFilter::CompressStackAndFrames(ProtoReader::RepeatedDataAreaItera
         if (!frameHashToFrameInfoMap_.count(frameHash)) {
             // the frame compression is completed and the frame is parsed.
             auto frameInfo = ParseFrame(itor.GetDataArea());
+            if (!frameInfo) {
+                continue;
+            }
             frameHashToFrameInfoMap_.emplace(std::make_pair(frameHash, std::move(frameInfo)));
         }
         framesHash.emplace_back(frameHash);
@@ -701,7 +705,7 @@ void NativeHookFilter::GetNativeHookFrameVaddrs()
     vaddrs_.clear();
     auto size = traceDataCache_->GetNativeHookFrameData()->Size();
     // Traverse every piece of native_hook frame data
-    for (auto i = 0; i < size; i++) {
+    for (size_t i = 0; i < size; i++) {
         auto symbolOffset = traceDataCache_->GetNativeHookFrameData()->SymbolOffsets()[i];
         // When the symbol offset is not 0, vaddr=offset+symbol offset
         if (symbolOffset) {
@@ -877,7 +881,7 @@ bool NativeHookFilter::GetIpsWitchNeedResymbolization(DataIndex filePathId, std:
     bool value = false;
     for (auto itor = ipToFrameInfo_.begin(); itor != ipToFrameInfo_.end(); itor++) {
         if (!itor->second) {
-            TS_LOGI("ip :%llu can not symbolization! FrameInfo is nullptr", itor->first);
+            TS_LOGI("ip :%" PRIu64 " can not symbolization! FrameInfo is nullptr", itor->first);
             continue;
         }
         if (itor->second->filePathId_ == filePathId) {
@@ -923,7 +927,7 @@ bool NativeHookFilter::NativeHookReloadElfSymbolTable(
         } else {
             filePathIdToImportSymbolTableMap_.emplace(std::make_pair(filePathIndex, elfSymbolTable));
         }
-        for (auto row = 0; row < size; row++) {
+        for (size_t row = 0; row < size; row++) {
             if (filePathIndexs[row] != filePathIndex) {
                 continue;
             }
diff --git a/trace_streamer/src/filter/offline_symbolization_filter.cpp b/trace_streamer/src/filter/offline_symbolization_filter.cpp
index 255064de115584915c0f1a5a3aace7d44e35eb8d..2e8317d9e3ce32ca76d5a929267f5dc7a56ba69a 100644
--- a/trace_streamer/src/filter/offline_symbolization_filter.cpp
+++ b/trace_streamer/src/filter/offline_symbolization_filter.cpp
@@ -140,6 +140,9 @@ std::shared_ptr<FrameInfo> OfflineSymbolizationFilter::OfflineSymbolization(uint
     auto mangle = reinterpret_cast<const char*>(symbolTable->str_table().Data() + symbolStart);
     auto demangle = GetDemangleSymbolIndex(mangle);
     frameInfo->symbolIndex_ = traceDataCache_->GetDataIndex(demangle);
+    if (demangle != mangle) {
+        free(demangle);
+    }
     ipToFrameInfo_.insert(std::make_pair(ip, frameInfo));
     return frameInfo;
 }
@@ -172,7 +175,11 @@ DataIndex OfflineSymbolizationFilter::OfflineSymbolization(uint64_t symVaddr, Da
     }
     auto mangle = symbolTable->strTable.c_str() + symbolStart;
     auto demangle = GetDemangleSymbolIndex(mangle);
-    return traceDataCache_->GetDataIndex(demangle);
+    auto index = traceDataCache_->GetDataIndex(demangle);
+    if (demangle != mangle) {
+        free(demangle);
+    }
+    return index;
 }
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/include/BUILD.gn b/trace_streamer/src/include/BUILD.gn
index 406b80d34d20fe10f96d3c2dd4ecd3f6e28608c1..f8cfa79d148b1376b0e326b4a623d50346ac28b6 100755
--- a/trace_streamer/src/include/BUILD.gn
+++ b/trace_streamer/src/include/BUILD.gn
@@ -26,4 +26,7 @@ ohos_source_set("ibase") {
   public_deps = []
   deps = []
   sources += [ "/usr/x86_64-w64-mingw32/include/windows.h" ]
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
+  }
 }
diff --git a/trace_streamer/src/parser/BUILD.gn b/trace_streamer/src/parser/BUILD.gn
index c940b3cfe7049abf2e72e41191c44972f90d1a3c..05038b77bb81cd5be27113340e4e1b03520e9eb4 100644
--- a/trace_streamer/src/parser/BUILD.gn
+++ b/trace_streamer/src/parser/BUILD.gn
@@ -19,16 +19,10 @@ ohos_source_set("parser") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   sources = [
     "bytrace_parser/bytrace_event_parser.cpp",
-    "bytrace_parser/bytrace_event_parser.h",
     "bytrace_parser/bytrace_parser.cpp",
-    "bytrace_parser/bytrace_parser.h",
-    "common_types.h",
     "event_parser_base.cpp",
-    "event_parser_base.h",
     "print_event_parser.cpp",
-    "print_event_parser.h",
     "thread_state_flag.cpp",
-    "thread_state_flag.h",
   ]
   deps = [
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/cpu_data:cpu_data_reader",
@@ -56,24 +50,13 @@ ohos_source_set("parser") {
     "${SRC}/filter",
     "${SRC}",
     ".",
+    "htrace_pbreader_parser",
+    "../proto_reader/include",
+    "${THIRD_PARTY}/bounds_checking_function/include",
     "${THIRD_PARTY}/json/single_include/nlohmann",
   ]
 
-  include_dirs += [ "htrace_pbreader_parser" ]
-  include_dirs += [ "../proto_reader/include" ]
-
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/parser/bytrace_parser/bytrace_event_parser.cpp b/trace_streamer/src/parser/bytrace_parser/bytrace_event_parser.cpp
index 10241ecf0d2e6741f0f5d32d9bb64185ea79f9ba..90067a300a2dd8b8a94782373406d8f6bc5906a3 100644
--- a/trace_streamer/src/parser/bytrace_parser/bytrace_event_parser.cpp
+++ b/trace_streamer/src/parser/bytrace_parser/bytrace_event_parser.cpp
@@ -751,20 +751,7 @@ void BytraceEventParser::BeginFilterEvents(EventInfo* event)
 
 void BytraceEventParser::Clear()
 {
-    streamFilters_->binderFilter_->Clear();
-    streamFilters_->sliceFilter_->Clear();
-    streamFilters_->cpuFilter_->Clear();
-    streamFilters_->irqFilter_->Clear();
-    streamFilters_->cpuMeasureFilter_->Clear();
-    streamFilters_->threadMeasureFilter_->Clear();
-    streamFilters_->threadFilter_->Clear();
-    streamFilters_->processMeasureFilter_->Clear();
-    streamFilters_->processFilterFilter_->Clear();
-    streamFilters_->clockEnableFilter_->Clear();
-    streamFilters_->clockDisableFilter_->Clear();
-    streamFilters_->clkRateFilter_->Clear();
-    streamFilters_->clkDisableFilter_->Clear();
-    streamFilters_->binderFilter_->Clear();
+    const_cast<TraceStreamerFilters*>(streamFilters_)->FilterClear();
     printEventParser_.Finish();
 }
 } // namespace TraceStreamer
diff --git a/trace_streamer/src/parser/bytrace_parser/bytrace_parser.cpp b/trace_streamer/src/parser/bytrace_parser/bytrace_parser.cpp
index dbd7d19589c47efe90f8131710de9d09364422a8..88cb956385a51b8095012777615f99ade6bc32f9 100644
--- a/trace_streamer/src/parser/bytrace_parser/bytrace_parser.cpp
+++ b/trace_streamer/src/parser/bytrace_parser/bytrace_parser.cpp
@@ -127,44 +127,6 @@ void BytraceParser::ParseTraceDataSegment(std::unique_ptr<uint8_t[]> bufferStr,
     }
     return;
 }
-int32_t BytraceParser::JGetData(json& jMessage,
-                                JsonData& jData,
-                                size_t& maxArraySize,
-                                std::vector<size_t>& noArrayIndex,
-                                std::vector<size_t>& arrayIndex)
-{
-    for (auto i = jMessage.begin(); i != jMessage.end(); i++) {
-        if (i.key() == "name_") {
-            jData.eventSource = i.value();
-            if (find(eventsAccordingAppNames.begin(), eventsAccordingAppNames.end(), jData.eventSource) ==
-                eventsAccordingAppNames.end()) {
-                TS_LOGW("event source:%s not supported for hisysevent", jData.eventSource.c_str());
-                return -1;
-            }
-            continue;
-        }
-        if (i.key() == "time_") {
-            jData.timeStamp = i.value();
-            continue;
-        }
-        if (i.key() == "tag_" && i.value() != "PowerStats") {
-            TS_LOGW("energy data without PowerStats tag_ would be invalid");
-            return -1;
-        }
-        if (i.key() == "APPNAME") {
-            jData.appName.assign(i.value().begin(), i.value().end());
-        }
-        if (i.value().is_array()) {
-            maxArraySize = std::max(maxArraySize, i.value().size());
-            arrayIndex.push_back(jData.key.size());
-        } else {
-            noArrayIndex.push_back(jData.key.size());
-        }
-        jData.key.push_back(i.key());
-        jData.value.push_back(i.value());
-    }
-    return 0;
-}
 
 inline void BytraceParser::AppendJsonDataToHiSysEventNewValue(JsonData jData,
                                                               int32_t jIndex,
@@ -236,7 +198,7 @@ void BytraceParser::ParseJsonData(const std::string& buffer)
     size_t maxArraySize = 0;
     std::vector<size_t> noArrayIndex = {};
     std::vector<size_t> arrayIndex = {};
-    if (JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex) < 0) {
+    if (!streamFilters_->hiSysEventMeasureFilter_->JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex)) {
         return;
     }
     DataIndex eventSourceIndex = eventParser_->traceDataCache_->GetDataIndex(jData.eventSource);
diff --git a/trace_streamer/src/parser/bytrace_parser/bytrace_parser.h b/trace_streamer/src/parser/bytrace_parser/bytrace_parser.h
index 375b675b1fd00e43019a85b6d3d5218955024153..2507477356cb55579ce2dfa11f2431102cadf873 100644
--- a/trace_streamer/src/parser/bytrace_parser/bytrace_parser.h
+++ b/trace_streamer/src/parser/bytrace_parser/bytrace_parser.h
@@ -22,7 +22,7 @@
 #include <thread>
 
 #include "bytrace_event_parser.h"
-#include "json.hpp"
+#include "hi_sysevent_measure_filter.h"
 #include "log.h"
 #include "parser_base.h"
 #include "string_to_numerical.h"
@@ -57,7 +57,6 @@ public:
     void WaitForParserEnd();
 
 private:
-    enum ErrorCode { ERROR_CODE_EXIT = -2, ERROR_CODE_NODATA = -1 };
     int32_t GetNextSegment();
     void GetDataSegAttr(DataSegment& seg, const std::smatch& matcheLine) const;
 
@@ -89,15 +88,6 @@ private:
     bool FilterData(DataSegment& seg);
 
 private:
-    using json = nlohmann::json;
-    typedef struct {
-        std::string eventSource;
-        uint64_t timeStamp;
-        std::vector<std::string> appName;
-        std::vector<std::string> appVersions;
-        std::vector<std::string> key;
-        std::vector<json> value;
-    } JsonData;
     void AppendJsonDataToHiSysEventNewValue(JsonData jData, int32_t jIndex, DataIndex eventSourceIndex);
     void NoArrayDataParse(JsonData jData, std::vector<size_t> noArrayIndex, DataIndex eventSourceIndex);
     void ArrayDataParse(JsonData jData,
@@ -105,11 +95,6 @@ private:
                         DataIndex eventSourceIndex,
                         size_t maxArraySize);
     void CommonDataParser(JsonData jData, DataIndex eventSourceIndex);
-    int32_t JGetData(json& jMessage,
-                     JsonData& jData,
-                     size_t& maxArraySize,
-                     std::vector<size_t>& noArrayIndex,
-                     std::vector<size_t>& arrayIndex);
     void ParseJsonData(const std::string& buffer);
 
 private:
@@ -120,43 +105,6 @@ private:
                                                   R"([a-zA-Z0-9.]{0,5}\s+(\d+\.\d+):\s+(\S+):)");
 
     const std::string script_ = R"(</script>)";
-
-    std::vector<std::string> eventsAccordingAppNames = {"POWER_IDE_BATTERY",
-                                                        "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",
-                                                        "BRIGHTNESS_NIT",
-                                                        "SIGNAL_LEVEL",
-                                                        "WIFI_EVENT_RECEIVED",
-                                                        "AUDIO_STREAM_CHANGE",
-                                                        "AUDIO_VOLUME_CHANGE",
-                                                        "WIFI_STATE",
-                                                        "BLUETOOTH_BR_SWITCH_STATE",
-                                                        "LOCATION_SWITCH_STATE",
-                                                        "ENABLE_SENSOR",
-                                                        "DISABLE_SENSOR",
-                                                        "WORK_REMOVE",
-                                                        "WORK_START",
-                                                        "WORK_STOP",
-                                                        "WORK_ADD",
-                                                        "POWER_RUNNINGLOCK",
-                                                        "GNSS_STATE",
-                                                        "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"};
-
     size_t parsedTraceValidLines_ = 0;
     size_t parsedTraceInvalidLines_ = 0;
     size_t traceCommentLines_ = 0;
diff --git a/trace_streamer/src/parser/ebpf_parser/BUILD.gn b/trace_streamer/src/parser/ebpf_parser/BUILD.gn
index 4a1a98947a3ce9ea69efa43ef02c1a437e9cc599..35dd529d1eca66e62d03bc91114eff756fcffe36 100644
--- a/trace_streamer/src/parser/ebpf_parser/BUILD.gn
+++ b/trace_streamer/src/parser/ebpf_parser/BUILD.gn
@@ -16,20 +16,16 @@ import("../../../build/ts.gni")
 ohos_source_set("ebpf_parser_src") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
+  }
   sources = [
     "bio_latency_data_parser.cpp",
-    "bio_latency_data_parser.h",
     "ebpf_base.cpp",
-    "ebpf_base.h",
     "ebpf_data_parser.cpp",
-    "ebpf_data_parser.h",
     "ebpf_data_reader.cpp",
-    "ebpf_data_reader.h",
-    "ebpf_stdtype.h",
     "file_system_data_parser.cpp",
-    "file_system_data_parser.h",
     "paged_memory_data_parser.cpp",
-    "paged_memory_data_parser.h",
   ]
   include_dirs = [
     ".",
@@ -43,9 +39,10 @@ ohos_source_set("ebpf_parser_src") {
     "../../trace_streamer",
     "${THIRD_PARTY}/protobuf/src",
     "${THIRD_PARTY}/sqlite/include",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
   public_deps = [ "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/memory_data:memory_data_reader" ]
-  if (is_win || is_macx) {
+  if (is_win || is_macx || is_mingw) {
     include_dirs += [
       "${THIRD_PARTY}/perf_include/linux",
       "${THIRD_PARTY}/perf_include/musl",
@@ -71,7 +68,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_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
   ]
 }
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 41530723e7a8aaaa3c6b65aac6a56fcde8229900..8954f064d7b1c0ae3dc775bc8f8ebc694d9f9847 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
@@ -16,6 +16,7 @@
 #include "process_filter.h"
 #include "stat_filter.h"
 #include "string_to_numerical.h"
+#include <cinttypes>
 
 namespace SysTuning {
 namespace TraceStreamer {
@@ -68,7 +69,7 @@ void BioLatencyDataParser::ParseBioLatencyEvent()
         auto newEndTs = streamFilters_->clockFilter_->ToPrimaryTraceTime(clockId_, endTs);
         timeParser_->UpdatePluginTimeRange(clockId_, endTs, newEndTs);
         if (newStartTs > newEndTs) {
-            TS_LOGE("File system event origin startTs = %llu, endTs = %llu, newStartTs = %llu, newEndTs = %llu",
+            TS_LOGE("startTs = %" PRIu64 ", endTs = %" PRIu64 ", newStartTs = %" PRIu64 ", newEndTs = %" PRIu64 "",
                     startTs, endTs, newStartTs, newEndTs);
             streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_EBPF_PAGED_MEMORY, STAT_EVENT_DATA_INVALID);
             return;
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_base.cpp b/trace_streamer/src/parser/ebpf_parser/ebpf_base.cpp
index ab182dd59795b257f9e8b713dc7b82ae2056004b..0297c10161c3063c8e87315abad923676df091b4 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_base.cpp
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_base.cpp
@@ -97,7 +97,11 @@ DataIndex EbpfBase::GetSymbolNameIndexFromSymVaddr(const ElfEventFixedHeader* el
     }
     auto mangle = reinterpret_cast<const char*>(strTabAddr) + symbolStart;
     auto demangle = GetDemangleSymbolIndex(mangle);
-    return traceDataCache_->GetDataIndex(demangle);
+    auto index = traceDataCache_->GetDataIndex(demangle);
+    if (demangle != mangle) {
+        free(demangle);
+    }
+    return index;
 }
 void EbpfBase::UpdateFilePathIndexToPidAndIpMap(DataIndex filePathIndex, uint32_t pid, uint64_t ip)
 {
@@ -328,6 +332,9 @@ void EbpfBase::OfflineSymbolization(std::set<std::tuple<uint32_t, uint64_t>>& pi
         auto mangle = symbolTable->strTable.c_str() + symbolStart;
         auto demangle = GetDemangleSymbolIndex(mangle);
         symbolAndFilePathIndex.symbolIndex = traceDataCache_->GetDataIndex(demangle);
+        if (demangle != mangle) {
+            free(demangle);
+        }
         pidAndIpToSymbolAndFilePathIndex_.Insert(pid, ip, symbolAndFilePathIndex);
     }
     filePathIndexAndStValueToSymAddr_.Clear();
diff --git a/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.cpp b/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.cpp
index 88392d1fa6655324883950c0a8c28ea58f22bf07..2eee8e5183632ebc23bf86a6593afa579d55c810 100644
--- a/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.cpp
+++ b/trace_streamer/src/parser/ebpf_parser/ebpf_data_reader.cpp
@@ -48,13 +48,13 @@ bool EbpfDataReader::InitEbpfData(const std::deque<uint8_t>& dequeBuffer, uint64
 bool EbpfDataReader::InitEbpfHeader()
 {
     if (bufferSize_ < EbpfDataHeader::EBPF_DATA_HEADER_SIZE) {
-        TS_LOGE("buffer size less than ebpf data header!!!, bufferSize_ = %llu ", bufferSize_);
+        TS_LOGE("buffer size less than ebpf data header!!!, bufferSize_ = %" PRIu64 " ", bufferSize_);
         return false;
     }
     ebpfDataHeader_ = reinterpret_cast<EbpfDataHeader*>(startAddr_);
 
     if (ebpfDataHeader_->header.magic != EbpfDataHeader::HEADER_MAGIC) {
-        TS_LOGE("Get EBPF file header failed! magic = %llx", ebpfDataHeader_->header.magic);
+        TS_LOGE("Get EBPF file header failed! magic = %" PRIx64 "", ebpfDataHeader_->header.magic);
         return false;
     }
     if (ebpfDataHeader_->header.headSize != EbpfDataHeader::EBPF_DATA_HEADER_SIZE) {
@@ -186,7 +186,7 @@ void EbpfDataReader::ReadKernelSymAddrMap(const KernelSymbolInfoHeader* elfAddr,
     auto strTab = reinterpret_cast<const char*>(start + sysItemSize);
     maxKernelAddr_ = elfAddr->vaddrEnd;
     minKernelAddr_ = elfAddr->vaddrStart;
-    for (auto i = 0; i < sysItemSize; i++) {
+    for (uint32_t i = 0; i < sysItemSize; i++) {
         (void)memset_s(strSymbolName_, MAX_SYMBOL_LENGTH, 0, MAX_SYMBOL_LENGTH);
         auto item = start + i;
         if (strncpy_s(strSymbolName_, MAX_SYMBOL_LENGTH, strTab + item->nameOffset, MAX_SYMBOL_LENGTH) < 0) {
@@ -322,7 +322,7 @@ bool EbpfDataReader::ReadItemEventStr(const uint8_t* buffer, uint32_t size)
         streamFilters_->processFilter_->GetOrCreateThreadWithPid(strFixedHeaderAddr->tid, strFixedHeaderAddr->pid);
     auto strAddr = const_cast<char*>(reinterpret_cast<const char*>(strFixedHeaderAddr + 1));
     if ((strFixedHeaderAddr->strLen > size - sizeof(StrEventFixedHeader)) || !strFixedHeaderAddr->strLen) {
-        TS_LOGE("invalid str event, strEventFixedHeader = %lu, strlen = %d, size = %d", sizeof(StrEventFixedHeader),
+        TS_LOGE("invalid str event, strEventFixedHeader = %zu, strlen = %d, size = %d", sizeof(StrEventFixedHeader),
                 strFixedHeaderAddr->strLen, size);
         return true;
     }
diff --git a/trace_streamer/src/parser/ebpf_parser/file_system_data_parser.cpp b/trace_streamer/src/parser/ebpf_parser/file_system_data_parser.cpp
index 0bb185e6482d02a5f36d47b0ba702e2151e8cdcd..b77ef76721814f070a4d65464b9b8e93a0d75dc3 100644
--- a/trace_streamer/src/parser/ebpf_parser/file_system_data_parser.cpp
+++ b/trace_streamer/src/parser/ebpf_parser/file_system_data_parser.cpp
@@ -16,6 +16,7 @@
 #include "process_filter.h"
 #include "stat_filter.h"
 #include "string_to_numerical.h"
+#include <cinttypes>
 
 namespace SysTuning {
 namespace TraceStreamer {
@@ -77,7 +78,7 @@ void FileSystemDataParser::ParseFileSystemEvent()
         auto newEndTs = streamFilters_->clockFilter_->ToPrimaryTraceTime(clockId_, fsFixedHeadrAddr->endTime);
         timeParser_->UpdatePluginTimeRange(clockId_, fsFixedHeadrAddr->endTime, newEndTs);
         if (newStartTs > newEndTs) {
-            TS_LOGE("File system event origin startTs = %llu, endTs = %llu, newStartTs = %llu, newEndTs = %llu",
+            TS_LOGE("startTs = %" PRIu64 ", endTs = %" PRIu64 ", newStartTs = %" PRIu64 ", newEndTs = %" PRIu64 "",
                     fsFixedHeadrAddr->startTime, fsFixedHeadrAddr->endTime, newStartTs, newEndTs);
             streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_EBPF_FILE_SYSTEM, STAT_EVENT_DATA_INVALID);
             return;
diff --git a/trace_streamer/src/parser/ebpf_parser/paged_memory_data_parser.cpp b/trace_streamer/src/parser/ebpf_parser/paged_memory_data_parser.cpp
index 70a5a3478315edc453d209a8f4ea10bbd0d418f3..f1d9fb4d5438e204cb9bc52deb051ad73a8d369c 100644
--- a/trace_streamer/src/parser/ebpf_parser/paged_memory_data_parser.cpp
+++ b/trace_streamer/src/parser/ebpf_parser/paged_memory_data_parser.cpp
@@ -16,6 +16,7 @@
 #include "process_filter.h"
 #include "stat_filter.h"
 #include "string_to_numerical.h"
+#include <cinttypes>
 
 namespace SysTuning {
 namespace TraceStreamer {
@@ -71,8 +72,8 @@ void PagedMemoryDataParser::ParsePagedMemoryEvent()
         auto newEndTs = streamFilters_->clockFilter_->ToPrimaryTraceTime(clockId_, endTs);
         timeParser_->UpdatePluginTimeRange(clockId_, endTs, newEndTs);
         if (newStartTs > newEndTs) {
-            TS_LOGE("paged memory startTs = %llu, endTs = %llu, newStartTs = %llu, newEndTs = %llu", startTs, endTs,
-                    newStartTs, newEndTs);
+            TS_LOGE("startTs = %" PRIu64 ", endTs = %" PRIu64 ", newStartTs = %" PRIu64 ", newEndTs = %" PRIu64 "",
+                    startTs, endTs, newStartTs, newEndTs);
             streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_EBPF_PAGED_MEMORY, STAT_EVENT_DATA_INVALID);
             return;
         }
diff --git a/trace_streamer/src/parser/hiperf_parser/BUILD.gn b/trace_streamer/src/parser/hiperf_parser/BUILD.gn
index 445869e40edd17325bed4704134a3ac7240b044d..bb93335f27ba72d178f786e2b23539c041831e1a 100644
--- a/trace_streamer/src/parser/hiperf_parser/BUILD.gn
+++ b/trace_streamer/src/parser/hiperf_parser/BUILD.gn
@@ -16,47 +16,35 @@ import("../../../build/ts.gni")
 ohos_source_set("hiperf_parser_src") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
+  }
   sources = [ "perf_data_parser.cpp" ]
   include_dirs = [
-    "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
     ".",
     "../../base",
     "../../cfg",
-    "${THIRD_PARTY}/hiperf/include/nonlinux",
-    "${THIRD_PARTY}/hiperf/include",
     "../../include",
     "../../",
     "../../filter",
     "../../trace_data",
     "..",
     "../../trace_streamer",
+    "${THIRD_PARTY}/bounds_checking_function/include",
+    "${PERF_DIR}/hiperf/include/nonlinux/linux",
+    "${PERF_DIR}/hiperf/include/nonlinux",
+    "${PERF_DIR}/hiperf/include",
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/protobuf/src",
     "${THIRD_PARTY}/perf_include",
     "${THIRD_PARTY}/perf_include/libbpf",
-    "//developtools/hiperf/include",
-    "//commonlibrary/c_utils/base/include",
+    "${COMMON_LIBRARY}/c_utils/base/include",
     "${THIRD_PARTY}/googletest/googletest/include",
   ]
   include_dirs += [ "${THIRD_PARTY}/libunwind/include" ]
-
-  cflags = [ "-D target_cpu_${target_cpu}" ]
-  if (!use_wasm && !is_win && !is_macx && !is_test) {
-    cflags += [ "-D HAVE_LIBUNWIND" ]
-  }
-  if (enable_ts_utest && !use_wasm) {
-    cflags += [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (is_mingw) {
+    include_dirs += [ "${THIRD_PARTY}/libbpf/include/uapi" ]
+    cflags = [ "-includeMingW64Fix.h" ]
   }
 }
 
@@ -64,7 +52,7 @@ group("hiperf_parser") {
   deps = [
     ":hiperf_parser_src",
     "${PERF_DIR}/hiperf:hiperf_platform_common",
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
   ]
 }
diff --git a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
index 1711e5e72eb54fcaa27209d1a1134ae00e00e636..7e56b3a478a0b171f46de5a57395165bb088a073 100644
--- a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
+++ b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.cpp
@@ -71,16 +71,19 @@ bool PerfDataParser::LoadPerfData()
     int32_t fd(base::OpenFile(tmpPerfData_, O_CREAT | O_RDWR, TS_PERMISSION_RW));
     if (!fd) {
         fprintf(stdout, "Failed to create file: %s", tmpPerfData_.c_str());
+        buffer_.reset();
         return false;
     }
     (void)ftruncate(fd, 0);
     if (bufferSize_ != (size_t)write(fd, buffer_.get(), bufferSize_)) {
         close(fd);
+        buffer_.reset();
         return false;
     }
+    close(fd);
     recordDataReader_ = PerfFileReader::Instance(tmpPerfData_);
     report_ = std::make_unique<Report>();
-    buffer_.release();
+    buffer_.reset();
     if (recordDataReader_ == nullptr) {
         return 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 4f845df55c69c490ccb1d73e9a72e9782cb8f548..e05fd81005f420d60b17bcbe5203e70c01139bd8 100644
--- a/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
+++ b/trace_streamer/src/parser/hiperf_parser/perf_data_parser.h
@@ -22,6 +22,9 @@
 #include "event_parser_base.h"
 #include "htrace_plugin_time_parser.h"
 #include "log.h"
+#if is_mingw
+#define unw_word_t uint64_t
+#endif
 #include "perf_events.h"
 #include "perf_file_format.h"
 #include "perf_file_reader.h"
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn b/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn
index 0aef8955a10a434ebb4c2ee5287c1b84df5f78ed..41df546731dd940f186d95d65c16f27a95d6fd65 100755
--- a/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/BUILD.gn
@@ -18,37 +18,21 @@ ohos_source_set("htrace_pbreader_parser_src") {
   sources = [
     "../parser_base.cpp",
     "htrace_clock_detail_parser.cpp",
-    "htrace_clock_detail_parser.h",
     "htrace_cpu_data_parser.cpp",
-    "htrace_cpu_data_parser.h",
     "htrace_cpu_parser/htrace_cpu_detail_parser.cpp",
-    "htrace_cpu_parser/htrace_cpu_detail_parser.h",
     "htrace_disk_io_parser.cpp",
-    "htrace_disk_io_parser.h",
     "htrace_event_parser/htrace_event_parser.cpp",
-    "htrace_event_parser/htrace_event_parser.h",
-    "htrace_file_header.h",
     "htrace_hidump_parser.cpp",
-    "htrace_hidump_parser.h",
     "htrace_hilog_parser.cpp",
-    "htrace_hilog_parser.h",
     "htrace_hisysevent_parser.cpp",
-    "htrace_hisysevent_parser.h",
     "htrace_js_cpu_profiler_parser.cpp",
-    "htrace_js_cpu_profiler_parser.h",
     "htrace_js_memory_parser.cpp",
-    "htrace_js_memory_parser.h",
     "htrace_mem_parser.cpp",
-    "htrace_mem_parser.h",
     "htrace_native_hook_parser.cpp",
-    "htrace_native_hook_parser.h",
     "htrace_network_parser.cpp",
-    "htrace_network_parser.h",
     "htrace_parser.cpp",
     "htrace_process_parser.cpp",
-    "htrace_process_parser.h",
     "htrace_symbols_detail_parser.cpp",
-    "htrace_symbols_detail_parser.h",
   ]
   include_dirs = [
     "../../proto_reader/include",
@@ -61,6 +45,7 @@ ohos_source_set("htrace_pbreader_parser_src") {
     "../../trace_data",
     "../../cfg",
     "../../trace_streamer",
+    "${THIRD_PARTY}/bounds_checking_function/include",
     "${THIRD_PARTY}/protobuf/src",
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/json/single_include/nlohmann",
@@ -71,10 +56,9 @@ ohos_source_set("htrace_pbreader_parser_src") {
   include_dirs += [
     "${THIRD_PARTY}/libunwind/include",
     "${THIRD_PARTY}/libunwind/src",
-    "${THIRD_PARTY}/hiperf/include",
-    "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
-    "${THIRD_PARTY}/hiperf/include/nonlinux",
-    "//developtools/hiperf/include",
+    "${PERF_DIR}/hiperf/include",
+    "${PERF_DIR}/hiperf/include/nonlinux/linux",
+    "${PERF_DIR}/hiperf/include/nonlinux",
     "${THIRD_PARTY}/musl",
     "${THIRD_PARTY}/googletest/googletest/include",
     "${THIRD_PARTY}/perf_include/musl",
@@ -86,21 +70,13 @@ ohos_source_set("htrace_pbreader_parser_src") {
     "../hiperf_parser/include",
   ]
 
-  cflags = [ "-D target_cpu_${target_cpu}" ]
-  if (!use_wasm && !is_win && !is_macx && !is_test) {
-    cflags += [ "-D HAVE_LIBUNWIND" ]
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
-  if (enable_ts_utest && !use_wasm) {
-    cflags += [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
+  if (is_mingw) {
+    cflags = [ "-includeMingW64Fix.h" ]
   }
+
   public_deps = []
   deps = [
     "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/services:ts_all_type_cpp_standard",
@@ -120,10 +96,19 @@ 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_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
   ]
-  if (!use_wasm && !is_win && !is_macx && !is_test) {
-    deps += [ "${THIRD_PARTY}/libunwind:libunwind" ]
+
+  if (!use_wasm && !is_win && !is_mingw && !is_macx && !is_test) {
+    if (!is_independent_compile) {
+      if (target_cpu == "arm64") {
+        deps += [ "//third_party/libunwind:unwind_source_arm64_opt" ]
+      } else {
+        deps += [ "//third_party/libunwind:unwind_source_${target_cpu}" ]
+      }
+    } else {
+      deps += [ "${THIRD_PARTY}/libunwind:libunwind" ]
+    }
   }
 }
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.cpp b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.cpp
index 5aef25d04b6bf3f702261e30aaefdb31792e2f21..e17571464f13889c695fb2f0ce4231fcf3dc0ab5 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.cpp
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.cpp
@@ -14,6 +14,7 @@
  */
 #include "htrace_event_parser.h"
 #include <string>
+#include <cinttypes>
 #include "app_start_filter.h"
 #include "binder_filter.h"
 #include "binder.pbreader.h"
@@ -164,7 +165,7 @@ void HtraceEventParser::ParseDataItem(HtraceDataSegment& tracePacket, BuiltinClo
                 lastOverwrite_ = msg.overwrite();
             }
             if (lastOverwrite_ != msg.overwrite()) {
-                TS_LOGW("lost events:%lu", msg.overwrite() - lastOverwrite_);
+                TS_LOGW("lost events:%" PRIu64 "", msg.overwrite() - lastOverwrite_);
                 lastOverwrite_ = msg.overwrite();
             }
             streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_OTHER, STAT_EVENT_DATA_LOST);
@@ -186,131 +187,130 @@ void HtraceEventParser::ParseDataItem(HtraceDataSegment& tracePacket, BuiltinClo
             ftraceEndTime_ = std::max(ftraceEndTime_, eventTimeStamp_);
             traceDataCache_->UpdateTraceTime(eventTimeStamp_);
             ProtoReader::BytesView commonField;
-            eventList_.push_back(
+            htraceEventList_.push_back(
                 std::make_unique<EventInfo>(eventTimeStamp_, eventCpu_, tracePacket.seg, i->ToBytes()));
             FilterAllEventsReader();
         }
     }
 }
-void HtraceEventParser::DealEvent(ProtoReader::FtraceEvent_Reader* event,
-                                  ProtoReader::FtraceEvent_CommonFileds_Reader* comonFields)
+void HtraceEventParser::DealEvent(const ProtoReader::FtraceEvent_Reader& event,
+                                  const ProtoReader::FtraceEvent_CommonFileds_Reader& comonFields)
 {
-    if (comonFields->pid() != INVALID_INT32) {
-        streamFilters_->processFilter_->UpdateOrCreateThreadWithPidAndName(comonFields->pid(), event->tgid(),
-                                                                           event->comm().ToStdString());
+    if (comonFields.pid() != INVALID_INT32) {
+        streamFilters_->processFilter_->UpdateOrCreateThreadWithPidAndName(comonFields.pid(), event.tgid(),
+                                                                           event.comm().ToStdString());
     }
-    if (event->has_sched_switch_format()) {
+    if (event.has_sched_switch_format()) {
         InvokeFunc(TRACE_EVENT_SCHED_SWITCH,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedSwitchFormatDataAreaNumber>());
-    } else if (event->has_wakeup_format()) {
-        InvokeFunc(TRACE_EVENT_SCHED_WAKEUP, event->at<ProtoReader::FtraceEvent_Reader::kWakeupFormatDataAreaNumber>());
-    } else if (event->has_binder_alloc_lru_end_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedSwitchFormatDataAreaNumber>());
+    } else if (event.has_wakeup_format()) {
+        InvokeFunc(TRACE_EVENT_SCHED_WAKEUP, event.at<ProtoReader::FtraceEvent_Reader::kWakeupFormatDataAreaNumber>());
+    } else if (event.has_binder_alloc_lru_end_format()) {
         InvokeFunc(TRACE_EVENT_SCHED_SWITCH,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderAllocLruEndFormatDataAreaNumber>());
-    } else if (event->has_task_rename_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderAllocLruEndFormatDataAreaNumber>());
+    } else if (event.has_task_rename_format()) {
         InvokeFunc(TRACE_EVENT_TASK_RENAME,
-                   event->at<ProtoReader::FtraceEvent_Reader::kTaskRenameFormatDataAreaNumber>());
-    } else if (event->has_sched_blocked_reason_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kTaskRenameFormatDataAreaNumber>());
+    } else if (event.has_sched_blocked_reason_format()) {
         InvokeFunc(TRACE_EVENT_SCHED_BLOCKED_REASON,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedBlockedReasonFormatDataAreaNumber>());
-    } else if (event->has_task_newtask_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedBlockedReasonFormatDataAreaNumber>());
+    } else if (event.has_task_newtask_format()) {
         InvokeFunc(TRACE_EVENT_TASK_NEWTASK,
-                   event->at<ProtoReader::FtraceEvent_Reader::kTaskNewtaskFormatDataAreaNumber>());
-    } else if (event->has_sched_wakeup_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kTaskNewtaskFormatDataAreaNumber>());
+    } else if (event.has_sched_wakeup_format()) {
         InvokeFunc(TRACE_EVENT_SCHED_WAKEUP,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedWakeupFormatDataAreaNumber>());
-    } else if (event->has_sched_wakeup_new_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedWakeupFormatDataAreaNumber>());
+    } else if (event.has_sched_wakeup_new_format()) {
         InvokeFunc(TRACE_EVENT_SCHED_WAKEUP,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedWakeupNewFormatDataAreaNumber>());
-    } else if (event->has_sched_process_exit_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedWakeupNewFormatDataAreaNumber>());
+    } else if (event.has_sched_process_exit_format()) {
         InvokeFunc(TRACE_EVENT_PROCESS_EXIT,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedProcessExitFormatDataAreaNumber>());
-    } else if (event->has_sched_process_free_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedProcessExitFormatDataAreaNumber>());
+    } else if (event.has_sched_process_free_format()) {
         InvokeFunc(TRACE_EVENT_PROCESS_FREE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedProcessFreeFormatDataAreaNumber>());
-    } else if (event->has_sched_waking_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedProcessFreeFormatDataAreaNumber>());
+    } else if (event.has_sched_waking_format()) {
         InvokeFunc(TRACE_EVENT_SCHED_WAKING,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSchedWakingFormatDataAreaNumber>());
-    } else if (event->has_cpu_idle_format()) {
-        InvokeFunc(TRACE_EVENT_CPU_IDLE, event->at<ProtoReader::FtraceEvent_Reader::kCpuIdleFormatDataAreaNumber>());
-    } else if (event->has_cpu_frequency_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSchedWakingFormatDataAreaNumber>());
+    } else if (event.has_cpu_idle_format()) {
+        InvokeFunc(TRACE_EVENT_CPU_IDLE, event.at<ProtoReader::FtraceEvent_Reader::kCpuIdleFormatDataAreaNumber>());
+    } else if (event.has_cpu_frequency_format()) {
         InvokeFunc(TRACE_EVENT_CPU_FREQUENCY,
-                   event->at<ProtoReader::FtraceEvent_Reader::kCpuFrequencyFormatDataAreaNumber>());
-    } else if (event->has_cpu_frequency_limits_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kCpuFrequencyFormatDataAreaNumber>());
+    } else if (event.has_cpu_frequency_limits_format()) {
         InvokeFunc(TRACE_EVENT_CPU_FREQUENCY_LIMITS,
-                   event->at<ProtoReader::FtraceEvent_Reader::kCpuFrequencyLimitsFormatDataAreaNumber>());
-    } else if (event->has_print_format()) {
-        InvokeFunc(TRACE_EVENT_PRINT, event->at<ProtoReader::FtraceEvent_Reader::kPrintFormatDataAreaNumber>());
-    } else if (event->has_suspend_resume_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kCpuFrequencyLimitsFormatDataAreaNumber>());
+    } else if (event.has_print_format()) {
+        InvokeFunc(TRACE_EVENT_PRINT, event.at<ProtoReader::FtraceEvent_Reader::kPrintFormatDataAreaNumber>());
+    } else if (event.has_suspend_resume_format()) {
         InvokeFunc(TRACE_EVENT_SUSPEND_RESUME,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSuspendResumeFormatDataAreaNumber>());
-    } else if (event->has_workqueue_execute_start_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSuspendResumeFormatDataAreaNumber>());
+    } else if (event.has_workqueue_execute_start_format()) {
         InvokeFunc(TRACE_EVENT_WORKQUEUE_EXECUTE_START,
-                   event->at<ProtoReader::FtraceEvent_Reader::kWorkqueueExecuteStartFormatDataAreaNumber>());
-    } else if (event->has_workqueue_execute_end_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kWorkqueueExecuteStartFormatDataAreaNumber>());
+    } else if (event.has_workqueue_execute_end_format()) {
         InvokeFunc(TRACE_EVENT_WORKQUEUE_EXECUTE_END,
-                   event->at<ProtoReader::FtraceEvent_Reader::kWorkqueueExecuteEndFormatDataAreaNumber>());
-    } else if (event->has_clock_disable_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kWorkqueueExecuteEndFormatDataAreaNumber>());
+    } else if (event.has_clock_disable_format()) {
         InvokeFunc(TRACE_EVENT_CLOCK_DISABLE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kClockDisableFormatDataAreaNumber>());
-    } else if (event->has_clock_enable_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kClockDisableFormatDataAreaNumber>());
+    } else if (event.has_clock_enable_format()) {
         InvokeFunc(TRACE_EVENT_CLOCK_ENABLE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kClockEnableFormatDataAreaNumber>());
-    } else if (event->has_clock_set_rate_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kClockEnableFormatDataAreaNumber>());
+    } else if (event.has_clock_set_rate_format()) {
         InvokeFunc(TRACE_EVENT_CLOCK_SET_RATE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kClockSetRateFormatDataAreaNumber>());
-    } else if (event->has_clk_disable_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kClockSetRateFormatDataAreaNumber>());
+    } else if (event.has_clk_disable_format()) {
         InvokeFunc(TRACE_EVENT_CLK_DISABLE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kClkDisableFormatDataAreaNumber>());
-    } else if (event->has_clk_enable_format()) {
-        InvokeFunc(TRACE_EVENT_CLK_ENABLE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kClkEnableFormatDataAreaNumber>());
-    } else if (event->has_clk_set_rate_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kClkDisableFormatDataAreaNumber>());
+    } else if (event.has_clk_enable_format()) {
+        InvokeFunc(TRACE_EVENT_CLK_ENABLE, event.at<ProtoReader::FtraceEvent_Reader::kClkEnableFormatDataAreaNumber>());
+    } else if (event.has_clk_set_rate_format()) {
         InvokeFunc(TRACE_EVENT_CLK_SET_RATE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kClkSetRateFormatDataAreaNumber>());
-    } else if (event->has_sys_enter_format()) {
-        InvokeFunc(TRACE_EVENT_SYS_ENTRY, event->at<ProtoReader::FtraceEvent_Reader::kSysEnterFormatDataAreaNumber>());
-    } else if (event->has_sys_exit_format()) {
-        InvokeFunc(TRACE_EVENT_SYS_EXIT, event->at<ProtoReader::FtraceEvent_Reader::kSysExitFormatDataAreaNumber>());
-    } else if (event->has_binder_transaction_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kClkSetRateFormatDataAreaNumber>());
+    } else if (event.has_sys_enter_format()) {
+        InvokeFunc(TRACE_EVENT_SYS_ENTRY, event.at<ProtoReader::FtraceEvent_Reader::kSysEnterFormatDataAreaNumber>());
+    } else if (event.has_sys_exit_format()) {
+        InvokeFunc(TRACE_EVENT_SYS_EXIT, event.at<ProtoReader::FtraceEvent_Reader::kSysExitFormatDataAreaNumber>());
+    } else if (event.has_binder_transaction_format()) {
         InvokeFunc(TRACE_EVENT_BINDER_TRANSACTION,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderTransactionFormatDataAreaNumber>());
-    } else if (event->has_binder_transaction_received_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderTransactionFormatDataAreaNumber>());
+    } else if (event.has_binder_transaction_received_format()) {
         InvokeFunc(TRACE_EVENT_BINDER_TRANSACTION_RECEIVED,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderTransactionReceivedFormatDataAreaNumber>());
-    } else if (event->has_binder_transaction_alloc_buf_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderTransactionReceivedFormatDataAreaNumber>());
+    } else if (event.has_binder_transaction_alloc_buf_format()) {
         InvokeFunc(TRACE_EVENT_BINDER_TRANSACTION_ALLOC_BUF,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderTransactionAllocBufFormatDataAreaNumber>());
-    } else if (event->has_binder_lock_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderTransactionAllocBufFormatDataAreaNumber>());
+    } else if (event.has_binder_lock_format()) {
         InvokeFunc(TRACE_EVENT_BINDER_TRANSACTION_LOCK,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderLockFormatDataAreaNumber>());
-    } else if (event->has_binder_unlock_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderLockFormatDataAreaNumber>());
+    } else if (event.has_binder_unlock_format()) {
         InvokeFunc(TRACE_EVENT_BINDER_TRANSACTION_UNLOCK,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderUnlockFormatDataAreaNumber>());
-    } else if (event->has_binder_locked_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderUnlockFormatDataAreaNumber>());
+    } else if (event.has_binder_locked_format()) {
         InvokeFunc(TRACE_EVENT_BINDER_TRANSACTION_LOCKED,
-                   event->at<ProtoReader::FtraceEvent_Reader::kBinderLockedFormatDataAreaNumber>());
-    } else if (event->has_irq_handler_entry_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kBinderLockedFormatDataAreaNumber>());
+    } else if (event.has_irq_handler_entry_format()) {
         InvokeFunc(TRACE_EVENT_IRQ_HANDLER_ENTRY,
-                   event->at<ProtoReader::FtraceEvent_Reader::kIrqHandlerEntryFormatDataAreaNumber>());
-    } else if (event->has_irq_handler_exit_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kIrqHandlerEntryFormatDataAreaNumber>());
+    } else if (event.has_irq_handler_exit_format()) {
         InvokeFunc(TRACE_EVENT_IRQ_HANDLER_EXIT,
-                   event->at<ProtoReader::FtraceEvent_Reader::kIrqHandlerExitFormatDataAreaNumber>());
-    } else if (event->has_softirq_entry_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kIrqHandlerExitFormatDataAreaNumber>());
+    } else if (event.has_softirq_entry_format()) {
         InvokeFunc(TRACE_EVENT_SOFTIRQ_ENTRY,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSoftirqEntryFormatDataAreaNumber>());
-    } else if (event->has_softirq_exit_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSoftirqEntryFormatDataAreaNumber>());
+    } else if (event.has_softirq_exit_format()) {
         InvokeFunc(TRACE_EVENT_SOFTIRQ_EXIT,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSoftirqExitFormatDataAreaNumber>());
-    } else if (event->has_oom_score_adj_update_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSoftirqExitFormatDataAreaNumber>());
+    } else if (event.has_oom_score_adj_update_format()) {
         InvokeFunc(TRACE_EVENT_OOM_SCORE_ADJ_UPDATE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kOomScoreAdjUpdateFormatDataAreaNumber>());
-    } else if (event->has_signal_generate_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kOomScoreAdjUpdateFormatDataAreaNumber>());
+    } else if (event.has_signal_generate_format()) {
         InvokeFunc(TRACE_EVENT_SIGNAL_GENERATE,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSignalGenerateFormatDataAreaNumber>());
-    } else if (event->has_signal_deliver_format()) {
+                   event.at<ProtoReader::FtraceEvent_Reader::kSignalGenerateFormatDataAreaNumber>());
+    } else if (event.has_signal_deliver_format()) {
         InvokeFunc(TRACE_EVENT_SIGNAL_DELIVER,
-                   event->at<ProtoReader::FtraceEvent_Reader::kSignalDeliverFormatDataAreaNumber>());
+                   event.at<ProtoReader::FtraceEvent_Reader::kSignalDeliverFormatDataAreaNumber>());
     } else {
         streamFilters_->statFilter_->IncreaseStat(TRACE_EVENT_OTHER, STAT_EVENT_NOTSUPPORTED);
     }
@@ -787,20 +787,20 @@ void HtraceEventParser::FilterAllEventsReader()
     size_t maxBuffSize = 1000 * 1000;
     size_t maxQueue = 2;
 
-    if (eventList_.size() < maxBuffSize * maxQueue) {
+    if (htraceEventList_.size() < maxBuffSize * maxQueue) {
         return;
     }
     auto cmp = [](const std::unique_ptr<EventInfo>& a, const std::unique_ptr<EventInfo>& b) {
         return a->eventTimeStamp_ < b->eventTimeStamp_;
     };
 #ifdef IS_WASM
-    std::sort(eventList_.begin(), eventList_.end(), cmp);
+    std::sort(htraceEventList_.begin(), htraceEventList_.end(), cmp);
 #else
-    std::stable_sort(eventList_.begin(), eventList_.end(), cmp);
+    std::stable_sort(htraceEventList_.begin(), htraceEventList_.end(), cmp);
 #endif
 
-    auto endOfList = eventList_.begin() + maxBuffSize;
-    for (auto itor = eventList_.begin(); itor != endOfList; ++itor) {
+    auto endOfList = htraceEventList_.begin() + maxBuffSize;
+    for (auto itor = htraceEventList_.begin(); itor != endOfList; ++itor) {
         EventInfo* event = itor->get();
         ProtoReader::FtraceEvent_Reader ftraceEvent(event->ftraceEventBytes_);
         eventTimeStamp_ = event->eventTimeStamp_;
@@ -813,23 +813,9 @@ void HtraceEventParser::FilterAllEventsReader()
             streamFilters_->processFilter_->GetOrCreateThreadWithPid(eventPid_, eventPid_);
         }
         comm_ = ftraceEvent.comm().ToStdString();
-
-        ProtoReader::FtraceEvent_CommonFileds_Reader comonFields(ftraceEvent.common_fields().data_,
-                                                                 ftraceEvent.common_fields().size_);
-        if (comonFields.pid() != INVALID_INT32) {
-            eventTid_ = comonFields.pid();
-            if (!tids_.count(eventTid_)) {
-                tids_.insert(eventTid_);
-            }
-            streamFilters_->processFilter_->UpdateOrCreateThread(eventTimeStamp_, eventTid_);
-        }
-        if (eventTid_ != INVALID_INT32 && eventPid_ != INVALID_INT32) {
-            streamFilters_->processFilter_->GetOrCreateThreadWithPid(eventTid_, eventPid_);
-        }
-        DealEvent(&ftraceEvent, &comonFields);
-        itor->reset();
+        ProtoReaderDealEvent(ftraceEvent, itor);
     }
-    eventList_.erase(eventList_.begin(), endOfList);
+    htraceEventList_.erase(htraceEventList_.begin(), endOfList);
 }
 void HtraceEventParser::FilterAllEvents()
 {
@@ -837,41 +823,27 @@ void HtraceEventParser::FilterAllEvents()
         return a->eventTimeStamp_ < b->eventTimeStamp_;
     };
 #ifdef IS_WASM
-    std::sort(eventList_.begin(), eventList_.end(), cmp);
+    std::sort(htraceEventList_.begin(), htraceEventList_.end(), cmp);
 #else
-    std::stable_sort(eventList_.begin(), eventList_.end(), cmp);
+    std::stable_sort(htraceEventList_.begin(), htraceEventList_.end(), cmp);
 #endif
     size_t maxBuffSize = 1000 * 1000;
 
-    while (eventList_.size()) {
-        int32_t size = std::min(maxBuffSize, eventList_.size());
-        auto endOfList = eventList_.begin() + size;
-        for (auto itor = eventList_.begin(); itor != endOfList; itor++) {
+    while (htraceEventList_.size()) {
+        int32_t size = std::min(maxBuffSize, htraceEventList_.size());
+        auto endOfList = htraceEventList_.begin() + size;
+        for (auto itor = htraceEventList_.begin(); itor != endOfList; itor++) {
             EventInfo* event = itor->get();
             ProtoReader::FtraceEvent_Reader ftraceEvent(event->ftraceEventBytes_);
             eventTimeStamp_ = event->eventTimeStamp_;
             eventCpu_ = event->eventCpu_;
             eventPid_ = ftraceEvent.tgid();
             comm_ = ftraceEvent.comm().ToStdString();
-
-            ProtoReader::FtraceEvent_CommonFileds_Reader comonFields(ftraceEvent.common_fields().data_,
-                                                                     ftraceEvent.common_fields().size_);
-            if (comonFields.pid() != INVALID_INT32) {
-                eventTid_ = comonFields.pid();
-                if (!tids_.count(eventTid_)) {
-                    tids_.insert(eventTid_);
-                }
-                streamFilters_->processFilter_->UpdateOrCreateThread(eventTimeStamp_, eventTid_);
-            }
-            if (eventTid_ != INVALID_INT32 && eventPid_ != INVALID_INT32) {
-                streamFilters_->processFilter_->GetOrCreateThreadWithPid(eventTid_, eventPid_);
-            }
-            DealEvent(&ftraceEvent, &comonFields);
-            itor->reset();
+            ProtoReaderDealEvent(ftraceEvent, itor);
         }
-        eventList_.erase(eventList_.begin(), endOfList);
+        htraceEventList_.erase(htraceEventList_.begin(), endOfList);
     }
-    eventList_.clear();
+    htraceEventList_.clear();
     streamFilters_->cpuFilter_->Finish();
     traceDataCache_->dataDict_.Finish();
     traceDataCache_->UpdataZeroThreadInfo();
@@ -879,23 +851,30 @@ void HtraceEventParser::FilterAllEvents()
         streamFilters_->appStartupFilter_->FilterAllAPPStartupData();
     }
 }
+
+void HtraceEventParser::ProtoReaderDealEvent(const ProtoReader::FtraceEvent_Reader& ftraceEvent,
+                                             const std::vector<std::unique_ptr<EventInfo>>::iterator& itor)
+{
+    ProtoReader::FtraceEvent_CommonFileds_Reader comonFields(ftraceEvent.common_fields().data_,
+                                                             ftraceEvent.common_fields().size_);
+    if (comonFields.pid() != INVALID_INT32) {
+        eventTid_ = comonFields.pid();
+        if (!tids_.count(eventTid_)) {
+            tids_.insert(eventTid_);
+        }
+        streamFilters_->processFilter_->UpdateOrCreateThread(eventTimeStamp_, eventTid_);
+    }
+    if (eventTid_ != INVALID_INT32 && eventPid_ != INVALID_INT32) {
+        streamFilters_->processFilter_->GetOrCreateThreadWithPid(eventTid_, eventPid_);
+    }
+    DealEvent(ftraceEvent, comonFields);
+    itor->reset();
+}
+
 void HtraceEventParser::Clear()
 {
-    streamFilters_->binderFilter_->Clear();
-    streamFilters_->sliceFilter_->Clear();
-    streamFilters_->cpuFilter_->Clear();
-    streamFilters_->irqFilter_->Clear();
-    streamFilters_->cpuMeasureFilter_->Clear();
-    streamFilters_->threadMeasureFilter_->Clear();
-    streamFilters_->threadFilter_->Clear();
-    streamFilters_->processMeasureFilter_->Clear();
-    streamFilters_->processFilterFilter_->Clear();
+    const_cast<TraceStreamerFilters*>(streamFilters_)->FilterClear();
     streamFilters_->symbolsFilter_->Clear();
-    streamFilters_->clockEnableFilter_->Clear();
-    streamFilters_->clockDisableFilter_->Clear();
-    streamFilters_->clkRateFilter_->Clear();
-    streamFilters_->clkDisableFilter_->Clear();
-    streamFilters_->binderFilter_->Clear();
     streamFilters_->sysEventMemMeasureFilter_->Clear();
     streamFilters_->sysEventVMemMeasureFilter_->Clear();
     printEventParser_.Finish();
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.h b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.h
index abb06fb48bc8ad18a365fbbf7c4562432bff62d8..bb3a006b11952e3b3121168675f27e37549acc35 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.h
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_event_parser/htrace_event_parser.h
@@ -46,7 +46,8 @@ public:
     void Clear();
 
 private:
-    void DealEvent(ProtoReader::FtraceEvent_Reader* event, ProtoReader::FtraceEvent_CommonFileds_Reader* comonFields);
+    void DealEvent(const ProtoReader::FtraceEvent_Reader& event,
+                   const ProtoReader::FtraceEvent_CommonFileds_Reader& comonFields);
     bool BinderTractionEvent(const ProtoReader::DataArea& event) const;
     bool BinderTractionReceivedEvent(const ProtoReader::DataArea& event) const;
     bool BinderTractionAllocBufEvent(const ProtoReader::DataArea& event) const;
@@ -121,8 +122,9 @@ private:
     uint64_t ftraceEndTime_ = 0;
     uint64_t ftraceOriginStartTime_ = std::numeric_limits<uint64_t>::max();
     uint64_t ftraceOriginEndTime_ = 0;
-    std::vector<std::unique_ptr<EventInfo>> eventList_ = {};
-    // std::vector<std::unique_ptr<ProtoReader::FtraceEvent_Reader>> eventList_ = {};
+    void ProtoReaderDealEvent(const ProtoReader::FtraceEvent_Reader& ftraceEvent,
+                              const std::vector<std::unique_ptr<EventInfo>>::iterator& itor);
+    std::vector<std::unique_ptr<EventInfo>> htraceEventList_ = {};
     const DataIndex signalGenerateId_ = traceDataCache_->GetDataIndex("signal_generate");
     const DataIndex signalDeliverId_ = traceDataCache_->GetDataIndex("signal_deliver");
     const DataIndex schedWakeupName_ = traceDataCache_->GetDataIndex("sched_wakeup");
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.cpp b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.cpp
index 506c49a9078ca834c9a2e401dcd4174753eff5b8..96ee1a2829144fd0988a2ca066911f88dedc21a5 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.cpp
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.cpp
@@ -18,7 +18,6 @@
 #include "htrace_hisysevent_parser.h"
 #include "htrace_parser.h"
 #include "process_filter.h"
-#include "stat_filter.h"
 namespace SysTuning {
 namespace TraceStreamer {
 HtraceHisyseventParser::HtraceHisyseventParser(TraceDataCache* dataCache, const TraceStreamerFilters* ctx)
@@ -33,47 +32,6 @@ HtraceHisyseventParser::~HtraceHisyseventParser()
             static_cast<unsigned long long>(MaxTs()));
 }
 
-int32_t HtraceHisyseventParser::JGetData(json& jMessage,
-                                         JsonData& jData,
-                                         size_t& maxArraySize,
-                                         std::vector<size_t>& noArrayIndex,
-                                         std::vector<size_t>& arrayIndex)
-{
-    streamFilters_->statFilter_->IncreaseStat(TRACE_HISYSEVENT, STAT_EVENT_RECEIVED);
-    for (auto i = jMessage.begin(); i != jMessage.end(); i++) {
-        if (i.key() == "name_") {
-            if (find(eventsAccordingAppNames.begin(), eventsAccordingAppNames.end(), i.value()) ==
-                eventsAccordingAppNames.end()) {
-                streamFilters_->statFilter_->IncreaseStat(TRACE_HISYSEVENT, STAT_EVENT_NOTMATCH);
-                TS_LOGW("event source:%s not supported for hisysevent", std::string(i.value()).c_str());
-                return -1;
-            }
-            jData.eventSource = i.value();
-            continue;
-        }
-        if (i.key() == "time_") {
-            jData.timeStamp = i.value();
-            continue;
-        }
-        if (i.key() == "tag_" && i.value() != "PowerStats") {
-            streamFilters_->statFilter_->IncreaseStat(TRACE_HISYSEVENT, STAT_EVENT_DATA_INVALID);
-            return -1;
-        }
-        if (i.key() == "APPNAME") {
-            jData.appName.assign(i.value().begin(), i.value().end());
-        }
-        if (i.value().is_array()) {
-            maxArraySize = std::max(maxArraySize, i.value().size());
-            arrayIndex.push_back(jData.key.size());
-        } else {
-            noArrayIndex.push_back(jData.key.size());
-        }
-        jData.key.push_back(i.key());
-        jData.value.push_back(i.value());
-    }
-    return 0;
-}
-
 void HtraceHisyseventParser::NoArrayDataParse(JsonData jData,
                                               std::vector<size_t> noArrayIndex,
                                               DataIndex eventSourceIndex,
@@ -84,16 +42,7 @@ void HtraceHisyseventParser::NoArrayDataParse(JsonData jData,
         auto key = jData.key[*itor];
         streamFilters_->hiSysEventMeasureFilter_->GetOrCreateFilterId(eventSourceIndex);
         DataIndex keyIndex = traceDataCache_->GetDataIndex(key);
-        if (value.is_string()) {
-            std::string strValue = value;
-            DataIndex valueIndex = traceDataCache_->GetDataIndex(strValue);
-            streamFilters_->hiSysEventMeasureFilter_->AppendNewValue(serial, jData.timeStamp, eventSourceIndex,
-                                                                     keyIndex, 1, 0, valueIndex);
-        } else {
-            double valueIndex = value;
-            streamFilters_->hiSysEventMeasureFilter_->AppendNewValue(serial, jData.timeStamp, eventSourceIndex,
-                                                                     keyIndex, 0, valueIndex, 0);
-        }
+        AppendStringValue(value, serial, eventSourceIndex, keyIndex, jData.timeStamp);
     }
 }
 void HtraceHisyseventParser::ArrayDataParse(JsonData jData,
@@ -121,6 +70,23 @@ void HtraceHisyseventParser::ArrayDataParse(JsonData jData,
         }
     }
 }
+void HtraceHisyseventParser::AppendStringValue(nlohmann::json& value,
+                                               uint64_t serial,
+                                               DataIndex eventSourceIndex,
+                                               DataIndex keyIndex,
+                                               uint64_t timeStamp)
+{
+    if (value.is_string()) {
+        std::string strValue = value;
+        DataIndex valueIndex = traceDataCache_->GetDataIndex(strValue);
+        streamFilters_->hiSysEventMeasureFilter_->AppendNewValue(serial, timeStamp, eventSourceIndex, keyIndex, 1, 0,
+                                                                 valueIndex);
+    } else {
+        double valueIndex = value;
+        streamFilters_->hiSysEventMeasureFilter_->AppendNewValue(serial, timeStamp, eventSourceIndex, keyIndex, 0,
+                                                                 valueIndex, 0);
+    }
+}
 void HtraceHisyseventParser::CommonDataParser(JsonData jData, DataIndex eventSourceIndex, uint64_t serial)
 {
     for (int32_t j = 0; j < jData.key.size(); j++) {
@@ -128,16 +94,7 @@ void HtraceHisyseventParser::CommonDataParser(JsonData jData, DataIndex eventSou
         auto value = jData.value[j];
         DataIndex keyIndex = traceDataCache_->GetDataIndex(key);
         streamFilters_->hiSysEventMeasureFilter_->GetOrCreateFilterId(eventSourceIndex);
-        if (value.is_string()) {
-            std::string strValue = value;
-            DataIndex valueIndex = traceDataCache_->GetDataIndex(strValue);
-            streamFilters_->hiSysEventMeasureFilter_->AppendNewValue(serial, jData.timeStamp, eventSourceIndex,
-                                                                     keyIndex, 1, 0, valueIndex);
-        } else {
-            double valueIndex = value;
-            streamFilters_->hiSysEventMeasureFilter_->AppendNewValue(serial, jData.timeStamp, eventSourceIndex,
-                                                                     keyIndex, 0, valueIndex, 0);
-        }
+        AppendStringValue(value, serial, eventSourceIndex, keyIndex, jData.timeStamp);
     }
 }
 void HtraceHisyseventParser::Finish()
@@ -179,7 +136,8 @@ void HtraceHisyseventParser::Parse(ProtoReader::HisyseventInfo_Reader* tracePack
         JsonData jData;
         std::vector<size_t> noArrayIndex = {};
         std::vector<size_t> arrayIndex = {};
-        if (JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex) < 0) {
+        if (!streamFilters_->hiSysEventMeasureFilter_->JGetData(jMessage, jData, maxArraySize, noArrayIndex,
+                                                                arrayIndex)) {
             continue;
         }
         uint64_t serial = hisyseventLine.id();
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.h b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.h
index b74dc864bff66fe80e567c1e51fa5ebf1384d2d3..a42874dd0ac4955bfd77c52ecea2cbddf649a662 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.h
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_hisysevent_parser.h
@@ -19,10 +19,10 @@
 
 #include "clock_filter_ex.h"
 #include "event_parser_base.h"
+#include "hi_sysevent_measure_filter.h"
 #include "hisysevent_plugin_config.pbreader.h"
 #include "hisysevent_plugin_result.pbreader.h"
 #include "htrace_plugin_time_parser.h"
-#include "json.hpp"
 #include "trace_data/trace_data_cache.h"
 #include "trace_streamer_filters.h"
 #include "ts_common.h"
@@ -37,17 +37,6 @@ public:
     void Parse(ProtoReader::HisyseventInfo_Reader* tracePacket, uint64_t ts);
     void Parse(ProtoReader::HisyseventConfig_Reader* tracePacket, uint64_t ts);
 
-private:
-    using json = nlohmann::json;
-    typedef struct {
-        std::string eventSource;
-        uint64_t timeStamp;
-        std::vector<std::string> appName;
-        std::vector<std::string> appVersions;
-        std::vector<std::string> key;
-        std::vector<json> value;
-    } JsonData;
-
 private:
     void NoArrayDataParse(JsonData jData,
                           std::vector<size_t> noArrayIndex,
@@ -59,47 +48,11 @@ private:
                         size_t maxArraySize,
                         uint64_t serial);
     void CommonDataParser(JsonData jData, DataIndex eventSourceIndex, uint64_t serial);
-    int32_t JGetData(json& jMessage,
-                     JsonData& jData,
-                     size_t& maxArraySize,
-                     std::vector<size_t>& noArrayIndex,
-                     std::vector<size_t>& arrayIndex);
-
-    std::vector<std::string> eventsAccordingAppNames = {"POWER_IDE_BATTERY",
-                                                        "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",
-                                                        "BRIGHTNESS_NIT",
-                                                        "SIGNAL_LEVEL",
-                                                        "WIFI_EVENT_RECEIVED",
-                                                        "AUDIO_STREAM_CHANGE",
-                                                        "AUDIO_VOLUME_CHANGE",
-                                                        "WIFI_STATE",
-                                                        "BLUETOOTH_BR_SWITCH_STATE",
-                                                        "LOCATION_SWITCH_STATE",
-                                                        "ENABLE_SENSOR",
-                                                        "DISABLE_SENSOR",
-                                                        "WORK_REMOVE",
-                                                        "WORK_START",
-                                                        "WORK_STOP",
-                                                        "WORK_ADD",
-                                                        "POWER_RUNNINGLOCK",
-                                                        "GNSS_STATE",
-                                                        "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"};
+    void AppendStringValue(nlohmann::json& value,
+                           uint64_t serial,
+                           DataIndex eventSourceIndex,
+                           DataIndex keyIndex,
+                           uint64_t timeStamp);
     const uint64_t MSEC_TO_NS = 1000 * 1000;
     std::vector<uint64_t> hisyseventTS_;
     bool isDeviceState = true;
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 c2c82fb04df04e71b51ccc9df70f4d816f581df2..dca1124dcd4de7ff4034afc6e455f8fd3952e8c0 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.cpp
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.cpp
@@ -540,33 +540,33 @@ void HtraceParser::ParseJSMemoryConfig(HtraceDataSegment& dataSeg)
 int32_t HtraceParser::GetNextSegment()
 {
     int32_t head;
-    dataSegMux_.lock();
+    htraceDataSegMux_.lock();
     head = parseHead_;
-    HtraceDataSegment& seg = dataSegArray_[head];
-    if (seg.status.load() != TS_PARSE_STATUS_SEPRATED) {
+    HtraceDataSegment& htraceDataSegmentSeg = dataSegArray_[head];
+    if (htraceDataSegmentSeg.status.load() != TS_PARSE_STATUS_SEPRATED) {
         if (toExit_) {
             parserThreadCount_--;
             TS_LOGI("exiting parser, parserThread Count:%d\n", parserThreadCount_);
             TS_LOGD("seprateHead_x:\t%d, parseHead_:\t%d, filterHead_:\t%d status:%d\n", rawDataHead_, parseHead_,
-                    filterHead_, seg.status.load());
-            dataSegMux_.unlock();
+                    filterHead_, htraceDataSegmentSeg.status.load());
+            htraceDataSegMux_.unlock();
             if (!parserThreadCount_ && !filterThreadStarted_) {
                 exited_ = true;
             }
             return ERROR_CODE_EXIT;
         }
-        if (seg.status.load() == TS_PARSE_STATUS_PARSING) {
-            dataSegMux_.unlock();
+        if (htraceDataSegmentSeg.status.load() == TS_PARSE_STATUS_PARSING) {
+            htraceDataSegMux_.unlock();
             usleep(sleepDur_);
             return ERROR_CODE_NODATA;
         }
-        dataSegMux_.unlock();
+        htraceDataSegMux_.unlock();
         usleep(sleepDur_);
         return ERROR_CODE_NODATA;
     }
     parseHead_ = (parseHead_ + 1) % MAX_SEG_ARRAY_SIZE;
-    seg.status = TS_PARSE_STATUS_PARSING;
-    dataSegMux_.unlock();
+    htraceDataSegmentSeg.status = TS_PARSE_STATUS_PARSING;
+    htraceDataSegMux_.unlock();
     return head;
 }
 bool HtraceParser::ParseDataRecursively(std::deque<uint8_t>::iterator& packagesBegin, size_t& currentLength)
@@ -695,7 +695,7 @@ bool HtraceParser::InitProfilerTraceFileHeader()
     }
     auto ret = memcpy_s(&profilerTraceFileHeader_, sizeof(profilerTraceFileHeader_), buffer, PACKET_HEADER_LENGTH);
     if (ret == -1 || profilerTraceFileHeader_.data.magic != ProfilerTraceFileHeader::HEADER_MAGIC) {
-        TS_LOGE("Get profiler trace file header failed! ret = %d, magic = %llx", ret,
+        TS_LOGE("Get profiler trace file header failed! ret = %d, magic = %" PRIx64 "", ret,
                 profilerTraceFileHeader_.data.magic);
         return false;
     }
@@ -703,7 +703,7 @@ bool HtraceParser::InitProfilerTraceFileHeader()
         TS_LOGE("Profiler Trace data is truncated!!!");
         return false;
     }
-    TS_LOGI("magic = %llx, length = %" PRIu64 ", dataType = %x, boottime = %" PRIu64 "",
+    TS_LOGI("magic = %" PRIx64 ", length = %" PRIu64 ", dataType = %x, boottime = %" PRIu64 "",
             profilerTraceFileHeader_.data.magic, profilerTraceFileHeader_.data.length,
             profilerTraceFileHeader_.data.dataType, profilerTraceFileHeader_.data.boottime);
 #if IS_WASM
diff --git a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.h b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.h
index cc70418215d2110e8bd6747ac9112d18a6d7827a..d1f14262ec762adbd28e380b4b13b0aecdfd0179 100644
--- a/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.h
+++ b/trace_streamer/src/parser/htrace_pbreader_parser/htrace_parser.h
@@ -92,7 +92,7 @@ private:
     void ParseThread();
     int32_t GetNextSegment();
     void FilterThread();
-    enum ErrorCode { ERROR_CODE_EXIT = -2, ERROR_CODE_NODATA = -1 };
+
     bool InitProfilerTraceFileHeader();
     ProfilerTraceFileHeader profilerTraceFileHeader_;
     uint64_t htraceCurentLength_ = 0;
@@ -119,7 +119,7 @@ private:
     std::unique_ptr<EbpfDataParser> ebpfDataParser_;
     std::atomic<bool> filterThreadStarted_{false};
     const int32_t MAX_SEG_ARRAY_SIZE = 10000;
-    std::shared_ptr<HtraceDataSegment[]> dataSegArray_;
+    std::unique_ptr<HtraceDataSegment[]> dataSegArray_;
     int32_t rawDataHead_ = 0;
     bool toExit_ = false;
     bool exited_ = false;
@@ -130,7 +130,7 @@ private:
     bool parseThreadStarted_ = false;
     const int32_t maxThread_ = 4; // 4 is the best on ubuntu 113MB/s, max 138MB/s, 6 is best on mac m1 21MB/s,
     int32_t parserThreadCount_ = 0;
-    std::mutex dataSegMux_ = {};
+    std::mutex htraceDataSegMux_ = {};
     bool supportThread_ = false;
     ClockId dataSourceTypeTraceClockid_ = TS_CLOCK_UNKNOW;
     ClockId dataSourceTypeMemClockid_ = TS_CLOCK_UNKNOW;
diff --git a/trace_streamer/src/proto_reader/BUILD.gn b/trace_streamer/src/proto_reader/BUILD.gn
index 6306c9472ee761de2a1195a420b7c4d36ccdf787..1be0c95facc184ec3605a0fad3eb799c5e4381a2 100755
--- a/trace_streamer/src/proto_reader/BUILD.gn
+++ b/trace_streamer/src/proto_reader/BUILD.gn
@@ -16,12 +16,15 @@ import("../../build/ts.gni")
 ohos_source_set("proto_reader") {
   subsystem_name = "${OHOS_PROFILER_SUBSYS_NAME}"
   part_name = "${OHOS_PROFILER_PART_NAME}"
-  public_configs = [ "../../gn:default_config" ]
   public_deps = []
   include_dirs = [ "include" ]
   sources = [ "proto_reader.cpp" ]
   include_dirs += [
     "../include",
     "../base",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
+  }
 }
diff --git a/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn b/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn
index b88c8db0ac4b20ae01224cfd5ee8b2a165131e75..763e5b0eb0ff61309972ec567aaa86627dad9dfd 100755
--- a/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn
+++ b/trace_streamer/src/proto_reader/protoc_plugin/BUILD.gn
@@ -18,11 +18,12 @@ ohos_executable("protoreader_plugin") {
   sources = [ "proto_reader_plugin.cpp" ]
   deps = [
     "${SRC}/base:string_help",
-    "${THIRD_PARTY}/protobuf:protobuf(${host_toolchain})",
+    "${THIRD_PARTY}/protobuf:protobuf_static(${host_toolchain})",
     "${THIRD_PARTY}/protobuf:protoc_lib(${host_toolchain})",
   ]
   include_dirs = [
     "${SRC}/base",
     "${THIRD_PARTY}/protobuf/src",
+    "//third_party/bounds_checking_function/include",
   ]
 }
diff --git a/trace_streamer/src/protos/services/BUILD.gn b/trace_streamer/src/protos/services/BUILD.gn
index 35875921a040304a8e819775e2ec392417d16193..370fe34a0e206c20bf653f00defee53c5c31fcc2 100755
--- a/trace_streamer/src/protos/services/BUILD.gn
+++ b/trace_streamer/src/protos/services/BUILD.gn
@@ -69,8 +69,8 @@ action("ts_all_type_gen") {
 ohos_source_set("ts_all_type_cpp_standard") {
   deps = [ ":ts_all_type_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":public_configs" ]
diff --git a/trace_streamer/src/protos/types/plugins/agent_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/agent_data/BUILD.gn
index bcdc5d195e8cc11072d8d6eb43dcaff6a32d2376..4c58bab9d2d7e04246d1783181c2783e0c1e7adf 100755
--- a/trace_streamer/src/protos/types/plugins/agent_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/agent_data/BUILD.gn
@@ -76,8 +76,8 @@ ohos_source_set("ts_agent_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_agent_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":agent_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/bytrace_plugin/BUILD.gn b/trace_streamer/src/protos/types/plugins/bytrace_plugin/BUILD.gn
index ba8a69169db8b4edcdfe19e798623e0305668d80..c075dc6dc3b995325ca492b3e845c9655a28b359 100755
--- a/trace_streamer/src/protos/types/plugins/bytrace_plugin/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/bytrace_plugin/BUILD.gn
@@ -63,8 +63,8 @@ ohos_source_set("ts_bytrace_plugin_protos_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_bytrace_plugin_protos_protoc" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":bytrace_plugin_protos_config" ]
@@ -76,8 +76,8 @@ ohos_source_set("ts_bytrace_plugin_protos_cpp_standard") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_bytrace_plugin_protos_protoc" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":bytrace_plugin_protos_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/cpu_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/cpu_data/BUILD.gn
index b25017e4c47f5bb703c5f48b97d1fc73459dd9be..25f6ed2f4fd19a7cc4c990009edbc82a21681140 100755
--- a/trace_streamer/src/protos/types/plugins/cpu_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/cpu_data/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_cpu_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_cpu_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":cpu_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/diskio_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/diskio_data/BUILD.gn
index 3e10a2ded2cebc56492465f82dcfd00c0708af12..437b7d688919052673e3acfc14ba8784323be8fa 100755
--- a/trace_streamer/src/protos/types/plugins/diskio_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/diskio_data/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_diskio_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_diskio_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":diskio_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/ftrace_data/default/BUILD.gn b/trace_streamer/src/protos/types/plugins/ftrace_data/default/BUILD.gn
index 8979ba664ad5fc95fd31cd7e7f01c9653658a48e..030c00157b4695677948183316ca3c6b44d1d393 100755
--- a/trace_streamer/src/protos/types/plugins/ftrace_data/default/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/ftrace_data/default/BUILD.gn
@@ -71,8 +71,8 @@ ohos_source_set("ts_ftrace_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_all_proto_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":public_configs" ]
diff --git a/trace_streamer/src/protos/types/plugins/hidump_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/hidump_data/BUILD.gn
index 36bb4f6c6de9df817d270c667dbb05f692ce4ba5..71eac95bab75cc9a003ed30f073d18cf4d161c8d 100755
--- a/trace_streamer/src/protos/types/plugins/hidump_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/hidump_data/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_hidump_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_hidump_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hidump_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/hiebpf_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/hiebpf_data/BUILD.gn
index d6e71f41ec6218c7a43bbbd73a675a1ce72cfd66..d60d663e21466dda6beb253a5c0d451b338b824c 100755
--- a/trace_streamer/src/protos/types/plugins/hiebpf_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/hiebpf_data/BUILD.gn
@@ -65,8 +65,8 @@ ohos_source_set("hiebpf_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":hiebpf_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hiebpf_include_config" ]
@@ -78,8 +78,8 @@ ohos_source_set("hiebpf_data_cpp_standard") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":hiebpf_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hiebpf_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/hilog_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/hilog_data/BUILD.gn
index 7b6f2a8df0ab159d351498a025bc24ffcf04000b..de1e1e828cdb8356f3ddfdf65147cd394a09c026 100755
--- a/trace_streamer/src/protos/types/plugins/hilog_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/hilog_data/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_hilog_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_hilog_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hilog_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/hiperf_call_plugin/BUILD.gn b/trace_streamer/src/protos/types/plugins/hiperf_call_plugin/BUILD.gn
index d597fe409cafbc881be2975b034da13d1cd85cf0..ebc0ca88e646a45c46934d64632e439e8401a483 100755
--- a/trace_streamer/src/protos/types/plugins/hiperf_call_plugin/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/hiperf_call_plugin/BUILD.gn
@@ -55,8 +55,8 @@ source_set("ts_hiperf_call_plugin_protos_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_hiperf_call_plugin_protos_protoc" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hiperf_call_plugin_protos_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/hiperf_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/hiperf_data/BUILD.gn
index 175cd2dbaee161b64ed76d32481032d89e26a72a..b557a70e543f54d68be56c7828e70fc49f81da50 100755
--- a/trace_streamer/src/protos/types/plugins/hiperf_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/hiperf_data/BUILD.gn
@@ -63,8 +63,8 @@ ohos_source_set("ts_hiperf_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_hiperf_data_protos_protoc" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hiperf_data_protos_config" ]
@@ -76,8 +76,8 @@ ohos_source_set("ts_hiperf_data_cpp_standard") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_hiperf_data_protos_protoc" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hiperf_data_protos_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/hisysevent_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/hisysevent_data/BUILD.gn
index 933ef5c5efc0858e1f704a954db30e50d545e21a..4f3f56f3a63af82b9abfc7a273704ac2ebbd0b5c 100644
--- a/trace_streamer/src/protos/types/plugins/hisysevent_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/hisysevent_data/BUILD.gn
@@ -71,8 +71,8 @@ ohos_source_set("ts_hisysevent_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_hisysevent_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":hisysevent_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/js_memory/BUILD.gn b/trace_streamer/src/protos/types/plugins/js_memory/BUILD.gn
index 959ac455fd05550cef5669c94ce35666c29c7489..630109b88cd74885ca60e29f72d20585d6338745 100755
--- a/trace_streamer/src/protos/types/plugins/js_memory/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/js_memory/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_js_memory_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_js_memory_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":js_memory_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/memory_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/memory_data/BUILD.gn
index df62e2add3d5db865e8b0d8b8fdef7d32ebbb0ae..ba3c874578a49dbcb051f82eb458708d6dd28cde 100755
--- a/trace_streamer/src/protos/types/plugins/memory_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/memory_data/BUILD.gn
@@ -71,8 +71,8 @@ ohos_source_set("ts_memory_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_memory_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":memory_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/native_hook/BUILD.gn b/trace_streamer/src/protos/types/plugins/native_hook/BUILD.gn
index 4007a7b1dfad141a569a5b166b88d5f702244059..d0e7ff6ef0fe9cc08f699f4bc9d0a44aebc5c065 100755
--- a/trace_streamer/src/protos/types/plugins/native_hook/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/native_hook/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_native_hook_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_native_hook_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":native_hook_include_config" ]
@@ -81,8 +81,8 @@ ohos_source_set("native_hook_data_reader") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_native_hook_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":native_hook_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/network_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/network_data/BUILD.gn
index 5cff948a7ce2a8fe0bf581d448244ff6213a7ce8..56a24606432821c161b7940a56d11400cad873a0 100755
--- a/trace_streamer/src/protos/types/plugins/network_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/network_data/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_network_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_network_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":network_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/process_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/process_data/BUILD.gn
index 4a6c27aedabe31b5d47ef9917b2661c09d8ff145..2673048e5fceb331288b5cc4681db82f16557f82 100755
--- a/trace_streamer/src/protos/types/plugins/process_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/process_data/BUILD.gn
@@ -69,8 +69,8 @@ ohos_source_set("ts_process_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":ts_process_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":process_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/sample_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/sample_data/BUILD.gn
index 21a6aa648797c3642dbd547d5134719fc460c591..be31733b6cd461437243e0a923aad8b03d184e10 100755
--- a/trace_streamer/src/protos/types/plugins/sample_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/sample_data/BUILD.gn
@@ -70,8 +70,8 @@ ohos_source_set("sample_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":sample_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":sample_include_config" ]
diff --git a/trace_streamer/src/protos/types/plugins/stream_data/BUILD.gn b/trace_streamer/src/protos/types/plugins/stream_data/BUILD.gn
index f385b92e71b8a8d1a9587d3c78ca33cef03004d0..9978b8427b23ba08faf44046de4ec19f13772b2e 100755
--- a/trace_streamer/src/protos/types/plugins/stream_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/stream_data/BUILD.gn
@@ -70,8 +70,8 @@ ohos_source_set("stream_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":stream_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":stream_include_config" ]
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 dcd505f971c9f5c0059131aa49b91649c15d64a2..8ec3a4878b9da23b040ad26ed38a98b1d3bf67c6 100644
--- a/trace_streamer/src/protos/types/plugins/test_data/BUILD.gn
+++ b/trace_streamer/src/protos/types/plugins/test_data/BUILD.gn
@@ -66,8 +66,8 @@ ohos_source_set("test_data_cpp") {
   part_name = "${OHOS_PROFILER_PART_NAME}"
   deps = [ ":test_data_cpp_gen" ]
   public_deps = [
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf",
-    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_lite_static",
+    "${OHOS_PROFILER_3RDPARTY_PROTOBUF_DIR}:protobuf_static",
   ]
   include_dirs = [ "$proto_out_dir" ]
   public_configs = [ ":test_include_config" ]
diff --git a/trace_streamer/src/rpc/http_server.cpp b/trace_streamer/src/rpc/http_server.cpp
index a324e55a121a5625491049518c8106346b42c355..5abc29171ebe31d753f2a48fa6410d1a7cd51075 100644
--- a/trace_streamer/src/rpc/http_server.cpp
+++ b/trace_streamer/src/rpc/http_server.cpp
@@ -20,7 +20,7 @@
 #include <strings.h> // for macx
 #include <thread>
 #ifdef _WIN32
-#include <WinSock2.h>
+#include <winsock2.h>
 #else
 #include <poll.h>
 #include <sys/socket.h>
@@ -53,6 +53,16 @@ void HttpServer::RegisterRpcFunction(RpcServer* rpc)
     rpcFunctions_["/reset"] = reset;
 }
 
+void HttpServer::CloseAllThreads()
+{
+    for (const auto& it : clientThreads_) {
+        if (it->thread_.joinable()) {
+            it->thread_.join();
+            it->sock_.Close();
+        }
+    }
+}
+
 #ifdef _WIN32
 void HttpServer::Run(int32_t port)
 {
@@ -101,13 +111,7 @@ void HttpServer::Run(int32_t port)
             }
         }
     }
-
-    for (const auto& it : clientThreads_) {
-        if (it->thread_.joinable()) {
-            it->sock_.Close();
-            it->thread_.join();
-        }
-    }
+    CloseAllThreads();
     clientThreads_.clear();
 
     WSACleanup();
@@ -146,13 +150,7 @@ void HttpServer::Run(int32_t port)
             }
         }
     }
-
-    for (const auto& it : clientThreads_) {
-        if (it->thread_.joinable()) {
-            it->sock_.Close();
-            it->thread_.join();
-        }
-    }
+    CloseAllThreads();
     clientThreads_.clear();
 
     for (int32_t i = 0; i < COUNT_SOCKET; i++) {
@@ -204,6 +202,26 @@ void HttpServer::ClearDeadClientThread()
     }
 }
 
+bool HttpServer::ProcessAndParseReq(size_t& recvPos,
+                                    size_t& recvLen,
+                                    std::vector<uint8_t>& recvBuf,
+                                    RequestST& reqST,
+                                    HttpSocket& client)
+{
+    if (!client.Recv(recvBuf.data() + recvPos, recvLen)) {
+        return false;
+    }
+    recvPos += recvLen;
+    ParseRequest(recvBuf.data(), recvPos, reqST);
+    recvLen = recvBuf.size() - recvPos;
+    if (reqST.stat == RequstParseStat::RECVING) {
+        return true;
+    }
+    ProcessRequest(client, reqST);
+    reqST.stat = RequstParseStat::INIT;
+    return true;
+}
+
 #ifdef _WIN32
 void HttpServer::ProcessClient(HttpSocket& client)
 {
@@ -238,17 +256,9 @@ void HttpServer::ProcessClient(HttpSocket& client)
             if (event.iErrorCode[FD_READ_BIT] != 0) {
                 continue;
             }
-            if (!client.Recv(recvBuf.data() + recvPos, recvLen)) {
+            if (!ProcessAndParseReq(recvPos, recvLen, recvBuf, reqST, client)) {
                 break;
             }
-            recvPos += recvLen;
-            ParseRequest(recvBuf.data(), recvPos, reqST);
-            recvLen = recvBuf.size() - recvPos;
-            if (reqST.stat == RequstParseStat::RECVING) {
-                continue;
-            }
-            ProcessRequest(client, reqST);
-            reqST.stat = RequstParseStat::INIT;
         } else if (event.lNetworkEvents & FD_CLOSE) {
             TS_LOGI("client close socket(%d)", client.GetFd());
             break;
@@ -282,18 +292,9 @@ void HttpServer::ProcessClient(HttpSocket& client)
             }
             continue;
         }
-        if (!client.Recv(recvBuf.data() + recvPos, recvLen)) {
-            TS_LOGI("client exit");
+        if (!ProcessAndParseReq(recvPos, recvLen, recvBuf, reqST, client)) {
             break;
         }
-        recvPos += recvLen;
-        ParseRequest(recvBuf.data(), recvPos, reqST);
-        recvLen = recvBuf.size() - recvPos;
-        if (reqST.stat == RequstParseStat::RECVING) {
-            continue;
-        }
-        ProcessRequest(client, reqST);
-        reqST.stat = RequstParseStat::INIT;
     }
     TS_LOGI("recive client thread exit. socket(%d)", client.GetFd());
 
diff --git a/trace_streamer/src/rpc/http_server.h b/trace_streamer/src/rpc/http_server.h
index c90b1c2800eca06db098182c0ad18b59bbff6e0e..4d6172f23ab6044313a5324fe82bf06dd62b531b 100644
--- a/trace_streamer/src/rpc/http_server.h
+++ b/trace_streamer/src/rpc/http_server.h
@@ -56,6 +56,12 @@ private:
     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);
+    void CloseAllThreads();
+    bool ProcessAndParseReq(size_t& recvPos,
+                            size_t& recvLen,
+                            std::vector<uint8_t>& recvBuf,
+                            RequestST& reqST,
+                            HttpSocket& client);
 
     static const int32_t COUNT_SOCKET = 1;
     HttpSocket sockets_[COUNT_SOCKET]; // ipv4 and ipv6
diff --git a/trace_streamer/src/rpc/http_socket.cpp b/trace_streamer/src/rpc/http_socket.cpp
index 51c327ddbea5dbcf2179ee9063ba258c9296eb38..85086be73ce5d58eebd6fd1c971e62d85ab808c6 100644
--- a/trace_streamer/src/rpc/http_socket.cpp
+++ b/trace_streamer/src/rpc/http_socket.cpp
@@ -16,8 +16,8 @@
 #include "http_socket.h"
 #include <cstring>
 #ifdef _WIN32
-#include <WinSock2.h>
-#include <Ws2tcpip.h>
+#include <winsock2.h>
+#include <ws2tcpip.h>
 #else
 #include <netinet/in.h>
 #include <sys/socket.h>
diff --git a/trace_streamer/src/rpc/http_socket.h b/trace_streamer/src/rpc/http_socket.h
index 39bf9849c368309b90aec74919d83293acb416d0..03391c59c080d50bd1b345959c041bb10d94c45f 100644
--- a/trace_streamer/src/rpc/http_socket.h
+++ b/trace_streamer/src/rpc/http_socket.h
@@ -45,7 +45,9 @@ private:
     int32_t sockId_ = -1;
     int32_t domain_ = 0;
     using SOCKET = int32_t;
+#if !is_mingw
     const int32_t SOCKET_ERROR = -1;
+#endif
     const SOCKET INVALID_SOCKET = -1;
 };
 } // namespace TraceStreamer
diff --git a/trace_streamer/src/table/BUILD.gn b/trace_streamer/src/table/BUILD.gn
index 29a0ffae17a80cb92ca072bd15e995713500e756..6181a69a3c01db708c937ebc1c9fae036a8d0dbf 100644
--- a/trace_streamer/src/table/BUILD.gn
+++ b/trace_streamer/src/table/BUILD.gn
@@ -26,22 +26,13 @@ ohos_source_set("table") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
+
   deps = [
     "base:base_tables",
     "ebpf:ebpf_tables",
diff --git a/trace_streamer/src/table/base/BUILD.gn b/trace_streamer/src/table/base/BUILD.gn
index d5a1fa69e8b52094a993a856346c15d95ca842d9..5608875284877d65227c5bdb0e3c27d77f2dd84a 100644
--- a/trace_streamer/src/table/base/BUILD.gn
+++ b/trace_streamer/src/table/base/BUILD.gn
@@ -51,19 +51,10 @@ ohos_source_set("base_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/base/datasource_clockid_table.h b/trace_streamer/src/table/base/datasource_clockid_table.h
index 6ad1597e05b2007e93a1e64c265374b12cabd94f..b58537fd81a4aa514176ac77a7e2deab12d11c1d 100644
--- a/trace_streamer/src/table/base/datasource_clockid_table.h
+++ b/trace_streamer/src/table/base/datasource_clockid_table.h
@@ -27,17 +27,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/base/device_info_table.h b/trace_streamer/src/table/base/device_info_table.h
index 9db2a635e15551e1cba4bab30298068d70163ad4..ff6985151107ff87125cf988e286009bc8c503a3 100644
--- a/trace_streamer/src/table/base/device_info_table.h
+++ b/trace_streamer/src/table/base/device_info_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/base/meta_table.h b/trace_streamer/src/table/base/meta_table.h
index 6269067d1742020d3e4fb82adbf5fdfc42c651c5..91484d952ebca863d1ece01ea321f3b118cc5def 100644
--- a/trace_streamer/src/table/base/meta_table.h
+++ b/trace_streamer/src/table/base/meta_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/src/table/base/range_table.h b/trace_streamer/src/table/base/range_table.h
index 8538ca3eaa26427dd2ab5ae93a13921a4dc48178..bd07eda8df4e9c112fc4fc28b73e200ac0215f63 100644
--- a/trace_streamer/src/table/base/range_table.h
+++ b/trace_streamer/src/table/base/range_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/src/table/base/span_join.h b/trace_streamer/src/table/base/span_join.h
index 2cff0502eafc2309759ad25050beb0f71511f747..c80bf4f2a777dc9e3bff66a0fdc096a9df38f68b 100644
--- a/trace_streamer/src/table/base/span_join.h
+++ b/trace_streamer/src/table/base/span_join.h
@@ -57,7 +57,6 @@ public:
     void CreateCols(TableDesc& tableDesc, std::vector<ColumnInfo>& cols);
     bool IsTsOrDurCol(const std::string& name);
     bool DeduplicationForColumn(const std::string& name, std::vector<ColumnInfo>& cols);
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
     void Init(int32_t argc, const char* const* argv) override;
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
diff --git a/trace_streamer/src/table/base/stat_table.h b/trace_streamer/src/table/base/stat_table.h
index 4cdbdf66fae1c5fe37cdf29423ebbaf81f4ccc30..4a23fe9a15996f3732b2455234aceda6615fb6d3 100644
--- a/trace_streamer/src/table/base/stat_table.h
+++ b/trace_streamer/src/table/base/stat_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/src/table/base/table_base.h b/trace_streamer/src/table/base/table_base.h
index eedd3eda72fd8ed5880312fa69dd8cb7eacaeb7e..96cbd462d330357e95064e1f04bc4eb531b8f1d1 100644
--- a/trace_streamer/src/table/base/table_base.h
+++ b/trace_streamer/src/table/base/table_base.h
@@ -67,7 +67,12 @@ public:
         virtual void FilterTS(unsigned char op, sqlite3_value* argv, const std::deque<InternalTime>& times);
 
         virtual int32_t RowId(sqlite3_int64* id);
-        virtual int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) = 0;
+        virtual int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv)
+        {
+            UNUSED(fc);
+            UNUSED(argv);
+            return 0;
+        }
         virtual int32_t Column(int32_t n) const = 0;
         virtual void FilterId(unsigned char op, sqlite3_value* argv);
         virtual void FilterEnd();
@@ -104,7 +109,11 @@ protected:
     }
     int32_t BestIndex(sqlite3_index_info* idxInfo);
     // needs to correspond to Cursor::Filter()
-    virtual void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) = 0;
+    virtual void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
+    {
+        UNUSED(ei);
+        UNUSED(fc);
+    }
     virtual std::unique_ptr<Cursor> CreateCursor() = 0;
     int32_t Open(sqlite3_vtab_cursor** ppCursor);
     virtual void Init(int32_t, const char* const*)
diff --git a/trace_streamer/src/table/base/trace_config_table.h b/trace_streamer/src/table/base/trace_config_table.h
index 254ec0b360b516f0c399ee8d3cddff2527b7e9f5..0ca2e2f9fc7d699a491fa90d04e239883a57f4dc 100644
--- a/trace_streamer/src/table/base/trace_config_table.h
+++ b/trace_streamer/src/table/base/trace_config_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ebpf/BUILD.gn b/trace_streamer/src/table/ebpf/BUILD.gn
index 2ea5df1cfb1c002482e95d3b7df4c4d917f84823..054684e71e5e5355d68f601646d7861158929dc7 100644
--- a/trace_streamer/src/table/ebpf/BUILD.gn
+++ b/trace_streamer/src/table/ebpf/BUILD.gn
@@ -19,20 +19,14 @@ ohos_source_set("ebpf_tables") {
   part_name = "smartperf_host"
   sources = [
     "bio_latency_sample_table.cpp",
-    "bio_latency_sample_table.h",
     "ebpf_callstack_table.cpp",
-    "ebpf_callstack_table.h",
     "file_system_sample_table.cpp",
-    "file_system_sample_table.h",
   ]
   if (with_ebpf_help_table) {
     sources += [
       "ebpf_elf_symbol_table.cpp",
-      "ebpf_elf_symbol_table.h",
       "ebpf_elf_table.cpp",
-      "ebpf_elf_table.h",
       "ebpf_process_maps_table.cpp",
-      "ebpf_process_maps_table.h",
     ]
   }
   include_dirs = [
@@ -44,20 +38,10 @@ ohos_source_set("ebpf_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.cpp b/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.cpp
index 4266eae3e8bc99065aeb9328f9dd28d1056f41a4..b38cb0b367dfea5bf30d8a4bac511e96646ed44d 100644
--- a/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.cpp
+++ b/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.cpp
@@ -112,42 +112,6 @@ EbpfElfSymbolTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase* t
 
 EbpfElfSymbolTable::Cursor::~Cursor() {}
 
-int32_t EbpfElfSymbolTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterId(c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t EbpfElfSymbolTable::Cursor::Column(int32_t column) const
 {
     switch (column) {
diff --git a/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.h b/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.h
index bcee510b8dfac8050bc9c8d6ce35b5d3e67663bd..f190789d0918ef332d5599c5552a5c998a52bb9a 100644
--- a/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.h
+++ b/trace_streamer/src/table/ebpf/ebpf_elf_symbol_table.h
@@ -34,7 +34,6 @@ private:
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ebpf/ebpf_elf_table.cpp b/trace_streamer/src/table/ebpf/ebpf_elf_table.cpp
index f0537065f3fd7e57d657abc0887cb8c039d6be5e..295ca565f95a1563722b868b512e4f43eb408e5d 100644
--- a/trace_streamer/src/table/ebpf/ebpf_elf_table.cpp
+++ b/trace_streamer/src/table/ebpf/ebpf_elf_table.cpp
@@ -120,42 +120,6 @@ EbpfElfTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase* table)
 
 EbpfElfTable::Cursor::~Cursor() {}
 
-int32_t EbpfElfTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterId(c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t EbpfElfTable::Cursor::Column(int32_t column) const
 {
     switch (column) {
diff --git a/trace_streamer/src/table/ebpf/ebpf_elf_table.h b/trace_streamer/src/table/ebpf/ebpf_elf_table.h
index 54ccb4f8ca16def54a671b84eeda166ee42f5c56..4f2c54ee62775582754083a7b6baf691c790c44c 100644
--- a/trace_streamer/src/table/ebpf/ebpf_elf_table.h
+++ b/trace_streamer/src/table/ebpf/ebpf_elf_table.h
@@ -34,7 +34,6 @@ private:
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ebpf/ebpf_process_maps_table.cpp b/trace_streamer/src/table/ebpf/ebpf_process_maps_table.cpp
index a9760d265921bed78cf5301dd6b0ee4fe09480f8..75fe2b09b837aa3978e7afaec2f53a1a469df868 100644
--- a/trace_streamer/src/table/ebpf/ebpf_process_maps_table.cpp
+++ b/trace_streamer/src/table/ebpf/ebpf_process_maps_table.cpp
@@ -116,42 +116,6 @@ EbpfProcessMapsTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase*
 
 EbpfProcessMapsTable::Cursor::~Cursor() {}
 
-int32_t EbpfProcessMapsTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterId(c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t EbpfProcessMapsTable::Cursor::Column(int32_t column) const
 {
     switch (column) {
diff --git a/trace_streamer/src/table/ebpf/ebpf_process_maps_table.h b/trace_streamer/src/table/ebpf/ebpf_process_maps_table.h
index 8e6b210c057307424a535c2e7f800552d59af9d4..3f1916cbeeedb8036942e6464a6748639f1d75b9 100644
--- a/trace_streamer/src/table/ebpf/ebpf_process_maps_table.h
+++ b/trace_streamer/src/table/ebpf/ebpf_process_maps_table.h
@@ -34,7 +34,6 @@ private:
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/BUILD.gn b/trace_streamer/src/table/ftrace/BUILD.gn
index fed4d03e04181ce52230c456854ca59df4990929..85ba0331729e25fd1d72f2277fb7b2b43795243a 100644
--- a/trace_streamer/src/table/ftrace/BUILD.gn
+++ b/trace_streamer/src/table/ftrace/BUILD.gn
@@ -85,19 +85,10 @@ ohos_source_set("ftrace_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/ftrace/animation_table.cpp b/trace_streamer/src/table/ftrace/animation_table.cpp
index b705990b76302a3cb68b6d21eb493cf1499db453..9813e88a7a767a704dc011edcd0e2576d3a0b0d5 100644
--- a/trace_streamer/src/table/ftrace/animation_table.cpp
+++ b/trace_streamer/src/table/ftrace/animation_table.cpp
@@ -31,89 +31,6 @@ AnimationTable::AnimationTable(const TraceDataCache* dataCache) : TableBase(data
 
 AnimationTable::~AnimationTable() {}
 
-void AnimationTable::EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
-{
-    constexpr double filterBaseCost = 1000.0; // set-up and tear-down
-    constexpr double indexCost = 2.0;
-    ei.estimatedCost = filterBaseCost;
-
-    auto rowCount = dataCache_->GetConstAnimation().Size();
-    if (rowCount == 0 || rowCount == 1) {
-        ei.estimatedRows = rowCount;
-        ei.estimatedCost += indexCost * rowCount;
-        return;
-    }
-
-    double filterCost = 0.0;
-    auto constraints = fc.GetConstraints();
-    if (constraints.empty()) { // scan all rows
-        filterCost = rowCount;
-    } else {
-        FilterByConstraint(fc, filterCost, rowCount);
-    }
-    ei.estimatedCost += filterCost;
-    ei.estimatedRows = rowCount;
-    ei.estimatedCost += rowCount * indexCost;
-
-    ei.isOrdered = true;
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = 0; i < orderbys.size(); i++) {
-        switch (orderbys[i].iColumn) {
-            case ID:
-                break;
-            default: // other columns can be sorted by SQLite
-                ei.isOrdered = false;
-                break;
-        }
-    }
-}
-
-void AnimationTable::FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount)
-{
-    auto fcConstraints = fc.GetConstraints();
-    for (int32_t i = 0; i < static_cast<int32_t>(fcConstraints.size()); i++) {
-        if (rowCount <= 1) {
-            // only one row or nothing, needn't filter by constraint
-            filterCost += rowCount;
-            break;
-        }
-        const auto& c = fcConstraints[i];
-        switch (c.col) {
-            case ID: {
-                auto oldRowCount = rowCount;
-                if (CanFilterSorted(c.op, rowCount)) {
-                    fc.UpdateConstraint(i, true);
-                    filterCost += log2(oldRowCount); // binary search
-                } else {
-                    filterCost += oldRowCount;
-                }
-                break;
-            }
-            default:                    // other column
-                filterCost += rowCount; // scan all rows
-                break;
-        }
-    }
-}
-
-bool AnimationTable::CanFilterSorted(const char op, size_t& rowCount) const
-{
-    switch (op) {
-        case SQLITE_INDEX_CONSTRAINT_EQ:
-            rowCount = rowCount / log2(rowCount);
-            break;
-        case SQLITE_INDEX_CONSTRAINT_GT:
-        case SQLITE_INDEX_CONSTRAINT_GE:
-        case SQLITE_INDEX_CONSTRAINT_LE:
-        case SQLITE_INDEX_CONSTRAINT_LT:
-            rowCount = (rowCount >> 1);
-            break;
-        default:
-            return false;
-    }
-    return true;
-}
-
 std::unique_ptr<TableBase::Cursor> AnimationTable::CreateCursor()
 {
     return std::make_unique<Cursor>(dataCache_, this);
@@ -127,42 +44,6 @@ AnimationTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase* table
 
 AnimationTable::Cursor::~Cursor() {}
 
-int32_t AnimationTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterSorted(c.col, c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t AnimationTable::Cursor::Column(int32_t col) const
 {
     switch (col) {
@@ -192,44 +73,5 @@ int32_t AnimationTable::Cursor::Column(int32_t col) const
     }
     return SQLITE_OK;
 }
-
-void AnimationTable::Cursor::FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv)
-{
-    auto type = sqlite3_value_type(argv);
-    if (type != SQLITE_INTEGER) {
-        // other type consider it NULL, filter out nothing
-        indexMap_->Intersect(0, 0);
-        return;
-    }
-
-    switch (col) {
-        case ID: {
-            auto v = static_cast<uint64_t>(sqlite3_value_int64(argv));
-            auto getValue = [](const uint32_t& row) { return row; };
-            switch (op) {
-                case SQLITE_INDEX_CONSTRAINT_EQ:
-                    indexMap_->IntersectabcEqual(animationObj_.IdsData(), v, getValue);
-                    break;
-                case SQLITE_INDEX_CONSTRAINT_GT:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_GE: {
-                    indexMap_->IntersectGreaterEqual(animationObj_.IdsData(), v, getValue);
-                    break;
-                }
-                case SQLITE_INDEX_CONSTRAINT_LE:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_LT: {
-                    indexMap_->IntersectLessEqual(animationObj_.IdsData(), v, getValue);
-                    break;
-                }
-                default:
-                    break;
-            } // end of switch (op)
-        }     // end of case TS
-        default:
-            // can't filter, all rows
-            break;
-    }
-}
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/table/ftrace/animation_table.h b/trace_streamer/src/table/ftrace/animation_table.h
index 5830b51d06d6993f513d69deab4ba4d6d62fa6ff..894b2f0b9376028e90a0b84187f28fff4006a957 100644
--- a/trace_streamer/src/table/ftrace/animation_table.h
+++ b/trace_streamer/src/table/ftrace/animation_table.h
@@ -28,20 +28,12 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override;
-    // the column is sorted
-    bool CanFilterSorted(const char op, size_t& rowCount) const;
-    void FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount);
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t col) const override;
 
-        void FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv);
-
     private:
         const Animation& animationObj_;
     };
diff --git a/trace_streamer/src/table/ftrace/app_startup_table.h b/trace_streamer/src/table/ftrace/app_startup_table.h
index cca17a80a99aa87d1c264e39906bdc3a4e9c334e..5eb14657a92307dccd8c4a71b4e861cca40a9341 100644
--- a/trace_streamer/src/table/ftrace/app_startup_table.h
+++ b/trace_streamer/src/table/ftrace/app_startup_table.h
@@ -28,22 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/clk_event_filter_table.cpp b/trace_streamer/src/table/ftrace/clk_event_filter_table.cpp
index 498761ae0afecac2c325201a423e41f0cb16c240..503db4c33b0d2d15126b37cadd393ba435cd160b 100644
--- a/trace_streamer/src/table/ftrace/clk_event_filter_table.cpp
+++ b/trace_streamer/src/table/ftrace/clk_event_filter_table.cpp
@@ -31,89 +31,6 @@ ClkEventFilterTable::ClkEventFilterTable(const TraceDataCache* dataCache) : Tabl
 
 ClkEventFilterTable::~ClkEventFilterTable() {}
 
-void ClkEventFilterTable::EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
-{
-    constexpr double filterBaseCost = 1000.0; // set-up and tear-down
-    constexpr double indexCost = 2.0;
-    ei.estimatedCost = filterBaseCost;
-
-    auto rowCount = dataCache_->GetConstClkEventFilterData().Size();
-    if (rowCount == 0 || rowCount == 1) {
-        ei.estimatedRows = rowCount;
-        ei.estimatedCost += indexCost * rowCount;
-        return;
-    }
-
-    double filterCost = 0.0;
-    auto constraints = fc.GetConstraints();
-    if (constraints.empty()) { // scan all rows
-        filterCost = rowCount;
-    } else {
-        FilterByConstraint(fc, filterCost, rowCount);
-    }
-    ei.estimatedCost += filterCost;
-    ei.estimatedRows = rowCount;
-    ei.estimatedCost += rowCount * indexCost;
-
-    ei.isOrdered = true;
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = 0; i < orderbys.size(); i++) {
-        switch (orderbys[i].iColumn) {
-            case ID:
-                break;
-            default: // other columns can be sorted by SQLite
-                ei.isOrdered = false;
-                break;
-        }
-    }
-}
-
-void ClkEventFilterTable::FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount)
-{
-    auto fcConstraints = fc.GetConstraints();
-    for (int32_t i = 0; i < static_cast<int32_t>(fcConstraints.size()); i++) {
-        if (rowCount <= 1) {
-            // only one row or nothing, needn't filter by constraint
-            filterCost += rowCount;
-            break;
-        }
-        const auto& c = fcConstraints[i];
-        switch (c.col) {
-            case ID: {
-                auto oldRowCount = rowCount;
-                if (CanFilterSorted(c.op, rowCount)) {
-                    fc.UpdateConstraint(i, true);
-                    filterCost += log2(oldRowCount); // binary search
-                } else {
-                    filterCost += oldRowCount;
-                }
-                break;
-            }
-            default:                    // other column
-                filterCost += rowCount; // scan all rows
-                break;
-        }
-    }
-}
-
-bool ClkEventFilterTable::CanFilterSorted(const char op, size_t& rowCount) const
-{
-    switch (op) {
-        case SQLITE_INDEX_CONSTRAINT_EQ:
-            rowCount = rowCount / log2(rowCount);
-            break;
-        case SQLITE_INDEX_CONSTRAINT_GT:
-        case SQLITE_INDEX_CONSTRAINT_GE:
-        case SQLITE_INDEX_CONSTRAINT_LE:
-        case SQLITE_INDEX_CONSTRAINT_LT:
-            rowCount = (rowCount >> 1);
-            break;
-        default:
-            return false;
-    }
-    return true;
-}
-
 std::unique_ptr<TableBase::Cursor> ClkEventFilterTable::CreateCursor()
 {
     return std::make_unique<Cursor>(dataCache_, this);
@@ -126,42 +43,6 @@ ClkEventFilterTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase*
 
 ClkEventFilterTable::Cursor::~Cursor() {}
 
-int32_t ClkEventFilterTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterSorted(c.col, c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t ClkEventFilterTable::Cursor::Column(int32_t col) const
 {
     switch (col) {
@@ -189,44 +70,5 @@ int32_t ClkEventFilterTable::Cursor::Column(int32_t col) const
     }
     return SQLITE_OK;
 }
-
-void ClkEventFilterTable::Cursor::FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv)
-{
-    auto type = sqlite3_value_type(argv);
-    if (type != SQLITE_INTEGER) {
-        // other type consider it NULL, filter out nothing
-        indexMap_->Intersect(0, 0);
-        return;
-    }
-
-    switch (col) {
-        case ID: {
-            auto v = static_cast<uint64_t>(sqlite3_value_int64(argv));
-            auto getValue = [](const uint32_t& row) { return row; };
-            switch (op) {
-                case SQLITE_INDEX_CONSTRAINT_EQ:
-                    indexMap_->IntersectabcEqual(dataCache_->GetConstClkEventFilterData().IdsData(), v, getValue);
-                    break;
-                case SQLITE_INDEX_CONSTRAINT_GT:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_GE: {
-                    indexMap_->IntersectGreaterEqual(dataCache_->GetConstClkEventFilterData().IdsData(), v, getValue);
-                    break;
-                }
-                case SQLITE_INDEX_CONSTRAINT_LE:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_LT: {
-                    indexMap_->IntersectLessEqual(dataCache_->GetConstClkEventFilterData().IdsData(), v, getValue);
-                    break;
-                }
-                default:
-                    break;
-            } // end of switch (op)
-        }     // end of case TS
-        default:
-            // can't filter, all rows
-            break;
-    }
-}
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/table/ftrace/clk_event_filter_table.h b/trace_streamer/src/table/ftrace/clk_event_filter_table.h
index 445baf9130fba5ec34aeabd32c46ab0e2868b015..ef122c8210e9451f4e08f78a0a0935e59a367bc5 100644
--- a/trace_streamer/src/table/ftrace/clk_event_filter_table.h
+++ b/trace_streamer/src/table/ftrace/clk_event_filter_table.h
@@ -28,19 +28,11 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override;
-    // the column is sorted
-    bool CanFilterSorted(const char op, size_t& rowCount) const;
-    void FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount);
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t col) const override;
-
-        void FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv);
     };
 };
 } // namespace TraceStreamer
diff --git a/trace_streamer/src/table/ftrace/clock_event_filter_table.cpp b/trace_streamer/src/table/ftrace/clock_event_filter_table.cpp
index 2af886f069eb66f5d2cae10bcc6f98e6a374333a..44bdaea7ee4144ebdb0dee81820a8be34db93800 100644
--- a/trace_streamer/src/table/ftrace/clock_event_filter_table.cpp
+++ b/trace_streamer/src/table/ftrace/clock_event_filter_table.cpp
@@ -31,89 +31,6 @@ ClockEventFilterTable::ClockEventFilterTable(const TraceDataCache* dataCache) :
 
 ClockEventFilterTable::~ClockEventFilterTable() {}
 
-void ClockEventFilterTable::EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
-{
-    constexpr double filterBaseCost = 1000.0; // set-up and tear-down
-    constexpr double indexCost = 2.0;
-    ei.estimatedCost = filterBaseCost;
-
-    auto rowCount = dataCache_->GetConstClockEventFilterData().Size();
-    if (rowCount == 0 || rowCount == 1) {
-        ei.estimatedRows = rowCount;
-        ei.estimatedCost += indexCost * rowCount;
-        return;
-    }
-
-    double filterCost = 0.0;
-    auto constraints = fc.GetConstraints();
-    if (constraints.empty()) { // scan all rows
-        filterCost = rowCount;
-    } else {
-        FilterByConstraint(fc, filterCost, rowCount);
-    }
-    ei.estimatedCost += filterCost;
-    ei.estimatedRows = rowCount;
-    ei.estimatedCost += rowCount * indexCost;
-
-    ei.isOrdered = true;
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = 0; i < orderbys.size(); i++) {
-        switch (orderbys[i].iColumn) {
-            case ID:
-                break;
-            default: // other columns can be sorted by SQLite
-                ei.isOrdered = false;
-                break;
-        }
-    }
-}
-
-void ClockEventFilterTable::FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount)
-{
-    auto fcConstraints = fc.GetConstraints();
-    for (int32_t i = 0; i < static_cast<int32_t>(fcConstraints.size()); i++) {
-        if (rowCount <= 1) {
-            // only one row or nothing, needn't filter by constraint
-            filterCost += rowCount;
-            break;
-        }
-        const auto& c = fcConstraints[i];
-        switch (c.col) {
-            case ID: {
-                auto oldRowCount = rowCount;
-                if (CanFilterSorted(c.op, rowCount)) {
-                    fc.UpdateConstraint(i, true);
-                    filterCost += log2(oldRowCount); // binary search
-                } else {
-                    filterCost += oldRowCount;
-                }
-                break;
-            }
-            default:                    // other column
-                filterCost += rowCount; // scan all rows
-                break;
-        }
-    }
-}
-
-bool ClockEventFilterTable::CanFilterSorted(const char op, size_t& rowCount) const
-{
-    switch (op) {
-        case SQLITE_INDEX_CONSTRAINT_EQ:
-            rowCount = rowCount / log2(rowCount);
-            break;
-        case SQLITE_INDEX_CONSTRAINT_GT:
-        case SQLITE_INDEX_CONSTRAINT_GE:
-        case SQLITE_INDEX_CONSTRAINT_LE:
-        case SQLITE_INDEX_CONSTRAINT_LT:
-            rowCount = (rowCount >> 1);
-            break;
-        default:
-            return false;
-    }
-    return true;
-}
-
 std::unique_ptr<TableBase::Cursor> ClockEventFilterTable::CreateCursor()
 {
     return std::make_unique<Cursor>(dataCache_, this);
@@ -126,42 +43,6 @@ ClockEventFilterTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase
 
 ClockEventFilterTable::Cursor::~Cursor() {}
 
-int32_t ClockEventFilterTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterSorted(c.col, c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t ClockEventFilterTable::Cursor::Column(int32_t col) const
 {
     switch (col) {
@@ -189,44 +70,5 @@ int32_t ClockEventFilterTable::Cursor::Column(int32_t col) const
     }
     return SQLITE_OK;
 }
-
-void ClockEventFilterTable::Cursor::FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv)
-{
-    auto type = sqlite3_value_type(argv);
-    if (type != SQLITE_INTEGER) {
-        // other type consider it NULL, filter out nothing
-        indexMap_->Intersect(0, 0);
-        return;
-    }
-
-    switch (col) {
-        case ID: {
-            auto v = static_cast<uint64_t>(sqlite3_value_int64(argv));
-            auto getValue = [](const uint32_t& row) { return row; };
-            switch (op) {
-                case SQLITE_INDEX_CONSTRAINT_EQ:
-                    indexMap_->IntersectabcEqual(dataCache_->GetConstClockEventFilterData().IdsData(), v, getValue);
-                    break;
-                case SQLITE_INDEX_CONSTRAINT_GT:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_GE: {
-                    indexMap_->IntersectGreaterEqual(dataCache_->GetConstClockEventFilterData().IdsData(), v, getValue);
-                    break;
-                }
-                case SQLITE_INDEX_CONSTRAINT_LE:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_LT: {
-                    indexMap_->IntersectLessEqual(dataCache_->GetConstClockEventFilterData().IdsData(), v, getValue);
-                    break;
-                }
-                default:
-                    break;
-            } // end of switch (op)
-        }     // end of case TS
-        default:
-            // can't filter, all rows
-            break;
-    }
-}
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/table/ftrace/clock_event_filter_table.h b/trace_streamer/src/table/ftrace/clock_event_filter_table.h
index af8907814e383dcad45c9457f41e51348a4ce24f..4e2bb58bacd07d42c6f04e066a97ba813de705c7 100644
--- a/trace_streamer/src/table/ftrace/clock_event_filter_table.h
+++ b/trace_streamer/src/table/ftrace/clock_event_filter_table.h
@@ -28,19 +28,11 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override;
-    // the column is sorted
-    bool CanFilterSorted(const char op, size_t& rowCount) const;
-    void FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount);
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t col) const override;
-
-        void FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv);
     };
 };
 } // namespace TraceStreamer
diff --git a/trace_streamer/src/table/ftrace/clock_snapshot_table.h b/trace_streamer/src/table/ftrace/clock_snapshot_table.h
index 42d34a57ad42c0888b7345217fdb7f99ff338700..ed4f472a680184458c7db9add17c502e31f8a491 100644
--- a/trace_streamer/src/table/ftrace/clock_snapshot_table.h
+++ b/trace_streamer/src/table/ftrace/clock_snapshot_table.h
@@ -28,17 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/dynamic_frame_table.cpp b/trace_streamer/src/table/ftrace/dynamic_frame_table.cpp
index 16c439e50a91c96f4fe71c35dbb08fd536f9e39d..53a2e6fe04e0baa6ce9f5f10c2df76214f539482 100644
--- a/trace_streamer/src/table/ftrace/dynamic_frame_table.cpp
+++ b/trace_streamer/src/table/ftrace/dynamic_frame_table.cpp
@@ -35,89 +35,6 @@ DynamicFrameTable::DynamicFrameTable(const TraceDataCache* dataCache) : TableBas
 
 DynamicFrameTable::~DynamicFrameTable() {}
 
-void DynamicFrameTable::EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
-{
-    constexpr double filterBaseCost = 1000.0; // set-up and tear-down
-    constexpr double indexCost = 2.0;
-    ei.estimatedCost = filterBaseCost;
-
-    auto rowCount = dataCache_->GetConstDynamicFrame().Size();
-    if (rowCount == 0 || rowCount == 1) {
-        ei.estimatedRows = rowCount;
-        ei.estimatedCost += indexCost * rowCount;
-        return;
-    }
-
-    double filterCost = 0.0;
-    auto constraints = fc.GetConstraints();
-    if (constraints.empty()) { // scan all rows
-        filterCost = rowCount;
-    } else {
-        FilterByConstraint(fc, filterCost, rowCount);
-    }
-    ei.estimatedCost += filterCost;
-    ei.estimatedRows = rowCount;
-    ei.estimatedCost += rowCount * indexCost;
-
-    ei.isOrdered = true;
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = 0; i < orderbys.size(); i++) {
-        switch (orderbys[i].iColumn) {
-            case ID:
-                break;
-            default: // other columns can be sorted by SQLite
-                ei.isOrdered = false;
-                break;
-        }
-    }
-}
-
-void DynamicFrameTable::FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount)
-{
-    auto fcConstraints = fc.GetConstraints();
-    for (int32_t i = 0; i < static_cast<int32_t>(fcConstraints.size()); i++) {
-        if (rowCount <= 1) {
-            // only one row or nothing, needn't filter by constraint
-            filterCost += rowCount;
-            break;
-        }
-        const auto& c = fcConstraints[i];
-        switch (c.col) {
-            case ID: {
-                auto oldRowCount = rowCount;
-                if (CanFilterSorted(c.op, rowCount)) {
-                    fc.UpdateConstraint(i, true);
-                    filterCost += log2(oldRowCount); // binary search
-                } else {
-                    filterCost += oldRowCount;
-                }
-                break;
-            }
-            default:                    // other column
-                filterCost += rowCount; // scan all rows
-                break;
-        }
-    }
-}
-
-bool DynamicFrameTable::CanFilterSorted(const char op, size_t& rowCount) const
-{
-    switch (op) {
-        case SQLITE_INDEX_CONSTRAINT_EQ:
-            rowCount = rowCount / log2(rowCount);
-            break;
-        case SQLITE_INDEX_CONSTRAINT_GT:
-        case SQLITE_INDEX_CONSTRAINT_GE:
-        case SQLITE_INDEX_CONSTRAINT_LE:
-        case SQLITE_INDEX_CONSTRAINT_LT:
-            rowCount = (rowCount >> 1);
-            break;
-        default:
-            return false;
-    }
-    return true;
-}
-
 std::unique_ptr<TableBase::Cursor> DynamicFrameTable::CreateCursor()
 {
     return std::make_unique<Cursor>(dataCache_, this);
@@ -130,43 +47,6 @@ DynamicFrameTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase* ta
 }
 
 DynamicFrameTable::Cursor::~Cursor() {}
-
-int32_t DynamicFrameTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterSorted(c.col, c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t DynamicFrameTable::Cursor::Column(int32_t col) const
 {
     switch (col) {
@@ -216,44 +96,5 @@ int32_t DynamicFrameTable::Cursor::Column(int32_t col) const
     }
     return SQLITE_OK;
 }
-
-void DynamicFrameTable::Cursor::FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv)
-{
-    auto type = sqlite3_value_type(argv);
-    if (type != SQLITE_INTEGER) {
-        // other type consider it NULL, filter out nothing
-        indexMap_->Intersect(0, 0);
-        return;
-    }
-
-    switch (col) {
-        case ID: {
-            auto v = static_cast<uint64_t>(sqlite3_value_int64(argv));
-            auto getValue = [](const uint32_t& row) { return row; };
-            switch (op) {
-                case SQLITE_INDEX_CONSTRAINT_EQ:
-                    indexMap_->IntersectabcEqual(dynamicFrameObj_.IdsData(), v, getValue);
-                    break;
-                case SQLITE_INDEX_CONSTRAINT_GT:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_GE: {
-                    indexMap_->IntersectGreaterEqual(dynamicFrameObj_.IdsData(), v, getValue);
-                    break;
-                }
-                case SQLITE_INDEX_CONSTRAINT_LE:
-                    v++;
-                case SQLITE_INDEX_CONSTRAINT_LT: {
-                    indexMap_->IntersectLessEqual(dynamicFrameObj_.IdsData(), v, getValue);
-                    break;
-                }
-                default:
-                    break;
-            } // end of switch (op)
-        }     // end of case TS
-        default:
-            // can't filter, all rows
-            break;
-    }
-}
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/table/ftrace/dynamic_frame_table.h b/trace_streamer/src/table/ftrace/dynamic_frame_table.h
index 4ef53096e0e134e91d6f1e4f743d993da0a2162a..48c2af652803d9e94106a01e4453cca9e92e4ca9 100644
--- a/trace_streamer/src/table/ftrace/dynamic_frame_table.h
+++ b/trace_streamer/src/table/ftrace/dynamic_frame_table.h
@@ -28,20 +28,12 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override;
-    // the column is sorted
-    bool CanFilterSorted(const char op, size_t& rowCount) const;
-    void FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount);
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t col) const override;
 
-        void FilterSorted(int32_t col, unsigned char op, sqlite3_value* argv);
-
     private:
         const DynamicFrame& dynamicFrameObj_;
     };
diff --git a/trace_streamer/src/table/ftrace/measure_filter_table.h b/trace_streamer/src/table/ftrace/measure_filter_table.h
index 38ec1ea446c513c0492449341e3a626888657bb6..9e638452999a573b62968594ff85579520be0dba 100644
--- a/trace_streamer/src/table/ftrace/measure_filter_table.h
+++ b/trace_streamer/src/table/ftrace/measure_filter_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/src/table/ftrace/process_filter_table.h b/trace_streamer/src/table/ftrace/process_filter_table.h
index b247061661fe1c3060321e676c3e71ec83b13a9a..c78e545555c9ab3a817cc4194c74c05bd7eaef37 100644
--- a/trace_streamer/src/table/ftrace/process_filter_table.h
+++ b/trace_streamer/src/table/ftrace/process_filter_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/so_static_initalization_table.h b/trace_streamer/src/table/ftrace/so_static_initalization_table.h
index 1f43b67ccad699cee31417545636e50f2c43c4ba..38ca17b8fff3bb1aa701715e9b9d7fbdc41de929 100644
--- a/trace_streamer/src/table/ftrace/so_static_initalization_table.h
+++ b/trace_streamer/src/table/ftrace/so_static_initalization_table.h
@@ -28,22 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/system_call_table.h b/trace_streamer/src/table/ftrace/system_call_table.h
index ae9afb2e8b25a63439ee5c664cb4bea2565ffa44..97ee5fda4fe6765f4535ed44cfac2cbf23313e1e 100644
--- a/trace_streamer/src/table/ftrace/system_call_table.h
+++ b/trace_streamer/src/table/ftrace/system_call_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/task_pool_table.h b/trace_streamer/src/table/ftrace/task_pool_table.h
index ff42ac4a05c568401d9638a462526d17ca39f2dd..9c18c71aa71b0d618071c204754183a9a93e3931 100644
--- a/trace_streamer/src/table/ftrace/task_pool_table.h
+++ b/trace_streamer/src/table/ftrace/task_pool_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/ftrace/thread_filter_table.h b/trace_streamer/src/table/ftrace/thread_filter_table.h
index 439640da400a51a84f2c3851d5cebf63cbd80651..17c44b6b09ba36a9bd1f91f76e25561181204480 100644
--- a/trace_streamer/src/table/ftrace/thread_filter_table.h
+++ b/trace_streamer/src/table/ftrace/thread_filter_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
     };
 };
diff --git a/trace_streamer/src/table/hi_sysevent/BUILD.gn b/trace_streamer/src/table/hi_sysevent/BUILD.gn
index fcf1a758fdb822f71e64f78b3b584f6c423532c2..26bfd81cf2bf9c9bb461d1cfc112f8e1f4799eb7 100644
--- a/trace_streamer/src/table/hi_sysevent/BUILD.gn
+++ b/trace_streamer/src/table/hi_sysevent/BUILD.gn
@@ -32,20 +32,10 @@ ohos_source_set("hi_sysevent_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/hi_sysevent/device_state_table.h b/trace_streamer/src/table/hi_sysevent/device_state_table.h
index d354464c5c2b1b0a826d2133a1e07d0b30a8e9f0..9b427996956241dc188e969b3bef8549c82dd685 100644
--- a/trace_streamer/src/table/hi_sysevent/device_state_table.h
+++ b/trace_streamer/src/table/hi_sysevent/device_state_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/hi_sysevent/sysevent_measure_table.h b/trace_streamer/src/table/hi_sysevent/sysevent_measure_table.h
index 0f49f3887da502f7d4c082d3edc94ad807d7f899..467b33e28f73b0361fb0185bf07a4bf9c893ce3c 100644
--- a/trace_streamer/src/table/hi_sysevent/sysevent_measure_table.h
+++ b/trace_streamer/src/table/hi_sysevent/sysevent_measure_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/hiperf/BUILD.gn b/trace_streamer/src/table/hiperf/BUILD.gn
index f9dbab769f479cc22ec72d95a81d0c56ce5ba75f..616cad8e54a81faf6fe3a456a8940836abba0ceb 100644
--- a/trace_streamer/src/table/hiperf/BUILD.gn
+++ b/trace_streamer/src/table/hiperf/BUILD.gn
@@ -39,20 +39,10 @@ ohos_source_set("hiperf_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/hiperf/perf_report_table.h b/trace_streamer/src/table/hiperf/perf_report_table.h
index 8a0b504bff36e7dc4a3a7bbdc91e37705602fd1b..a829cc6fedf4f467f42fe79835f03fcc4354b4a4 100644
--- a/trace_streamer/src/table/hiperf/perf_report_table.h
+++ b/trace_streamer/src/table/hiperf/perf_report_table.h
@@ -28,18 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override{};
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/BUILD.gn b/trace_streamer/src/table/js_memory/BUILD.gn
index 8352e1ba54f3aacfa9cacbbf8a27fb65558aa300..529a8579881f925b7f3361c1f6dfa634e8ca34be 100644
--- a/trace_streamer/src/table/js_memory/BUILD.gn
+++ b/trace_streamer/src/table/js_memory/BUILD.gn
@@ -54,20 +54,10 @@ ohos_source_set("js_memory_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/js_memory/appname_table.h b/trace_streamer/src/table/js_memory/appname_table.h
index ff02cf4d3ab3558d5d8d37380cc192dcd4b9c925..096e50ddbf87ba0747f25f658c54f512433e7e04 100644
--- a/trace_streamer/src/table/js_memory/appname_table.h
+++ b/trace_streamer/src/table/js_memory/appname_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_config_table.h b/trace_streamer/src/table/js_memory/js_config_table.h
index 884ccfab71bfa8ab3b5290c44db0b54fa66585a0..d8620473fbdb7900c37a0095a0a94b2957c388ca 100644
--- a/trace_streamer/src/table/js_memory/js_config_table.h
+++ b/trace_streamer/src/table/js_memory/js_config_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_cpu_profiler_node_table.h b/trace_streamer/src/table/js_memory/js_cpu_profiler_node_table.h
index e309016201867a5408839b421a41d56db2c74562..cf546152966f438eb06c05ae4aeb816290bf75db 100644
--- a/trace_streamer/src/table/js_memory/js_cpu_profiler_node_table.h
+++ b/trace_streamer/src/table/js_memory/js_cpu_profiler_node_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_cpu_profiler_sample_table.h b/trace_streamer/src/table/js_memory/js_cpu_profiler_sample_table.h
index cf40cca1db3ec6b9b56b71424ecc1499b9e8a7cb..39182352dbbf88e7f9e2d94e3163a925b15d7553 100644
--- a/trace_streamer/src/table/js_memory/js_cpu_profiler_sample_table.h
+++ b/trace_streamer/src/table/js_memory/js_cpu_profiler_sample_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_edges_table.h b/trace_streamer/src/table/js_memory/js_heap_edges_table.h
index a9e333b21886ef52fc745cab10dedffb03e58270..dcb967110facb7d2b45bade786b1d01b62f72f95 100644
--- a/trace_streamer/src/table/js_memory/js_heap_edges_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_edges_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_files_table.h b/trace_streamer/src/table/js_memory/js_heap_files_table.h
index cb2089dc42f858f05d49fee574e9367e5fa6037a..113b22bd503f534ab7f7d13e698934d820500fff 100644
--- a/trace_streamer/src/table/js_memory/js_heap_files_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_files_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_info_table.h b/trace_streamer/src/table/js_memory/js_heap_info_table.h
index a0638a33c7fc5427dedca99613a75bbad97f3166..d97f396e36394b176b731779a82f4cd7172e6972 100644
--- a/trace_streamer/src/table/js_memory/js_heap_info_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_info_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_location_table.h b/trace_streamer/src/table/js_memory/js_heap_location_table.h
index 9ef7d617b6a6ee887b2013c2388f2196b12002b0..4fa41d0de809d1a3b39d020c9872cac97c38a8e7 100644
--- a/trace_streamer/src/table/js_memory/js_heap_location_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_location_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_nodes_table.h b/trace_streamer/src/table/js_memory/js_heap_nodes_table.h
index a48f7e00b2edf0ef6fe113ea75441a3d7ea9316d..4eaad1b8d1a11207869e6a0bc493a1a65ec3bf88 100644
--- a/trace_streamer/src/table/js_memory/js_heap_nodes_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_nodes_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_sample_table.h b/trace_streamer/src/table/js_memory/js_heap_sample_table.h
index 228cc71aee5b54cd1eaf1d28f7c29e09714f4c66..68034ddd9d4785af8a32ed33ac726c3f6a16cf73 100644
--- a/trace_streamer/src/table/js_memory/js_heap_sample_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_sample_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_string_table.h b/trace_streamer/src/table/js_memory/js_heap_string_table.h
index 828b58d00d8d69810b37db39b20520f0cf80e14d..094afb47e97aab6634c8192894c2ba462449513e 100644
--- a/trace_streamer/src/table/js_memory/js_heap_string_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_string_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_trace_function_info_table.h b/trace_streamer/src/table/js_memory/js_heap_trace_function_info_table.h
index 5f76e5c43e84ec14d89774a678d4dcda9e770911..576dd2facb7b6252657bdc333a4a6cdc6726651f 100644
--- a/trace_streamer/src/table/js_memory/js_heap_trace_function_info_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_trace_function_info_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/js_memory/js_heap_trace_node_table.h b/trace_streamer/src/table/js_memory/js_heap_trace_node_table.h
index 93689620fff845330936daf3a161a8f3acce0b55..64ff1787495b409ef4ba0a73a12805661709d4b4 100644
--- a/trace_streamer/src/table/js_memory/js_heap_trace_node_table.h
+++ b/trace_streamer/src/table/js_memory/js_heap_trace_node_table.h
@@ -28,21 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override
-    {
-        UNUSED(fc);
-        UNUSED(ei);
-    }
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/BUILD.gn b/trace_streamer/src/table/monitor/BUILD.gn
index 635cb1be124e30665e02a8387a18e1a2a2f0c8c2..01a01219248f74f65f16efba2242941d69f33623 100644
--- a/trace_streamer/src/table/monitor/BUILD.gn
+++ b/trace_streamer/src/table/monitor/BUILD.gn
@@ -40,20 +40,10 @@ ohos_source_set("monitor_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/table/monitor/cpu_usage_info_table.h b/trace_streamer/src/table/monitor/cpu_usage_info_table.h
index c9ee4084a301e9b07ed3e4925eda17bee9409ec7..bc6afb5f23f510123f0ee141d6a126176089e16d 100644
--- a/trace_streamer/src/table/monitor/cpu_usage_info_table.h
+++ b/trace_streamer/src/table/monitor/cpu_usage_info_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/disk_io_table.h b/trace_streamer/src/table/monitor/disk_io_table.h
index c2d4ca9680454b24e5cd53da1f31de5cd98b0b75..9e8e949a1bd0e475bf377cd0abf40ffb6eb5aba8 100644
--- a/trace_streamer/src/table/monitor/disk_io_table.h
+++ b/trace_streamer/src/table/monitor/disk_io_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/hidump_table.cpp b/trace_streamer/src/table/monitor/hidump_table.cpp
index b18466f26f9111d30f7f93c0decf909606ffc4c4..d72d6832558f304e15cadd2571bf3a9e736aac64 100644
--- a/trace_streamer/src/table/monitor/hidump_table.cpp
+++ b/trace_streamer/src/table/monitor/hidump_table.cpp
@@ -27,71 +27,6 @@ HidumpTable::HidumpTable(const TraceDataCache* dataCache) : TableBase(dataCache)
 }
 
 HidumpTable::~HidumpTable() {}
-
-void HidumpTable::EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
-{
-    constexpr double filterBaseCost = 1000.0; // set-up and tear-down
-    constexpr double indexCost = 2.0;
-    ei.estimatedCost = filterBaseCost;
-
-    auto rowCount = dataCache_->GetConstHidumpData().Size();
-    if (rowCount == 0 || rowCount == 1) {
-        ei.estimatedRows = rowCount;
-        ei.estimatedCost += indexCost * rowCount;
-        return;
-    }
-
-    double filterCost = 0.0;
-    auto constraints = fc.GetConstraints();
-    if (constraints.empty()) { // scan all rows
-        filterCost = rowCount;
-    } else {
-        FilterByConstraint(fc, filterCost, rowCount);
-    }
-    ei.estimatedCost += filterCost;
-    ei.estimatedRows = rowCount;
-    ei.estimatedCost += rowCount * indexCost;
-
-    ei.isOrdered = true;
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = 0; i < orderbys.size(); i++) {
-        switch (orderbys[i].iColumn) {
-            case ID:
-                break;
-            default: // other columns can be sorted by SQLite
-                ei.isOrdered = false;
-                break;
-        }
-    }
-}
-
-void HidumpTable::FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount)
-{
-    auto fcConstraints = fc.GetConstraints();
-    for (int32_t i = 0; i < static_cast<int32_t>(fcConstraints.size()); i++) {
-        if (rowCount <= 1) {
-            // only one row or nothing, needn't filter by constraint
-            filterCost += rowCount;
-            break;
-        }
-        const auto& c = fcConstraints[i];
-        switch (c.col) {
-            case ID: {
-                if (CanFilterId(c.op, rowCount)) {
-                    fc.UpdateConstraint(i, true);
-                    filterCost += 1; // id can position by 1 step
-                } else {
-                    filterCost += rowCount; // scan all rows
-                }
-                break;
-            }
-            default:                    // other column
-                filterCost += rowCount; // scan all rows
-                break;
-        }
-    }
-}
-
 std::unique_ptr<TableBase::Cursor> HidumpTable::CreateCursor()
 {
     return std::make_unique<Cursor>(dataCache_, this);
@@ -105,49 +40,6 @@ HidumpTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBase* table)
 
 HidumpTable::Cursor::~Cursor() {}
 
-int32_t HidumpTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterId(c.op, argv[i]);
-                break;
-            case TS:
-                indexMap_->MixRange(c.op, static_cast<uint64_t>(sqlite3_value_int64(argv[i])),
-                                    hidumpObj_.TimeStampData());
-                break;
-            case FPS:
-                indexMap_->MixRange(c.op, static_cast<uint32_t>(sqlite3_value_int(argv[i])), hidumpObj_.Fpss());
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-
-    return SQLITE_OK;
-}
-
 int32_t HidumpTable::Cursor::Column(int32_t column) const
 {
     switch (column) {
diff --git a/trace_streamer/src/table/monitor/hidump_table.h b/trace_streamer/src/table/monitor/hidump_table.h
index 13e64fbc5deee11b16e981c3daa6ce620bf7a387..682830d84a618067f98d05aac56a3a758d3e0a09 100644
--- a/trace_streamer/src/table/monitor/hidump_table.h
+++ b/trace_streamer/src/table/monitor/hidump_table.h
@@ -28,14 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override;
-    void FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount);
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/live_process_table.h b/trace_streamer/src/table/monitor/live_process_table.h
index 49f1b701a6a3490d6a73e9438195adac5d2b8be5..74023885c43dec5244875d156a2b82273dc80822 100644
--- a/trace_streamer/src/table/monitor/live_process_table.h
+++ b/trace_streamer/src/table/monitor/live_process_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/log_table.h b/trace_streamer/src/table/monitor/log_table.h
index 2bfa50da22ad82e133476a53eaac4272a9caf3ca..f35ee366340dab60732c80995759cbcdf999f290 100644
--- a/trace_streamer/src/table/monitor/log_table.h
+++ b/trace_streamer/src/table/monitor/log_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/memory_ashmem_table.h b/trace_streamer/src/table/monitor/memory_ashmem_table.h
index 332ef843bb0b879999e3a9b0a4cc71fc256a913f..c615b9e240419f3ec0f236accdf619dbfb5c34af 100644
--- a/trace_streamer/src/table/monitor/memory_ashmem_table.h
+++ b/trace_streamer/src/table/monitor/memory_ashmem_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/memory_dma_table.h b/trace_streamer/src/table/monitor/memory_dma_table.h
index 130e14d85c7b33953648aa7743c1052e740425f4..9955741d73366e1b5cc615afc6bcf47213db5f43 100644
--- a/trace_streamer/src/table/monitor/memory_dma_table.h
+++ b/trace_streamer/src/table/monitor/memory_dma_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/memory_process_gpu_table.h b/trace_streamer/src/table/monitor/memory_process_gpu_table.h
index 1787ad8f13b6c36b18dd86ec2b6ed75b4c20122e..2eca087121accd4f104a9e8e5fa3f73f5398e556 100644
--- a/trace_streamer/src/table/monitor/memory_process_gpu_table.h
+++ b/trace_streamer/src/table/monitor/memory_process_gpu_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/memory_window_gpu_table.h b/trace_streamer/src/table/monitor/memory_window_gpu_table.h
index 5dfcb7f5e7d9dca7bc85dcd6f118b852da9eee7f..cf67907d4bfd710fbedaf8ae70a3eac7cad462ef 100644
--- a/trace_streamer/src/table/monitor/memory_window_gpu_table.h
+++ b/trace_streamer/src/table/monitor/memory_window_gpu_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/network_table.h b/trace_streamer/src/table/monitor/network_table.h
index 1241e393b4fc88f18452521dac974d07da12aa28..fdbd9fe308d13979aac96d0de95d0595f71e3c0b 100644
--- a/trace_streamer/src/table/monitor/network_table.h
+++ b/trace_streamer/src/table/monitor/network_table.h
@@ -28,19 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
-
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/paged_memory_sample_table.cpp b/trace_streamer/src/table/monitor/paged_memory_sample_table.cpp
index 5261a6500bd082264541bfba74f6093650ec77d5..19470b31b0ea316c6a3e459d46eecbe32fc611ce 100644
--- a/trace_streamer/src/table/monitor/paged_memory_sample_table.cpp
+++ b/trace_streamer/src/table/monitor/paged_memory_sample_table.cpp
@@ -35,70 +35,6 @@ PagedMemorySampleTable::PagedMemorySampleTable(const TraceDataCache* dataCache)
 
 PagedMemorySampleTable::~PagedMemorySampleTable() {}
 
-void PagedMemorySampleTable::EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei)
-{
-    constexpr double filterBaseCost = 1000.0; // set-up and tear-down
-    constexpr double indexCost = 2.0;
-    ei.estimatedCost = filterBaseCost;
-
-    auto rowCount = dataCache_->GetConstHidumpData().Size();
-    if (rowCount == 0 || rowCount == 1) {
-        ei.estimatedRows = rowCount;
-        ei.estimatedCost += indexCost * rowCount;
-        return;
-    }
-
-    double filterCost = 0.0;
-    auto constraints = fc.GetConstraints();
-    if (constraints.empty()) { // scan all rows
-        filterCost = rowCount;
-    } else {
-        FilterByConstraint(fc, filterCost, rowCount);
-    }
-    ei.estimatedCost += filterCost;
-    ei.estimatedRows = rowCount;
-    ei.estimatedCost += rowCount * indexCost;
-
-    ei.isOrdered = true;
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = 0; i < orderbys.size(); i++) {
-        switch (orderbys[i].iColumn) {
-            case ID:
-                break;
-            default: // other columns can be sorted by SQLite
-                ei.isOrdered = false;
-                break;
-        }
-    }
-}
-
-void PagedMemorySampleTable::FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount)
-{
-    auto fcConstraints = fc.GetConstraints();
-    for (int32_t i = 0; i < static_cast<int32_t>(fcConstraints.size()); i++) {
-        if (rowCount <= 1) {
-            // only one row or nothing, needn't filter by constraint
-            filterCost += rowCount;
-            break;
-        }
-        const auto& c = fcConstraints[i];
-        switch (c.col) {
-            case ID: {
-                if (CanFilterId(c.op, rowCount)) {
-                    fc.UpdateConstraint(i, true);
-                    filterCost += 1; // id can position by 1 step
-                } else {
-                    filterCost += rowCount; // scan all rows
-                }
-                break;
-            }
-            default:                    // other column
-                filterCost += rowCount; // scan all rows
-                break;
-        }
-    }
-}
-
 std::unique_ptr<TableBase::Cursor> PagedMemorySampleTable::CreateCursor()
 {
     return std::make_unique<Cursor>(dataCache_, this);
@@ -111,42 +47,6 @@ PagedMemorySampleTable::Cursor::Cursor(const TraceDataCache* dataCache, TableBas
 }
 
 PagedMemorySampleTable::Cursor::~Cursor() {}
-
-int32_t PagedMemorySampleTable::Cursor::Filter(const FilterConstraints& fc, sqlite3_value** argv)
-{
-    // reset indexMap_
-    indexMap_ = std::make_unique<IndexMap>(0, rowCount_);
-
-    if (rowCount_ <= 0) {
-        return SQLITE_OK;
-    }
-
-    auto& cs = fc.GetConstraints();
-    for (size_t i = 0; i < cs.size(); i++) {
-        const auto& c = cs[i];
-        switch (c.col) {
-            case ID:
-                FilterId(c.op, argv[i]);
-                break;
-            default:
-                break;
-        }
-    }
-
-    auto orderbys = fc.GetOrderBys();
-    for (auto i = orderbys.size(); i > 0;) {
-        i--;
-        switch (orderbys[i].iColumn) {
-            case ID:
-                indexMap_->SortBy(orderbys[i].desc);
-                break;
-            default:
-                break;
-        }
-    }
-    return SQLITE_OK;
-}
-
 int32_t PagedMemorySampleTable::Cursor::Column(int32_t column) const
 {
     switch (column) {
diff --git a/trace_streamer/src/table/monitor/paged_memory_sample_table.h b/trace_streamer/src/table/monitor/paged_memory_sample_table.h
index 82950579f3d2bd5fef4daa5a80989aa44d8536af..0ca82a980ae6913a86147518231308eeba76fbdb 100644
--- a/trace_streamer/src/table/monitor/paged_memory_sample_table.h
+++ b/trace_streamer/src/table/monitor/paged_memory_sample_table.h
@@ -28,14 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override;
-    void FilterByConstraint(FilterConstraints& fc, double& filterCost, size_t rowCount);
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override;
         int32_t Column(int32_t column) const override;
 
     private:
diff --git a/trace_streamer/src/table/monitor/smaps_table.h b/trace_streamer/src/table/monitor/smaps_table.h
index 75d3697e951534eba947d5dd8dda646f8d205c4c..1e89157657153c6fc4871ef2dc21bdd66ff6eb8e 100644
--- a/trace_streamer/src/table/monitor/smaps_table.h
+++ b/trace_streamer/src/table/monitor/smaps_table.h
@@ -28,18 +28,10 @@ public:
     std::unique_ptr<TableBase::Cursor> CreateCursor() override;
 
 private:
-    void EstimateFilterCost(FilterConstraints& fc, EstimatedIndexInfo& ei) override {}
-
     class Cursor : public TableBase::Cursor {
     public:
         explicit Cursor(const TraceDataCache* dataCache, TableBase* table);
         ~Cursor() override;
-        int32_t Filter(const FilterConstraints& fc, sqlite3_value** argv) override
-        {
-            UNUSED(fc);
-            UNUSED(argv);
-            return 0;
-        }
         int32_t Column(int32_t col) const override;
 
     private:
diff --git a/trace_streamer/src/table/native_hook/BUILD.gn b/trace_streamer/src/table/native_hook/BUILD.gn
index 10a75c6c02916966fae7d66ddc8c94693f5c3017..d887de9706c7aa4f7b5398b9063fcfd8756fb8f4 100644
--- a/trace_streamer/src/table/native_hook/BUILD.gn
+++ b/trace_streamer/src/table/native_hook/BUILD.gn
@@ -35,20 +35,10 @@ ohos_source_set("native_hook_tables") {
     "${SRC}/include",
     "${SRC}",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
 }
diff --git a/trace_streamer/src/trace_data/BUILD.gn b/trace_streamer/src/trace_data/BUILD.gn
index a21f04aaef0763e3a254f97ab536b2ecbdc01877..f932a8f88986690044985d25f71e74d50f544f66 100644
--- a/trace_streamer/src/trace_data/BUILD.gn
+++ b/trace_streamer/src/trace_data/BUILD.gn
@@ -32,19 +32,8 @@ ohos_source_set("trace_data") {
     "trace_stdtype.h",
   ]
 
-  if (enable_ts_utest && !use_wasm) {
-    cflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-    ]
-    ldflags = [
-      "-fprofile-arcs",
-      "-ftest-coverage",
-      "--coverage",
-    ]
-    if (is_test) {
-      cflags += [ "-D IS_UT" ]
-    }
+  if (!is_independent_compile) {
+    configs = [ "${TS_DIR}/gn:ts_config" ]
   }
   include_dirs = [
     "${THIRD_PARTY}/sqlite/include",
@@ -62,5 +51,6 @@ ohos_source_set("trace_data") {
     "${SRC}/table/native_hook",
     ".",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
 }
diff --git a/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp b/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp
index 921f3a1c6c042519f5e37645dbca5db935e2f4b1..1dc0d189e9f3dad76d5daafd7e087b21bd190b5e 100644
--- a/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp
+++ b/trace_streamer/src/trace_streamer/trace_streamer_filters.cpp
@@ -37,5 +37,22 @@ namespace SysTuning {
 namespace TraceStreamer {
 TraceStreamerFilters::TraceStreamerFilters() = default;
 TraceStreamerFilters::~TraceStreamerFilters() = default;
+void TraceStreamerFilters::FilterClear()
+{
+    binderFilter_->Clear();
+    sliceFilter_->Clear();
+    cpuFilter_->Clear();
+    irqFilter_->Clear();
+    cpuMeasureFilter_->Clear();
+    threadMeasureFilter_->Clear();
+    threadFilter_->Clear();
+    processMeasureFilter_->Clear();
+    processFilterFilter_->Clear();
+    clockEnableFilter_->Clear();
+    clockDisableFilter_->Clear();
+    clkRateFilter_->Clear();
+    clkDisableFilter_->Clear();
+    binderFilter_->Clear();
+}
 } // namespace TraceStreamer
 } // namespace SysTuning
diff --git a/trace_streamer/src/trace_streamer/trace_streamer_filters.h b/trace_streamer/src/trace_streamer/trace_streamer_filters.h
index d9cd4c4ecc92e370b1f3259020bae8e7e48cc3cc..7b4b1f1ca098982e3d6b3a0ac31965969b032786 100644
--- a/trace_streamer/src/trace_streamer/trace_streamer_filters.h
+++ b/trace_streamer/src/trace_streamer/trace_streamer_filters.h
@@ -41,6 +41,7 @@ class TraceStreamerFilters {
 public:
     TraceStreamerFilters();
     ~TraceStreamerFilters();
+    void FilterClear();
     std::unique_ptr<AnimationFilter> animationFilter_;
     std::unique_ptr<ClockFilterEx> clockFilter_;
     std::unique_ptr<FilterFilter> filterFilter_;
diff --git a/trace_streamer/src/version.cpp b/trace_streamer/src/version.cpp
index 4f42cb94ab86aa7207fdffe51cc10c853808875f..a23579e44a101c050583cad4877a276527240230 100644
--- a/trace_streamer/src/version.cpp
+++ b/trace_streamer/src/version.cpp
@@ -14,5 +14,5 @@
  */
 #include "version.h"
 size_t g_loadSize = 0;
-const std::string g_traceStreamerVersion = "3.4.7";           // version
-const std::string g_traceStreamerPublishVersion = "2023/8/3"; // publish datetime
+const std::string g_traceStreamerVersion = "3.4.8";            // version
+const std::string g_traceStreamerPublishVersion = "2023/8/10"; // publish datetime
diff --git a/trace_streamer/test/BUILD.gn b/trace_streamer/test/BUILD.gn
index 3825b7ca341f06f56eacbd7fbe393a7ac720dc7d..1c4307737aa63ca665f6383c3c6b462a10655b16 100755
--- a/trace_streamer/test/BUILD.gn
+++ b/trace_streamer/test/BUILD.gn
@@ -79,8 +79,8 @@ if (is_test) {
       "${OHOS_TRACE_STREAMER_PROTOS_DIR}/protos/types/plugins/test_data:test_data_cpp",
       "${THIRD_PARTY}/googletest:gtest",
       "${THIRD_PARTY}/googletest:gtest_main",
-      "${THIRD_PARTY}/protobuf:protobuf",
-      "${THIRD_PARTY}/protobuf:protobuf_lite",
+      "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+      "${THIRD_PARTY}/protobuf:protobuf_static",
       "../src:trace_streamer_source",
       "../src/parser/htrace_pbreader_parser:htrace_pbreader_parser",
       "../src/proto_reader:proto_reader",
@@ -105,12 +105,13 @@ if (is_test) {
       "..",
       "${THIRD_PARTY}/googletest/googletest/include/gtest",
       "${THIRD_PARTY}/protobuf/src",
-      "${THIRD_PARTY}/hiperf/include",
-      "${THIRD_PARTY}/hiperf/include/nonlinux/linux",
+      "${PERF_DIR}/hiperf/include",
+      "${PERF_DIR}/hiperf/include/nonlinux/linux",
       "${THIRD_PARTY}/protobuf/src/google/protobuf",
       "${THIRD_PARTY}/json/single_include/nlohmann",
       "${THIRD_PARTY}/perf_include/musl",
       "${THIRD_PARTY}/sqlite/include",
+      "${THIRD_PARTY}/bounds_checking_function/include",
       "../src/parser/htrace_pbreader_parser",
       "../src/parser/htrace_pbreader_parser/htrace_event_parser",
       "../src/parser/htrace_pbreader_parser/htrace_cpu_parser",
diff --git a/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn b/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn
index a86a54848ae9382b4b27212f4d64507f486e6f92..453a3984d39bf05e9bf824360f18a95255958833 100644
--- a/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn
+++ b/trace_streamer/test/test_fuzzer/bytrace_fuzzer/BUILD.gn
@@ -32,6 +32,7 @@ ohos_fuzztest("ts_bytrace_fuzz_test") {
     "../../../src/cfg",
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
   cflags = [
     "-g",
@@ -46,8 +47,8 @@ ohos_fuzztest("ts_bytrace_fuzz_test") {
     "--coverage",
   ]
   deps = [
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
     "../../../src:trace_streamer_source",
     "../../../src/proto_reader:proto_reader",
   ]
diff --git a/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn b/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn
index bc8debc51e4e238138ced0dbd24c3443c8c9f5f2..79df06e323ad357f62c383692666e44ea5ca4130 100644
--- a/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn
+++ b/trace_streamer/test/test_fuzzer/htrace_fuzzer/BUILD.gn
@@ -32,6 +32,7 @@ ohos_fuzztest("ts_htrace_fuzz_test") {
     "../../../src/cfg",
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
   cflags = [
     "-g",
@@ -46,8 +47,8 @@ ohos_fuzztest("ts_htrace_fuzz_test") {
     "--coverage",
   ]
   deps = [
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
     "../../../src:trace_streamer_source",
     "../../../src/proto_reader:proto_reader",
   ]
diff --git a/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn b/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn
index fa0479cac055e809e60356bc713552f21a35ac7f..44dad7920975c65ae5fc5f6a2ea4c04c75459970 100644
--- a/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn
+++ b/trace_streamer/test/test_fuzzer/selector_fuzzer/BUILD.gn
@@ -32,6 +32,7 @@ ohos_fuzztest("ts_selector_fuzz_test") {
     "../../../src/cfg",
     "${THIRD_PARTY}/sqlite/include",
     "${THIRD_PARTY}/protobuf/src",
+    "${THIRD_PARTY}/bounds_checking_function/include",
   ]
   cflags = [
     "-g",
@@ -46,8 +47,8 @@ ohos_fuzztest("ts_selector_fuzz_test") {
     "--coverage",
   ]
   deps = [
-    "${THIRD_PARTY}/protobuf:protobuf",
-    "${THIRD_PARTY}/protobuf:protobuf_lite",
+    "${THIRD_PARTY}/protobuf:protobuf_lite_static",
+    "${THIRD_PARTY}/protobuf:protobuf_static",
     "../../../src:trace_streamer_source",
     "../../../src/proto_reader:proto_reader",
   ]
diff --git a/trace_streamer/test/unittest/animation_filter_test.cpp b/trace_streamer/test/unittest/animation_filter_test.cpp
index 487c7b94ab6b648fb6db13acc0e731d266f9df61..4d618b25c470980fae0da13bfdb0e6102a544970 100644
--- a/trace_streamer/test/unittest/animation_filter_test.cpp
+++ b/trace_streamer/test/unittest/animation_filter_test.cpp
@@ -149,6 +149,21 @@ HWTEST_F(AnimationFilterTest, UpdateDevicePos, TestSize.Level1)
         auto res = stream_.streamFilters_->animationFilter_->UpdateDeviceInfoEvent(point, line);
         EXPECT_FALSE(res);
     }
+
+    std::vector<std::string> validFuncArgs{
+        "(0, 0, 1024, 1920)",
+        "(0,0, 628, 720)",
+        "(0,0, 628, 720)",
+    };
+    for (size_t i = 0; i < validFuncArgs.size(); i++) {
+        stream_.traceDataCache_->GetDeviceInfo()->Clear();
+        point.funcPrefix_ = validFuncPrefix;
+        point.funcArgs_ = validFuncArgs[i];
+        point.name_ = point.funcPrefix_ + " " + point.funcArgs_;
+        point.funcPrefixId_ = stream_.traceDataCache_->GetDataIndex(point.funcPrefix_);
+        auto res = stream_.streamFilters_->animationFilter_->UpdateDeviceInfoEvent(point, line);
+        EXPECT_TRUE(res);
+    }
 }
 /**
  * @tc.name: UpdateDeviceFps
diff --git a/trace_streamer/test/unittest/hisys_event_parser_test.cpp b/trace_streamer/test/unittest/hisys_event_parser_test.cpp
index 32faf5598d70387d0fcfe884aab641439306f34d..779c316488af41c18395bdada644cd10c31798f7 100644
--- a/trace_streamer/test/unittest/hisys_event_parser_test.cpp
+++ b/trace_streamer/test/unittest/hisys_event_parser_test.cpp
@@ -63,7 +63,7 @@ HWTEST_F(HtraceHisysEventParserTest, ParseNoArray, TestSize.Level1)
     ss << jsMessage;
     ss >> jMessage;
     HtraceHisyseventParser HisysEvent(stream_.traceDataCache_.get(), stream_.streamFilters_.get());
-    HisysEvent.JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex);
+    (void)HisysEvent.JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex);
     EXPECT_TRUE(jData.eventSource == "POWER_IDE_BATTERY");
     EXPECT_EQ(jData.timeStamp, 22611696002);
     EXPECT_EQ(maxArraySize, 0);
@@ -104,7 +104,7 @@ HWTEST_F(HtraceHisysEventParserTest, ParseHaveArrayData, TestSize.Level1)
     ss << jsMessage;
     ss >> jMessage;
     HtraceHisyseventParser HisysEvent(stream_.traceDataCache_.get(), stream_.streamFilters_.get());
-    HisysEvent.JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex);
+    (void)HisysEvent.JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex);
     EXPECT_TRUE(jData.eventSource == "POWER_IDE_WIFISCAN");
     EXPECT_EQ(jData.timeStamp, 16611696002);
     EXPECT_EQ(maxArraySize, 3);
@@ -153,7 +153,7 @@ HWTEST_F(HtraceHisysEventParserTest, MixedDataAnalysis, TestSize.Level1)
         ss << *i;
         ss >> jMessage;
         HtraceHisyseventParser HisysEvent(stream_.traceDataCache_.get(), stream_.streamFilters_.get());
-        HisysEvent.JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex);
+        (void)HisysEvent.JGetData(jMessage, jData, maxArraySize, noArrayIndex, arrayIndex);
         if (jData.eventSource == "POWER_IDE_WIFISCAN") {
             EXPECT_TRUE(jData.eventSource == "POWER_IDE_WIFISCAN");
             EXPECT_EQ(jData.timeStamp, 16611696002);
diff --git a/trace_streamer/test/unittest/smaps_parser_test.cpp b/trace_streamer/test/unittest/smaps_parser_test.cpp
index e0594a8eab8bc604d528a474c3bb6d1835216175..2d292c4bd63574a6897a5c244f9ee066fe1c0eb4 100644
--- a/trace_streamer/test/unittest/smaps_parser_test.cpp
+++ b/trace_streamer/test/unittest/smaps_parser_test.cpp
@@ -103,7 +103,7 @@ HWTEST_F(SmapsParserTest, ParseSmapsParseTestMeasureDataSize, TestSize.Level1)
     uint64_t vartualSize = 128;
     uint64_t rss = 112;
     uint64_t pss = 112;
-    uint64_t reside = 87.5;
+    double reside = 87.5;
     SmapsInfo->set_start_addr(startAddr);
     SmapsInfo->set_end_addr(endAddr);
     SmapsInfo->set_permission(permission);
@@ -166,7 +166,7 @@ HWTEST_F(SmapsParserTest, ParseSmapsParseTestMutiMeasureData, TestSize.Level1)
     uint64_t vartualSize0 = 128;
     uint64_t rss0 = 112;
     uint64_t pss0 = 112;
-    uint64_t reside0 = 87.5;
+    double reside0 = 87.5;
     smapsInfo0->set_start_addr(startAddr0);
     smapsInfo0->set_end_addr(endAddr0);
     smapsInfo0->set_permission(permission0);