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.
This commit is contained in:
148
analyzer/tui/textual/styles/streamlens.tcss
Normal file
148
analyzer/tui/textual/styles/streamlens.tcss
Normal file
@@ -0,0 +1,148 @@
|
||||
/* StreamLens Textual CSS Styling */
|
||||
|
||||
/* Main application layout */
|
||||
#main-container {
|
||||
height: 1fr;
|
||||
padding: 1;
|
||||
}
|
||||
|
||||
#status-summary {
|
||||
height: 1;
|
||||
background: $primary;
|
||||
color: $text;
|
||||
text-align: center;
|
||||
margin-bottom: 1;
|
||||
}
|
||||
|
||||
/* Flow Analysis Tab Styling */
|
||||
#flow-title {
|
||||
height: 1;
|
||||
text-align: center;
|
||||
text-style: bold;
|
||||
color: $accent;
|
||||
margin-bottom: 1;
|
||||
}
|
||||
|
||||
#flows-table {
|
||||
height: 1fr;
|
||||
border: solid $primary;
|
||||
}
|
||||
|
||||
#flows-table:focus {
|
||||
border: solid $accent;
|
||||
}
|
||||
|
||||
/* Enhanced flow styling */
|
||||
.enhanced-flow {
|
||||
background: $success 50%;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
/* Packet Decoder 3-panel layout */
|
||||
#flow-summary-panel {
|
||||
width: 25%;
|
||||
border: solid $primary;
|
||||
margin-right: 1;
|
||||
}
|
||||
|
||||
#packet-list-panel {
|
||||
width: 1fr;
|
||||
border: solid $primary;
|
||||
margin-right: 1;
|
||||
}
|
||||
|
||||
#field-details-panel {
|
||||
width: 25%;
|
||||
border: solid $primary;
|
||||
}
|
||||
|
||||
#flow-summary-title, #packet-list-title, #field-details-title {
|
||||
height: 1;
|
||||
text-align: center;
|
||||
text-style: bold;
|
||||
color: $accent;
|
||||
background: $surface;
|
||||
}
|
||||
|
||||
#flow-tree, #packet-table, #field-tree {
|
||||
height: 1fr;
|
||||
}
|
||||
|
||||
/* Statistics Dashboard */
|
||||
#stats-title {
|
||||
height: 1;
|
||||
text-align: center;
|
||||
text-style: bold;
|
||||
color: $accent;
|
||||
margin-bottom: 1;
|
||||
}
|
||||
|
||||
#metrics-summary {
|
||||
height: 3;
|
||||
margin-bottom: 1;
|
||||
}
|
||||
|
||||
#metrics-summary Static {
|
||||
width: 1fr;
|
||||
border: solid $primary;
|
||||
margin-right: 1;
|
||||
text-align: center;
|
||||
padding: 1;
|
||||
}
|
||||
|
||||
#metrics-summary Static:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
DataTable {
|
||||
height: 1fr;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
DataTable .even {
|
||||
background: $surface;
|
||||
}
|
||||
|
||||
DataTable .odd {
|
||||
background: $background;
|
||||
}
|
||||
|
||||
DataTable .cursor {
|
||||
background: $accent;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
/* Tree styling */
|
||||
Tree {
|
||||
height: 1fr;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
Tree > .tree--label {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
Tree > .tree--label:hover {
|
||||
background: $primary 30%;
|
||||
}
|
||||
|
||||
/* General widget styling */
|
||||
TabbedContent {
|
||||
height: 1fr;
|
||||
}
|
||||
|
||||
TabPane {
|
||||
height: 1fr;
|
||||
padding: 1;
|
||||
}
|
||||
|
||||
/* Color scheme */
|
||||
$primary: blue;
|
||||
$accent: cyan;
|
||||
$success: green;
|
||||
$warning: yellow;
|
||||
$error: red;
|
||||
$surface: grey 20%;
|
||||
$background: black;
|
||||
$text: white;
|
||||
208
analyzer/tui/textual/styles/streamlens_v2.tcss
Normal file
208
analyzer/tui/textual/styles/streamlens_v2.tcss
Normal file
@@ -0,0 +1,208 @@
|
||||
/* StreamLens V2 - TipTop-Inspired Styling */
|
||||
|
||||
/* Color Scheme - Dark theme with vibrant accents */
|
||||
$primary: #0080ff;
|
||||
$primary-lighten-1: #3399ff;
|
||||
$primary-lighten-2: #66b3ff;
|
||||
$primary-lighten-3: #99ccff;
|
||||
|
||||
$accent: #00ffcc;
|
||||
$success: #00ff88;
|
||||
$warning: #ffcc00;
|
||||
$error: #ff3366;
|
||||
|
||||
$surface: #1a1a1a;
|
||||
$surface-lighten-1: #262626;
|
||||
$surface-lighten-2: #333333;
|
||||
$background: #0d0d0d;
|
||||
$text: #ffffff;
|
||||
$text-muted: #999999;
|
||||
|
||||
/* Main Application Layout */
|
||||
Screen {
|
||||
background: $background;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 1fr;
|
||||
background: $background;
|
||||
}
|
||||
|
||||
/* Metrics Bar - Horizontal compact display at top */
|
||||
#metrics-bar {
|
||||
height: 7;
|
||||
padding: 1;
|
||||
background: $surface;
|
||||
border-bottom: thick $primary;
|
||||
align: center middle;
|
||||
}
|
||||
|
||||
MetricCard {
|
||||
width: 1fr;
|
||||
height: 5;
|
||||
margin: 0 1;
|
||||
max-width: 20;
|
||||
border: tall $primary-lighten-2;
|
||||
padding: 0 1;
|
||||
align: center middle;
|
||||
}
|
||||
|
||||
/* Content Area - Three column layout */
|
||||
#content-area {
|
||||
height: 1fr;
|
||||
padding: 1;
|
||||
}
|
||||
|
||||
/* Panel Styling */
|
||||
.panel {
|
||||
border: solid $primary-lighten-3;
|
||||
padding: 1;
|
||||
margin: 0 1;
|
||||
}
|
||||
|
||||
.panel-wide {
|
||||
border: solid $primary-lighten-3;
|
||||
padding: 1;
|
||||
margin: 0 1;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
text-align: center;
|
||||
text-style: bold;
|
||||
color: $accent;
|
||||
margin-bottom: 1;
|
||||
}
|
||||
|
||||
/* Left Panel - Main Flow Table (expanded) */
|
||||
#left-panel {
|
||||
width: 70%;
|
||||
background: $surface;
|
||||
}
|
||||
|
||||
/* Right Panel - Details */
|
||||
#right-panel {
|
||||
width: 30%;
|
||||
background: $surface;
|
||||
}
|
||||
|
||||
/* Sparkline Charts */
|
||||
SparklineWidget {
|
||||
height: 5;
|
||||
margin-bottom: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Enhanced Flow Table */
|
||||
#flows-data-table {
|
||||
height: 1fr;
|
||||
scrollbar-background: $surface-lighten-1;
|
||||
scrollbar-color: $primary;
|
||||
scrollbar-size: 1 1;
|
||||
}
|
||||
|
||||
#flows-data-table > .datatable--header {
|
||||
background: $surface-lighten-2;
|
||||
color: $accent;
|
||||
text-style: bold;
|
||||
}
|
||||
|
||||
#flows-data-table > .datatable--cursor {
|
||||
background: $primary 30%;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
#flows-data-table > .datatable--hover {
|
||||
background: $primary 20%;
|
||||
}
|
||||
|
||||
#flows-data-table > .datatable--odd-row {
|
||||
background: $surface;
|
||||
}
|
||||
|
||||
#flows-data-table > .datatable--even-row {
|
||||
background: $surface-lighten-1;
|
||||
}
|
||||
|
||||
/* Flow Details Panel */
|
||||
FlowDetailsPanel {
|
||||
padding: 1;
|
||||
}
|
||||
|
||||
FlowDetailsPanel Panel {
|
||||
margin-bottom: 1;
|
||||
}
|
||||
|
||||
/* Status Colors */
|
||||
.status-normal {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
color: $error;
|
||||
}
|
||||
|
||||
.status-enhanced {
|
||||
color: $accent;
|
||||
text-style: bold;
|
||||
}
|
||||
|
||||
/* Quality Indicators */
|
||||
.quality-high {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
.quality-medium {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.quality-low {
|
||||
color: $error;
|
||||
}
|
||||
|
||||
/* Animations and Transitions */
|
||||
.updating {
|
||||
background: $primary 10%;
|
||||
transition: background 200ms;
|
||||
}
|
||||
|
||||
/* Header and Footer */
|
||||
Header {
|
||||
background: $surface;
|
||||
color: $text;
|
||||
border-bottom: solid $primary;
|
||||
}
|
||||
|
||||
Footer {
|
||||
background: $surface;
|
||||
color: $text-muted;
|
||||
border-top: solid $primary;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
Vertical {
|
||||
scrollbar-size: 1 1;
|
||||
scrollbar-background: $surface-lighten-1;
|
||||
scrollbar-color: $primary;
|
||||
}
|
||||
|
||||
Horizontal {
|
||||
scrollbar-size: 1 1;
|
||||
scrollbar-background: $surface-lighten-1;
|
||||
scrollbar-color: $primary;
|
||||
}
|
||||
|
||||
/* Focus States */
|
||||
DataTable:focus {
|
||||
border: solid $accent;
|
||||
}
|
||||
|
||||
/* Panel Borders */
|
||||
Static {
|
||||
border: round $primary;
|
||||
}
|
||||
|
||||
/* End of styles */
|
||||
Reference in New Issue
Block a user