kg_agent/visualize_v2.js

#!/usr/bin/env node

const fs = require('fs');
const path = require('path');
const { build } = require('esbuild');

// 读取命令行参数
const args = process.argv.slice(2);
if (args.length === 0) {
  console.error('Usage: node visualize_v2.js <path-to-query_graph.json> [output.html]');
  process.exit(1);
}

const inputFile = args[0];
const outputFile = args[1] || 'query_graph_output.html';

// 读取输入数据
const data = JSON.parse(fs.readFileSync(inputFile, 'utf-8'));

// 创建临时 React 组件文件
const reactComponentPath = path.join(__dirname, 'temp_flow_component_v2.jsx');
const reactComponent = `
import React, { useState, useCallback, useMemo, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import {
  ReactFlow,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  Handle,
  Position,
  useReactFlow,
  ReactFlowProvider,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const data = ${JSON.stringify(data, null, 2)};

// 查询节点组件 - 卡片样式
function QueryNode({ id, data, sourcePosition, targetPosition }) {
  // 所有节点默认展开
  const expanded = true;

  return (
    <div>
      <Handle
        type="target"
        position={targetPosition || Position.Left}
        style={{ background: '#667eea', width: 8, height: 8 }}
      />
      <div
        style={{
          padding: '12px',
          borderRadius: '8px',
          border: data.isHighlighted ? '3px solid #667eea' :
                  data.isCollapsed ? '2px solid #667eea' :
                  data.isSelected === false ? '2px dashed #d1d5db' :
                  data.level === 0 ? '2px solid #8b5cf6' : '1px solid #e5e7eb',
          background: data.isHighlighted ? '#eef2ff' :
                      data.isSelected === false ? '#f9fafb' :
                      data.level === 0 ? 'linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%)' : 'white',
          minWidth: '200px',
          maxWidth: '280px',
          boxShadow: data.isHighlighted ? '0 0 0 4px rgba(102, 126, 234, 0.25), 0 4px 16px rgba(102, 126, 234, 0.4)' :
                     data.isCollapsed ? '0 4px 12px rgba(102, 126, 234, 0.15)' :
                     data.level === 0 ? '0 4px 12px rgba(139, 92, 246, 0.15)' : '0 2px 6px rgba(0, 0, 0, 0.06)',
          transition: 'all 0.3s ease',
          cursor: 'pointer',
          position: 'relative',
          opacity: data.isSelected === false ? 0.6 : 1,
        }}
      >
        {/* 折叠/展开子节点按钮 */}
        {data.hasChildren && (
          <div
            style={{
              position: 'absolute',
              top: '6px',
              right: '6px',
              width: '20px',
              height: '20px',
              borderRadius: '50%',
              background: data.isCollapsed ? '#667eea' : '#e5e7eb',
              color: data.isCollapsed ? 'white' : '#6b7280',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '11px',
              fontWeight: 'bold',
              cursor: 'pointer',
              transition: 'all 0.2s ease',
              zIndex: 10,
            }}
            onClick={(e) => {
              e.stopPropagation();
              data.onToggleCollapse();
            }}
            title={data.isCollapsed ? '展开子节点' : '折叠子节点'}
          >
            {data.isCollapsed ? '+' : '−'}
          </div>
        )}

        {/* 卡片内容 */}
        <div>
          {/* 标题行 */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px', paddingRight: data.hasChildren ? '24px' : '0' }}>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '3px' }}>
                <div style={{
                  fontSize: '13px',
                  fontWeight: data.level === 0 ? '700' : '600',
                  color: data.level === 0 ? '#6b21a8' : '#1f2937',
                  lineHeight: '1.3',
                  flex: 1,
                }}>
                  {data.title}
                </div>
                {data.isSelected === false && (
                  <div style={{
                    fontSize: '9px',
                    padding: '1px 4px',
                    borderRadius: '3px',
                    background: '#fee2e2',
                    color: '#991b1b',
                    fontWeight: '500',
                    flexShrink: 0,
                  }}>
                    未选中
                  </div>
                )}
              </div>
            </div>
          </div>

        {/* 展开的详细信息 - 始终显示 */}
        <div style={{ fontSize: '11px', lineHeight: 1.4 }}>
            <div style={{ display: 'flex', gap: '4px', marginBottom: '6px', flexWrap: 'wrap' }}>
              <span style={{
                display: 'inline-block',
                padding: '1px 6px',
                borderRadius: '10px',
                background: '#eff6ff',
                color: '#3b82f6',
                fontSize: '10px',
                fontWeight: '500',
              }}>
                Lv.{data.level}
              </span>
              <span style={{
                display: 'inline-block',
                padding: '1px 6px',
                borderRadius: '10px',
                background: '#f0fdf4',
                color: '#16a34a',
                fontSize: '10px',
                fontWeight: '500',
              }}>
                {data.score}
              </span>
              {data.strategy && data.strategy !== 'root' && (
                <span style={{
                  display: 'inline-block',
                  padding: '1px 6px',
                  borderRadius: '10px',
                  background: '#fef3c7',
                  color: '#92400e',
                  fontSize: '10px',
                  fontWeight: '500',
                }}>
                  {data.strategy}
                </span>
              )}
            </div>

            {data.parent && (
              <div style={{ color: '#6b7280', fontSize: '10px', marginTop: '4px', paddingTop: '4px', borderTop: '1px solid #f3f4f6' }}>
                <strong>Parent:</strong> {data.parent}
              </div>
            )}
            {data.evaluationReason && (
              <div style={{
                marginTop: '6px',
                paddingTop: '6px',
                borderTop: '1px solid #f3f4f6',
                fontSize: '10px',
                color: '#6b7280',
                lineHeight: '1.4',
                maxHeight: '60px',
                overflow: 'auto',
              }}>
                <strong style={{ color: '#4b5563' }}>评估:</strong>
                <div style={{ marginTop: '2px' }}>{data.evaluationReason}</div>
              </div>
            )}
          </div>
        </div>
      </div>
      <Handle
        type="source"
        position={sourcePosition || Position.Right}
        style={{ background: '#667eea', width: 8, height: 8 }}
      />
    </div>
  );
}

// 笔记节点组件 - 卡片样式
function NoteNode({ id, data, sourcePosition, targetPosition }) {
  // 所有节点默认展开
  const expanded = true;

  return (
    <div>
      <Handle
        type="target"
        position={targetPosition || Position.Left}
        style={{ background: '#ec4899', width: 8, height: 8 }}
      />
      <div
        style={{
          padding: '14px',
          borderRadius: '12px',
          border: data.isHighlighted ? '3px solid #ec4899' : '2px solid #fce7f3',
          background: data.isHighlighted ? '#fef1f7' : 'linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%)',
          minWidth: '220px',
          maxWidth: '300px',
          boxShadow: data.isHighlighted ? '0 0 0 4px rgba(236, 72, 153, 0.25), 0 4px 16px rgba(236, 72, 153, 0.4)' : '0 4px 12px rgba(236, 72, 153, 0.15)',
          transition: 'all 0.3s ease',
          cursor: 'pointer',
        }}
      >
        {/* 笔记图标和标题 */}
        <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '8px' }}>
          <span style={{ fontSize: '16px', marginRight: '8px' }}>📝</span>
          <div style={{ flex: 1 }}>
            <div style={{
              fontSize: '13px',
              fontWeight: '600',
              color: '#831843',
              lineHeight: '1.4',
              marginBottom: '4px',
            }}>
              {data.title}
            </div>
          </div>
        </div>

        {/* 标签 */}
        <div style={{ display: 'flex', gap: '6px', marginBottom: '8px', flexWrap: 'wrap' }}>
          <span style={{
            display: 'inline-block',
            padding: '2px 8px',
            borderRadius: '12px',
            background: '#fff1f2',
            color: '#be123c',
            fontSize: '10px',
            fontWeight: '500',
          }}>
            {data.matchLevel}
          </span>
          <span style={{
            display: 'inline-block',
            padding: '2px 8px',
            borderRadius: '12px',
            background: '#fff7ed',
            color: '#c2410c',
            fontSize: '10px',
            fontWeight: '500',
          }}>
            Score: {data.score}
          </span>
        </div>

        {/* 描述 */}
        {expanded && data.description && (
          <div style={{
            fontSize: '11px',
            color: '#9f1239',
            lineHeight: '1.5',
            paddingTop: '8px',
            borderTop: '1px solid #fbcfe8',
            maxHeight: '100px',
            overflow: 'auto',
          }}>
            {data.description}
          </div>
        )}
      </div>
      <Handle
        type="source"
        position={sourcePosition || Position.Right}
        style={{ background: '#ec4899', width: 8, height: 8 }}
      />
    </div>
  );
}

const nodeTypes = {
  query: QueryNode,
  note: NoteNode,
};

// 树节点组件
function TreeNode({ node, level, children, isCollapsed, onToggle, isSelected, onSelect }) {
  const hasChildren = children && children.length > 0;

  return (
    <div style={{ marginLeft: level * 12 + 'px' }}>
      <div
        style={{
          padding: '6px 8px',
          borderRadius: '4px',
          cursor: 'pointer',
          background: isSelected ? '#eff6ff' : 'transparent',
          borderLeft: isSelected ? '3px solid #3b82f6' : '3px solid transparent',
          display: 'flex',
          alignItems: 'center',
          gap: '6px',
          transition: 'all 0.2s ease',
        }}
        onMouseEnter={(e) => {
          if (!isSelected) e.currentTarget.style.background = '#f9fafb';
        }}
        onMouseLeave={(e) => {
          if (!isSelected) e.currentTarget.style.background = 'transparent';
        }}
      >
        {hasChildren && (
          <span
            style={{
              fontSize: '10px',
              color: '#6b7280',
              cursor: 'pointer',
              width: '16px',
              textAlign: 'center',
            }}
            onClick={(e) => {
              e.stopPropagation();
              onToggle();
            }}
          >
            {isCollapsed ? '▶' : '▼'}
          </span>
        )}
        {!hasChildren && <span style={{ width: '16px' }}></span>}

        <div
          style={{ flex: 1, fontSize: '12px', color: '#374151' }}
          onClick={onSelect}
        >
          <div style={{
            fontWeight: level === 0 ? '600' : '400',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            fontFamily: 'monospace',
          }}>
            {node.id}
          </div>
          {node.data.isSelected === false && (
            <span style={{
              fontSize: '9px',
              color: '#ef4444',
              marginLeft: '4px',
            }}>
              ✕
            </span>
          )}
        </div>
      </div>

      {hasChildren && !isCollapsed && (
        <div>
          {children}
        </div>
      )}
    </div>
  );
}

// 使用 dagre 自动布局
function getLayoutedElements(nodes, edges, direction = 'LR') {
  console.log('🎯 Starting layout with dagre...');
  console.log('Input:', nodes.length, 'nodes,', edges.length, 'edges');

  // 检查 dagre 是否加载
  if (typeof window === 'undefined' || typeof window.dagre === 'undefined') {
    console.warn('⚠️ Dagre not loaded, using fallback layout');
    // 降级到简单布局
    const levelGroups = {};
    nodes.forEach(node => {
      const level = node.data.level || 0;
      if (!levelGroups[level]) levelGroups[level] = [];
      levelGroups[level].push(node);
    });

    Object.entries(levelGroups).forEach(([level, nodeList]) => {
      const x = parseInt(level) * 350;
      nodeList.forEach((node, index) => {
        node.position = { x, y: index * 150 };
        node.targetPosition = 'left';
        node.sourcePosition = 'right';
      });
    });

    return { nodes, edges };
  }

  try {
    const dagreGraph = new window.dagre.graphlib.Graph();
    dagreGraph.setDefaultEdgeLabel(() => ({}));

    const nodeWidth = 280;
    const nodeHeight = 180;

    const isHorizontal = direction === 'LR';
    dagreGraph.setGraph({
      rankdir: direction,
      nodesep: 80,
      ranksep: 300,
    });

    // 添加节点
    nodes.forEach((node) => {
      dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
    });

    // 添加边
    edges.forEach((edge) => {
      dagreGraph.setEdge(edge.source, edge.target);
    });

    // 计算布局
    window.dagre.layout(dagreGraph);
    console.log('✅ Dagre layout completed');

    // 更新节点位置和 handle 位置
    nodes.forEach((node) => {
      const nodeWithPosition = dagreGraph.node(node.id);

      if (!nodeWithPosition) {
        console.warn('Node position not found for:', node.id);
        return;
      }

      node.targetPosition = isHorizontal ? 'left' : 'top';
      node.sourcePosition = isHorizontal ? 'right' : 'bottom';

      // 将 dagre 的中心点位置转换为 React Flow 的左上角位置
      node.position = {
        x: nodeWithPosition.x - nodeWidth / 2,
        y: nodeWithPosition.y - nodeHeight / 2,
      };
    });

    console.log('✅ Layout completed, sample node:', nodes[0]);
    return { nodes, edges };
  } catch (error) {
    console.error('❌ Error in dagre layout:', error);
    console.error('Error details:', error.message, error.stack);

    // 降级处理
    console.log('Using fallback layout...');
    const levelGroups = {};
    nodes.forEach(node => {
      const level = node.data.level || 0;
      if (!levelGroups[level]) levelGroups[level] = [];
      levelGroups[level].push(node);
    });

    Object.entries(levelGroups).forEach(([level, nodeList]) => {
      const x = parseInt(level) * 350;
      nodeList.forEach((node, index) => {
        node.position = { x, y: index * 150 };
        node.targetPosition = 'left';
        node.sourcePosition = 'right';
      });
    });

    return { nodes, edges };
  }
}

function transformData(data) {
  const nodes = [];
  const edges = [];

  // 创建节点
  Object.entries(data.nodes).forEach(([id, node]) => {
    if (node.type === 'query') {
      nodes.push({
        id: id,  // 使用循环中的 id 参数，不是 node.id
        type: 'query',
        data: {
          title: node.query,
          level: node.level,
          score: node.relevance_score.toFixed(2),
          strategy: node.strategy,
          parent: node.parent_query,
          isSelected: node.is_selected,
          evaluationReason: node.evaluation_reason || '',
        },
        position: { x: 0, y: 0 }, // 初始位置，会被 dagre 覆盖
      });
    } else if (node.type === 'note') {
      nodes.push({
        id: id,  // 使用循环中的 id 参数，不是 node.id
        type: 'note',
        data: {
          title: node.title,
          matchLevel: node.match_level,
          score: node.relevance_score.toFixed(2),
          description: node.desc,
          isSelected: node.is_selected !== undefined ? node.is_selected : true,
        },
        position: { x: 0, y: 0 },
      });
    }
  });

  // 创建边 - 使用虚线样式
  data.edges.forEach((edge, index) => {
    const edgeColors = {
      direct_sug: '#10b981',
      rewrite_synonym: '#f59e0b',
      add_word: '#3b82f6',
      rewrite_abstract: '#8b5cf6',
      query_to_note: '#ec4899',
    };

    const color = edgeColors[edge.strategy] || edgeColors[edge.edge_type] || '#d1d5db';
    const isNoteEdge = edge.edge_type === 'query_to_note';

    edges.push({
      id: \`edge-\${index}\`,
      source: edge.from,
      target: edge.to,
      type: 'smoothstep',
      animated: isNoteEdge,
      style: {
        stroke: color,
        strokeWidth: isNoteEdge ? 2.5 : 2,
        strokeDasharray: isNoteEdge ? '5,5' : '8,4',
      },
      markerEnd: {
        type: 'arrowclosed',
        color: color,
        width: 20,
        height: 20,
      },
    });
  });

  // 使用 dagre 自动计算布局 - 从左到右
  return getLayoutedElements(nodes, edges, 'LR');
}

function FlowContent() {
  const { nodes: initialNodes, edges: initialEdges } = useMemo(() => {
    console.log('🔍 Transforming data...');
    const result = transformData(data);
    console.log('✅ Transformed:', result.nodes.length, 'nodes,', result.edges.length, 'edges');
    return result;
  }, []);

  // 初始化：找出所有有子节点的节点，默认折叠（画布节点）
  const initialCollapsedNodes = useMemo(() => {
    const nodesWithChildren = new Set();
    initialEdges.forEach(edge => {
      nodesWithChildren.add(edge.source);
    });
    // 排除根节点（level 0），让根节点默认展开
    const rootNode = initialNodes.find(n => n.data.level === 0);
    if (rootNode) {
      nodesWithChildren.delete(rootNode.id);
    }
    return nodesWithChildren;
  }, [initialNodes, initialEdges]);

  // 树节点的折叠状态需要在树构建后初始化
  const [collapsedNodes, setCollapsedNodes] = useState(() => initialCollapsedNodes);
  const [collapsedTreeNodes, setCollapsedTreeNodes] = useState(new Set());
  const [selectedNodeId, setSelectedNodeId] = useState(null);

  // 获取 React Flow 实例以控制画布
  const { setCenter, fitView } = useReactFlow();

  // 获取某个节点的所有后代节点ID
  const getDescendants = useCallback((nodeId) => {
    const descendants = new Set();
    const queue = [nodeId];

    while (queue.length > 0) {
      const current = queue.shift();
      initialEdges.forEach(edge => {
        if (edge.source === current && !descendants.has(edge.target)) {
          descendants.add(edge.target);
          queue.push(edge.target);
        }
      });
    }

    return descendants;
  }, [initialEdges]);

  // 获取直接父节点
  const getDirectParents = useCallback((nodeId) => {
    const parents = [];
    initialEdges.forEach(edge => {
      if (edge.target === nodeId) {
        parents.push(edge.source);
      }
    });
    return parents;
  }, [initialEdges]);

  // 获取直接子节点
  const getDirectChildren = useCallback((nodeId) => {
    const children = [];
    initialEdges.forEach(edge => {
      if (edge.source === nodeId) {
        children.push(edge.target);
      }
    });
    return children;
  }, [initialEdges]);

  // 切换节点折叠状态
  const toggleNodeCollapse = useCallback((nodeId) => {
    setCollapsedNodes(prev => {
      const newSet = new Set(prev);
      const descendants = getDescendants(nodeId);

      if (newSet.has(nodeId)) {
        // 展开：移除此节点，但保持其他折叠的节点
        newSet.delete(nodeId);
      } else {
        // 折叠：添加此节点
        newSet.add(nodeId);
      }

      return newSet;
    });
  }, [getDescendants]);

  // 过滤可见的节点和边，并重新计算布局
  const { nodes, edges } = useMemo(() => {
    const hiddenNodes = new Set();

    // 收集所有被折叠节点的后代
    collapsedNodes.forEach(collapsedId => {
      const descendants = getDescendants(collapsedId);
      descendants.forEach(id => hiddenNodes.add(id));
    });

    const visibleNodes = initialNodes
      .filter(node => !hiddenNodes.has(node.id))
      .map(node => ({
        ...node,
        data: {
          ...node.data,
          isCollapsed: collapsedNodes.has(node.id),
          hasChildren: initialEdges.some(e => e.source === node.id),
          onToggleCollapse: () => toggleNodeCollapse(node.id),
          isHighlighted: selectedNodeId === node.id,
        }
      }));

    const visibleEdges = initialEdges.filter(
      edge => !hiddenNodes.has(edge.source) && !hiddenNodes.has(edge.target)
    );

    // 重新计算布局 - 只对可见节点
    if (typeof window !== 'undefined' && typeof window.dagre !== 'undefined') {
      try {
        const dagreGraph = new window.dagre.graphlib.Graph();
        dagreGraph.setDefaultEdgeLabel(() => ({}));

        const nodeWidth = 280;
        const nodeHeight = 180;

        dagreGraph.setGraph({
          rankdir: 'LR',
          nodesep: 80,
          ranksep: 300,
        });

        visibleNodes.forEach((node) => {
          dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
        });

        visibleEdges.forEach((edge) => {
          dagreGraph.setEdge(edge.source, edge.target);
        });

        window.dagre.layout(dagreGraph);

        visibleNodes.forEach((node) => {
          const nodeWithPosition = dagreGraph.node(node.id);
          if (nodeWithPosition) {
            node.position = {
              x: nodeWithPosition.x - nodeWidth / 2,
              y: nodeWithPosition.y - nodeHeight / 2,
            };
            node.targetPosition = 'left';
            node.sourcePosition = 'right';
          }
        });

        console.log('✅ Dynamic layout recalculated for', visibleNodes.length, 'visible nodes');
      } catch (error) {
        console.error('❌ Error in dynamic layout:', error);
      }
    }

    return { nodes: visibleNodes, edges: visibleEdges };
  }, [initialNodes, initialEdges, collapsedNodes, getDescendants, toggleNodeCollapse, selectedNodeId]);

  // 构建树形结构 - 允许一个节点有多个父节点
  const buildTree = useCallback(() => {
    const nodeMap = new Map();
    initialNodes.forEach(node => {
      nodeMap.set(node.id, node);
    });

    // 为每个节点创建树节点的副本（允许多次出现）
    const createTreeNode = (nodeId, pathKey) => {
      const node = nodeMap.get(nodeId);
      if (!node) return null;

      return {
        ...node,
        treeKey: pathKey, // 唯一的树路径key，用于React key
        children: []
      };
    };

    // 构建父子关系映射：记录每个节点的所有父节点，去重边
    const parentToChildren = new Map();
    const childToParents = new Map();

    initialEdges.forEach(edge => {
      // 记录父->子关系（去重：同一个父节点到同一个子节点只记录一次）
      if (!parentToChildren.has(edge.source)) {
        parentToChildren.set(edge.source, []);
      }
      const children = parentToChildren.get(edge.source);
      if (!children.includes(edge.target)) {
        children.push(edge.target);
      }

      // 记录子->父关系（用于判断是否有多个父节点，也去重）
      if (!childToParents.has(edge.target)) {
        childToParents.set(edge.target, []);
      }
      const parents = childToParents.get(edge.target);
      if (!parents.includes(edge.source)) {
        parents.push(edge.source);
      }
    });

    // 递归构建树
    const buildSubtree = (nodeId, pathKey, visitedInPath) => {
      // 避免循环引用：如果当前路径中已经访问过这个节点，跳过
      if (visitedInPath.has(nodeId)) {
        return null;
      }

      const treeNode = createTreeNode(nodeId, pathKey);
      if (!treeNode) return null;

      const newVisitedInPath = new Set(visitedInPath);
      newVisitedInPath.add(nodeId);

      const children = parentToChildren.get(nodeId) || [];
      treeNode.children = children
        .map((childId, index) => buildSubtree(childId, pathKey + '-' + childId + '-' + index, newVisitedInPath))
        .filter(child => child !== null);

      return treeNode;
    };

    // 找出所有根节点（没有入边的节点）
    const hasParent = new Set();
    initialEdges.forEach(edge => {
      hasParent.add(edge.target);
    });

    const roots = [];
    initialNodes.forEach((node, index) => {
      if (!hasParent.has(node.id)) {
        const treeNode = buildSubtree(node.id, 'root-' + node.id + '-' + index, new Set());
        if (treeNode) roots.push(treeNode);
      }
    });

    return roots;
  }, [initialNodes, initialEdges]);

  const treeRoots = useMemo(() => buildTree(), [buildTree]);

  // 初始化树节点折叠状态
  useEffect(() => {
    const getAllTreeKeys = (nodes) => {
      const keys = new Set();
      const traverse = (node) => {
        if (node.children && node.children.length > 0) {
          // 排除根节点
          if (node.data.level !== 0) {
            keys.add(node.treeKey);
          }
          node.children.forEach(traverse);
        }
      };
      nodes.forEach(traverse);
      return keys;
    };

    setCollapsedTreeNodes(getAllTreeKeys(treeRoots));
  }, [treeRoots]);

  const renderTree = useCallback((treeNodes, level = 0) => {
    return treeNodes.map(node => {
      // 使用 treeKey 来区分树中的不同实例
      const isCollapsed = collapsedTreeNodes.has(node.treeKey);
      const isSelected = selectedNodeId === node.id;

      return (
        <TreeNode
          key={node.treeKey}
          node={node}
          level={level}
          isCollapsed={isCollapsed}
          isSelected={isSelected}
          onToggle={() => {
            setCollapsedTreeNodes(prev => {
              const newSet = new Set(prev);
              if (newSet.has(node.treeKey)) {
                newSet.delete(node.treeKey);
              } else {
                newSet.add(node.treeKey);
              }
              return newSet;
            });
          }}
          onSelect={() => {
            const nodeId = node.id;
            setSelectedNodeId(nodeId);

            // 展开所有祖先节点
            const ancestorIds = [];
            const findAncestors = (id) => {
              initialEdges.forEach(edge => {
                if (edge.target === id) {
                  ancestorIds.push(edge.source);
                  findAncestors(edge.source);
                }
              });
            };
            findAncestors(nodeId);

            setCollapsedNodes(prev => {
              const newSet = new Set(prev);
              ancestorIds.forEach(id => newSet.delete(id));
              return newSet;
            });

            // 延迟聚焦，等待节点展开和布局重新计算
            setTimeout(() => {
              fitView({
                nodes: [{ id: nodeId }],
                duration: 800,
                padding: 0.3,
              });
            }, 300);
          }}
        >
          {node.children && node.children.length > 0 && renderTree(node.children, level + 1)}
        </TreeNode>
      );
    });
  }, [collapsedTreeNodes, selectedNodeId, nodes, setCenter, initialEdges, setCollapsedNodes, fitView]);

  console.log('📊 Rendering with', nodes.length, 'visible nodes and', edges.length, 'visible edges');

  if (nodes.length === 0) {
    return (
      <div style={{ padding: 50, color: 'red', fontSize: 20 }}>
        ERROR: No nodes to display!
      </div>
    );
  }

  return (
    <div style={{ width: '100vw', height: '100vh', background: '#f9fafb' }}>
      {/* 顶部标题栏 */}
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: '60px',
        background: 'white',
        borderBottom: '1px solid #e5e7eb',
        display: 'flex',
        alignItems: 'center',
        padding: '0 24px',
        zIndex: 1000,
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.05)',
      }}>
        <h1 style={{ fontSize: '18px', fontWeight: '600', color: '#111827', margin: 0 }}>
          查询图可视化
        </h1>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: '12px', fontSize: '13px', color: '#6b7280' }}>
          <span>📊 {nodes.length} 节点</span>
          <span>🔗 {edges.length} 连线</span>
        </div>
      </div>

      {/* 左侧目录树 */}
      <div style={{
        position: 'absolute',
        top: '80px',
        left: '20px',
        bottom: '20px',
        width: '280px',
        background: 'white',
        borderRadius: '12px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
        zIndex: 1000,
        border: '1px solid #e5e7eb',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
      }}>
        <div style={{
          padding: '16px',
          borderBottom: '1px solid #e5e7eb',
          fontWeight: '600',
          fontSize: '14px',
          color: '#111827',
        }}>
          节点目录
        </div>
        <div style={{
          flex: 1,
          overflow: 'auto',
          padding: '8px',
        }}>
          {renderTree(treeRoots)}
        </div>
      </div>

      {/* 右侧图例 */}
      <div style={{
        position: 'absolute',
        top: '80px',
        right: '20px',
        background: 'white',
        padding: '16px',
        borderRadius: '12px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
        zIndex: 1000,
        maxWidth: '260px',
        border: '1px solid #e5e7eb',
      }}>
        <h3 style={{ fontSize: '14px', fontWeight: '600', marginBottom: '12px', color: '#111827' }}>图例</h3>

        <div style={{ fontSize: '12px' }}>
          <div style={{ marginBottom: '12px' }}>
            <div style={{ fontSize: '12px', fontWeight: '500', marginBottom: '8px', color: '#374151' }}>节点类型</div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '16px', height: '16px', borderRadius: '4px', marginRight: '8px', background: 'white', border: '2px solid #e5e7eb' }}></div>
              <span style={{ color: '#6b7280' }}>查询节点</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '16px', height: '16px', borderRadius: '4px', marginRight: '8px', background: 'linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%)', border: '2px solid #fce7f3' }}></div>
              <span style={{ color: '#6b7280' }}>笔记节点</span>
            </div>
          </div>

          <div style={{ paddingTop: '12px', borderTop: '1px solid #f3f4f6' }}>
            <div style={{ fontSize: '12px', fontWeight: '500', marginBottom: '8px', color: '#374151' }}>策略类型</div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '20px', height: '2px', marginRight: '8px', background: '#10b981', opacity: 0.7 }}></div>
              <span style={{ color: '#6b7280', fontSize: '11px' }}>direct_sug</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '20px', height: '2px', marginRight: '8px', background: '#f59e0b', opacity: 0.7 }}></div>
              <span style={{ color: '#6b7280', fontSize: '11px' }}>rewrite_synonym</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '20px', height: '2px', marginRight: '8px', background: '#3b82f6', opacity: 0.7 }}></div>
              <span style={{ color: '#6b7280', fontSize: '11px' }}>add_word</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '20px', height: '2px', marginRight: '8px', background: '#8b5cf6', opacity: 0.7 }}></div>
              <span style={{ color: '#6b7280', fontSize: '11px' }}>rewrite_abstract</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', margin: '6px 0' }}>
              <div style={{ width: '20px', height: '2px', marginRight: '8px', background: '#ec4899', opacity: 0.7 }}></div>
              <span style={{ color: '#6b7280', fontSize: '11px' }}>query_to_note</span>
            </div>
          </div>

          <div style={{
            marginTop: '12px',
            paddingTop: '12px',
            borderTop: '1px solid #f3f4f6',
            fontSize: '11px',
            color: '#9ca3af',
            lineHeight: '1.5',
          }}>
            💡 点击节点选中并高亮
          </div>
        </div>
      </div>

      {/* React Flow 画布 */}
      <div style={{
        position: 'absolute',
        top: '60px',
        left: 0,
        right: 0,
        bottom: 0,
      }}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          nodeTypes={nodeTypes}
          fitView
          fitViewOptions={{ padding: 0.2, duration: 500 }}
          minZoom={0.1}
          maxZoom={1.5}
          defaultEdgeOptions={{
            type: 'smoothstep',
          }}
          proOptions={{ hideAttribution: true }}
          onNodeClick={(event, clickedNode) => {
            setSelectedNodeId(clickedNode.id);
          }}
        >
          <Controls style={{ bottom: '20px', left: 'auto', right: '20px' }} />
          <Background variant="dots" gap={20} size={1} color="#e5e7eb" />
        </ReactFlow>
      </div>
    </div>
  );
}

function App() {
  return (
    <ReactFlowProvider>
      <FlowContent />
    </ReactFlowProvider>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);
`;

fs.writeFileSync(reactComponentPath, reactComponent);

// 使用 esbuild 打包
console.log('🎨 Building modern visualization...');

build({
  entryPoints: [reactComponentPath],
  bundle: true,
  outfile: path.join(__dirname, 'bundle_v2.js'),
  format: 'iife',
  loader: {
    '.css': 'css',
  },
  minify: false,
  sourcemap: 'inline',
}).then(() => {
  // 读取打包后的 JS
  const bundleJs = fs.readFileSync(path.join(__dirname, 'bundle_v2.js'), 'utf-8');

  // 读取 CSS
  const cssPath = path.join(__dirname, 'node_modules/@xyflow/react/dist/style.css');
  const css = fs.readFileSync(cssPath, 'utf-8');

  // 生成最终 HTML
  const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询图可视化</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/dagre@0.8.5/dist/dagre.min.js"></script>
    <script>
      // 过滤特定的 React 警告
      const originalError = console.error;
      console.error = (...args) => {
        if (typeof args[0] === 'string' && args[0].includes('Each child in a list should have a unique "key" prop')) {
          return;
        }
        originalError.apply(console, args);
      };
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        #root {
            width: 100vw;
            height: 100vh;
        }
        ${css}

        /* 自定义样式覆盖 */
        .react-flow__edge-path {
            stroke-linecap: round;
        }
        .react-flow__controls {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
            border-radius: 8px;
        }
        .react-flow__controls-button {
            border: none;
            border-bottom: 1px solid #e5e7eb;
        }
        .react-flow__controls-button:hover {
            background: #f9fafb;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script>${bundleJs}</script>
</body>
</html>`;

  // 写入输出文件
  fs.writeFileSync(outputFile, html);

  // 清理临时文件
  fs.unlinkSync(reactComponentPath);
  fs.unlinkSync(path.join(__dirname, 'bundle_v2.js'));

  console.log('✅ Visualization generated: ' + outputFile);
  console.log('📊 Nodes: ' + Object.keys(data.nodes).length);
  console.log('🔗 Edges: ' + data.edges.length);
}).catch(error => {
  console.error('❌ Build error:', error);
  process.exit(1);
});