improvement(preview): consolidate block rendering and fix handle configurations

[waleedlatif1]

Summary

• Unified block and subflow rendering into single component, deleted subflow.tsx
• Fixed trigger mode bug - blocks now show correct subblocks based on mode
• Added missing handles: error handles, condition branch handles, router route handles
• Added lightweight flag for template thumbnails to skip expensive computations
• Consolidated 4 separate useMemos into single structure tracking memo
• Fixed O(n²) container calculation with parent-child indexing

Type of Change

• Improvement (refactor with bug fixes)

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 26, 2026 10:39pm

[greptile-apps]

Greptile Overview

Greptile Summary

Consolidated subflow and block rendering into a single component (block.tsx), eliminating the separate subflow.tsx file. This refactor improves code maintainability while fixing several bugs:

• Fixed trigger mode visibility bug: Blocks now correctly show subblocks based on trigger mode, with improved logic differentiating between pure trigger blocks (triggers.enabled + category === 'triggers') and blocks in trigger mode
• Added missing handles: Implemented error handles for all block types (except triggers), condition branch handles for condition blocks, and route handles for router blocks
• Performance optimization: Added lightweight flag to skip expensive subblock computations (canonicalIndex building, visibility calculations) for template thumbnails and previews
• Optimized container dimension calculation: Replaced O(n²) filtering with O(n) parent-child index lookup, consolidating 4 separate useMemo hooks into single structure tracking memo

The changes maintain visual parity with existing workflow blocks while improving rendering performance and correctness.

Confidence Score: 4/5

• Safe to merge with one minor style improvement recommended
• The PR implements solid architectural improvements with clear benefits: component consolidation, bug fixes for trigger mode visibility, performance optimizations via lightweight mode and O(n) indexing, and missing handle additions. The code is well-structured with proper error handling and documentation. One minor style guide deviation (inline type vs interface) was noted but doesn't affect functionality. The refactor maintains visual parity while improving maintainability.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx	Consolidated subflow rendering into block component, added lightweight mode, fixed trigger visibility logic, and added missing handles for condition/router/error branches
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx	Deleted as functionality was consolidated into block.tsx
apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx	Optimized structure tracking with single memo, improved container dimension calculation with parent-child index, removed subflowNode type, added lightweight prop

Sequence Diagram

sequenceDiagram
    participant TemplateCard
    participant WorkflowPreview
    participant WorkflowPreviewBlock
    participant SubflowContainer
    participant BlockConfig
    
    TemplateCard->>WorkflowPreview: render(workflowState, lightweight=true)
    WorkflowPreview->>WorkflowPreview: Build containerChildIndex (O(n) parent-child mapping)
    WorkflowPreview->>WorkflowPreview: Calculate nodes from workflowState.blocks
    
    loop For each block
        alt Block is loop/parallel
            WorkflowPreview->>WorkflowPreview: Get childBlocks from containerChildIndex (O(1))
            WorkflowPreview->>WorkflowPreview: calculateContainerDimensions(childBlocks)
            WorkflowPreview->>WorkflowPreviewBlock: render(isSubflow=true, subflowKind, width, height)
            WorkflowPreviewBlock->>SubflowContainer: render(name, width, height, kind)
            SubflowContainer-->>WorkflowPreviewBlock: Container with handles (target, start-source, end-source)
        else Block is regular
            WorkflowPreview->>WorkflowPreviewBlock: render(type, name, isTrigger, subBlockValues, lightweight)
            WorkflowPreviewBlock->>BlockConfig: getBlock(type)
            
            alt lightweight=false
                WorkflowPreviewBlock->>WorkflowPreviewBlock: buildCanonicalIndex(subBlocks)
                WorkflowPreviewBlock->>WorkflowPreviewBlock: Calculate visibleSubBlocks with trigger mode logic
                
                alt effectiveTrigger=true AND isPureTriggerBlock=true
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Show subblocks with mode=trigger OR no mode
                else effectiveTrigger=true AND isPureTriggerBlock=false
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Show only subblocks with mode=trigger
                else effectiveTrigger=false
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Hide all subblocks with mode=trigger
                end
                
                alt Block is condition
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Calculate condition rows from rawValues
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Render handles for each condition branch + error handle
                else Block is router_v2
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Calculate router rows from rawValues
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Render handles for each route + error handle
                else Block is standard
                    WorkflowPreviewBlock->>WorkflowPreviewBlock: Render source handle + error handle (if not trigger)
                end
            else lightweight=true
                WorkflowPreviewBlock->>WorkflowPreviewBlock: Skip expensive computations (empty canonicalIndex, rawValues, visibleSubBlocks)
            end
        end
    end
    
    WorkflowPreview->>WorkflowPreview: Calculate edges with execution status
    WorkflowPreview-->>TemplateCard: ReactFlow with consolidated rendering

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}