ti.sil/sourcebot
1
0
Fork 0
mirror of https://github.com/sourcebot-dev/sourcebot.git synced 2025-12-12 04:15:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(browse): Fix issue where files would sometimes never load (#365)

Browse source
This commit is contained in:
Brendan Kellam 2025-07-14 16:07:09 -07:00 committed by GitHub
parent d9d0146c48
commit 1384dd870e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 379 additions and 318 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Fixed issue with external source code links being broken for paths with spaces. [#364](https://github.com/sourcebot-dev/sourcebot/pull/364)
- Makes base retry indexing configuration configurable and move from a default of `5s` to `60s`. [#377](https://github.com/sourcebot-dev/sourcebot/pull/377)
- Fixed issue where files would sometimes never load in the code browser. [#365](https://github.com/sourcebot-dev/sourcebot/pull/365)
## [4.5.0] - 2025-06-21

74
packages/web/src/app/[domain]/browse/[...path]/components/codePreviewPanel.tsx
View file

@ -1,62 +1,38 @@
'use client';
import { getCodeHostInfoForRepo, unwrapServiceError } from "@/lib/utils";
import { useBrowseParams } from "@/app/[domain]/browse/hooks/useBrowseParams";
import { useQuery } from "@tanstack/react-query";
import { getFileSource } from "@/features/search/fileSourceApi";
import { useDomain } from "@/hooks/useDomain";
import { Loader2 } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { getRepoInfoByName } from "@/actions";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { useMemo } from "react";
import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
import { PathHeader } from "@/app/[domain]/components/pathHeader";
import { Separator } from "@/components/ui/separator";
import { getFileSource } from "@/features/search/fileSourceApi";
import { cn, getCodeHostInfoForRepo, isServiceError } from "@/lib/utils";
import Image from "next/image";
import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
export const CodePreviewPanel = () => {
const { path, repoName, revisionName } = useBrowseParams();
const domain = useDomain();
const { data: fileSourceResponse, isPending: isFileSourcePending, isError: isFileSourceError } = useQuery({
queryKey: ['fileSource', repoName, revisionName, path, domain],
queryFn: () => unwrapServiceError(getFileSource({
fileName: path,
repository: repoName,
branch: revisionName
}, domain)),
});
const { data: repoInfoResponse, isPending: isRepoInfoPending, isError: isRepoInfoError } = useQuery({
queryKey: ['repoInfo', repoName, domain],
queryFn: () => unwrapServiceError(getRepoInfoByName(repoName, domain)),
});
const codeHostInfo = useMemo(() => {
if (!repoInfoResponse) {
return undefined;
interface CodePreviewPanelProps {
path: string;
repoName: string;
revisionName?: string;
domain: string;
}
return getCodeHostInfoForRepo({
export const CodePreviewPanel = async ({ path, repoName, revisionName, domain }: CodePreviewPanelProps) => {
const [fileSourceResponse, repoInfoResponse] = await Promise.all([
getFileSource({
fileName: path,
repository: repoName,
branch: revisionName,
}, domain),
getRepoInfoByName(repoName, domain),
]);
if (isServiceError(fileSourceResponse) || isServiceError(repoInfoResponse)) {
return <div>Error loading file source</div>
}
const codeHostInfo = getCodeHostInfoForRepo({
codeHostType: repoInfoResponse.codeHostType,
name: repoInfoResponse.name,
displayName: repoInfoResponse.displayName,
webUrl: repoInfoResponse.webUrl,
});
}, [repoInfoResponse]);
if (isFileSourcePending || isRepoInfoPending) {
return (
<div className="flex flex-col w-full min-h-full items-center justify-center">
<Loader2 className="w-4 h-4 animate-spin" />
Loading...
</div>
)
}
if (isFileSourceError || isRepoInfoError) {
return <div>Error loading file source</div>
}
return (
<>

46
packages/web/src/app/[domain]/browse/[...path]/components/pureTreePreviewPanel.tsx Normal file
View file

@ -0,0 +1,46 @@
'use client';
import { useCallback, useRef } from "react";
import { FileTreeItem } from "@/features/fileTree/actions";
import { FileTreeItemComponent } from "@/features/fileTree/components/fileTreeItemComponent";
import { useBrowseNavigation } from "../../hooks/useBrowseNavigation";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useBrowseParams } from "../../hooks/useBrowseParams";
interface PureTreePreviewPanelProps {
items: FileTreeItem[];
}
export const PureTreePreviewPanel = ({ items }: PureTreePreviewPanelProps) => {
const { repoName, revisionName } = useBrowseParams();
const { navigateToPath } = useBrowseNavigation();
const scrollAreaRef = useRef<HTMLDivElement>(null);
const onNodeClicked = useCallback((node: FileTreeItem) => {
navigateToPath({
repoName: repoName,
revisionName: revisionName,
path: node.path,
pathType: node.type === 'tree' ? 'tree' : 'blob',
});
}, [navigateToPath, repoName, revisionName]);
return (
<ScrollArea
className="flex flex-col p-0.5"
ref={scrollAreaRef}
>
{items.map((item) => (
<FileTreeItemComponent
key={item.path}
node={item}
isActive={false}
depth={0}
isCollapseChevronVisible={false}
onClick={() => onNodeClicked(item)}
parentRef={scrollAreaRef}
/>
))}
</ScrollArea>
)
}

92
packages/web/src/app/[domain]/browse/[...path]/components/treePreviewPanel.tsx
View file

@ -1,74 +1,30 @@
'use client';
import { Loader2 } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { getRepoInfoByName } from "@/actions";
import { PathHeader } from "@/app/[domain]/components/pathHeader";
import { useCallback, useRef } from "react";
import { FileTreeItem, getFolderContents } from "@/features/fileTree/actions";
import { FileTreeItemComponent } from "@/features/fileTree/components/fileTreeItemComponent";
import { useBrowseNavigation } from "../../hooks/useBrowseNavigation";
import { ScrollArea } from "@/components/ui/scroll-area";
import { unwrapServiceError } from "@/lib/utils";
import { useBrowseParams } from "../../hooks/useBrowseParams";
import { useDomain } from "@/hooks/useDomain";
import { useQuery } from "@tanstack/react-query";
import { usePrefetchFileSource } from "@/hooks/usePrefetchFileSource";
import { usePrefetchFolderContents } from "@/hooks/usePrefetchFolderContents";
import { getFolderContents } from "@/features/fileTree/actions";
import { isServiceError } from "@/lib/utils";
import { PureTreePreviewPanel } from "./pureTreePreviewPanel";
export const TreePreviewPanel = () => {
const { path } = useBrowseParams();
const { repoName, revisionName } = useBrowseParams();
const domain = useDomain();
const { navigateToPath } = useBrowseNavigation();
const { prefetchFileSource } = usePrefetchFileSource();
const { prefetchFolderContents } = usePrefetchFolderContents();
const scrollAreaRef = useRef<HTMLDivElement>(null);
interface TreePreviewPanelProps {
path: string;
repoName: string;
revisionName?: string;
domain: string;
}
const { data: repoInfoResponse, isPending: isRepoInfoPending, isError: isRepoInfoError } = useQuery({
queryKey: ['repoInfo', repoName, domain],
queryFn: () => unwrapServiceError(getRepoInfoByName(repoName, domain)),
});
const { data, isPending: isFolderContentsPending, isError: isFolderContentsError } = useQuery({
queryKey: ['tree', repoName, revisionName, path, domain],
queryFn: () => unwrapServiceError(
export const TreePreviewPanel = async ({ path, repoName, revisionName, domain }: TreePreviewPanelProps) => {
const [repoInfoResponse, folderContentsResponse] = await Promise.all([
getRepoInfoByName(repoName, domain),
getFolderContents({
repoName,
revisionName: revisionName ?? 'HEAD',
path,
}, domain)
),
});
]);
const onNodeClicked = useCallback((node: FileTreeItem) => {
navigateToPath({
repoName: repoName,
revisionName: revisionName,
path: node.path,
pathType: node.type === 'tree' ? 'tree' : 'blob',
});
}, [navigateToPath, repoName, revisionName]);
const onNodeMouseEnter = useCallback((node: FileTreeItem) => {
if (node.type === 'blob') {
prefetchFileSource(repoName, revisionName ?? 'HEAD', node.path);
} else if (node.type === 'tree') {
prefetchFolderContents(repoName, revisionName ?? 'HEAD', node.path);
}
}, [prefetchFileSource, prefetchFolderContents, repoName, revisionName]);
if (isFolderContentsPending || isRepoInfoPending) {
return (
<div className="flex flex-col w-full min-h-full items-center justify-center">
<Loader2 className="w-4 h-4 animate-spin" />
Loading...
</div>
)
}
if (isFolderContentsError || isRepoInfoError) {
return <div>Error loading tree</div>
if (isServiceError(folderContentsResponse) || isServiceError(repoInfoResponse)) {
return <div>Error loading tree preview</div>
}
return (
@ -86,23 +42,7 @@ export const TreePreviewPanel = () => {
/>
</div>
<Separator />
<ScrollArea
className="flex flex-col p-0.5"
ref={scrollAreaRef}
>
{data.map((item) => (
<FileTreeItemComponent
key={item.path}
node={item}
isActive={false}
depth={0}
isCollapseChevronVisible={false}
onClick={() => onNodeClicked(item)}
onMouseEnter={() => onNodeMouseEnter(item)}
parentRef={scrollAreaRef}
/>
))}
</ScrollArea>
<PureTreePreviewPanel items={folderContentsResponse} />
</>
)
}

41
packages/web/src/app/[domain]/browse/[...path]/page.tsx
View file

@ -1,19 +1,44 @@
'use client';
import { useBrowseParams } from "@/app/[domain]/browse/hooks/useBrowseParams";
import { Suspense } from "react";
import { getBrowseParamsFromPathParam } from "../hooks/utils";
import { CodePreviewPanel } from "./components/codePreviewPanel";
import { Loader2 } from "lucide-react";
import { TreePreviewPanel } from "./components/treePreviewPanel";
export default function BrowsePage() {
const { pathType } = useBrowseParams();
interface BrowsePageProps {
params: {
path: string[];
domain: string;
};
}
export default async function BrowsePage({ params: { path: _rawPath, domain } }: BrowsePageProps) {
const rawPath = decodeURIComponent(_rawPath.join('/'));
const { repoName, revisionName, path, pathType } = getBrowseParamsFromPathParam(rawPath);
return (
<div className="flex flex-col h-full">
<Suspense fallback={
<div className="flex flex-col w-full min-h-full items-center justify-center">
<Loader2 className="w-4 h-4 animate-spin" />
Loading...
</div>
}>
{pathType === 'blob' ? (
<CodePreviewPanel />
<CodePreviewPanel
path={path}
repoName={repoName}
revisionName={revisionName}
domain={domain}
/>
) : (
<TreePreviewPanel />
<TreePreviewPanel
path={path}
repoName={repoName}
revisionName={revisionName}
domain={domain}
/>
)}
</Suspense>
</div>
)
}

15
packages/web/src/app/[domain]/browse/components/fileSearchCommandDialog.tsx
View file

@ -10,7 +10,6 @@ import { useDomain } from "@/hooks/useDomain";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { useBrowseNavigation } from "../hooks/useBrowseNavigation";
import { useBrowseState } from "../hooks/useBrowseState";
import { usePrefetchFileSource } from "@/hooks/usePrefetchFileSource";
import { useBrowseParams } from "../hooks/useBrowseParams";
import { FileTreeItemIcon } from "@/features/fileTree/components/fileTreeItemIcon";
import { useLocalStorage } from "usehooks-ts";
@ -36,7 +35,6 @@ export const FileSearchCommandDialog = () => {
const inputRef = useRef<HTMLInputElement>(null);
const [searchQuery, setSearchQuery] = useState('');
const { navigateToPath } = useBrowseNavigation();
const { prefetchFileSource } = usePrefetchFileSource();
const [recentlyOpened, setRecentlyOpened] = useLocalStorage<FileTreeItem[]>(`recentlyOpenedFiles-${repoName}`, []);
@ -122,14 +120,6 @@ export const FileSearchCommandDialog = () => {
});
}, [navigateToPath, repoName, revisionName, setRecentlyOpened, updateBrowseState]);
const onMouseEnter = useCallback((file: FileTreeItem) => {
prefetchFileSource(
repoName,
revisionName ?? 'HEAD',
file.path
);
}, [prefetchFileSource, repoName, revisionName]);
// @note: We were hitting issues when the user types into the input field while the files are still
// loading. The workaround was to set `disabled` when loading and then focus the input field when
// the files are loaded, hence the `useEffect` below.
@ -181,7 +171,6 @@ export const FileSearchCommandDialog = () => {
key={file.path}
file={file}
onSelect={() => onSelect(file)}
onMouseEnter={() => onMouseEnter(file)}
/>
);
})}
@ -196,7 +185,6 @@ export const FileSearchCommandDialog = () => {
file={file}
match={match}
onSelect={() => onSelect(file)}
onMouseEnter={() => onMouseEnter(file)}
/>
);
})}
@ -223,20 +211,17 @@ interface SearchResultComponentProps {
to: number;
};
onSelect: () => void;
onMouseEnter: () => void;
}
const SearchResultComponent = ({
file,
match,
onSelect,
onMouseEnter,
}: SearchResultComponentProps) => {
return (
<CommandItem
key={file.path}
onSelect={onSelect}
onMouseEnter={onMouseEnter}
>
<div className="flex flex-row gap-2 w-full cursor-pointer relative">
<FileTreeItemIcon item={file} className="mt-1" />

40
packages/web/src/app/[domain]/browse/hooks/useBrowseParams.ts
View file

@ -1,48 +1,18 @@
'use client';
import { usePathname } from "next/navigation";
import { useMemo } from "react";
import { getBrowseParamsFromPathParam } from "./utils";
export const useBrowseParams = () => {
const pathname = usePathname();
return useMemo(() => {
const startIndex = pathname.indexOf('/browse/');
if (startIndex === -1) {
throw new Error(`Invalid browse pathname: "${pathname}" - expected to contain "/browse/"`);
}
const rawPath = pathname.substring(startIndex + '/browse/'.length);
const sentinalIndex = rawPath.search(/\/-\/(tree|blob)\//);
if (sentinalIndex === -1) {
throw new Error(`Invalid browse pathname: "${pathname}" - expected to contain "/-/(tree|blob)/" pattern`);
return getBrowseParamsFromPathParam(rawPath);
}, [pathname]);
}
const repoAndRevisionName = rawPath.substring(0, sentinalIndex).split('@');
const repoName = repoAndRevisionName[0];
const revisionName = repoAndRevisionName.length > 1 ? repoAndRevisionName[1] : undefined;
const { path, pathType } = ((): { path: string, pathType: 'tree' | 'blob' } => {
const path = rawPath.substring(sentinalIndex + '/-/'.length);
const pathType = path.startsWith('tree/') ? 'tree' : 'blob';
// @note: decodedURIComponent is needed here incase the path contains a space.
switch (pathType) {
case 'tree':
return {
path: decodeURIComponent(path.substring('tree/'.length)),
pathType,
};
case 'blob':
return {
path: decodeURIComponent(path.substring('blob/'.length)),
pathType,
};
}
})();
return {
repoName,
revisionName,
path,
pathType,
}
}

194
packages/web/src/app/[domain]/browse/hooks/utils.test.ts Normal file
View file

@ -0,0 +1,194 @@
import { describe, it, expect } from 'vitest';
import { getBrowseParamsFromPathParam } from './utils';
describe('getBrowseParamsFromPathParam', () => {
describe('tree paths', () => {
it('should parse tree path with trailing slash', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/tree/');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: '',
pathType: 'tree',
});
});
it('should parse tree path without trailing slash', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/tree');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: '',
pathType: 'tree',
});
});
it('should parse tree path with nested directory', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/tree/packages/web/src');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: 'packages/web/src',
pathType: 'tree',
});
});
it('should parse tree path without revision', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt/-/tree/docs');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: undefined,
path: 'docs',
pathType: 'tree',
});
});
});
describe('blob paths', () => {
it('should parse blob path with file', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/blob/README.md');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: 'README.md',
pathType: 'blob',
});
});
it('should parse blob path with nested file', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/blob/packages/web/src/app/page.tsx');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: 'packages/web/src/app/page.tsx',
pathType: 'blob',
});
});
it('should parse blob path without revision', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt/-/blob/main.go');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: undefined,
path: 'main.go',
pathType: 'blob',
});
});
});
describe('URL decoding', () => {
it('should decode URL-encoded spaces in path', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/tree/folder%20with%20spaces');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: 'folder with spaces',
pathType: 'tree',
});
});
it('should decode URL-encoded special characters in path', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/blob/file%20with%20%26%20symbols.txt');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: 'file with & symbols.txt',
pathType: 'blob',
});
});
});
describe('different revision formats', () => {
it('should parse with branch name', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@main/-/tree/');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'main',
path: '',
pathType: 'tree',
});
});
it('should parse with commit hash', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@a1b2c3d/-/tree/');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'a1b2c3d',
path: '',
pathType: 'tree',
});
});
it('should parse with tag', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@v1.0.0/-/tree/');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'v1.0.0',
path: '',
pathType: 'tree',
});
});
});
describe('edge cases', () => {
it('should handle repo name with multiple @ symbols', () => {
const result = getBrowseParamsFromPathParam('gitlab.com/user@domain/repo@main/-/tree/');
expect(result).toEqual({
repoName: 'gitlab.com/user@domain/repo',
revisionName: 'main',
path: '',
pathType: 'tree',
});
});
it('should handle paths with @ symbols', () => {
const result = getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/blob/file@v1.0.0.txt');
expect(result).toEqual({
repoName: 'github.com/sourcebot-dev/zoekt',
revisionName: 'HEAD',
path: 'file@v1.0.0.txt',
pathType: 'blob',
});
});
});
describe('error cases', () => {
it('should throw error for blob path with trailing slash and no path', () => {
expect(() => {
getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/blob/');
}).toThrow();
});
it('should throw error for blob path without trailing slash and no path', () => {
expect(() => {
getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/blob');
}).toThrow();
});
it('should throw error for invalid pattern - missing /-/', () => {
expect(() => {
getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/tree/');
}).toThrow();
});
it('should throw error for invalid pattern - missing tree/blob', () => {
expect(() => {
getBrowseParamsFromPathParam('github.com/sourcebot-dev/zoekt@HEAD/-/invalid/');
}).toThrow();
});
it('should throw error for completely invalid format', () => {
expect(() => {
getBrowseParamsFromPathParam('invalid-path');
}).toThrow();
});
it('should throw error for empty string', () => {
expect(() => {
getBrowseParamsFromPathParam('');
}).toThrow();
});
});
});

43
packages/web/src/app/[domain]/browse/hooks/utils.ts Normal file
View file

@ -0,0 +1,43 @@
export const getBrowseParamsFromPathParam = (pathParam: string) => {
const sentinalIndex = pathParam.search(/\/-\/(tree|blob)/);
if (sentinalIndex === -1) {
throw new Error(`Invalid browse pathname: "${pathParam}" - expected to contain "/-/(tree|blob)/" pattern`);
}
const repoAndRevisionPart = pathParam.substring(0, sentinalIndex);
const lastAtIndex = repoAndRevisionPart.lastIndexOf('@');
const repoName = lastAtIndex === -1 ? repoAndRevisionPart : repoAndRevisionPart.substring(0, lastAtIndex);
const revisionName = lastAtIndex === -1 ? undefined : repoAndRevisionPart.substring(lastAtIndex + 1);
const { path, pathType } = ((): { path: string, pathType: 'tree' | 'blob' } => {
const path = pathParam.substring(sentinalIndex + '/-/'.length);
const pathType = path.startsWith('tree') ? 'tree' : 'blob';
// @note: decodedURIComponent is needed here incase the path contains a space.
switch (pathType) {
case 'tree':
return {
path: decodeURIComponent(path.startsWith('tree/') ? path.substring('tree/'.length) : path.substring('tree'.length)),
pathType,
};
case 'blob':
return {
path: decodeURIComponent(path.startsWith('blob/') ? path.substring('blob/'.length) : path.substring('blob'.length)),
pathType,
};
}
})();
if (pathType === 'blob' && path === '') {
throw new Error(`Invalid browse pathname: "${pathParam}" - expected to contain a path for blob type`);
}
return {
repoName,
revisionName,
path,
pathType,
}
}

19
packages/web/src/app/[domain]/components/pathHeader.tsx
View file

@ -8,8 +8,6 @@ import { useBrowseNavigation } from "../browse/hooks/useBrowseNavigation";
import { Copy, CheckCircle2, ChevronRight, MoreHorizontal } from "lucide-react";
import { useCallback, useState, useMemo, useRef, useEffect } from "react";
import { useToast } from "@/components/hooks/use-toast";
import { usePrefetchFolderContents } from "@/hooks/usePrefetchFolderContents";
import { usePrefetchFileSource } from "@/hooks/usePrefetchFileSource";
import {
DropdownMenu,
DropdownMenuContent,
@ -62,8 +60,6 @@ export const PathHeader = ({
const { navigateToPath } = useBrowseNavigation();
const { toast } = useToast();
const [copied, setCopied] = useState(false);
const { prefetchFolderContents } = usePrefetchFolderContents();
const { prefetchFileSource } = usePrefetchFileSource();
const containerRef = useRef<HTMLDivElement>(null);
const breadcrumbsRef = useRef<HTMLDivElement>(null);
@ -188,19 +184,6 @@ export const PathHeader = ({
});
}, [repo.name, branchDisplayName, navigateToPath, pathType]);
const onBreadcrumbMouseEnter = useCallback((segment: BreadcrumbSegment) => {
if (segment.isLastSegment && pathType === 'blob') {
prefetchFileSource(repo.name, branchDisplayName ?? 'HEAD', segment.fullPath);
} else {
prefetchFolderContents(repo.name, branchDisplayName ?? 'HEAD', segment.fullPath);
}
}, [
repo.name,
branchDisplayName,
prefetchFolderContents,
pathType,
prefetchFileSource,
]);
const renderSegmentWithHighlight = (segment: BreadcrumbSegment) => {
if (!segment.highlightRange) {
@ -274,7 +257,6 @@ export const PathHeader = ({
<DropdownMenuItem
key={segment.fullPath}
onClick={() => onBreadcrumbClick(segment)}
onMouseEnter={() => onBreadcrumbMouseEnter(segment)}
className="font-mono text-sm cursor-pointer"
>
{renderSegmentWithHighlight(segment)}
@ -292,7 +274,6 @@ export const PathHeader = ({
"font-mono text-sm truncate cursor-pointer hover:underline",
)}
onClick={() => onBreadcrumbClick(segment)}
onMouseEnter={() => onBreadcrumbMouseEnter(segment)}
>
{renderSegmentWithHighlight(segment)}
</span>

12
packages/web/src/ee/features/codeNav/components/exploreMenu/referenceList.tsx
View file

@ -8,7 +8,6 @@ import { RepositoryInfo, SourceRange } from "@/features/search/types";
import { useMemo, useRef } from "react";
import useCaptureEvent from "@/hooks/useCaptureEvent";
import { useVirtualizer } from "@tanstack/react-virtual";
import { usePrefetchFileSource } from "@/hooks/usePrefetchFileSource";
interface ReferenceListProps {
data: FindRelatedSymbolsResponse;
@ -31,7 +30,6 @@ export const ReferenceList = ({
const { navigateToPath } = useBrowseNavigation();
const captureEvent = useCaptureEvent();
const { prefetchFileSource } = usePrefetchFileSource();
// Virtualization setup
const parentRef = useRef<HTMLDivElement>(null);
@ -120,13 +118,6 @@ export const ReferenceList = ({
highlightRange: match.range,
})
}}
// @note: We prefetch the file source when the user hovers over a file.
// This is to try and mitigate having a loading spinner appear when
// the user clicks on a file to open it.
// @see: /browse/[...path]/page.tsx
onMouseEnter={() => {
prefetchFileSource(file.repository, revisionName, file.fileName);
}}
/>
))}
</div>
@ -144,7 +135,6 @@ interface ReferenceListItemProps {
range: SourceRange;
language: string;
onClick: () => void;
onMouseEnter: () => void;
}
const ReferenceListItem = ({
@ -152,7 +142,6 @@ const ReferenceListItem = ({
range,
language,
onClick,
onMouseEnter,
}: ReferenceListItemProps) => {
const highlightRanges = useMemo(() => [range], [range]);
@ -160,7 +149,6 @@ const ReferenceListItem = ({
<div
className="w-full hover:bg-accent py-1 cursor-pointer"
onClick={onClick}
onMouseEnter={onMouseEnter}
>
<LightweightCodeHighlighter
language={language}

3
packages/web/src/features/fileTree/components/fileTreeItemComponent.tsx
View file

@ -14,7 +14,6 @@ export const FileTreeItemComponent = ({
isCollapsed = false,
isCollapseChevronVisible = true,
onClick,
onMouseEnter,
parentRef,
}: {
node: FileTreeItem,
@ -23,7 +22,6 @@ export const FileTreeItemComponent = ({
isCollapsed?: boolean,
isCollapseChevronVisible?: boolean,
onClick: () => void,
onMouseEnter: () => void,
parentRef: React.RefObject<HTMLDivElement>,
}) => {
const ref = useRef<HTMLDivElement>(null);
@ -67,7 +65,6 @@ export const FileTreeItemComponent = ({
}
}}
onClick={onClick}
onMouseEnter={onMouseEnter}
>
<div
className="flex flex-row gap-1 cursor-pointer w-4 h-4 flex-shrink-0"

17
packages/web/src/features/fileTree/components/pureFileTreePanel.tsx
View file

@ -6,7 +6,6 @@ import React, { useCallback, useMemo, useState, useEffect, useRef } from "react"
import { FileTreeItemComponent } from "./fileTreeItemComponent";
import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
import { useBrowseParams } from "@/app/[domain]/browse/hooks/useBrowseParams";
import { usePrefetchFileSource } from "@/hooks/usePrefetchFileSource";
export type FileTreeNode = Omit<RawFileTreeNode, 'children'> & {
@ -44,7 +43,6 @@ export const PureFileTreePanel = ({ tree: _tree, path }: PureFileTreePanelProps)
const scrollAreaRef = useRef<HTMLDivElement>(null);
const { navigateToPath } = useBrowseNavigation();
const { repoName, revisionName } = useBrowseParams();
const { prefetchFileSource } = usePrefetchFileSource();
// @note: When `_tree` changes, it indicates that a new tree has been loaded.
// In that case, we need to rebuild the collapsable tree.
@ -89,18 +87,6 @@ export const PureFileTreePanel = ({ tree: _tree, path }: PureFileTreePanelProps)
}
}, [setIsCollapsed, navigateToPath, repoName, revisionName]);
// @note: We prefetch the file source when the user hovers over a file.
// This is to try and mitigate having a loading spinner appear when
// the user clicks on a file to open it.
// @see: /browse/[...path]/page.tsx
const onNodeMouseEnter = useCallback((node: FileTreeNode) => {
if (node.type !== 'blob') {
return;
}
prefetchFileSource(repoName, revisionName ?? 'HEAD', node.path);
}, [prefetchFileSource, repoName, revisionName]);
const renderTree = useCallback((nodes: FileTreeNode, depth = 0): React.ReactNode => {
return (
<>
@ -115,7 +101,6 @@ export const PureFileTreePanel = ({ tree: _tree, path }: PureFileTreePanelProps)
isCollapsed={node.isCollapsed}
isCollapseChevronVisible={node.type === 'tree'}
onClick={() => onNodeClicked(node)}
onMouseEnter={() => onNodeMouseEnter(node)}
parentRef={scrollAreaRef}
/>
{node.children.length > 0 && !node.isCollapsed && renderTree(node, depth + 1)}
@ -124,7 +109,7 @@ export const PureFileTreePanel = ({ tree: _tree, path }: PureFileTreePanelProps)
})}
</>
);
}, [path, onNodeClicked, onNodeMouseEnter]);
}, [path, onNodeClicked]);
const renderedTree = useMemo(() => renderTree(tree), [tree, renderTree]);

34
packages/web/src/hooks/usePrefetchFileSource.ts
View file

@ -1,34 +0,0 @@
'use client';
import { useQueryClient } from "@tanstack/react-query";
import { useDomain } from "./useDomain";
import { unwrapServiceError } from "@/lib/utils";
import { getFileSource } from "@/features/search/fileSourceApi";
import { useDebounceCallback } from "usehooks-ts";
interface UsePrefetchFileSourceProps {
debounceDelay?: number;
staleTime?: number;
}
export const usePrefetchFileSource = ({
debounceDelay = 200,
staleTime = 5 * 60 * 1000, // 5 minutes
}: UsePrefetchFileSourceProps = {}) => {
const queryClient = useQueryClient();
const domain = useDomain();
const prefetchFileSource = useDebounceCallback((repoName: string, revisionName: string, path: string) => {
queryClient.prefetchQuery({
queryKey: ['fileSource', repoName, revisionName, path, domain],
queryFn: () => unwrapServiceError(getFileSource({
fileName: path,
repository: repoName,
branch: revisionName,
}, domain)),
staleTime,
});
}, debounceDelay);
return { prefetchFileSource };
}

36
packages/web/src/hooks/usePrefetchFolderContents.ts
View file

@ -1,36 +0,0 @@
'use client';
import { useQueryClient } from "@tanstack/react-query";
import { useDomain } from "./useDomain";
import { unwrapServiceError } from "@/lib/utils";
import { getFolderContents } from "@/features/fileTree/actions";
import { useDebounceCallback } from "usehooks-ts";
interface UsePrefetchFolderContentsProps {
debounceDelay?: number;
staleTime?: number;
}
export const usePrefetchFolderContents = ({
debounceDelay = 200,
staleTime = 5 * 60 * 1000, // 5 minutes
}: UsePrefetchFolderContentsProps = {}) => {
const queryClient = useQueryClient();
const domain = useDomain();
const prefetchFolderContents = useDebounceCallback((repoName: string, revisionName: string, path: string) => {
queryClient.prefetchQuery({
queryKey: ['tree', repoName, revisionName, path, domain],
queryFn: () => unwrapServiceError(
getFolderContents({
repoName,
revisionName,
path,
}, domain)
),
staleTime,
});
}, debounceDelay);
return { prefetchFolderContents };
}