Skip to content

Feat(webapp) filters UX update #3451

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.

Sign up for GitHub

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

Open
samejr wants to merge 53 commits into
base: main
Choose a base branch
from
Open

Feat(webapp) filters UX update #3451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
ea7fce7
Move important run filters outside the filter menu
samejr Apr 3, 2026
ab7ec74
adds disableTooltipHoverableContent to 2 run table tooltips
samejr Apr 4, 2026
dc50e8a
Uses correct hover state for tables
samejr Apr 4, 2026
cf146ab
Adds tooltips to filters
samejr Apr 4, 2026
6278f3f
Updates filters on the Batch page
samejr Apr 4, 2026
a01c5a2
Updates schedules page filters to new pattern
samejr Apr 4, 2026
6228ea7
Improved run filters UI
samejr Apr 4, 2026
0f3159c
Run table row highlight fix
samejr Apr 4, 2026
8e86ab5
run table loading state background color fix
samejr Apr 4, 2026
b5a87e3
Better loading bg color
samejr Apr 4, 2026
a31c0ed
Batch filter improvements
samejr Apr 4, 2026
a498fae
Copyable batch ID from the batch table
samejr Apr 4, 2026
c90757b
Scheduled filters improvements
samejr Apr 4, 2026
33f35a1
Adds correct selected row classes to schedule table
samejr Apr 4, 2026
e20c30b
Updates filters on Waitpoints page
samejr Apr 4, 2026
1f74bd8
Improved shortcuts to scheduled filters
samejr Apr 4, 2026
3c2df74
Consistent clear filters icon
samejr Apr 4, 2026
88fd595
Task page search bar improvements
samejr Apr 15, 2026
d9c730f
UX behaviour improvements to the search input component
samejr Apr 15, 2026
98c1d55
Scheduled filters improvements
samejr Apr 15, 2026
dd5e063
AI search field can now be cleared with ESC key
samejr Apr 15, 2026
47a6952
Search input component can handle both url param as ‘search’ and ‘query’
samejr Apr 16, 2026
dc35d5a
Updates search field on Query page
samejr Apr 16, 2026
1b8f266
Improved the Compare models filter button
samejr Apr 16, 2026
99922d0
better table behaviour when shown in a diaglog
samejr Apr 16, 2026
418ef16
Adds shortcut keys to the filter buttons
samejr Apr 16, 2026
e6a8c3e
Make sure tooltip span stays the correct height
samejr Apr 16, 2026
438687c
Lowercase m
samejr Apr 16, 2026
d9ca1ff
Nicer icons for the scope filter button
samejr Apr 16, 2026
8a783dd
Adds shortcut
samejr Apr 16, 2026
e98384d
Bright text
samejr Apr 16, 2026
31c2a9e
Bright text
samejr Apr 16, 2026
8ceb8d3
Adds clear filter button
samejr Apr 16, 2026
9aa4199
Better keyboard shortcut keys
samejr Apr 17, 2026
274f772
Reorder filters
samejr Apr 19, 2026
37b8f87
Fix filter button padding
samejr Apr 19, 2026
d0c24c4
Add shortcut keys to configure alerts and date time filter
samejr Apr 19, 2026
3ce3c17
Fix padding
samejr Apr 19, 2026
36c32ce
Updated env var page search field
samejr Apr 19, 2026
a5730e4
Improves the branches page filters
samejr Apr 19, 2026
f782a43
Unified style for all clear filters buttons
samejr Apr 19, 2026
7da933d
Root only toggle stay active when filtering by task
samejr Apr 19, 2026
97a29ad
make the ESC key less agressive and keep input field focus
samejr Apr 20, 2026
2ff11f1
Task page search filter no longer debounces for better performance
samejr Apr 20, 2026
a6a6032
Only persist rootOnly when no tasks are filtered
samejr Apr 22, 2026
51ef79a
Input component now supports iconClassName
samejr Apr 22, 2026
9262a41
Merge remote-tracking branch 'origin/main' into feat(webapp)-filters-…
samejr Apr 22, 2026
284639a
Queue items have brighter text
samejr Apr 26, 2026
5d4776d
Suppress duplicate inline shortcut chip when tooltip is set
samejr Apr 26, 2026
b9eb4d3
improves the filter bar buttons for custom dashboards
samejr Apr 26, 2026
522ef14
Improved tooltip padding and spacing
samejr Apr 26, 2026
39b88a8
adds shortcuts to the query page filters
samejr Apr 26, 2026
999d116
Merge remote-tracking branch 'origin/main' into feat(webapp)-filters-…
samejr Apr 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/webapp/app/components/MachineLabelCombo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ export function MachineLabel({
className?: string;
}) {
return (
<span className={cn("text-text-dimmed", className)}>{formatMachinePresetName(preset)}</span>
<span className={cn("text-text-dimmed group-hover/table-row:text-text-bright", className)}>
{formatMachinePresetName(preset)}
</span>
);
}

Expand Down
11 changes: 4 additions & 7 deletions apps/webapp/app/components/logs/LogsLevelFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function LogsLevelFilter() {
const hasLevels = selectedLevels.length > 0 && selectedLevels.some((v) => v !== "");

if (hasLevels) {
return <AppliedLevelFilter/>;
return <AppliedLevelFilter />;
}

return (
Expand All @@ -64,19 +64,16 @@ export function LogsLevelFilter() {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by level"
className="pl-1.5"
>
Level
<span className="ml-1">Level</span>
</SelectTrigger>
}
/>
);
}

function LevelDropdown({
trigger,
}: {
trigger: ReactNode;
}) {
function LevelDropdown({ trigger }: { trigger: ReactNode }) {
const { values, replace } = useSearchParams();

const handleChange = (values: string[]) => {
Expand Down
9 changes: 3 additions & 6 deletions apps/webapp/app/components/logs/LogsRunIdFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ import { Button } from "~/components/primitives/Buttons";
import { FormError } from "~/components/primitives/FormError";
import { Input } from "~/components/primitives/Input";
import { Label } from "~/components/primitives/Label";
import {
SelectPopover,
SelectProvider,
SelectTrigger,
} from "~/components/primitives/Select";
import { SelectPopover, SelectProvider, SelectTrigger } from "~/components/primitives/Select";
import { useSearchParams } from "~/hooks/useSearchParam";
import { FilterMenuProvider } from "~/components/runs/v3/SharedFilters";

Expand All @@ -34,8 +30,9 @@ export function LogsRunIdFilter() {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by run ID"
className="pl-1.5"
>
Run ID
<span className="ml-1">Run ID</span>
</SelectTrigger>
}
clearSearchValue={() => setSearch("")}
Expand Down
9 changes: 6 additions & 3 deletions apps/webapp/app/components/logs/LogsTaskFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,9 @@ export function LogsTaskFilter({ possibleTasks }: LogsTaskFilterProps) {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by task"
className="pl-1.5"
>
<span className="ml-0.5">Tasks</span>
<span className="ml-1">Tasks</span>
</SelectTrigger>
}
searchValue={search}
Expand Down Expand Up @@ -133,8 +134,9 @@ function TasksDropdown({
.filter((item) => item.isInLatestDeployment)
.map((item) => (
<SelectItem
key={item.slug}
key={`${item.triggerSource}-${item.slug}`}
value={item.slug}
className="text-text-bright"
icon={
<TaskTriggerSourceIcon source={item.triggerSource} className="size-4 flex-none" />
}
Expand All @@ -149,8 +151,9 @@ function TasksDropdown({
.filter((item) => !item.isInLatestDeployment)
.map((item) => (
<SelectItem
key={item.slug}
key={`${item.triggerSource}-${item.slug}`}
value={item.slug}
className="text-text-bright"
icon={
<span className="opacity-50">
<TaskTriggerSourceIcon
Expand Down
3 changes: 2 additions & 1 deletion apps/webapp/app/components/logs/LogsVersionFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ export function LogsVersionFilter() {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by version"
className="pl-1.5"
>
<span className="ml-0.5">Versions</span>
<span className="ml-1">Versions</span>
</SelectTrigger>
}
searchValue={search}
Expand Down
15 changes: 8 additions & 7 deletions apps/webapp/app/components/metrics/ModelsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { tablerIcons } from "~/utils/tablerIcons";
import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
import { AnthropicLogoIcon } from "~/assets/icons/AnthropicLogoIcon";

const shortcut = { key: "l" };
const shortcut = { key: "m" };
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find all uses of `key: "m"` shortcut bindings to assess collision surface area.
rg -nP --type=ts --type=tsx -C2 $'\\bkey:\\s*[\"\\\']m[\"\\\']'
# Locate the Metadata shortcut definition to understand its scope (global vs route-scoped).
rg -nP -C5 'Metadata' apps/webapp/app/components/Shortcuts.tsx

Repository: triggerdotdev/trigger.dev

Length of output: 751

🏁 Script executed:

# Search for where the Metadata shortcut is actually handled/triggered
rg -n "Metadata" apps/webapp/app/components --type ts --type tsx -A5 -B5 | head -100

# Check if there's a shortcut handler/listener for the metrics dashboard route
rg -n "shortcut" apps/webapp/app/routes --type ts --type tsx | grep -i metric | head -20

# Find the ModelsFilter component and check the styling of disabled "No models found" item
cat apps/webapp/app/components/metrics/ModelsFilter.tsx | head -160

Repository: triggerdotdev/trigger.dev

Length of output: 4921

🏁 Script executed:

# Search for how shortcuts are implemented/handled in this codebase
fd "Shortcuts" apps/webapp/app/components --type f
rg -n "key.*m" apps/webapp/app/components/Shortcuts.tsx -B3 -A3

# Check how shortcut handlers work - look for event listeners
rg -n "useShortcut\|onKeyDown\|addEventListener" apps/webapp/app/components --type ts --type tsx | head -30

Repository: triggerdotdev/trigger.dev

Length of output: 7750

🏁 Script executed:

# Compare styling in QueuesFilter, ProvidersFilter, OperationsFilter for disabled/empty state
fd "QueuesFilter|ProvidersFilter|OperationsFilter" apps/webapp/app/components --type f
rg -n "text-text-bright\|disabled" apps/webapp/app/components/metrics/QueuesFilter.tsx -B2 -A2 | head -40
rg -n "text-text-bright\|disabled" apps/webapp/app/components/metrics/ProvidersFilter.tsx -B2 -A2 | head -40

Repository: triggerdotdev/trigger.dev

Length of output: 232

🏁 Script executed:

# Search for shortcut handler implementations - look for key event listeners or shortcut handlers
rg -n "useShortcut\|handleShortcut\|onKeyDown.*m" apps/webapp/app --type ts --type tsx | head -40

# Check if shortcut handlers are route-scoped or global
rg -n "key.*m\|Metadata" apps/webapp/app/routes --type ts --type tsx | grep -i metric | head -20

# Look at the actual QueuesFilter and ProvidersFilter to compare styling on disabled items
head -250 apps/webapp/app/components/metrics/QueuesFilter.tsx | tail -100
head -250 apps/webapp/app/components/metrics/ProvidersFilter.tsx | tail -100

Repository: triggerdotdev/trigger.dev

Length of output: 6128

🏁 Script executed:

# Search for where the run page "Metadata" shortcut with "m" is actually implemented/handled
rg -n "\"m\"" apps/webapp/app/routes --type ts --type tsx -B5 -A5 | grep -i "metadata\|shortcut" | head -40

Repository: triggerdotdev/trigger.dev

Length of output: 97

Remove text-text-bright from the disabled "No models found" SelectItem (L155).

QueuesFilter and ProvidersFilter leave their disabled empty-state items unstyled (muted appearance), but ModelsFilter adds text-text-bright here, creating visual inconsistency. Disabled helper text should be dimmed, not bright.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/webapp/app/components/metrics/ModelsFilter.tsx` at line 19, The disabled
"No models found" SelectItem in the ModelsFilter component is using the bright
utility class `text-text-bright`; remove that class so the empty-state disabled
item is muted like in QueuesFilter and ProvidersFilter. Locate the SelectItem
rendering for the "No models found" option inside the ModelsFilter component and
delete the `text-text-bright` class (or replace it with the same muted class
used by the other filters) to restore visual consistency.


export type ModelOption = {
model: string;
Expand All @@ -38,19 +38,19 @@ function modelIcon(system: string, model: string): ReactNode {

// Special case: Anthropic uses a custom SVG icon
if (provider === "anthropic") {
return <AnthropicLogoIcon className="size-4 shrink-0" />;
return <AnthropicLogoIcon className="size-4 shrink-0 text-text-dimmed" />;
}

const iconName = `tabler-brand-${provider}`;
if (tablerIcons.has(iconName)) {
return (
<svg className="size-4 shrink-0 stroke-[1.5]">
<svg className="size-4 shrink-0 stroke-[1.5] text-text-dimmed">
<use xlinkHref={`${tablerSpritePath}#${iconName}`} />
</svg>
);
}

return <CubeIcon className="size-4 shrink-0" />;
return <CubeIcon className="size-4 shrink-0 text-text-dimmed" />;
}

export function ModelsFilter({ possibleModels }: ModelsFilterProps) {
Expand All @@ -68,8 +68,9 @@ export function ModelsFilter({ possibleModels }: ModelsFilterProps) {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by model"
className="pl-1.5"
>
<span className="ml-0.5">Models</span>
<span className="ml-1">Models</span>
</SelectTrigger>
}
searchValue={search}
Expand Down Expand Up @@ -147,11 +148,11 @@ function ModelsDropdown({
<ComboBox placeholder="Filter by model..." value={searchValue} />
<SelectList>
{filtered.map((m) => (
<SelectItem key={m.model} value={m.model} icon={modelIcon(m.system, m.model)}>
<SelectItem key={m.model} value={m.model} className="text-text-bright" icon={modelIcon(m.system, m.model)}>
{m.model}
</SelectItem>
))}
{filtered.length === 0 && <SelectItem disabled>No models found</SelectItem>}
{filtered.length === 0 && <SelectItem disabled className="text-text-bright">No models found</SelectItem>}
</SelectList>
</SelectPopover>
</SelectProvider>
Expand Down
7 changes: 4 additions & 3 deletions apps/webapp/app/components/metrics/OperationsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import { useSearchParams } from "~/hooks/useSearchParam";
import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";

const shortcut = { key: "n" };
const shortcut = { key: "o" };

interface OperationsFilterProps {
possibleOperations: string[];
Expand Down Expand Up @@ -45,8 +45,9 @@ export function OperationsFilter({ possibleOperations }: OperationsFilterProps)
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by operation"
className="pl-1.5"
>
<span className="ml-0.5">Operations</span>
<span className="ml-1">Operations</span>
</SelectTrigger>
}
searchValue={search}
Expand Down Expand Up @@ -125,7 +126,7 @@ function OperationsDropdown({
<ComboBox placeholder="Filter by operation..." value={searchValue} />
<SelectList>
{filtered.map((op) => (
<SelectItem key={op} value={op} icon={<CommandLineIcon className="size-4" />}>
<SelectItem key={op} value={op} className="text-text-bright" icon={<CommandLineIcon className="size-4 text-text-dimmed" />}>
{formatOperation(op)}
</SelectItem>
))}
Expand Down
5 changes: 3 additions & 2 deletions apps/webapp/app/components/metrics/PromptsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,9 @@ export function PromptsFilter({ possiblePrompts }: PromptsFilterProps) {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by prompt"
className="pl-1.5"
>
<span className="ml-0.5">Prompts</span>
<span className="ml-1">Prompts</span>
</SelectTrigger>
}
searchValue={search}
Expand Down Expand Up @@ -113,7 +114,7 @@ function PromptsDropdown({
<ComboBox placeholder="Filter by prompt..." value={searchValue} />
<SelectList>
{filtered.map((slug) => (
<SelectItem key={slug} value={slug} icon={<DocumentTextIcon className="size-4" />}>
<SelectItem key={slug} value={slug} className="text-text-bright" icon={<DocumentTextIcon className="size-4 text-text-dimmed" />}>
{slug}
</SelectItem>
))}
Expand Down
5 changes: 3 additions & 2 deletions apps/webapp/app/components/metrics/ProvidersFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,9 @@ export function ProvidersFilter({ possibleProviders }: ProvidersFilterProps) {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by provider"
className="pl-1.5"
>
<span className="ml-0.5">Providers</span>
<span className="ml-1">Providers</span>
</SelectTrigger>
}
searchValue={search}
Expand Down Expand Up @@ -111,7 +112,7 @@ function ProvidersDropdown({
<ComboBox placeholder="Filter by provider..." value={searchValue} />
<SelectList>
{filtered.map((provider) => (
<SelectItem key={provider} value={provider} icon={<ServerIcon className="size-4" />}>
<SelectItem key={provider} value={provider} className="text-text-bright" icon={<ServerIcon className="size-4 text-text-dimmed" />}>
{provider}
</SelectItem>
))}
Expand Down
2 changes: 2 additions & 0 deletions apps/webapp/app/components/metrics/QueuesFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export function QueuesFilter() {
variant="secondary/small"
shortcut={shortcut}
tooltipTitle="Filter by queue"
className="pl-1.5"
>
<span className="ml-1">Queues</span>
</SelectTrigger>
Expand Down Expand Up @@ -190,6 +191,7 @@ function QueuesDropdown({
<SelectItem
key={queue.value}
value={queue.value}
className="text-text-bright"
icon={
queue.type === "task" ? (
<TaskIcon className="size-4 shrink-0 text-blue-500" />
Expand Down
Loading
Loading