feat: explain 阶段树改为图形化连线盒子树#8
Merged
Merged
Conversation
- 解析逻辑抽到 lib/explain.ts(纯函数,产出嵌套 StageTreeNode 树)+ 7 个单测, 替代原先内联在组件、无测试的扁平 depth 列表 - ExplainView 递归渲染连线盒子树(输出在顶、扫描在叶), COLLSCAN 红框+红底、IXSCAN/IDHACK 绿框、其余中性;每阶段补 time 展示 - 连线用 pure-CSS org-chart 伪元素技术,已用独立预览截图验证线性链+分支两形态 - 摘要条 / 原始 JSON 折叠保留;新增 explain.metricTime 三语键 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
ExplainView原本把执行阶段渲染成缩进的文本行,且解析逻辑内联在组件里、无测试。本 PR 把它升级为 NoSQLBooster 风的图形化连线盒子树(输出阶段在顶 → 扫描在叶)。改动
lib/explain.ts纯函数,把 explain 文档解析成嵌套StageTreeNode树(沿inputStage/inputStages/shards递归,无名包裹节点的子级冒泡),配 7 个单测(IXSCAN 链 / COLLSCAN / 分支 / EJSON 包裹数字 / 垃圾输入)。ExplainView递归渲染连线盒子树。每个阶段一个卡片:阶段名(COLLSCAN 红框+红底、IXSCAN/IDHACK 绿框、其余中性)+ 指标(n / docs / keys / time)+ 命中索引/keyPattern。explain.metricTime三语键。验证
pnpm typecheck干净;pnpm test:unit300 通过(+7 explain 解析,i18n 三语键齐全)截图
线性链:垂直连线连接 LIMIT→FETCH→IXSCAN(绿);分支:横向总线 + 下垂连线,COLLSCAN 红框红底。宽超出时
.explain-stages横向滚动。🤖 Generated with Claude Code