[Frontend Fx] Observability table column resizing issues#4411
Open
ardaerzin wants to merge 4 commits into
Open
[Frontend Fx] Observability table column resizing issues#4411ardaerzin wants to merge 4 commits into
ardaerzin wants to merge 4 commits into
Conversation
Sticky and maxWidth columns now honor user-resized widths and the resize handle is wired uniformly across fixed, constrained, and flexible columns. Column-group headers (e.g. Evaluators) become resizable; the drag delta distributes proportionally across leaf children so the group expands uniformly instead of one column absorbing the entire change. handleResize commits the new width on every drag frame so AntD's colgroup updates live — header and body resize together instead of snapping on release. ResizableTitle no longer carries an inline width when idle, so AntD's colgroup is the sole source of truth outside of an active drag.
… anchor sticky-right resize handle inside cell Two table layout fixes: - After fast horizontal scrolling, AntD's body cell widths can drift away from the header colgroup until something forces a column-level re-render. A debounced scroll listener on .ant-table-body bumps a layoutNudge counter 150ms after horizontal scroll settles; the memoed finalColumns then produces fresh column object references and AntD rebuilds its layout state. The listener ignores vertical scroll so normal browsing has no extra re-render cost. - The resize handle on sticky-right columns (e.g. the observability Actions column) is anchored inside the cell (right: 0; width: 9px) instead of overhanging by 9px, removing the ~18px ghost slot that used to appear on the table's right edge.
NodeNameCell renders the full span name through Typography.Text with
ellipsis={{tooltip: name}} so truncation tracks the rendered column
width and the full name is reachable via tooltip. The
nodeDisplayNameAtomFamily that hardcoded a 15-character JS slice is
removed.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR removes a JS truncation atom, simplifies NodeNameCell to use CSS ellipsis, anchors the custom resize handle in sticky/right cells, makes fixed/constrained/group columns resizable with continuous commit and min-only clamping, refines drag-only width handling, and adds a debounced layout nudge after horizontal scrolling. ChangesColumn resizing infrastructure and observability table fixes
🎯 4 (Complex) | ⏱️ ~75 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dosubot
Bot
added
size:L
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9805d6a9-f456-40b0-a09c-f4a8788637a1
📒 Files selected for processing (6)
web/oss/src/assets/custom-resize-handle.cssweb/oss/src/components/pages/observability/components/NodeNameCell.tsxweb/oss/src/state/newObservability/atoms/queries.tsweb/packages/agenta-ui/src/InfiniteVirtualTable/components/InfiniteVirtualTableInner.tsxweb/packages/agenta-ui/src/InfiniteVirtualTable/components/common/ResizableTitle.tsxweb/packages/agenta-ui/src/InfiniteVirtualTable/hooks/useSmartResizableColumns.ts
💤 Files with no reviewable changes (1)
- web/oss/src/state/newObservability/atoms/queries.ts
Contributor
Railway Preview Environment
|
A column group can't shrink smaller than every child being at its own minimum simultaneously, so the parent floor must be the sum of child minimums, not the smallest. No behavioural change today because table-layout: fixed ignores the parent th's minWidth — this is a hygiene fix that becomes load-bearing the moment we add minConstraints to the Resizable handle.
ashrafchowdury
approved these changes
May 26, 2026
Contributor
|
I believe these changes will not affect other areas where we are using the Virtual table, right @ardaerzin ?? |
Contributor
Author
incorrect, IVT level changes / improvements affect other tables too |
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
2 participants
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.
Summary
fixes #4409
Fixes column resizing in the shared
@agenta/ui/table(InfiniteVirtualTable) — sticky andmaxWidthcolumns become resizable, column-group headers (Evaluators) become resizable, drag is live, header/body widths re-sync after fast horizontal scroll, the sticky-right ghost slot is gone, and the observability Name cell uses CSS ellipsis so content tracks column width.Blast radius
Two different scopes — worth knowing before merging.
Resize-machinery changes (
useSmartResizableColumns.ts,ResizableTitle.tsx,custom-resize-handle.css)Visible only when a table sets
resizableColumns. Three tables do:ScenarioListViewFor these: sticky / constrained / group columns become resizable, drag is live, sticky-right ghost handle is gone. For every other table: no-op (
useSmartResizableColumnsreturns columns unchanged when disabled).Scroll-end layout re-sync (
InfiniteVirtualTableInner.tsx)Runs unconditionally on every
@agenta/ui/tableconsumer:@agenta/entity-ui, Annotation queues view.Cost: one re-render 150 ms after a horizontal scroll-end where
scrollLeftactually changed. Vertical scroll is ignored. Tables that don't horizontally scroll pay nothing beyond attaching a listener.Benefit: if any of these tables suffer from the same AntD fast-scroll desync (header
<th>widths drifting from body cell widths) that the observability table did, the fix lands there automatically.Observability-only changes
NodeNameCell.tsxandqueries.ts(nodeDisplayNameAtomFamilyremoval) — observability traces table only.Not affected
EvalRunDetails/Table.tsxand any other consumer of@/oss/components/InfiniteVirtualTable(a separate, older copy of IVT that lives undeross/src). The repo has two parallel IVT implementations — fixes have to land twice if they're supposed to apply to both.Commits
make InfiniteVirtualTable columns properly resizable— sticky / constrained / group columns + live drag commitre-sync InfiniteVirtualTable layout after fast scroll, anchor sticky-right resize handle inside cell—layoutNudgedebounced scroll listener + CSS rule on.ant-table-cell-fix-right .custom-resize-handleuse CSS ellipsis for observability Name cells—NodeNameCell+ atom removaluse sum of child mins as the group resize floor— CR suggestion applied as hygiene fixTesting
QA follow-up
Check against the issues reported in #4409. Also worth eyeballing in:
Checklist
Contributor Resources