feat: highlight lost probes in sample history (#1247)

crates/trippy-tui/src/config/file.rs

@@ -294,6 +294,7 @@ pub struct ConfigThemeColors {
     pub flows_chart_text_current_color: Option<TuiColor>,
     pub flows_chart_text_non_current_color: Option<TuiColor>,
     pub samples_chart_color: Option<TuiColor>,
+    pub samples_chart_lost_color: Option<TuiColor>,
     pub help_dialog_bg_color: Option<TuiColor>,
     pub help_dialog_text_color: Option<TuiColor>,
     pub settings_dialog_bg_color: Option<TuiColor>,
@@ -331,6 +332,7 @@ impl Default for ConfigThemeColors {
             flows_chart_text_current_color: Some(theme.flows_chart_text_current),
             flows_chart_text_non_current_color: Some(theme.flows_chart_text_non_current),
             samples_chart_color: Some(theme.samples_chart),
+            samples_chart_lost_color: Some(theme.samples_chart_lost),
             help_dialog_bg_color: Some(theme.help_dialog_bg),
             help_dialog_text_color: Some(theme.help_dialog_text),
             settings_dialog_bg_color: Some(theme.settings_dialog_bg),

crates/trippy-tui/src/config/theme.rs

@@ -49,6 +49,8 @@ pub struct TuiTheme {
     pub flows_chart_text_non_current: TuiColor,
     /// The color of the samples chart.
     pub samples_chart: TuiColor,
+    /// The color of the samples chart for lost probes.
+    pub samples_chart_lost: TuiColor,
     /// The background color of the help dialog.
     pub help_dialog_bg: TuiColor,
     /// The color of the text in the help dialog.
@@ -98,6 +100,7 @@ impl Default for TuiTheme {
             flows_chart_text_current: TuiColor::LightGreen,
             flows_chart_text_non_current: TuiColor::White,
             samples_chart: TuiColor::Yellow,
+            samples_chart_lost: TuiColor::Red,
             help_dialog_bg: TuiColor::Blue,
             help_dialog_text: TuiColor::Gray,
             settings_dialog_bg: TuiColor::Blue,
@@ -192,6 +195,10 @@ impl From<(HashMap<TuiThemeItem, TuiColor>, ConfigThemeColors)> for TuiTheme {
                 .get(&TuiThemeItem::SamplesChartColor)
                 .or(cfg.samples_chart_color.as_ref())
                 .unwrap_or(&Self::default().samples_chart),
+            samples_chart_lost: *color_map
+                .get(&TuiThemeItem::SamplesChartLostColor)
+                .or(cfg.samples_chart_lost_color.as_ref())
+                .unwrap_or(&Self::default().samples_chart_lost),
             help_dialog_bg: *color_map
                 .get(&TuiThemeItem::HelpDialogBgColor)
                 .or(cfg.help_dialog_bg_color.as_ref())
@@ -289,6 +296,8 @@ pub enum TuiThemeItem {
     FlowsChartTextNonCurrentColor,
     /// The color of the samples chart.
     SamplesChartColor,
+    /// The color of the samples chart for lost probes.
+    SamplesChartLostColor,
     /// The background color of the help dialog.
     HelpDialogBgColor,
     /// The color of the text in the help dialog.

crates/trippy-tui/src/frontend/render/history.rs

@@ -1,17 +1,25 @@
 use crate::frontend::tui_app::TuiApp;
 use ratatui::layout::Rect;
 use ratatui::style::Style;
-use ratatui::widgets::{Block, BorderType, Borders, Sparkline};
+use ratatui::widgets::{Block, BorderType, Borders};
 use ratatui::Frame;
 
+use crate::frontend::render::widgets::sparkline::{EmptyBarSymbol, Sparkline};
+
 /// Render the ping history for the final hop which is typically the target.
 pub fn render(f: &mut Frame<'_>, app: &TuiApp, rect: Rect) {
     let selected_hop = app.selected_hop_or_target();
     let data = selected_hop
         .samples()
         .iter()
         .take(rect.width as usize)
-        .map(|s| (s.as_secs_f64() * 1000_f64) as u64)
+        .map(|s| {
+            if s.as_secs_f64() > 0_f64 {
+                Some((s.as_secs_f64() * 1000_f64) as u64)
+            } else {
+                None
+            }
+        })
         .collect::<Vec<_>>();
     let history = Sparkline::default()
         .block(
@@ -26,11 +34,17 @@ pub fn render(f: &mut Frame<'_>, app: &TuiApp, rect: Rect) {
                 .border_type(BorderType::Rounded)
                 .border_style(Style::default().fg(app.tui_config.theme.border)),
         )
-        .data(&data)
+        .data(data.as_slice())
         .style(
             Style::default()
                 .bg(app.tui_config.theme.bg)
                 .fg(app.tui_config.theme.samples_chart),
-        );
+        )
+        .empty_bar_style(
+            Style::default()
+                .bg(app.tui_config.theme.bg)
+                .fg(app.tui_config.theme.samples_chart_lost),
+        )
+        .empty_bar_symbol(EmptyBarSymbol::Full);
     f.render_widget(history, rect);
 }

crates/trippy-tui/src/frontend/theme.rs

@@ -46,6 +46,8 @@ pub struct Theme {
     pub flows_chart_text_non_current: Color,
     /// The color of the samples chart.
     pub samples_chart: Color,
+    /// The color of the samples chart for lost probes.
+    pub samples_chart_lost: Color,
     /// The background color of the help dialog.
     pub help_dialog_bg: Color,
     /// The color of the text in the help dialog.
@@ -95,6 +97,7 @@ impl From<TuiTheme> for Theme {
             flows_chart_text_current: Color::from(value.flows_chart_text_current),
             flows_chart_text_non_current: Color::from(value.flows_chart_text_non_current),
             samples_chart: Color::from(value.samples_chart),
+            samples_chart_lost: Color::from(value.samples_chart_lost),
             help_dialog_bg: Color::from(value.help_dialog_bg),
             help_dialog_text: Color::from(value.help_dialog_text),
             settings_dialog_bg: Color::from(value.settings_dialog_bg),

crates/trippy-tui/tests/resources/snapshots/trippy_tui__print__tests__output@tui_theme_items_match.snap

@@ -1,4 +1,4 @@
 ---
 source: crates/trippy-tui/src/print.rs
 ---
-TUIthemecoloritems:bg-color,border-color,text-color,tab-text-color,hops-table-header-bg-color,hops-table-header-text-color,hops-table-row-active-text-color,hops-table-row-inactive-text-color,hops-chart-selected-color,hops-chart-unselected-color,hops-chart-axis-color,frequency-chart-bar-color,frequency-chart-text-color,flows-chart-bar-selected-color,flows-chart-bar-unselected-color,flows-chart-text-current-color,flows-chart-text-non-current-color,samples-chart-color,help-dialog-bg-color,help-dialog-text-color,settings-tab-text-color,settings-dialog-bg-color,settings-table-header-text-color,settings-table-header-bg-color,settings-table-row-text-color,map-world-color,map-radius-color,map-selected-color,map-info-panel-border-color,map-info-panel-bg-color,map-info-panel-text-color
+TUIthemecoloritems:bg-color,border-color,text-color,tab-text-color,hops-table-header-bg-color,hops-table-header-text-color,hops-table-row-active-text-color,hops-table-row-inactive-text-color,hops-chart-selected-color,hops-chart-unselected-color,hops-chart-axis-color,frequency-chart-bar-color,frequency-chart-text-color,flows-chart-bar-selected-color,flows-chart-bar-unselected-color,flows-chart-text-current-color,flows-chart-text-non-current-color,samples-chart-color,samples-chart-lost-color,help-dialog-bg-color,help-dialog-text-color,settings-tab-text-color,settings-dialog-bg-color,settings-table-header-text-color,settings-table-header-bg-color,settings-table-row-text-color,map-world-color,map-radius-color,map-selected-color,map-info-panel-border-color,map-info-panel-bg-color,map-info-panel-text-color

trippy-config-sample.toml

@@ -360,6 +360,7 @@ flows-chart-bar-unselected-color = "darkgray"
 flows-chart-text-current-color = "lightgreen"
 flows-chart-text-non-current-color = "white"
 samples-chart-color = "yellow"
+samples-chart-lost-color = "red"
 help-dialog-bg-color = "blue"
 help-dialog-text-color = "gray"
 settings-dialog-bg-color = "blue"