🎨 Palette: [UX improvement] ERD Auto Layout 개선 (Dagre 적용) - #716
🎨 Palette: [UX improvement] ERD Auto Layout 개선 (Dagre 적용)#716seonghobae wants to merge 68 commits into
Conversation
- dagre 패키지를 추가하여 방향성 계층 그래프 레이아웃 엔진 적용 - 기존의 단순 그리드(grid) 배치(snapshotToGraph)에서 dagre 기반 배치(computeDagreLayout)로 로직 대체 - dagreLayout unit test 추가
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning Review limit reached
Next review available in: 5 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. 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 ignored due to path filters (1)
📒 Files selected for processing (12)
📝 WalkthroughWalkthroughDagre 기반 ERD 자동 레이아웃을 추가했습니다. ERD 변환과 앱 자동 정렬이 새 레이아웃을 사용합니다. DSN 내부 주소 차단과 프로젝트명 HTML 정제를 적용했습니다. 관련 테스트와 패키지 버전을 갱신했습니다. ChangesERD 자동 레이아웃
입력 및 출력 보안 검증
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant computeDagreLayout
participant Dagre
User->>App: 자동 정렬 실행
App->>computeDagreLayout: nodes와 edges 전달
computeDagreLayout->>Dagre: 그래프와 레이아웃 옵션 전달
Dagre-->>computeDagreLayout: 노드 좌표 반환
computeDagreLayout-->>App: 좌표 변환 또는 기존 위치 반환
App-->>User: 정렬된 ERD 렌더링
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
- dagre 패키지를 추가하여 방향성 계층 그래프 레이아웃 엔진 적용 (package.json / pnpm-lock.yaml 추가) - 기존의 단순 그리드(grid) 배치(snapshotToGraph)에서 dagre 기반 배치(computeDagreLayout)로 로직 대체 - dagreLayout unit test 추가 - App.coverage.test.tsx의 Vitest 비동기 timeout 문제 해결 및 test 단언문 수정
|
@jules Please repair this PR and push a focused follow-up commit:
|
|
@jules CI의 frontend Install 단계가 |
|
@jules 정정: 직전 한국어 코멘트보다 2026-08-03 01:29 UTC의 상세 8개 항목 코멘트(#issuecomment-5161392410)를 우선 적용하세요. 즉 |
Pull request was converted to draft
- dagre 패키지를 추가하여 방향성 계층 그래프 레이아웃 엔진 적용 (package.json / pnpm-lock.yaml 추가) - 기존의 단순 그리드(grid) 배치(snapshotToGraph)에서 dagre 기반 배치(computeDagreLayout)로 로직 대체 - dagreLayout unit test 추가 - App.coverage.test.tsx의 Vitest 비동기 timeout 문제 해결 및 test 단언문 수정
|
@jules Repair the current branch so it uses the maintained typed |
…) and XSS Inconsistency (CWE-79)
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/erd/dagreLayout.test.ts (1)
81-84: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winLR 및 TB chain의 실제 비겹침을 검증하세요.
현재 순서 비교는 좌표 차이가 1이어도 통과합니다. 이 경우 node rectangle은 겹칠 수 있습니다.
LR 테스트에서는 target과 source의
x차이가 node width280이상인지 확인하세요. TB 테스트에서는y차이가 node height80이상인지 확인하세요. 두 테스트에서 모든 좌표가 유한한지도 확인하세요.As per coding guidelines, "
**/*.{py,ts,tsx}: Add or update focused tests when changing behavior."Also applies to: 95-98
🤖 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 `@frontend/src/erd/dagreLayout.test.ts` around lines 81 - 84, Update the LR and TB chain tests around computeDagreLayout to verify actual non-overlap: assert the relevant target/source coordinate separation is at least the node width (280) for LR and node height (80) for TB, rather than only comparing ordering. Add assertions that every returned node coordinate is finite in both tests, while preserving the existing layout expectations.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.
Inline comments:
In @.jules/sentinel.md:
- Line 8: Update the SSRF identifier in the documentation entry for
isSupportedConnectionDsn() from CVE-918 to CWE-918, leaving the vulnerability
description unchanged.
In `@frontend/src/App.tsx`:
- Around line 109-144: Update the credential POST flow in createConnection to
use fetch with redirect handling that rejects redirects, preserving the existing
HTTPS validation from requireSecureCredentialTransport. Also configure TLS
termination for the production API in compose.prod.yaml and
deploy/traefik/dynamic.yaml so operational endpoints are served over HTTPS.
- Around line 109-144: Update the Snowflake connection flow around
_validated_ip_hosts() so its validated IP result is used as the actual
connection target instead of the original hostname passed as account. Preserve
the original hostname only for TLS/SNI when required, ensuring DNS rebinding
cannot redirect connections to private, loopback, or link-local addresses.
In `@frontend/src/erd/dagreLayout.test.ts`:
- Around line 48-70: 올바른 geometry fallback과 별도로 dagre.layout 예외 경로를 검증하는 테스트를
추가하세요. `computeDagreLayout`에서 사용하는 `@dagrejs/dagre`의 `layout`이 예외를 던지도록 mock하고,
모든 반환 노드의 position이 입력 노드 위치와 동일한지 단언하세요. 현재 `Number.isFinite` 기반 geometry
fallback 테스트는 그대로 유지하세요.
---
Outside diff comments:
In `@frontend/src/erd/dagreLayout.test.ts`:
- Around line 81-84: Update the LR and TB chain tests around computeDagreLayout
to verify actual non-overlap: assert the relevant target/source coordinate
separation is at least the node width (280) for LR and node height (80) for TB,
rather than only comparing ordering. Add assertions that every returned node
coordinate is finite in both tests, while preserving the existing layout
expectations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5292afb2-f2af-435b-ac35-ca91fa162d34
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
.jules/palette.md.jules/sentinel.mdfrontend/package.jsonfrontend/src/App.coverage.test.tsxfrontend/src/App.tsxfrontend/src/erd/dagreLayout.test.tsfrontend/src/erd/dagreLayout.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- frontend/package.json
- frontend/src/App.coverage.test.tsx
- .jules/palette.md
…) and XSS Inconsistency (CWE-79)
|
@opencode-agent @cwl-noema-review Please independently review exact current head |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
2 participants
What
Replace the fixed four-column ERD grid with a maintained Dagre-based, relationship-aware layout engine.
CHANGELOG.md.Why
Large schemas were visually arranged without regard to dependencies, making reference flows harder to understand and increasing manual repositioning work. The new layout uses the relationship graph to produce a reviewable hierarchy while retaining keyboard and screen-reader semantics because it changes coordinates rather than interactive structure.
Validation
Auto-merge is enabled and awaits the repository-required independent current-head approval.
Summary by CodeRabbit