Dashboard Enhancement: Advanced Navigation and Filtering

[ojfbot]

Overview

Enhance dashboard navigation and filtering to help users quickly find relevant test results in large datasets.

Goal: Improve navigation efficiency and reduce time to find specific test runs.

---

Features

1. Advanced Search (Priority: High)

Multi-field search:

• Search by: branch, commit, PR number, date range, author
• Fuzzy matching for branch names
• Search history (last 10 searches)
• Saved searches (persist in localStorage)

Search UI:
```
┌──────────────────────────────────────┐
│ 🔍 Search: [feat/dashboard ] │
│ │
│ Filters: │
│ ☑ Branch ☑ Commit ☐ Author │
│ ☐ PR Number ☑ Date Range │
│ │
│ Date Range: [Last 30 days ▼] │
│ │
│ [Clear] [Save Search] │
└──────────────────────────────────────┘
```

2. Smart Filters (Priority: High)

Pre-built filter presets:

• "Recent Failures" (failed in last 7 days)
• "Flaky Tests" (flip-flopping status)
• "Consistent Failures" (failed 3+ times)
• "Long Running" (duration > 5 minutes)
• "My PRs" (by author, if available)

Quick filters:

• Status: All / Passed / Failed / Flaky
• Date: Last 24h / 7d / 30d / Custom
• Branch: main / feature / all
• PR: Open / Closed / All

3. Deep Linking (Priority: Medium)

Shareable URLs with encoded state:
```
https://dashboard/visual-regression/?
run=1765676217672-c7b32fe&
filter=status:failed&
view=gallery
```

Support for:

• Specific test run
• Filter state
• View mode (list/gallery)
• Selected interaction/screenshot

Implementation:
```typescript
// Use URL search params
const params = new URLSearchParams(window.location.search);
const runId = params.get('run');
const filter = params.get('filter');
const view = params.get('view');

// Update URL when state changes
history.pushState({}, '', `?run=${runId}&filter=${filter}`);
```

4. Keyboard Navigation (Priority: Medium)

Shortcuts:

• `/` - Focus search
• `Esc` - Clear search / Close modals
• `Arrow Keys` - Navigate test list
• `Enter` - Open selected test
• `g` + `h` - Go to home
• `f` - Toggle failed filter
• `?` - Show keyboard shortcuts

5. Bulk Actions (Priority: Low)

Multi-select tests:

• Checkbox selection
• "Select all failed"
• "Select all flaky"

Actions:

• Export selected (CSV/JSON)
• Compare selected runs
• Add to report

---

UI Components

SearchBar Component

```typescript
interface SearchBarProps {
onSearch: (query: string, filters: SearchFilters) => void;
savedSearches: SavedSearch[];
}

export function SearchBar({ onSearch, savedSearches }: SearchBarProps) {
// Advanced search input
// Filter chips
// Saved searches dropdown
// Search history
}
```

FilterPanel Component

```typescript
interface FilterPanelProps {
filters: FilterState;
onChange: (filters: FilterState) => void;
presets: FilterPreset[];
}

export function FilterPanel({ filters, onChange, presets }: FilterPanelProps) {
// Filter presets
// Quick filters
// Custom filter builder
}
```

---

Data Model

Saved Searches (localStorage)

```json
{
"savedSearches": [
{
"id": "search-1",
"name": "Failed Dashboard Tests",
"query": "dashboard",
"filters": {
"status": "failed",
"dateRange": "7d"
},
"created": "2025-12-14T00:00:00.000Z"
}
],
"searchHistory": [
{ "query": "feat/dashboard", "timestamp": "..." }
]
}
```

---

Implementation Plan

Phase 1: Advanced Search (1-2 days)

• Multi-field search input
• Fuzzy matching algorithm
• Search history in localStorage
• Saved searches UI

Phase 2: Smart Filters (1 day)

• Pre-built filter presets
• Quick filter buttons
• Filter persistence

Phase 3: Deep Linking (1 day)

• URL state encoding
• State restoration from URL
• Share button

Phase 4: Keyboard Navigation (1 day)

• Keyboard event handlers
• Shortcut overlay (? key)
• Accessibility improvements

---

Acceptance Criteria

• Search works across all fields
• Saved searches persist across sessions
• Deep links restore full state
• Keyboard shortcuts work for all actions
• Filter presets are easily accessible
• Performance: Search results < 50ms
• Accessibility: All actions keyboard-accessible

---

Technical Notes

• Use React Router for URL state management
• Implement debouncing for search input (300ms)
• Use Fuse.js or similar for fuzzy search
• Store preferences in localStorage
• Add event listeners for keyboard shortcuts

---

Part of #71 (Visual Regression Testing Pipeline)
Follows #76 (GitHub Pages Dashboard)

[ojfbot]

🔍 Dashboard Enhancement: Advanced Navigation and Filtering - Status Update

Parent: #71 (Visual Regression Testing Pipeline)
Status: OPEN - Planned enhancement
Priority: High
Estimated Effort: 3-4 days

---

Current Status

Foundation Complete: ✅

• Basic search and filter implemented in FilterBar.tsx
• URL routing with React Router ready
• Search functionality operational (branch, commit, PR)

Implementation Status: 🔜 Partially implemented (basic features)
This issue tracks advanced features beyond the MVP filtering.

---

Currently Implemented (From #76)

✅ Basic Search

• Search by branch name
• Search by commit SHA
• Search by PR number
• Real-time filtering

✅ Basic Filters

• Filter by status (all/passed/failed)
• Sort by timestamp

❌ Not Yet Implemented

• Multi-field advanced search
• Fuzzy matching
• Search history persistence
• Saved searches
• Deep linking with state
• Keyboard shortcuts
• Bulk actions

---

Feature Breakdown

1. Advanced Search (Priority: High)

Complexity: Medium
Estimated Effort: 1-2 days

Implementation Plan:

// src/components/AdvancedSearch.tsx
interface SearchOptions {
  fields: ('branch' | 'commit' | 'pr' | 'author' | 'date')[];
  query: string;
  fuzzy: boolean;
  dateRange?: [Date, Date];
}

export function AdvancedSearch({ onSearch }: Props) {
  // Multi-field search UI
  // Fuzzy matching toggle
  // Date range picker
  // Search history dropdown
}

Dependencies: Install fuse.js for fuzzy search

2. Smart Filters (Priority: High)

Complexity: Low
Estimated Effort: 1 day

Pre-built Presets:

• "Recent Failures" (failed in last 7 days)
• "Flaky Tests" (requires Dashboard Enhancement: Trend Charts and Analytics #79)
• "Consistent Failures" (failed 3+ consecutive times)
• "Long Running" (duration >5 min)

3. Deep Linking (Priority: Medium)

Complexity: Low
Estimated Effort: 1 day

Current: Basic client-side routing
Enhancement: Encode filter state in URL

// Example URL with state
/visual-regression/?run=1765676217672-c7b32fe&filter=status:failed&view=gallery

// Update URL on filter change
const updateURL = (filters: FilterState) => {
  const params = new URLSearchParams();
  params.set('run', filters.runId);
  params.set('filter', serializeFilters(filters));
  history.pushState({}, '', `?${params}`);
};

4. Keyboard Navigation (Priority: Medium)

Complexity: Medium
Estimated Effort: 1-2 days

Shortcuts to Implement:

/ - Focus search
Esc - Clear search / Close modals
Arrow Keys - Navigate test list
Enter - Open selected test
g + h - Go to home
f - Toggle failed filter
? - Show keyboard shortcuts overlay

Implementation:

// src/hooks/useKeyboardShortcuts.ts
export function useKeyboardShortcuts(handlers: ShortcutHandlers) {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === '/' && !isInputFocused()) {
        e.preventDefault();
        handlers.focusSearch();
      }
      // ... more shortcuts
    };
    
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [handlers]);
}

5. Bulk Actions (Priority: Low)

Complexity: Medium
Estimated Effort: 1 day

Actions:

• Multi-select test runs (checkboxes)
• Export selected to CSV/JSON
• Compare selected runs
• Add to custom report

---

Technical Implementation

Dependencies to Add

{
  "fuse.js": "^7.0.0",  // Fuzzy search
  "date-fns": "^3.0.0"   // Date range handling
}

Localstorage Schema

interface DashboardPreferences {
  savedSearches: SavedSearch[];
  searchHistory: SearchHistoryItem[];
  keyboardShortcutsEnabled: boolean;
  defaultFilters: FilterState;
}

---

Implementation Phases

Phase 1: Core Navigation (3 days)

• Advanced search with multi-field support
• Fuzzy matching integration
• Smart filter presets
• Deep linking with URL state

Phase 2: UX Enhancements (2 days)

• Keyboard shortcuts
• Search history persistence
• Saved searches
• Shortcut overlay (? key)

Phase 3: Power Features (2 days)

• Bulk selection
• Export functionality
• Bulk comparison
• Custom reports

---

Acceptance Criteria Checklist

• Search works across all fields
• Saved searches persist across sessions
• Deep links restore full state
• Keyboard shortcuts work for all actions
• Filter presets are easily accessible
• Performance: Search results < 50ms
• Accessibility: All actions keyboard-accessible

---

Dependencies

Blocks: None
Blocked by: None (ready to implement)
Enhances: #79 (Flaky test filter requires analytics)

---

Recommendation

✅ Ready to implement - Basic infrastructure is in place. Prioritize Phase 1 (core navigation) for maximum user value.

Suggested Implementation Order:

1. Advanced search with fuzzy matching (highest impact)
2. Deep linking (enables sharing)
3. Smart filter presets
4. Keyboard shortcuts
5. Bulk actions (power users)

---

🤖 Generated with Claude Code