referenceList

This commit is contained in:
bkellam 2025-09-21 12:41:28 -07:00
parent 609e46f8b2
commit 8ae43fd772

View file

@ -1,6 +1,6 @@
'use client'; 'use client';
import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation"; import { getBrowsePath } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
import { PathHeader } from "@/app/[domain]/components/pathHeader"; import { PathHeader } from "@/app/[domain]/components/pathHeader";
import { LightweightCodeHighlighter } from "@/app/[domain]/components/lightweightCodeHighlighter"; import { LightweightCodeHighlighter } from "@/app/[domain]/components/lightweightCodeHighlighter";
import { FindRelatedSymbolsResponse } from "@/features/codeNav/types"; import { FindRelatedSymbolsResponse } from "@/features/codeNav/types";
@ -8,6 +8,8 @@ import { RepositoryInfo, SourceRange } from "@/features/search/types";
import { useMemo, useRef } from "react"; import { useMemo, useRef } from "react";
import useCaptureEvent from "@/hooks/useCaptureEvent"; import useCaptureEvent from "@/hooks/useCaptureEvent";
import { useVirtualizer } from "@tanstack/react-virtual"; import { useVirtualizer } from "@tanstack/react-virtual";
import Link from "next/link";
import { useDomain } from "@/hooks/useDomain";
interface ReferenceListProps { interface ReferenceListProps {
data: FindRelatedSymbolsResponse; data: FindRelatedSymbolsResponse;
@ -21,6 +23,7 @@ export const ReferenceList = ({
data, data,
revisionName, revisionName,
}: ReferenceListProps) => { }: ReferenceListProps) => {
const domain = useDomain();
const repoInfoMap = useMemo(() => { const repoInfoMap = useMemo(() => {
return data.repositoryInfo.reduce((acc, repo) => { return data.repositoryInfo.reduce((acc, repo) => {
acc[repo.id] = repo; acc[repo.id] = repo;
@ -28,7 +31,6 @@ export const ReferenceList = ({
}, {} as Record<number, RepositoryInfo>); }, {} as Record<number, RepositoryInfo>);
}, [data.repositoryInfo]); }, [data.repositoryInfo]);
const { navigateToPath } = useBrowseNavigation();
const captureEvent = useCaptureEvent(); const captureEvent = useCaptureEvent();
// Virtualization setup // Virtualization setup
@ -38,7 +40,7 @@ export const ReferenceList = ({
getScrollElement: () => parentRef.current, getScrollElement: () => parentRef.current,
estimateSize: (index) => { estimateSize: (index) => {
const file = data.files[index]; const file = data.files[index];
const estimatedSize = const estimatedSize =
file.matches.length * ESTIMATED_LINE_HEIGHT_PX + file.matches.length * ESTIMATED_LINE_HEIGHT_PX +
ESTIMATED_MATCH_CONTAINER_HEIGHT_PX; ESTIMATED_MATCH_CONTAINER_HEIGHT_PX;
@ -103,22 +105,26 @@ export const ReferenceList = ({
{file.matches {file.matches
.sort((a, b) => a.range.start.lineNumber - b.range.start.lineNumber) .sort((a, b) => a.range.start.lineNumber - b.range.start.lineNumber)
.map((match, index) => ( .map((match, index) => (
<ReferenceListItem <Link
key={index} href={getBrowsePath({
lineContent={match.lineContent} repoName: file.repository,
range={match.range} revisionName,
language={file.language} path: file.fileName,
pathType: 'blob',
highlightRange: match.range,
domain,
})}
onClick={() => { onClick={() => {
captureEvent('wa_explore_menu_reference_clicked', {}); captureEvent('wa_explore_menu_reference_clicked', {});
navigateToPath({
repoName: file.repository,
revisionName,
path: file.fileName,
pathType: 'blob',
highlightRange: match.range,
})
}} }}
/> >
<ReferenceListItem
key={index}
lineContent={match.lineContent}
range={match.range}
language={file.language}
/>
</Link>
))} ))}
</div> </div>
</div> </div>
@ -134,21 +140,18 @@ interface ReferenceListItemProps {
lineContent: string; lineContent: string;
range: SourceRange; range: SourceRange;
language: string; language: string;
onClick: () => void;
} }
const ReferenceListItem = ({ const ReferenceListItem = ({
lineContent, lineContent,
range, range,
language, language,
onClick,
}: ReferenceListItemProps) => { }: ReferenceListItemProps) => {
const highlightRanges = useMemo(() => [range], [range]); const highlightRanges = useMemo(() => [range], [range]);
return ( return (
<div <div
className="w-full hover:bg-accent py-1 cursor-pointer" className="w-full hover:bg-accent py-1 cursor-pointer"
onClick={onClick}
> >
<LightweightCodeHighlighter <LightweightCodeHighlighter
language={language} language={language}