fix bugs

Author: TheodoreSpeaks

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

@@ -74,6 +74,7 @@ import {
   useUpdateColumn,
   useUpdateTableMetadata,
   useUpdateTableRow,
+  useUpdateWorkflowGroup,
 } from '@/hooks/queries/tables'
 import { useDeploymentInfo, useDeployWorkflow } from '@/hooks/queries/deployments'
 import { useLogByExecutionId } from '@/hooks/queries/logs'
@@ -432,6 +433,7 @@ export function Table({
   const cancelRunsMutation = useCancelTableRuns({ workspaceId, tableId })
   const runGroupMutation = useRunGroup({ workspaceId, tableId })
   const deleteWorkflowGroupMutation = useDeleteWorkflowGroup({ workspaceId, tableId })
+  const updateWorkflowGroupMutation = useUpdateWorkflowGroup({ workspaceId, tableId })
 
   const handleRunGroup = useCallback(
     (groupId: string, workflowId: string, mode: 'all' | 'incomplete' = 'all') => {
@@ -659,6 +661,7 @@ export function Table({
 
   const columnsRef = useRef(displayColumns)
   const schemaColumnsRef = useRef(columns)
+  const workflowGroupsRef = useRef(tableWorkflowGroups)
   const rowsRef = useRef(rows)
   const selectionAnchorRef = useRef(selectionAnchor)
   const selectionFocusRef = useRef(selectionFocus)
@@ -668,6 +671,7 @@ export function Table({
 
   columnsRef.current = displayColumns
   schemaColumnsRef.current = columns
+  workflowGroupsRef.current = tableWorkflowGroups
   rowsRef.current = rows
   selectionAnchorRef.current = selectionAnchor
   selectionFocusRef.current = selectionFocus
@@ -1302,14 +1306,35 @@ export function Table({
   }
 
   useEffect(() => {
-    if (!tableData?.metadata || metadataSeededRef.current) return
+    if (!tableData?.metadata) return
     if (!tableData.metadata.columnWidths && !tableData.metadata.columnOrder) return
-    metadataSeededRef.current = true
-    if (tableData.metadata.columnWidths) {
-      setColumnWidths(tableData.metadata.columnWidths)
+    // First load: seed both from the server and remember we've seeded.
+    if (!metadataSeededRef.current) {
+      metadataSeededRef.current = true
+      if (tableData.metadata.columnWidths) {
+        setColumnWidths(tableData.metadata.columnWidths)
+      }
+      if (tableData.metadata.columnOrder) {
+        setColumnOrder(tableData.metadata.columnOrder)
+      }
+      return
     }
-    if (tableData.metadata.columnOrder) {
-      setColumnOrder(tableData.metadata.columnOrder)
+    // After first load: only re-seed `columnOrder` when the *set of columns*
+    // changes (e.g. a workflow group adds/removes outputs server-side). Pure
+    // reorders are left alone so an in-flight optimistic drag isn't clobbered
+    // by a refetch returning the pre-drag order.
+    const serverOrder = tableData.metadata.columnOrder
+    if (serverOrder) {
+      const localOrder = columnOrderRef.current
+      const serverSet = new Set(serverOrder)
+      const localSet = new Set(localOrder ?? [])
+      const setChanged =
+        !localOrder ||
+        serverSet.size !== localSet.size ||
+        serverOrder.some((n) => !localSet.has(n))
+      if (setChanged) {
+        setColumnOrder(serverOrder)
+      }
     }
   }, [tableData?.metadata])
 
@@ -2264,39 +2289,70 @@ export function Table({
       const previousWidth = columnWidthsRef.current[columnToDelete] ?? null
       const orderSnapshot = currentOrder ? [...currentOrder] : null
 
-      deleteColumnMutation.mutate(columnToDelete, {
-        onSuccess: () => {
-          deletedOriginalPositions.push(entry.position)
-          pushUndoRef.current({
-            type: 'delete-column',
-            columnName: columnToDelete,
-            columnType: entry.def?.type ?? 'string',
-            columnPosition: adjustedPosition >= 0 ? adjustedPosition : cols.length,
-            columnUnique: entry.def?.unique ?? false,
-            columnRequired: entry.def?.required ?? false,
-            cellData,
-            previousOrder: orderSnapshot,
-            previousWidth,
+      const onDeleted = () => {
+        deletedOriginalPositions.push(entry.position)
+        pushUndoRef.current({
+          type: 'delete-column',
+          columnName: columnToDelete,
+          columnType: entry.def?.type ?? 'string',
+          columnPosition: adjustedPosition >= 0 ? adjustedPosition : cols.length,
+          columnUnique: entry.def?.unique ?? false,
+          columnRequired: entry.def?.required ?? false,
+          cellData,
+          previousOrder: orderSnapshot,
+          previousWidth,
+        })
+
+        const { [columnToDelete]: _removedWidth, ...cleanedWidths } = columnWidthsRef.current
+        setColumnWidths(cleanedWidths)
+        columnWidthsRef.current = cleanedWidths
+
+        if (currentOrder) {
+          currentOrder = currentOrder.filter((n) => n !== columnToDelete)
+          setColumnOrder(currentOrder)
+          updateMetadataRef.current({
+            columnWidths: cleanedWidths,
+            columnOrder: currentOrder,
           })
+        } else {
+          updateMetadataRef.current({ columnWidths: cleanedWidths })
+        }
 
-          const { [columnToDelete]: _removedWidth, ...cleanedWidths } = columnWidthsRef.current
-          setColumnWidths(cleanedWidths)
-          columnWidthsRef.current = cleanedWidths
+        deleteNext(index + 1)
+      }
 
-          if (currentOrder) {
-            currentOrder = currentOrder.filter((n) => n !== columnToDelete)
-            setColumnOrder(currentOrder)
-            updateMetadataRef.current({
-              columnWidths: cleanedWidths,
-              columnOrder: currentOrder,
-            })
-          } else {
-            updateMetadataRef.current({ columnWidths: cleanedWidths })
-          }
+      // Workflow-output columns are owned by a group: route the delete through
+      // `updateWorkflowGroup` so the same code path fires whether the user
+      // deselects the output in the sidebar or right-clicks Delete column.
+      // Falls back to deleting the whole group when this is its last output,
+      // since a group with zero outputs is invalid.
+      const groupId = entry.def?.workflowGroupId
+      const group = groupId
+        ? workflowGroupsRef.current.find((g) => g.id === groupId)
+        : undefined
+      if (group) {
+        const remainingOutputs = group.outputs.filter((o) => o.columnName !== columnToDelete)
+        if (remainingOutputs.length === 0) {
+          deleteWorkflowGroupMutation.mutate(
+            { groupId: group.id },
+            { onSuccess: onDeleted }
+          )
+        } else {
+          updateWorkflowGroupMutation.mutate(
+            {
+              groupId: group.id,
+              workflowId: group.workflowId,
+              name: group.name,
+              dependencies: group.dependencies,
+              outputs: remainingOutputs,
+            },
+            { onSuccess: onDeleted }
+          )
+        }
+        return
+      }
 
-          deleteNext(index + 1)
-        },
-      })
+      deleteColumnMutation.mutate(columnToDelete, { onSuccess: onDeleted })
     }
 
     setSelectionAnchor(null)

apps/sim/hooks/queries/tables.ts

@@ -274,11 +274,14 @@ export function useTableRows({
       )
       // While an optimistic mutation is in flight, applying the socket delta
       // could clobber the optimistic state — defer to onSettled invalidate.
+      // Mark stale without triggering a refetch (refetchType: 'none') so the
+      // refetch races neither the in-flight optimistic update nor any
+      // server-side post-response work the mutation is awaiting (e.g. backfill).
       if (queryClient.isMutating() > 0) {
-        logger.info(
-          `[STOP-DEBUG] socket row=${event.rowId} (mutation in flight → invalidate) incoming=${JSON.stringify(incomingExec)}`
-        )
-        queryClient.invalidateQueries({ queryKey: tableKeys.rowsRoot(tableId) })
+        queryClient.invalidateQueries({
+          queryKey: tableKeys.rowsRoot(tableId),
+          refetchType: 'none',
+        })
         return
       }
       queryClient.setQueriesData<TableRowsResponse>(
@@ -328,7 +331,10 @@ export function useTableRows({
     onTableRowDeleted((event) => {
       if (event.tableId !== tableId) return
       if (queryClient.isMutating() > 0) {
-        queryClient.invalidateQueries({ queryKey: tableKeys.rowsRoot(tableId) })
+        queryClient.invalidateQueries({
+          queryKey: tableKeys.rowsRoot(tableId),
+          refetchType: 'none',
+        })
         return
       }
       queryClient.setQueriesData<TableRowsResponse>(

apps/sim/lib/table/service.ts

@@ -32,6 +32,7 @@ import type {
   BulkDeleteData,
   BulkOperationResult,
   BulkUpdateData,
+  ColumnDefinition,
   CreateTableData,
   DeleteColumnData,
   DeleteWorkflowGroupData,
@@ -2725,7 +2726,33 @@ export async function updateWorkflowGroup(
         throw new Error(`Column "${col.name}" already exists`)
       }
     }
-    nextColumns = [...nextColumns, ...newColDefs]
+    // Splice the new column defs into the group's contiguous run rather than
+    // appending at the end. The desired in-group order is `newOutputs` (the
+    // sidebar's BFS-of-the-workflow ordering); we walk it, anchor at the first
+    // surviving sibling's index in `nextColumns`, and emit each output's
+    // column def in turn.
+    const groupColNames = new Set(newOutputs.map((o) => o.columnName))
+    const firstGroupIdx = nextColumns.findIndex((c) => groupColNames.has(c.name))
+    const anchorIdx = firstGroupIdx === -1 ? nextColumns.length : firstGroupIdx
+    const newColByLowerName = new Map(newColDefs.map((c) => [c.name.toLowerCase(), c]))
+    const orderedGroupCols: ColumnDefinition[] = []
+    for (const out of newOutputs) {
+      const fresh = newColByLowerName.get(out.columnName.toLowerCase())
+      if (fresh) {
+        orderedGroupCols.push(fresh)
+      } else {
+        const existing = nextColumns.find(
+          (c) => c.name.toLowerCase() === out.columnName.toLowerCase()
+        )
+        if (existing) orderedGroupCols.push(existing)
+      }
+    }
+    const remaining = nextColumns.filter((c) => !groupColNames.has(c.name))
+    nextColumns = [
+      ...remaining.slice(0, anchorIdx),
+      ...orderedGroupCols,
+      ...remaining.slice(anchorIdx),
+    ]
   }
 
   const updatedGroup: WorkflowGroup = {
@@ -2742,9 +2769,27 @@ export async function updateWorkflowGroup(
     workflowGroups: nextGroups,
   }
 
-  const updatedColumnOrder = table.metadata?.columnOrder?.filter(
+  // `columnOrder` mirrors the schema layout. Drop removed columns, then splice
+  // the new ones in at the same anchor as `nextColumns` so the table renders
+  // them inside the group's contiguous run instead of at the tail.
+  let updatedColumnOrder = table.metadata?.columnOrder?.filter(
     (n) => !removedColumnNames.has(n)
   )
+  if (updatedColumnOrder && newColDefs.length > 0) {
+    const newColNamesLower = new Set(newColDefs.map((c) => c.name.toLowerCase()))
+    const orderWithoutNew = updatedColumnOrder.filter((n) => !newColNamesLower.has(n.toLowerCase()))
+    const groupColNames = new Set(newOutputs.map((o) => o.columnName))
+    const orderedGroupNames = newOutputs.map((o) => o.columnName)
+    const firstGroupOrderIdx = orderWithoutNew.findIndex((n) => groupColNames.has(n))
+    const anchorOrderIdx =
+      firstGroupOrderIdx === -1 ? orderWithoutNew.length : firstGroupOrderIdx
+    const remainingOrder = orderWithoutNew.filter((n) => !groupColNames.has(n))
+    updatedColumnOrder = [
+      ...remainingOrder.slice(0, anchorOrderIdx),
+      ...orderedGroupNames,
+      ...remainingOrder.slice(anchorOrderIdx),
+    ]
+  }
   assertValidSchema(updatedSchema, updatedColumnOrder)
 
   const updatedMetadata: TableMetadata | null =
@@ -2781,18 +2826,24 @@ export async function updateWorkflowGroup(
 
   // Backfill the new outputs from execution logs so already-completed group
   // runs surface the just-added columns without re-running the workflow.
+  // Awaited so the response only returns once row data is consistent — the
+  // client then refetches and sees the backfilled values immediately. A failed
+  // backfill is logged but doesn't fail the whole request, since the schema
+  // change has already committed.
   if (added.length > 0) {
-    void backfillAddedGroupOutputs({
-      table: updatedTable,
-      groupId: data.groupId,
-      addedOutputs: added,
-      requestId,
-    }).catch((err) => {
+    try {
+      await backfillAddedGroupOutputs({
+        table: updatedTable,
+        groupId: data.groupId,
+        addedOutputs: added,
+        requestId,
+      })
+    } catch (err) {
       logger.warn(
         `[${requestId}] Backfill from execution logs failed for ${data.tableId} group ${data.groupId}:`,
         err
       )
-    })
+    }
   }
 
   return updatedTable