图形可视化应用

一个完整的 Rust 应用程序，用于可视化具有可自定义布局算法的图形（节点和边）。

特性

• 可视化具有节点和边的图形
• 应用不同的布局算法 (fCoSE, CoSE Bilkent, CiSE, Concentric)
• 自定义可视化选项
• 存储和检索图形
• 跨平台支持（桌面和 Web）

项目结构

该项目组织为一个 Rust 工作区，包含多个 crate：

graph-viz/
├── Cargo.toml                 # 工作区配置
├── shared/                    # 共享库 crate
│   ├── Cargo.toml
│   └── src/
│       ├── lib.rs             # 库入口点
│       ├── types.rs           # 核心数据结构
│       ├── schema.rs          # API 模式
│       └── api.rs             # API 约定
├── frontend/                  # EGUI 前端 crate
│   ├── Cargo.toml
│   └── src/
│       ├── main.rs            # 应用程序入口点
│       ├── ui/                # UI 组件
│       │   └── mod.rs
│       ├── renderer/          # 图形渲染
│       │   └── mod.rs
│       └── layout/            # 布局算法
│           └── mod.rs
└── backend/                   # 后端服务器 crate
    ├── Cargo.toml
    └── src/
        ├── main.rs            # 服务器入口点
        ├── storage/           # 存储抽象
        │   ├── mod.rs
        │   ├── memory.rs      # 内存实现
        │   └── traits.rs      # 存储 trait
        └── handlers/          # API 处理程序
            ├── mod.rs
            └── graph.rs

根 Cargo.toml 定义了一个工作区，其中包含三个主要 crate：shared、frontend 和 backend。这种结构允许在 crate 之间共享代码，同时保持关注点分离。

工作区结构

Rust 工作区是共享相同 target/ 目录和依赖项的包的集合。这可以提高编译效率并更好地组织相关包。 在这个项目中：

• shared crate 包含前端和后端使用的通用数据结构和 API 定义
• frontend crate 使用 EGUI 实现用户界面
• backend crate 使用 Axum 实现服务器

每个 crate 都有自己的 Cargo.toml 文件来定义其依赖项，而根 Cargo.toml 文件定义工作区结构。

开发环境

该项目包含一个 Docker Compose 设置，用于开发和自动重新加载。

前提条件

• Docker
• Docker Compose

Rust 版本

Dockerfile 使用 Rust 1.81.0，它与项目中使用的所有依赖项兼容。 我们使用某些 Cargo 工具的特定版本以确保兼容性：

• cargo-watch@8.4.0
• basic-http-server@0.8.0

这些版本已知可以很好地与该项目一起使用。 如果在构建 Docker 镜像时遇到任何与 Rust 版本兼容性相关的问题，您可能需要：

1. 使用不同版本的工具
2. 更新 Dockerfile 中的 Rust 版本
3. 使用 --locked 标志进行额外的 Cargo 安装

我们还进行了以下更改以确保代码正常工作：

1. 修复了共享 API 模块中的命名冲突
2. 删除了未使用的导入
3. 将 rand 依赖项添加到所有 crate，用于布局算法中的随机位置
4. 使用了 egui_plot 的特定预发布版本 (0.26.0-alpha.2)，因为没有可用的稳定 0.22 版本

运行开发环境

1. 克隆存储库：

   git clone <repository-url>
   cd graph-viz
   

2. 安装 go-task：

   • 在 macOS 上：brew install go-task/tap/go-task
   • 在 Linux 上：sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin
   • 在 Windows 上：choco install go-task
   • 或参阅 taskfile.dev 了解其他安装方法

3. 启动开发环境：

   task start
   

这将启动三个服务：

• backend: 后端服务器运行在 http://localhost:3000
• frontend-desktop: 前端的桌面版本（用于开发）
• frontend-web: 前端的 Web 版本运行在 http://localhost:8080

使用 Task 命令

Taskfile.yml 提供了几个命令来管理开发环境：

# 列出所有可用的任务
task

# 在分离模式下启动所有服务
task start

# 启动所有服务并显示日志
task dev

# 停止所有服务
task stop

# 重新启动所有服务
task restart

# 仅启动后端
task backend

# 仅启动 Web 前端
task web

# 仅启动桌面前端
task desktop

# 显示所有服务的日志
task logs

# 重新构建所有服务
task build

# 删除所有容器和卷
task clean

# 构建桌面应用程序
task build-desktop

# 构建 Web 应用程序
task build-web

# 运行所有测试
task test

# 运行 linting 检查
task lint

自动重新加载

开发环境配置为在文件更改时自动重新加载：

• 后端：对 shared/src 或 backend/src 中的文件所做的更改将触发重新构建和重新启动
• 前端桌面：对 shared/src 或 frontend/src 中的文件所做的更改将触发重新构建和重新启动
• 前端 Web：对 shared/src 或 frontend/src 中的文件所做的更改将触发重新构建

开发工作流程

1. 对代码进行更改
2. 服务将自动重新构建和重新启动
3. 在浏览器（对于 Web）或桌面应用程序中查看更改

运行单个服务

您还可以运行单个服务：

# 仅运行后端
task backend

# 仅运行 Web 前端
task web

# 仅运行桌面前端
task desktop

构建生产版本

桌面应用程序

task build-desktop

可执行文件将在 target/release/frontend 中。

Web 应用程序

使用 Task

task build-web

Web 应用程序将在 dist 目录中。

直接使用 Trunk

您也可以直接使用 Trunk 构建 Web 应用程序：

# 如果您尚未安装 Trunk，请安装它
cargo install trunk

# 安装 WebAssembly 目标
rustup target add wasm32-unknown-unknown

# 构建 Web 应用程序
cd frontend
trunk build --release

构建的文件将在 frontend/dist 目录中。

GitHub Pages 部署

该项目配置为在将更改推送到主分支时自动将 Web 前端部署到 GitHub Pages。 部署由 .github/workflows/deploy-web.yml 中定义的 GitHub Actions 工作流程处理。

查看已部署的应用程序

Web 应用程序已部署到：https://ocasazza.github.io/kbg/

手动部署

您还可以从存储库中的 GitHub Actions 选项卡手动触发部署工作流程。

Web 构建的本地测试

要在部署之前在本地测试 Web 构建：

cd frontend
trunk serve --release

这将在 http://localhost:8080 启动一个本地服务器，为 Web 应用程序提供服务。

学术论文

Graphviz 论文

• Graphviz and Dynagraph - Static and Dynamic Graph Drawing Tools - 简明概述 (cite)
• An open graph visualization system and its applications to software engineering - 较长的概述，首选引用 (cite)
• Graph Drawing by Stress Majorization - neato 的改进算法 (cite)
• Topological Fisheye Views for Visualizing Large Graphs - 基于拓扑的扭曲视图，用于大型图形
• A method for drawing directed graphs - dot 的算法 (1993) (cite)
• Efficient and high quality force-directed graph drawing - sfdp 的算法 (2005)
• Improved Circular Layouts - 圆形布局的交叉减少和边缘捆绑 (cite)
• Efficient and High Quality Force-Directed Graph Drawing - sfdp 中使用的多尺度算法 (cite)
• Implementing a General-Purpose Edge Router - Graphviz 中的边缘路由 (cite)
• Improved Force-Directed Layouts - 基于 Voronoi 的节点重叠消除 (cite)
• GMap: Visualizing graphs and clusters as maps - 将图形显示为地图 (cite)
• Efficient Node Overlap Removal Using a Proximity Stress Model - Prism 节点重叠消除 (cite)
• On-line Hierarchical Graph Drawing - dynadag 算法

图形绘制

• Wikipedia entry. 他们还有一个 关于 Graphviz 的简短文章。

• graphdrawing.org - 年度研讨会、书籍、数据、开放问题等

• Open Directory Project Graph Drawing 条目。

• Survey (Franz Brandenburg talk notes in Powerpoint)

• A Short Note on the History of Graph Drawing

• David Eppstein's Geometry in Action, Graph Drawing section

• Graph Drawing: Algorithms for the Visualization of Graphs by Ioannis G. Tollis, Giuseppe Di Battista, Peter Eades, Roberto Tamassia

• Graph Drawing Software (Mathematics and Visualization) by M. Junger, Petra Mutzel, (Symposium on Graph Drawing 2001, Vienna)

• Drawing Graphs: Methods and Models by Michael Kaufmann, Dorothea Wagner

• Handbook of Graph Drawing and Visualization Roberto Tamassia, ed. (On-line version)

信息可视化

• IEEE Infovis Symposia: current, past

• Information Visualization Journal

• FlowingData

• York U. Gallery of Visualization (see also Statistics and Statistical Graphics Resources).

• Stanford University course bibliography

• Stanford University Data Journalism

• Xerox PARC projects

• Software Visualization at Georgia Tech

**

许可证

MIT License