@basic-genomics/hivtrace-viz 1.2.6 → 1.4.0

package/dist/embed/index.html

@@ -11,6 +11,8 @@
   <link href="./hivtrace.css" rel="stylesheet" />
   <link rel="shortcut icon" href="#" />
 
+  <!-- Cytoscape.js is bundled in hivtrace.js -->
+
   <style>
     html,
     body {
@@ -160,6 +162,30 @@
       text-decoration: none;
     }
 
+    /* 自定义状态栏按钮样式 */
+    .hivtrace-custom-buttons button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border: 1px solid #e2e8f0;
+      border-radius: 6px;
+      background: #fff;
+      color: #374151;
+      font-size: 13px;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+
+    .hivtrace-custom-buttons button:hover,
+    .hivtrace-custom-buttons button:focus {
+      background: #f4f4f5;
+      color: #18181b;
+      text-decoration: none;
+    }
+
     /* 状态栏 badge 和 label 样式优化 */
     .hivtrace-status-bar .badge {
       display: inline-flex;
@@ -638,6 +664,9 @@
           <li class="disabled" id="attributes-tab">
             <a href="#trace-attributes" data-toggle="tab">统计</a>
           </li>
+          <li class="disabled" id="tree-tab" style="display: none;">
+            <a href="#trace-tree" data-toggle="tab">进化树</a>
+          </li>
         </ul>
 
         <div class="tab-content" id="top_level_tab_content">
@@ -843,17 +872,29 @@
                 <!-- 簇选择器 -->
                 <div style="margin-bottom: 12px;">
                   <div class="input-group input-group-sm" style="max-width: 280px;">
-                    <span class="input-group-addon" style="min-width: 60px; text-align: center;">选择簇</span>
-                    <div class="input-group-btn">
+                    <span class="input-group-btn" style="width: auto;">
+                      <button type="button" class="btn btn-default" id="attrs_cluster_prev_btn" title="上一个簇" disabled
+                        style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
+                        <i class="fa fa-chevron-left"></i>
+                      </button>
+                    </span>
+                    <div class="input-group-btn" style="width: auto;">
                       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-                        id="attrs_cluster_selector_btn" style="min-width: 140px; text-align: left;">
-                        <span id="attrs_cluster_selector_label">总览</span> <span class="caret"
+                        id="attrs_cluster_selector_btn"
+                        style="min-width: 120px; text-align: left; border-radius: 0; margin-left: -1px;">
+                        <span id="attrs_cluster_selector_label">所有簇</span> <span class="caret"
                           style="float: right; margin-top: 8px;"></span>
                       </button>
                       <ul class="dropdown-menu" role="menu" id="attrs_cluster_selector_menu">
-                        <li><a href="#" data-value="">总览</a></li>
+                        <li><a href="#" data-value="">所有簇</a></li>
                       </ul>
                     </div>
+                    <span class="input-group-btn" style="width: auto;">
+                      <button type="button" class="btn btn-default" id="attrs_cluster_next_btn" title="下一个簇"
+                        style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px;">
+                        <i class="fa fa-chevron-right"></i>
+                      </button>
+                    </span>
                   </div>
                 </div>
                 <!-- 属性 Pills -->
@@ -906,6 +947,101 @@
               </div>
             </div>
           </div>
+
+          <!-- 进化树 Tab -->
+          <div id="trace-tree" class="tab-pane">
+            <div class="hivtrace-tree-container"
+              style="display: flex; flex-direction: column; height: 100%; padding: 12px;">
+              <!-- 进化树工具栏 -->
+              <div class="hivtrace-tree-toolbar"
+                style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;">
+                <style>
+                  .hivtrace-tree-toolbar>* {
+                    flex-shrink: 0;
+                  }
+                </style>
+                <!-- 适应窗口 -->
+                <button type="button" class="btn btn-default btn-sm" id="tree_fit_btn" title="适应窗口">
+                  <i class="fa fa-expand"></i> 适应窗口
+                </button>
+                <!-- 显示/隐藏标签 -->
+                <button type="button" class="btn btn-default btn-sm" id="tree_labels_btn" title="显示/隐藏标签">
+                  <i class="fa fa-tag"></i> <span id="tree_labels_text">显示标签</span>
+                </button>
+                <!-- 簇选择器 -->
+                <div class="input-group input-group-sm" style="max-width: 320px;">
+                  <span class="input-group-btn" style="width: auto;">
+                    <button type="button" class="btn btn-default" id="tree_cluster_prev_btn" title="上一个簇" disabled
+                      style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
+                      <i class="fa fa-chevron-left"></i>
+                    </button>
+                  </span>
+                  <div class="input-group-btn" style="width: auto;">
+                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                      id="tree_cluster_selector_btn"
+                      style="min-width: 140px; text-align: left; border-radius: 0; margin-left: -1px;">
+                      <span id="tree_cluster_selector_label">所有簇</span> <span class="caret"
+                        style="float: right; margin-top: 8px;"></span>
+                    </button>
+                    <ul class="dropdown-menu" role="menu" id="tree_cluster_selector_menu">
+                      <li><a href="#" data-value="">所有簇</a></li>
+                    </ul>
+                  </div>
+                  <span class="input-group-btn" style="width: auto;">
+                    <button type="button" class="btn btn-default" id="tree_cluster_next_btn" title="下一个簇"
+                      style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px;">
+                      <i class="fa fa-chevron-right"></i>
+                    </button>
+                  </span>
+                </div>
+                <!-- 导出按钮 -->
+                <div class="dropdown" style="display: inline-block; position: relative;">
+                  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"
+                    id="tree_export_btn">
+                    <i class="fa fa-download"></i> 导出 <span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu" role="menu">
+                    <li><a href="#" id="tree_export_png">PNG 图片</a></li>
+                    <li><a href="#" id="tree_export_json">JSON 数据</a></li>
+                  </ul>
+                </div>
+                <!-- 动画播放按钮 -->
+                <button type="button" class="btn btn-default btn-sm" id="tree_animate_btn" title="播放从根到叶子的动画"
+                  style="margin-left: 8px;">
+                  <i class="fa fa-play"></i> 播放动画
+                </button>
+                <!-- 统计信息 -->
+                <div style="flex: 1;"></div>
+                <div class="hivtrace-tree-stats" style="display: flex; gap: 12px; font-size: 13px; color: #6b7280;">
+                  <span>节点: <strong id="tree_stat_nodes">0</strong></span>
+                  <span>叶节点: <strong id="tree_stat_leaves">0</strong></span>
+                  <span>连边: <strong id="tree_stat_edges">0</strong></span>
+                </div>
+              </div>
+              <!-- 进化树可视化容器 -->
+              <div id="tree_container"
+                style="flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; position: relative; min-height: 400px;">
+              </div>
+              <!-- 节点信息面板 -->
+              <div id="tree_node_info" class="hivtrace-tree-node-info"
+                style="display: none; position: absolute; bottom: 20px; right: 20px; width: 240px; background: rgba(255,255,255,0.95); border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100;">
+                <h4 style="margin: 0 0 8px; font-size: 14px; font-weight: 600;">节点信息</h4>
+                <div style="font-size: 12px; color: #374151;">
+                  <div style="display: flex; justify-content: space-between; padding: 4px 0;"><span
+                      style="color: #6b7280;">ID:</span> <span id="tree_node_id"
+                      style="font-family: monospace;">-</span></div>
+                  <div style="display: flex; justify-content: space-between; padding: 4px 0;"><span
+                      style="color: #6b7280;">标签:</span> <span id="tree_node_label">-</span></div>
+                  <div style="display: flex; justify-content: space-between; padding: 4px 0;"><span
+                      style="color: #6b7280;">类型:</span> <span id="tree_node_type">-</span></div>
+                  <div style="display: flex; justify-content: space-between; padding: 4px 0;"><span
+                      style="color: #6b7280;">分支长度:</span> <span id="tree_node_branch">-</span></div>
+                  <div style="display: flex; justify-content: space-between; padding: 4px 0;"><span
+                      style="color: #6b7280;">连接数:</span> <span id="tree_node_degree">-</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -917,6 +1053,192 @@
 
   <script src="./hivtrace.js"></script>
   <!-- <script src="dist/hivtrace.es.js"></script> -->
+
+  <!-- Tree Visualization Configuration -->
+  <script>
+    // Cytoscape Stylesheet for Tree
+    window.TREE_STYLESHEET = [
+      // 基础节点样式 - 添加 transition 支持平滑动画（官方最佳实践）
+      {
+        selector: 'node', style: {
+          'font-size': 11, 'text-valign': 'center', 'text-halign': 'right', 'text-margin-x': 5, 'color': '#333', 'min-zoomed-font-size': 8,
+          'transition-property': 'background-color, border-color, border-width, width, height, opacity',
+          'transition-duration': '0.25s',
+          'transition-timing-function': 'ease-out'
+        }
+      },
+      { selector: 'node[?is_leaf]', style: { 'background-color': '#2563eb', 'width': 10, 'height': 10 } },
+      { selector: 'node[!is_leaf]', style: { 'background-color': '#CBD5E1', 'width': 4, 'height': 4, 'opacity': 0.7, 'label': '', 'border-width': 0 } },
+      { selector: 'node[!is_leaf][support]', style: { 'background-color': '#94A3B8', 'width': 5, 'height': 5, 'opacity': 0.8 } },
+      // 根节点样式 - 青绿色，与蓝色和谐但有区分
+      {
+        selector: 'node.tree-root', style: {
+          'background-color': '#0d9488', // 青绿色 teal-600
+          'shape': 'ellipse',
+          'width': 12,
+          'height': 12,
+          'opacity': 1,
+          'border-width': 2,
+          'border-color': '#0f766e' // 更深的青绿边框
+        }
+      },
+      // 基础边样式 - 添加 transition 支持
+      {
+        selector: 'edge', style: {
+          'width': 2, 'line-color': '#333', 'target-arrow-color': '#333', 'curve-style': 'bezier', 'opacity': 0.8,
+          'transition-property': 'line-color, width, opacity',
+          'transition-duration': '0.25s',
+          'transition-timing-function': 'ease-out'
+        }
+      },
+      { selector: 'node:selected', style: { 'background-color': '#FFD700', 'border-width': 3, 'border-color': '#FF6B6B' } },
+      { selector: 'edge:selected', style: { 'line-color': '#FF6B6B', 'width': 3, 'opacity': 1 } },
+      { selector: 'node.grayed-out', style: { 'background-color': '#94A3B8', 'border-color': '#CBD5E1', 'opacity': 0.5 } },
+      { selector: 'edge.grayed-out', style: { 'line-color': '#94A3B8', 'opacity': 0.4 } }
+    ];
+
+    /**
+     * 根据 cluster 标志格式化 cluster_id 的显示值
+     * - cluster = 0: cluster_id 显示时 +1
+     * - cluster = 1: cluster_id 直接显示原值
+     */
+    function formatClusterLabel(clusterId, clusterFlag) {
+      if (clusterFlag === 0) {
+        var numId = typeof clusterId === 'string' ? parseInt(clusterId, 10) : clusterId;
+        return isNaN(numId) ? clusterId : numId + 1;
+      }
+      return clusterId;
+    }
+
+    // 保存全局 clusterFlag 用于显示
+    var treeClusterFlag = null;
+
+    // TreeViz Class
+    (function (global) {
+      function TreeViz(containerId, opts) {
+        this.container = document.getElementById(containerId);
+        this.cy = null;
+        this.showLabels = false;
+        this.onStatsChange = opts.onStatsChange || function () { };
+        this.onNodeSelect = opts.onNodeSelect || function () { };
+      }
+      TreeViz.prototype.init = function (treeData) {
+        if (!treeData || !treeData.nodes) return;
+        if (this.cy) { this.cy.destroy(); this.cy = null; }
+        var elements = treeData.nodes.map(function (n) {
+          return { data: { id: n.data.id, label: n.data.label, is_leaf: n.data.is_leaf, branch_length: n.data.branch_length, support: n.data.support, cluster_id: n.data.cluster_id }, position: n.position };
+        }).concat(treeData.edges.map(function (e) {
+          return { data: { id: e.data.id, source: e.data.source, target: e.data.target, branch_length: e.data.branch_length } };
+        }));
+        this.cy = cytoscape({ container: this.container, elements: elements, style: window.TREE_STYLESHEET, layout: { name: 'preset', fit: true, padding: 50 }, wheelSensitivity: 0.2, minZoom: 0.01, maxZoom: 5, boxSelectionEnabled: false });
+        this.onStatsChange({ nodeCount: this.cy.nodes().length, edgeCount: this.cy.edges().length, leafCount: this.cy.nodes('[?is_leaf]').length });
+        var self = this;
+        this.cy.on('tap', 'node', function (evt) {
+          var d = evt.target.data();
+          self.onNodeSelect({ id: d.id, label: d.label, isLeaf: d.is_leaf, branchLength: d.branch_length, support: d.support, degree: evt.target.degree() });
+        });
+        this.cy.on('tap', function (evt) { if (evt.target === self.cy) self.onNodeSelect(null); });
+      };
+      TreeViz.prototype.toggleLabels = function () {
+        this.showLabels = !this.showLabels;
+        var show = this.showLabels;
+        this.cy && this.cy.nodes().forEach(function (n) { if (n.data('is_leaf')) n.style('label', show ? (n.data('label') || '') : ''); });
+        return this.showLabels;
+      };
+      TreeViz.prototype.highlightCluster = function (clusterId) {
+        if (!this.cy) return;
+        if (clusterId != null) {
+          var matchIds = new Set();
+          this.cy.nodes().forEach(function (n) { if (n.data('cluster_id') != null && String(n.data('cluster_id')) === String(clusterId)) matchIds.add(n.id()); });
+          this.cy.nodes().forEach(function (n) { n[matchIds.has(n.id()) ? 'removeClass' : 'addClass']('grayed-out'); });
+          var edgesToHighlight = new Set();
+          var matchingNodes = this.cy.nodes().filter(function (n) { return matchIds.has(n.id()); });
+          if (matchingNodes.length > 1) {
+            var dijk = this.cy.elements().dijkstra({ root: matchingNodes[0], directed: false });
+            for (var i = 1; i < matchingNodes.length; i++) dijk.pathTo(matchingNodes[i]).edges().forEach(function (e) { edgesToHighlight.add(e.id()); });
+          }
+          this.cy.edges().forEach(function (e) { e[(matchIds.has(e.source().id()) || matchIds.has(e.target().id()) || edgesToHighlight.has(e.id())) ? 'removeClass' : 'addClass']('grayed-out'); });
+        } else {
+          this.cy.nodes().removeClass('grayed-out'); this.cy.edges().removeClass('grayed-out');
+        }
+      };
+      TreeViz.prototype.fitView = function () { if (this.cy) { this.cy.resize(); this.cy.fit(undefined, 50); } };
+      TreeViz.prototype.getAvailableClusters = function () {
+        if (!this.cy) return [];
+        var counts = new Map();
+        this.cy.nodes().forEach(function (n) { var c = n.data('cluster_id'); if (c != null) counts.set(c, (counts.get(c) || 0) + 1); });
+        var arr = []; counts.forEach(function (cnt, id) { arr.push({ id: id, nodeCount: cnt }); });
+        arr.sort(function (a, b) { return typeof a.id === 'number' && typeof b.id === 'number' ? a.id - b.id : String(a.id).localeCompare(String(b.id)); });
+        return arr;
+      };
+      TreeViz.prototype.exportPNG = function (fname) {
+        if (!this.cy) return;
+        var png = this.cy.png({ output: 'blob', bg: '#fff', scale: 2, full: true });
+        var a = document.createElement('a'); a.href = URL.createObjectURL(png); a.download = (fname || 'tree') + '.png'; a.click(); URL.revokeObjectURL(a.href);
+      };
+      TreeViz.prototype.exportJSON = function (data, fname) {
+        if (!data) return;
+        var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = (fname || 'tree') + '.json'; a.click(); URL.revokeObjectURL(a.href);
+      };
+      // 查找根节点（入度为 0 的节点）
+      TreeViz.prototype.findRoot = function () {
+        if (!this.cy) return null;
+        var roots = this.cy.nodes().filter(function (n) { return n.indegree(false) === 0; });
+        return roots.length > 0 ? roots[0] : null;
+      };
+      // 标记根节点
+      TreeViz.prototype.markRoot = function () {
+        if (!this.cy) return null;
+        this.cy.nodes().removeClass('tree-root');
+        var root = this.findRoot();
+        if (root) {
+          root.addClass('tree-root');
+          return root.data();
+        }
+        return null;
+      };
+      // 从根到叶子的渐显动画（先全部置灰，然后逐层恢复原色）
+      TreeViz.prototype.animateFromRoot = function (options) {
+        var self = this;
+        if (!this.cy) return;
+        var opts = options || {};
+        var delay = opts.delay || 120; // 每层延迟（毫秒）
+
+        var root = this.findRoot();
+        if (!root) return;
+
+        // 第一步：全部置灰
+        this.cy.elements().addClass('grayed-out');
+
+        // 使用 Cytoscape.js 官方 BFS API 按层分组
+        var layers = [];
+        this.cy.elements().bfs({
+          roots: root,
+          visit: function (v, e, u, i, depth) {
+            if (!layers[depth]) layers[depth] = { nodes: [], edges: [] };
+            layers[depth].nodes.push(v);
+            // 将连接边归入当前层
+            if (e) {
+              layers[depth].edges.push(e);
+            }
+          },
+          directed: true
+        });
+
+        // 第二步：分层逐渐恢复原色（移除 grayed-out 类）
+        layers.forEach(function (layer, i) {
+          setTimeout(function () {
+            layer.nodes.forEach(function (n) { n.removeClass('grayed-out'); });
+            layer.edges.forEach(function (e) { e.removeClass('grayed-out'); });
+          }, i * delay);
+        });
+
+        return { layerCount: layers.length, totalNodes: this.cy.nodes().length };
+      };
+      global.TreeViz = TreeViz;
+    })(window);
+  </script>
   <script>
     // 动态计算标签页高度
     (function () {
@@ -936,6 +1258,12 @@
           statsTab.style.height = availableHeight + 'px';
         }
 
+        // 设置进化树标签页高度
+        var treeTab = document.getElementById('trace-tree');
+        if (treeTab) {
+          treeTab.style.height = availableHeight + 'px';
+        }
+
         // 设置网络标签页内 network_tag 高度
         var networkTag = document.querySelector('#trace-results #network_tag');
         if (networkTag) {
@@ -1018,9 +1346,185 @@
       parent_container = "#top_level_tab_container",
       node_table = "#node_table",
       user_graph,
+      tree_viz = null,  // 进化树可视化实例
+      tree_data = null, // 进化树数据
       countryCenersObject = null,
       countryOutlines = null;
 
+    // 进化树初始化函数
+    function initTreeViz(treeData, options) {
+      if (!treeData || !treeData.nodes || treeData.nodes.length === 0) {
+        return;
+      }
+
+      // 显示进化树 Tab
+      var treeTab = document.getElementById('tree-tab');
+      if (treeTab) {
+        treeTab.style.display = '';
+        treeTab.classList.remove('disabled');
+      }
+
+      // 保存树数据
+      window._treeData = treeData;
+
+      // 保存 cluster 标志用于显示格式化
+      treeClusterFlag = treeData.cluster;
+
+      // 初始化 TreeViz 实例
+      tree_viz = new TreeViz('tree_container', {
+        onStatsChange: function (stats) {
+          document.getElementById('tree_stat_nodes').textContent = stats.nodeCount;
+          document.getElementById('tree_stat_leaves').textContent = stats.leafCount;
+          document.getElementById('tree_stat_edges').textContent = stats.edgeCount;
+        },
+        onNodeSelect: function (node) {
+          var infoPanel = document.getElementById('tree_node_info');
+          if (node) {
+            document.getElementById('tree_node_id').textContent = node.id;
+            document.getElementById('tree_node_label').textContent = node.label || '-';
+            document.getElementById('tree_node_type').textContent = node.isLeaf ? '叶节点' : '内部节点';
+            document.getElementById('tree_node_branch').textContent = node.branchLength ? node.branchLength.toFixed(6) : '-';
+            document.getElementById('tree_node_degree').textContent = node.degree;
+            infoPanel.style.display = 'block';
+          } else {
+            infoPanel.style.display = 'none';
+          }
+        }
+      });
+
+      tree_viz.init(treeData);
+      // 自动标记根节点（红色菱形）
+      tree_viz.markRoot();
+
+      // 获取可用簇
+      var clusters = tree_viz.getAvailableClusters();
+      var currentClusterIndex = -1; // -1 表示 "所有簇"
+
+      // 填充簇选择器菜单 - 先清空旧的簇选项（保留"所有簇"）
+      var menu = document.getElementById('tree_cluster_selector_menu');
+      var label = document.getElementById('tree_cluster_selector_label');
+      if (menu) {
+        // 移除除了"所有簇"之外的所有选项
+        var items = menu.querySelectorAll('li');
+        for (var i = items.length - 1; i > 0; i--) {
+          items[i].remove();
+        }
+        // 重置选择器标签
+        if (label) label.textContent = '所有簇';
+        // 使用 DocumentFragment 批量添加新簇选项（减少重排）
+        if (clusters.length > 0) {
+          var fragment = document.createDocumentFragment();
+          clusters.forEach(function (cluster, index) {
+            var li = document.createElement('li');
+            var a = document.createElement('a');
+            a.href = '#';
+            a.setAttribute('data-value', cluster.id);
+            a.setAttribute('data-index', index);
+            a.textContent = '簇 ' + formatClusterLabel(cluster.id, treeClusterFlag) + ' (' + cluster.nodeCount + ' 节点)';
+            li.appendChild(a);
+            fragment.appendChild(li);
+          });
+          menu.appendChild(fragment);
+        }
+      }
+
+      // 更新导航按钮状态
+      function updateTreeNavButtons() {
+        var prevBtn = document.getElementById('tree_cluster_prev_btn');
+        var nextBtn = document.getElementById('tree_cluster_next_btn');
+        if (prevBtn) prevBtn.disabled = currentClusterIndex < 0;
+        if (nextBtn) nextBtn.disabled = currentClusterIndex >= clusters.length - 1;
+      }
+
+      // 选择簇
+      function selectTreeCluster(index) {
+        currentClusterIndex = index;
+        var label = document.getElementById('tree_cluster_selector_label');
+
+        if (index < 0) {
+          if (label) label.textContent = '所有簇';
+          tree_viz.highlightCluster(null);
+        } else {
+          var cluster = clusters[index];
+          if (label) label.textContent = '簇 ' + formatClusterLabel(cluster.id, treeClusterFlag) + ' (' + cluster.nodeCount + ' 节点)';
+          tree_viz.highlightCluster(cluster.id);
+        }
+        updateTreeNavButtons();
+      }
+
+      // 默认高亮簇
+      if (options && options.treeDefaultClusterId != null) {
+        var defaultIndex = clusters.findIndex(function (c) {
+          return String(c.id) === String(options.treeDefaultClusterId);
+        });
+        if (defaultIndex >= 0) {
+          selectTreeCluster(defaultIndex);
+        }
+      }
+
+      updateTreeNavButtons();
+
+      // 适应窗口按钮
+      document.getElementById('tree_fit_btn').addEventListener('click', function () {
+        tree_viz.fitView();
+      });
+
+      // 标签按钮
+      document.getElementById('tree_labels_btn').addEventListener('click', function () {
+        var showing = tree_viz.toggleLabels();
+        document.getElementById('tree_labels_text').textContent = showing ? '隐藏标签' : '显示标签';
+      });
+
+      // 上一个簇
+      document.getElementById('tree_cluster_prev_btn').addEventListener('click', function () {
+        if (currentClusterIndex >= 0) {
+          selectTreeCluster(currentClusterIndex - 1);
+        }
+      });
+
+      // 下一个簇
+      document.getElementById('tree_cluster_next_btn').addEventListener('click', function () {
+        if (currentClusterIndex < clusters.length - 1) {
+          selectTreeCluster(currentClusterIndex + 1);
+        }
+      });
+
+      // 簇选择器下拉菜单点击
+      document.getElementById('tree_cluster_selector_menu').addEventListener('click', function (e) {
+        e.preventDefault();
+        var link = e.target.closest('a[data-value]');
+        if (!link) return;
+
+        var value = link.getAttribute('data-value');
+        if (value === '') {
+          selectTreeCluster(-1);
+        } else {
+          var index = parseInt(link.getAttribute('data-index'), 10);
+          if (!isNaN(index)) {
+            selectTreeCluster(index);
+          }
+        }
+      });
+
+      // 导出 PNG
+      document.getElementById('tree_export_png').addEventListener('click', function (e) {
+        e.preventDefault();
+        tree_viz.exportPNG(options && options.exportId ? options.exportId + '_tree' : 'tree');
+      });
+
+      // 导出 JSON
+      document.getElementById('tree_export_json').addEventListener('click', function (e) {
+        e.preventDefault();
+        tree_viz.exportJSON(treeData, options && options.exportId ? options.exportId + '_tree' : 'tree');
+      });
+
+      // 播放动画按钮
+      document.getElementById('tree_animate_btn').addEventListener('click', function (e) {
+        e.preventDefault();
+        tree_viz.animateFromRoot({ delay: 100 });
+      });
+    }
+
     function HandleAppError(err_string) {
       showLoadingError(err_string);
     }
@@ -1090,6 +1594,49 @@
           };
         }
 
+        // 如果有进化树数据，添加内置的"在进化树中查看"菜单项
+        if (options && options.treeData && options.treeData.nodes && options.treeData.nodes.length > 0) {
+          // 添加到自定义菜单项列表
+          if (!user_graph.customContextMenuItems) {
+            user_graph.customContextMenuItems = [];
+          }
+          user_graph.customContextMenuItems.push({
+            id: '__view_in_tree__',
+            label: '在进化树中查看'
+          });
+
+          // 包装原有回调
+          var originalCallback = user_graph.onCustomMenuItemClick;
+          user_graph.onCustomMenuItemClick = function (itemId, clusterInfo) {
+            if (itemId === '__view_in_tree__') {
+              // 切换到进化树 Tab
+              var treeTabLink = document.querySelector('#tree-tab a[data-toggle="tab"]');
+              if (treeTabLink) {
+                $(treeTabLink).tab('show');
+                // 高亮对应的簇
+                setTimeout(function () {
+                  if (tree_viz) {
+                    tree_viz.highlightCluster(clusterInfo.cluster_id);
+                    // 更新簇选择器显示
+                    var clusters = tree_viz.getAvailableClusters();
+                    var index = clusters.findIndex(function (c) {
+                      return String(c.id) === String(clusterInfo.cluster_id);
+                    });
+                    if (index >= 0) {
+                      var label = document.getElementById('tree_cluster_selector_label');
+                      var cluster = clusters[index];
+                      if (label) label.textContent = '簇 ' + formatClusterLabel(cluster.id, treeClusterFlag) + ' (' + cluster.nodeCount + ' 节点)';
+                    }
+                    tree_viz.fitView();
+                  }
+                }, 200);
+              }
+            } else if (originalCallback) {
+              originalCallback(itemId, clusterInfo);
+            }
+          };
+        }
+
         if (user_graph.is_empty()) {
           HandleAppError(
             "This network contains no clusters and cannot be displayed"
@@ -1124,48 +1671,96 @@
             // 设置属性页的簇过滤状态
             user_graph.attributes_selected_cluster = null;
 
+            // 当前选中的簇索引（-1 表示 "所有簇"）
+            var currentClusterIndex = -1;
+
+            // 获取导航按钮
+            var prevBtn = document.getElementById('attrs_cluster_prev_btn');
+            var nextBtn = document.getElementById('attrs_cluster_next_btn');
+
+            // 更新导航按钮状态
+            function updateNavigationButtons() {
+              if (prevBtn) {
+                prevBtn.disabled = (currentClusterIndex === -1);
+              }
+              if (nextBtn) {
+                nextBtn.disabled = (currentClusterIndex === clusters.length - 1);
+              }
+            }
+
+            // 选择簇的公共函数
+            function selectCluster(index) {
+              currentClusterIndex = index;
+              var statsTitle = document.getElementById('attrs_stats_title');
+
+              if (index === -1) {
+                // 显示所有簇
+                label.textContent = '所有簇';
+                user_graph.attributes_selected_cluster = null;
+                if (statsTitle) statsTitle.textContent = '网络统计';
+                hivtrace.graphSummary(user_graph, graph_summary_tag);
+                hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
+                updatePillBadges(null, clusters);
+              } else {
+                // 显示单个 cluster
+                var cluster = clusters[index];
+                label.textContent = '簇 ' + cluster.cluster_id + ' (' + cluster.children.length + ' 节点)';
+                user_graph.attributes_selected_cluster = String(cluster.cluster_id);
+                if (statsTitle) statsTitle.textContent = '簇 ' + cluster.cluster_id + ' 统计';
+                updateClusterStatistics(cluster);
+                updatePillBadges(String(cluster.cluster_id), clusters);
+              }
+
+              // 重新触发当前选中的属性（如果有）
+              if (user_graph.colorizer && user_graph.colorizer['category_id']) {
+                if (user_graph.colorizer['continuous']) {
+                  user_graph.handle_attribute_continuous(user_graph.colorizer['category_id']);
+                } else {
+                  user_graph.handle_attribute_categorical(user_graph.colorizer['category_id'], false);
+                }
+              }
+
+              updateNavigationButtons();
+            }
+
+            // 上一个簇按钮点击事件
+            if (prevBtn) {
+              prevBtn.addEventListener('click', function () {
+                if (currentClusterIndex > -1) {
+                  selectCluster(currentClusterIndex - 1);
+                }
+              });
+            }
+
+            // 下一个簇按钮点击事件
+            if (nextBtn) {
+              nextBtn.addEventListener('click', function () {
+                if (currentClusterIndex < clusters.length - 1) {
+                  selectCluster(currentClusterIndex + 1);
+                }
+              });
+            }
+
+            // 初始化按钮状态
+            updateNavigationButtons();
+
             // 监听 dropdown 菜单项点击
             menu.addEventListener('click', function (e) {
               if (e.target.tagName === 'A') {
                 e.preventDefault();
                 var selectedClusterId = e.target.getAttribute('data-value');
-                var selectedText = e.target.textContent;
-                var statsTitle = document.getElementById('attrs_stats_title');
-
-                // 更新按钮文本
-                label.textContent = selectedText;
-
-                // 设置属性页的簇过滤
-                user_graph.attributes_selected_cluster = selectedClusterId || null;
 
+                // 更新 currentClusterIndex
                 if (!selectedClusterId) {
-                  // 显示全网统计
-                  if (statsTitle) statsTitle.textContent = '网络统计';
-                  hivtrace.graphSummary(user_graph, graph_summary_tag);
-                  hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
+                  currentClusterIndex = -1;
                 } else {
-                  // 显示单个 cluster 的统计
-                  var cluster = clusters.find(function (c) {
+                  currentClusterIndex = clusters.findIndex(function (c) {
                     return String(c.cluster_id) === String(selectedClusterId);
                   });
-
-                  if (cluster) {
-                    if (statsTitle) statsTitle.textContent = '簇 ' + selectedClusterId + ' 统计';
-                    updateClusterStatistics(cluster);
-                  }
-                }
-
-                // 重新触发当前选中的属性（如果有）
-                if (user_graph.colorizer && user_graph.colorizer['category_id']) {
-                  if (user_graph.colorizer['continuous']) {
-                    user_graph.handle_attribute_continuous(user_graph.colorizer['category_id']);
-                  } else {
-                    user_graph.handle_attribute_categorical(user_graph.colorizer['category_id'], false);
-                  }
                 }
 
-                // 更新 pill badges（唯一值数量）
-                updatePillBadges(selectedClusterId, clusters);
+                // 使用公共函数选择簇
+                selectCluster(currentClusterIndex);
               }
             });
 
@@ -1449,6 +2044,19 @@
             }
           );
 
+          // 进化树 Tab 切换时自动适应窗口
+          $("#tree-tab a[data-toggle='tab']").on(
+            "shown.bs.tab",
+            function (e) {
+              if (tree_viz) {
+                // 延迟一点确保容器已完全渲染
+                setTimeout(function () {
+                  tree_viz.fitView();
+                }, 100);
+              }
+            }
+          );
+
         }
         document
           .getElementById("min_cluster_size_input")
@@ -1506,6 +2114,51 @@
           }
         }
 
+        // 如果有进化树数据，确保"在进化树中查看"菜单项存在
+        if (options && options.treeData && options.treeData.nodes && options.treeData.nodes.length > 0) {
+          if (!user_graph.customContextMenuItems) {
+            user_graph.customContextMenuItems = [];
+          }
+          // 检查是否已存在
+          var exists = user_graph.customContextMenuItems.some(function (item) {
+            return item.id === '__view_in_tree__';
+          });
+          if (!exists) {
+            user_graph.customContextMenuItems.push({
+              id: '__view_in_tree__',
+              label: '在进化树中查看'
+            });
+          }
+
+          // 包装原有回调
+          var originalCallback = user_graph.onCustomMenuItemClick;
+          user_graph.onCustomMenuItemClick = function (itemId, clusterInfo) {
+            if (itemId === '__view_in_tree__') {
+              var treeTabLink = document.querySelector('#tree-tab a[data-toggle="tab"]');
+              if (treeTabLink) {
+                $(treeTabLink).tab('show');
+                setTimeout(function () {
+                  if (tree_viz) {
+                    tree_viz.highlightCluster(clusterInfo.cluster_id);
+                    var clusters = tree_viz.getAvailableClusters();
+                    var index = clusters.findIndex(function (c) {
+                      return String(c.id) === String(clusterInfo.cluster_id);
+                    });
+                    if (index >= 0) {
+                      var label = document.getElementById('tree_cluster_selector_label');
+                      var cluster = clusters[index];
+                      if (label) label.textContent = '簇 ' + formatClusterLabel(cluster.id, treeClusterFlag) + ' (' + cluster.nodeCount + ' 节点)';
+                    }
+                    tree_viz.fitView();
+                  }
+                }, 200);
+              }
+            } else if (originalCallback) {
+              originalCallback(itemId, clusterInfo);
+            }
+          };
+        }
+
         // 执行必要的更新
         user_graph.update(false, 0.4);
 
@@ -1632,6 +2285,13 @@
         }
 
         this.isFullscreen = isFullscreen;
+
+        // 全屏状态变化后，更新树可视化尺寸
+        if (tree_viz) {
+          setTimeout(function () {
+            tree_viz.fitView();
+          }, 100);
+        }
       },
 
       init: function () {
@@ -1676,8 +2336,16 @@
 
         if (data.type === 'HIVTRACE_DATA') {
           init(data.graphData, data.options);
+          // 如果提供了进化树数据，初始化进化树
+          if (data.options && data.options.treeData) {
+            initTreeViz(data.options.treeData, data.options);
+          }
         } else if (data.type === 'HIVTRACE_UPDATE_DATA') {
           updateNetworkData(data.graphData, data.options);
+          // 更新进化树数据（如果提供）
+          if (data.options && data.options.treeData) {
+            initTreeViz(data.options.treeData, data.options);
+          }
         } else if (data.type === 'HIVTRACE_ERROR') {
           // 处理来自宿主应用的错误（如 API 请求失败）
           showLoadingError(data.message || '数据加载失败');