-
-
Notifications
You must be signed in to change notification settings - Fork 4
Diff filtering #58
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.
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
Draft
jpenilla
wants to merge
4
commits into
master
Choose a base branch
from
feat/filters
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Diff filtering #58
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
131 changes: 131 additions & 0 deletions
131
web/src/lib/components/diff-filtering/DiffFilterDialog.svelte
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| <script lang="ts"> | ||
| import { getFileStatusProps, MultiFileDiffViewerState } from "$lib/diff-viewer.svelte"; | ||
| import { Button, Dialog, ToggleGroup } from "bits-ui"; | ||
| import { tryCompileRegex } from "$lib/util"; | ||
| import { FILE_STATUSES } from "$lib/github.svelte"; | ||
| import { slide } from "svelte/transition"; | ||
| import { type FilePathFilterMode } from "$lib/components/diff-filtering/index.svelte"; | ||
|
|
||
| const viewer = MultiFileDiffViewerState.get(); | ||
| const instance = viewer.filter; | ||
|
|
||
| let newFilePathFilterElement: HTMLInputElement | undefined = $state(); | ||
| let newFilePathFilterInput = $state(""); | ||
| let newFilePathFilterInputResult = $derived(tryCompileRegex(newFilePathFilterInput)); | ||
| $effect(() => { | ||
| if (newFilePathFilterElement && newFilePathFilterInputResult.success) { | ||
| newFilePathFilterElement.setCustomValidity(""); | ||
| } else if (newFilePathFilterElement && !newFilePathFilterInputResult.success) { | ||
| newFilePathFilterElement.setCustomValidity(newFilePathFilterInputResult.error); | ||
| } | ||
| }); | ||
|
|
||
| let newFilePathFilterMode: FilePathFilterMode = $state("exclude"); | ||
| </script> | ||
|
|
||
| <Dialog.Root bind:open={viewer.diffFilterDialogOpen}> | ||
| <Dialog.Portal> | ||
| <Dialog.Overlay | ||
| class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" | ||
| /> | ||
| <Dialog.Content | ||
| class="fixed top-1/2 left-1/2 z-50 flex max-h-svh w-2xl max-w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded-sm border bg-neutral shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-[95%]" | ||
| > | ||
| <header class="flex shrink-0 flex-row items-center justify-between rounded-t-sm border-b bg-neutral-2 p-4"> | ||
| <Dialog.Title class="text-xl font-semibold">Edit Filters</Dialog.Title> | ||
| <Dialog.Close title="Close dialog" class="flex size-6 items-center justify-center rounded-sm btn-ghost text-em-med"> | ||
| <span class="iconify octicon--x-16" aria-hidden="true"></span> | ||
| </Dialog.Close> | ||
| </header> | ||
|
|
||
| <section class="m-4"> | ||
| <header class="px-2 py-1 text-lg font-semibold">File Status</header> | ||
| <ToggleGroup.Root class="flex flex-wrap gap-0.5" type="multiple" bind:value={instance.selectedFileStatuses}> | ||
| {#each FILE_STATUSES as status (status)} | ||
| {@const statusProps = getFileStatusProps(status)} | ||
| <ToggleGroup.Item | ||
| aria-label="Toggle {statusProps.title} Files" | ||
| value={status} | ||
| class="flex cursor-pointer items-center gap-1 rounded-sm btn-ghost px-2 py-1 data-[state=off]:text-em-med data-[state=off]:hover:text-em-high data-[state=on]:btn-ghost-visible" | ||
| > | ||
| <span class="aria-hidden size-4 {statusProps.iconClasses}"></span> | ||
| {statusProps.title} | ||
| </ToggleGroup.Item> | ||
| {/each} | ||
| </ToggleGroup.Root> | ||
| {#if instance.selectedFileStatuses.length === 0} | ||
| <p transition:slide class="px-2 text-em-med italic">No file statuses selected; all files will be excluded.</p> | ||
| {/if} | ||
| </section> | ||
|
|
||
| <section class="m-4 mt-0"> | ||
| <header class="px-2 py-1 text-lg font-semibold">File Path</header> | ||
| <div class="flex flex-col"> | ||
| <form | ||
| class="mb-1 flex w-full items-center gap-1" | ||
| onsubmit={(e) => { | ||
| e.preventDefault(); | ||
| if (!newFilePathFilterInputResult.success) return; | ||
| instance.addFilePathFilter(newFilePathFilterInputResult, newFilePathFilterMode); | ||
| newFilePathFilterInput = ""; | ||
| }} | ||
| > | ||
| <input | ||
| type="text" | ||
| placeholder="Enter regular expression here..." | ||
| class="grow rounded-md border px-2 py-1 inset-shadow-xs ring-focus focus:outline-none focus-visible:ring-2" | ||
| bind:value={newFilePathFilterInput} | ||
| bind:this={newFilePathFilterElement} | ||
| /> | ||
| <Button.Root | ||
| type="button" | ||
| title="Toggle include/exclude mode (currently {newFilePathFilterMode})" | ||
| class="flex shrink-0 items-center justify-center rounded-md btn-fill-neutral p-2 text-em-med" | ||
| onclick={() => { | ||
| newFilePathFilterMode = newFilePathFilterMode === "exclude" ? "include" : "exclude"; | ||
| }} | ||
| > | ||
| {#if newFilePathFilterMode === "exclude"} | ||
| <span class="aria-hidden iconify octicon--filter-remove-16"></span> | ||
| {:else} | ||
| <span class="aria-hidden iconify octicon--filter-16"></span> | ||
| {/if} | ||
| </Button.Root> | ||
| <Button.Root type="submit" title="Add filter" class="flex shrink-0 items-center justify-center rounded-md btn-fill-primary p-2"> | ||
| <span class="iconify size-4 shrink-0 place-self-center octicon--plus-16" aria-hidden="true"></span> | ||
| </Button.Root> | ||
| </form> | ||
| <ul class="h-48 overflow-y-auto rounded-md border inset-shadow-xs"> | ||
| {#each instance.reverseFilePathFilters as filter, i (i)} | ||
| <li class="flex gap-1 border-b px-2 py-1"> | ||
| <span class="grow"> | ||
| {filter.text} | ||
| </span> | ||
| <div class="flex size-6 shrink-0 items-center justify-center"> | ||
| {#if filter.mode === "exclude"} | ||
| <span class="aria-hidden iconify size-4 text-em-med octicon--filter-remove-16"></span> | ||
| {:else} | ||
| <span class="aria-hidden iconify size-4 text-em-med octicon--filter-16"></span> | ||
| {/if} | ||
| </div> | ||
| <Button.Root | ||
| type="button" | ||
| title="Delete filter" | ||
| class="flex size-6 items-center justify-center rounded-sm btn-ghost-danger" | ||
| onclick={() => { | ||
| instance.filePathFilters.delete(filter); | ||
| }} | ||
| > | ||
| <span class="iconify size-4 shrink-0 place-self-center octicon--trash-16" aria-hidden="true"></span> | ||
| </Button.Root> | ||
| </li> | ||
| {/each} | ||
| {#if instance.reverseFilePathFilters.length === 0} | ||
| <li class="flex size-full items-center justify-center px-4 text-em-med">No file path filters. Add one using the above form.</li> | ||
| {/if} | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| </Dialog.Content> | ||
| </Dialog.Portal> | ||
| </Dialog.Root> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import type { FileDetails } from "$lib/diff-viewer.svelte"; | ||
| import { FILE_STATUSES } from "$lib/github.svelte"; | ||
| import type { TryCompileRegexSuccess } from "$lib/util"; | ||
| import { SvelteSet } from "svelte/reactivity"; | ||
|
|
||
| export type FilePathFilterMode = "include" | "exclude"; | ||
| export class FilePathFilter { | ||
| text: string; | ||
| regex: RegExp; | ||
| mode: FilePathFilterMode; | ||
|
|
||
| constructor(text: string, regex: RegExp, mode: FilePathFilterMode) { | ||
| this.text = $state(text); | ||
| this.regex = $state.raw(regex); | ||
| this.mode = $state(mode); | ||
| } | ||
| } | ||
|
|
||
| export class DiffFilterDialogState { | ||
| filePathFilters = new SvelteSet<FilePathFilter>(); | ||
| reverseFilePathFilters = $derived([...this.filePathFilters].toReversed()); | ||
| filterFunction = $derived(this.createFilterFunction()); | ||
|
|
||
| selectedFileStatuses: string[] = $state([...FILE_STATUSES]); | ||
|
|
||
| addFilePathFilter(regex: TryCompileRegexSuccess, mode: FilePathFilterMode) { | ||
| const newFilter = new FilePathFilter(regex.input, regex.regex, mode); | ||
| this.filePathFilters.add(newFilter); | ||
| } | ||
|
|
||
| setDefaults() { | ||
| this.filePathFilters.clear(); | ||
| this.selectedFileStatuses = [...FILE_STATUSES]; | ||
| } | ||
|
|
||
| filterFile(file: FileDetails): boolean { | ||
| return this.filterFunction(file); | ||
| } | ||
|
|
||
| private createFilterFunction() { | ||
| const filePathInclusions = this.reverseFilePathFilters.filter((f) => f.mode === "include"); | ||
| const filePathExclusions = this.reverseFilePathFilters.filter((f) => f.mode === "exclude"); | ||
| const selectedFileStatuses = [...this.selectedFileStatuses]; | ||
|
|
||
| return (file: FileDetails) => { | ||
| const statusAllowed = selectedFileStatuses.includes(file.status); | ||
| if (!statusAllowed) { | ||
| return false; | ||
| } | ||
| for (const exclude of filePathExclusions) { | ||
| if (exclude.regex.test(file.toFile) || exclude.regex.test(file.fromFile)) { | ||
| return false; | ||
| } | ||
| } | ||
| if (filePathInclusions.length > 0) { | ||
| for (const include of filePathInclusions) { | ||
| if (include.regex.test(file.toFile) || include.regex.test(file.fromFile)) { | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| } | ||
| return true; | ||
| }; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The ToggleGroup allows users to deselect all file statuses, which would result in all files being filtered out and an empty diff view. Consider either preventing the last status from being deselected, or displaying a helpful message when no files match the current filters.