update

visualization/sug_v6_1_2_121/index.js

@@ -383,10 +383,8 @@ function QueryNode({ id, data, sourcePosition, targetPosition }) {
                       const formattedScore = Number.isFinite(numericScore) ? numericScore.toFixed(2) : '0.00';
                       return w.text + ' (' + formattedScore + ')';
                     }).join(' + ');
-                    const segmentLabel = detail.segment_type ? '[' + detail.segment_type + '] ' : '';
                     return (
                       <div key={idx} style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', alignItems: 'center' }}>
-                        {segmentLabel && <span style={{ color: '#4b5563' }}>{segmentLabel}</span>}
                         <span style={{ color: '#2563eb' }}>{words}</span>
                       </div>
                     );
@@ -1042,16 +1040,12 @@ function TreeNode({ node, level, children, isCollapsed, onToggle, isSelected, on
               textAlign: 'right',
             }}>
               {node.data.source_word_details.map((detail, idx) => {
-                const summary = (() => {
-                  const words = Array.isArray(detail.words) ? detail.words : [];
-                  const parts = words.map((w) => {
-                    const numericScore = typeof w.score === 'number' ? w.score : parseFloat(w.score || '0');
-                    const formattedScore = Number.isFinite(numericScore) ? numericScore.toFixed(2) : '0.00';
-                    return w.text + ' (' + formattedScore + ')';
-                  });
-                  const prefix = detail.segment_type ? '[' + detail.segment_type + '] ' : '';
-                  return prefix + parts.join(' + ');
-                })();
+                const words = Array.isArray(detail.words) ? detail.words : [];
+                const summary = words.map((w) => {
+                  const numericScore = typeof w.score === 'number' ? w.score : parseFloat(w.score || '0');
+                  const formattedScore = Number.isFinite(numericScore) ? numericScore.toFixed(2) : '0.00';
+                  return w.text + ' (' + formattedScore + ')';
+                }).join(' + ');
                 return (
                   <span key={idx} title={summary}>
                     {summary}
@@ -1099,9 +1093,9 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
     });
 
     Object.entries(levelGroups).forEach(([level, nodeList]) => {
-      const x = parseInt(level) * 350;
+      const x = parseInt(level) * 480;
       nodeList.forEach((node, index) => {
-        node.position = { x, y: index * 150 };
+        node.position = { x, y: index * 260 };
         node.targetPosition = 'left';
         node.sourcePosition = 'right';
       });
@@ -1117,19 +1111,19 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
     const isHorizontal = direction === 'LR';
     dagreGraph.setGraph({
       rankdir: direction,
-      nodesep: 120,   // 垂直间距 - 增加以避免节点重叠
-      ranksep: 280,  // 水平间距 - 增加以容纳更宽的节点
+      nodesep: 180,   // 垂直间距 - 增加以避免节点重叠
+      ranksep: 360,  // 水平间距 - 增加以容纳更宽的节点
     });
 
     // 添加节点 - 根据节点类型设置不同的尺寸
     nodes.forEach((node) => {
-      let nodeWidth = 280;
-      let nodeHeight = 180;
+      let nodeWidth = 320;
+      let nodeHeight = 220;
 
       // note 节点有轮播图，需要更大的空间
       if (node.type === 'note') {
-        nodeWidth = 320;
-        nodeHeight = 350;  // 增加高度以容纳轮播图
+        nodeWidth = 360;
+        nodeHeight = 380;  // 增加高度以容纳轮播图
       }
 
       dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
@@ -1157,11 +1151,11 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
       node.sourcePosition = isHorizontal ? 'right' : 'bottom';
 
       // 根据节点类型获取尺寸
-      let nodeWidth = 280;
-      let nodeHeight = 180;
+      let nodeWidth = 320;
+      let nodeHeight = 220;
       if (node.type === 'note') {
-        nodeWidth = 320;
-        nodeHeight = 350;
+        nodeWidth = 360;
+        nodeHeight = 380;
       }
 
       // 将 dagre 的中心点位置转换为 React Flow 的左上角位置
@@ -1187,9 +1181,9 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
     });
 
     Object.entries(levelGroups).forEach(([level, nodeList]) => {
-      const x = parseInt(level) * 350;
+      const x = parseInt(level) * 480;
       nodeList.forEach((node, index) => {
-        node.position = { x, y: index * 150 };
+        node.position = { x, y: index * 260 };
         node.targetPosition = 'left';
         node.sourcePosition = 'right';
       });
@@ -1553,18 +1547,18 @@ function FlowContent() {
 
         dagreGraph.setGraph({
           rankdir: 'LR',
-          nodesep: 120,   // 垂直间距 - 增加以避免节点重叠
-          ranksep: 280,  // 水平间距 - 增加以容纳更宽的节点
+          nodesep: 180,   // 垂直间距 - 增加以避免节点重叠
+          ranksep: 360,  // 水平间距 - 增加以容纳更宽的节点
         });
 
         visibleNodes.forEach((node) => {
-          let nodeWidth = 280;
-          let nodeHeight = 180;
+          let nodeWidth = 320;
+          let nodeHeight = 220;
 
           // note 节点有轮播图，需要更大的空间
           if (node.type === 'note') {
-            nodeWidth = 320;
-            nodeHeight = 350;
+            nodeWidth = 360;
+            nodeHeight = 380;
           }
 
           dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
@@ -1580,11 +1574,11 @@ function FlowContent() {
           const nodeWithPosition = dagreGraph.node(node.id);
           if (nodeWithPosition) {
             // 根据节点类型获取对应的尺寸
-            let nodeWidth = 280;
-            let nodeHeight = 180;
+            let nodeWidth = 320;
+            let nodeHeight = 220;
             if (node.type === 'note') {
-              nodeWidth = 320;
-              nodeHeight = 350;
+              nodeWidth = 360;
+              nodeHeight = 380;
             }
 
             node.position = {