@basic-genomics/hivtrace-viz 1.0.0 → 1.1.0

package/dist/embed/index.html

@@ -212,7 +212,8 @@
     }
 
     /* 网络标签页操作栏 - 超出换行 */
-    #network_ui_bar {
+    #network_ui_bar,
+    .cloned-cluster-tab {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -221,7 +222,11 @@
 
     #network_ui_bar>.input-group-btn,
     #network_ui_bar>.btn,
-    #network_ui_bar>.input-group {
+    #network_ui_bar>.input-group,
+    .cloned-cluster-tab>.input-group-btn,
+    .cloned-cluster-tab>.btn,
+    .cloned-cluster-tab>.input-group,
+    .cloned-cluster-tab>.span {
       flex-shrink: 0;
       width: auto;
     }
@@ -277,7 +282,7 @@
     }
 
     .dropdown-menu>li>a {
-      padding: 8px 16px;
+      padding: 4px 12px;
     }
 
     /* ========================================
@@ -354,7 +359,7 @@
       color: #1e40af;
     }
 
-    /* 下方：图表和表格上下排列 */
+    /* 下方：图表和表格上下排列（默认/小屏幕） */
     .hivtrace-attributes-content {
       flex: 1;
       display: flex;
@@ -364,6 +369,13 @@
       overflow: auto;
     }
 
+    /* 大屏幕（> 996px）：左右布局 */
+    @media (min-width: 997px) {
+      .hivtrace-attributes-content {
+        flex-direction: row;
+      }
+    }
+
     /* 可视化面板 */
     .hivtrace-viz-panel {
       flex-shrink: 0;
@@ -375,6 +387,14 @@
       padding: 12px;
     }
 
+    /* 大屏幕（> 996px）：图表固定宽度 500px */
+    @media (min-width: 997px) {
+      .hivtrace-viz-panel {
+        width: 500px;
+        flex-shrink: 0;
+      }
+    }
+
     .hivtrace-panel-toolbar {
       display: flex;
       align-items: center;
@@ -408,6 +428,9 @@
       border-radius: 8px;
       padding: 12px;
       min-height: 200px;
+      min-width: 0;
+      /* 确保 flexbox 子元素不会超出容器 */
+      overflow: hidden;
     }
 
     .hivtrace-table-wrapper {
@@ -418,9 +441,50 @@
       border-radius: 6px;
     }
 
+    /* 大屏幕（左右布局）时限制表格高度 */
+    @media (min-width: 997px) {
+      .hivtrace-table-wrapper {
+        max-height: 500px;
+        /* 表格最大高度，超出滚动 */
+      }
+    }
+
+    /* 簇和节点标签页的表格高度 - 自适应 + 最小高度 */
+    #trace-clusters .hivtrace-table-wrapper,
+    #trace-nodes .hivtrace-table-wrapper {
+      min-height: 200px;
+      max-height: calc(100vh - 120px);
+    }
+
     .hivtrace-table-wrapper table {
       margin: 0;
       width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+
+    /* 表头吸顶 */
+    .hivtrace-table-wrapper thead th {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background: #f9fafb;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    /* 左侧第一列吸附 */
+    .hivtrace-table-wrapper tbody td:first-child,
+    .hivtrace-table-wrapper thead th:first-child {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      background: #f9fafb;
+      border-right: 1px solid #e5e7eb;
+    }
+
+    /* 左上角交叉单元格需要最高层级 */
+    .hivtrace-table-wrapper thead th:first-child {
+      z-index: 3;
     }
 
     .hivtrace-table-content table {
@@ -432,6 +496,7 @@
       display: inline-flex;
       align-items: center;
       gap: 6px;
+      margin: 0px;
       font-size: 13px;
       color: #6b7280;
       cursor: pointer;
@@ -711,25 +776,49 @@
           </div>
 
           <div id="trace-graph" class="tab-pane">
-            <div class="row">
-              <div class="col-lg-6">
-                <p class="lead">网络统计</p>
-                <table class="table table-striped table-condensed table-responsive" id="graph_summary_table"></table>
+            <div class="hivtrace-stats-container">
+              <!-- 顶部：Cluster 选择器工具栏 -->
+              <div class="hivtrace-stats-header">
+                <div class="input-group input-group-sm" style="max-width: 280px;">
+                  <span class="input-group-addon">选择簇</span>
+                  <div class="input-group-btn">
+                    <button type="button" class="btn btn-default dropdown-toggle" 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="col-lg-6">
-                <p id="histogram_label" class="lead"></p>
-                <div class="row" id="histogram_tag" style="margin-left: 5px"></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">
                 <span class="pull-right" id="cluster-table-export"> </span>
                 <p class="lead">簇</p>
-                <table class="table table-striped table-condensed table-hover" id="cluster_table"></table>
+                <div class="hivtrace-table-wrapper">
+                  <table class="table table-striped table-condensed table-hover" id="cluster_table"></table>
+                </div>
               </div>
             </div>
           </div>
@@ -740,7 +829,9 @@
               <div class="col-lg-12">
                 <span class="pull-right" id="node-table-export"> </span>
                 <p class="lead">关联个体</p>
-                <table class="table table-striped table-condensed table-hover" id="node_table"></table>
+                <div class="hivtrace-table-wrapper">
+                  <table class="table table-striped table-condensed table-hover" id="node_table"></table>
+                </div>
               </div>
             </div>
           </div>
@@ -870,6 +961,170 @@
           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 排序
+            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);
+                  }
+                }
+              }
+            });
+
+
+            // 计算并显示单个 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) {

package/dist/embed/locales/en-US.json

@@ -9,7 +9,7 @@
     "collapse_filtered": "Collapse filtered",
     "expand_all": "Expand all",
     "expand_filtered": "Expand filtered",
-    "export_colors": "Export colors",
+    "export_colors": "Copy color scheme",
     "fix_all_objects_in_place": "Fix all objects in place",
     "reset_layout": "Reset layout",
     "expand_cluster": "Expand cluster",
@@ -74,7 +74,10 @@
     "sequences": "Sequences",
     "individuals": "Individuals",
     "sequences_used_to_make_links": "Sequences used to make links",
-    "singletons": "Singletons"
+    "singletons": "Singletons",
+    "select_cluster": "Select Cluster",
+    "all_network": "Overview",
+    "cluster_statistics": "Cluster Statistics"
   },
   "tabs": {
     "network": "Network",

package/dist/embed/locales/zh-CN.json

@@ -9,7 +9,7 @@
     "collapse_filtered": "折叠已过滤",
     "expand_all": "展开全部",
     "expand_filtered": "展开已过滤",
-    "export_colors": "导出颜色",
+    "export_colors": "复制配色方案",
     "fix_all_objects_in_place": "固定所有对象位置",
     "reset_layout": "重置布局",
     "expand_cluster": "展开簇",
@@ -74,7 +74,10 @@
     "sequences": "序列",
     "individuals": "个体",
     "sequences_used_to_make_links": "用于建立链接的序列数",
-    "singletons": "单节点"
+    "singletons": "单节点",
+    "select_cluster": "选择簇",
+    "all_network": "总览",
+    "cluster_statistics": "簇统计"
   },
   "tabs": {
     "network": "网络",