@basic-genomics/hivtrace-viz 1.5.0 → 1.5.2

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,52 @@
         });
     }
 
+    // 隐藏进化树 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;
+      }
+      // 清除所有树相关的全局状态
+      window._treeSelectTreeCluster = null;
+      window._treeCurrentClusterIndex = undefined;
+      window._treeExportId = null;
+      tree_viz = null;
+    }
+
     // 进化树初始化函数
 
     function initTreeViz(treeData, options) {
@@ -1606,6 +1746,7 @@
       // 选择簇
       function selectTreeCluster(index) {
         currentClusterIndex = index;
+        window._treeCurrentClusterIndex = currentClusterIndex; // 暴露到全局作用域
         var label = document.getElementById('tree_cluster_selector_label');
 
         if (index < 0) {
@@ -1619,6 +1760,11 @@
         updateTreeNavButtons();
       }
 
+      // 暴露函数到全局作用域供事件处理器使用
+      window._treeSelectTreeCluster = selectTreeCluster;
+      window._treeCurrentClusterIndex = currentClusterIndex;
+      window._treeExportId = options && options.exportId ? options.exportId : null;
+
       // 默认高亮簇
       if (options && options.treeDefaultClusterId != null) {
         var defaultIndex = clusters.findIndex(function (c) {
@@ -1630,66 +1776,124 @@
       }
 
       updateTreeNavButtons();
+    }
 
+    // 进化树工具栏事件初始化（在页面加载时调用一次，使用 null 检查确保安全）
+    function initTreeToolbarEvents() {
       // 适应窗口按钮
-      document.getElementById('tree_fit_btn').addEventListener('click', function () {
-        tree_viz.fitView();
-      });
+      var treeFitBtn = document.getElementById('tree_fit_btn');
+      if (treeFitBtn) {
+        treeFitBtn.addEventListener('click', function () {
+          if (tree_viz && tree_viz.cy) {
+            tree_viz.fitView();
+          }
+        });
+      }
 
       // 标签按钮
-      document.getElementById('tree_labels_btn').addEventListener('click', function () {
-        var showing = tree_viz.toggleLabels();
-        document.getElementById('tree_labels_text').textContent = showing ? '隐藏标签' : '显示标签';
-      });
+      var treeLabelsBtn = document.getElementById('tree_labels_btn');
+      if (treeLabelsBtn) {
+        treeLabelsBtn.addEventListener('click', function () {
+          if (tree_viz && tree_viz.cy) {
+            var showing = tree_viz.toggleLabels();
+            var labelsText = document.getElementById('tree_labels_text');
+            if (labelsText) {
+              labelsText.textContent = showing ? '隐藏标签' : '显示标签';
+            }
+          }
+        });
+      }
+
+      // 聚焦根按钮
+      var treeShowRootBtn = document.getElementById('tree_show_root_btn');
+      if (treeShowRootBtn) {
+        treeShowRootBtn.addEventListener('click', function () {
+          if (tree_viz && tree_viz.cy) {
+            tree_viz.focusOnRoot();
+          }
+        });
+      }
 
       // 上一个簇
-      document.getElementById('tree_cluster_prev_btn').addEventListener('click', function () {
-        if (currentClusterIndex >= 0) {
-          selectTreeCluster(currentClusterIndex - 1);
-        }
-      });
+      var treePrevBtn = document.getElementById('tree_cluster_prev_btn');
+      if (treePrevBtn) {
+        treePrevBtn.addEventListener('click', function () {
+          if (tree_viz && window._treeCurrentClusterIndex >= 0 && window._treeSelectTreeCluster) {
+            window._treeSelectTreeCluster(window._treeCurrentClusterIndex - 1);
+          }
+        });
+      }
 
       // 下一个簇
-      document.getElementById('tree_cluster_next_btn').addEventListener('click', function () {
-        if (currentClusterIndex < clusters.length - 1) {
-          selectTreeCluster(currentClusterIndex + 1);
-        }
-      });
+      var treeNextBtn = document.getElementById('tree_cluster_next_btn');
+      if (treeNextBtn) {
+        treeNextBtn.addEventListener('click', function () {
+          if (tree_viz && window._treeSelectTreeCluster) {
+            var clusters = tree_viz.getAvailableClusters();
+            if (typeof window._treeCurrentClusterIndex !== 'undefined' &&
+              window._treeCurrentClusterIndex < clusters.length - 1) {
+              window._treeSelectTreeCluster(window._treeCurrentClusterIndex + 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);
+      var treeClusterMenu = document.getElementById('tree_cluster_selector_menu');
+      if (treeClusterMenu) {
+        treeClusterMenu.addEventListener('click', function (e) {
+          e.preventDefault();
+          var link = e.target.closest('a[data-value]');
+          if (!link) return;
+
+          if (!window._treeSelectTreeCluster) return;
+
+          var value = link.getAttribute('data-value');
+          if (value === '') {
+            window._treeSelectTreeCluster(-1);
+          } else {
+            var index = parseInt(link.getAttribute('data-index'), 10);
+            if (!isNaN(index)) {
+              window._treeSelectTreeCluster(index);
+            }
           }
-        }
-      });
+        });
+      }
 
       // 导出 PNG
-      document.getElementById('tree_export_png').addEventListener('click', function (e) {
-        e.preventDefault();
-        tree_viz.exportPNG(options && options.exportId ? options.exportId + '_tree' : 'tree');
-      });
+      var treeExportPng = document.getElementById('tree_export_png');
+      if (treeExportPng) {
+        treeExportPng.addEventListener('click', function (e) {
+          e.preventDefault();
+          if (tree_viz && tree_viz.cy) {
+            var exportId = window._treeExportId || 'tree';
+            tree_viz.exportPNG(exportId + '_tree');
+          }
+        });
+      }
 
       // 导出 JSON
-      document.getElementById('tree_export_json').addEventListener('click', function (e) {
-        e.preventDefault();
-        tree_viz.exportJSON(treeData, options && options.exportId ? options.exportId + '_tree' : 'tree');
-      });
+      var treeExportJson = document.getElementById('tree_export_json');
+      if (treeExportJson) {
+        treeExportJson.addEventListener('click', function (e) {
+          e.preventDefault();
+          if (tree_viz && window._treeData) {
+            var exportId = window._treeExportId || 'tree';
+            tree_viz.exportJSON(window._treeData, exportId + '_tree');
+          }
+        });
+      }
 
       // 播放动画按钮
-      document.getElementById('tree_animate_btn').addEventListener('click', function (e) {
-        e.preventDefault();
-        tree_viz.animateFromRoot({ delay: 100 });
-      });
+      var treeAnimateBtn = document.getElementById('tree_animate_btn');
+      if (treeAnimateBtn) {
+        treeAnimateBtn.addEventListener('click', function (e) {
+          e.preventDefault();
+          if (tree_viz && tree_viz.cy) {
+            tree_viz.animateFromRoot({ delay: 100 });
+          }
+        });
+      }
     }
 
     function HandleAppError(err_string) {
@@ -2493,6 +2697,9 @@
       // 初始化全屏功能
       FullscreenManager.init();
 
+      // 初始化进化树工具栏事件（只注册一次，使用 null 检查确保安全）
+      initTreeToolbarEvents();
+
       // 通知父窗口准备就绪
       window.parent.postMessage({ type: 'HIVTRACE_INIT_READY' }, '*');
 
@@ -2511,7 +2718,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 +2736,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.2",
   "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"
-}
+}