# Button-Based Frame Type Filter Layout

## ✅ New Design Implemented

Completely redesigned the interface with filter buttons above the grid view as requested.

## 🎯 Layout Structure

```
┌─────────────────────────────────────────────────────────────┐
│ Progress Bar (when loading)                                 │
├─────────────────────────────────────────────────────────────┤
│ Metrics: Flows | Pkts/s | Vol/s | Enhanced | Outliers      │
├─────────────────────────────────────────────────────────────┤
│ [1. Overview] [2. CH10-Data] [3. UDP] [4. PTP-Sync]...     │ <- Filter Buttons
├─────────────────────────────────────────────────────────────┤
│                                                   │         │
│  Flow Grid (70%)                                 │  Flow   │
│  - Shows filtered flows                          │ Details │
│  - Frame-type specific columns                   │ (30%)   │
│  - One row per flow                              │         │
│                                                   │         │
└─────────────────────────────────────────────────────────────┘
```

## 🔧 Key Features

### **Filter Button Bar**
- **1. Overview** - Shows all flows with frame type summary
- **2-9, 0** - Frame type specific filters (dynamically created)
- **Active button** highlighted in blue
- **Button counts** show number of flows for each frame type

### **Grid View Modes**

#### **Overview Mode (Key: 1)**
- Shows ALL flows (one row per flow)
- Columns: #, Source, Destination, Protocol, Packets, Volume, Frame Types, Status
- Frame Types column shows top 3 frame types per flow

#### **Frame Type Mode (Keys: 2-9, 0)**
- Shows ONLY flows containing that frame type
- Columns: #, Source, Destination, Protocol, [FrameType] Packets, Avg ΔT, Std ΔT, Min ΔT, Max ΔT, Outliers, Quality
- Frame-type specific timing statistics

## ⌨️ Keyboard Controls

### **Frame Type Selection**
- **`1`** - Overview (all flows)
- **`2`** - First detected frame type (e.g., CH10-Data)
- **`3`** - Second detected frame type (e.g., UDP)
- **`4-9, 0`** - Additional frame types as detected

### **Other Controls**
- **`p`** - Pause/Resume updates
- **`d`** - Show details
- **`r`** - Generate report
- **`o`** - Copy outliers
- **`v`** - Toggle view mode (reserved for future use)
- **`q`** - Quit

## 📊 Frame Type Examples

Based on your PCAP data, buttons would show:

```
[1. Overview]  [2. CH10-Data(1)]  [3. UDP(6)]  [4. PTP-Signaling(2)]  [5. TMATS(1)]
```

### **Pressing "2" shows CH10-Data filtered view:**
```
#  Source           Dest            Proto  CH10-Data Packets  Avg ΔT    Std ΔT    Outliers  Quality
1  192.168.4.89:... 239.1.2.10:...  UDP    1,105             102.2ms   5.1ms     2         99%
```

### **Pressing "3" shows UDP filtered view:**
```
#  Source           Dest            Proto  UDP Packets  Avg ΔT    Std ΔT    Outliers  Quality
1  192.168.4.89:... 239.1.2.10:...  UDP    228         492.9ms   125.3ms   0         100%
2  11.59.19.202:... 239.0.1.133:... UDP    113         999.4ms   45.2ms    0         100%
3  192.168.43.111:. 192.168.255:... UDP    48          2248.9ms  567.1ms   0         95%
...
```

## 🎨 Visual Styling

- **Active button**: Blue background (#0080ff) with bold white text
- **Inactive buttons**: Dark background (#262626) with gray text
- **Hover effect**: Lighter background on mouse over
- **Button counts**: Show number of flows for each frame type
- **Quality colors**: Green (>90%), Yellow (70-90%), Red (<70%)

## ⚡ Performance

- **Dynamic buttons**: Only creates buttons for detected frame types
- **Efficient filtering**: Reuses existing flow data structures
- **Real-time updates**: Buttons and counts update as new data loads
- **Memory efficient**: Single grid view, just changes columns/filtering

## 🎯 User Workflow

1. **Start with Overview** (default) - see all flows
2. **Press number key** to filter by frame type
3. **View frame-specific timing** statistics in filtered mode
4. **Switch between filters** to analyze different protocols
5. **All keyboard shortcuts** work in any mode

This matches exactly what you requested: buttons above the grid, number key selection, and filtered views showing frame-type specific statistics!