improvement(execution-snapshot): enhance workflow preview in logs and deploy modal #2635
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
Greptile SummaryThis PR adds an expanded preview feature to the deploy modal, allowing users to view their live or selected deployment workflow in a larger full-screen modal.
Confidence Score: 5/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant U as User
participant G as GeneralDeploy
participant EP as ExpandedWorkflowPreview
participant WP as WorkflowPreview
participant PS as PinnedSubBlocks
U->>G: Click expand button
G->>G: setShowExpandedPreview(true)
G->>EP: Render with workflowState
EP->>WP: Render workflow canvas
U->>WP: Click on block node
WP->>EP: onNodeClick(blockId)
EP->>EP: setSelectedBlockId(blockId)
EP->>PS: Render with selected block
PS->>PS: getBlock(block.type)
PS->>PS: evaluateCondition for visible subBlocks
PS-->>U: Display block configuration
U->>PS: Click close button
PS->>EP: onClose()
EP->>EP: setSelectedBlockId(null)
U->>EP: Close modal
EP->>G: onClose()
G->>G: setShowExpandedPreview(false)
|
waleedlatif1
force-pushed
the
improvement/workflow-preview
branch
from
f3a9dda to
8b98dc7
Compare
waleedlatif1
changed the title
Collaborator
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Greptile Overview
Greptile Summary
This PR refactors the workflow preview system and enhances execution log visualization by extracting reusable components and adding interactive block inspection.
Major Changes:
- Replaced
FrozenCanvaswith newExecutionSnapshotcomponent that provides interactive workflow state viewing with clickable blocks - Extracted
WorkflowPreviewcomponent fromworkflow-previewfolder into reusablepreviewmodule with barrel exports - Added
BlockDetailsSidebarcomponent showing block configuration, execution I/O data, and resolved variable connections - Created lightweight preview components (
WorkflowPreviewBlock,WorkflowPreviewSubflow) for performance in template cards - Consolidated color utilities by moving
getUserColorfrom workspace utils tolib/workspaces/colors.ts - Enhanced deploy modal with expandable preview featuring interactive block selection
- Simplified invite modal structure by consolidating barrel exports
Key Improvements:
- Better separation of concerns with dedicated preview components
- Enhanced execution visibility with trace span processing and block execution highlighting
- Interactive workflow exploration in both logs and deploy contexts
- Performance optimization through lightweight vs full rendering modes
Minor Issues Found:
- Missing CSS for
execution-not-executededge class (line 336 in preview.tsx) - Type safety bypassed with
as anyfor migrated logs check (line 181 in execution-snapshot.tsx)
Confidence Score: 4/5
- Safe to merge with minor style improvements recommended
- Well-structured refactoring that improves code organization and adds valuable features. The changes follow established patterns, properly extract reusable components, and maintain backward compatibility. Two minor style issues were found (missing CSS for edge styling and type safety bypass) but neither affects functionality. The code is thoroughly tested according to the PR checklist.
- No files require special attention - the minor style issues in preview.tsx and execution-snapshot.tsx are cosmetic improvements that can be addressed in follow-up work
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx | 4/5 | New component for displaying workflow execution state with interactive block details and trace data |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx | 5/5 | New reusable workflow preview component extracted from workflow-preview, supports lightweight and full rendering modes |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx | 4/5 | New sidebar component showing block configuration, execution data, and resolved variable connections |
| apps/sim/lib/workspaces/colors.ts | 5/5 | Consolidated color utilities including getUserColor moved from workspace utils |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx | 5/5 | Added expanded preview modal with interactive block selection using new preview components |
Sequence Diagram
sequenceDiagram
participant User
participant LogDetails
participant ExecutionSnapshot
participant API
participant WorkflowPreview
participant BlockDetailsSidebar
User->>LogDetails: View log entry
LogDetails->>LogDetails: Click "View Workflow State"
LogDetails->>ExecutionSnapshot: Open modal with executionId & traceSpans
par Fetch execution data
ExecutionSnapshot->>API: GET /api/logs/execution/{executionId}
API-->>ExecutionSnapshot: Return workflowState & metadata
and Process trace spans
ExecutionSnapshot->>ExecutionSnapshot: collectBlockSpans(traceSpans)
ExecutionSnapshot->>ExecutionSnapshot: Build blockExecutions map
ExecutionSnapshot->>ExecutionSnapshot: redactApiKeys(input/output)
end
ExecutionSnapshot->>WorkflowPreview: Render with workflowState & executedBlocks
WorkflowPreview->>WorkflowPreview: Calculate node positions
WorkflowPreview->>WorkflowPreview: Apply execution status styling
WorkflowPreview-->>ExecutionSnapshot: Display workflow canvas
User->>WorkflowPreview: Click on block node
WorkflowPreview->>ExecutionSnapshot: onNodeClick(blockId)
ExecutionSnapshot->>ExecutionSnapshot: setPinnedBlockId(blockId)
ExecutionSnapshot->>BlockDetailsSidebar: Render with block & executionData
BlockDetailsSidebar->>BlockDetailsSidebar: Extract variable references
BlockDetailsSidebar->>BlockDetailsSidebar: Resolve references from allBlockExecutions
BlockDetailsSidebar->>BlockDetailsSidebar: Group by source block
BlockDetailsSidebar-->>User: Show config, I/O, connections
User->>BlockDetailsSidebar: Click same block (toggle)
BlockDetailsSidebar->>ExecutionSnapshot: Close sidebar
ExecutionSnapshot->>ExecutionSnapshot: setPinnedBlockId(null)
...d]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
Outdated
Show resolved
Hide resolved
...orkspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
Outdated
Show resolved
Hide resolved
Collaborator
Contributor
There was a problem hiding this comment.
Greptile Overview
Greptile Summary
This PR enhances workflow preview functionality in logs and deploy modal by replacing the frozen-canvas component with a new ExecutionSnapshot component. The changes consolidate preview-related components into a dedicated directory structure and add execution state visualization.
Key Changes
- Replaced
frozen-canvaswithExecutionSnapshotcomponent that displays workflow state at execution time - Created new
BlockDetailsSidebarfor showing block configuration and execution I/O data - Renamed and restructured
workflow-previewtopreviewdirectory with lightweight block components - Consolidated color utilities by moving
getUserColorfrom local utils tolib/workspaces/colors.ts - Added "Open Preview" option to log row context menu
Issues Found
- Logic errors in execution status handling: Non-'error' statuses are incorrectly treated as 'success' (should explicitly check for 'success' status)
- Missing cleanup: Fetch request in
ExecutionSnapshotneeds abort controller for proper cleanup on unmount - Missing validation: Reference parsing doesn't validate format before slicing
- Style issue: Modal
onOpenChangehandler signature mismatch
Confidence Score: 3/5
- This PR has logic issues that could cause incorrect execution status display and potential memory leaks
- Score reflects multiple logic bugs in execution status handling that will cause incorrect visual feedback to users (showing 'unknown' or other statuses as 'success'), plus missing cleanup in async operations. The refactoring is well-structured but the bugs need fixing before merge.
- Pay close attention to
apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx(execution status logic) andapps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx(fetch cleanup)
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx | 3/5 | Renamed from workflow-preview.tsx. Added execution status visualization. Logic issue: non-'error' statuses treated as 'success' instead of checking explicit success status. |
| apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx | 3/5 | New component replacing frozen-canvas. Displays workflow state at execution time. Missing fetch abort on unmount. Modal handler signature mismatch. |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx | 3/5 | New component for showing block details with execution data. Missing validation for reference format before parsing. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx | 4/5 | Updated to use new preview components. Properly handles modal callbacks and block selection state. |
| apps/sim/lib/workspaces/colors.ts | 5/5 | Moved from presence-colors.ts and merged with get-user-color.ts. Consolidates color utilities in one location. |
| apps/sim/app/workspace/[workspaceId]/logs/logs.tsx | 4/5 | Updated to use ExecutionSnapshot instead of frozen-canvas. Context menu now includes preview option. |
Sequence Diagram
sequenceDiagram
participant User
participant LogsPage
participant LogDetails
participant ExecutionSnapshot
participant API
participant WorkflowPreview
participant BlockDetailsSidebar
User->>LogsPage: Right-click log row
LogsPage->>LogsPage: Show context menu
User->>LogsPage: Click "Open Preview"
LogsPage->>ExecutionSnapshot: Open modal with executionId
ExecutionSnapshot->>API: GET /api/logs/execution/{executionId}
API-->>ExecutionSnapshot: Return workflowState & metadata
ExecutionSnapshot->>ExecutionSnapshot: Process traceSpans
ExecutionSnapshot->>ExecutionSnapshot: Build blockExecutions map
ExecutionSnapshot->>WorkflowPreview: Render with executedBlocks
WorkflowPreview->>WorkflowPreview: Create nodes with execution status
WorkflowPreview->>WorkflowPreview: Create edges with execution status
WorkflowPreview-->>ExecutionSnapshot: Display workflow canvas
User->>WorkflowPreview: Click block node
WorkflowPreview->>ExecutionSnapshot: onNodeClick(blockId)
ExecutionSnapshot->>BlockDetailsSidebar: Show sidebar with block & executionData
BlockDetailsSidebar->>BlockDetailsSidebar: Resolve variable references
BlockDetailsSidebar->>BlockDetailsSidebar: Group connections by source block
BlockDetailsSidebar-->>ExecutionSnapshot: Display block config & execution I/O
User->>ExecutionSnapshot: Close modal
ExecutionSnapshot->>LogsPage: Return to logs view
...orkspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
Outdated
Show resolved
Hide resolved
...orkspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx
Show resolved
Hide resolved
Collaborator
Contributor
There was a problem hiding this comment.
Greptile Overview
Greptile Summary
This PR replaces the FrozenCanvas component with a new ExecutionSnapshot component and adds an expanded workflow preview feature to the deploy modal. The changes also consolidate user color utilities into a centralized location.
Key Changes
1. Execution Snapshot Improvements (Logs)
- Replaced
FrozenCanvaswithExecutionSnapshotcomponent for viewing workflow execution state - Added interactive
BlockDetailsSidebarthat shows block configuration, execution data (input/output/status/duration), and resolved variable connections - Execution data is now displayed in a more structured format with collapsible sections using the Code.Viewer component
2. Expanded Preview in Deploy Modal
- Added "Expand preview" button (Maximize2 icon) to the workflow preview in the deploy modal
- Users can now view their live or selected deployment workflow in a full-screen modal (90vh height)
- The expanded view includes interactive node selection with the BlockDetailsSidebar showing block details on click
- State management correctly resets
expandedSelectedBlockIdwhen closing the modal
3. New Reusable Preview Components
- Created
WorkflowPreviewcomponent (moved fromworkflow-preview/workflow-preview.tsxtopreview/preview.tsx) - Added
WorkflowPreviewBlock- lightweight block component for template cards and previews (no hooks or store subscriptions) - Added
WorkflowPreviewSubflow- lightweight subflow component for previews - Added
BlockDetailsSidebar- comprehensive readonly sidebar showing block configuration with SubBlock components in preview mode - Enhanced WorkflowPreview with support for:
executedBlocksprop for highlighting execution paths with success/error statuscursorStyleprop for customizing cursor appearanceonNodeClickcallback for interactive node selectionlightweightmode for better performance in template cards
4. Code Consolidation
- Moved user color utilities from
app/workspace/[workspaceId]/w/utils/get-user-color.tsto centralizedlib/workspaces/colors.ts - Consolidated with existing presence color logic
- Updated all imports across the codebase to use the new centralized location
5. Enhanced Edge Rendering
- WorkflowEdge now supports execution status from preview data (
executionStatusprop) - Edges can display success/error states in both live execution and preview modes
- Improved visual styling with proper stroke widths and opacity for execution states
Technical Details
The execution snapshot now provides a complete view of workflow execution with:
- Block-level execution data (input, output, status, duration)
- Variable reference resolution showing which blocks connect to each other
- Proper handling of migrated logs (displays appropriate warning message)
- Collapsible sections for better UX with large data payloads
Confidence Score: 4/5
- This PR is safe to merge with minor improvements recommended
- Clean refactoring and feature addition with no breaking changes. Two minor state management issues found that could cause slight UX inconsistencies (stale expanded state and pinned block state), but these are non-blocking and won't cause runtime errors. All imports properly updated, deleted code fully removed with no dangling references, and the new components follow existing patterns.
- apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx (expandedBlocks state), apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx (pinnedBlockId state)
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx | 5/5 | New component replacing FrozenCanvas with improved execution visualization and interactive block details sidebar |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx | 5/5 | Refactored WorkflowPreview component with execution status support, cursor customization, and node click handling |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx | 5/5 | New comprehensive readonly sidebar showing block config, execution data, and resolved variable connections |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx | 5/5 | Added expand preview functionality with interactive node selection in full-screen modal |
| apps/sim/lib/workspaces/colors.ts | 5/5 | Consolidated user color utilities with presence colors, centralizing color management logic |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx | 5/5 | Enhanced to support execution status from preview data with improved visual styling |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx | 5/5 | New lightweight block component for high-performance previews without hooks or subscriptions |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx | 5/5 | New lightweight subflow component for high-performance previews matching actual subflow styling |
Sequence Diagram
sequenceDiagram
participant User
participant LogDetails
participant ExecutionSnapshot
participant WorkflowPreview
participant BlockDetailsSidebar
participant API
Note over User,API: Logs Flow
User->>LogDetails: Click "View Workflow State"
LogDetails->>ExecutionSnapshot: Open modal with executionId
ExecutionSnapshot->>API: GET /api/logs/execution/{executionId}
API-->>ExecutionSnapshot: Return workflowState + metadata
ExecutionSnapshot->>WorkflowPreview: Render workflow with executedBlocks
User->>WorkflowPreview: Click on a block node
WorkflowPreview->>ExecutionSnapshot: onNodeClick(blockId)
ExecutionSnapshot->>BlockDetailsSidebar: Show sidebar with block + executionData
BlockDetailsSidebar-->>User: Display config, input/output, connections
Note over User,API: Deploy Modal Flow
User->>GeneralDeploy: View workflow preview
User->>GeneralDeploy: Click expand button
GeneralDeploy->>WorkflowPreview: Render in full-screen modal
User->>WorkflowPreview: Click on a block node
WorkflowPreview->>GeneralDeploy: onNodeClick(blockId)
GeneralDeploy->>BlockDetailsSidebar: Show sidebar with block details
BlockDetailsSidebar-->>User: Display configuration
User->>GeneralDeploy: Close modal
GeneralDeploy->>GeneralDeploy: Reset expandedSelectedBlockId
apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx
Outdated
Show resolved
Hide resolved
...orkspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Expanded live state for more visibility.
Type of Change
Testing
Tested manually
Checklist