Streak Filtering Challenge

gistfile1.txt

Below is a **Notion-friendly** version of the design doc, structured with clear headings, bullet points, and spacing for easier readability and navigation. Feel free to copy/paste and adjust formatting as needed in Notion.

---

# Text-Based, Chip-Style Filtering UI

### Overview
This document outlines a proposed **text-based, chip-style filtering UI** for Streak’s pipeline view. The goal is to replace the large, cumbersome “Filter” panel with a more intuitive, space-efficient, and keyboard-friendly interface.

---

## Current Problems

1. **Large & Janky UI**  
   - Existing filter modal is vertically huge, pushing the pipeline table off-screen.  
   - No easy way to see filtering results in real time.

2. **Inefficient Interaction**  
   - Users must click through numerous dropdowns to filter, sort, or group, making exploratory filtering slow.  
   - Columns can be built-in or custom, with no quick search support.

3. **Lack of Search & Autocomplete**  
   - Manual scrolling is cumbersome with many possible columns.  
   - No fuzzy matching to quickly find the target column.

---

## Proposed Solution

### 1. Text-Based Input with Autocomplete
- A single text field where users **type column names**.  
- **Autocomplete suggestions** appear as users type (e.g., typing “pati” suggests “Patients Referred”).  
- Once a column is chosen, users select an **operator** (e.g., `=`, `>`, `contains`) and enter a **value**.

### 2. Chipification
- Completed **column-operator-value** combinations become **chips** (e.g., `Patients Referred: > 5`).
- Users can keep typing to add additional chips, each representing a filter condition.

### 3. Keyboard-Friendly
- Designed to support **arrow keys**, **tab**, and **backspace** for editing or removing chips.  
- Minimizes mouse usage, speeding up exploratory filtering.

### 4. Space-Efficient Real-Time Updates
- As filters are typed, the pipeline table can **update in place**, avoiding the need for a large modal.  
- Allows quick iteration and immediate visual feedback.

---

## Example Flow
1. User clicks the new filter text box.  
2. Types “pati,” sees suggestions like “Patients Referred” – selects it using arrow keys.  
3. Chooses operator “>” from a dropdown or types `>` directly.  
4. Enters a numeric value “5” – system forms a chip `Patients Referred: > 5`.  
5. User can continue typing another filter or press **Enter** to see final results.

---

## Additional Considerations

- **Multiple Filter Types**  
  Must handle **text**, **number**, **date**, **dropdown**, and **multi-tag** columns.  

- **Operators**  
  Each column type should support relevant operators (e.g., `=`, `>`, `contains`, `is set`, `is not set`).  

- **Sorting & Grouping (Future Phase)**  
  Could be integrated with similar text syntax (e.g., `sort: [column] asc/desc`) or separate UI controls.

- **Implementation**  
  - **Data Structure**: Store filter chips as objects (`{ column, operator, value }`).  
  - **Autocomplete**: Possibly use or build a fuzzy matching library for columns.  
  - **Styling**: Use existing component system for consistent look and feel.

---

## Summary
By **replacing the large modal** with a **compact, text-driven filter bar**, Streak users gain:
- **Faster, keyboard-driven filtering**  
- **Clear, chip-based conditions**  
- **Real-time updates** to the pipeline view  
- **Better scalability** for pipelines with hundreds of columns and large datasets  

Overall, this design **reduces UI friction**, **improves discoverability**, and **enables more powerful filtering** in a minimal, modern interface.