noisedestroyers
36a576dc2c
- 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.
148 lines
2.2 KiB
Plaintext
148 lines
2.2 KiB
Plaintext
/* 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; |