fix: Improve symbol reference/definition list perf #327
Conversation
WalkthroughThe changes introduce performance improvements and user experience enhancements for handling large code and reference lists. A character limit is enforced for code previews, displaying a fallback message for oversized files. The reference list component is refactored to use virtualization, rendering only visible items for better scalability. The changelog is updated to reflect these fixes. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LightweightCodeHighlighter
participant ReferenceList
User->>LightweightCodeHighlighter: Load code preview
LightweightCodeHighlighter->>LightweightCodeHighlighter: Check line lengths
alt Any line > 1000 chars
LightweightCodeHighlighter-->>User: Show "File too large to display in preview."
else
LightweightCodeHighlighter->>LightweightCodeHighlighter: Highlight and render code
LightweightCodeHighlighter-->>User: Show code preview
end
User->>ReferenceList: Open reference/definition list
ReferenceList->>ReferenceList: Initialize virtualizer
loop On scroll/viewport change
ReferenceList->>ReferenceList: Render only visible file/match rows
end
ReferenceList-->>User: Display virtualized reference list
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
…d display a message that the file could not be rendered
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/web/src/app/[domain]/components/lightweightCodeHighlighter.tsx (1)
55-57: Minor optimization: Improve memoization dependency.The memoization should depend on
unhighlightedLinesinstead ofcodefor better accuracy sinceunhighlightedLinesis the actual processed data being checked.const isFileTooLargeToDisplay = useMemo(() => { return unhighlightedLines.some(line => line.length > MAX_NUMBER_OF_CHARACTER_PER_LINE); -}, [code]); +}, [unhighlightedLines]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
CHANGELOG.md(1 hunks)packages/web/src/app/[domain]/components/lightweightCodeHighlighter.tsx(3 hunks)packages/web/src/ee/features/codeNav/components/exploreMenu/referenceList.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: build
🔇 Additional comments (11)
CHANGELOG.md (1)
12-12: LGTM! Changelog entry correctly documents the performance fix.The changelog entry properly documents the performance improvement for large reference/definition lists and correctly references this PR.
packages/web/src/app/[domain]/components/lightweightCodeHighlighter.tsx (4)
30-31: Good performance safeguard with reasonable limit.The 1000 character limit per line is a sensible threshold for preventing performance issues in code previews while still accommodating most typical code lines.
64-66: Excellent early return optimization.The early return prevents unnecessary processing when files are too large, which is exactly what's needed for performance improvement.
116-122: Clear and user-friendly fallback message.The fallback UI provides a clear explanation to users when files are too large to display, maintaining good UX while protecting performance.
130-130: Good addition for handling long content.The
wordBreak: 'break-all'style helps handle long lines visually, complementing the character limit safeguard.packages/web/src/ee/features/codeNav/components/exploreMenu/referenceList.tsx (6)
9-11: Good virtualization imports for performance improvement.The addition of
useRefanduseVirtualizerfrom@tanstack/react-virtualare the right choices for implementing efficient list virtualization.
18-19: Reasonable size estimates for virtualization.The estimated heights (30px for lines and matches) provide a good starting point for the virtualizer. These will be refined as actual measurements are taken during rendering.
37-51: Excellent virtualization configuration.The virtualizer setup is well-configured with:
- Dynamic size estimation based on match count
- Proper overscan for smooth scrolling
- Enabled measurement for accurate sizing
This should significantly improve performance for large reference lists.
87-90: Clever sticky header positioning solution.The negative top positioning (
top: -${virtualRow.start}px) is an elegant solution to maintain sticky headers within the virtualized container while preserving the visual hierarchy.
53-62: Good performance optimizations in container styling.The container styling with
contain: 'strict'and proper overflow handling optimizes rendering performance by creating an isolated rendering context.
70-131: Comprehensive virtualization implementation preserves all functionality.The virtual item rendering successfully maintains all original features:
- File headers with repository information
- Sorted matches by line number
- Click navigation functionality
- Proper event tracking
This is a well-executed refactor that should provide significant performance improvements for large lists while maintaining full compatibility.
I noticed some perf issues when rendering large reference lists. This PR adds virtual scrolling to address this.
Summary by CodeRabbit