kg_agent/visualization/sug_v6_1_2_6

sug_v6_1_2_6 可视化工具

这是 sug_v6_1_2_6.py 的配套可视化工具，用于将 query_graph.json 转换为交互式 HTML 可视化页面。

📁 文件结构

visualization/
└── sug_v6_1_2_6/           # 与主脚本名称对应
    ├── index.js            # 主可视化脚本（统一命名）
    ├── package.json        # 依赖配置文件
    ├── node_modules/       # 所有依赖包（通过 npm install 安装）
    │   ├── esbuild/
    │   ├── @xyflow/
    │   ├── react/
    │   ├── react-dom/
    │   ├── dagre/
    │   └── ...
    └── README.md           # 本文件

📦 安装依赖

首次使用或克隆代码后，需要安装依赖包：

cd visualization/sug_v6_1_2_6
npm install

这将安装所有必需的依赖包（约 33MB）。

✨ 特性

• 独立运行：所有依赖都包含在文件夹内，无需外部 node_modules
• React Flow 可视化：基于 @xyflow/react 的现代化图形展示
• 交互功能：
  • 节点拖拽
  • 层级筛选
  • 节点搜索
  • 路径高亮
  • 目录树导航
  • 面包屑路径
  • 值得搜索的查询列表
• 节点类型区分：
  • 🔍 查询节点（query）
  • 📝 帖子节点（note）
• 状态标识：
  • 未选中查询：红色文字
  • 不满足的帖子（match_level: unsatisfied）：红色文字

🚀 使用方式

方式1：通过 sug_v6_1_2_6.py 调用

# 运行主程序并自动生成可视化
python sug_v6_1_2_6.py --input-dir "input/某目录" --visualize

# 仅生成可视化（不运行主程序）
python sug_v6_1_2_6.py --visualize-only "path/to/query_graph.json"

方式2：直接调用脚本

node visualization/sug_v6_1_2_6/index.js <query_graph.json> [output.html]

📊 输入/输出

输入：query_graph.json - 包含节点和边信息的 JSON 文件

{
  "nodes": {
    "node_id": {
      "type": "query" | "note",
      "query": "...",
      "level": 1,
      "relevance_score": 0.95,
      ...
    }
  },
  "edges": [
    {
      "from": "node_id_1",
      "to": "node_id_2",
      "edge_type": "..."
    }
  ]
}

输出：visualization.html - 独立的 HTML 文件，包含所有 JavaScript 和 CSS

📦 依赖大小

• 总大小：约 33MB
• 所有依赖已打包，无需额外安装

🔧 技术栈

• Node.js 运行环境
• esbuild（打包工具）
• React + React DOM
• @xyflow/react（流程图库）
• dagre（图布局算法）