Put the busiest capabilities down the side of the DAP heat map
What does this MR do and why?
A namespace that uses every flow type puts around 30 capabilities on the "Sessions by tier and capability" heat map. Each column gets about 30px, and the labels truncate to a few characters.
Two changes fix that. The panel's dimensions swap, so tiers run across the top — there are always four of them — and capabilities run down the side, where a label gets the row gutter's 160px. The heat map presenter can then cap an axis to its busiest entries, and the panel sets maxRows: 5, so the grid stays five rows deep. The panel is retitled "Sessions by tier and top capabilities", with a tooltip saying quieter capabilities are not listed — the cap is stated rather than silent.
- Either axis takes a cap (
maxColumns,maxRows), because a panel's dimension order decides which one carries the long dimension. Neither is set by default, so every other heat map is unchanged. - Five rows keep the chart at its minimum height, so the panel keeps the height it already had and nothing below it on the Adoption view moves.
- A capped axis is ordered by total, largest first, with ties broken by label so the surviving entries do not depend on the order the query returned. That replaces the ordering
sortwould give it, soflowType ascis gone from the panel'ssort. sort: userTier descstays, and is doing the only sorting left: the tier columns are not capped, so they take their order from the response. Without asortthe compiler emits noorderByat all and the engine adds none, which would leave them in whatever order ClickHouse returns the groups in.- Both options are documented in
doc/user/glql/display_types.md, and aWithMaxColumnsstory covers the capped shape, which no seeded namespace has enough flow types to reproduce.
Rolling the tail into an Other column was the alternative, and the bar list panel on this dashboard does exactly that. It keeps the totals whole, but here Other would be the sum of 29 capabilities: it takes the dark end of the colour ramp and leaves the five that matter crowded into the pale end, which is the comparison this panel exists to make.
Related to https://gitlab.com/gitlab-org/gitlab/-/work_items/628031
Screenshots or screen recordings
| Before | After |
|---|---|
How to set up and validate locally
The cap is quickest to see in Storybook, and needs no seeded data:
- Run
yarn storybook:startand openglql/components/presenters/heat_map>WithMaxColumns. Its data is 32 capabilities across four tiers. EditmaxColumnsin the Controls panel to try other sizes, or clear it to see every capability and the crowding the cap is for. - For the panel itself: enable the flag in a Rails console with
Feature.enable(:dap_impact_v1), with Siphon replicating into ClickHouse, then open Explore > Analytics dashboards > DAP Impact > Adoption. The panel shows four tier columns and five capability rows, busiest first. yarn jest spec/frontend/glql/components/presenters/heat_map_spec.js
All 46 GLQL blocks in the dashboard compile.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.