@basic-genomics/hivtrace-viz 1.1.4 → 1.1.6

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">
@@ -918,8 +966,9 @@
         var attributes = null;
 
         // 从传入的options中获取配置
-        var enableClusterTracking = options && options.enableClusterTracking === true;
         var expandClusters = options && Array.isArray(options.expand) ? options.expand : [];
+        // 获取自定义上下文菜单项配置
+        var customContextMenuItems = options && Array.isArray(options.customContextMenuItems) ? options.customContextMenuItems : [];
 
         // 获取基因距离阈值并动态更新簇标签
         var threshold = options && typeof options.threshold === 'number' ? options.threshold : 0.015;
@@ -953,6 +1002,61 @@
           }
         );
 
+        // 将自定义上下文菜单项赋值给 user_graph 实例
+        if (customContextMenuItems.length > 0) {
+          user_graph.customContextMenuItems = customContextMenuItems;
+          // 设置点击回调，通过 postMessage 通知宿主应用
+          user_graph.onCustomMenuItemClick = function (itemId, clusterInfo) {
+            // 提取节点的关键信息（避免循环引用和不可序列化的对象）
+            var extractNodeInfo = function (node) {
+              if (!node) return null;
+              return {
+                id: node.id,
+                // 基本属性
+                degree: node.degree,
+                // 节点属性（如果存在）
+                attributes: node.patient_attributes || node.attributes || undefined,
+                // 位置信息
+                x: typeof node.x === 'number' ? node.x : undefined,
+                y: typeof node.y === 'number' ? node.y : undefined,
+                // 状态信息
+                is_hidden: Boolean(node.is_hidden),
+                match_filter: Boolean(node.match_filter),
+                // 子簇信息（如果存在）
+                subcluster_id: node.subcluster_id,
+                subcluster_label: node.subcluster_label,
+              };
+            };
+
+            var essentialClusterData = {
+              cluster_id: clusterInfo?.cluster_id ?? clusterInfo?.id ?? undefined,
+              node_count: clusterInfo?.node_count ?? (Array.isArray(clusterInfo?.nodes) ? clusterInfo.nodes.length : 0),
+              cluster_size: typeof clusterInfo?.cluster_size === 'number' ? clusterInfo.cluster_size : undefined,
+              position: {
+                x: typeof clusterInfo?.x === 'number' ? clusterInfo.x : undefined,
+                y: typeof clusterInfo?.y === 'number' ? clusterInfo.y : undefined
+              },
+              state: {
+                expanded: Boolean(clusterInfo?.expanded),
+                fixed: Boolean(clusterInfo?.fixed)
+              },
+              // 节点 ID 列表（向后兼容）
+              node_ids: Array.isArray(clusterInfo?.nodes)
+                ? clusterInfo.nodes.map(function (node) { return node?.id }).filter(Boolean)
+                : [],
+              // 完整节点信息（用于扩展）
+              nodes: Array.isArray(clusterInfo?.nodes)
+                ? clusterInfo.nodes.map(extractNodeInfo).filter(Boolean)
+                : []
+            };
+            window.parent.postMessage({
+              type: 'CUSTOM_MENU_CLICK',
+              itemId: itemId,
+              clusterInfo: essentialClusterData
+            }, '*');
+          };
+        }
+
         if (user_graph.is_empty()) {
           HandleAppError(
             "This network contains no clusters and cannot be displayed"
@@ -1125,69 +1229,6 @@
 
 
 
-          // 可配置的追踪簇回调功能 - 基于传入参数决定是否启用
-          if (enableClusterTracking) {
-            user_graph.onTrackCluster = function (clusterInfo, allData) {
-              try {
-                // 直接提取需要的数据，避免复杂的数据清理
-                const essentialClusterData = {
-                  cluster_id: clusterInfo?.cluster_id ?? clusterInfo?.id ?? undefined,
-                  node_count: clusterInfo?.node_count ?? (Array.isArray(clusterInfo?.nodes) ? clusterInfo.nodes.length : 0),
-                  cluster_size: typeof clusterInfo?.cluster_size === 'number' ? clusterInfo.cluster_size : undefined,
-                  position: {
-                    x: typeof clusterInfo?.x === 'number' ? clusterInfo.x : undefined,
-                    y: typeof clusterInfo?.y === 'number' ? clusterInfo.y : undefined
-                  },
-                  state: {
-                    expanded: Boolean(clusterInfo?.expanded),
-                    fixed: Boolean(clusterInfo?.fixed)
-                  },
-                  // 只提取节点ID列表，避免传递复杂对象
-                  node_ids: Array.isArray(clusterInfo?.nodes)
-                    ? clusterInfo.nodes.slice(0, 20).map(node => node?.id).filter(Boolean)
-                    : []
-                };
-
-                // 提取网络统计信息
-                const networkStats = {
-                  total_nodes: allData?.network_info?.node_count ?? user_graph?.nodes?.length ?? 0,
-                  total_edges: allData?.network_info?.edge_count ?? user_graph?.edges?.length ?? 0,
-                  total_clusters: allData?.network_info?.cluster_count ?? 0
-                };
-
-                // 发送轻量级、精确的数据
-                window.parent.postMessage({
-                  type: 'TRACK_CLUSTER',
-                  clusterInfo: essentialClusterData,
-                  allData: { network_info: networkStats }
-                }, '*');
-
-              } catch (error) {
-                console.warn('簇追踪回调处理失败:', error.message);
-
-                // 最小化降级数据
-                window.parent.postMessage({
-                  type: 'TRACK_CLUSTER',
-                  clusterInfo: {
-                    cluster_id: 'fallback',
-                    node_count: 0,
-                    cluster_size: undefined,
-                    position: { x: undefined, y: undefined },
-                    state: { expanded: false, fixed: false },
-                    node_ids: []
-                  },
-                  allData: {
-                    network_info: {
-                      total_nodes: 0,
-                      total_edges: 0,
-                      total_clusters: 0
-                    }
-                  }
-                }, '*');
-              }
-            };
-          }
-
           [
             "#main-tab",
             "#graph-tab",