diff --git a/skywalking-webui/demo/treeDetail.html b/skywalking-webui/demo/treeDetail.html
new file mode 100644
index 000000000..233ea3725
--- /dev/null
+++ b/skywalking-webui/demo/treeDetail.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+  <style>
+    .loginIco {
+      width: 160px;
+      height: 50px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container-fluid">
+    <div class="row" style="margin-top:10px">
+      <div class="col-md-1 col-xs-6 loginIco">
+        <a href="#">
+          <img src="./image/logo.png" class="img-responsive center-block" />
+        </a>
+      </div>
+      <div class="col-md-6 col-xs-6" style=" margin-top:8px;">
+        <div class="input-group">
+          <input type="text" class="form-control">
+          <span class="input-group-addon btn btn-primary">搜索</span>
+        </div>
+      </div>
+      <div class="col-md-2 col-md-offset-2">
+        <div class="row" style="margin-top:10px">
+          <div class="dropdown">
+            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+              Xin
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+              <li><a href="#">新增应用</a></li>
+              <li class="disabled"><a href="#">新增应用</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#">新增应用</a></li>
+              <li><a href="#">新增应用</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr/>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-10">
+          <table class="table table-hover" style="font-size:12px;">
+            <thead>
+              <tr>
+                <th>ViewPoint</th>
+                <th>应用</th>
+                <th>调用次数</th>
+                <th>平均耗时</th>
+                <th>错误次数</th>
+              </tr>
+            </thead>
+            <tbody id="dataBody">
+              <tr id="a">
+                <td>Http://localhost:8080/order/save1</td>
+                <td>Order-Application</td>
+                <td>100</td>
+                <td>20.0ms</td>
+                <td>0</td>
+              </tr>
+              <tr id="b">
+                <td>&nbsp;&nbsp;<a>com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
+                <td>Account-Application</td>
+                <td>100</td>
+                <td>20.0ms</td>
+                <td>0</td>
+              </tr>
+              <tr id="c">
+                <td>&nbsp;&nbsp;&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
+                <td>Biling-Application</td>
+                <td>100</td>
+                <td>20.0ms</td>
+                <td>0</td>
+              </tr>
+              <tr id="d">
+                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
+                <td>Order-Application</td>
+                <td>100</td>
+                <td>20.0ms</td>
+                <td>0</td>
+              </tr>
+              <tr id="e">
+                <td>&nbsp;&nbsp;<a>com.ai.aisse.core.dao.impl.Syn...AisseTimer(java.sql.Timestamp)</a></td>
+                <td>Order-Application</td>
+                <td>100</td>
+                <td>20.0ms</td>
+                <td>0</td>
+              </tr>
+              <tr id="f">
+                <td>&nbsp;&nbsp;<a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
+                <td>Order-Application</td>
+                <td>100</td>
+                <td>20.0ms</td>
+                <td>0</td>
+              </tr>
+            </tbody>
+          </table>
+          <hr/>
+        </div>
+        <div class="col-md-2">
+          <div class="row">
+            <div class="form-group">
+              <input type="text" class="form-control" placeholder="Search">
+            </div>
+          </div>
+          <div class="row">
+            <table class="table table-hover">
+              <tbody>
+                <tr>
+                  <td>
+                    <input type="checkbox" class="checkbox" value="a,b,d" name="showbox" />
+                  </td>
+                  <td>正常调用链A</td>
+                </tr>
+                <tr>
+                  <td>
+                    <input type="checkbox" class="checkbox" value="a,b" name="showbox" />
+                  </td>
+                  <td>正常调用链A</td>
+                </tr>
+                <tr>
+                  <td>
+                    <input type="checkbox" class="checkbox " value="a,c" name="showbox" />
+                  </td>
+                  <td>正常调用链A</td>
+                </tr>
+                <tr>
+                  <td>
+                    <input type="checkbox" class="checkbox " value="a,b,c,d" name="showbox" />
+                  </td>
+                  <td>正常调用链A</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div>
+        <script>
+          $(document).ready(function() {
+            $("input[name='showbox']").each(function() {
+              $(this).change(function() {
+                var showIds;
+                $("input[name='showbox']").each(function(){
+                  if ($(this).prop("checked")){
+                    showIds += $(this).val() + ",";
+                  }
+                }
+                tableShow(showIds);
+              });
+            })
+          });
+
+          function tableShow(ids) {
+            $("#dataBody tr").each(function() {
+              $(this).hide();
+            })
+
+            var idarr = ids.split(",")
+            var length = idarr.length;
+            for (var i = 0; i < length; i++) {
+              $("#" + idarr[i]).show();
+            }
+          }
+        </script>
+</body>
+
+</html>

ViewPoint	应用	调用次数	平均耗时
Http://localhost:8080/order/save1	Order-Application	100	20.0ms
com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()	Account-Application	100	20.0ms
com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()	Biling-Application	100	20.0ms
tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)	Order-Application	100	20.0ms
com.ai.aisse.core.dao.impl.Syn...AisseTimer(java.sql.Timestamp)	Order-Application	100	20.0ms
tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)	Order-Application	100	20.0ms
+ +	正常调用链A
+ +	正常调用链A
+ +	正常调用链A
+ +	正常调用链A