@basic-genomics/hivtrace-viz 1.1.8 → 1.1.10

package/dist/embed/index.html

@@ -149,9 +149,11 @@
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     }
 
-    .hivtrace-fullscreen-btn button:hover {
+    .hivtrace-fullscreen-btn button:hover,
+    .hivtrace-fullscreen-btn button:focus {
       background: #f4f4f5;
       color: #18181b;
+      text-decoration: none;
     }
 
     /* 状态栏 badge 和 label 样式优化 */
@@ -285,54 +287,6 @@
       padding: 4px 12px;
     }
 
-    /* 簇选择器样式 */
-    .hivtrace-cluster-selector {
-      display: inline-flex;
-      align-items: stretch;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      background: #fff;
-    }
-
-    .hivtrace-cluster-selector-label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 6px 12px;
-      font-size: 13px;
-      color: #555;
-      background: #f5f5f5;
-      border-right: 1px solid #ccc;
-      white-space: nowrap;
-      min-width: 60px;
-    }
-
-    .hivtrace-cluster-selector .input-group-btn {
-      display: flex;
-    }
-
-    .hivtrace-cluster-selector-btn {
-      border: none !important;
-      border-radius: 0 !important;
-      box-shadow: none !important;
-      min-width: 100px;
-      text-align: left;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 6px 12px;
-      font-size: 13px;
-    }
-
-    .hivtrace-cluster-selector-btn:hover,
-    .hivtrace-cluster-selector-btn:focus {
-      background: #f9f9f9;
-    }
-
-    .hivtrace-cluster-selector-btn .caret {
-      margin-left: 8px;
-    }
-
     /* ========================================
        属性标签页 - 新布局
        顶部横向 pills + 下方左图右表
@@ -408,7 +362,8 @@
     }
 
     /* 下方：图表和表格上下排列（默认/小屏幕） */
-    .hivtrace-attributes-content {
+    .hivtrace-attributes-content,
+    .hivtrace-stats-content {
       flex: 1;
       display: flex;
       flex-direction: column;
@@ -419,20 +374,24 @@
 
     /* 大屏幕（> 996px）：左右布局 */
     @media (min-width: 997px) {
-      .hivtrace-attributes-content {
+
+      .hivtrace-attributes-content,
+      .hivtrace-stats-content {
         flex-direction: row;
       }
     }
 
-    /* 可视化面板 */
-    .hivtrace-viz-panel {
-      flex-shrink: 0;
+    /* 可视化面板和统计面板 */
+    .hivtrace-viz-panel,
+    .hivtrace-stats-panel {
+      flex: 1;
       display: flex;
       flex-direction: column;
       background: #f9fafb;
       border: 1px solid #e5e7eb;
       border-radius: 8px;
       padding: 12px;
+      min-width: 0;
     }
 
     /* 大屏幕（> 996px）：图表固定宽度 500px */
@@ -441,6 +400,11 @@
         width: 500px;
         flex-shrink: 0;
       }
+
+      .hivtrace-stats-panel {
+        flex: 1;
+        min-width: 300px;
+      }
     }
 
     .hivtrace-panel-toolbar {
@@ -641,9 +605,6 @@
           <li class="active" id="main-tab">
             <a id="trace-default-tab" href="#trace-results" data-toggle="tab">网络</a>
           </li>
-          <li class="disabled" id="graph-tab">
-            <a href="#trace-graph" data-toggle="tab">统计</a>
-          </li>
           <li class="disabled" id="clusters-tab">
             <a href="#trace-clusters" data-toggle="tab">簇</a>
           </li>
@@ -651,7 +612,7 @@
             <a href="#trace-nodes" data-toggle="tab">节点</a>
           </li>
           <li class="disabled" id="attributes-tab">
-            <a href="#trace-attributes" data-toggle="tab">属性</a>
+            <a href="#trace-attributes" data-toggle="tab">统计</a>
           </li>
         </ul>
 
@@ -823,39 +784,6 @@
             </div>
           </div>
 
-          <div id="trace-graph" class="tab-pane">
-            <div class="hivtrace-stats-container">
-              <!-- 顶部：Cluster 选择器工具栏 -->
-              <div class="hivtrace-stats-header">
-                <div class="hivtrace-cluster-selector">
-                  <span class="hivtrace-cluster-selector-label">选择簇</span>
-                  <div class="input-group-btn">
-                    <button type="button" class="btn btn-default dropdown-toggle hivtrace-cluster-selector-btn"
-                      data-toggle="dropdown" id="stats_cluster_selector_btn">
-                      <span id="stats_cluster_selector_label">总览</span> <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu" role="menu" id="stats_cluster_selector_menu">
-                      <li><a href="#" data-value="">总览</a></li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 下方：统计表格和直方图 -->
-              <div class="hivtrace-stats-content">
-                <div class="hivtrace-stats-panel">
-                  <p class="lead" id="stats_title">网络统计</p>
-                  <table class="table table-striped table-condensed table-responsive" id="graph_summary_table"></table>
-                </div>
-                <div class="hivtrace-stats-panel">
-                  <p id="histogram_label" class="lead"></p>
-                  <div id="histogram_tag"></div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-
 
 
 
@@ -886,16 +814,17 @@
 
           <div id="trace-attributes" class="tab-pane">
             <div class="hivtrace-attributes-container">
-              <!-- 顶部：簇选择器 + 属性选择器（横向 pills） -->
+              <!-- 顶部：簇选择器 + 属性选择器 -->
               <div class="hivtrace-attributes-header">
                 <!-- 簇选择器 -->
                 <div style="margin-bottom: 12px;">
-                  <div class="hivtrace-cluster-selector">
-                    <span class="hivtrace-cluster-selector-label">选择簇</span>
+                  <div class="input-group input-group-sm" style="max-width: 280px;">
+                    <span class="input-group-addon" style="min-width: 60px; text-align: center;">选择簇</span>
                     <div class="input-group-btn">
-                      <button type="button" class="btn btn-default dropdown-toggle hivtrace-cluster-selector-btn"
-                        data-toggle="dropdown" id="attrs_cluster_selector_btn">
-                        <span id="attrs_cluster_selector_label">总览</span> <span class="caret"></span>
+                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                        id="attrs_cluster_selector_btn" style="min-width: 140px; text-align: left;">
+                        <span id="attrs_cluster_selector_label">总览</span> <span class="caret"
+                          style="float: right; margin-top: 8px;"></span>
                       </button>
                       <ul class="dropdown-menu" role="menu" id="attrs_cluster_selector_menu">
                         <li><a href="#" data-value="">总览</a></li>
@@ -907,8 +836,21 @@
                 <div class="hivtrace-pill-row" data-hivtrace-ui-role="attributes_cat"></div>
               </div>
 
-              <!-- 下方：左侧图表 + 右侧表格 -->
-              <div class="hivtrace-attributes-content">
+              <!-- 统计内容区域（选中 None 时显示） -->
+              <div class="hivtrace-stats-content" id="attrs_stats_content">
+                <div class="hivtrace-stats-panel">
+                  <p class="lead" id="attrs_stats_title">网络统计</p>
+                  <table class="table table-striped table-condensed table-responsive" id="graph_summary_table">
+                  </table>
+                </div>
+                <div class="hivtrace-stats-panel">
+                  <p id="histogram_label" class="lead"></p>
+                  <div id="histogram_tag"></div>
+                </div>
+              </div>
+
+              <!-- 属性可视化内容（选中属性时显示） -->
+              <div class="hivtrace-attributes-content" style="display: none;">
                 <!-- 左侧：可视化区域（弦图/散点图） -->
                 <div class="hivtrace-viz-panel" data-hivtrace-ui-role="aux_svg_holder_enclosed" style="display: none">
                   <div class="hivtrace-panel-toolbar">
@@ -947,7 +889,6 @@
     <img class="hidden" id="hyphy-chart-image" />
     <canvas class="hidden" id="hyphy-chart-canvas"></canvas>
 
-  </div> <!-- 关闭内容容器 -->
   </div> <!-- 关闭 #hivtrace-main -->
 
   <script src="./hivtrace.js"></script>
@@ -982,9 +923,8 @@
         var attributes = null;
 
         // 从传入的options中获取配置
+        var enableClusterTracking = options && options.enableClusterTracking === true;
         var expandClusters = options && Array.isArray(options.expand) ? options.expand : [];
-        // 获取自定义上下文菜单项配置
-        var customContextMenuItems = options && Array.isArray(options.customContextMenuItems) ? options.customContextMenuItems : [];
 
         // 获取基因距离阈值并动态更新簇标签
         var threshold = options && typeof options.threshold === 'number' ? options.threshold : 0.015;
@@ -1018,61 +958,6 @@
           }
         );
 
-        // 将自定义上下文菜单项赋值给 user_graph 实例
-        if (customContextMenuItems.length > 0) {
-          user_graph.customContextMenuItems = customContextMenuItems;
-          // 设置点击回调，通过 postMessage 通知宿主应用
-          user_graph.onCustomMenuItemClick = function (itemId, clusterInfo) {
-            // 提取节点的关键信息（避免循环引用和不可序列化的对象）
-            var extractNodeInfo = function (node) {
-              if (!node) return null;
-              return {
-                id: node.id,
-                // 基本属性
-                degree: node.degree,
-                // 节点属性（如果存在）
-                attributes: node.patient_attributes || node.attributes || undefined,
-                // 位置信息
-                x: typeof node.x === 'number' ? node.x : undefined,
-                y: typeof node.y === 'number' ? node.y : undefined,
-                // 状态信息
-                is_hidden: Boolean(node.is_hidden),
-                match_filter: Boolean(node.match_filter),
-                // 子簇信息（如果存在）
-                subcluster_id: node.subcluster_id,
-                subcluster_label: node.subcluster_label,
-              };
-            };
-
-            var essentialClusterData = {
-              cluster_id: clusterInfo?.cluster_id ?? clusterInfo?.id ?? undefined,
-              node_count: clusterInfo?.node_count ?? (Array.isArray(clusterInfo?.nodes) ? clusterInfo.nodes.length : 0),
-              cluster_size: typeof clusterInfo?.cluster_size === 'number' ? clusterInfo.cluster_size : undefined,
-              position: {
-                x: typeof clusterInfo?.x === 'number' ? clusterInfo.x : undefined,
-                y: typeof clusterInfo?.y === 'number' ? clusterInfo.y : undefined
-              },
-              state: {
-                expanded: Boolean(clusterInfo?.expanded),
-                fixed: Boolean(clusterInfo?.fixed)
-              },
-              // 节点 ID 列表（向后兼容）
-              node_ids: Array.isArray(clusterInfo?.nodes)
-                ? clusterInfo.nodes.map(function (node) { return node?.id }).filter(Boolean)
-                : [],
-              // 完整节点信息（用于扩展）
-              nodes: Array.isArray(clusterInfo?.nodes)
-                ? clusterInfo.nodes.map(extractNodeInfo).filter(Boolean)
-                : []
-            };
-            window.parent.postMessage({
-              type: 'CUSTOM_MENU_CLICK',
-              itemId: itemId,
-              clusterInfo: essentialClusterData
-            }, '*');
-          };
-        }
-
         if (user_graph.is_empty()) {
           HandleAppError(
             "This network contains no clusters and cannot be displayed"
@@ -1081,10 +966,10 @@
           hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
           hivtrace.graphSummary(user_graph, graph_summary_tag);
 
-          // 初始化 cluster 选择器 (Bootstrap dropdown)
+          // 初始化 cluster 选择器 (统计 Tab)
           (function initClusterSelector() {
-            var menu = document.getElementById('stats_cluster_selector_menu');
-            var label = document.getElementById('stats_cluster_selector_label');
+            var menu = document.getElementById('attrs_cluster_selector_menu');
+            var label = document.getElementById('attrs_cluster_selector_label');
             if (!menu || !label) return;
 
             // 获取所有 cluster 并按 ID 排序
@@ -1104,20 +989,26 @@
               menu.appendChild(li);
             });
 
+            // 设置属性页的簇过滤状态
+            user_graph.attributes_selected_cluster = null;
+
             // 监听 dropdown 菜单项点击
             menu.addEventListener('click', function (e) {
               if (e.target.tagName === 'A') {
                 e.preventDefault();
                 var selectedClusterId = e.target.getAttribute('data-value');
                 var selectedText = e.target.textContent;
-                var statsTitle = document.getElementById('stats_title');
+                var statsTitle = document.getElementById('attrs_stats_title');
 
                 // 更新按钮文本
                 label.textContent = selectedText;
 
+                // 设置属性页的簇过滤
+                user_graph.attributes_selected_cluster = selectedClusterId || null;
+
                 if (!selectedClusterId) {
                   // 显示全网统计
-                  statsTitle.textContent = '网络统计';
+                  if (statsTitle) statsTitle.textContent = '网络统计';
                   hivtrace.graphSummary(user_graph, graph_summary_tag);
                   hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
                 } else {
@@ -1127,10 +1018,19 @@
                   });
 
                   if (cluster) {
-                    statsTitle.textContent = '簇 ' + selectedClusterId + ' 统计';
+                    if (statsTitle) statsTitle.textContent = '簇 ' + selectedClusterId + ' 统计';
                     updateClusterStatistics(cluster);
                   }
                 }
+
+                // 重新触发当前选中的属性（如果有）
+                if (user_graph.colorizer && user_graph.colorizer['category_id']) {
+                  if (user_graph.colorizer['continuous']) {
+                    user_graph.handle_attribute_continuous(user_graph.colorizer['category_id']);
+                  } else {
+                    user_graph.handle_attribute_categorical(user_graph.colorizer['category_id'], false);
+                  }
+                }
               }
             });
 
@@ -1241,64 +1141,75 @@
             }
           })();
 
-          // 初始化属性标签页的 cluster 选择器
-          (function initAttrsClusterSelector() {
-            var menu = document.getElementById('attrs_cluster_selector_menu');
-            var label = document.getElementById('attrs_cluster_selector_label');
-            if (!menu || !label) return;
-
-            // 获取所有 cluster 并按 ID 排序
-            var clusters = user_graph.clusters || [];
-            clusters = clusters.slice().sort(function (a, b) {
-              return a.cluster_id - b.cluster_id;
-            });
-
-            // 填充 cluster 选项到 dropdown menu
-            clusters.forEach(function (cluster) {
-              var li = document.createElement('li');
-              var a = document.createElement('a');
-              a.href = '#';
-              a.setAttribute('data-value', cluster.cluster_id);
-              a.textContent = '簇 ' + cluster.cluster_id + ' (' + cluster.children.length + ' 节点)';
-              li.appendChild(a);
-              menu.appendChild(li);
-            });
-
-            // 监听 dropdown 菜单项点击
-            menu.addEventListener('click', function (e) {
-              if (e.target.tagName === 'A') {
-                e.preventDefault();
-                var selectedClusterId = e.target.getAttribute('data-value');
-                var selectedText = e.target.textContent;
 
-                // 更新按钮文本
-                label.textContent = selectedText;
 
-                // 设置属性页的簇过滤
-                user_graph.attributes_selected_cluster = selectedClusterId || null;
 
-                // 更新属性 pill 上的数字（显示簇内唯一值数量）
-                user_graph.updateAttributePillCounts(selectedClusterId || null);
 
-                // 重新触发当前选中的属性（支持分类属性和连续属性）
-                if (user_graph.colorizer && user_graph.colorizer['category_id']) {
-                  if (user_graph.colorizer['continuous']) {
-                    // 连续属性 - 散点图
-                    user_graph.handle_attribute_continuous(user_graph.colorizer['category_id']);
-                  } else {
-                    // 分类属性 - 弦图
-                    user_graph.handle_attribute_categorical(user_graph.colorizer['category_id'], false);
+          // 可配置的追踪簇回调功能 - 基于传入参数决定是否启用
+          if (enableClusterTracking) {
+            user_graph.onTrackCluster = function (clusterInfo, allData) {
+              try {
+                // 直接提取需要的数据，避免复杂的数据清理
+                const essentialClusterData = {
+                  cluster_id: clusterInfo?.cluster_id ?? clusterInfo?.id ?? undefined,
+                  node_count: clusterInfo?.node_count ?? (Array.isArray(clusterInfo?.nodes) ? clusterInfo.nodes.length : 0),
+                  cluster_size: typeof clusterInfo?.cluster_size === 'number' ? clusterInfo.cluster_size : undefined,
+                  position: {
+                    x: typeof clusterInfo?.x === 'number' ? clusterInfo.x : undefined,
+                    y: typeof clusterInfo?.y === 'number' ? clusterInfo.y : undefined
+                  },
+                  state: {
+                    expanded: Boolean(clusterInfo?.expanded),
+                    fixed: Boolean(clusterInfo?.fixed)
+                  },
+                  // 只提取节点ID列表，避免传递复杂对象
+                  node_ids: Array.isArray(clusterInfo?.nodes)
+                    ? clusterInfo.nodes.slice(0, 20).map(node => node?.id).filter(Boolean)
+                    : []
+                };
+
+                // 提取网络统计信息
+                const networkStats = {
+                  total_nodes: allData?.network_info?.node_count ?? user_graph?.nodes?.length ?? 0,
+                  total_edges: allData?.network_info?.edge_count ?? user_graph?.edges?.length ?? 0,
+                  total_clusters: allData?.network_info?.cluster_count ?? 0
+                };
+
+                // 发送轻量级、精确的数据
+                window.parent.postMessage({
+                  type: 'TRACK_CLUSTER',
+                  clusterInfo: essentialClusterData,
+                  allData: { network_info: networkStats }
+                }, '*');
+
+              } catch (error) {
+                console.warn('簇追踪回调处理失败:', error.message);
+
+                // 最小化降级数据
+                window.parent.postMessage({
+                  type: 'TRACK_CLUSTER',
+                  clusterInfo: {
+                    cluster_id: 'fallback',
+                    node_count: 0,
+                    cluster_size: undefined,
+                    position: { x: undefined, y: undefined },
+                    state: { expanded: false, fixed: false },
+                    node_ids: []
+                  },
+                  allData: {
+                    network_info: {
+                      total_nodes: 0,
+                      total_edges: 0,
+                      total_clusters: 0
+                    }
                   }
-                }
+                }, '*');
               }
-            });
-          })();
-
-
+            };
+          }
 
           [
             "#main-tab",
-            "#graph-tab",
             "#clusters-tab",
             "#subclusters-tab",
             "#nodes-tab",
@@ -1411,17 +1322,11 @@
       overlay.innerHTML = `
           <i class="fa fa-exclamation-triangle hivtrace-error-icon"></i>
           <div class="hivtrace-error-message">${message}</div>
-          <button class="hivtrace-retry-btn" onclick="requestRetry()">重试</button>
+          <button class="hivtrace-retry-btn" onclick="location.reload()">重试</button>
         `;
       window.parent.postMessage({ type: 'ERROR', message: message }, '*');
     }
 
-    // 请求宿主应用重试
-    function requestRetry() {
-      window.parent.postMessage({ type: 'HIVTRACE_RETRY' }, '*');
-    }
-
-
 
     function in_progress() {
       return $(".progress").length > 0;