71 lines
2.8 KiB
Markdown
71 lines
2.8 KiB
Markdown
# 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! |