@basic-genomics/hivtrace-viz 1.3.0 → 1.4.0

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 } },
@@ -1143,6 +1181,61 @@
         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>
@@ -1300,6 +1393,8 @@
       });
 
       tree_viz.init(treeData);
+      // 自动标记根节点（红色菱形）
+      tree_viz.markRoot();
 
       // 获取可用簇
       var clusters = tree_viz.getAvailableClusters();
@@ -1422,6 +1517,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.0",
   "description": "HIV-TRACE molecular transmission network visualization with React integration",
   "engines": {
     "node": ">=18"