@basic-genomics/hivtrace-viz 1.4.1 → 1.5.1

package/dist/embed/index.html

@@ -121,6 +121,19 @@
       background: #e8e8e8;
     }
 
+    /* 小尺寸内联 spinner - 用于 Tab 标签等 */
+    .hivtrace-loading-spinner-sm {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 2px solid #ccc;
+      border-top-color: #666;
+      border-radius: 50%;
+      animation: hivtrace-spin 0.8s linear infinite;
+      vertical-align: middle;
+      margin-left: 4px;
+    }
+
     /* 状态栏样式 - 简洁中性 */
     .hivtrace-status-bar {
       width: 100%;
@@ -1010,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;">
@@ -1153,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();
@@ -1217,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) {
@@ -1271,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');
@@ -1444,12 +1551,114 @@
       countryCenersObject = null,
       countryOutlines = null;
 
+    // 显示进化树 Tab 的加载状态（用于分析中场景）
+    function showTreeTabLoading(options) {
+      var treeTab = document.getElementById('tree-tab');
+      if (treeTab) {
+        treeTab.style.display = '';
+        treeTab.classList.remove('disabled');
+        // 添加加载指示器到 Tab 标签（使用统一的 CSS spinner）
+        var tabLink = treeTab.querySelector('a');
+        if (tabLink && !tabLink.querySelector('.tree-loading-indicator')) {
+          tabLink.innerHTML = '进化树 <span class="tree-loading-indicator hivtrace-loading-spinner-sm"></span>';
+        }
+      }
+
+      // 在 Tab 内容区显示加载占位符（使用与主加载态统一的样式）
+      var treeContainer = document.getElementById('tree_container');
+      if (treeContainer) {
+        treeContainer.innerHTML = '<div class="tree-loading-placeholder" style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;">' +
+          '<div class="hivtrace-loading-spinner"></div>' +
+          '<div class="hivtrace-loading-text">进化树正在分析中...</div>' +
+          '<div style="font-size:13px;margin-top:8px;color:#999;">请稍候，分析完成后将自动显示</div>' +
+          '</div>';
+      }
+
+      // 禁用进化树工具栏按钮
+      ['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) {
+            btn.disabled = true;
+            btn.style.opacity = '0.5';
+            btn.style.pointerEvents = 'none';
+          }
+        });
+    }
+
+    // 清除进化树 Tab 的加载指示器
+    function clearTreeTabLoadingIndicator() {
+      var treeTab = document.getElementById('tree-tab');
+      if (treeTab) {
+        var tabLink = treeTab.querySelector('a');
+        if (tabLink) {
+          tabLink.innerHTML = '进化树';
+        }
+      }
+      // 恢复工具栏按钮
+      ['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) {
+            btn.disabled = false;
+            btn.style.opacity = '';
+            btn.style.pointerEvents = '';
+          }
+        });
+    }
+
+    // 隐藏进化树 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) {
       if (!treeData || !treeData.nodes || treeData.nodes.length === 0) {
         return;
       }
 
+      // 清除加载指示器（如果之前显示过）
+      clearTreeTabLoadingIndicator();
+
       // 显示进化树 Tab
       var treeTab = document.getElementById('tree-tab');
       if (treeTab) {
@@ -1457,6 +1666,7 @@
         treeTab.classList.remove('disabled');
       }
 
+
       // 保存树数据
       window._treeData = treeData;
 
@@ -1568,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) {
@@ -2429,16 +2644,41 @@
 
         if (data.type === 'HIVTRACE_DATA') {
           init(data.graphData, data.options);
-          // 如果提供了进化树数据，初始化进化树
-          if (data.options && data.options.treeData) {
-            initTreeViz(data.options.treeData, data.options);
+          // 处理进化树显示逻辑
+          if (data.options) {
+            if (data.options.showTreeTab && data.options.treeLoading) {
+              // 显示进化树 Tab 的加载状态
+              showTreeTabLoading(data.options);
+            } 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);
-          // 更新进化树数据（如果提供）
-          if (data.options && data.options.treeData) {
-            initTreeViz(data.options.treeData, data.options);
+          // 更新进化树显示逻辑
+          if (data.options) {
+            if (data.options.showTreeTab && data.options.treeLoading) {
+              // 显示进化树 Tab 的加载状态
+              showTreeTabLoading(data.options);
+            } 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') {
           // 处理来自宿主应用的错误（如 API 请求失败）
           showLoadingError(data.message || '数据加载失败');