@basic-genomics/hivtrace-viz 1.3.0 → 1.4.1

package/dist/embed/index.html

@@ -955,6 +955,11 @@
               <!-- 进化树工具栏 -->
               <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> 适应窗口
@@ -990,7 +995,7 @@
                   </span>
                 </div>
                 <!-- 导出按钮 -->
-                <div class="input-group-btn">
+                <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>
@@ -1000,6 +1005,11 @@
                     <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;">
@@ -1048,11 +1058,39 @@
   <script>
     // Cytoscape Stylesheet for Tree
     window.TREE_STYLESHEET = [
-      { selector: 'node', style: { 'font-size': 11, 'text-valign': 'center', 'text-halign': 'right', 'text-margin-x': 5, 'color': '#333', 'min-zoomed-font-size': 8 } },
+      // 基础节点样式 - 添加 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: 'edge', style: { 'width': 2, 'line-color': '#333', 'target-arrow-color': '#333', 'curve-style': 'bezier', '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 } },
@@ -1081,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 () { };
       }
@@ -1109,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 () {
@@ -1143,6 +1200,126 @@
         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;
+      };
+      // 查找簇成员的最近共同祖先（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; // 每层延迟（毫秒）
+
+        // 如果当前选中了某个簇，从该簇的 MRCA 开始动画
+        var animRoot = this.currentClusterId != null
+          ? this.findClusterRoot(this.currentClusterId)
+          : this.findRoot();
+        if (!animRoot) return;
+
+        // 第一步：全部置灰（使用 batch 确保立即生效）
+        this.cy.batch(function () {
+          self.cy.elements().addClass('grayed-out');
+        });
+
+        // 使用 Cytoscape.js 官方 BFS API 按层分组
+        var layers = [];
+        this.cy.elements().bfs({
+          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);
+          },
+          directed: true
+        });
+
+        // 第二步：分层逐渐恢复原色
+        layers.forEach(function (layer, i) {
+          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);
+        });
+
+        // 第三步：动画结束后恢复状态
+        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);
   </script>
@@ -1184,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();
+          }
+        }
       }
 
       // 防抖函数：避免频繁调用
@@ -1300,6 +1486,8 @@
       });
 
       tree_viz.init(treeData);
+      // 自动标记根节点（红色菱形）
+      tree_viz.markRoot();
 
       // 获取可用簇
       var clusters = tree_viz.getAvailableClusters();
@@ -1422,6 +1610,12 @@
         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) {

package/package.json

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