feat(frontend): add relationship-aware ERD layout - #856
Conversation
|
Warning Review limit reached
Next review available in: 11 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough관계 인식 Dagre 레이아웃을 추가했습니다. 노드 크기와 외래 키 관계를 사용해 LR 또는 TB 좌표를 계산합니다. 순환 그래프, 분리 그래프, dangling edge와 실패 상황을 처리합니다. 스냅샷 변환과 툴바 자동 정렬에 새 레이아웃을 적용했습니다. ChangesERD 레이아웃
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Toolbar
participant App
participant computeDagreLayout
participant ReactFlow
Toolbar->>App: 자동 정렬 실행
App->>computeDagreLayout: nodes와 edges 전달
computeDagreLayout-->>App: 관계 기반 좌표 반환
App->>ReactFlow: 정렬된 노드 표시
Toolbar->>App: 되돌리기 실행
App->>ReactFlow: 이전 좌표 복원
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (1 warning, 2 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai review Please review unchanged exact head |
|
|
|
@opencode-agent review Please independently review unchanged exact head |
|
@coderabbitai review Retry after the bot-reported review window elapsed. Review only unchanged exact head |
|
I will review the
|
|
@coderabbitai review The bot-reported countdown has now elapsed. Review only unchanged exact head |
|
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
docs/doctoring/relationship-aware-erd-layout.md (1)
48-52: 🔒 Security & Privacy | 🔵 Trivial필수 Security Scan 게이트 결과를 병합 기준으로 확인하세요.
제공된 컨텍스트에는
osv-scan, Medium 이상 diff-scopeddependency-review, repo-widetrivy-fs의 성공 로그나 SARIF가 없습니다. 병합 전에 세 결과가 merge ref 기준으로 통과했는지 확인하세요. 취약점 결과가 있으면 Medium 이상 항목을 수정하고 게이트를 완화하지 마세요.As per coding guidelines, 모든 pull request는
osv-scan, Medium 이상 diff-scopeddependency-review, CRITICAL/HIGH/MEDIUM 대상 repo-widetrivy-fs게이트를 통과해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/doctoring/relationship-aware-erd-layout.md` around lines 48 - 52, Before merging, verify that the merge ref passes the required osv-scan, Medium-or-higher diff-scoped dependency-review, and repo-wide trivy-fs scans, with successful logs or SARIF recorded. Address any Medium-or-higher findings without weakening or bypassing these gates.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@docs/doctoring/relationship-aware-erd-layout.md`:
- Around line 48-52: Before merging, verify that the merge ref passes the
required osv-scan, Medium-or-higher diff-scoped dependency-review, and repo-wide
trivy-fs scans, with successful logs or SARIF recorded. Address any
Medium-or-higher findings without weakening or bypassing these gates.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e8ac1d9a-af94-4122-ae87-f906c73f4487
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (10)
CHANGELOG.mddocs/doctoring/relationship-aware-erd-layout.mdfrontend/CHANGELOG.mdfrontend/package.jsonfrontend/src/App.coverage.test.tsxfrontend/src/App.tsxfrontend/src/erd/convert.test.tsfrontend/src/erd/convert.tsfrontend/src/erd/dagreLayout.test.tsfrontend/src/erd/dagreLayout.ts
|
Verified the sole CodeRabbit nit against unchanged exact head Security Scan run
No Medium-or-higher finding was reported, no gate was weakened, and no product or documentation change is warranted for this evidence-only finding. CI and SAST Semgrep also remain terminal-success; zero review threads exist. Qualifying independent non-author approval remains required before merge. |
|
Exact-head fail-closed layout remediation is published at The current implementation violated the documented/issue contract when Dagre returned valid geometry for one node and invalid geometry for another: the valid node moved while the invalid node stayed put, creating a partial layout. RED reproduced the mixed state with the valid node moving from Verification on the published tree:
Local runtime was Node 24.14 while the repository requires Node 26, so exact-head CI remains authoritative. @coderabbitai review |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
head='a0f8cadf2fc818b8acd0c666a192e64fcfaf1ce1'
base='72afe6db712b145baaba084f64a1ff4fb36d9fd0'
git cat-file -e "${head}^{commit}"
git cat-file -e "${base}^{commit}"
echo '=== Exact head metadata ==='
git show -s --format='%H%n%P%n%s' "$head"
echo '=== Changed paths from protected main ==='
git diff --name-status "$base" "$head"
echo '=== Remediation commit diff ==='
git diff --check "${head}^" "$head"
git diff --unified=80 "${head}^" "$head" -- frontend/src/erd/dagreLayout.ts frontend/src/erd/dagreLayout.test.ts
echo '=== Layout module outline ==='
ast-grep outline frontend/src/erd/dagreLayout.ts --items all --view expanded
echo '=== Layout test outline ==='
ast-grep outline frontend/src/erd/dagreLayout.test.ts --items all --view expanded
echo '=== Integration module outlines ==='
ast-grep outline frontend/src/erd/convert.ts --items all --view expanded
ast-grep outline frontend/src/App.tsx --items all --view expanded
echo '=== Dagre dependency declarations ==='
rg -n -C2 '"`@dagrejs/dagre`"|`@dagrejs/dagre`@' frontend/package.json frontend/package-lock.json 2>/dev/null || true
echo '=== Layout call sites ==='
rg -n -C3 '\bcomputeDagreLayout\s*\(' frontend/src
echo '=== Full changed-file diff statistics ==='
git diff --stat "$base" "$head"Length of output: 22707 🏁 Script executed: #!/bin/bash
set -euo pipefail
head='a0f8cadf2fc818b8acd0c666a192e64fcfaf1ce1'
base='72afe6db712b145baaba084f64a1ff4fb36d9fd0'
echo '=== Complete layout module ==='
git show "${head}:frontend/src/erd/dagreLayout.ts" | nl -ba
echo '=== Complete layout test ==='
git show "${head}:frontend/src/erd/dagreLayout.test.ts" | nl -ba
echo '=== Snapshot conversion context ==='
git show "${head}:frontend/src/erd/convert.ts" | nl -ba | sed -n '25,180p'
echo '=== Toolbar layout and undo context ==='
git show "${head}:frontend/src/App.tsx" | nl -ba | sed -n '410,505p'
git show "${head}:frontend/src/App.tsx" | nl -ba | sed -n '1060,1160p'
rg -n -C4 'autoLayout|Auto layout|layout|undo|Undo|history|setNodes\(next\)' frontend/src/App.tsx
echo '=== Application coverage test context ==='
git show "${head}:frontend/src/App.coverage.test.tsx" | nl -ba | sed -n '1,260p'
echo '=== Conversion test context ==='
git show "${head}:frontend/src/erd/convert.test.ts" | nl -ba | sed -n '1,240p'
echo '=== Package lock Dagre package entries ==='
git show "${head}:frontend/package-lock.json" | nl -ba | sed -n '1,100p'
git show "${head}:frontend/package-lock.json" | rg -n -C4 '"node_modules/@dagrejs/dagre"|"`@dagrejs/dagre`"|`@dagrejs/graphlib`'
echo '=== Documentation ==='
git show "${head}:docs/doctoring/relationship-aware-erd-layout.md" | nl -ba
git show "${head}:CHANGELOG.md" | nl -ba | sed -n '1,80p'
git show "${head}:frontend/CHANGELOG.md" | nl -ba | sed -n '1,80p'
echo '=== Full patch against protected main ==='
git diff --unified=12 "$base" "$head" -- \
CHANGELOG.md docs/doctoring/relationship-aware-erd-layout.md \
frontend/CHANGELOG.md frontend/package.json frontend/package-lock.json \
frontend/src/App.tsx frontend/src/App.coverage.test.tsx \
frontend/src/erd/convert.ts frontend/src/erd/convert.test.ts \
frontend/src/erd/dagreLayout.ts frontend/src/erd/dagreLayout.test.tsLength of output: 2268 🏁 Script executed: #!/bin/bash
set -euo pipefail
head='a0f8cadf2fc818b8acd0c666a192e64fcfaf1ce1'
base='72afe6db712b145baaba084f64a1ff4fb36d9fd0'
echo '=== Complete layout module ==='
git show "${head}:frontend/src/erd/dagreLayout.ts"
echo '=== Complete layout test ==='
git show "${head}:frontend/src/erd/dagreLayout.test.ts"
echo '=== Snapshot conversion context ==='
git show "${head}:frontend/src/erd/convert.ts" | sed -n '25,180p'
echo '=== Toolbar layout and undo context ==='
git show "${head}:frontend/src/App.tsx" | sed -n '410,505p'
git show "${head}:frontend/src/App.tsx" | sed -n '1060,1160p'
rg -n -C4 'autoLayout|Auto layout|layout|undo|Undo|history|setNodes\(next\)' frontend/src/App.tsx
echo '=== Application coverage test context ==='
git show "${head}:frontend/src/App.coverage.test.tsx" | sed -n '1,260p'
echo '=== Conversion test context ==='
git show "${head}:frontend/src/erd/convert.test.ts" | sed -n '1,240p'
echo '=== Package lock Dagre package entries ==='
git show "${head}:frontend/package-lock.json" | sed -n '1,100p'
git show "${head}:frontend/package-lock.json" | rg -n -C4 '"node_modules/@dagrejs/dagre"|"`@dagrejs/dagre`"|`@dagrejs/graphlib`'
echo '=== Documentation ==='
git show "${head}:docs/doctoring/relationship-aware-erd-layout.md"
git show "${head}:CHANGELOG.md" | sed -n '1,80p'
git show "${head}:frontend/CHANGELOG.md" | sed -n '1,80p'
echo '=== Full patch against protected main ==='
git diff --unified=12 "$base" "$head" -- \
CHANGELOG.md docs/doctoring/relationship-aware-erd-layout.md \
frontend/CHANGELOG.md frontend/package.json frontend/package-lock.json \
frontend/src/App.tsx frontend/src/App.coverage.test.tsx \
frontend/src/erd/convert.ts frontend/src/erd/convert.test.ts \
frontend/src/erd/dagreLayout.ts frontend/src/erd/dagreLayout.test.tsLength of output: 89729 🏁 Script executed: #!/bin/bash
set -euo pipefail
repo='ContextualWisdomLab/pg-erd-cloud'
head='a0f8cadf2fc818b8acd0c666a192e64fcfaf1ce1'
echo '=== Pull request exact head and review state ==='
gh pr view 856 --repo "$repo" \
--json number,headRefOid,baseRefOid,isDraft,mergeStateStatus,reviewDecision,statusCheckRollup \
--jq '{number, headRefOid, baseRefOid, isDraft, mergeStateStatus, reviewDecision,
checks: [.statusCheckRollup[] | {name, status, conclusion, workflowName}]}'
echo '=== Checks associated with the requested head ==='
gh api "repos/${repo}/commits/${head}/check-runs?per_page=100" --paginate \
--jq '.check_runs[] | {name, status, conclusion, details_url}'
echo '=== Focused toolbar regression test ==='
git show "${head}:frontend/src/App.coverage.test.tsx" | sed -n '350,430p'
echo '=== Direct layout imports and call sites at the exact head ==='
git grep -n -E "import .*computeDagreLayout|computeDagreLayout\\(" "$head" -- frontend/src
echo '=== Exact-head worktree state and diff validation ==='
test "$(git rev-parse HEAD)" = "$head" && echo 'worktree-at-requested-head=true' || \
printf 'worktree-at-requested-head=false actual=%s\n' "$(git rev-parse HEAD)"
git diff --check 72afe6db712b145baaba084f64a1ff4fb36d9fd0 "$head"Length of output: 16848
I reviewed exact head The fail-closed remediation is correct. The implementation meets the reviewed
I did not execute repository code in this sandbox. The exact-head I cannot give an unconditional merge-ready verdict yet. GitHub reports ✏️ Learnings added
You are interacting with an AI system. |
1 participant
Outcome
Imported snapshots and the explicit toolbar action now use one deterministic relationship-aware Dagre layout instead of the alphabetical fixed grid.
Changes
@dagrejs/dagreexactly at 3.1.0 in the canonical npm manifest and lockfile;computeDagreLayoutcontract with LR/TB directions, stable insertion order, measured rectangle support, top-left coordinate conversion, and no input mutation;No backend, API, database, workflow, DSN, TLS, redirect, or deployment behavior changes.
Test-first evidence
RED was observed at the intended module boundary because
./dagreLayoutdid not exist. On the exact published tree, using Node 26.0.0 and npm 11.19.0:npm ci --ignore-scripts);git diff --check: passed.The repository-required CodeGraph executable was unavailable in this runner;
rg, call-site inspection, focused tests, and the complete suite were used instead. Exact-head CI, Security Scan, Semgrep, zero valid unresolved findings, and qualifying independent current-head approval remain mandatory before merge.Closes #755.
Summary by CodeRabbit
새로운 기능
버그 수정
문서 및 테스트