fix(view): ClusterNode 선택 시 FileIcicleSummary 중복 렌더링 수정#920
Merged
Conversation
…rNode selection
Fixed the issue where FileIcicleSummary duplicates on ClusterNode selection/deselection.
Root cause:
- destroyIcicleTree function used incorrect D3 selector ('svg')
- drawIcicleTree creates <g> elements inside SVG, but cleanup function attempted to select non-existent <svg> tags
- Previous <g> elements were not removed, causing new elements to be added on top, resulting in duplicate rendering
Solution:
- Changed D3 selector from 'svg' to 'g' to properly remove DOM elements
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
ytaek
approved these changes
Oct 1, 2025
|
|
||
| const destroyIcicleTree = ($target: RefObject<SVGSVGElement>) => { | ||
| d3.select($target.current).selectAll("svg").remove(); | ||
| d3.select($target.current).selectAll("g").remove(); |
Contributor
There was a problem hiding this comment.
current가 svg니 g가 맞겠네요 👍👍👍👍👍👍👍👍👍👍
genieCS
approved these changes
Oct 2, 2025
This was referenced Oct 9, 2025
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
3 participants
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.
🎯 목적
Statistics 패널에서 사용자가 ClusterNode를 선택/해제할 때 File Summary (Icicle Tree) 시각화가 중복되어 표시되는 버그를 수정합니다.
🐛 문제
사용자가 ClusterNode를 클릭하여 선택하거나 해제할 때, File Summary 차트가 여러 번 겹쳐서 렌더링되어 혼란스러운 화면을 보여주는 문제가 발생했습니다.
📋 주요 변경사항
근본 원인
destroyIcicleTreecleanup 함수가 잘못된 D3 셀렉터('svg')를 사용drawIcicleTree는 SVG 내부에<g>요소들을 생성하지만, cleanup 함수는 존재하지 않는<svg>자식 요소를 선택하려고 시도<g>요소들이 제거되지 않아 새로운 요소들이 위에 추가되면서 중복 렌더링 발생해결 방법
destroyIcicleTree함수의 D3 셀렉터를'svg'에서'g'로 변경📊 영향 범위
수정된 파일:
packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx(1줄 변경)영향받는 컴포넌트:
사용자 영향:
🧪 테스트
FileIcicleSummary.util.test.ts- 6/6 통과)✅ 체크리스트
🔗 관련 이슈
Closes #919
📝 추가 정보
단일 라인 변경으로 근본 원인을 해결하는 최소한의 수정입니다. React의 cleanup 함수가 재렌더링 전에 D3로 생성된 모든 DOM 요소를 올바르게 제거하도록 보장합니다.