@basic-genomics/hivtrace-viz 1.1.9 → 1.1.11

package/dist/embed/index.html

@@ -147,7 +147,6 @@
       cursor: pointer;
       transition: background 0.15s, color 0.15s;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-      text-decoration: none;
     }
 
     .hivtrace-fullscreen-btn button:hover,
@@ -288,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 + 下方左图右表
@@ -411,7 +362,8 @@
     }
 
     /* 下方：图表和表格上下排列（默认/小屏幕） */
-    .hivtrace-attributes-content {
+    .hivtrace-attributes-content,
+    .hivtrace-stats-content {
       flex: 1;
       display: flex;
       flex-direction: column;
@@ -422,55 +374,24 @@
 
     /* 大屏幕（> 996px）：左右布局 */
     @media (min-width: 997px) {
-      .hivtrace-attributes-content {
-        flex-direction: row;
-      }
-    }
 
-    /* 概览统计区域：默认上下排列（小屏幕） */
-    .hivtrace-overview-stats {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      min-height: 0;
-      overflow: auto;
-    }
-
-    /* 大屏幕（> 996px）：概览统计左右布局 */
-    @media (min-width: 997px) {
-      .hivtrace-overview-stats {
+      .hivtrace-attributes-content,
+      .hivtrace-stats-content {
         flex-direction: row;
       }
     }
 
-    /* 统计面板样式 */
+    /* 可视化面板和统计面板 */
+    .hivtrace-viz-panel,
     .hivtrace-stats-panel {
       flex: 1;
-      background: #f9fafb;
-      border: 1px solid #e5e7eb;
-      border-radius: 8px;
-      padding: 12px;
-      min-width: 0;
-    }
-
-    /* 大屏幕（> 996px）：统计面板各占一半 */
-    @media (min-width: 997px) {
-      .hivtrace-stats-panel {
-        flex: 1;
-        min-width: 300px;
-      }
-    }
-
-    /* 可视化面板 */
-    .hivtrace-viz-panel {
-      flex-shrink: 0;
       display: flex;
       flex-direction: column;
       background: #f9fafb;
       border: 1px solid #e5e7eb;
       border-radius: 8px;
       padding: 12px;
+      min-width: 0;
     }
 
     /* 大屏幕（> 996px）：图表固定宽度 500px */
@@ -479,6 +400,11 @@
         width: 500px;
         flex-shrink: 0;
       }
+
+      .hivtrace-stats-panel {
+        flex: 1;
+        min-width: 300px;
+      }
     }
 
     .hivtrace-panel-toolbar {
@@ -686,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>
 
@@ -858,6 +784,9 @@
             </div>
           </div>
 
+
+
+
           <div id="trace-clusters" class="tab-pane">
             <div class="row">
               <div class="col-lg-12">
@@ -885,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>
@@ -906,21 +836,21 @@
                 <div class="hivtrace-pill-row" data-hivtrace-ui-role="attributes_cat"></div>
               </div>
 
-              <!-- 概览统计内容（选中概览 pill 时显示，默认隐藏） -->
-              <div class="hivtrace-overview-stats" id="attrs_stats_content" style="display: none;">
+              <!-- 统计内容区域（选中 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="attrs_graph_summary_table">
+                  <table class="table table-striped table-condensed table-responsive" id="graph_summary_table">
                   </table>
                 </div>
                 <div class="hivtrace-stats-panel">
-                  <p id="attrs_histogram_label" class="lead"></p>
-                  <div id="attrs_histogram_tag"></div>
+                  <p id="histogram_label" class="lead"></p>
+                  <div id="histogram_tag"></div>
                 </div>
               </div>
 
-              <!-- 属性内容（选中属性 pill 时显示） -->
-              <div class="hivtrace-attributes-content">
+              <!-- 属性可视化内容（选中属性时显示） -->
+              <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">
@@ -959,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>
@@ -994,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;
@@ -1030,174 +958,16 @@
           }
         );
 
-        // 将自定义上下文菜单项赋值给 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"
           );
         } else {
-          // 旧的统计初始化已移除，统计功能现在在属性 Tab 的概览模式中
-
-          // 渲染概览统计内容（表格 + 直方图）
-          // 被 clusternetwork.js 的 handleOverview 函数调用
-          window.renderOverviewStats = function (selectedClusterId) {
-            var statsTitle = document.getElementById('attrs_stats_title');
-            var summaryTable = '#attrs_graph_summary_table';
-            var histTag = '#attrs_histogram_tag';
-            var histLabel = '#attrs_histogram_label';
-            var clusters = user_graph.clusters || [];
-
-            if (!selectedClusterId) {
-              // 显示全网统计
-              if (statsTitle) statsTitle.textContent = '网络统计';
-              hivtrace.graphSummary(user_graph, summaryTable);
-              hivtrace.histogramDistances(graph, histTag, histLabel);
-            } else {
-              // 显示单个 cluster 的统计
-              var cluster = clusters.find(function (c) {
-                return String(c.cluster_id) === String(selectedClusterId);
-              });
-
-              if (cluster) {
-                if (statsTitle) statsTitle.textContent = '簇 ' + selectedClusterId + ' 统计';
-
-                // 生成簇统计表格
-                var table = d3.select(summaryTable);
-                var tbody = table.select("tbody");
-                if (tbody.empty()) {
-                  tbody = table.append("tbody");
-                }
-
-                var degreeStats = cluster.degrees || { mean: 0, median: 0, min: 0, max: 0, Q1: 0, Q3: 0 };
-                var distanceStats = cluster.distances || { mean: 0, median: 0, min: 0, max: 0, Q1: 0, Q3: 0 };
-                var nodeCount = cluster.children ? cluster.children.length : 0;
-                var totalDegree = (degreeStats.mean || 0) * nodeCount;
-                var edgeCount = Math.round(totalDegree / 2);
-
-                var floatFormat = d3.format(",.2r");
-                var percentFormat = d3.format(",.3p");
-
-                var tableData = [
-                  ['节点', nodeCount],
-                  ['边', edgeCount],
-                  ['每节点链接数', ''],
-                  ['&nbsp;&nbsp;<i>平均值</i>', floatFormat(degreeStats.mean || 0)],
-                  ['&nbsp;&nbsp;<i>中位数</i>', floatFormat(degreeStats.median || 0)],
-                  ['&nbsp;&nbsp;<i>范围</i>', (degreeStats.min || 0) + ' - ' + (degreeStats.max || 0)],
-                  ['&nbsp;&nbsp;<i>四分位距</i>', (degreeStats.Q1 || 0) + ' - ' + (degreeStats.Q3 || 0)]
-                ];
-
-                if (distanceStats && distanceStats.mean !== null && distanceStats.mean !== undefined) {
-                  tableData.push(['链接节点间的遗传距离', '']);
-                  tableData.push(['&nbsp;&nbsp;<i>平均值</i>', percentFormat(distanceStats.mean)]);
-                  tableData.push(['&nbsp;&nbsp;<i>中位数</i>', percentFormat(distanceStats.median)]);
-                  tableData.push(['&nbsp;&nbsp;<i>范围</i>', percentFormat(distanceStats.min) + ' - ' + percentFormat(distanceStats.max)]);
-                  tableData.push(['&nbsp;&nbsp;<i>四分位距</i>', percentFormat(distanceStats.Q1) + ' - ' + percentFormat(distanceStats.Q3)]);
-                }
-
-                var rows = tbody.selectAll("tr").data(tableData);
-                rows.enter().append("tr");
-                rows.exit().remove();
-                var columns = rows.selectAll("td").data(function (d) { return d; });
-                columns.enter().append("td");
-                columns.exit().remove();
-                columns.html(function (d) { return d; });
-
-                // 生成簇直方图
-                d3.select(histTag).selectAll("*").remove();
-                d3.select(histLabel).text('');
-
-                var clusterNodeIds = new Set(cluster.children.map(function (n) { return n.id; }));
-                var clusterEdges = [];
-
-                if (user_graph.edges && user_graph.edges.length > 0) {
-                  user_graph.edges.forEach(function (e) {
-                    var sourceNode = typeof e.source === 'object' ? e.source : user_graph.nodes[e.source];
-                    var targetNode = typeof e.target === 'object' ? e.target : user_graph.nodes[e.target];
-                    if (sourceNode && targetNode) {
-                      var sourceId = sourceNode.id;
-                      var targetId = targetNode.id;
-                      if (clusterNodeIds.has(sourceId) && clusterNodeIds.has(targetId)) {
-                        clusterEdges.push({ length: e.length });
-                      }
-                    }
-                  });
-                }
-
-                if (clusterEdges.length >= 3) {
-                  var clusterGraphData = { Edges: clusterEdges };
-                  hivtrace.histogramDistances(clusterGraphData, histTag, histLabel);
-                } else {
-                  d3.select(histLabel).text('簇 ' + cluster.cluster_id + ' 遗传距离分布');
-                  var message = clusterEdges.length === 0
-                    ? "暂无直方图数据"
-                    : "边数过少（" + clusterEdges.length + " 条），无法生成直方图";
-                  d3.select(histTag).append("p")
-                    .style("color", "#6b7280")
-                    .style("text-align", "center")
-                    .style("padding", "40px 0")
-                    .text(message);
-                }
-              }
-            }
-          };
+          hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
+          hivtrace.graphSummary(user_graph, graph_summary_tag);
 
-          // 初始化属性标签页的 cluster 选择器
-          (function initAttrsClusterSelector() {
+          // 初始化 cluster 选择器 (统计 Tab)
+          (function initClusterSelector() {
             var menu = document.getElementById('attrs_cluster_selector_menu');
             var label = document.getElementById('attrs_cluster_selector_label');
             if (!menu || !label) return;
@@ -1219,12 +989,16 @@
               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('attrs_stats_title');
 
                 // 更新按钮文本
                 label.textContent = selectedText;
@@ -1232,28 +1006,265 @@
                 // 设置属性页的簇过滤
                 user_graph.attributes_selected_cluster = selectedClusterId || null;
 
-                // 更新属性 pill 上的数字（显示簇内唯一值数量）
-                user_graph.updateAttributePillCounts(selectedClusterId || null);
+                if (!selectedClusterId) {
+                  // 显示全网统计
+                  if (statsTitle) statsTitle.textContent = '网络统计';
+                  hivtrace.graphSummary(user_graph, graph_summary_tag);
+                  hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
+                } else {
+                  // 显示单个 cluster 的统计
+                  var cluster = clusters.find(function (c) {
+                    return String(c.cluster_id) === String(selectedClusterId);
+                  });
 
-                // 重新触发当前选中的属性（支持分类属性和连续属性）
+                  if (cluster) {
+                    if (statsTitle) statsTitle.textContent = '簇 ' + selectedClusterId + ' 统计';
+                    updateClusterStatistics(cluster);
+                  }
+                }
+
+                // 重新触发当前选中的属性（如果有）
                 if (user_graph.colorizer && user_graph.colorizer['category_id']) {
-                  if (user_graph.colorizer['category_id'] === '_overview') {
-                    // 概览模式 - 更新统计内容
-                    window.renderOverviewStats(selectedClusterId || null);
-                  } else if (user_graph.colorizer['continuous']) {
-                    // 连续属性 - 散点图
+                  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);
                   }
                 }
+
+                // 更新 pill badges（唯一值数量）
+                updatePillBadges(selectedClusterId, clusters);
               }
             });
+
+            // 更新 pill badges 以反映选定簇的唯一值数量
+            function updatePillBadges(selectedClusterId, clusters) {
+              var pills = document.querySelectorAll('.hivtrace-pill-row .hivtrace-pill');
+              if (!pills.length) return;
+
+              // 确定要统计的节点集合
+              var nodes = [];
+              if (!selectedClusterId) {
+                // 全网：使用所有节点
+                nodes = user_graph.nodes || [];
+              } else {
+                // 特定簇：只使用该簇的节点
+                var cluster = clusters.find(function (c) {
+                  return String(c.cluster_id) === String(selectedClusterId);
+                });
+                if (cluster && cluster.children) {
+                  nodes = cluster.children;
+                }
+              }
+
+              // 更新每个 pill 的 badge
+              pills.forEach(function (pill) {
+                var badge = pill.querySelector('.badge');
+                if (!badge) return;
+
+                // 从 pill 的原始 HTML 中提取属性 ID（通过闭包数据不可用，需要通过文本匹配）
+                var pillText = pill.textContent.trim();
+                var attrId = null;
+
+                // 遍历 user_graph.json 中的属性来匹配
+                if (user_graph.json && user_graph.json.patient_attribute_schema) {
+                  for (var key in user_graph.json.patient_attribute_schema) {
+                    var attr = user_graph.json.patient_attribute_schema[key];
+                    if (attr.label && pillText.indexOf(attr.label) === 0) {
+                      attrId = key;
+                      break;
+                    }
+                  }
+                }
+
+                if (attrId) {
+                  // 计算选定节点中该属性的唯一值数量
+                  var uniqueValues = new Set();
+                  nodes.forEach(function (node) {
+                    var value = user_graph.attribute_node_value_by_id(node, attrId);
+                    if (value !== null && value !== undefined && value !== 'missing') {
+                      uniqueValues.add(value);
+                    }
+                  });
+                  badge.textContent = uniqueValues.size;
+                }
+              });
+            }
+
+
+            // 计算并显示单个 cluster 的统计
+            function updateClusterStatistics(cluster) {
+              var table = d3.select(graph_summary_tag);
+              var tbody = table.select("tbody");
+              if (tbody.empty()) {
+                tbody = table.append("tbody");
+              }
+
+              // 使用 cluster 对象已有的预计算统计信息（由 clusternetwork.js 计算）
+              // cluster.degrees: 节点度分布统计 (mean, median, min, max, Q1, Q3)
+              // cluster.distances: 边长度分布统计 (mean, median, min, max, Q1, Q3)
+              var degreeStats = cluster.degrees || { mean: 0, median: 0, min: 0, max: 0, Q1: 0, Q3: 0 };
+              var distanceStats = cluster.distances || { mean: 0, median: 0, min: 0, max: 0, Q1: 0, Q3: 0 };
+
+              // 节点数
+              var nodeCount = cluster.children ? cluster.children.length : 0;
+
+              // 边数计算：度数总和 / 2（每条边贡献两个度）
+              // 从预计算的统计反推：总度数 ≈ mean * nodeCount
+              var totalDegree = (degreeStats.mean || 0) * nodeCount;
+              var edgeCount = Math.round(totalDegree / 2);
+
+              var floatFormat = d3.format(",.2r");
+              var percentFormat = d3.format(",.3p");
+
+              // 构建表格数据
+              var tableData = [
+                ['节点', nodeCount],
+                ['边', edgeCount],
+                ['每节点链接数', ''],
+                ['&nbsp;&nbsp;<i>平均值</i>', floatFormat(degreeStats.mean || 0)],
+                ['&nbsp;&nbsp;<i>中位数</i>', floatFormat(degreeStats.median || 0)],
+                ['&nbsp;&nbsp;<i>范围</i>', (degreeStats.min || 0) + ' - ' + (degreeStats.max || 0)],
+                ['&nbsp;&nbsp;<i>四分位距</i>', (degreeStats.Q1 || 0) + ' - ' + (degreeStats.Q3 || 0)]
+              ];
+
+              // 添加遗传距离统计（使用预计算的 distances）
+              if (distanceStats && distanceStats.mean !== null && distanceStats.mean !== undefined) {
+                tableData.push(['链接节点间的遗传距离', '']);
+                tableData.push(['&nbsp;&nbsp;<i>平均值</i>', percentFormat(distanceStats.mean)]);
+                tableData.push(['&nbsp;&nbsp;<i>中位数</i>', percentFormat(distanceStats.median)]);
+                tableData.push(['&nbsp;&nbsp;<i>范围</i>', percentFormat(distanceStats.min) + ' - ' + percentFormat(distanceStats.max)]);
+                tableData.push(['&nbsp;&nbsp;<i>四分位距</i>', percentFormat(distanceStats.Q1) + ' - ' + percentFormat(distanceStats.Q3)]);
+              }
+
+              // 更新表格
+              var rows = tbody.selectAll("tr").data(tableData);
+              rows.enter().append("tr");
+              rows.exit().remove();
+              var columns = rows.selectAll("td").data(function (d) { return d; });
+              columns.enter().append("td");
+              columns.exit().remove();
+              columns.html(function (d) { return d; });
+
+              // 先清除之前的直方图内容
+              d3.select(histogram_tag).selectAll("*").remove();
+              d3.select(histogram_label).text('');
+
+              // 为 cluster 生成直方图
+              // 从 user_graph.edges 提取属于该 cluster 的边
+              var clusterNodeIds = new Set(cluster.children.map(function (n) { return n.id; }));
+              var clusterEdges = [];
+
+
+              // 遍历所有边，找到属于该 cluster 的边
+              if (user_graph.edges && user_graph.edges.length > 0) {
+                user_graph.edges.forEach(function (e) {
+                  // 边的 source 和 target 可能是对象或索引
+                  var sourceNode = typeof e.source === 'object' ? e.source : user_graph.nodes[e.source];
+                  var targetNode = typeof e.target === 'object' ? e.target : user_graph.nodes[e.target];
+
+                  if (sourceNode && targetNode) {
+                    var sourceId = sourceNode.id;
+                    var targetId = targetNode.id;
+
+                    if (clusterNodeIds.has(sourceId) && clusterNodeIds.has(targetId)) {
+                      clusterEdges.push({ length: e.length });
+                    }
+                  }
+                });
+              }
+
+              // 如果有足够边数据，显示直方图；否则显示提示
+              // 直方图至少需要 3 条边才能有意义地显示分布
+              if (clusterEdges.length >= 3) {
+                var clusterGraphData = { Edges: clusterEdges };
+                hivtrace.histogramDistances(clusterGraphData, histogram_tag, histogram_label);
+              } else {
+                // 边数太少，显示提示
+                d3.select(histogram_tag).selectAll("*").remove();
+                d3.select(histogram_label).text('簇 ' + cluster.cluster_id + ' 遗传距离分布');
+
+                var message = clusterEdges.length === 0
+                  ? "暂无直方图数据"
+                  : "边数过少（" + clusterEdges.length + " 条），无法生成直方图";
+
+                d3.select(histogram_tag).append("p")
+                  .style("color", "#6b7280")
+                  .style("text-align", "center")
+                  .style("padding", "40px 0")
+                  .text(message);
+              }
+
+            }
           })();
 
 
 
+
+
+          // 可配置的追踪簇回调功能 - 基于传入参数决定是否启用
+          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",
             "#clusters-tab",
@@ -1306,26 +1317,6 @@
             }
           );
 
-          // 属性 tab 显示时，如果是概览模式则触发统计渲染
-          $("#attributes-tab a[data-toggle='tab']").on(
-            "shown.bs.tab",
-            function (e) {
-              // 检查是否为概览模式，并初始化统计内容
-              if (!user_graph.colorizer || !user_graph.colorizer['category_id'] ||
-                user_graph.colorizer['category_id'] === '_overview') {
-                // 显示统计内容，隐藏属性内容
-                var statsContent = document.getElementById('attrs_stats_content');
-                var attrsContent = document.querySelector('.hivtrace-attributes-content');
-                if (statsContent) statsContent.style.display = '';
-                if (attrsContent) attrsContent.style.display = 'none';
-                // 渲染统计
-                if (typeof window.renderOverviewStats === 'function') {
-                  window.renderOverviewStats(user_graph.attributes_selected_cluster || null);
-                }
-              }
-            }
-          );
-
         }
         document
           .getElementById("min_cluster_size_input")
@@ -1388,17 +1379,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;