Improve rendering performance of search results (#52)

Author: brendan-kellam

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint"
+    ]
+}

.vscode/settings.json

@@ -2,5 +2,10 @@
     "files.associations": {
         "*.json": "jsonc",
         "index.json": "json"
-    }
+    },
+    "eslint.workingDirectories": [
+        {
+            "pattern": "./packages/*/"
+        }
+    ]
 }

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed issue with GitLab sub-projects not being included recursively. ([#54](https://github.com/sourcebot-dev/sourcebot/pull/54))
+- Fixed slow rendering performance when rendering a large number of results. ([#52](https://github.com/sourcebot-dev/sourcebot/pull/52))
 
 ## [2.1.1] - 2024-10-25
 

packages/web/package.json

@@ -38,6 +38,7 @@
     "@replit/codemirror-vim": "^6.2.1",
     "@tanstack/react-query": "^5.53.3",
     "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.10.8",
     "@uiw/react-codemirror": "^4.23.0",
     "class-variance-authority": "^0.7.0",
     "client-only": "^0.0.1",

packages/web/src/app/search/components/codePreviewPanel/index.tsx

@@ -59,5 +59,4 @@ export const CodePreviewPanel = ({
             onSelectedMatchIndexChange={onSelectedMatchIndexChange}
         />
     )
-
 }

packages/web/src/app/search/components/filterPanel/index.tsx

@@ -93,7 +93,7 @@ export const FilterPanel = ({
         );
 
         onFilterChanged(filteredMatches);
-    }, [matches, repos, languages]);
+    }, [matches, repos, languages, onFilterChanged]);
 
     return (
         <div className="p-3 flex flex-col gap-3">

packages/web/src/app/search/components/searchResultsPanel/codePreview.tsx

@@ -1,12 +1,15 @@
 'use client';
 
-import { useExtensionWithDependency } from "@/hooks/useExtensionWithDependency";
-import { useSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
-import { useThemeNormalized } from "@/hooks/useThemeNormalized";
+import { getSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
 import { lineOffsetExtension } from "@/lib/extensions/lineOffsetExtension";
 import { SearchResultRange } from "@/lib/types";
-import CodeMirror, { Decoration, DecorationSet, EditorState, EditorView, ReactCodeMirrorRef, StateField, Transaction } from "@uiw/react-codemirror";
+import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorState, StateField, Transaction } from "@codemirror/state";
+import { defaultLightThemeOption, oneDarkHighlightStyle, oneDarkTheme } from "@uiw/react-codemirror";
+import { Decoration, DecorationSet, EditorView, lineNumbers } from "@codemirror/view";
 import { useMemo, useRef } from "react";
+import { LightweightCodeMirror, CodeMirrorRef } from "./lightweightCodeMirror";
+import { useThemeNormalized } from "@/hooks/useThemeNormalized";
 
 const markDecoration = Decoration.mark({
     class: "cm-searchMatch-selected"
@@ -25,13 +28,22 @@ export const CodePreview = ({
     ranges,
     lineOffset,
 }: CodePreviewProps) => {
-    const editorRef = useRef<ReactCodeMirrorRef>(null);
+    const editorRef = useRef<CodeMirrorRef>(null);
     const { theme } = useThemeNormalized();
 
-    const syntaxHighlighting = useSyntaxHighlightingExtension(language, editorRef.current?.view);
-
-    const rangeHighlighting = useExtensionWithDependency(editorRef.current?.view ?? null, () => {
+    const extensions = useMemo(() => {
         return [
+            EditorView.editable.of(false),
+            ...(theme === 'dark' ? [
+                syntaxHighlighting(oneDarkHighlightStyle),
+                oneDarkTheme,
+            ] : [
+                syntaxHighlighting(defaultHighlightStyle),
+                defaultLightThemeOption,
+            ]),
+            lineNumbers(),
+            lineOffsetExtension(lineOffset),
+            getSyntaxHighlightingExtension(language),
             StateField.define<DecorationSet>({
                 create(editorState: EditorState) {
                     const document = editorState.doc;
@@ -61,7 +73,8 @@ export const CodePreview = ({
                             const from = document.line(startLine).from + Start.Column - 1;
                             const to = document.line(endLine).from + End.Column - 1;
                             return markDecoration.range(from, to);
-                        });
+                        })
+                        .sort((a, b) => a.from - b.from);
 
                     return Decoration.set(decorations);
                 },
@@ -70,56 +83,15 @@ export const CodePreview = ({
                 },
                 provide: (field) => EditorView.decorations.from(field),
             }),
-        ];
-    }, [ranges, lineOffset]);
-
-    const extensions = useMemo(() => {
-        return [
-            syntaxHighlighting,
-            EditorView.lineWrapping,
-            lineOffsetExtension(lineOffset),
-            rangeHighlighting,
-        ];
-    }, [syntaxHighlighting, lineOffset, rangeHighlighting]);
+        ]
+    }, [language, lineOffset, ranges, theme]);
 
     return (
-        <CodeMirror
+        <LightweightCodeMirror
             ref={editorRef}
-            readOnly={true}
-            editable={false}
             value={content}
-            theme={theme === "dark" ? "dark" : "light"}
-            basicSetup={{
-                lineNumbers: true,
-                syntaxHighlighting: true,
-
-                // Disable all this other stuff...
-                ... {
-                    foldGutter: false,
-                    highlightActiveLineGutter: false,
-                    highlightSpecialChars: false,
-                    history: false,
-                    drawSelection: false,
-                    dropCursor: false,
-                    allowMultipleSelections: false,
-                    indentOnInput: false,
-                    bracketMatching: false,
-                    closeBrackets: false,
-                    autocompletion: false,
-                    rectangularSelection: false,
-                    crosshairCursor: false,
-                    highlightActiveLine: false,
-                    highlightSelectionMatches: false,
-                    closeBracketsKeymap: false,
-                    defaultKeymap: false,
-                    searchKeymap: false,
-                    historyKeymap: false,
-                    foldKeymap: false,
-                    completionKeymap: false,
-                    lintKeymap: false,
-                }
-            }}
             extensions={extensions}
         />
     )
+
 }

packages/web/src/app/search/components/searchResultsPanel/fileMatch.tsx

@@ -29,7 +29,7 @@ export const FileMatch = ({
     return (
         <div
             tabIndex={0}
-            className="cursor-pointer p-1 focus:ring-inset focus:ring-4 bg-white dark:bg-[#282c34]"
+            className="cursor-pointer focus:ring-inset focus:ring-4 bg-white dark:bg-[#282c34]"
             onKeyDown={(e) => {
                 if (e.key !== "Enter") {
                     return;

packages/web/src/app/search/components/searchResultsPanel/fileMatchContainer.tsx

@@ -1,29 +1,32 @@
 'use client';
 
 import { getRepoCodeHostInfo } from "@/lib/utils";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import Image from "next/image";
 import { DoubleArrowDownIcon, DoubleArrowUpIcon, FileIcon } from "@radix-ui/react-icons";
 import clsx from "clsx";
 import { Separator } from "@/components/ui/separator";
 import { SearchResultFile } from "@/lib/types";
 import { FileMatch } from "./fileMatch";
 
-const MAX_MATCHES_TO_PREVIEW = 3;
+export const MAX_MATCHES_TO_PREVIEW = 3;
 
 interface FileMatchContainerProps {
     file: SearchResultFile;
     onOpenFile: () => void;
     onMatchIndexChanged: (matchIndex: number) => void;
+    showAllMatches: boolean;
+    onShowAllMatchesButtonClicked: () => void;
 }
 
 export const FileMatchContainer = ({
     file,
     onOpenFile,
     onMatchIndexChanged,
+    showAllMatches,
+    onShowAllMatchesButtonClicked,
 }: FileMatchContainerProps) => {
 
-    const [showAll, setShowAll] = useState(false);
     const matchCount = useMemo(() => {
         return file.ChunkMatches.length;
     }, [file]);
@@ -33,12 +36,12 @@ export const FileMatchContainer = ({
             return a.ContentStart.LineNumber - b.ContentStart.LineNumber;
         });
 
-        if (!showAll) {
+        if (!showAllMatches) {
             return sortedMatches.slice(0, MAX_MATCHES_TO_PREVIEW);
         }
 
         return sortedMatches;
-    }, [file, showAll]);
+    }, [file, showAllMatches]);
 
     const fileNameRange = useMemo(() => {
         for (const match of matches) {
@@ -79,10 +82,6 @@ export const FileMatchContainer = ({
         return matchCount > MAX_MATCHES_TO_PREVIEW;
     }, [matchCount]);
 
-    const onShowMoreMatches = useCallback(() => {
-        setShowAll(!showAll);
-    }, [showAll]);
-
     const onOpenMatch = useCallback((index: number) => {
         const matchIndex = matches.slice(0, index).reduce((acc, match) => {
             return acc + match.Ranges.length;
@@ -94,8 +93,9 @@ export const FileMatchContainer = ({
 
     return (
         <div>
+            {/* Title */}
             <div
-                className="sticky top-0 bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between cursor-pointer z-10"
+                className="top-0 bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between cursor-pointer"
                 onClick={() => {
                     onOpenFile();
                 }}
@@ -132,6 +132,8 @@ export const FileMatchContainer = ({
                     </div>
                 </div>
             </div>
+
+            {/* Matches */}
             {matches.map((match, index) => (
                 <div
                     key={index}
@@ -148,6 +150,8 @@ export const FileMatchContainer = ({
                     )}
                 </div>
             ))}
+
+            {/* Show more button */}
             {isMoreContentButtonVisible && (
                 <div
                     tabIndex={0}
@@ -156,15 +160,15 @@ export const FileMatchContainer = ({
                         if (e.key !== "Enter") {
                             return;
                         }
-                        onShowMoreMatches();
+                        onShowAllMatchesButtonClicked();
                     }}
-                    onClick={onShowMoreMatches}
+                    onClick={onShowAllMatchesButtonClicked}
                 >
                     <p
                         className="text-blue-500 cursor-pointer text-sm flex flex-row items-center gap-2"
                     >
-                        {showAll ? <DoubleArrowUpIcon className="w-3 h-3" /> : <DoubleArrowDownIcon className="w-3 h-3" />}
-                        {showAll ? `Show fewer matches` : `Show ${matchCount - MAX_MATCHES_TO_PREVIEW} more matches`}
+                        {showAllMatches ? <DoubleArrowUpIcon className="w-3 h-3" /> : <DoubleArrowDownIcon className="w-3 h-3" />}
+                        {showAllMatches ? `Show fewer matches` : `Show ${matchCount - MAX_MATCHES_TO_PREVIEW} more matches`}
                     </p>
                 </div>
             )}