StreamLens/BUTTON_FILTER_LAYOUT.md

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!