- Fixed DataTable row selection and event handling - Added explicit column keys to prevent auto-generated keys - Implemented row-to-flow mapping for reliable selection tracking - Converted left metrics panel to horizontal top bar - Fixed all missing FlowStats/EnhancedAnalysisData attributes - Created comprehensive Textual API documentation in Documentation/textual/ - Added validation checklist to prevent future API mismatches - Preserved cursor position during data refreshes - Fixed RowKey type handling and event names The TUI now properly handles flow selection, displays metrics in a compact top bar, and correctly correlates selected rows with the details pane.
121 lines
4.2 KiB
Markdown
121 lines
4.2 KiB
Markdown
# Maximum Width Dynamic Layout
|
|
|
|
## Overview
|
|
|
|
The Flow Analysis View now dynamically adjusts to use the maximum available terminal width, ensuring optimal use of screen real estate regardless of terminal size.
|
|
|
|
## Dynamic Width Calculation
|
|
|
|
### Available Space Calculation
|
|
```python
|
|
available_width = terminal_width - 16 # 4 chars left + 4 chars right + 8 safety margin
|
|
```
|
|
|
|
**Prevents Line Wrapping**: Very conservative calculation ensures content never exceeds terminal width, even on narrow terminals
|
|
|
|
### Minimum Column Requirements
|
|
| Column | Min Width | Purpose |
|
|
|--------|-----------|---------|
|
|
| Flow # | 3 chars | Flow number with space |
|
|
| Source | 15 chars | Compact IP:port |
|
|
| Proto | 4 chars | Transport protocol |
|
|
| Destination | 15 chars | Compact IP:port |
|
|
| Extended | 6 chars | Extended protocol |
|
|
| Frame Type | 8 chars | Frame type name |
|
|
| Pkts | 6 chars | Right-aligned numbers |
|
|
| Volume | 8 chars | Right-aligned with units |
|
|
| Timing | 8 chars | Right-aligned with units |
|
|
| Quality | 8 chars | Right-aligned percentages |
|
|
|
|
**Total Minimum**: 81 characters
|
|
|
|
### Space Distribution Algorithm
|
|
|
|
1. **Check Available Space**: If terminal width > minimum requirements
|
|
2. **Calculate Extra Space**: `extra = available_width - minimum_total`
|
|
3. **Distribute to Text Columns**: Extra space goes to expandable columns:
|
|
- Source (IP:port endpoints)
|
|
- Destination (IP:port endpoints)
|
|
- Extended (protocol names)
|
|
- Frame Type (frame type names)
|
|
|
|
4. **Equal Distribution**: `extra_per_column = extra_space ÷ 4`
|
|
5. **Remainder Handling**: Any leftover space goes to Source and Destination columns
|
|
|
|
### Example Width Distributions
|
|
|
|
#### Small Terminal (120 chars)
|
|
```
|
|
Available: 112 chars (120 - 8 margin)
|
|
Extra: 6 chars (112 - 106 minimum)
|
|
Distribution: +1 to Source, +1 to Destination, +1 to Extended, +1 to Frame Type, +2 remainder to Source/Dest
|
|
```
|
|
|
|
#### Medium Terminal (150 chars)
|
|
```
|
|
Available: 142 chars (150 - 8 margin)
|
|
Extra: 36 chars (142 - 106 minimum)
|
|
Distribution: +9 to each expandable column
|
|
```
|
|
|
|
#### Large Terminal (200 chars)
|
|
```
|
|
Available: 192 chars (200 - 8 margin)
|
|
Extra: 86 chars (192 - 106 minimum)
|
|
Distribution: +21 to each expandable column, +2 remainder to Source/Dest
|
|
```
|
|
|
|
## Adaptive Features
|
|
|
|
### Intelligent Truncation
|
|
- Source/Destination fields truncate based on their allocated width
|
|
- IP addresses get maximum space before port numbers
|
|
- Ellipsis (…) indicates truncated content
|
|
|
|
### Perfect Alignment
|
|
- All right-aligned columns maintain perfect edge alignment
|
|
- Sub-row indentation matches main flow number column width
|
|
- Headers automatically adjust to match column widths
|
|
|
|
### Responsive Layout
|
|
```
|
|
Small Terminal (120 chars):
|
|
# Source Proto Destination Extended Frame Type Pkts Volume Timing Quality
|
|
|
|
Large Terminal (200 chars):
|
|
# Source Proto Destination Extended Frame Type Pkts Volume Timing Quality
|
|
```
|
|
|
|
## Benefits
|
|
|
|
1. **Maximum Information Density**: Uses every available character of terminal width
|
|
2. **Scalable Design**: Works equally well on narrow and wide terminals
|
|
3. **Perfect Alignment**: All columns line up properly regardless of terminal size
|
|
4. **Responsive Text**: Important text fields expand to show more information on wider screens
|
|
5. **Consistent Metrics**: Numeric columns maintain consistent width for easy comparison
|
|
|
|
## Implementation Details
|
|
|
|
### Dynamic Column Width Object
|
|
```python
|
|
self.column_widths = {
|
|
'flow_num': 4,
|
|
'source': 25, # Dynamically calculated
|
|
'proto': 6,
|
|
'destination': 25, # Dynamically calculated
|
|
'extended': 12, # Dynamically calculated
|
|
'frame_type': 14, # Dynamically calculated
|
|
'pkts': 8,
|
|
'volume': 10,
|
|
'timing': 10,
|
|
'quality': 10
|
|
}
|
|
```
|
|
|
|
### Formatting Functions
|
|
- `_calculate_column_widths()`: Determines optimal column widths for current terminal
|
|
- `_format_headers()`: Creates header line with dynamic spacing
|
|
- `_format_flow_summary_line()`: Formats main flow lines with dynamic widths
|
|
- `_format_protocol_frame_line()`: Formats sub-rows with matching alignment
|
|
|
|
The layout now provides optimal readability and information display regardless of terminal size, from compact laptop screens to ultra-wide monitors. |