tabbed frametype filtering

TAB_FIXES_SUMMARY.md

@@ -0,0 +1,71 @@
+# Tab Display Fixes Summary
+
+## ✅ Fixed Issues
+
+### 1. **ID Sanitization**
+- Fixed frame type IDs that contained special characters (-, :)
+- Ensures `CH10-Data` becomes `CH10_Data` in IDs
+- Fixed all queries to use sanitized IDs consistently
+
+### 2. **Stats Panel Updates**
+- Changed from direct `_renderable` manipulation to proper update method
+- Added `update_content()` method to properly refresh statistics
+- Stats panel now properly displays data after loading
+
+### 3. **CSS Tab Layout**
+- Added proper CSS for horizontal tab bar display
+- Set `dock: top` for tab bar positioning
+- Defined proper dimensions for tab content areas
+- Split layout: 70% flow table, 30% stats panel
+
+### 4. **Data Refresh**
+- Fixed `refresh_data()` to use correct sanitized IDs
+- Ensured all tabs refresh when data is loaded
+- Stats panels now update with actual flow statistics
+
+## 🎨 Expected Layout
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [Overview] [CH10-Data] [UDP] [PTP-Sync] [TMATS] [IGMP]     │ <- Horizontal tab bar
+├─────────────────────────────────────────────────────────────┤
+│                                                   │         │
+│  Flow Table (70%)                                │  Stats  │
+│  - Shows flows with this frame type              │  Panel  │
+│  - IPs, ports, packets, timing                   │  (30%)  │
+│                                                   │         │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## 📊 Tab Content Structure
+
+Each frame-type tab shows:
+
+### **Left Side - Flow Table (70%)**
+- Flow ID, Source/Dest IPs and ports
+- Protocol and packet counts
+- Timing statistics (avg/std deviation)
+- Outlier counts and quality scores
+
+### **Right Side - Stats Panel (30%)**
+- Total flows with this frame type
+- Total packet count
+- Aggregate timing statistics
+- Overall outlier rate
+- Average inter-arrival time
+
+## 🔧 Technical Changes
+
+1. **Sanitized widget IDs**: `table-CH10_Data` instead of `table-CH10-Data`
+2. **Proper CSS selectors**: Using `>` for direct children
+3. **Fixed dimensions**: Explicit width percentages for layout
+4. **Update mechanism**: Proper content refresh methods
+
+## 🎯 Next Steps
+
+If tabs are still appearing stacked:
+1. The Textual version might need specific tab layout directives
+2. May need to check if TabbedContent is being properly initialized
+3. Could add explicit layout constraints in compose()
+
+The data should now refresh properly when the PCAP is loaded!