@basic-genomics/hivtrace-viz 1.1.10 → 1.2.0

package/dist/embed/index.html

@@ -1031,9 +1031,66 @@
                     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) {

package/dist/hivtrace.css

@@ -11950,14 +11950,41 @@ circle.cluster {
   stroke-opacity: 0.3;
 }
 
-#network_tag {
+/* Network SVG container - only in main network tab */
+#trace-results #network_tag {
   margin-top: 15px;
+  overflow: scroll;
+  height: calc(100vh - 200px);
+  position: relative;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+}
+
+/* Hide the cloned empty #network_tag in dynamic cluster views */
+.hivtrace-cluster-view #network_tag {
+  display: none;
+}
+
+/* SVG container for dynamic cluster views - same style as main network_tag */
+.hivtrace-network-svg-container {
+  margin-top: 15px;
+  overflow: scroll;
+  height: calc(100vh - 200px);
+  position: relative;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
 }
 
 .nav-trace {
   margin-top: 5px;
 }
 
+/* Checkbox and label vertical alignment - only for hide_filter addon */
+input[data-hivtrace-ui-role="hide_filter"] {
+  vertical-align: middle;
+  margin-top: -3px !important;
+}
+
 .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn{
   height: 36px !important;
 }