# 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           # 本文件
```

## 📦 安装依赖

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

```bash
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 调用

```bash
# 运行主程序并自动生成可视化
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：直接调用脚本

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

## 📊 输入/输出

**输入**：`query_graph.json` - 包含节点和边信息的 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（图布局算法）