@basic-genomics/hivtrace-viz 1.5.0 → 1.5.1

package/dist/embed/index.html

@@ -1023,6 +1023,10 @@
                   style="margin-left: 8px;">
                   <i class="fa fa-play"></i> 播放动画
                 </button>
+                <!-- 聚焦根按钮 -->
+                <button type="button" class="btn btn-default btn-sm" id="tree_show_root_btn" title="聚焦到根节点">
+                  <i class="fa fa-dot-circle-o"></i> 聚焦根
+                </button>
                 <!-- 统计信息 -->
                 <div style="flex: 1;"></div>
                 <div class="hivtrace-tree-stats" style="display: flex; gap: 12px; font-size: 13px; color: #6b7280;">
@@ -1166,35 +1170,79 @@
 
         // 停止任何正在进行的动画，防止状态冲突
         this.stopAnimation();
+        this.cy.stop();
 
         this.currentClusterId = clusterId;
 
-        this.cy.batch(function () {
-          if (clusterId != null) {
-            var strClusterId = String(clusterId);
-            // 一次性过滤匹配节点
-            var matchingNodes = self.cy.nodes().filter(function (n) {
-              return n.data('cluster_id') != null && String(n.data('cluster_id')) === strClusterId;
+        // 将 matchingNodes 提升到外部作用域，供聚焦使用
+        var matchingNodes = null;
+        if (clusterId != null) {
+          var strClusterId = String(clusterId);
+          matchingNodes = this.cy.nodes().filter(function (n) {
+            return n.data('cluster_id') != null && String(n.data('cluster_id')) === strClusterId;
+          });
+        }
+
+        // 计算需要高亮的路径元素（在 batch 外部计算，供聚焦使用）
+        var pathEles = self.cy.collection();
+        if (clusterId != null && matchingNodes && matchingNodes.length > 1) {
+          var mrca = self.findClusterRoot(clusterId);
+          if (mrca) {
+            var mrcaId = mrca.id();
+            pathEles = pathEles.union(mrca);
+            matchingNodes.forEach(function (node) {
+              var preds = node.predecessors();
+              for (var i = 0; i < preds.length; i++) {
+                var ele = preds[i];
+                pathEles = pathEles.union(ele);
+                if (ele.isNode() && ele.id() === mrcaId) break;
+              }
             });
+          }
+        }
 
-            // 使用集合操作批量增删类名
+        // 批量更新样式（高亮/置灰）
+        this.cy.batch(function () {
+          if (clusterId != null && matchingNodes && matchingNodes.length > 0) {
             self.cy.elements().addClass('grayed-out');
             matchingNodes.removeClass('grayed-out');
-
-            if (matchingNodes.length > 1) {
-              var dijk = self.cy.elements().dijkstra({ root: matchingNodes[0], directed: false });
-              // 使用集合 union 快速合并路径元素
-              var pathEles = matchingNodes.slice(1).reduce(function (acc, node) {
-                return acc.union(dijk.pathTo(node));
-              }, self.cy.collection());
+            if (pathEles.length > 0) {
               pathEles.removeClass('grayed-out');
             }
           } else {
             self.cy.elements().removeClass('grayed-out');
           }
         });
+
+        // 自动聚焦到对应视图（包含节点和连接边）
+        if (clusterId != null && matchingNodes && matchingNodes.length > 0) {
+          // 合并簇成员节点和路径边，确保完整视图
+          var fitEles = matchingNodes.union(pathEles);
+          this.cy.animate({
+            fit: { eles: fitEles, padding: 50 }
+          }, {
+            duration: 300,
+            easing: 'ease-out',
+            queue: false
+          });
+        } else if (clusterId == null) {
+          // 恢复全局视图
+          this.cy.animate({
+            fit: { eles: this.cy.elements(), padding: 50 }
+          }, {
+            duration: 300,
+            easing: 'ease-out',
+            queue: false
+          });
+        }
+      };
+      TreeViz.prototype.fitView = function () {
+        if (!this.cy) return;
+        this.stopAnimation();
+        this.cy.stop();
+        this.cy.resize();
+        this.cy.fit(undefined, 50);
       };
-      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();
@@ -1230,6 +1278,26 @@
         }
         return null;
       };
+      // 聚焦到根节点（使用官方 animate API）
+      TreeViz.prototype.focusOnRoot = function () {
+        if (!this.cy) return null;
+        var root = this.findRoot();
+        if (!root) return null;
+        // 停止渐显动画（setTimeout 定时器）
+        this.stopAnimation();
+        // 停止视图动画（Cytoscape animate）
+        this.cy.stop();
+        // 使用 Cytoscape.js 官方推荐的 animate + fit API
+        // queue: false 确保立即执行，不排队
+        this.cy.animate({
+          fit: { eles: root, padding: 100 }
+        }, {
+          duration: 300,
+          easing: 'ease-out',
+          queue: false
+        });
+        return root.data();
+      };
       // 查找簇成员的最近共同祖先（MRCA）
       // 使用官方 predecessors() + intersection() API
       TreeViz.prototype.findClusterRoot = function (clusterId) {
@@ -1284,6 +1352,32 @@
           : this.findRoot();
         if (!animRoot) return;
 
+        // 先停止现有视图动画，防止冲突
+        this.cy.stop();
+
+        // 确保视图能看到完整动画区域
+        if (this.currentClusterId != null) {
+          // 簇视图：聚焦到簇的子树（MRCA 及其所有后代）
+          // 这样能确保看到完整的动画范围
+          var subtreeEles = animRoot.union(animRoot.successors());
+          this.cy.animate({
+            fit: { eles: subtreeEles, padding: 50 }
+          }, {
+            duration: 200,
+            easing: 'ease-out',
+            queue: false
+          });
+        } else {
+          // 全局视图：适应整棵树，确保看到完整动画
+          this.cy.animate({
+            fit: { eles: this.cy.elements(), padding: 50 }
+          }, {
+            duration: 200,
+            easing: 'ease-out',
+            queue: false
+          });
+        }
+
         // 第一步：全部置灰（使用 batch 确保立即生效）
         this.cy.batch(function () {
           self.cy.elements().addClass('grayed-out');
@@ -1481,7 +1575,7 @@
       }
 
       // 禁用进化树工具栏按钮
-      ['tree_fit_btn', 'tree_labels_btn', 'tree_animate_btn', 'tree_export_png', 'tree_export_json',
+      ['tree_fit_btn', 'tree_labels_btn', 'tree_animate_btn', 'tree_show_root_btn', 'tree_export_png', 'tree_export_json',
         'tree_cluster_prev_btn', 'tree_cluster_next_btn', 'tree_cluster_selector'].forEach(function (id) {
           var btn = document.getElementById(id);
           if (btn) {
@@ -1502,7 +1596,7 @@
         }
       }
       // 恢复工具栏按钮
-      ['tree_fit_btn', 'tree_labels_btn', 'tree_animate_btn', 'tree_export_png', 'tree_export_json',
+      ['tree_fit_btn', 'tree_labels_btn', 'tree_animate_btn', 'tree_show_root_btn', 'tree_export_png', 'tree_export_json',
         'tree_cluster_prev_btn', 'tree_cluster_next_btn', 'tree_cluster_selector'].forEach(function (id) {
           var btn = document.getElementById(id);
           if (btn) {
@@ -1513,6 +1607,48 @@
         });
     }
 
+    // 隐藏进化树 Tab（当没有进化树数据时）
+    function hideTreeTab() {
+      var treeTab = document.getElementById('tree-tab');
+      if (treeTab) {
+        // 检查当前是否正在查看进化树 Tab
+        var isTreeTabActive = treeTab.classList.contains('active');
+
+        treeTab.style.display = 'none';
+        treeTab.classList.add('disabled');
+        treeTab.classList.remove('active');
+
+        // 清除加载指示器
+        var tabLink = treeTab.querySelector('a');
+        if (tabLink) {
+          tabLink.innerHTML = '进化树';
+        }
+
+        // 如果当前正在查看进化树 Tab，切换到第一个 Tab（分子网络）
+        if (isTreeTabActive) {
+          var firstTab = document.querySelector('.nav-tabs > li:first-child a[data-toggle="tab"]');
+          if (firstTab) {
+            $(firstTab).tab('show');
+          }
+        }
+      }
+      // 清除树容器内容
+      var treeContainer = document.getElementById('tree_container');
+      if (treeContainer) {
+        treeContainer.innerHTML = '';
+      }
+      // 隐藏树 Tab 内容面板
+      var treePane = document.getElementById('tree');
+      if (treePane) {
+        treePane.classList.remove('active');
+      }
+      // 清除全局树数据引用
+      if (window._treeData) {
+        window._treeData = null;
+      }
+      tree_viz = null;
+    }
+
     // 进化树初始化函数
 
     function initTreeViz(treeData, options) {
@@ -1642,6 +1778,11 @@
         document.getElementById('tree_labels_text').textContent = showing ? '隐藏标签' : '显示标签';
       });
 
+      // 聚焦根按钮
+      document.getElementById('tree_show_root_btn').addEventListener('click', function () {
+        tree_viz.focusOnRoot();
+      });
+
       // 上一个簇
       document.getElementById('tree_cluster_prev_btn').addEventListener('click', function () {
         if (currentClusterIndex >= 0) {
@@ -2511,7 +2652,13 @@
             } else if (data.options.treeData && data.options.treeData.nodes && data.options.treeData.nodes.length > 0) {
               // 如果有进化树数据，初始化进化树
               initTreeViz(data.options.treeData, data.options);
+            } else {
+              // 没有进化树数据，隐藏进化树 Tab
+              hideTreeTab();
             }
+          } else {
+            // 没有 options，隐藏进化树 Tab
+            hideTreeTab();
           }
         } else if (data.type === 'HIVTRACE_UPDATE_DATA') {
           updateNetworkData(data.graphData, data.options);
@@ -2523,7 +2670,13 @@
             } else if (data.options.treeData && data.options.treeData.nodes && data.options.treeData.nodes.length > 0) {
               // 更新进化树数据
               initTreeViz(data.options.treeData, data.options);
+            } else {
+              // 没有进化树数据，隐藏进化树 Tab
+              hideTreeTab();
             }
+          } else {
+            // 没有 options，隐藏进化树 Tab
+            hideTreeTab();
           }
 
         } else if (data.type === 'HIVTRACE_ERROR') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-genomics/hivtrace-viz",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "HIV-TRACE molecular transmission network visualization with React integration",
   "engines": {
     "node": ">=18"
@@ -104,4 +104,4 @@
     "vite"
   ],
   "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
-}
+}