feat(perf): add performance testing utilities and datasets #265
Conversation
Summary of ChangesHello @yvonneyx, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此 PR 引入了一个全面的性能测试框架，旨在系统地评估图布局算法的性能。它通过集成新的测试脚本、配置和可视化仪表盘，实现了对不同布局算法在各种数据集规模下的基准测试。主要目标是监控和优化布局算法的执行效率，确保其在不同应用场景下的性能表现。 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
这个 PR 在搭建性能测试框架方面做得非常出色，包括增加了测试工具、数据集和可视化的 Dashboard。这对于跟踪和比较不同布局算法的性能非常有帮助。
代码整体结构清晰，但仍有一些可以改进的地方：
- 代码重复：在多个
*.perf.ts文件中，为不同规模数据集（tiny, small, ...）创建测试用例的代码高度重复。这可以通过工厂函数或循环来重构，以提高代码的可维护性。 - 可维护性：
report-viewer.html文件中的 JavaScript 代码量较大，并且直接内嵌在 HTML 中。将其分离到独立的 JS 文件中会更易于管理。 - 健壮性：报告加载逻辑依赖于服务器的目录列表功能，这可能不稳定。使用清单文件是更可靠的替代方案。
- 类型安全：在一些工具函数中广泛使用了
any类型，这削弱了 TypeScript 的类型检查优势。
总的来说，这是一次很棒的功能添加，上述建议旨在进一步提升代码质量。
| // Render edges | ||
| result.edges.forEach((edge) => { | ||
| const sourceNode: any = result.nodes.find((n) => n.id === edge.source); | ||
| const targetNode: any = result.nodes.find((n) => n.id === edge.target); | ||
| if (sourceNode && targetNode) { | ||
| const sourceX = sourceNode.data?.x || sourceNode.x; | ||
| const sourceY = sourceNode.data?.y || sourceNode.y; | ||
| const targetX = targetNode.data?.x || targetNode.x; | ||
| const targetY = targetNode.data?.y || targetNode.y; | ||
| ctx.beginPath(); | ||
| ctx.moveTo(sourceX, sourceY); | ||
| ctx.lineTo(targetX, targetY); | ||
| ctx.strokeStyle = '#CCC'; | ||
| ctx.lineWidth = 1; | ||
| ctx.stroke(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
在 forEach 循环中为每条边调用 result.nodes.find 来查找源节点和目标节点，其时间复杂度为 O(N*M)，其中 N 是节点数，M 是边数。对于大型图，这可能会很低效。建议在循环之前创建一个以节点 ID 为键的 Map，这样可以将查找时间复杂度降低到 O(1)。
// Create a map for faster node lookup
const nodeMap = new Map(result.nodes.map((node: any) => [node.id, node]));
// Render edges
result.edges.forEach((edge) => {
const sourceNode: any = nodeMap.get(edge.source);
const targetNode: any = nodeMap.get(edge.target);
if (sourceNode && targetNode) {
const sourceX = sourceNode.data?.x || sourceNode.x;
const sourceY = sourceNode.data?.y || sourceNode.y;
const targetX = targetNode.data?.x || targetNode.x;
const targetY = targetNode.data?.y || targetNode.y;
ctx.beginPath();
ctx.moveTo(sourceX, sourceY);
ctx.lineTo(targetX, targetY);
ctx.strokeStyle = '#CCC';
ctx.lineWidth = 1;
ctx.stroke();
}
});
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## v5 #265 +/- ##
=======================================
Coverage 80.72% 80.72%
=======================================
Files 70 70
Lines 4928 4928
Branches 1214 1209 -5
=======================================
Hits 3978 3978
+ Misses 948 860 -88
- Partials 2 90 +88 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
以 @antv/[email protected] 作为基准，查看改造后的布局算法耗时情况。