feat(tables): preview referenced rows inline - #7106
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Greptile SummaryThis PR adds clickable chips for reference cells and an inline, virtualized preview of the referenced table row. It also introduces a single-row query and cache invalidation support for batch row updates.
Confidence Score: 4/5The stale referenced-row preview should be fixed before merging because live row changes can leave users viewing outdated data. The new detail query is independently cached, but existing realtime cell synchronization does not update or invalidate it, so a mounted preview can diverge from the referenced row. Files Needing Attention: apps/sim/hooks/queries/tables.ts; apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.tsx
|
| Filename | Overview |
|---|---|
| apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx | Adds expanded-reference state, row virtualization sizing, keyboard exclusions, and inline preview placement. |
| apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.tsx | Adds the referenced-row preview UI and its loading, missing-row, error, and empty-schema states; one typography rule violation remains. |
| apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx | Derives preview targets from reference cell values and wires chip actions into each rendered row. |
| apps/sim/hooks/queries/tables.ts | Adds the row-detail query and batch invalidation, but realtime cell changes do not reconcile the new cache entry. |
| apps/sim/lib/table/column-types/reference.ts | Defines how reference columns derive their chip labels, target table IDs, and target row IDs. |
Sequence Diagram
sequenceDiagram
participant U as User
participant G as TableGrid
participant P as ReferenceRowPreview
participant Q as React Query
participant A as Table API
U->>G: Click reference chip
G->>G: Expand source row and reserve preview height
G->>P: Render referenced table and row IDs
P->>Q: useTable + useTableRow
Q->>A: Fetch schema and referenced row
A-->>Q: Table definition and row
Q-->>P: Cached preview data
P-->>U: Render referenced row inline
Reviews (1): Last reviewed commit: "feat(tables): preview referenced rows in..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| return useQuery({ | ||
| queryKey: tableKeys.row(tableId ?? '', rowId ?? ''), | ||
| queryFn: ({ signal }) => | ||
| fetchTableRow(workspaceId as string, tableId as string, rowId as string, signal), | ||
| enabled: Boolean(workspaceId && tableId && rowId), | ||
| staleTime: TABLE_ROWS_STALE_TIME, | ||
| }) |
There was a problem hiding this comment.
When a workflow or another client updates a referenced row, realtime synchronization updates paginated row caches but leaves the new tableKeys.row entry unchanged, causing an expanded preview to continue displaying stale cell values until a later refetch.
Knowledge Base Used: Web application and product surfaces
| <div className='flex h-full w-[100cqw] min-w-0 flex-col bg-[var(--surface-2)]'> | ||
| <div className='flex h-9 shrink-0 items-center gap-1.5 px-3 text-[var(--text-primary)] text-small'> | ||
| <ReferenceIcon className='size-[14px] text-[var(--text-icon)]' /> | ||
| <span className='font-medium'>{table?.name ?? 'Referenced table'}</span> |
There was a problem hiding this comment.
The new table-name span applies font-medium, overriding the canonical normal-weight typography and making the preview header inconsistent with established component styling.
| <span className='font-medium'>{table?.name ?? 'Referenced table'}</span> | |
| <span>{table?.name ?? 'Referenced table'}</span> |
Context Used: CLAUDE.md (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found and verified against the latest diff
Confidence score: 4/5
- In
apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx, double-clicking a reference chip can both open its preview and enter cell inline-edit mode because the event bubbles; stop propagation on the chip, consistent with URL cells.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx">
<violation number="1" location="apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx:409">
P2: Double-clicking a reference chip still bubbles `dblclick` to the cell, so opening the preview can also enter inline edit mode. Stop double-click propagation on the chip, matching the URL cell behavior.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| onClick={(event) => { | ||
| event.stopPropagation() | ||
| referenceAction?.onClick() | ||
| }} |
There was a problem hiding this comment.
P2: Double-clicking a reference chip still bubbles dblclick to the cell, so opening the preview can also enter inline edit mode. Stop double-click propagation on the chip, matching the URL cell behavior.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render.tsx, line 409:
<comment>Double-clicking a reference chip still bubbles `dblclick` to the cell, so opening the preview can also enter inline edit mode. Stop double-click propagation on the chip, matching the URL cell behavior.</comment>
<file context>
@@ -375,6 +397,25 @@ export function CellRender({ kind, isEditing }: CellRenderProps): React.ReactEle
+ aria-expanded={referenceAction?.expanded}
+ disabled={!referenceAction}
+ className={cn('h-5 max-w-full', isEditing && 'invisible')}
+ onClick={(event) => {
+ event.stopPropagation()
+ referenceAction?.onClick()
</file context>
| onClick={(event) => { | |
| event.stopPropagation() | |
| referenceAction?.onClick() | |
| }} | |
| onClick={(event) => { | |
| event.stopPropagation() | |
| referenceAction?.onClick() | |
| }} | |
| onDoubleClick={(event) => event.stopPropagation()} |
1 participant
Summary
Populated Reference cells now render as chips labeled with the Reference column name. Clicking a chip expands the matching referenced row directly beneath its source row; missing row IDs show zero matches instead of failing the grid.
The inline preview stays anchored to the visible left edge through full-range horizontal scrolling. Its nested columns scroll independently, use flush square grid chrome, and keep the outer row dividers aligned with the source table grid.
Stack
This is the second layer of the Reference-row stack and depends on #7105. It adds inspection only; an “Open in sub view” action remains deliberately deferred.
Type of Change
Testing
bun run type-checkpasses across the workspace; the final app-only type-check also passes.bun run check:api-validationpasses.Reviewers should focus on the zero-width sticky viewport anchor, one-row virtualization sizing, and referenced-row cache invalidation.
Checklist
Screenshots/Videos
Not attached. The layout was refined against local browser screenshots at the left edge, intermediate positions, and the far-right scroll limit.
Post-Deploy Monitoring & Validation