Files
StreamLens/MAXIMUM_WIDTH_LAYOUT.md
noisedestroyers 36a576dc2c Enhanced Textual TUI with proper API usage and documentation
- 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.
2025-07-27 18:37:55 -04:00

4.2 KiB

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

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

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.