Skip to content

Commit 4ba2252

Browse files
waleedlatif1waleedlatif1
authored
improvement(tag-dropdown): removed custom styling on tag dropdown popover, fixed execution ordering in terminal and loops entries (#3126)
* improvement(tag-dropdown): removeed custom styling on tag dropdown popover, fixed execution ordering in terminal and loops entries * ack pr comments * handle old records
1 parent c51f266 commit 4ba2252

File tree

15 files changed

+167
-68
lines changed

15 files changed

+167
-68
lines changed

‎apps/sim/app/api/workflows/[id]/execute/route.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
567567
blockId: string,
568568
blockName: string,
569569
blockType: string,
570+
executionOrder: number,
570571
iterationContext?: IterationContext
571572
) => {
572573
logger.info(`[${requestId}] 🔷 onBlockStart called:`, { blockId, blockName, blockType })
@@ -579,6 +580,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
579580
blockId,
580581
blockName,
581582
blockType,
583+
executionOrder,
582584
...(iterationContext && {
583585
iterationCurrent: iterationContext.iterationCurrent,
584586
iterationTotal: iterationContext.iterationTotal,
@@ -617,6 +619,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
617619
error: callbackData.output.error,
618620
durationMs: callbackData.executionTime || 0,
619621
startedAt: callbackData.startedAt,
622+
executionOrder: callbackData.executionOrder,
620623
endedAt: callbackData.endedAt,
621624
...(iterationContext && {
622625
iterationCurrent: iterationContext.iterationCurrent,
@@ -644,6 +647,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
644647
output: callbackData.output,
645648
durationMs: callbackData.executionTime || 0,
646649
startedAt: callbackData.startedAt,
650+
executionOrder: callbackData.executionOrder,
647651
endedAt: callbackData.endedAt,
648652
...(iterationContext && {
649653
iterationCurrent: iterationContext.iterationCurrent,

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -908,8 +908,10 @@ const PopoverContextCapture: React.FC<{
908908
* When in nested folders, goes back one level at a time.
909909
* At the root folder level, closes the folder.
910910
*/
911-
const TagDropdownBackButton: React.FC = () => {
912-
const { isInFolder, closeFolder, colorScheme, size } = usePopoverContext()
911+
const TagDropdownBackButton: React.FC<{ setSelectedIndex: (index: number) => void }> = ({
912+
setSelectedIndex,
913+
}) => {
914+
const { isInFolder, closeFolder, size, isKeyboardNav, setKeyboardNav } = usePopoverContext()
913915
const nestedNav = useNestedNavigation()
914916

915917
if (!isInFolder) return null
@@ -922,28 +924,31 @@ const TagDropdownBackButton: React.FC = () => {
922924
closeFolder()
923925
}
924926

927+
const handleMouseEnter = () => {
928+
if (isKeyboardNav) return
929+
setKeyboardNav(false)
930+
setSelectedIndex(-1)
931+
}
932+
925933
return (
926-
<div
927-
className={cn(
928-
'flex min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-base',
929-
size === 'sm' ? 'h-[22px] text-[11px]' : 'h-[26px] text-[13px]',
930-
colorScheme === 'inverted'
931-
? 'text-white hover:bg-[#363636] hover:text-white dark:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]'
932-
: 'text-[var(--text-primary)] hover:bg-[var(--border-1)]'
933-
)}
934-
role='button'
935-
onClick={handleBackClick}
934+
<PopoverItem
935+
onMouseDown={(e) => {
936+
e.preventDefault()
937+
e.stopPropagation()
938+
handleBackClick(e)
939+
}}
940+
onMouseEnter={handleMouseEnter}
936941
>
937942
<svg
938-
className={size === 'sm' ? 'h-3 w-3' : 'h-3.5 w-3.5'}
943+
className={cn('shrink-0', size === 'sm' ? 'h-3 w-3' : 'h-3.5 w-3.5')}
939944
fill='none'
940945
viewBox='0 0 24 24'
941946
stroke='currentColor'
942947
>
943948
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M15 19l-7-7 7-7' />
944949
</svg>
945-
<span>Back</span>
946-
</div>
950+
<span className='shrink-0'>Back</span>
951+
</PopoverItem>
947952
)
948953
}
949954

@@ -1961,8 +1966,8 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
19611966
onOpenAutoFocus={(e) => e.preventDefault()}
19621967
onCloseAutoFocus={(e) => e.preventDefault()}
19631968
>
1964-
<TagDropdownBackButton />
19651969
<PopoverScrollArea ref={scrollAreaRef}>
1970+
<TagDropdownBackButton setSelectedIndex={setSelectedIndex} />
19661971
{flatTagList.length === 0 ? (
19671972
<div className='px-[6px] py-[8px] text-[12px] text-[var(--white)]/60'>
19681973
No matching tags found

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-filters.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,9 @@ export function useTerminalFilters() {
105105
})
106106
}
107107

108-
// Apply sorting by timestamp
108+
// Sort by executionOrder (monotonically increasing integer from server)
109109
result = [...result].sort((a, b) => {
110-
const timeA = new Date(a.timestamp).getTime()
111-
const timeB = new Date(b.timestamp).getTime()
112-
const comparison = timeA - timeB
110+
const comparison = a.executionOrder - b.executionOrder
113111
return sortConfig.direction === 'asc' ? comparison : -comparison
114112
})
115113

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -184,13 +184,9 @@ function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
184184
group.blocks.push(entry)
185185
}
186186

187-
// Sort blocks within each iteration by start time ascending (oldest first, top-down)
187+
// Sort blocks within each iteration by executionOrder ascending (oldest first, top-down)
188188
for (const group of iterationGroupsMap.values()) {
189-
group.blocks.sort((a, b) => {
190-
const aStart = new Date(a.startedAt || a.timestamp).getTime()
191-
const bStart = new Date(b.startedAt || b.timestamp).getTime()
192-
return aStart - bStart
193-
})
189+
group.blocks.sort((a, b) => a.executionOrder - b.executionOrder)
194190
}
195191

196192
// Group iterations by iterationType to create subflow parents
@@ -225,6 +221,8 @@ function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
225221
const totalDuration = allBlocks.reduce((sum, b) => sum + (b.durationMs || 0), 0)
226222

227223
// Create synthetic subflow parent entry
224+
// Use the minimum executionOrder from all child blocks for proper ordering
225+
const subflowExecutionOrder = Math.min(...allBlocks.map((b) => b.executionOrder))
228226
const syntheticSubflow: ConsoleEntry = {
229227
id: `subflow-${iterationType}-${firstIteration.blocks[0]?.executionId || 'unknown'}`,
230228
timestamp: new Date(subflowStartMs).toISOString(),
@@ -234,6 +232,7 @@ function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
234232
blockType: iterationType,
235233
executionId: firstIteration.blocks[0]?.executionId,
236234
startedAt: new Date(subflowStartMs).toISOString(),
235+
executionOrder: subflowExecutionOrder,
237236
endedAt: new Date(subflowEndMs).toISOString(),
238237
durationMs: totalDuration,
239238
success: !allBlocks.some((b) => b.error),
@@ -251,6 +250,8 @@ function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
251250
)
252251
const iterDuration = iterBlocks.reduce((sum, b) => sum + (b.durationMs || 0), 0)
253252

253+
// Use the minimum executionOrder from blocks in this iteration
254+
const iterExecutionOrder = Math.min(...iterBlocks.map((b) => b.executionOrder))
254255
const syntheticIteration: ConsoleEntry = {
255256
id: `iteration-${iterationType}-${iterGroup.iterationCurrent}-${iterBlocks[0]?.executionId || 'unknown'}`,
256257
timestamp: new Date(iterStartMs).toISOString(),
@@ -260,6 +261,7 @@ function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
260261
blockType: iterationType,
261262
executionId: iterBlocks[0]?.executionId,
262263
startedAt: new Date(iterStartMs).toISOString(),
264+
executionOrder: iterExecutionOrder,
263265
endedAt: new Date(iterEndMs).toISOString(),
264266
durationMs: iterDuration,
265267
success: !iterBlocks.some((b) => b.error),
@@ -300,14 +302,9 @@ function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
300302
nodeType: 'block' as const,
301303
}))
302304

303-
// Combine all nodes and sort by start time ascending (oldest first, top-down)
305+
// Combine all nodes and sort by executionOrder ascending (oldest first, top-down)
304306
const allNodes = [...subflowNodes, ...regularNodes]
305-
allNodes.sort((a, b) => {
306-
const aStart = new Date(a.entry.startedAt || a.entry.timestamp).getTime()
307-
const bStart = new Date(b.entry.startedAt || b.entry.timestamp).getTime()
308-
return aStart - bStart
309-
})
310-
307+
allNodes.sort((a, b) => a.entry.executionOrder - b.entry.executionOrder)
311308
return allNodes
312309
}
313310

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -926,13 +926,15 @@ export function useWorkflowExecution() {
926926
})
927927

928928
// Add entry to terminal immediately with isRunning=true
929+
// Use server-provided executionOrder to ensure correct sort order
929930
const startedAt = new Date().toISOString()
930931
addConsole({
931932
input: {},
932933
output: undefined,
933934
success: undefined,
934935
durationMs: undefined,
935936
startedAt,
937+
executionOrder: data.executionOrder,
936938
endedAt: undefined,
937939
workflowId: activeWorkflowId,
938940
blockId: data.blockId,
@@ -948,8 +950,6 @@ export function useWorkflowExecution() {
948950
},
949951

950952
onBlockCompleted: (data) => {
951-
logger.info('onBlockCompleted received:', { data })
952-
953953
activeBlocksSet.delete(data.blockId)
954954
setActiveBlocks(new Set(activeBlocksSet))
955955
setBlockRunStatus(data.blockId, 'success')
@@ -976,6 +976,7 @@ export function useWorkflowExecution() {
976976
success: true,
977977
durationMs: data.durationMs,
978978
startedAt,
979+
executionOrder: data.executionOrder,
979980
endedAt,
980981
})
981982

@@ -987,6 +988,7 @@ export function useWorkflowExecution() {
987988
replaceOutput: data.output,
988989
success: true,
989990
durationMs: data.durationMs,
991+
startedAt,
990992
endedAt,
991993
isRunning: false,
992994
// Pass through iteration context for subflow grouping
@@ -1027,6 +1029,7 @@ export function useWorkflowExecution() {
10271029
error: data.error,
10281030
durationMs: data.durationMs,
10291031
startedAt,
1032+
executionOrder: data.executionOrder,
10301033
endedAt,
10311034
})
10321035

@@ -1039,6 +1042,7 @@ export function useWorkflowExecution() {
10391042
success: false,
10401043
error: data.error,
10411044
durationMs: data.durationMs,
1045+
startedAt,
10421046
endedAt,
10431047
isRunning: false,
10441048
// Pass through iteration context for subflow grouping
@@ -1163,13 +1167,15 @@ export function useWorkflowExecution() {
11631167

11641168
if (existingLogs.length === 0) {
11651169
// No blocks executed yet - this is a pre-execution error
1170+
// Use 0 for executionOrder so validation errors appear first
11661171
addConsole({
11671172
input: {},
11681173
output: {},
11691174
success: false,
11701175
error: data.error,
11711176
durationMs: data.duration || 0,
11721177
startedAt: new Date(Date.now() - (data.duration || 0)).toISOString(),
1178+
executionOrder: 0,
11731179
endedAt: new Date().toISOString(),
11741180
workflowId: activeWorkflowId,
11751181
blockId: 'validation',
@@ -1237,13 +1243,15 @@ export function useWorkflowExecution() {
12371243
blockType = error.blockType || blockType
12381244
}
12391245

1246+
// Use MAX_SAFE_INTEGER so execution errors appear at the end of the log
12401247
useTerminalConsoleStore.getState().addConsole({
12411248
input: {},
12421249
output: {},
12431250
success: false,
12441251
error: normalizedMessage,
12451252
durationMs: 0,
12461253
startedAt: new Date().toISOString(),
1254+
executionOrder: Number.MAX_SAFE_INTEGER,
12471255
endedAt: new Date().toISOString(),
12481256
workflowId: activeWorkflowId || '',
12491257
blockId,
@@ -1615,6 +1623,7 @@ export function useWorkflowExecution() {
16151623
success: true,
16161624
durationMs: data.durationMs,
16171625
startedAt,
1626+
executionOrder: data.executionOrder,
16181627
endedAt,
16191628
})
16201629

@@ -1624,6 +1633,7 @@ export function useWorkflowExecution() {
16241633
success: true,
16251634
durationMs: data.durationMs,
16261635
startedAt,
1636+
executionOrder: data.executionOrder,
16271637
endedAt,
16281638
workflowId,
16291639
blockId: data.blockId,
@@ -1653,6 +1663,7 @@ export function useWorkflowExecution() {
16531663
output: {},
16541664
success: false,
16551665
error: data.error,
1666+
executionOrder: data.executionOrder,
16561667
durationMs: data.durationMs,
16571668
startedAt,
16581669
endedAt,
@@ -1665,6 +1676,7 @@ export function useWorkflowExecution() {
16651676
error: data.error,
16661677
durationMs: data.durationMs,
16671678
startedAt,
1679+
executionOrder: data.executionOrder,
16681680
endedAt,
16691681
workflowId,
16701682
blockId: data.blockId,

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-execution-utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export async function executeWorkflowWithFullLogging(
111111
success: true,
112112
durationMs: event.data.durationMs,
113113
startedAt: new Date(Date.now() - event.data.durationMs).toISOString(),
114+
executionOrder: event.data.executionOrder,
114115
endedAt: new Date().toISOString(),
115116
workflowId: activeWorkflowId,
116117
blockId: event.data.blockId,
@@ -140,6 +141,7 @@ export async function executeWorkflowWithFullLogging(
140141
error: event.data.error,
141142
durationMs: event.data.durationMs,
142143
startedAt: new Date(Date.now() - event.data.durationMs).toISOString(),
144+
executionOrder: event.data.executionOrder,
143145
endedAt: new Date().toISOString(),
144146
workflowId: activeWorkflowId,
145147
blockId: event.data.blockId,

0 commit comments

Comments
 (0)