@basic-genomics/hivtrace-viz 1.1.8 → 1.1.9

package/dist/embed/index.html

@@ -147,11 +147,14 @@
       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 {
+    .hivtrace-fullscreen-btn button:hover,
+    .hivtrace-fullscreen-btn button:focus {
       background: #f4f4f5;
       color: #18181b;
+      text-decoration: none;
     }
 
     /* 状态栏 badge 和 label 样式优化 */
@@ -424,6 +427,41 @@
       }
     }
 
+    /* 概览统计区域：默认上下排列（小屏幕） */
+    .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 {
+        flex-direction: row;
+      }
+    }
+
+    /* 统计面板样式 */
+    .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;
@@ -641,9 +679,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>
@@ -823,42 +858,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>
-
-
-
-
-
           <div id="trace-clusters" class="tab-pane">
             <div class="row">
               <div class="col-lg-12">
@@ -907,7 +906,20 @@
                 <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;">
+                <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>
+                </div>
+                <div class="hivtrace-stats-panel">
+                  <p id="attrs_histogram_label" class="lead"></p>
+                  <div id="attrs_histogram_tag"></div>
+                </div>
+              </div>
+
+              <!-- 属性内容（选中属性 pill 时显示） -->
               <div class="hivtrace-attributes-content">
                 <!-- 左侧：可视化区域（弦图/散点图） -->
                 <div class="hivtrace-viz-panel" data-hivtrace-ui-role="aux_svg_holder_enclosed" style="display: none">
@@ -1078,168 +1090,111 @@
             "This network contains no clusters and cannot be displayed"
           );
         } else {
-          hivtrace.histogramDistances(graph, histogram_tag, histogram_label);
-          hivtrace.graphSummary(user_graph, graph_summary_tag);
-
-          // 初始化 cluster 选择器 (Bootstrap dropdown)
-          (function initClusterSelector() {
-            var menu = document.getElementById('stats_cluster_selector_menu');
-            var label = document.getElementById('stats_cluster_selector_label');
-            if (!menu || !label) return;
-
-            // 获取所有 cluster 并按 ID 排序
+          // 旧的统计初始化已移除，统计功能现在在属性 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 || [];
-            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;
-                var statsTitle = document.getElementById('stats_title');
-
-                // 更新按钮文本
-                label.textContent = selectedText;
-
-                if (!selectedClusterId) {
-                  // 显示全网统计
-                  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) {
-                    statsTitle.textContent = '簇 ' + selectedClusterId + ' 统计';
-                    updateClusterStatistics(cluster);
-                  }
+            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");
                 }
-              }
-            });
-
 
-            // 计算并显示单个 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 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(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 });
+                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 });
+                      }
                     }
-                  }
-                });
-              }
+                  });
+                }
 
-              // 如果有足够边数据，显示直方图；否则显示提示
-              // 直方图至少需要 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 (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);
+                }
               }
-
             }
-          })();
+          };
 
           // 初始化属性标签页的 cluster 选择器
           (function initAttrsClusterSelector() {
@@ -1282,7 +1237,10 @@
 
                 // 重新触发当前选中的属性（支持分类属性和连续属性）
                 if (user_graph.colorizer && user_graph.colorizer['category_id']) {
-                  if (user_graph.colorizer['continuous']) {
+                  if (user_graph.colorizer['category_id'] === '_overview') {
+                    // 概览模式 - 更新统计内容
+                    window.renderOverviewStats(selectedClusterId || null);
+                  } else if (user_graph.colorizer['continuous']) {
                     // 连续属性 - 散点图
                     user_graph.handle_attribute_continuous(user_graph.colorizer['category_id']);
                   } else {
@@ -1298,7 +1256,6 @@
 
           [
             "#main-tab",
-            "#graph-tab",
             "#clusters-tab",
             "#subclusters-tab",
             "#nodes-tab",
@@ -1349,6 +1306,26 @@
             }
           );
 
+          // 属性 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")