feat: Compare Diff 셀 클릭 시 상세 다이얼로그 표시#15
Conversation
truncate된 셀 값을 전체 확인할 수 있도록 셀 클릭 시 Modal을 표시한다. - ADDED/REMOVED: 전체 값을 diff 색상 배경으로 표시 - CHANGED: Old/New 값을 나란히 비교 표시 - Unified View, Split View 양쪽 모두 지원
Summary of ChangesHello @clroot, 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은 Compare 페이지의 Diff 탭에서 사용자 경험을 개선하기 위해 셀 클릭 시 상세 내용을 보여주는 모달 다이얼로그를 도입합니다. 이를 통해 잘리거나 긴 텍스트를 가진 셀의 전체 내용을 쉽게 확인할 수 있으며, 변경된 값들을 명확하게 비교할 수 있도록 시각적인 피드백을 제공합니다. Highlights
Changelog
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은 Compare Diff 뷰의 셀을 클릭했을 때 상세 정보를 보여주는 다이얼로그를 추가하는 기능을 성공적으로 구현했습니다. Unified와 Split 뷰를 모두 지원하며, ADDED, REMOVED, CHANGED 상태의 행을 올바르게 처리합니다. 새로운 CellDetailModal 컴포넌트를 도입하고 기존 뷰 컴포넌트들이 셀 클릭을 지원하도록 수정한 코드 구조가 좋습니다. 사소한 버그, 코드 일관성, 그리고 완성되지 않은 것으로 보이는 기능에 대해 몇 가지 개선 제안 사항이 있습니다. 전반적으로 훌륭한 기여입니다.
| const diffLabel = | ||
| cell?.diffType === "ADDED" ? "Added" : | ||
| cell?.diffType === "REMOVED" ? "Removed" : | ||
| "Changed" |
There was a problem hiding this comment.
cell이 null일 때 cell?.diffType은 undefined가 되어 diffLabel이 "Changed"로 잘못 설정됩니다. 이로 인해 modalLabel prop이 " · Changed"와 같은 의도하지 않은 값으로 설정될 수 있습니다. cell이 null인 경우를 명시적으로 처리하여 이 문제를 해결하는 것이 좋습니다.
| const diffLabel = | |
| cell?.diffType === "ADDED" ? "Added" : | |
| cell?.diffType === "REMOVED" ? "Removed" : | |
| "Changed" | |
| const diffLabel = | |
| cell?.diffType === "ADDED" ? "Added" : | |
| cell?.diffType === "REMOVED" ? "Removed" : | |
| cell?.diffType === "CHANGED" ? "Changed" : "" |
| } & ( | ||
| | { diffType: "ADDED"; value: unknown } | ||
| | { diffType: "REMOVED"; value: unknown } | ||
| | { diffType: "CHANGED"; leftValue: unknown; rightValue: unknown; isChanged: boolean } |
There was a problem hiding this comment.
SelectedCellInfo 타입의 CHANGED variant에 isChanged 속성을 추가하셨지만, CellDetailModal 컴포넌트 내에서 이 값을 사용하고 있지 않습니다. 이 속성은 CHANGED 행의 특정 셀이 실제로 변경되었는지를 나타내므로, 모달 내에서 변경 여부를 시각적으로 표시하는 데 사용하면 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 값이 변경된 경우에만 특별한 스타일을 적용하거나 레이블을 추가할 수 있습니다.
| const handleCellClick = (sourceRow: DiffRow, colIndex: number) => { | ||
| const col = columns[colIndex] | ||
| if (sourceRow.diffType === "ADDED") { | ||
| onCellClick({ columnName: col.name, columnType: col.type, diffType: "ADDED", value: sourceRow.values[colIndex] }) | ||
| } else if (sourceRow.diffType === "REMOVED") { | ||
| onCellClick({ columnName: col.name, columnType: col.type, diffType: "REMOVED", value: sourceRow.values[colIndex] }) | ||
| } else { | ||
| onCellClick({ | ||
| columnName: col.name, | ||
| columnType: col.type, | ||
| diffType: "CHANGED", | ||
| leftValue: sourceRow.left[colIndex], | ||
| rightValue: sourceRow.right[colIndex], | ||
| isChanged: sourceRow.changedColumns.includes(colIndex), | ||
| }) | ||
| } | ||
| } |
There was a problem hiding this comment.
SplitView의 handleCellClick 함수에서 변경된 컬럼인지 확인할 때 Array.prototype.includes()를 사용하고 있습니다. UnifiedView에서는 Set을 사용하여 O(1) 시간 복잡도로 조회하는 것과 대조적입니다. 코드 일관성을 유지하고 (미미하지만) 성능을 개선하기 위해 handleCellClick 내부에서 Set을 생성하여 사용하는 것을 제안합니다.
| const handleCellClick = (sourceRow: DiffRow, colIndex: number) => { | |
| const col = columns[colIndex] | |
| if (sourceRow.diffType === "ADDED") { | |
| onCellClick({ columnName: col.name, columnType: col.type, diffType: "ADDED", value: sourceRow.values[colIndex] }) | |
| } else if (sourceRow.diffType === "REMOVED") { | |
| onCellClick({ columnName: col.name, columnType: col.type, diffType: "REMOVED", value: sourceRow.values[colIndex] }) | |
| } else { | |
| onCellClick({ | |
| columnName: col.name, | |
| columnType: col.type, | |
| diffType: "CHANGED", | |
| leftValue: sourceRow.left[colIndex], | |
| rightValue: sourceRow.right[colIndex], | |
| isChanged: sourceRow.changedColumns.includes(colIndex), | |
| }) | |
| } | |
| } | |
| const handleCellClick = (sourceRow: DiffRow, colIndex: number) => { | |
| const col = columns[colIndex] | |
| if (sourceRow.diffType === "ADDED") { | |
| onCellClick({ columnName: col.name, columnType: col.type, diffType: "ADDED", value: sourceRow.values[colIndex] }) | |
| } else if (sourceRow.diffType === "REMOVED") { | |
| onCellClick({ columnName: col.name, columnType: col.type, diffType: "REMOVED", value: sourceRow.values[colIndex] }) | |
| } else { | |
| const changedCols = new Set(sourceRow.changedColumns) | |
| onCellClick({ | |
| columnName: col.name, | |
| columnType: col.type, | |
| diffType: "CHANGED", | |
| leftValue: sourceRow.left[colIndex], | |
| rightValue: sourceRow.right[colIndex], | |
| isChanged: changedCols.has(colIndex), | |
| }) | |
| } | |
| } |
1 participant
Summary
Test plan