Skip to content

fix: Improve symbol reference/definition list perf #327

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 2, 2025
Merged

fix: Improve symbol reference/definition list perf #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac397b4
fix
brendan-kellam Jun 2, 2025
54ba104
Added check for files with really long lines (like minified files) an…
brendan-kellam Jun 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Fixed
- Fixed issue with the symbol hover popover clipping at the top of the page. [#326](https://github.com/sourcebot-dev/sourcebot/pull/326)
- Fixed slow rendering issue with large reference/definition lists. [#327](https://github.com/sourcebot-dev/sourcebot/pull/327)

## [4.1.0] - 2025-06-02

Expand Down
19 changes: 19 additions & 0 deletions packages/web/src/app/[domain]/components/lightweightCodeHighlighter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ interface LightweightCodeHighlighter {
renderWhitespace?: boolean;
}

// The maximum number of characters per line that we will display in the preview.
const MAX_NUMBER_OF_CHARACTER_PER_LINE = 1000;

/**
* Lightweight code highlighter that uses the Lezer parser to highlight code.
* This is helpful in scenarios where we need to highlight a ton of code snippets
Expand All @@ -49,12 +52,19 @@ export const LightweightCodeHighlighter = memo<LightweightCodeHighlighter>((prop
return code.trimEnd().split('\n');
}, [code]);

const isFileTooLargeToDisplay = useMemo(() => {
return unhighlightedLines.some(line => line.length > MAX_NUMBER_OF_CHARACTER_PER_LINE);
}, [code]);

const [highlightedLines, setHighlightedLines] = useState<React.ReactNode[] | null>(null);

const highlightStyle = useCodeMirrorHighlighter();

useEffect(() => {
if (isFileTooLargeToDisplay) {
return;
}

measure(() => Promise.all(
unhighlightedLines
.map(async (line, index) => {
Expand Down Expand Up @@ -103,12 +113,21 @@ export const LightweightCodeHighlighter = memo<LightweightCodeHighlighter>((prop
const lineNumberDigits = String(lineCount).length;
const lineNumberWidth = `${lineNumberDigits + 2}ch`; // +2 for padding

if (isFileTooLargeToDisplay) {
return (
<div className="font-mono text-sm px-2">
File too large to display in preview.
</div>
);
}

return (
<div
style={{
fontFamily: tailwind.theme.fontFamily.editor,
fontSize: tailwind.theme.fontSize.editor,
whiteSpace: renderWhitespace ? 'pre-wrap' : 'none',
wordBreak: 'break-all',
}}
>
{(highlightedLines ?? unhighlightedLines).map((line, index) => (
Expand Down
143 changes: 98 additions & 45 deletions packages/web/src/ee/features/codeNav/components/exploreMenu/referenceList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,21 @@
import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
import { FileHeader } from "@/app/[domain]/components/fileHeader";
import { LightweightCodeHighlighter } from "@/app/[domain]/components/lightweightCodeHighlighter";
import { ScrollArea } from "@/components/ui/scroll-area";
import { FindRelatedSymbolsResponse } from "@/features/codeNav/types";
import { RepositoryInfo, SourceRange } from "@/features/search/types";
import { base64Decode } from "@/lib/utils";
import { useMemo } from "react";
import { useMemo, useRef } from "react";
import useCaptureEvent from "@/hooks/useCaptureEvent";
import { useVirtualizer } from "@tanstack/react-virtual";

interface ReferenceListProps {
data: FindRelatedSymbolsResponse;
revisionName: string;
}

const ESTIMATED_LINE_HEIGHT_PX = 30;
const ESTIMATED_MATCH_CONTAINER_HEIGHT_PX = 30;

export const ReferenceList = ({
data,
revisionName,
Expand All @@ -29,52 +32,102 @@ export const ReferenceList = ({
const { navigateToPath } = useBrowseNavigation();
const captureEvent = useCaptureEvent();

return (
<ScrollArea className="h-full">
{data.files.map((file, index) => {
const repoInfo = repoInfoMap[file.repositoryId];
// Virtualization setup
const parentRef = useRef<HTMLDivElement>(null);
const virtualizer = useVirtualizer({
count: data.files.length,
getScrollElement: () => parentRef.current,
estimateSize: (index) => {
const file = data.files[index];

const estimatedSize =
file.matches.length * ESTIMATED_LINE_HEIGHT_PX +
ESTIMATED_MATCH_CONTAINER_HEIGHT_PX;

return estimatedSize;
},
overscan: 5,
enabled: true,
});

return (
<div key={index}>
<div className="bg-accent py-1 px-2 flex flex-row sticky top-0">
<FileHeader
repo={{
name: repoInfo.name,
displayName: repoInfo.displayName,
codeHostType: repoInfo.codeHostType,
webUrl: repoInfo.webUrl,
return (
<div
ref={parentRef}
style={{
width: "100%",
height: "100%",
overflowY: "auto",
contain: "strict",
}}
>
<div
style={{
height: virtualizer.getTotalSize(),
width: "100%",
position: "relative",
}}
>
{virtualizer.getVirtualItems().map((virtualRow) => {
const file = data.files[virtualRow.index];
const repoInfo = repoInfoMap[file.repositoryId];
return (
<div
key={virtualRow.key}
data-index={virtualRow.index}
ref={virtualizer.measureElement}
style={{
position: "absolute",
transform: `translateY(${virtualRow.start}px)`,
top: 0,
left: 0,
width: "100%",
}}
>
<div
className="bg-accent py-1 px-2 flex flex-row sticky top-0 z-10"
style={{
top: `-${virtualRow.start}px`,
}}
fileName={file.fileName}
branchDisplayName={revisionName === "HEAD" ? undefined : revisionName}
/>
</div>
<div className="divide-y">
{file.matches
.sort((a, b) => a.range.start.lineNumber - b.range.start.lineNumber)
.map((match, index) => (
<ReferenceListItem
key={index}
lineContent={match.lineContent}
range={match.range}
language={file.language}
onClick={() => {
captureEvent('wa_explore_menu_reference_clicked', {});
navigateToPath({
repoName: file.repository,
revisionName,
path: file.fileName,
pathType: 'blob',
highlightRange: match.range,
})
}}
/>
))}
>
<FileHeader
repo={{
name: repoInfo.name,
displayName: repoInfo.displayName,
codeHostType: repoInfo.codeHostType,
webUrl: repoInfo.webUrl,
}}
fileName={file.fileName}
branchDisplayName={revisionName === "HEAD" ? undefined : revisionName}
/>
</div>
<div className="divide-y">
{file.matches
.sort((a, b) => a.range.start.lineNumber - b.range.start.lineNumber)
.map((match, index) => (
<ReferenceListItem
key={index}
lineContent={match.lineContent}
range={match.range}
language={file.language}
onClick={() => {
captureEvent('wa_explore_menu_reference_clicked', {});
navigateToPath({
repoName: file.repository,
revisionName,
path: file.fileName,
pathType: 'blob',
highlightRange: match.range,
})
}}
/>
))}
</div>
</div>
</div>
)
})}
</ScrollArea>
)
);
})}
</div>
</div>
);
}


Expand Down