@basic-genomics/hivtrace-viz 1.4.0 → 1.4.1

package/dist/embed/index.html

@@ -1119,6 +1119,8 @@
         this.container = document.getElementById(containerId);
         this.cy = null;
         this.showLabels = false;
+        this.currentClusterId = null; // 当前选中的簇 ID（用于动画后恢复状态）
+        this.animationTimeouts = [];  // 存储所有活动的动画定时器 ID
         this.onStatsChange = opts.onStatsChange || function () { };
         this.onNodeSelect = opts.onNodeSelect || function () { };
       }
@@ -1147,20 +1149,37 @@
       };
       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()); });
+        var self = this;
+
+        // 停止任何正在进行的动画，防止状态冲突
+        this.stopAnimation();
+
+        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;
+            });
+
+            // 使用集合操作批量增删类名
+            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());
+              pathEles.removeClass('grayed-out');
+            }
+          } else {
+            self.cy.elements().removeClass('grayed-out');
           }
-          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 () {
@@ -1198,43 +1217,108 @@
         }
         return null;
       };
-      // 从根到叶子的渐显动画（先全部置灰，然后逐层恢复原色）
+      // 查找簇成员的最近共同祖先（MRCA）
+      // 使用官方 predecessors() + intersection() API
+      TreeViz.prototype.findClusterRoot = function (clusterId) {
+        if (!this.cy || clusterId == null) return this.findRoot();
+
+        // 获取该簇的所有成员节点
+        var clusterNodes = this.cy.nodes().filter(function (n) {
+          return n.data('cluster_id') != null && String(n.data('cluster_id')) === String(clusterId);
+        });
+
+        if (clusterNodes.length === 0) return this.findRoot();
+        if (clusterNodes.length === 1) return clusterNodes[0];
+
+        // 计算所有成员的共同祖先交集
+        // 包括节点自身，以处理一个节点是另一个节点祖先的情况
+        var commonAncestors = clusterNodes[0].predecessors().nodes().union(clusterNodes[0]);
+        for (var i = 1; i < clusterNodes.length; i++) {
+          commonAncestors = commonAncestors.intersection(clusterNodes[i].predecessors().nodes().union(clusterNodes[i]));
+        }
+
+        // 如果没有共同祖先，返回全局根
+        if (commonAncestors.length === 0) return this.findRoot();
+
+        // 在树结构中，MRCA 是共同祖先集合中唯一一个没有后代也在该集合中的节点
+        var mrca = commonAncestors.filter(function (n) {
+          return n.successors().nodes().intersection(commonAncestors).length === 0;
+        });
+
+        return mrca.length > 0 ? mrca[0] : commonAncestors[0];
+      };
+      // 停止并清理当前正在执行的所有动画定时器
+      TreeViz.prototype.stopAnimation = function () {
+        if (this.animationTimeouts && this.animationTimeouts.length > 0) {
+          this.animationTimeouts.forEach(function (tid) { clearTimeout(tid); });
+          this.animationTimeouts = [];
+        }
+      };
+      // 从根到叶子的渐显动画（支持簇感知：从簇的 MRCA 开始）
       TreeViz.prototype.animateFromRoot = function (options) {
         var self = this;
         if (!this.cy) return;
+
+        // 启动新动画前，先清理旧动画
+        this.stopAnimation();
+
         var opts = options || {};
         var delay = opts.delay || 120; // 每层延迟（毫秒）
 
-        var root = this.findRoot();
-        if (!root) return;
+        // 如果当前选中了某个簇，从该簇的 MRCA 开始动画
+        var animRoot = this.currentClusterId != null
+          ? this.findClusterRoot(this.currentClusterId)
+          : this.findRoot();
+        if (!animRoot) return;
 
-        // 第一步：全部置灰
-        this.cy.elements().addClass('grayed-out');
+        // 第一步：全部置灰（使用 batch 确保立即生效）
+        this.cy.batch(function () {
+          self.cy.elements().addClass('grayed-out');
+        });
 
         // 使用 Cytoscape.js 官方 BFS API 按层分组
         var layers = [];
         this.cy.elements().bfs({
-          roots: root,
+          roots: animRoot,
           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);
-            }
+            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'); });
+          var tid = setTimeout(function () {
+            self.cy.batch(function () {
+              layer.nodes.forEach(function (n) { n.removeClass('grayed-out'); });
+              layer.edges.forEach(function (e) { e.removeClass('grayed-out'); });
+            });
           }, i * delay);
+          self.animationTimeouts.push(tid);
         });
 
-        return { layerCount: layers.length, totalNodes: this.cy.nodes().length };
+        // 第三步：动画结束后恢复状态
+        var totalDelay = layers.length * delay;
+        var savedClusterId = this.currentClusterId;
+        var finalTid = setTimeout(function () {
+          if (savedClusterId != null) {
+            // 恢复簇高亮状态（highlightCluster 内部自带 batch）
+            self.highlightCluster(savedClusterId);
+          } else {
+            // 全局视图：确保移除所有 grayed-out 类
+            self.cy.batch(function () {
+              self.cy.elements().removeClass('grayed-out');
+            });
+          }
+          // 动画执行完毕，清空列表
+          self.animationTimeouts = [];
+        }, totalDelay + 150);
+
+        self.animationTimeouts.push(finalTid);
+
+        return { layerCount: layers.length, totalNodes: this.cy.nodes().length, animRoot: animRoot.id() };
       };
       global.TreeViz = TreeViz;
     })(window);
@@ -1277,6 +1361,15 @@
           var containerRect = container.getBoundingClientRect();
           container.style.height = (window.innerHeight - containerRect.top) + 'px';
         });
+
+        // 核心优化：确保进化树在容器大小变化或切换可见性时正确调整画布大小
+        if (typeof tree_viz !== 'undefined' && tree_viz && tree_viz.cy) {
+          // 仅当 tree-tab 是 active 状态时才执行 fitView
+          var treePane = document.getElementById('trace-tree');
+          if (treePane && treePane.classList.contains('active')) {
+            tree_viz.fitView();
+          }
+        }
       }
 
       // 防抖函数：避免频繁调用

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-genomics/hivtrace-viz",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "HIV-TRACE molecular transmission network visualization with React integration",
   "engines": {
     "node": ">=18"