Repository navigation
Keep Viewer charts and grids readable at 1366x768 (#6652) - #6674
Merged
Merged
Conversation
… not break mid-word at 1366x768 (#6652)
Each label and its box (Query tag, Compare, Auto-refresh interval, Times) is now one horizontal StackPanel item in the server tab toolbar WrapPanel, so the WrapPanel can no longer break the line between a label and its box. Element attributes, names, handlers and comments are unchanged; the other diff lines are re-indentation of the wrapped pairs.
erikdarlingdata
marked this pull request as ready for review
October 23, 2026 22:26
erikdarlingdata
enabled auto-merge (squash)
October 23, 2026 22:26
This was referenced Oct 23, 2026
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Claude posting for Erik Darling.
Closes #6652.
Why
At 1366x768 the Viewer's stacked charts got a plot a few pixels tall (only a "0" tick), long left-axis titles were cut at both ends so the unit was lost, and two wide grids (Query Store Regressions, Collection Health) showed fixed-width columns squeezed to slivers.
Diagnosis on the grids: every column already had a fixed
Width, but WPF's DataGrid takes width away from fixed columns (down to their defaultMinWidthof about 20 px) to satisfy a star column's minimum when the total does not fit. Regressions had a star Query Text column withMinWidth=300; Collection Health has two star columns. That is the "10 px each" the issue shows.What changes
MinHeightfrom one shared constant (ChartLayout.MinPlotHeight, 150), and the chart grid sits in a verticalScrollViewer. The grid height is bound to the viewport, so on a tall window the charts still stretch to fill it, and on a short one the tab scrolls. The mouse wheel over a plot stays that plot's zoom (ChartLayout.KeepWheelOnPlot); the scroll bar and the margins scroll the tab.ChartStyle(shared with Lite, so Lite gains it too).ChartAxisTitle.Fitshrinks the font (12 down to 9) and then trims the name keeping a short unit last; it runs before every render for charts that useApplyThemeToChart, so all ~50 titles are covered. Also shortened the named ones at their call sites: "Lock wait ms/s", "Blocking events", "tempdb latency ms", "Duration ms/s" (Deadlocks and Read/Write Latency (ms) were already short enough).MinimumTickGeneratorwraps the automatic numeric ticks and adds the low and high end of the axis when fewer than two labelled ticks fall in range (all-zero data is 0..1 plus padding). Applied byApplyThemeToChartandApplyMinimalChartThemeunless a caller already set its own y tick generator.Width=320(not star,MinWidth=200), every fixed column hasMinWidthequal to its width (so nothing can be taken away), headers wrap (DockPanel+TextWrapping), horizontal scroll was alreadyAuto.MinWidthon every column (the two star columns getMinWidth=160) and wrapping headers.ViewerBlockingSourceLabelTeststhat spelled the old "Blocking Incidents" call site was updated to the new title.Proof
ViewerShortPlotTests): every long title fits the minimum row and keeps its unit; short titles are untouched; all-zero axis and only-"0" axis get two ticks; enough ticks are returned untouched; the min-height constant is in range.Seen at 1366x768 and 1920x1080
I ran the Viewer (Release build of this branch) against a throwaway PostgreSQL store seeded by
tools/ui-smoke/run-ui-smoke.ps1 -SeedOnly, withDARLING_CONFIGset to that store's config in the Viewer's own process only (its server list showed the seed'sui-sqlandui-pg). I sized the window and captured it (PrintWindow) at each view. The PNGs are in the lane scratchpadwave-312\shots-6674\and are not committed. The laptop panel is 3840x2400 at 250 percent, so I sized the windows in device-independent pixels (1366x768 DIPs = 3415x1920 physical): the layout is the one a 100 percent 1366x768 screen gets. Windows would not make a window bigger than the panel, so the large size is 1549x925 DIPs (3872x2312 physical), not a true 1920x1080. The layout is bound to the viewport, so it shows the same behaviour with more room. The 1366x768 window is the whole outer window (title bar included), a little taller than the usable area of a screen with a taskbar.At 1366x768, before any change:
1366x768-blocking-trends-scrolled-to-bottom.png). The mouse wheel over a plot zooms that plot (its x range shrank and y rescaled) and does not scroll the page (the scroll position stayed at 0 percent); the scroll bar and the margins scroll the page.Fix (commit 75f4eeb,
ViewerServerTab.xaml, 3 lines): Regressions Severity 80 to 100; Collection Health Success 80 to 105 and Abandoned 90 to 120 (bothWidthandMinWidth). After:1366x768-regressions-after.pngand1366x768-collection-health-after.png(plus...-scrolled-right.png) show every header whole, wrapping only at spaces.At 1549x925 (taken before the fix, so Regressions and Collection Health there still show the old widths): Blocking Trends fills the window with no scroll bar and no empty space; tempdb, File I/O Latency and Queries Performance Trends fill; the Overview lanes still scroll (six lanes at the 150 DIP minimum need more than 925 DIPs), which is the intended minimum height, not a defect. Toolbar fix in this PR: the four label-and-box pairs (Query tag, Compare, Auto-refresh interval, Times) now wrap together, so a label no longer ends one row while its box starts the next.
Not seen: the Regressions columns right of "Base Execs" (the seed has no regressions, so the grid shows its empty text and cannot scroll). Their widest header words ("Baseline", "Timeouts", "Timeouts/hr") are no wider than "Severity", which fits in 100.
Tests rerun after the fix:
ViewerShortPlotTests,ViewerBlockingSourceLabelTests,*Census*,*Ratchet*,*Xaml*in Darling.Tests: 536 run, 0 failed, 1 skipped.Test plan
*Ratchet*,*Census*,*Xaml*: 734 run, 0 failed, 1 skipped*ChartStyle*,*ChartClickIsolateTests*,*Ratchet*,*Census*: 49 run, 0 failedgit merge-treeof this branch with the Make the Viewer match the web on dropped databases, labels, job history, wording and strip gaps (#6651) #6667 branch (fix/6651-viewer-parity) reports no conflictspre-push.sh(CI decides).Considered, not added
ChartStylepart reaches Lite.CHANGELOG entry
SECTION: Fixed
ENTRY:
REF:
[Keep Viewer charts and grids readable at 1366x768 (#6652) #6674]: Keep Viewer charts and grids readable at 1366x768 (#6652) #6674
Toolbar label wrap (commit 503910a)
Each label and its box in the server tab toolbar is now one item in the WrapPanel, so the WrapPanel can no longer break the line between them. At 1549 px a label ended one row while its box started the next ("Compare:" and its "None" box).
What changed (one file,
Darling/PerformanceMonitor.Darling.Viewer/ViewerServerTab.xaml): the four label-and-box pairs (Query tag, Compare, Auto-refresh with its interval, Times) are each wrapped in<StackPanel Orientation="Horizontal">. Attributes, names, handlers and comments are unchanged.git diff -wshows exactly 8 added lines (the four StackPanel open and close pairs). The rest of the diff re-indents the 33 wrapped lines (--numstat: 41 insertions, 33 deletions).Test plan (this part)
dotnet build Darling/Darling.Tests/Darling.Tests.csproj -c Debug -m:1 -p:UseSharedCompilation=false: 0 errors, 8 warnings. The warnings are C# analyzer warnings (CA1870, CA2016, xUnit2031) in three files this XAML-only diff does not touch: ChangeWatchDetectionLiveTests.cs, DarlingMcpAlertTools.cs and MonitoringGrantScript.cs.dotnet build Darling/PerformanceMonitor.Darling.Viewer/PerformanceMonitor.Darling.Viewer.csproj -c Debug -m:1 -p:UseSharedCompilation=false: 0 warnings, 0 errors, so the edited XAML compiles.Darling.Tests.exe, one run with-classfor ViewerShortPlotTests, ViewerBlockingSourceLabelTests, ServerTabToolbarAndTooltipsTests,*Xaml*,*Census*and*Ratchet*: Total 558, Errors 0, Failed 0, Skipped 1. The skip isWebExceptionTextCensusLiveTests.RealToolCaughtStatementTimeout_OnTheRig_Returns503_NoExceptionText_OneLogLine, a live test that needs the rig.*Ratchet*matched no class in Darling.Tests.pre-push.sh(laptop run; CI decides), and the live tests (no rig started).For the coordinator
VerticalAlignment="Center", which now centres each label within its pair's StackPanel. I did not check on screen whether that moves any label. A 1920x1080 look at the toolbar would settle it.<CHANGELOG_BUFFER_DIR>, and CHANGELOG.md is not to be edited. The entry for Darling Viewer at 1366x768: stacked charts collapse to a sliver and the Query Store Regressions grid is unreadable #6652 is the coordinator's.Lite/Controls/ServerTab.xamlhas the same four labels (around lines 186-260), but its only WrapPanels are at lines 1519 and 1564, so its toolbar does not share this WrapPanel. I did not check its layout further, because the brief limits the edit to the Viewer file.