From f4c7354037cf62a4b8effe97208a53794e6fa17f Mon Sep 17 00:00:00 2001 From: Brendan Kellam Date: Mon, 28 Oct 2024 10:30:29 -0700 Subject: [PATCH] Filtering panel (#48) --- CHANGELOG.md | 4 + packages/web/package.json | 1 + .../public/languages/file_type_assembly.svg | 1 + .../web/public/languages/file_type_c3.svg | 1 + .../web/public/languages/file_type_cpp3.svg | 1 + .../public/languages/file_type_csharp2.svg | 1 + .../web/public/languages/file_type_css.svg | 1 + .../public/languages/file_type_dartlang.svg | 1 + .../web/public/languages/file_type_go.svg | 1 + .../public/languages/file_type_haskell.svg | 1 + .../web/public/languages/file_type_html.svg | 1 + .../web/public/languages/file_type_java.svg | 1 + .../languages/file_type_js_official.svg | 1 + .../web/public/languages/file_type_json.svg | 1 + .../web/public/languages/file_type_julia.svg | 1 + .../web/public/languages/file_type_kotlin.svg | 1 + .../web/public/languages/file_type_lua.svg | 1 + .../public/languages/file_type_markdown.svg | 1 + .../web/public/languages/file_type_matlab.svg | 1 + .../public/languages/file_type_objectivec.svg | 1 + .../web/public/languages/file_type_ocaml.svg | 1 + .../web/public/languages/file_type_perl.svg | 1 + .../web/public/languages/file_type_php3.svg | 1 + .../public/languages/file_type_powershell.svg | 1 + .../web/public/languages/file_type_python.svg | 1 + packages/web/public/languages/file_type_r.svg | 1 + .../web/public/languages/file_type_ruby.svg | 1 + .../web/public/languages/file_type_rust.svg | 1 + .../web/public/languages/file_type_shell.svg | 1 + .../web/public/languages/file_type_swift.svg | 1 + .../web/public/languages/file_type_tex.svg | 1 + .../web/public/languages/file_type_text.svg | 1 + .../file_type_typescript_official.svg | 1 + .../web/public/languages/file_type_yaml.svg | 1 + .../web/public/languages/file_type_zig.svg | 1 + packages/web/src/app/globals.css | 8 + packages/web/src/app/repositoryCarousel.tsx | 2 +- .../codePreviewPanel/codePreview.tsx | 23 +- .../search/components/filterPanel/entry.tsx | 67 ++++++ .../search/components/filterPanel/filter.tsx | 66 +++++ .../search/components/filterPanel/index.tsx | 147 ++++++++++++ .../components/filterPanel/languageIcons.ts | 110 +++++++++ .../searchResultsPanel/fileMatchContainer.tsx | 30 ++- packages/web/src/app/search/page.tsx | 225 ++++++++++++------ packages/web/src/lib/utils.ts | 4 +- packages/web/tsconfig.json | 3 +- yarn.lock | 5 + 47 files changed, 626 insertions(+), 102 deletions(-) create mode 100644 packages/web/public/languages/file_type_assembly.svg create mode 100644 packages/web/public/languages/file_type_c3.svg create mode 100644 packages/web/public/languages/file_type_cpp3.svg create mode 100644 packages/web/public/languages/file_type_csharp2.svg create mode 100644 packages/web/public/languages/file_type_css.svg create mode 100644 packages/web/public/languages/file_type_dartlang.svg create mode 100644 packages/web/public/languages/file_type_go.svg create mode 100644 packages/web/public/languages/file_type_haskell.svg create mode 100644 packages/web/public/languages/file_type_html.svg create mode 100644 packages/web/public/languages/file_type_java.svg create mode 100644 packages/web/public/languages/file_type_js_official.svg create mode 100644 packages/web/public/languages/file_type_json.svg create mode 100644 packages/web/public/languages/file_type_julia.svg create mode 100644 packages/web/public/languages/file_type_kotlin.svg create mode 100644 packages/web/public/languages/file_type_lua.svg create mode 100644 packages/web/public/languages/file_type_markdown.svg create mode 100644 packages/web/public/languages/file_type_matlab.svg create mode 100644 packages/web/public/languages/file_type_objectivec.svg create mode 100644 packages/web/public/languages/file_type_ocaml.svg create mode 100644 packages/web/public/languages/file_type_perl.svg create mode 100644 packages/web/public/languages/file_type_php3.svg create mode 100644 packages/web/public/languages/file_type_powershell.svg create mode 100644 packages/web/public/languages/file_type_python.svg create mode 100644 packages/web/public/languages/file_type_r.svg create mode 100644 packages/web/public/languages/file_type_ruby.svg create mode 100644 packages/web/public/languages/file_type_rust.svg create mode 100644 packages/web/public/languages/file_type_shell.svg create mode 100644 packages/web/public/languages/file_type_swift.svg create mode 100644 packages/web/public/languages/file_type_tex.svg create mode 100644 packages/web/public/languages/file_type_text.svg create mode 100644 packages/web/public/languages/file_type_typescript_official.svg create mode 100644 packages/web/public/languages/file_type_yaml.svg create mode 100644 packages/web/public/languages/file_type_zig.svg create mode 100644 packages/web/src/app/search/components/filterPanel/entry.tsx create mode 100644 packages/web/src/app/search/components/filterPanel/filter.tsx create mode 100644 packages/web/src/app/search/components/filterPanel/index.tsx create mode 100644 packages/web/src/app/search/components/filterPanel/languageIcons.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 52970136..0a45d299 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- Added filtering panel for filtering results by repository and by language. ([#48](https://github.com/sourcebot-dev/sourcebot/pull/48)) + ## [2.1.1] - 2024-10-25 ### Fixed diff --git a/packages/web/package.json b/packages/web/package.json index ae7cb054..cc523f8e 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -45,6 +45,7 @@ "embla-carousel-auto-scroll": "^8.3.0", "embla-carousel-react": "^8.3.0", "escape-string-regexp": "^5.0.0", + "fuse.js": "^7.0.0", "http-status-codes": "^2.3.0", "lucide-react": "^0.435.0", "next": "14.2.10", diff --git a/packages/web/public/languages/file_type_assembly.svg b/packages/web/public/languages/file_type_assembly.svg new file mode 100644 index 00000000..4c4584b5 --- /dev/null +++ b/packages/web/public/languages/file_type_assembly.svg @@ -0,0 +1 @@ +file_type_assembly \ No newline at end of file diff --git a/packages/web/public/languages/file_type_c3.svg b/packages/web/public/languages/file_type_c3.svg new file mode 100644 index 00000000..2d8ac394 --- /dev/null +++ b/packages/web/public/languages/file_type_c3.svg @@ -0,0 +1 @@ +file_type_c3 \ No newline at end of file diff --git a/packages/web/public/languages/file_type_cpp3.svg b/packages/web/public/languages/file_type_cpp3.svg new file mode 100644 index 00000000..b999f2ea --- /dev/null +++ b/packages/web/public/languages/file_type_cpp3.svg @@ -0,0 +1 @@ +file_type_cpp3 \ No newline at end of file diff --git a/packages/web/public/languages/file_type_csharp2.svg b/packages/web/public/languages/file_type_csharp2.svg new file mode 100644 index 00000000..882bf4a3 --- /dev/null +++ b/packages/web/public/languages/file_type_csharp2.svg @@ -0,0 +1 @@ +file_type_csharp2 \ No newline at end of file diff --git a/packages/web/public/languages/file_type_css.svg b/packages/web/public/languages/file_type_css.svg new file mode 100644 index 00000000..3d8959a0 --- /dev/null +++ b/packages/web/public/languages/file_type_css.svg @@ -0,0 +1 @@ +file_type_css \ No newline at end of file diff --git a/packages/web/public/languages/file_type_dartlang.svg b/packages/web/public/languages/file_type_dartlang.svg new file mode 100644 index 00000000..0b258097 --- /dev/null +++ b/packages/web/public/languages/file_type_dartlang.svg @@ -0,0 +1 @@ +file_type_dartlang \ No newline at end of file diff --git a/packages/web/public/languages/file_type_go.svg b/packages/web/public/languages/file_type_go.svg new file mode 100644 index 00000000..05a1baa1 --- /dev/null +++ b/packages/web/public/languages/file_type_go.svg @@ -0,0 +1 @@ +file_type_go \ No newline at end of file diff --git a/packages/web/public/languages/file_type_haskell.svg b/packages/web/public/languages/file_type_haskell.svg new file mode 100644 index 00000000..f818dac4 --- /dev/null +++ b/packages/web/public/languages/file_type_haskell.svg @@ -0,0 +1 @@ +file_type_haskell \ No newline at end of file diff --git a/packages/web/public/languages/file_type_html.svg b/packages/web/public/languages/file_type_html.svg new file mode 100644 index 00000000..a0152d86 --- /dev/null +++ b/packages/web/public/languages/file_type_html.svg @@ -0,0 +1 @@ +file_type_html \ No newline at end of file diff --git a/packages/web/public/languages/file_type_java.svg b/packages/web/public/languages/file_type_java.svg new file mode 100644 index 00000000..14121c58 --- /dev/null +++ b/packages/web/public/languages/file_type_java.svg @@ -0,0 +1 @@ +file_type_java \ No newline at end of file diff --git a/packages/web/public/languages/file_type_js_official.svg b/packages/web/public/languages/file_type_js_official.svg new file mode 100644 index 00000000..bcfade41 --- /dev/null +++ b/packages/web/public/languages/file_type_js_official.svg @@ -0,0 +1 @@ +file_type_js_official \ No newline at end of file diff --git a/packages/web/public/languages/file_type_json.svg b/packages/web/public/languages/file_type_json.svg new file mode 100644 index 00000000..26c39ba7 --- /dev/null +++ b/packages/web/public/languages/file_type_json.svg @@ -0,0 +1 @@ +file_type_json \ No newline at end of file diff --git a/packages/web/public/languages/file_type_julia.svg b/packages/web/public/languages/file_type_julia.svg new file mode 100644 index 00000000..49343a27 --- /dev/null +++ b/packages/web/public/languages/file_type_julia.svg @@ -0,0 +1 @@ +file_type_julia \ No newline at end of file diff --git a/packages/web/public/languages/file_type_kotlin.svg b/packages/web/public/languages/file_type_kotlin.svg new file mode 100644 index 00000000..4b0961cb --- /dev/null +++ b/packages/web/public/languages/file_type_kotlin.svg @@ -0,0 +1 @@ +file_type_kotlin \ No newline at end of file diff --git a/packages/web/public/languages/file_type_lua.svg b/packages/web/public/languages/file_type_lua.svg new file mode 100644 index 00000000..44f3fa08 --- /dev/null +++ b/packages/web/public/languages/file_type_lua.svg @@ -0,0 +1 @@ +file_type_lua \ No newline at end of file diff --git a/packages/web/public/languages/file_type_markdown.svg b/packages/web/public/languages/file_type_markdown.svg new file mode 100644 index 00000000..c5b32a6f --- /dev/null +++ b/packages/web/public/languages/file_type_markdown.svg @@ -0,0 +1 @@ +file_type_markdown \ No newline at end of file diff --git a/packages/web/public/languages/file_type_matlab.svg b/packages/web/public/languages/file_type_matlab.svg new file mode 100644 index 00000000..0b5e3755 --- /dev/null +++ b/packages/web/public/languages/file_type_matlab.svg @@ -0,0 +1 @@ +file_type_matlab \ No newline at end of file diff --git a/packages/web/public/languages/file_type_objectivec.svg b/packages/web/public/languages/file_type_objectivec.svg new file mode 100644 index 00000000..fe0a61be --- /dev/null +++ b/packages/web/public/languages/file_type_objectivec.svg @@ -0,0 +1 @@ +file_type_objectivec \ No newline at end of file diff --git a/packages/web/public/languages/file_type_ocaml.svg b/packages/web/public/languages/file_type_ocaml.svg new file mode 100644 index 00000000..8e5d8e9a --- /dev/null +++ b/packages/web/public/languages/file_type_ocaml.svg @@ -0,0 +1 @@ +file_type_ocaml \ No newline at end of file diff --git a/packages/web/public/languages/file_type_perl.svg b/packages/web/public/languages/file_type_perl.svg new file mode 100644 index 00000000..8b8be680 --- /dev/null +++ b/packages/web/public/languages/file_type_perl.svg @@ -0,0 +1 @@ +file_type_perl \ No newline at end of file diff --git a/packages/web/public/languages/file_type_php3.svg b/packages/web/public/languages/file_type_php3.svg new file mode 100644 index 00000000..aaed635e --- /dev/null +++ b/packages/web/public/languages/file_type_php3.svg @@ -0,0 +1 @@ +file_type_php3 \ No newline at end of file diff --git a/packages/web/public/languages/file_type_powershell.svg b/packages/web/public/languages/file_type_powershell.svg new file mode 100644 index 00000000..05c95b31 --- /dev/null +++ b/packages/web/public/languages/file_type_powershell.svg @@ -0,0 +1 @@ +file_type_powershell \ No newline at end of file diff --git a/packages/web/public/languages/file_type_python.svg b/packages/web/public/languages/file_type_python.svg new file mode 100644 index 00000000..677f2165 --- /dev/null +++ b/packages/web/public/languages/file_type_python.svg @@ -0,0 +1 @@ +file_type_python \ No newline at end of file diff --git a/packages/web/public/languages/file_type_r.svg b/packages/web/public/languages/file_type_r.svg new file mode 100644 index 00000000..28f49c5e --- /dev/null +++ b/packages/web/public/languages/file_type_r.svg @@ -0,0 +1 @@ +file_type_r \ No newline at end of file diff --git a/packages/web/public/languages/file_type_ruby.svg b/packages/web/public/languages/file_type_ruby.svg new file mode 100644 index 00000000..9443db1f --- /dev/null +++ b/packages/web/public/languages/file_type_ruby.svg @@ -0,0 +1 @@ +file_type_ruby \ No newline at end of file diff --git a/packages/web/public/languages/file_type_rust.svg b/packages/web/public/languages/file_type_rust.svg new file mode 100644 index 00000000..327fd299 --- /dev/null +++ b/packages/web/public/languages/file_type_rust.svg @@ -0,0 +1 @@ +file_type_rust \ No newline at end of file diff --git a/packages/web/public/languages/file_type_shell.svg b/packages/web/public/languages/file_type_shell.svg new file mode 100644 index 00000000..17d38213 --- /dev/null +++ b/packages/web/public/languages/file_type_shell.svg @@ -0,0 +1 @@ +file_type_shell \ No newline at end of file diff --git a/packages/web/public/languages/file_type_swift.svg b/packages/web/public/languages/file_type_swift.svg new file mode 100644 index 00000000..c232d1f7 --- /dev/null +++ b/packages/web/public/languages/file_type_swift.svg @@ -0,0 +1 @@ +file_type_swift \ No newline at end of file diff --git a/packages/web/public/languages/file_type_tex.svg b/packages/web/public/languages/file_type_tex.svg new file mode 100644 index 00000000..952a2dec --- /dev/null +++ b/packages/web/public/languages/file_type_tex.svg @@ -0,0 +1 @@ +file_type_tex \ No newline at end of file diff --git a/packages/web/public/languages/file_type_text.svg b/packages/web/public/languages/file_type_text.svg new file mode 100644 index 00000000..a5562edd --- /dev/null +++ b/packages/web/public/languages/file_type_text.svg @@ -0,0 +1 @@ +file_type_text \ No newline at end of file diff --git a/packages/web/public/languages/file_type_typescript_official.svg b/packages/web/public/languages/file_type_typescript_official.svg new file mode 100644 index 00000000..bac7e33c --- /dev/null +++ b/packages/web/public/languages/file_type_typescript_official.svg @@ -0,0 +1 @@ +file_type_typescript_official \ No newline at end of file diff --git a/packages/web/public/languages/file_type_yaml.svg b/packages/web/public/languages/file_type_yaml.svg new file mode 100644 index 00000000..601979d5 --- /dev/null +++ b/packages/web/public/languages/file_type_yaml.svg @@ -0,0 +1 @@ +file_type_yaml \ No newline at end of file diff --git a/packages/web/public/languages/file_type_zig.svg b/packages/web/public/languages/file_type_zig.svg new file mode 100644 index 00000000..7e954652 --- /dev/null +++ b/packages/web/public/languages/file_type_zig.svg @@ -0,0 +1 @@ +file_type_zig \ No newline at end of file diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css index 7153c1ee..d1ff0cbb 100644 --- a/packages/web/src/app/globals.css +++ b/packages/web/src/app/globals.css @@ -85,4 +85,12 @@ .cm-editor .cm-searchMatch-selected { border: solid; +} + +.truncate-start { + direction: rtl; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } \ No newline at end of file diff --git a/packages/web/src/app/repositoryCarousel.tsx b/packages/web/src/app/repositoryCarousel.tsx index f67aea0f..0969ff81 100644 --- a/packages/web/src/app/repositoryCarousel.tsx +++ b/packages/web/src/app/repositoryCarousel.tsx @@ -64,7 +64,7 @@ const RepositoryBadge = ({ repoIcon: {info.costHostName}, repoName: info.repoName, repoLink: info.repoLink, diff --git a/packages/web/src/app/search/components/codePreviewPanel/codePreview.tsx b/packages/web/src/app/search/components/codePreviewPanel/codePreview.tsx index 35f764da..3aa6fb34 100644 --- a/packages/web/src/app/search/components/codePreviewPanel/codePreview.tsx +++ b/packages/web/src/app/search/components/codePreviewPanel/codePreview.tsx @@ -43,8 +43,8 @@ export const CodePreview = ({ }: CodePreviewProps) => { const editorRef = useRef(null); - const [ keymapType ] = useKeymapType(); - const { theme } = useThemeNormalized(); + const [keymapType] = useKeymapType(); + const { theme } = useThemeNormalized(); const [gutterWidth, setGutterWidth] = useState(0); const keymapExtension = useExtensionWithDependency( @@ -109,7 +109,9 @@ export const CodePreview = ({ return (
-
+
+ + {/* Gutter icon */}
+
+ + {/* File path */} +
{ if (file?.link) { window.open(file.link, "_blank"); } }} + title={file?.filepath} > {file?.filepath}
-
+ +
+ {/* Match selector */} {file && file.matches.length > 0 && ( <>

{`${selectedMatchIndex + 1} of ${ranges.length}`}

@@ -154,6 +163,8 @@ export const CodePreview = ({ )} + + {/* Close button */}
); } + +interface PanelGroupProps { + fileMatches: SearchResultFile[]; + isMoreResultsButtonVisible?: boolean; + onLoadMoreResults: () => void; +} + +const PanelGroup = ({ + fileMatches, + isMoreResultsButtonVisible, + onLoadMoreResults, +}: PanelGroupProps) => { + const [selectedMatchIndex, setSelectedMatchIndex] = useState(0); + const [selectedFile, setSelectedFile] = useState(undefined); + const [filteredFileMatches, setFilteredFileMatches] = useState(fileMatches); + + const codePreviewPanelRef = useRef(null); + useEffect(() => { + if (selectedFile) { + codePreviewPanelRef.current?.expand(); + } else { + codePreviewPanelRef.current?.collapse(); + } + }, [selectedFile]); + + return ( + + {/* ~~ Filter panel ~~ */} + + { + setFilteredFileMatches(filteredFileMatches) + }} + /> + + + + {/* ~~ Search results ~~ */} + + {filteredFileMatches.length > 0 ? ( + + { + setSelectedFile(fileMatch); + }} + onMatchIndexChanged={(matchIndex) => { + setSelectedMatchIndex(matchIndex); + }} + /> + {isMoreResultsButtonVisible && ( +
+ + Load more results + +
+ )} + + + ) : ( +
+

No results found

+
+ )} + + + + {/* ~~ Code preview ~~ */} + + setSelectedFile(undefined)} + selectedMatchIndex={selectedMatchIndex} + onSelectedMatchIndexChange={setSelectedMatchIndex} + /> + + + ) +} \ No newline at end of file diff --git a/packages/web/src/lib/utils.ts b/packages/web/src/lib/utils.ts index c04def13..38846d5f 100644 --- a/packages/web/src/lib/utils.ts +++ b/packages/web/src/lib/utils.ts @@ -35,7 +35,7 @@ type CodeHostInfo = { costHostName: string; repoLink: string; icon: string; - iconClassname?: string; + iconClassName?: string; } export const getRepoCodeHostInfo = (repoName: string): CodeHostInfo | undefined => { @@ -46,7 +46,7 @@ export const getRepoCodeHostInfo = (repoName: string): CodeHostInfo | undefined costHostName: "GitHub", repoLink: `https://${repoName}`, icon: githubLogo, - iconClassname: "dark:invert", + iconClassName: "dark:invert", } } diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json index 7b285893..6b2f2e65 100644 --- a/packages/web/tsconfig.json +++ b/packages/web/tsconfig.json @@ -18,7 +18,8 @@ } ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./src/*"], + "@/public/*": ["./public/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], diff --git a/yarn.lock b/yarn.lock index df394cff..6ffb2bc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2739,6 +2739,11 @@ functions-have-names@^1.2.3: resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834" integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== +fuse.js@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2" + integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q== + get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"