improvement(tables): route reference metadata through one registry accessor

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content.tsx

@@ -6,10 +6,10 @@ import {
   type ReferenceCellAction,
   resolveCellRender,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render'
+import { InlineEditor } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors'
+import type { DisplayColumn } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/types'
+import type { SaveReason } from '@/app/workspace/[workspaceId]/tables/[tableId]/types'
 import type { TimezoneState } from '@/hooks/queries/general-settings'
-import type { SaveReason } from '../../../types'
-import type { DisplayColumn } from '../types'
-import { InlineEditor } from './inline-editors'
 
 interface CellContentProps {
   value: unknown

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx

@@ -5,8 +5,18 @@ import { Button, Checkbox, cn, handleKeyboardActivation } from '@sim/emcn'
 import { PlayOutline, Square } from '@sim/emcn/icons'
 import type { ActiveDispatch } from '@/lib/api/contracts/tables'
 import type { TableRow as TableRowType, WorkflowGroup } from '@/lib/table'
-import { columnTypeOf } from '@/lib/table/column-types'
+import { columnReferencedTableIds, columnTypeOf } from '@/lib/table/column-types'
 import { getUnmetGroupDeps } from '@/lib/table/deps'
+import { CellContent } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells'
+import {
+  CELL,
+  CELL_CHECKBOX,
+  CELL_CONTENT,
+  CELL_OVERLAY_INSET,
+  FIND_MATCH_TINT_BG,
+  SELECTION_OVERLAY,
+  SELECTION_TINT_BG,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/constants'
 import type {
   DisplayColumn,
   ReferencePreviewTarget,
@@ -16,18 +26,8 @@ import {
   type NormalizedSelection,
   resolveCellExec,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils'
+import type { SaveReason } from '@/app/workspace/[workspaceId]/tables/[tableId]/types'
 import type { TimezoneState } from '@/hooks/queries/general-settings'
-import type { SaveReason } from '../../types'
-import { CellContent } from './cells'
-import {
-  CELL,
-  CELL_CHECKBOX,
-  CELL_CONTENT,
-  CELL_OVERLAY_INSET,
-  FIND_MATCH_TINT_BG,
-  SELECTION_OVERLAY,
-  SELECTION_TINT_BG,
-} from './constants'
 
 export interface DataRowProps {
   row: TableRowType
@@ -331,11 +331,10 @@ export const DataRow = React.memo(function DataRow({
           pendingCellValue && column.key in pendingCellValue
             ? pendingCellValue[column.key]
             : row.data[column.key]
-        const referencePreview = referenceColumnsEnabled
-          ? columnTypeOf(column).referencePreview
-          : undefined
-        const referenceRowId = referencePreview?.getRowId(value) ?? null
-        const referenceTableId = referencePreview?.getTableId(column)
+        const referenceRowId = referenceColumnsEnabled
+          ? (columnTypeOf(column).referencePreview?.getRowId(value) ?? null)
+          : null
+        const [referenceTableId] = referenceColumnsEnabled ? columnReferencedTableIds(column) : []
         const referenceTarget =
           referenceTableId && referenceRowId
             ? {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.test.tsx

@@ -14,14 +14,8 @@ const { previewQuery } = vi.hoisted(() => ({
 
 vi.mock('@/lib/table/column-types', () => ({
   columnTypeById: () => ({ icon: () => null }),
-  columnTypeOf: (column: { type: string; referenceTableId?: string }) => ({
-    referencePreview:
-      column.type === 'reference'
-        ? {
-            getTableId: () => column.referenceTableId,
-          }
-        : undefined,
-  }),
+  columnReferencedTableIds: (column: { type: string; referenceTableId?: string }) =>
+    column.type === 'reference' && column.referenceTableId ? [column.referenceTableId] : [],
 }))
 
 vi.mock('@sim/emcn/icons', () => ({

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/reference-row-preview.tsx

@@ -22,6 +22,17 @@ export const REFERENCE_ROW_PREVIEW_HEIGHT = 144
 
 const ReferenceIcon = columnTypeById('reference').icon
 
+const NO_MATCHING_ROW = 'No matching row'
+
+/** Centered muted line shared by every state that renders copy instead of the row. */
+function PreviewMessage({ children }: { children: ReactNode }) {
+  return (
+    <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-small'>
+      {children}
+    </div>
+  )
+}
+
 interface ReferenceRowPreviewBaseProps {
   workspaceId: string
   timezoneStatus: TimezoneState['status']
@@ -109,6 +120,11 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview(
     const previewViewport = previewViewportRef.current
     if (!previewViewport) return
 
+    /**
+     * Only a mostly-horizontal gesture is taken: cancelling a wheel event is all-or-nothing, and
+     * this strip has no vertical overflow of its own, so hijacking a diagonal pan would strand the
+     * grid's own vertical scroll.
+     */
     const handleWheel = (event: WheelEvent) => {
       if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return
       event.preventDefault()
@@ -120,18 +136,8 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview(
   }, [status])
 
   let content: ReactNode
-  if (columns.length === 0 && !row) {
-    content = (
-      <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-small'>
-        No matching row
-      </div>
-    )
-  } else if (columns.length === 0) {
-    content = (
-      <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-small'>
-        This table has no columns
-      </div>
-    )
+  if (columns.length === 0) {
+    content = <PreviewMessage>{row ? 'This table has no columns' : NO_MATCHING_ROW}</PreviewMessage>
   } else {
     content = (
       <div role='table' className='grid h-full w-full min-w-max grid-rows-2 text-small'>
@@ -159,7 +165,7 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview(
               role='cell'
               className='flex min-w-full flex-1 items-center justify-center text-[var(--text-muted)]'
             >
-              No matching row
+              {NO_MATCHING_ROW}
             </div>
           ) : (
             <>
@@ -208,9 +214,9 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview(
                 <Loader animate className='size-[14px] text-[var(--text-muted)]' />
               </div>
             ) : status === 'error' || status === 'missing' ? (
-              <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-small'>
+              <PreviewMessage>
                 {status === 'missing' ? 'Table not found' : "Couldn't load reference"}
-              </div>
+              </PreviewMessage>
             ) : (
               <>
                 <div className='flex h-9 shrink-0 items-center gap-1.5 px-3 text-[var(--text-primary)] text-small'>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -25,7 +25,11 @@ import type {
   WorkflowGroup,
 } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
-import { columnTypeOf } from '@/lib/table/column-types'
+import {
+  collectColumnReferencedTableIds,
+  columnReferencedTableIds,
+  columnTypeOf,
+} from '@/lib/table/column-types'
 import { TABLE_LIMITS } from '@/lib/table/constants'
 import { isEmptyCellValue } from '@/lib/table/deps'
 import { cellValueFilterConditions } from '@/lib/table/query-builder/cell-filter'
@@ -45,6 +49,7 @@ import type { RemoteTableSelection } from '@/app/workspace/[workspaceId]/tables/
 import type { BlockedTableAction } from '@/app/workspace/[workspaceId]/tables/[tableId]/lock-copy'
 import { LOCK_TOOLTIPS } from '@/app/workspace/[workspaceId]/tables/[tableId]/lock-copy'
 import { useTimezoneState } from '@/hooks/queries/general-settings'
+import { useReferenceRowPreview } from '@/hooks/queries/table-reference-preview'
 import {
   useAddTableColumn,
   useBatchCreateTableRows,
@@ -53,7 +58,6 @@ import {
   useDeleteColumn,
   useDeleteWorkflowGroup,
   useFindTableRows,
-  useReferenceRowPreview,
   useTableNames,
   useTableRunState,
   useUpdateColumn,
@@ -457,6 +461,14 @@ async function chunkBatchUpdates(
   )
 }
 
+/** The referenced row's load state, as the preview renders it. */
+function resolveReferencePreviewState(query: ReturnType<typeof useReferenceRowPreview>) {
+  if (query.isError) return { status: 'error' } as const
+  if (query.isFetching || !query.data) return { status: 'loading' } as const
+  if (query.data.table === null) return { status: 'missing' } as const
+  return { status: 'ready', table: query.data.table, row: query.data.row } as const
+}
+
 export function TableGrid({
   workspaceId: propWorkspaceId,
   tableId: propTableId,
@@ -625,23 +637,14 @@ export function TableGrid({
     filter: effectiveFilter,
   } = useTable({ workspaceId, tableId, queryOptions })
   const referencedTableIds = useMemo(
-    () =>
-      referenceColumnsEnabled
-        ? columns.flatMap((column) => {
-            const referenceTableId = columnTypeOf(column).referencePreview?.getTableId(column)
-            return referenceTableId ? [referenceTableId] : []
-          })
-        : [],
+    () => (referenceColumnsEnabled ? collectColumnReferencedTableIds(columns) : []),
     [columns, referenceColumnsEnabled]
   )
   const { data: referencedTables } = useTableNames(workspaceId, referencedTableIds)
-  const referenceTableNames = useMemo(() => {
-    const names = new Map<string, string>()
-    for (const table of referencedTables ?? []) {
-      names.set(table.id, table.name)
-    }
-    return names
-  }, [referencedTables])
+  const referenceTableNames = useMemo(
+    () => new Map((referencedTables ?? []).map((table) => [table.id, table.name])),
+    [referencedTables]
+  )
 
   /** Sort is single-column, so only the first spec entry can be active. */
   const activeSort = queryOptions.sort?.[0]
@@ -946,9 +949,9 @@ export function TableGrid({
     )
     const referencePreview = sourceColumn ? columnTypeOf(sourceColumn).referencePreview : undefined
     if (!sourceRow || !sourceColumn || !referencePreview) return null
+    const [referenceTableId] = columnReferencedTableIds(sourceColumn)
     return referencePreview.getRowId(sourceRow.data[expandedReference.sourceColumnKey]) ===
-      expandedReference.referenceRowId &&
-      referencePreview.getTableId(sourceColumn) === expandedReference.referenceTableId
+      expandedReference.referenceRowId && referenceTableId === expandedReference.referenceTableId
       ? expandedReference
       : null
   }, [displayColumns, rows, expandedReference, referenceColumnsEnabled])
@@ -966,17 +969,7 @@ export function TableGrid({
     }
     return names
   }, [referenceTableNames, referencePreviewQuery.data?.referenceTables])
-  const referencePreviewState = referencePreviewQuery.isError
-    ? ({ status: 'error' } as const)
-    : referencePreviewQuery.isFetching || !referencePreviewQuery.data
-      ? ({ status: 'loading' } as const)
-      : referencePreviewQuery.data.table === null
-        ? ({ status: 'missing' } as const)
-        : ({
-            status: 'ready',
-            table: referencePreviewQuery.data.table,
-            row: referencePreviewQuery.data.row,
-          } as const)
+  const referencePreviewState = resolveReferencePreviewState(referencePreviewQuery)
   const expandedSourceRowId = activeReferenceTarget?.sourceRowId ?? null
 
   const rowVirtualizer = useVirtualizer({

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.ts

@@ -12,7 +12,7 @@ import type {
   WorkflowGroup,
 } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
-import { columnTypeOf } from '@/lib/table/column-types'
+import { columnReferencedTableIds } from '@/lib/table/column-types'
 import { TABLE_LIMITS } from '@/lib/table/constants'
 import { areGroupDepsSatisfied, areOutputsFilled } from '@/lib/table/deps'
 import type {
@@ -177,7 +177,7 @@ function resolveReferenceTableName(
   column: ColumnDefinition,
   referenceTableNames: ReadonlyMap<string, string> | undefined
 ): string | undefined {
-  const tableId = columnTypeOf(column).referencePreview?.getTableId(column)
+  const [tableId] = columnReferencedTableIds(column)
   return tableId ? referenceTableNames?.get(tableId) : undefined
 }
 

apps/sim/app/workspace/[workspaceId]/tables/tables.tsx

@@ -620,21 +620,30 @@ function TablesContent() {
     return selectionLabel(count, firstName)
   }, [selectedTableIds, selectedFolderIds, tables, folderById])
 
-  const deleteFolderIds =
-    isDeleteFolderDialogOpen && activeFolder
-      ? [activeFolder.id]
-      : isBulkDeleteDialogOpen
-        ? selectedFolderIds
-        : []
   /** Tables the open delete confirmation would archive, including every table inside a folder. */
-  const pendingDeleteTableIds = isDeleteDialogOpen
-    ? activeTable
-      ? [activeTable.id]
-      : []
-    : [
-        ...(isBulkDeleteDialogOpen ? selectedTableIds : []),
-        ...tableIdsInFolderSubtrees(tables, deleteFolderIds, descendantFolderIds),
+  const pendingDeleteTableIds = useMemo(() => {
+    if (isDeleteDialogOpen) return activeTable ? [activeTable.id] : []
+    if (isDeleteFolderDialogOpen && activeFolder) {
+      return tableIdsInFolderSubtrees(tables, [activeFolder.id], descendantFolderIds)
+    }
+    if (isBulkDeleteDialogOpen) {
+      return [
+        ...selectedTableIds,
+        ...tableIdsInFolderSubtrees(tables, selectedFolderIds, descendantFolderIds),
       ]
+    }
+    return []
+  }, [
+    isDeleteDialogOpen,
+    isDeleteFolderDialogOpen,
+    isBulkDeleteDialogOpen,
+    activeTable,
+    activeFolder,
+    tables,
+    descendantFolderIds,
+    selectedTableIds,
+    selectedFolderIds,
+  ])
   const referencedByWarning = useReferencedByWarning(workspaceId, pendingDeleteTableIds)
 
   const currentFolderActions: DropdownOption[] | undefined = useMemo(() => {