-
[OPIK-5760] [FE] feat: add assertion reasons and run-breakdown popover to experiment results (#6171)
frostbyte_neo 发布于
2026-04-10 16:03:48 +00:00 - [OPIK-5760] [FE] feat: add reasons to experiment results popover
- Redesign AssertionsBreakdownTooltip from static Tooltip grid to interactive Popover with per-run Accordion
- Auto-expand first failing run in the accordion
- Show assertion criterion and reason text for each assertion
- Change Result tag from text label to icon + fraction (e.g. ✗ 0/1)
- Change FAILED tag variant from pink to red
-
Revision 2: Match mockup design - pill badge, destructive/success colors, CircleCheck icon, accordion bg
-
Revision 3: Add pill badge to accordion trigger header, bold assertion criterion text
-
Revision 4: HoverCard, sticky headers, hook fixes, count accuracy, unit tests
-
Revision 5: Add autoscroll to first failed assertion on HoverCard open
- scrollToFirstFailedAssertion uses double RAF to wait for layout after
accordion renders its default-open content - Queries [data-assertion-passed="false"] to target the first failure;
falls back to the run header if no failed assertions found - Adds data-assertion-passed attribute to each assertion div to support
the selector - handleOpenChange now calls scrollToFirstFailedAssertion instead of
the generic scrollToRun
- Revision 2: Replace RAF+setState with computed side in AssertionsBreakdownTooltip
Compute preferred tooltip side synchronously in onOpenChange via
triggerRef.getBoundingClientRect() instead of reading data-side via RAF.
Lock the chosen side with extreme collisionPadding on the opposite axis so
Radix never flips the tooltip when accordion items expand or collapse.- fix(fe): align assertion badge colors with Tag design system tokens
Replace bg-destructive/15 + bg-success/15 with var(--tag-red-bg)/
var(--tag-green-bg) tokens so StatusTag and AssertionPassRateCell
render the same colors across the experiment and single-experiment pages.- Revision 3: Fix tooltip jump, visual polish (border-radius, size, width, scroll)
- Prevent tooltip flip on close: remove preferredSide reset in handleOpenChange(false)
to avoid Radix re-evaluating position mid-close animation (last-row jump fix) - Fix scroll timing: replace RAF with setTimeout(200) to wait for 0.2s accordion animation
- Apply Tag-matching badge style: rounded-sm h-5 px-2 (was rounded-full)
- Add overflow-hidden to HoverCardContent to clip children to rounded-md boundary
- Shrink chevron: size-3 (was size-4)
- Widen popover: w-[30rem] (was w-80)
-
fix(fe): round StatusTag pill to rounded-sm to match Tag component
-
fix(fe): use rounded-md on StatusTag to match top-bar Tag pills
-
fix(fe): fix scroll offset behind sticky header and span/div nesting
- scrollToFirstFailedAssertion: return early when no failed assertion
(all-pass case) to avoid unnecessary scroll that clipped Run 1 content;
when a failure exists, offset scroll by sticky header height so the
assertion is visible below the header rather than hidden behind it - StatusTag: change wrapper from to to fix invalid HTML
nesting inside HoverCardTrigger's (no visual change, already inline-flex)
- fix(fe): fix prettier formatting on headerHeight cast
下载附件