@basic-genomics/hivtrace-viz 1.1.5 → 1.1.7

package/dist/embed/index.html

@@ -285,6 +285,54 @@
       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 + 下方左图右表
@@ -779,11 +827,11 @@
             <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="hivtrace-cluster-selector">
+                  <span class="hivtrace-cluster-selector-label">选择簇</span>
                   <div class="input-group-btn">
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-                      id="stats_cluster_selector_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">
@@ -838,8 +886,24 @@
 
           <div id="trace-attributes" class="tab-pane">
             <div class="hivtrace-attributes-container">
-              <!-- 顶部：属性选择器（横向 pills） -->
+              <!-- 顶部：簇选择器 + 属性选择器（横向 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-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>
+                      <ul class="dropdown-menu" role="menu" id="attrs_cluster_selector_menu">
+                        <li><a href="#" data-value="">总览</a></li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <!-- 属性 Pills -->
                 <div class="hivtrace-pill-row" data-hivtrace-ui-role="attributes_cat"></div>
               </div>
 
@@ -1177,7 +1241,55 @@
             }
           })();
 
+          // 初始化属性标签页的 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;
+
+                // 重新触发当前选中的属性（支持分类属性和连续属性）
+                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);
+                  }
+                }
+              }
+            });
+          })();