From ddb080f25bfc29e6139e24754007a681ddf556d5 Mon Sep 17 00:00:00 2001
From: Erik Darling <2136037+erikdarlingdata@users.noreply.github.com>
Date: Wed, 18 Feb 2026 20:38:16 -0500
Subject: [PATCH] Fix duration chart hover tooltips, Dashboard grid lines, time
 range button hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wire ChartHoverHelper Clear/Add calls into all 4 Lite duration chart
  update methods (collector, query, proc, query store) — hover tooltips
  now show series name, value, and timestamp
- Bump Dashboard chart grid line alpha from 40 to 50 (was invisible)
- Add TimeRangeButton style with accent border + text brighten on hover
  for the hour picker buttons (1h/4h/8h/12h/24h/7d/30d)

Partial fix for #110, fixes Lite #121

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 Dashboard/Helpers/TabHelpers.cs |  2 +-
 Dashboard/ServerTab.xaml        | 14 ++++++------
 Dashboard/Themes/DarkTheme.xaml | 38 +++++++++++++++++++++++++++++++++
 Lite/Controls/ServerTab.xaml.cs |  8 +++++++
 4 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/Dashboard/Helpers/TabHelpers.cs b/Dashboard/Helpers/TabHelpers.cs
index a9cc90c9..67938549 100644
--- a/Dashboard/Helpers/TabHelpers.cs
+++ b/Dashboard/Helpers/TabHelpers.cs
@@ -132,7 +132,7 @@ public static void ApplyDarkModeToChart(WpfPlot chart)
             var darkBackground = ScottPlot.Color.FromHex("#22252b");
             var darkerBackground = ScottPlot.Color.FromHex("#111217");
             var textColor = ScottPlot.Color.FromHex("#9DA5B4");
-            var gridColor = ScottPlot.Colors.White.WithAlpha(40);
+            var gridColor = ScottPlot.Colors.White.WithAlpha(50);
 
             chart.Plot.FigureBackground.Color = darkBackground;
             chart.Plot.DataBackground.Color = darkerBackground;
diff --git a/Dashboard/ServerTab.xaml b/Dashboard/ServerTab.xaml
index a0b1d7f7..f98c1980 100644
--- a/Dashboard/ServerTab.xaml
+++ b/Dashboard/ServerTab.xaml
@@ -91,13 +91,13 @@
                 <!-- Row 1: Time Range Buttons -->
                 <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                     <TextBlock Text="Time Range:" VerticalAlignment="Center" Margin="0,0,10,0" FontWeight="Bold" Foreground="{DynamicResource ForegroundBrush}"/>
-                    <Button x:Name="GlobalLast1HourButton" Content="1 Hour" Click="GlobalTimeRange_Click" Tag="1" Margin="2,0" Padding="10,5" MinWidth="60"/>
-                    <Button x:Name="GlobalLast4HoursButton" Content="4 Hours" Click="GlobalTimeRange_Click" Tag="4" Margin="2,0" Padding="10,5" MinWidth="60"/>
-                    <Button x:Name="GlobalLast8HoursButton" Content="8 Hours" Click="GlobalTimeRange_Click" Tag="8" Margin="2,0" Padding="10,5" MinWidth="60"/>
-                    <Button x:Name="GlobalLast12HoursButton" Content="12 Hours" Click="GlobalTimeRange_Click" Tag="12" Margin="2,0" Padding="10,5" MinWidth="60"/>
-                    <Button x:Name="GlobalLast24HoursButton" Content="24 Hours" Click="GlobalTimeRange_Click" Tag="24" Margin="2,0" Padding="10,5" MinWidth="60"/>
-                    <Button x:Name="GlobalLast7DaysButton" Content="7 Days" Click="GlobalTimeRange_Click" Tag="168" Margin="2,0" Padding="10,5" MinWidth="60"/>
-                    <Button x:Name="GlobalLast30DaysButton" Content="30 Days" Click="GlobalTimeRange_Click" Tag="720" Margin="2,0" Padding="10,5" MinWidth="60"/>
+                    <Button x:Name="GlobalLast1HourButton" Content="1 Hour" Click="GlobalTimeRange_Click" Tag="1" Style="{StaticResource TimeRangeButton}"/>
+                    <Button x:Name="GlobalLast4HoursButton" Content="4 Hours" Click="GlobalTimeRange_Click" Tag="4" Style="{StaticResource TimeRangeButton}"/>
+                    <Button x:Name="GlobalLast8HoursButton" Content="8 Hours" Click="GlobalTimeRange_Click" Tag="8" Style="{StaticResource TimeRangeButton}"/>
+                    <Button x:Name="GlobalLast12HoursButton" Content="12 Hours" Click="GlobalTimeRange_Click" Tag="12" Style="{StaticResource TimeRangeButton}"/>
+                    <Button x:Name="GlobalLast24HoursButton" Content="24 Hours" Click="GlobalTimeRange_Click" Tag="24" Style="{StaticResource TimeRangeButton}"/>
+                    <Button x:Name="GlobalLast7DaysButton" Content="7 Days" Click="GlobalTimeRange_Click" Tag="168" Style="{StaticResource TimeRangeButton}"/>
+                    <Button x:Name="GlobalLast30DaysButton" Content="30 Days" Click="GlobalTimeRange_Click" Tag="720" Style="{StaticResource TimeRangeButton}"/>
                 </StackPanel>
 
                 <!-- Row 1: Action Buttons and Status -->
diff --git a/Dashboard/Themes/DarkTheme.xaml b/Dashboard/Themes/DarkTheme.xaml
index bdba8783..d5fbb78a 100644
--- a/Dashboard/Themes/DarkTheme.xaml
+++ b/Dashboard/Themes/DarkTheme.xaml
@@ -173,6 +173,44 @@
         </Setter>
     </Style>
 
+    <!-- Time Range Button Style (hour picker with visible hover) -->
+    <Style x:Key="TimeRangeButton" TargetType="Button">
+        <Setter Property="Background" Value="{StaticResource BackgroundLightBrush}"/>
+        <Setter Property="Foreground" Value="{StaticResource ForegroundDimBrush}"/>
+        <Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="Padding" Value="10,5"/>
+        <Setter Property="MinWidth" Value="60"/>
+        <Setter Property="Margin" Value="2,0"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Border x:Name="border"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="3"
+                            Padding="{TemplateBinding Padding}"
+                            TextElement.Foreground="{TemplateBinding Foreground}">
+                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="border" Property="Background" Value="{StaticResource BackgroundLighterBrush}"/>
+                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource AccentBrush}"/>
+                            <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
+                        </Trigger>
+                        <Trigger Property="IsPressed" Value="True">
+                            <Setter TargetName="border" Property="Background" Value="{StaticResource AccentPressedBrush}"/>
+                            <Setter Property="Foreground" Value="White"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <!-- No Data Message Style (for empty DataGrids) -->
     <Style x:Key="NoDataMessage" TargetType="TextBlock">
         <Setter Property="Text" Value="No data for selected time range"/>
diff --git a/Lite/Controls/ServerTab.xaml.cs b/Lite/Controls/ServerTab.xaml.cs
index 85506874..0a980681 100644
--- a/Lite/Controls/ServerTab.xaml.cs
+++ b/Lite/Controls/ServerTab.xaml.cs
@@ -1003,9 +1003,11 @@ private void UpdateQueryDurationTrendChart(List<QueryTrendPoint> data)
         var times = data.Select(d => d.CollectionTime.AddMinutes(UtcOffsetMinutes).ToOADate()).ToArray();
         var values = data.Select(d => d.Value).ToArray();
 
+        _queryDurationTrendHover?.Clear();
         var plot = QueryDurationTrendChart.Plot.Add.Scatter(times, values);
         plot.LegendText = "Query Duration";
         plot.Color = ScottPlot.Color.FromHex("#4FC3F7");
+        _queryDurationTrendHover?.Add(plot, "Query Duration");
 
         QueryDurationTrendChart.Plot.Axes.DateTimeTicksBottom();
         ReapplyAxisColors(QueryDurationTrendChart);
@@ -1025,9 +1027,11 @@ private void UpdateProcDurationTrendChart(List<QueryTrendPoint> data)
         var times = data.Select(d => d.CollectionTime.AddMinutes(UtcOffsetMinutes).ToOADate()).ToArray();
         var values = data.Select(d => d.Value).ToArray();
 
+        _procDurationTrendHover?.Clear();
         var plot = ProcDurationTrendChart.Plot.Add.Scatter(times, values);
         plot.LegendText = "Procedure Duration";
         plot.Color = ScottPlot.Color.FromHex("#81C784");
+        _procDurationTrendHover?.Add(plot, "Procedure Duration");
 
         ProcDurationTrendChart.Plot.Axes.DateTimeTicksBottom();
         ReapplyAxisColors(ProcDurationTrendChart);
@@ -1047,9 +1051,11 @@ private void UpdateQueryStoreDurationTrendChart(List<QueryTrendPoint> data)
         var times = data.Select(d => d.CollectionTime.AddMinutes(UtcOffsetMinutes).ToOADate()).ToArray();
         var values = data.Select(d => d.Value).ToArray();
 
+        _queryStoreDurationTrendHover?.Clear();
         var plot = QueryStoreDurationTrendChart.Plot.Add.Scatter(times, values);
         plot.LegendText = "Query Store Duration";
         plot.Color = ScottPlot.Color.FromHex("#FFB74D");
+        _queryStoreDurationTrendHover?.Add(plot, "Query Store Duration");
 
         QueryStoreDurationTrendChart.Plot.Axes.DateTimeTicksBottom();
         ReapplyAxisColors(QueryStoreDurationTrendChart);
@@ -1923,6 +1929,7 @@ private void UpdateCollectorDurationChart(List<CollectionLogRow> data)
             .OrderBy(g => g.Key)
             .ToList();
 
+        _collectorDurationHover?.Clear();
         int colorIdx = 0;
         foreach (var group in groups)
         {
@@ -1937,6 +1944,7 @@ private void UpdateCollectorDurationChart(List<CollectionLogRow> data)
             scatter.Color = ScottPlot.Color.FromHex(SeriesColors[colorIdx % SeriesColors.Length]);
             scatter.LineWidth = 2;
             scatter.MarkerSize = 0;
+            _collectorDurationHover?.Add(scatter, group.Key);
             colorIdx++;
         }