248 lines
8.9 KiB
Markdown
248 lines
8.9 KiB
Markdown
# StreamLens Button Layout & Table Sorting Improvements
|
|
|
|
## Overview
|
|
This update includes three major improvements to the StreamLens TUI interface:
|
|
1. **Compact button layout** - Buttons reduced from 3 rows to 1 row
|
|
2. **Smart button ordering** - Buttons ordered by frame type count (highest first)
|
|
3. **Table sorting** - Sortable columns with Alt+1...Alt+0 keyboard shortcuts
|
|
|
|
---
|
|
|
|
## 1. Compact Button Layout ✅
|
|
|
|
### Changes Made
|
|
- **Filter bar height**: 3 rows → 1 row (`height: 3` → `height: 1`)
|
|
- **Button height**: 3 rows → 1 row (`height: 3` → `height: 1`)
|
|
- **Button width**: Reduced from 14 to 12 characters (`min-width: 14` → `min-width: 12`)
|
|
|
|
### Visual Impact
|
|
**Before:**
|
|
```
|
|
┌─────────────────────────────────────────────┐
|
|
│ 1. Overview │
|
|
│ │
|
|
│ │
|
|
└─────────────────────────────────────────────┘
|
|
┌─────────────────────────────────────────────┐
|
|
│ 2. CH10-Data (1105) │
|
|
│ │
|
|
│ │
|
|
└─────────────────────────────────────────────┘
|
|
```
|
|
|
|
**After:**
|
|
```
|
|
[1. Overview] [2. CH10-Data (1105)] [3. UDP (443)] [4. PTP-Sync (240)]
|
|
```
|
|
|
|
### Benefits
|
|
- **More screen space** for the data table
|
|
- **Cleaner, more compact interface**
|
|
- **Better visual hierarchy** - buttons don't dominate the screen
|
|
|
|
---
|
|
|
|
## 2. Smart Button Ordering ✅
|
|
|
|
### Changes Made
|
|
- **Dynamic reordering**: Buttons now sort by frame type count (highest → lowest)
|
|
- **Real-time updates**: Button order updates as data is parsed
|
|
- **Hotkey preservation**: Keys 2-9,0 maintain their function but map to different frame types
|
|
|
|
### Ordering Logic
|
|
```python
|
|
# Sort frame types by total packet count across all flows
|
|
sorted_frame_types = sorted(frame_types.items(), key=lambda x: x[1], reverse=True)
|
|
|
|
# Assign hotkeys 2-9,0 to highest count frame types first
|
|
for i, (frame_type, flow_count) in enumerate(sorted_frame_types[:9]):
|
|
btn = FrameTypeButton(frame_type, hotkeys[i], flow_count)
|
|
```
|
|
|
|
### Example Ordering
|
|
If your PCAP contains:
|
|
- CH10-Data: 1,105 packets across 1 flow
|
|
- UDP: 443 packets across 5 flows
|
|
- PTP-Signaling: 240 packets across 3 flows
|
|
- TMATS: 15 packets across 1 flow
|
|
|
|
Button layout becomes:
|
|
```
|
|
[1. Overview] [2. CH10-Data (1)] [3. UDP (5)] [4. PTP-Signaling (3)] [5. TMATS (1)]
|
|
```
|
|
|
|
### Benefits
|
|
- **Most important data first** - Users see high-volume frame types immediately
|
|
- **Intuitive navigation** - Key 2 always goes to the most common frame type
|
|
- **Consistent experience** - Button order reflects data importance
|
|
|
|
---
|
|
|
|
## 3. Table Sorting ✅
|
|
|
|
### Changes Made
|
|
- **Keyboard shortcuts**: Alt+1 through Alt+0 for columns 1-10
|
|
- **Smart sorting**: Handles numbers, text, units (ms, MB, KB, %), and special values
|
|
- **Toggle direction**: Same key toggles ascending/descending
|
|
- **Both view modes**: Works in Overview and Frame Type specific views
|
|
|
|
### Key Bindings
|
|
| Key Combination | Action | Column |
|
|
|-----------------|--------|---------|
|
|
| `Alt+1` | Sort by column 1 | # (row number) |
|
|
| `Alt+2` | Sort by column 2 | Source IP:Port |
|
|
| `Alt+3` | Sort by column 3 | Destination IP:Port |
|
|
| `Alt+4` | Sort by column 4 | Protocol |
|
|
| `Alt+5` | Sort by column 5 | Total Packets / Frame Type Packets |
|
|
| `Alt+6` | Sort by column 6 | Frame Type columns / Avg ΔT |
|
|
| `Alt+7` | Sort by column 7 | Additional frame types / Std ΔT |
|
|
| `Alt+8` | Sort by column 8 | More columns / Min ΔT |
|
|
| `Alt+9` | Sort by column 9 | Status / Max ΔT |
|
|
| `Alt+0` | Sort by column 10 | Last column / Outliers |
|
|
|
|
### Smart Sorting Features
|
|
|
|
**Numeric Values:**
|
|
- `1,234` → 1234 (comma removal)
|
|
- `10` → 10 (integer)
|
|
- `15.7` → 15.7 (float)
|
|
|
|
**Units:**
|
|
- `102.2ms` → 102.2 (milliseconds)
|
|
- `1.5MB` → 1,500,000 (megabytes to bytes)
|
|
- `256KB` → 256,000 (kilobytes to bytes)
|
|
- `95%` → 95 (percentage)
|
|
|
|
**Special Values:**
|
|
- `N/A` → -1 (sorts to end)
|
|
- `-` → -1 (sorts to end)
|
|
|
|
**Text Values:**
|
|
- `UDP` → `udp` (lowercase for case-insensitive sorting)
|
|
- `192.168.1.1:5000` → alphabetical sorting
|
|
|
|
### Usage Examples
|
|
|
|
**Sort by packet count (descending):**
|
|
1. Press `Alt+5` to sort by packet count column
|
|
2. Press `Alt+5` again to reverse order (ascending)
|
|
|
|
**Sort by source IP:**
|
|
1. Press `Alt+2` to sort by source column
|
|
2. IPs will be sorted alphabetically: 11.x.x.x, 192.168.x.x, etc.
|
|
|
|
**Sort by timing (in Frame Type view):**
|
|
1. Switch to a frame type (press 2-9)
|
|
2. Press `Alt+6` to sort by average delta time
|
|
3. Values like `102.2ms`, `0.5ms` will be sorted numerically
|
|
|
|
### Benefits
|
|
- **Quick data analysis** - Find highest/lowest values instantly
|
|
- **Multiple sort criteria** - Sort by any column of interest
|
|
- **Consistent behavior** - Same shortcuts work in all views
|
|
- **Smart handling** - Proper numeric sorting for data with units
|
|
|
|
---
|
|
|
|
## Implementation Details
|
|
|
|
### Files Modified
|
|
1. **`filtered_flow_view.py`**:
|
|
- Updated CSS for 1-row button layout
|
|
- Added dynamic button reordering by count
|
|
- Added table sorting with Alt+1...Alt+0 bindings
|
|
- Implemented smart sort key extraction
|
|
|
|
2. **`app_v2.py`**:
|
|
- Added Alt+1...Alt+0 key bindings to main app
|
|
- Added `action_sort_table_column()` method to forward sorting to FilteredFlowView
|
|
|
|
### Key Classes/Methods Added
|
|
- **Sorting state**: `sort_column`, `sort_reverse` attributes
|
|
- **Sort action**: `action_sort_column(column_index)` method
|
|
- **Sort key extraction**: `_get_sort_key(row_data, column_index)` method
|
|
- **Dynamic button ordering**: Enhanced `refresh_frame_types()` method
|
|
|
|
### Thread Safety
|
|
- All sorting operations work with existing thread-safe data access
|
|
- Button reordering uses the same flow data access patterns
|
|
- No new concurrency concerns introduced
|
|
|
|
---
|
|
|
|
## Testing Results ✅
|
|
|
|
All improvements have been tested and verified:
|
|
|
|
```
|
|
✅ Button height set to 1 row
|
|
✅ Filter bar height set to 1 row
|
|
✅ Highest count frame type (CH10-Data) will be first
|
|
✅ Second highest count frame type (UDP) will be second
|
|
✅ Sorting state variables initialized
|
|
✅ Sort action method exists
|
|
✅ Sort key method exists
|
|
✅ Numeric sort key extraction works (comma removal)
|
|
✅ String sort key extraction works (lowercase)
|
|
✅ alt+1...alt+0 bindings found in FilteredFlowView
|
|
✅ alt+1...alt+0 bindings found in main app
|
|
```
|
|
|
|
### Performance Impact
|
|
- **Minimal overhead** - Sorting only occurs when user requests it
|
|
- **Efficient implementation** - Data collected once, sorted in memory
|
|
- **No parsing impact** - Background parsing unchanged
|
|
- **Responsive UI** - Sorting happens instantly on user input
|
|
|
|
---
|
|
|
|
## User Experience Improvements
|
|
|
|
### Immediate Benefits
|
|
1. **More data visible** - Compact buttons free up 2 rows of screen space
|
|
2. **Intuitive navigation** - Most important frame types appear first
|
|
3. **Quick analysis** - Sort any column instantly with keyboard shortcuts
|
|
4. **Consistent interface** - All improvements work together seamlessly
|
|
|
|
### Workflow Enhancement
|
|
**Before**: Users had to scroll through buttons and manually analyze unsorted data
|
|
**After**: Users see key frame types immediately and can sort data by any criteria instantly
|
|
|
|
### Accessibility
|
|
- **Keyboard-driven** - All features accessible via keyboard shortcuts
|
|
- **Visual hierarchy** - Important data emphasized through positioning and sorting
|
|
- **Reduced cognitive load** - Less visual clutter, more organized data presentation
|
|
|
|
---
|
|
|
|
## Backward Compatibility ✅
|
|
|
|
All existing functionality is preserved:
|
|
- **Same keyboard shortcuts** for frame type selection (1-9,0)
|
|
- **Same data accuracy** and analysis features
|
|
- **Same parsing behavior** and background processing
|
|
- **Same visual styling** (just more compact)
|
|
|
|
New features are additive only - existing users can continue using the interface exactly as before, with optional access to new sorting capabilities.
|
|
|
|
---
|
|
|
|
## Future Enhancements
|
|
|
|
Potential future improvements based on this foundation:
|
|
1. **Column width adjustment** - Auto-size columns based on content
|
|
2. **Multi-column sorting** - Secondary sort criteria
|
|
3. **Sort indicators** - Visual arrows showing sort direction
|
|
4. **Saved sort preferences** - Remember user's preferred column sorting
|
|
5. **Advanced filtering** - Combine button filtering with column-based filtering
|
|
|
|
---
|
|
|
|
## Conclusion
|
|
|
|
These improvements significantly enhance the StreamLens TUI by:
|
|
- **Maximizing data visibility** with compact 1-row button layout
|
|
- **Prioritizing important data** with count-based button ordering
|
|
- **Enabling rapid analysis** with comprehensive table sorting
|
|
|
|
The result is a more efficient, intuitive, and powerful interface for network flow analysis. |