diff --git a/ide/src/doc/md/quickstart_native_memory.md b/ide/src/doc/md/quickstart_native_memory.md
index d293018d11985faad306abe0c8d04d9daf38b764..f4898b246129a8382b080a6bb312e70c755f9729 100644
--- a/ide/src/doc/md/quickstart_native_memory.md
+++ b/ide/src/doc/md/quickstart_native_memory.md
@@ -53,14 +53,14 @@ Native Memory是查看内存的分配和释放等情况。
 Statistics的Tab页，主要显示了统计明细类型。
 ![GitHub Logo](../../figures/NativeMemory/Statistics.jpg)
 +     Memory Type：内存的类型。
-+     Exsiting：框选区域内申请没有释放的大小。
-+     #Exsiting：框选区域内申请没有释放的次数。
++     Existing：框选区域内申请没有释放的大小。
++     #Existing：框选区域内申请没有释放的次数。
 +     Transient：框选区域内释放的大小。
 +     #Transient：框选区域内释放的次数。
 +     Total Bytes：框选区间内申请的大小。
 +     #Total： 框选区间内申请的次数。
 +     Peak Value： 框选区间内内存申请的峰值。
-+     Exsiting/Total：框选区间内剩余的内存比上申请的内存，其中浅紫色是框选区间内申请的大小/整个时间轴（申请+释放的总大小)，深紫色是框选区间内(申请+释放)的大小/整个时间轴（申请+释放的总大小）。
++     Existing/Total：框选区间内剩余的内存比上申请的内存，其中浅紫色是框选区间内申请的大小/整个时间轴（申请+释放的总大小)，深紫色是框选区间内(申请+释放)的大小/整个时间轴（申请+释放的总大小）。
 
 Call Info的Tab页，主要显示了调用树详细类型。
 ![GitHub Logo](../../figures/NativeMemory/CallInfo.jpg)
@@ -82,15 +82,15 @@ Snapshot List的Tab页，主要显示了各时刻内存的增长的差值。
 +     Timestamp ：时间戳信息。
 +     Net Growth ：自从上次Snapshot的增长量，是计算的分配和释放的。
 +     Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配的。
-+     #Exsiting  ：仍然存在的内存数。
++     #Existing  ：仍然存在的内存数。
 ### Native Memory的辅助信息功能
 在Call Info和Native Memory的Tab页，点击选中某一行，右边画红线处会显示出该行调用栈的树结构信息。
 ![GitHub Logo](../../figures/NativeMemory/nativecallstack.jpg)
 ### Native Memory详细显示的过滤功能
-点击下方的All Allocations可以对Allocation的lifeSpan进行过滤，有三个选择：All Allocatios，Create & Exsiting，Create & Destroyed。
+点击下方的All Allocations可以对Allocation的lifeSpan进行过滤，有三个选择：All Allocatios，Create & Existing，Create & Destroyed。
 ![GitHub Logo](../../figures/NativeMemory/lifespan.jpg)
 +      All Allocations：所有的内存。
-+      Created & Exsiting：创建且被存活的内存。
++      Created & Existing：创建且被存活的内存。
 +      Created & Destroyed： 创建且被销毁的内存。
 点击下方的All Heap&Anonymous可以对内存类型进行过滤。
 ![GitHub Logo](../../figures/NativeMemory/AllocationType.jpg)
diff --git a/ide/src/doc/quickstart_Application_operation_skills.html b/ide/src/doc/quickstart_Application_operation_skills.html
index 845473d568a54b893a04f60e56ac7e3e48aa9893..9942e0170bd59b26bae59dc2b18a45eefe7368d9 100644
--- a/ide/src/doc/quickstart_Application_operation_skills.html
+++ b/ide/src/doc/quickstart_Application_operation_skills.html
@@ -808,10 +808,10 @@
         导入so以后，在搜索框中输入libnative_hook.z.so，会发现符号化数据已经更新。<br />
         <img src="../figures/OperationSkills/Operation_soimport_new.jpg" alt="GitHub Logo" />
       </p>
-      <h3 class="mume-header fontColor">网页连接文件打开接口</h3>
+      <h3 class="mume-header fontColor">网页链接文件打开接口</h3>
     
       <p class="fontColor">
-        网页连接文件打开接口可以在网址后增加文件地址，打开后直接打开trace。<br />
+        网页链接文件打开接口可以在网址后增加文件地址，打开后直接打开trace。<br />
         接口的url路径如下：<br />
         <img src="../figures/OperationSkills/Opertion_urltrace.jpg" alt="GitHub Logo" />
       </p>
@@ -866,7 +866,7 @@
       <h3 class="mume-header fontColor">单个泳道图显示为多行时可折叠为1行（收藏和非收藏）</h3>
     
       <p class="fontColor">
-        单个泳道图点击会将泳道图折叠为一行，折腾后的字体是蓝色。<br />
+        单个泳道图点击会将泳道图折叠为一行，折叠后的字体是蓝色。<br />
         <img src="../figures/OperationSkills/Tabskillfold.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">已支持的泳道图按照模板分类显示，NaitveMemory，Hisysevent，应用内存等</h3>
diff --git a/ide/src/doc/quickstart_animation.html b/ide/src/doc/quickstart_animation.html
index 93c949f5a8c0ae27edf99f9bd1e7631ac1bd42e2..29ab5dfdf607f674b7366e6639629fe835b55f49 100644
--- a/ide/src/doc/quickstart_animation.html
+++ b/ide/src/doc/quickstart_animation.html
@@ -801,7 +801,7 @@
       <ul class="fontColor">
         <li>
           <pre class="smartperf-text fontColor light">
-Animation effect：动效配置项的总开关。
+Animation effect：动效配置项的总开关。解析时请打开对应的Flags标记(Disabled切换为Enabled)。
 </pre>
         </li>
       </ul>
diff --git a/ide/src/doc/quickstart_app_startup.html b/ide/src/doc/quickstart_app_startup.html
index ce0107c86155c73cef5234249762191940d95568..36fbd7096bcaf3fe193329e995fca706c5168960 100644
--- a/ide/src/doc/quickstart_app_startup.html
+++ b/ide/src/doc/quickstart_app_startup.html
@@ -803,7 +803,7 @@
       <ul class="fontColor">
         <li>
           <pre class="smartperf-text fontColor light">
-App startup：配置项的总开关。
+App startup：配置项的总开关。解析时请打开对应的Flags标记(Disabled切换为Enabled)。
 </pre>
         </li>
       </ul>
diff --git a/ide/src/doc/quickstart_arkts.html b/ide/src/doc/quickstart_arkts.html
index 9edcb0f5e1f61fec02dcce4d1e0cb680d20b9a73..f88fdfd488246ff3eb13420e658fcea0a166503f 100644
--- a/ide/src/doc/quickstart_arkts.html
+++ b/ide/src/doc/quickstart_arkts.html
@@ -797,14 +797,14 @@
       <h4 class="mume-header fontColor">Cpuprofiler的抓取配置参数</h4>
 
       <p class="fontColor">
-        打开Start Ark Ts Record总开关下面的Start cpu profiler开关抓取cpuprofiler数据。
+        打开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层耗时长的函数和阶段。
+        将抓取的Cpuprofiler文件导入到SmartPerf中，查看Ts层耗时长的函数和阶段。
         <br />
         <img src="../figures/arkts/cpuprofilerrow.jpg" alt="GitHub Logo" />
       </p>
diff --git a/ide/src/doc/quickstart_hilog.html b/ide/src/doc/quickstart_hilog.html
index 7c9528d1abab9262086d52aad15b5a181cbd46f2..949612296e3e67570316d2e580b7c090acc172bb 100644
--- a/ide/src/doc/quickstart_hilog.html
+++ b/ide/src/doc/quickstart_hilog.html
@@ -799,7 +799,7 @@
   <h4 class="mume-header fontColor">Hilog的抓取配置参数</h4>
 
   <p class="fontColor">
-    打开Hilog开关抓取taskpool数据。<br />
+    打开Hilog开关抓取Hilog数据。<br />
     <img src="../figures/Hilog/hilogconfig.jpg" alt="GitHub Logo" />
   </p>
   <h3 class="mume-header fontColor">Hilog展示说明</h3>
diff --git a/ide/src/doc/quickstart_hisystemevent.html b/ide/src/doc/quickstart_hisystemevent.html
index 609629f5dd0d8a3e666d9516390e49790ad2810d..707ace3921c10f46070f005fc597f342b0ea0600 100644
--- a/ide/src/doc/quickstart_hisystemevent.html
+++ b/ide/src/doc/quickstart_hisystemevent.html
@@ -835,7 +835,7 @@ System Event泳道： 以条状图显示，红色代表后台任务(WORKSCHEDULE
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
-Power泳道：应用各个子类的功耗柱状图、折现图以及应用各个子类绘制的图例，鼠标的悬浮可以显示出各个子类功耗的具体值。
+Power泳道：应用各个子类的功耗柱状图、折线图以及应用各个子类绘制的图例，鼠标的悬浮可以显示出各个子类功耗的具体值。
 </pre>
       </li>
       <li>
diff --git a/ide/src/doc/quickstart_memory_template.html b/ide/src/doc/quickstart_memory_template.html
index ebbe64ce5bac8b7757a54204afdd80dcbb24c158..4b4f3cf3986f156fbdac3055f339ac36ee0ff4ff 100644
--- a/ide/src/doc/quickstart_memory_template.html
+++ b/ide/src/doc/quickstart_memory_template.html
@@ -1126,8 +1126,8 @@ MinSize：Gpu内存的最小值。
       <h3 class="mume-header fontColor">VM Tracker下的smaps泳道图的点选和框选功能</h3>
 
       <p class="fontColor">
-        点选和框选Dirty，Swapped，RSS，PSS，USS的5个泳道图中任一个显示的都是一样的内容，会显示Smaps Statistic和Smaps
-        sample的tab页。
+        点选Dirty，Swapped，RSS，PSS，USS的5个泳道图中任一个显示的都是一样的内容，会显示Smaps Statistic，Smaps
+        sample，Smaps Comparison，Native Heap的tab页。
         <br />
         Smaps Statistic的tab页展示。
         <br />
@@ -1304,10 +1304,60 @@ Protection： 内存块的权限(读写执行执行)。
           >
         </li>
       </ul>
+      <p class="fontColor">
+        Native Heap的tab页展示。
+        <br />
+        <img src="../figures/Allmemory/snativeheaptab.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">
+Total： 该时间点Smaps中type为NATIVE_HEAP的Size。
+</pre
+          >
+        </li>
+        <li>
+          <pre class="smartperf-text fontColor light">
+RenderServiceCpu：渲染框架数据，计算规则为该时间点上memroy_rs_image表中type!="pixelmap"的所有项累加Size。
+</pre
+          >
+        </li>
+        <li>
+          <pre class="smartperf-text fontColor light">
+SkiaCpu：渲染框架数据，取该时间点memory_cpu表中total_size的值。
+</pre
+          >
+        </li>
+        <li>
+          <pre class="smartperf-text fontColor light">
+GLESHostCache： GLES-CPU缓存，取该时间点memory_profile表中total_size之和。
+</pre
+          >
+        </li>
+        <li>
+          <pre class="smartperf-text fontColor light">
+ProcessCache： Total-RenderServiceCpu-SkiaCpu-GLESHostCache的值。
+</pre
+          >
+        </li>
+      </ul>
+      <p class="fontColor">
+        框选Dirty，Swapped，RSS，PSS，USS的5个泳道图中任一个显示的都是一样的内容，会显示Smaps Statistic和Smaps
+        sample的tab页。
+        <br />
+        Smaps Statistic的tab页和Smaps sample的tab页展示（同点选）。
+        <br />
+      </p>
       <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泳道图。
+        GPU泳道图分为GL，Skia Gpu Dump Toal，Skia Gpu Dump Window，Skia Gpu Memory泳道图。
         <br />
         <img src="../figures/Allmemory/gpurow.jpg" alt="GitHub Logo" />
         <br />
diff --git a/ide/src/doc/quickstart_native_memory.html b/ide/src/doc/quickstart_native_memory.html
index 34526429af32ab37533108947f8fc276e767cd57..be0ade86cd3b57975affe702fe1aa95db4a3a644 100644
--- a/ide/src/doc/quickstart_native_memory.html
+++ b/ide/src/doc/quickstart_native_memory.html
@@ -891,12 +891,12 @@ Memory Type：内存的类型。
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
-Exsiting：框选区域内申请没有释放的大小。
+Existing：框选区域内申请没有释放的大小。
 </pre>
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
-#Exsiting：框选区域内申请没有释放的次数。
+#Existing：框选区域内申请没有释放的次数。
 </pre>
       </li>
       <li>
@@ -926,7 +926,7 @@ Peak Value： 框选区间内内存申请的峰值。
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
-Exsiting/Total：框选区间内剩余的内存比上申请的内存，其中浅紫色是框选区间内申请的大小/整个时间轴（申请+释放的总大小)，深紫色是框选区间内(申请+释放)的大小/整个时间轴（申请+释放的总大小）。
+Existing/Total：框选区间内剩余的内存比上申请的内存，其中浅紫色是框选区间内申请的大小/整个时间轴（申请+释放的总大小)，深紫色是框选区间内(申请+释放)的大小/整个时间轴（申请+释放的总大小）。
 </pre>
       </li>
     </ul>
@@ -937,7 +937,7 @@ Exsiting/Total：框选区间内剩余的内存比上申请的内存，其中浅
     <ul class="fontColor">
       <li>
           <pre class="smartperf-text fontColor light">
-Symble Name：每个内存分配的调用栈。
+Symbol Name：每个内存分配的调用栈。
 </pre>
       </li>
       <li>
@@ -1009,7 +1009,7 @@ Timestamp ：时间戳信息。
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
-Net Growth ：自从上次Snapshot的增长量，是计算的分配和释放的。
+Net Growth ：自从上次Snapshot的增长量，是计算分配和释放的。
 </pre>
       </li>
       <li>
@@ -1019,7 +1019,7 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
-#Exsiting  ：仍然存在的内存数。
+#Existing  ：仍然存在的内存数。
 </pre>
       </li>
     </ul>
@@ -1032,8 +1032,8 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配
     <h3 class="mume-header fontColor">Native Memory详细显示的过滤功能</h3>
 
     <p class="fontColor">
-      点击下方的All Allocations可以对Allocation的lifeSpan进行过滤，有三个选择：All Allocatios，Create &amp;
-      Exsiting，Create &amp; Destroyed。<br />
+      点击下方的All Allocations可以对Allocation lifeSpan进行过滤，有三个选择：All Allocations，Created &amp;
+      Existing，Created &amp; Destroyed。<br />
       <img src="../figures/NativeMemory/lifespan.jpg" alt="GitHub Logo" />
     </p>
     <ul class="fontColor">
@@ -1044,7 +1044,7 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配
       </li>
       <li>
           <pre class="smartperf-text fontColor light">
- Created &amp; Exsiting：创建且被存活的内存。
+ Created &amp; Existing：创建且存活的内存。
 </pre>
       </li>
       <li>
@@ -1054,7 +1054,7 @@ Total Growth ：自从上次Snapshot的增长量，是计算的每一次分配
       </li>
     </ul>
     <p class="fontColor">
-      点击下方的All Heap&amp;Anonymous可以对内存类型进行过滤。<br />
+      点击下方的All Heap&amp;Anonymous VM可以对内存类型进行过滤。<br />
       <img src="../figures/NativeMemory/AllocationType.jpg" alt="GitHub Logo" />
     </p>
     <ul class="fontColor">
diff --git a/ide/src/doc/quickstart_parsing_ability.html b/ide/src/doc/quickstart_parsing_ability.html
index 48f39267bc5f92aaecb812bdd0903c55551377d7..9b4bba0d2097dab630bf2b773d427a7f278d7543 100644
--- a/ide/src/doc/quickstart_parsing_ability.html
+++ b/ide/src/doc/quickstart_parsing_ability.html
@@ -800,8 +800,8 @@
       <h3 class="mume-header fontColor">超大trace分段打开，超大trace按照固定大小切割，分段打开显示</h3>
 
       <p class="fontColor">
-        超大trace分段打开是对现有配置抓取的同一种时钟源数据源的。也就是配置命令下发的抓取有效。Htrace数据按照端测切割的大小的分成多个文件，并将不能切割的hiperf、ebpf、arkts的数据单独存储。IDE通过将这几种源文件数据存储在IndexedDB，并调用trace
-        streamer去进行切割数据，并在IDE测过滤筛选出切割的数据进行展示。
+        超大trace分段打开是对现有配置抓取的同一种时钟源数据源的。也就是配置命令下发的抓取有效。Htrace数据按照端侧切割的大小分成多个文件，并将不能切割的hiperf、ebpf、arkts的数据单独存储。IDE通过将这几种源文件数据存储在IndexedDB，并调用trace
+        streamer去进行切割数据，并在IDE侧过滤筛选出切割的数据进行展示。
       </p>
       <h4 class="mume-header fontColor">超大trace浏览器用户数据目录配置说明</h4>
 
@@ -810,7 +810,7 @@
 
       <pre class="smartperf-text fontColor light">D:\deskTop\msedge.exe.lnk --user-data-dir=D:\Edgedata
 	D:\deskTop\msedge.exe.lnk    浏览器的exe执行文件位置(或者浏览器exe的快捷方式位置)
-	--user-data-dir=D:\Edgedata   指定用户目录数据位置,本地除系统盘外的位置都可以，内存尽量大一点
+	--user-data-dir=D:\Edgedata   指定用户目录数据位置，本地除系统盘外的位置都可以，内存尽量大一点
 </pre>
       <h5 class="mume-header fontColor">浏览器exe或者exe快捷方式目录和名称不能有带空格</h5>
 
@@ -850,7 +850,7 @@ Single file max size： trace文件分割的大小。
       <h3 class="mume-header fontColor">web端支持已打开的trace文件转换成systrace，并可下载</h3>
 
       <p class="fontColor">
-        已打开的trace界面，增加trace conver按钮，支持将htrace和row trace转为systrace。<br />
+        已打开的trace界面，增加convert to systrace按钮，支持将htrace和row trace转为systrace。<br />
         <img src="../figures/parsingability/traceconvert.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">
diff --git a/ide/src/doc/quickstart_schedulinganalysis.html b/ide/src/doc/quickstart_schedulinganalysis.html
index 32dca3547ffe59f7d20aad2c72b5a9a0f61c57a9..d22311103d0f7565f35fb506f9b5731b08050672 100644
--- a/ide/src/doc/quickstart_schedulinganalysis.html
+++ b/ide/src/doc/quickstart_schedulinganalysis.html
@@ -799,7 +799,7 @@
       <h3 class="mume-header fontColor">Scheduling analysis抓取界面配置说明</h3>
 
       <p class="fontColor">
-        打开Scheduling analysis开关抓取调度分析数据。<br />
+        打开Scheduling analysis开关抓取调度分析数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。<br />
         <img src="../figures/Schedulinganalysis/scheduset.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">Scheduling analysis文件的抓取</h3>
diff --git a/ide/src/doc/quickstart_taskpool.html b/ide/src/doc/quickstart_taskpool.html
index a0152dfc543c38c3216054d95b3f3948afcb305e..007e0b3d743fa8873aef960781655193859a319a 100644
--- a/ide/src/doc/quickstart_taskpool.html
+++ b/ide/src/doc/quickstart_taskpool.html
@@ -797,7 +797,7 @@
       <h2 class="mume-header fontColor">TaskPool的抓取</h2>
       <h4 class="mume-header fontColor">TaskPool的抓取配置参数</h4>
       <p class="fontColor">
-        打开Task pool开关抓取taskpool数据。<br />
+        打开Task pool开关抓取taskpool数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。<br />
         <img src="../figures/Taskpool/taskpoolconfig.jpg" alt="GitHub Logo" />
       </p>
       <h3 class="mume-header fontColor">TaskPool展示说明</h3>
diff --git a/ide/src/figures/Allmemory/snativeheaptab.jpg b/ide/src/figures/Allmemory/snativeheaptab.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..34d50b6a0fa5fc26f8e35ba2ed5391b89c7bc7fb
Binary files /dev/null and b/ide/src/figures/Allmemory/snativeheaptab.jpg differ
diff --git a/ide/src/figures/Allmemory/ssampletab.jpg b/ide/src/figures/Allmemory/ssampletab.jpg
index 84ce148e6cdfc00620ed7836cd74fd9afb16933d..108035924a2ea2a46754718b0a27954ad4852495 100644
Binary files a/ide/src/figures/Allmemory/ssampletab.jpg 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
index f80e1fc88821b199374c478468bb6d8513ac21a9..b156353c6830ce497f5d0c6d64773fa5f647297b 100644
Binary files a/ide/src/figures/Allmemory/sstaaticstab.jpg and b/ide/src/figures/Allmemory/sstaaticstab.jpg differ
diff --git a/ide/src/figures/Hilog/hilogconfig.jpg b/ide/src/figures/Hilog/hilogconfig.jpg
index 96a0a58606118aa2badd0169ead963b3ddb0c02d..5daac869f3f95c9611bd805e266efeade37e5152 100644
Binary files a/ide/src/figures/Hilog/hilogconfig.jpg and b/ide/src/figures/Hilog/hilogconfig.jpg differ
diff --git a/ide/src/trace/bean/ThreadStruct.ts b/ide/src/trace/bean/ThreadStruct.ts
index 59e8a75fae17fb500709584857b9ac681d09f40e..a9301658c83e93b4dd81af7cbc2b3c31b76202f5 100644
--- a/ide/src/trace/bean/ThreadStruct.ts
+++ b/ide/src/trace/bean/ThreadStruct.ts
@@ -26,6 +26,7 @@ export class ThreadStruct extends BaseStruct {
   static sColor = '#FBFBFB';
   static hoverThreadStruct: ThreadStruct | undefined;
   static selectThreadStruct: ThreadStruct | undefined;
+  static selectThreaStructList: Array<ThreadStruct> = new Array<ThreadStruct>();
   hasSched: number | undefined;
   pid: number | undefined;
   processName: string | undefined;
diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts
index 89e711aa928b8cc0e671c65c3c670360fbdd4096..d0e5d80c0551cee47aecb26cc2c171631b7ee69d 100644
--- a/ide/src/trace/component/SpHelp.ts
+++ b/ide/src/trace/component/SpHelp.ts
@@ -150,19 +150,6 @@ export class SpHelp extends BaseElement {
                     `/application/doc/quickstart_page_fault.html?${that.dark} width="100%" height="100%"></object>`;
                 },
               },
-              {
-                title: '进程smaps抓取和展示说明',
-                icon: '',
-                clickHandler: function (item: MenuItem) {
-                  SpStatisticsHttpUtil.addOrdinaryVisitAction({
-                    event: 'smaps',
-                    action: 'help_doc',
-                  });
-                  that.appContent!.innerHTML =
-                    '<object type="text/html" data=' +
-                    `/application/doc/quickstart_smaps.html?${that.dark} width="100%" height="100%"></object>`;
-                },
-              },
               {
                 title: '系统内存抓取和展示说明',
                 icon: '',
diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts
index 3db03698763d9048a89b6b2dc2b9ebb125bdff74..cbdd17a343fc330e8478dcfeee298b8b316d3320 100644
--- a/ide/src/trace/component/SpSystemTrace.ts
+++ b/ide/src/trace/component/SpSystemTrace.ts
@@ -264,6 +264,8 @@ export class SpSystemTrace extends BaseElement {
     }
     startPoint.y = startPoint.rowEL!.translateY! + startPoint.offsetY;
     endPoint.y = endPoint.rowEL!.translateY! + endPoint.offsetY;
+    startPoint.backrowEL = startPoint.rowEL;
+    endPoint.backrowEL = endPoint.rowEL;
     this.linkNodes.push([startPoint, endPoint]);
   }
 
@@ -782,8 +784,8 @@ export class SpSystemTrace extends BaseElement {
 
           let isIntersect = (filterFunc: FuncStruct, rangeData: RangeSelectStruct) =>
             Math.max(filterFunc.startTs! + filterFunc.dur!, rangeData!.endNS || 0) -
-              Math.min(filterFunc.startTs!, rangeData!.startNS || 0) <
-              filterFunc.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0) &&
+            Math.min(filterFunc.startTs!, rangeData!.startNS || 0) <
+            filterFunc.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0) &&
             filterFunc.funName!.indexOf('H:Task ') >= 0;
           let taskData = it.dataList.filter((taskData: FuncStruct) => {
             taskData!.tid = parseInt(it.rowId!);
@@ -1168,7 +1170,7 @@ export class SpSystemTrace extends BaseElement {
         } else if (it.rowType == TraceRow.ROW_TYPE_JANK) {
           let isIntersect = (filterJank: JanksStruct, rangeData: RangeSelectStruct) =>
             Math.max(filterJank.ts! + filterJank.dur!, rangeData!.endNS || 0) -
-              Math.min(filterJank.ts!, rangeData!.startNS || 0) <
+            Math.min(filterJank.ts!, rangeData!.startNS || 0) <
             filterJank.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0);
           if (it.name == 'Actual Timeline') {
             selection.jankFramesData = [];
@@ -1251,7 +1253,7 @@ export class SpSystemTrace extends BaseElement {
         } else if (it.rowType == TraceRow.ROW_TYPE_FRAME_ANIMATION) {
           let isIntersect = (animationStruct: FrameAnimationStruct, selectStruct: RangeSelectStruct) =>
             Math.max(animationStruct.startTs! + animationStruct.dur!, selectStruct!.endNS || 0) -
-              Math.min(animationStruct.startTs!, selectStruct!.startNS || 0) <
+            Math.min(animationStruct.startTs!, selectStruct!.startNS || 0) <
             animationStruct.dur! + (selectStruct!.endNS || 0) - (selectStruct!.startNS || 0);
           let frameAnimationList = it.dataList.filter((frameAnimationBean: FrameAnimationStruct) => {
             return isIntersect(frameAnimationBean, TraceRow.rangeSelectObject!);
@@ -1431,7 +1433,7 @@ export class SpSystemTrace extends BaseElement {
     window.subscribe(window.SmartEvent.UI.SliceMark, (data) => {
       this.sliceMarkEventHandler(data);
     });
-    window.subscribe(window.SmartEvent.UI.TraceRowComplete, (tr) => {});
+    window.subscribe(window.SmartEvent.UI.TraceRowComplete, (tr) => { });
     window.subscribe(window.SmartEvent.UI.RefreshCanvas, () => {
       this.refreshCanvas(false);
     });
@@ -1893,7 +1895,7 @@ export class SpSystemTrace extends BaseElement {
           // 如果没有找到帽子，则绘制一个旗子
           let time = Math.round(
             (x * (TraceRow.range?.endNS! - TraceRow.range?.startNS!)) / this.timerShaftEL!.canvas!.offsetWidth +
-              TraceRow.range?.startNS!
+            TraceRow.range?.startNS!
           );
           this.timerShaftEL!.sportRuler!.drawTriangle(time, 'squre');
         }
@@ -2078,13 +2080,13 @@ export class SpSystemTrace extends BaseElement {
       this.timerShaftEL?.setSlicesMark(
         FrameAnimationStruct.selectFrameAnimationStruct.startTs || 0,
         (FrameAnimationStruct.selectFrameAnimationStruct.startTs || 0) +
-          (FrameAnimationStruct.selectFrameAnimationStruct.dur || 0)
+        (FrameAnimationStruct.selectFrameAnimationStruct.dur || 0)
       );
     } else if (JsCpuProfilerStruct.selectJsCpuProfilerStruct) {
       this.timerShaftEL?.setSlicesMark(
         JsCpuProfilerStruct.selectJsCpuProfilerStruct.startTime || 0,
         (JsCpuProfilerStruct.selectJsCpuProfilerStruct.startTime || 0) +
-          (JsCpuProfilerStruct.selectJsCpuProfilerStruct.totalTime || 0)
+        (JsCpuProfilerStruct.selectJsCpuProfilerStruct.totalTime || 0)
       );
     } else {
       this.slicestime = this.timerShaftEL?.setSlicesMark();
@@ -2536,7 +2538,7 @@ export class SpSystemTrace extends BaseElement {
     if (!SportRuler.isMouseInSportRuler) {
       this.traceSheetEL?.setAttribute('mode', 'hidden');
     }
-    this.removeLinkLinesByBusinessType('task');
+    this.removeLinkLinesByBusinessType('task', 'thread');
     this.refreshCanvas(true);
     JankStruct.delJankLineFlag = true;
   }
@@ -2741,6 +2743,7 @@ export class SpSystemTrace extends BaseElement {
       this.traceSheetEL?.displayCpuData(
         CpuStruct.selectCpuStruct!,
         (wakeUpBean) => {
+          this.removeLinkLinesByBusinessType('thread');
           CpuStruct.wakeupBean = wakeUpBean;
           this.refreshCanvas(true);
         },
@@ -2829,6 +2832,7 @@ export class SpSystemTrace extends BaseElement {
             );
           }
           this.hoverStructNull();
+          let flag = JSON.parse(JSON.stringify(ThreadStruct.selectThreadStruct));
           this.selectStructNull();
           this.wakeupListNull();
           ThreadStruct.hoverThreadStruct = findEntry;
@@ -2839,7 +2843,16 @@ export class SpSystemTrace extends BaseElement {
             threadClickHandler,
             cpuClickHandler,
             threadClickPreviousHandler,
-            threadClickNextHandler
+            threadClickNextHandler,
+            (datas) => {
+              this.removeLinkLinesByBusinessType('thread');
+              datas.forEach((data) => {
+                let endParentRow = this.shadowRoot?.querySelector<TraceRow<any>>(
+                  `trace-row[row-id='${data.pid}'][folder]`
+                );
+                this.drawThreadLine(endParentRow, flag, data);
+              });
+            }
           );
           this.scrollToProcess(`${d.tid}`, `${d.processId}`, 'thread', true);
         }
@@ -2956,6 +2969,7 @@ export class SpSystemTrace extends BaseElement {
       );
       this.timerShaftEL?.modifyFlagList(undefined);
     } else if (clickRowType === TraceRow.ROW_TYPE_THREAD && ThreadStruct.hoverThreadStruct) {
+      this.removeLinkLinesByBusinessType('thread');
       ThreadStruct.selectThreadStruct = ThreadStruct.hoverThreadStruct;
       this.timerShaftEL?.drawTriangle(ThreadStruct.selectThreadStruct!.startTime || 0, 'inverted');
       this.traceSheetEL?.displayThreadData(
@@ -3139,7 +3153,7 @@ export class SpSystemTrace extends BaseElement {
       AppStartupStruct.selectStartupStruct = AppStartupStruct.hoverStartupStruct;
       this.traceSheetEL?.displayStartupData(AppStartupStruct.selectStartupStruct, scrollToFuncHandler);
       this.timerShaftEL?.modifyFlagList(undefined);
-    }else if(clickRowType === TraceRow.ROW_TYPE_ALL_APPSTARTUPS && AllAppStartupStruct.hoverStartupStruct){
+    } else if (clickRowType === TraceRow.ROW_TYPE_ALL_APPSTARTUPS && AllAppStartupStruct.hoverStartupStruct) {
       AllAppStartupStruct.selectStartupStruct = AllAppStartupStruct.hoverStartupStruct;
       this.traceSheetEL?.displayAllStartupData(AllAppStartupStruct.selectStartupStruct!, scrollToFuncHandler)
       this.timerShaftEL?.modifyFlagList(undefined);
@@ -3235,6 +3249,9 @@ export class SpSystemTrace extends BaseElement {
     if (!JankStruct.selectJankStruct) {
       this.removeLinkLinesByBusinessType('janks');
     }
+    if (!ThreadStruct.selectThreadStruct) {
+      this.removeLinkLinesByBusinessType('thread');
+    }
     if (row) {
       let pointEvent = this.createPointEvent(row);
       SpStatisticsHttpUtil.addOrdinaryVisitAction({
@@ -3678,6 +3695,110 @@ export class SpSystemTrace extends BaseElement {
     }
   }
 
+  drawThreadLine(endParentRow: any, selectThreadStruct: ThreadStruct, data: any) {
+    let collectList = this.favoriteChartListEL!.getCollectRows();
+    let startRow: any;
+    if (selectThreadStruct == undefined || selectThreadStruct == null) {
+      return;
+    }
+    let selectRowId = selectThreadStruct?.tid;
+    startRow = this.shadowRoot?.querySelector<TraceRow<ThreadStruct>>(
+      `trace-row[row-id='${selectRowId}'][row-type='thread']`
+    );
+    if (!startRow) {
+      for (let index = 0; index < collectList.length; index++) {
+        let collectChart = collectList[index];
+        if (collectChart.rowId === selectRowId?.toString() && collectChart.rowType === 'thread') {
+          startRow = collectChart;
+          break;
+        }
+      }
+    }
+    function collectionHasThread(threadRow: any): boolean {
+      for (let item of collectList!) {
+        if (item.rowId === threadRow.rowId && item.rowType === threadRow.rowType) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    if (endParentRow) {
+      //终点的父泳道过滤出选中的Struct
+      let endRowStruct: any;
+      //泳道展开的情况，查找endRowStruct
+      endRowStruct = this.shadowRoot?.querySelector<TraceRow<ThreadStruct>>(
+        `trace-row[row-id='${data.tid}'][row-type='thread']`
+      );
+      //泳道未展开的情况，查找endRowStruct
+      if (!endRowStruct) {
+        endRowStruct = endParentRow.childrenList.find((item: TraceRow<ThreadStruct>) => {
+          return item.rowId === `${data.tid}` && item.rowType === 'thread'
+        });
+      }
+      if (endRowStruct) {
+        let findJankEntry = endRowStruct!.dataList!.find((dat: any) => dat.startTime == data.startTime && dat.dur! > 0);
+        //连线规则
+        let ts: number = 0;
+        if (findJankEntry) {
+          ts = selectThreadStruct.startTime! + selectThreadStruct.dur! / 2;
+          let startParentRow: any;
+          // startRow为子泳道，子泳道不存在，使用父泳道
+          if (startRow) {
+            startParentRow = this.shadowRoot?.querySelector<TraceRow<ThreadStruct>>(
+              `trace-row[row-id='${startRow.rowParentId}'][folder]`
+            );
+          } else {
+            startRow = this.shadowRoot?.querySelector<TraceRow<ThreadStruct>>(
+              `trace-row[row-id='${selectThreadStruct?.pid}'][folder]`
+            );
+          }
+          let endY = endRowStruct!.translateY!;
+          let endRowEl = endRowStruct;
+          let endOffSetY = 20 * 0.5;
+          let expansionFlag = collectionHasThread(endRowStruct);
+          if (!endParentRow.expansion && expansionFlag) {
+            endY = endParentRow!.translateY!;
+            endRowEl = endParentRow;
+            endOffSetY = 10 * 0.5;
+          }
+          let startY = startRow!.translateY!;
+          let startRowEl = startRow;
+          let startOffSetY = 20 * 0.5;
+          expansionFlag = collectionHasThread(startRow);
+          if (startParentRow && !startParentRow.expansion && expansionFlag) {
+            startY = startParentRow!.translateY!;
+            startRowEl = startParentRow;
+            startOffSetY = 10 * 0.5;
+          }
+          this.addPointPair(
+            this.makePoint(
+              ns2xByTimeShaft(ts, this.timerShaftEL!),
+              ts,
+              startY,
+              startRowEl!,
+              startOffSetY,
+              'thread',
+              LineType.StraightLine,
+              selectThreadStruct.startTime == ts,
+            ),
+            this.makePoint(
+              ns2xByTimeShaft(findJankEntry.startTime!, this.timerShaftEL!),
+              findJankEntry.startTime!,
+              endY,
+              endRowEl,
+              endOffSetY,
+              'thread',
+              LineType.StraightLine,
+              true,
+            )
+          );
+          this.refreshCanvas(true);
+        }
+      }
+    }
+  }
+
   translateByMouseMove(ev: MouseEvent): void {
     ev.preventDefault();
     let offset = 0;
@@ -4414,8 +4535,8 @@ export class SpSystemTrace extends BaseElement {
     procedurePool.clearCache();
     Utils.clearData();
     InitAnalysis.getInstance().isInitAnalysis = true;
-    procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => {});
-    procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => {});
+    procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => { });
+    procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => { });
     this.times.clear();
     setVSyncDisable();
   }
diff --git a/ide/src/trace/component/chart/SpProcessChart.ts b/ide/src/trace/component/chart/SpProcessChart.ts
index d4e2d068493b97523c41ad37dee3d3ebdb4ba34f..56cc3717cc94a877caaada46a5b4d00e72290cf7 100644
--- a/ide/src/trace/component/chart/SpProcessChart.ts
+++ b/ide/src/trace/component/chart/SpProcessChart.ts
@@ -431,75 +431,146 @@ export class SpProcessChart {
         if (offsetYTimeOut) {
           clearTimeout(offsetYTimeOut);
         }
-        if (e.detail.expansion) {
-          offsetYTimeOut = setTimeout(() => {
-            this.trace.linkNodes.forEach((linkNodeItem) => {
-              JankStruct.selectJankStructList?.forEach((selectProcessStruct: any) => {
-                if (e.detail.rowId == selectProcessStruct.pid) {
-                  JankStruct.selectJankStruct = selectProcessStruct;
-                  JankStruct.hoverJankStruct = selectProcessStruct;
+        if (JankStruct.selectJankStruct !== null && JankStruct.selectJankStruct !== undefined) {
+          if (e.detail.expansion) {
+            offsetYTimeOut = setTimeout(() => {
+              this.trace.linkNodes.forEach((linkNodeItem) => {
+                JankStruct.selectJankStructList?.forEach((selectProcessStruct: any) => {
+                  if (e.detail.rowId == selectProcessStruct.pid) {
+                    JankStruct.selectJankStruct = selectProcessStruct;
+                    JankStruct.hoverJankStruct = selectProcessStruct;
+                  }
+                });
+                if (linkNodeItem[0].rowEL.collect) {
+                  linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                }
+                linkNodeItem[0].y = linkNodeItem[0].rowEL!.translateY! + linkNodeItem[0].offsetY;
+                if (linkNodeItem[1].rowEL.collect) {
+                  linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                }
+                linkNodeItem[1].y = linkNodeItem[1].rowEL!.translateY! + linkNodeItem[1].offsetY;
+                if (actualRow) {
+                  if (linkNodeItem[0].rowEL.rowId == e.detail.rowId) {
+                    linkNodeItem[0].x = ns2xByTimeShaft(linkNodeItem[0].ns, this.trace.timerShaftEL!);
+                    linkNodeItem[0].y = actualRow!.translateY! + linkNodeItem[0].offsetY * 2;
+                    linkNodeItem[0].offsetY = linkNodeItem[0].offsetY * 2;
+                    linkNodeItem[0].rowEL = actualRow!;
+                  } else if (linkNodeItem[1].rowEL.rowId == e.detail.rowId) {
+                    linkNodeItem[1].x = ns2xByTimeShaft(linkNodeItem[1].ns, this.trace.timerShaftEL!);
+                    linkNodeItem[1].y = actualRow!.translateY! + linkNodeItem[1].offsetY * 2;
+                    linkNodeItem[1].offsetY = linkNodeItem[1].offsetY * 2;
+                    linkNodeItem[1].rowEL = actualRow!;
+                  }
                 }
               });
-              if (linkNodeItem[0].rowEL.collect) {
-                linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.getBoundingClientRect().top - 195;
-              } else {
-                linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
-              }
-              linkNodeItem[0].y = linkNodeItem[0].rowEL!.translateY! + linkNodeItem[0].offsetY;
-              if (linkNodeItem[1].rowEL.collect) {
-                linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.getBoundingClientRect().top - 195;
-              } else {
-                linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
-              }
-              linkNodeItem[1].y = linkNodeItem[1].rowEL!.translateY! + linkNodeItem[1].offsetY;
-              if (actualRow) {
-                if (linkNodeItem[0].rowEL.rowId == e.detail.rowId) {
+            }, 300);
+          } else {
+            if (JankStruct!.selectJankStruct) {
+              JankStruct.selectJankStructList?.push(<JankStruct>JankStruct!.selectJankStruct);
+            }
+            offsetYTimeOut = setTimeout(() => {
+              this.trace.linkNodes?.forEach((linkProcessItem) => {
+                if (linkProcessItem[0].rowEL.collect) {
+                  linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkProcessItem[0].rowEL.translateY =
+                    linkProcessItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                }
+                linkProcessItem[0].y = linkProcessItem[0].rowEL!.translateY! + linkProcessItem[0].offsetY;
+                if (linkProcessItem[1].rowEL.collect) {
+                  linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkProcessItem[1].rowEL.translateY =
+                    linkProcessItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                }
+                linkProcessItem[1].y = linkProcessItem[1].rowEL!.translateY! + linkProcessItem[1].offsetY;
+                if (linkProcessItem[0].rowEL.rowParentId == e.detail.rowId) {
+                  linkProcessItem[0].x = ns2xByTimeShaft(linkProcessItem[0].ns, this.trace.timerShaftEL!);
+                  linkProcessItem[0].y = processRow!.translateY! + linkProcessItem[0].offsetY / 2;
+                  linkProcessItem[0].offsetY = linkProcessItem[0].offsetY / 2;
+                  linkProcessItem[0].rowEL = processRow!;
+                } else if (linkProcessItem[1].rowEL.rowParentId == e.detail.rowId) {
+                  linkProcessItem[1].x = ns2xByTimeShaft(linkProcessItem[1].ns, this.trace.timerShaftEL!);
+                  linkProcessItem[1].y = processRow!.translateY! + linkProcessItem[1].offsetY / 2;
+                  linkProcessItem[1].offsetY = linkProcessItem[1].offsetY / 2;
+                  linkProcessItem[1].rowEL = processRow!;
+                }
+              });
+            }, 300);
+          }
+        } else {
+          if (e.detail.expansion) {
+            offsetYTimeOut = setTimeout(() => {
+              this.trace.linkNodes.forEach((linkNodeItem) => {
+                ThreadStruct.selectThreadStructList?.forEach((selectProcessStruct: any) => {
+                  if (e.detail.rowId == selectProcessStruct.pid) {
+                    ThreadStruct.selectThreadStruct = selectProcessStruct;
+                    ThreadStruct.hoverThreadStruct = selectProcessStruct;
+                  }
+                });
+                if (linkNodeItem[0].rowEL.expansion && linkNodeItem[0].backrowEL) {
+                  linkNodeItem[0].rowEL = linkNodeItem[0].backrowEL;
+                  if (linkNodeItem[0].rowEL.collect) {
+                    linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.getBoundingClientRect().top - 195;
+                  } else {
+                    linkNodeItem[0].rowEL.translateY = linkNodeItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                  }
                   linkNodeItem[0].x = ns2xByTimeShaft(linkNodeItem[0].ns, this.trace.timerShaftEL!);
-                  linkNodeItem[0].y = actualRow!.translateY! + linkNodeItem[0].offsetY * 2;
                   linkNodeItem[0].offsetY = linkNodeItem[0].offsetY * 2;
-                  linkNodeItem[0].rowEL = actualRow!;
-                } else if (linkNodeItem[1].rowEL.rowId == e.detail.rowId) {
+                  linkNodeItem[0].y = linkNodeItem[0].rowEL.translateY + linkNodeItem[0].offsetY;
+                }
+                if (linkNodeItem[1].rowEL.expansion && linkNodeItem[1].backrowEL) {
+                  linkNodeItem[1].rowEL = linkNodeItem[1].backrowEL;
+                  if (linkNodeItem[1].rowEL.collect) {
+                    linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.getBoundingClientRect().top - 195;
+                  } else {
+                    linkNodeItem[1].rowEL.translateY = linkNodeItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                  }
                   linkNodeItem[1].x = ns2xByTimeShaft(linkNodeItem[1].ns, this.trace.timerShaftEL!);
-                  linkNodeItem[1].y = actualRow!.translateY! + linkNodeItem[1].offsetY * 2;
                   linkNodeItem[1].offsetY = linkNodeItem[1].offsetY * 2;
-                  linkNodeItem[1].rowEL = actualRow!;
+                  linkNodeItem[1].y = linkNodeItem[1].rowEL!.translateY! + linkNodeItem[1].offsetY;
                 }
-              }
-            });
-          }, 300);
-        } else {
-          if (JankStruct!.selectJankStruct) {
-            JankStruct.selectJankStructList?.push(<JankStruct>JankStruct!.selectJankStruct);
+              });
+            }, 300);
+          } else {
+            if (ThreadStruct!.selectThreadStruct) {
+              ThreadStruct.selectThreadStructList?.push(<ThreadStruct>ThreadStruct!.selectThreadStruct);
+            }
+            offsetYTimeOut = setTimeout(() => {
+              this.trace.linkNodes?.forEach((linkProcessItem) => {
+                if (linkProcessItem[0].rowEL.collect) {
+                  linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkProcessItem[0].rowEL.translateY =
+                    linkProcessItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                }
+                linkProcessItem[0].y = processRow!.translateY + linkProcessItem[0].offsetY;//11
+                if (linkProcessItem[1].rowEL.collect) {
+                  linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.getBoundingClientRect().top - 195;
+                } else {
+                  linkProcessItem[1].rowEL.translateY =
+                    linkProcessItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
+                }
+                linkProcessItem[1].y = linkProcessItem[1].rowEL!.translateY + linkProcessItem[1].offsetY;
+                if (linkProcessItem[0].rowEL.rowParentId == e.detail.rowId) {
+                  linkProcessItem[0].x = ns2xByTimeShaft(linkProcessItem[0].ns, this.trace.timerShaftEL!);
+                  linkProcessItem[0].y = processRow!.translateY! + linkProcessItem[0].offsetY / 2;
+                  linkProcessItem[0].offsetY = linkProcessItem[0].offsetY / 2;
+                  linkProcessItem[0].rowEL = processRow!;
+                }
+                if (linkProcessItem[1].rowEL.rowParentId == e.detail.rowId) {
+                  linkProcessItem[1].x = ns2xByTimeShaft(linkProcessItem[1].ns, this.trace.timerShaftEL!);
+                  linkProcessItem[1].y = processRow!.translateY! + linkProcessItem[1].offsetY / 2;
+                  linkProcessItem[1].offsetY = linkProcessItem[1].offsetY / 2;
+                  linkProcessItem[1].rowEL = processRow!;
+                }
+              });
+            }, 300);
           }
-          offsetYTimeOut = setTimeout(() => {
-            this.trace.linkNodes?.forEach((linkProcessItem) => {
-              if (linkProcessItem[0].rowEL.collect) {
-                linkProcessItem[0].rowEL.translateY = linkProcessItem[0].rowEL.getBoundingClientRect().top - 195;
-              } else {
-                linkProcessItem[0].rowEL.translateY =
-                  linkProcessItem[0].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
-              }
-              linkProcessItem[0].y = linkProcessItem[0].rowEL!.translateY! + linkProcessItem[0].offsetY;
-              if (linkProcessItem[1].rowEL.collect) {
-                linkProcessItem[1].rowEL.translateY = linkProcessItem[1].rowEL.getBoundingClientRect().top - 195;
-              } else {
-                linkProcessItem[1].rowEL.translateY =
-                  linkProcessItem[1].rowEL.offsetTop - this.trace.rowsPaneEL!.scrollTop;
-              }
-              linkProcessItem[1].y = linkProcessItem[1].rowEL!.translateY! + linkProcessItem[1].offsetY;
-              if (linkProcessItem[0].rowEL.rowParentId == e.detail.rowId) {
-                linkProcessItem[0].x = ns2xByTimeShaft(linkProcessItem[0].ns, this.trace.timerShaftEL!);
-                linkProcessItem[0].y = processRow!.translateY! + linkProcessItem[0].offsetY / 2;
-                linkProcessItem[0].offsetY = linkProcessItem[0].offsetY / 2;
-                linkProcessItem[0].rowEL = processRow!;
-              } else if (linkProcessItem[1].rowEL.rowParentId == e.detail.rowId) {
-                linkProcessItem[1].x = ns2xByTimeShaft(linkProcessItem[1].ns, this.trace.timerShaftEL!);
-                linkProcessItem[1].y = processRow!.translateY! + linkProcessItem[1].offsetY / 2;
-                linkProcessItem[1].offsetY = linkProcessItem[1].offsetY / 2;
-                linkProcessItem[1].rowEL = processRow!;
-              }
-            });
-          }, 300);
         }
         let refreshTimeOut = setTimeout(() => {
           this.trace.refreshCanvas(true);
diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts
index 429072e1cb15b13bfb3da517df1081010084852c..4992fe7993cf170814d8c1199f004ef204675756 100644
--- a/ide/src/trace/component/trace/base/TraceSheet.ts
+++ b/ide/src/trace/component/trace/base/TraceSheet.ts
@@ -283,7 +283,7 @@ export class TraceSheet extends BaseElement {
           } else if (
             navRoot!.offsetHeight <= moveY &&
             search!.offsetHeight + timerShaft!.offsetHeight + borderTop + spacer!.offsetHeight <=
-              window.innerHeight - moveY
+            window.innerHeight - moveY
           ) {
             tabs!.style.height = moveY + 'px';
             node!.style.height = moveY - navRoot!.offsetHeight + 'px';
@@ -482,14 +482,16 @@ export class TraceSheet extends BaseElement {
     scrollCallback: ((e: ThreadStruct) => void) | undefined,
     scrollWakeUp: (d: any) => void | undefined,
     scrollPreviousData: (d: ThreadStruct) => void,
-    scrollNextData: (d: ThreadStruct) => void
+    scrollNextData: (d: ThreadStruct) => void,
+    callback: ((data: Array<any>) => void) | undefined = undefined,
   ) =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setThreadData(
       data,
       scrollCallback,
       scrollWakeUp,
       scrollPreviousData,
-      scrollNextData
+      scrollNextData,
+      callback
     );
   displayMemData = (data: ProcessMemStruct): void =>
     this.displayTab<TabPaneCurrentSelection>('current-selection').setMemData(data);
@@ -805,9 +807,9 @@ export class TraceSheet extends BaseElement {
     if (selection && selection.nativeMemoryAllProcess.length > 1) {
       this.switchDiv!.style.display = 'flex';
       if (this.isProcessEqual(selection.nativeMemoryAllProcess)) {
-        if (this.processTree){
-          for (const data of this.processTree.treeData){
-            if (data.key === `${selection.nativeMemoryCurrentIPid}`){
+        if (this.processTree) {
+          for (const data of this.processTree.treeData) {
+            if (data.key === `${selection.nativeMemoryCurrentIPid}`) {
               data.checked = true;
             } else {
               data.checked = false;
@@ -844,7 +846,7 @@ export class TraceSheet extends BaseElement {
     let component: any = this.shadowRoot
       ?.querySelector<LitTabpane>(`#tabs lit-tabpane[key='${key}']`)
       ?.children.item(0);
-    if (component) {  
+    if (component) {
       this.selection!.isRowClick = false;
       component.data = this.selection;
     }
diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
index c0a612866f45661284fd5bff794c5bed09651ac3..a0b979d9c7764ccee6522561488da13fb21f5850 100644
--- a/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
+++ b/ide/src/trace/component/trace/sheet/TabPaneCurrentSelection.ts
@@ -456,7 +456,8 @@ export class TabPaneCurrentSelection extends BaseElement {
     scrollCallback: ((d: any) => void) | undefined,
     scrollWakeUp: (d: any) => void | undefined,
     scrollPreviousData: (d: any) => void | undefined,
-    scrollNextData: (d: any) => void | undefined
+    scrollNextData: (d: any) => void | undefined,
+    callback: ((data: Array<any>) => void) | undefined = undefined
   ): void {
     //线程信息
     this.setTableHeight('550px');
@@ -467,6 +468,7 @@ export class TabPaneCurrentSelection extends BaseElement {
       leftTitle.innerText = 'Thread State';
     }
     let list: any[] = [];
+    let jankJumperList = new Array<ThreadTreeNode>();
     list.push({
       name: 'StartTime(Relative)',
       value: getTimeString(data.startTime || 0),
@@ -584,12 +586,17 @@ export class TabPaneCurrentSelection extends BaseElement {
           });
         });
       }
+      let timeLineNode = new ThreadTreeNode(data.tid!, data.pid!, data.startTime!);
+      jankJumperList.push(timeLineNode);
       if (args.length > 0) {
         args.forEach((arg) => {
           list.push({ name: arg.keyName, value: arg.strValue });
         });
       }
       this.currentSelectionTbl!.dataSource = list;
+      if (callback) {
+        callback(jankJumperList);
+      }
       this.currentSelectionTbl?.shadowRoot?.querySelector('#next-state-click')?.addEventListener('click', () => {
         if (scrollNextData) {
           scrollNextData(data);
@@ -816,27 +823,27 @@ export class TabPaneCurrentSelection extends BaseElement {
       this.currentSelectionTbl!.dataSource = list;
     }
   }
-  setAllStartupData(data: AllAppStartupStruct,scrollCallback: Function): void{
+  setAllStartupData(data: AllAppStartupStruct, scrollCallback: Function): void {
     this.setTableHeight('550px');
     this.initCanvas();
     let allStartUpLeftTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#leftTitle');
     let allStartUpmiddleTitle: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightText');
-    let allStartUpRightButton:HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightButton');
-    if(allStartUpmiddleTitle) allStartUpmiddleTitle.style.visibility = 'hidden';
-    if(allStartUpRightButton) allStartUpRightButton.style.visibility = 'hidden';
+    let allStartUpRightButton: HTMLElement | null | undefined = this?.shadowRoot?.querySelector('#rightButton');
+    if (allStartUpmiddleTitle) allStartUpmiddleTitle.style.visibility = 'hidden';
+    if (allStartUpRightButton) allStartUpRightButton.style.visibility = 'hidden';
     if (allStartUpLeftTitle) {
       allStartUpLeftTitle.innerText = 'Details';
     }
     let list: any[] = [];
-    list.push({name: "Name", value: data.stepName!})
+    list.push({ name: "Name", value: data.stepName! })
     list.push({
       name: "StartTime(Relative)",
       value: getTimeString(data.startTs || 0)
-      });
+    });
     list.push({
       name: "StartTime(Absolute)",
-      value:((data.startTs || 0) + (window as any).recordStartNS) / 1000000000 + 's'
-      });
+      value: ((data.startTs || 0) + (window as any).recordStartNS) / 1000000000 + 's'
+    });
     list.push({
       name: "EndTime(Relative)",
       value: getTimeString((data.startTs || 0) + (data.dur || 0))
@@ -846,7 +853,7 @@ export class TabPaneCurrentSelection extends BaseElement {
       value: ((data.startTs || 0) + (data.dur || 0) + (window as any).recordStartNS) / 1000000000 + 's'
     })
     list.push({
-      name:"Dur",
+      name: "Dur",
       value: getTimeString(data.dur || 0)
     })
     this.currentSelectionTbl!.dataSource = list;
@@ -1260,7 +1267,7 @@ export class TabPaneCurrentSelection extends BaseElement {
     this.currentSelectionTbl = this.shadowRoot?.querySelector<LitTable>('#selectionTbl');
     this.wakeupListTbl = this.shadowRoot?.querySelector<LitTable>('#wakeupListTbl');
     this.scrollView = this.shadowRoot?.querySelector<HTMLDivElement>('#scroll_view');
-    this.currentSelectionTbl?.addEventListener('column-click', (ev: any) => {});
+    this.currentSelectionTbl?.addEventListener('column-click', (ev: any) => { });
     window.subscribe(window.SmartEvent.UI.WakeupList, (data: Array<WakeupBean>) => this.showWakeupListTableData(data));
   }
 
@@ -1444,3 +1451,14 @@ export class JankTreeNode {
 
   children: Array<JankTreeNode> = [];
 }
+
+export class ThreadTreeNode {
+  tid: number = 0;
+  pid: number = -1;
+  startTime: number = 1;
+  constructor(tid: number, pid: number, startTime: number) {
+    this.tid = tid;
+    this.pid = pid;
+    this.startTime = startTime;
+  }
+}
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
index c37ed2773958333d4e2931ecc82392f04418ff70..a7d0e1ca1865b498d441bbf166c88d3b166c46bd 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts
@@ -48,10 +48,10 @@ export class RequestMessage {
   totalNS: any;
   slicesTime:
     | {
-        startTime: number | null;
-        endTime: number | null;
-        color: string | null;
-      }
+      startTime: number | null;
+      endTime: number | null;
+      color: string | null;
+    }
     | undefined;
   range: any;
   scale: any;
@@ -64,9 +64,9 @@ export class RequestMessage {
   id: any;
   postMessage:
     | {
-        (message: any, targetOrigin: string, transfer?: Transferable[]): void;
-        (message: any, options?: WindowPostMessageOptions): void;
-      }
+      (message: any, targetOrigin: string, transfer?: Transferable[]): void;
+      (message: any, options?: WindowPostMessageOptions): void;
+    }
     | undefined;
 }
 
@@ -99,8 +99,8 @@ export function ns2Timestamp(ns: number): string {
   return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second
     .toString()
     .padStart(2, '0')}:${millisecond.toString().padStart(3, '0')}:${microsecond
-    .toString()
-    .padStart(3, '0')}:${nanosecond.toString().padStart(3, '0')}`;
+      .toString()
+      .padStart(3, '0')}:${nanosecond.toString().padStart(3, '0')}`;
 }
 
 const offsetX = 5;
@@ -476,6 +476,7 @@ export class Point {
 export enum LineType {
   brokenLine,
   bezierCurve,
+  StraightLine
 }
 
 export class PairPoint {
@@ -488,6 +489,7 @@ export class PairPoint {
   lineType?: LineType;
   business: string = '';
   hidden?: boolean = false;
+  backrowEL?: TraceRow<any>;
   constructor(
     rowEL: TraceRow<any>,
     x: number,
@@ -537,10 +539,10 @@ export function drawFlagLine(
   frame: any,
   slicesTime:
     | {
-        startTime: number | null | undefined;
-        endTime: number | null | undefined;
-        color: string | null | undefined;
-      }
+      startTime: number | null | undefined;
+      endTime: number | null | undefined;
+      color: string | null | undefined;
+    }
     | undefined
 ) {
   if (commonCtx) {
@@ -743,97 +745,97 @@ export function drawSelectionRange(context: any, params: TraceRow<any>) {
       context.globalAlpha = 1;
     }
 
-   // 绘制方法H:RSMainThread::DoComposition平均帧率的箭头指示线条
-   if (params._docompositionList?.length) {
-    const rateList: Array<number> = [...new Set(params.docompositionList)];
-    if (rateList.length >= 2) {
-      // 计算平均帧率  
-      let cutres: number = (rateList[rateList.length - 1]! - rateList[0]!);
-      let avgFrameRate: string = ((rateList.length - 1) / cutres * 1000000000).toFixed(1) + 'fps';
-
-      let avgRateStartX = Math.floor(
-        ns2x(
-          rateList[0]!,
-          TraceRow.range?.startNS ?? 0,
-          TraceRow.range?.endNS ?? 0,
-          TraceRow.range?.totalNS ?? 0,
-          params.frame
-        )
-      );
-      let avgRateEndX = Math.floor(
-        ns2x(
-          rateList[rateList.length - 1]!,
+    // 绘制方法H:RSMainThread::DoComposition平均帧率的箭头指示线条
+    if (params._docompositionList?.length) {
+      const rateList: Array<number> = [...new Set(params.docompositionList)];
+      if (rateList.length >= 2) {
+        // 计算平均帧率  
+        let cutres: number = (rateList[rateList.length - 1]! - rateList[0]!);
+        let avgFrameRate: string = ((rateList.length - 1) / cutres * 1000000000).toFixed(1) + 'fps';
+
+        let avgRateStartX = Math.floor(
+          ns2x(
+            rateList[0]!,
+            TraceRow.range?.startNS ?? 0,
+            TraceRow.range?.endNS ?? 0,
+            TraceRow.range?.totalNS ?? 0,
+            params.frame
+          )
+        );
+        let avgRateEndX = Math.floor(
+          ns2x(
+            rateList[rateList.length - 1]!,
+            TraceRow.range?.startNS ?? 0,
+            TraceRow.range?.endNS ?? 0,
+            TraceRow.range?.totalNS ?? 0,
+            params.frame
+          )
+        );
+        const textWidth = context.measureText(avgFrameRate).width;
+        const textHeight = 25;
+        const padding = 5;
+        let textX = Math.floor(ns2x(
+          (rateList[0]! + rateList[rateList.length - 1]!) / 2,
           TraceRow.range?.startNS ?? 0,
           TraceRow.range?.endNS ?? 0,
           TraceRow.range?.totalNS ?? 0,
           params.frame
-        )
-      );
-      const textWidth = context.measureText(avgFrameRate).width;
-      const textHeight = 25;
-      const padding = 5;
-      let textX = Math.floor(ns2x(
-        (rateList[0]! + rateList[rateList.length - 1]!) / 2,
-        TraceRow.range?.startNS ?? 0,
-        TraceRow.range?.endNS ?? 0,
-        TraceRow.range?.totalNS ?? 0,
-        params.frame
-      )) - textWidth / 2;
-      const textY = params.frame.y + 25;
+        )) - textWidth / 2;
+        const textY = params.frame.y + 25;
 
-      //左移到边界，不画线和文字
-      if (avgRateStartX <= 0) {
-        avgRateStartX = -100;
-      }
-      if (avgRateEndX <= 0) {
-        avgRateEndX = -100;
-      }
-      if (textX <= 0) {
-        textX = -100;
-      }
-      //右移到边界，不画线和文字
-      if (textX + textWidth / 2 >= params.frame.width) {
-        textX = params.frame.width + 100
-      }
-      if (avgRateStartX >= params.frame.width) {
-        avgRateStartX = params.frame.width + 100;
-      }
-      if (avgRateEndX >= params.frame.width) {
-        avgRateEndX = params.frame.width + 100;
-      }
-      // 绘制文字背景矩形  
-      context.fillStyle = 'red';
-      context.fillRect(textX - padding, textY - textHeight + padding, textWidth + padding * 2, textHeight - padding * 2);
-
-      context.lineWidth = 2;
-      context.strokeStyle = 'yellow';
-      context.beginPath();
-      context.moveTo(avgRateStartX, textY);
-      context.lineTo(avgRateEndX, textY);
-      context.stroke();
-
-      const arrowSize = 5.5;
-      const arrowHead = (x: number, y: number, direction: 'left' | 'right') => {
+        //左移到边界，不画线和文字
+        if (avgRateStartX <= 0) {
+          avgRateStartX = -100;
+        }
+        if (avgRateEndX <= 0) {
+          avgRateEndX = -100;
+        }
+        if (textX <= 0) {
+          textX = -100;
+        }
+        //右移到边界，不画线和文字
+        if (textX + textWidth / 2 >= params.frame.width) {
+          textX = params.frame.width + 100
+        }
+        if (avgRateStartX >= params.frame.width) {
+          avgRateStartX = params.frame.width + 100;
+        }
+        if (avgRateEndX >= params.frame.width) {
+          avgRateEndX = params.frame.width + 100;
+        }
+        // 绘制文字背景矩形  
+        context.fillStyle = 'red';
+        context.fillRect(textX - padding, textY - textHeight + padding, textWidth + padding * 2, textHeight - padding * 2);
+
+        context.lineWidth = 2;
+        context.strokeStyle = 'yellow';
         context.beginPath();
-        const headX = x + (direction === 'left' ? arrowSize : -arrowSize);
-        const headY = y - arrowSize / 2;
-        context.moveTo(x, y);
-        context.lineTo(headX, headY);
-        context.lineTo(headX, y + arrowSize);
-        context.closePath();
-
-        context.fillStyle = 'yellow';
-        context.fill();
-      };
-      arrowHead(avgRateStartX, textY - 1, 'left');
-      arrowHead(avgRateEndX, textY - 1, 'right');
-
-      context.fillStyle = 'white';
-      context.fillText(avgFrameRate, textX, textY - 8);
+        context.moveTo(avgRateStartX, textY);
+        context.lineTo(avgRateEndX, textY);
+        context.stroke();
+
+        const arrowSize = 5.5;
+        const arrowHead = (x: number, y: number, direction: 'left' | 'right') => {
+          context.beginPath();
+          const headX = x + (direction === 'left' ? arrowSize : -arrowSize);
+          const headY = y - arrowSize / 2;
+          context.moveTo(x, y);
+          context.lineTo(headX, headY);
+          context.lineTo(headX, y + arrowSize);
+          context.closePath();
+
+          context.fillStyle = 'yellow';
+          context.fill();
+        };
+        arrowHead(avgRateStartX, textY - 1, 'left');
+        arrowHead(avgRateEndX, textY - 1, 'right');
+
+        context.fillStyle = 'white';
+        context.fillText(avgFrameRate, textX, textY - 8);
+      }
     }
   }
 }
-}
 
 export function drawWakeUp(
   wakeUpContext: CanvasRenderingContext2D | any,
@@ -973,6 +975,9 @@ export function drawLinkLines(
       case LineType.bezierCurve:
         drawBezierCurve([newFirstNode, newSecondNode], maxWidth, context, percentage);
         break;
+      case LineType.StraightLine:
+        drawStraightLine([newFirstNode, newSecondNode], maxWidth, context);
+        break;
       default:
         drawBezierCurve([newFirstNode, newSecondNode], maxWidth, context, percentage);
     }
@@ -1059,6 +1064,65 @@ function drawBezierCurve(it: PairPoint[], maxWidth: number, context: CanvasRende
   }
 }
 
+function drawStraightLine(it: PairPoint[], maxWidth: number, context: CanvasRenderingContext2D) {
+  let startPoint = it[0].x > it[1].x ? it[1] : it[0];
+  let endPoint = it[0].x > it[1].x ? it[0] : it[1];
+
+  let arrowSize = 8;
+  if (startPoint && endPoint) {
+    //左移到边界，不画线
+    if (startPoint.x <= 0) {
+      startPoint.x = -100;
+    }
+    if (endPoint.x <= 0) {
+      endPoint.x = -100;
+    }
+    //右移到边界，不画线
+    if (startPoint.x >= maxWidth) {
+      startPoint.x = maxWidth + 100;
+    }
+    if (endPoint.x >= maxWidth) {
+      endPoint.x = maxWidth + 100;
+    }
+
+    context.beginPath();
+    context.lineWidth = 2;
+    context.strokeStyle = '#0000FF';
+
+    context.moveTo(startPoint.x, startPoint.y);
+    context.lineTo(endPoint.x, endPoint.y);
+
+    // 绘制箭头
+    let arrow = Math.atan2(endPoint.y - startPoint.y, endPoint.x - startPoint.x);
+    context.moveTo(endPoint.x, endPoint.y);
+    context.lineTo(
+      endPoint.x - arrowSize * Math.cos(arrow - Math.PI / 6),
+      endPoint.y - arrowSize * Math.sin(arrow - Math.PI / 6)
+    );
+    context.moveTo(endPoint.x, endPoint.y);
+    context.lineTo(
+      endPoint.x - arrowSize * Math.cos(arrow + Math.PI / 6),
+      endPoint.y - arrowSize * Math.sin(arrow + Math.PI / 6)
+    );
+
+    // 绘制另一端箭头
+    arrow = Math.atan2(startPoint.y - endPoint.y, startPoint.x - endPoint.x);
+    context.moveTo(startPoint.x, startPoint.y);
+    context.lineTo(
+      startPoint.x - arrowSize * Math.cos(arrow - Math.PI / 6),
+      startPoint.y - arrowSize * Math.sin(arrow - Math.PI / 6)
+    );
+    context.moveTo(startPoint.x, startPoint.y);
+    context.lineTo(
+      startPoint.x - arrowSize * Math.cos(arrow + Math.PI / 6),
+      startPoint.y - arrowSize * Math.sin(arrow + Math.PI / 6)
+    );
+
+    context.stroke();
+    context.closePath();
+  }
+}
+
 function drawBrokenLine(it: PairPoint[], maxWidth: number, context: CanvasRenderingContext2D): void {
   let brokenLineStart = it[0].x > it[1].x ? it[1] : it[0];
   let brokenLineEnd = it[0].x > it[1].x ? it[0] : it[1];
@@ -1137,7 +1201,7 @@ export function drawLoading(
   frame: any,
   left: number,
   right: number
-) {}
+) { }
 
 export function drawString(ctx: CanvasRenderingContext2D, str: string, textPadding: number, frame: Rect, data: any) {
   if (data.textMetricsWidth === undefined) {
diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
index b56d5dd76672b289cdcf5e7915f405edfef12fee..6a31c89391734bcb7cc6dd4dfadf18b9ce6754fd 100644
--- a/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
+++ b/ide/src/trace/database/ui-worker/ProcedureWorkerThread.ts
@@ -58,7 +58,7 @@ export class ThreadRender extends Render {
     threadReq.context.closePath();
   }
 
-  render(threadReq: RequestMessage, threadList: Array<any>, threadFilter: Array<any>) {}
+  render(threadReq: RequestMessage, threadList: Array<any>, threadFilter: Array<any>) { }
 }
 
 const padding = 3;
@@ -71,6 +71,7 @@ export class ThreadStruct extends BaseThreadStruct {
   static sColor = '#FBFBFB';
   static hoverThreadStruct: ThreadStruct | undefined;
   static selectThreadStruct: ThreadStruct | undefined;
+  static selectThreadStructList: Array<ThreadStruct> = new Array<ThreadStruct>();
   argSetID: number | undefined;
   translateY: number | undefined;
   textMetricsWidth: number | undefined;