@basic-genomics/hivtrace-viz 1.1.6 → 1.1.7

package/dist/embed/index.html

@@ -886,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>
 
@@ -1225,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);
+                  }
+                }
+              }
+            });
+          })();