Uh oh!
There was an error while loading. Please reload this page.
improvement(execution-snapshot): enhance workflow preview in logs and deploy modal - #2742
Merged
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
There was a problem hiding this comment.
Greptile Overview
Greptile Summary
This PR enhances the workflow preview functionality in logs and deploy modals by introducing a comprehensive execution snapshot feature with React Query caching. The changes replace the legacy FrozenCanvas component with a new ExecutionSnapshot component that provides interactive workflow visualization with execution data.
Key Changes
New Features:
- Execution Snapshot Component: Interactive workflow state viewer with block details sidebar, execution status highlighting, and support for migrated logs
- React Query Integration: Added
useExecutionSnapshothook with 5-minute cache anduseLogDetailhook with 30-second cache for improved performance - Block Details Sidebar: Comprehensive readonly sidebar showing block configuration, execution input/output, resolved variable references, and connection visualization
- Workflow Preview Enhancements: Added execution status support for blocks and edges, lightweight mode for template cards, and improved memoization
Refactoring:
- State Management: Refactored logs page from object-based to ID-based log selection for better React Query integration
- Color Consolidation: Moved user color utilities from
w/utils/get-user-color.tsto centralizedlib/workspaces/colors.ts - EMCN Components: Updated checkbox, slider, and switch to use
data-[disabled]attribute instead ofdisabled:pseudo-class for Radix UI compatibility
Architecture:
- New reusable preview component structure in
app/workspace/[workspaceId]/w/components/preview/ - Proper separation between full-featured blocks and lightweight preview blocks
- Integration with existing workflow editor components via readonly mode
Issues Found
One minor style issue was identified:
- Import pattern inconsistency in
block.tsx(importing from@/blocks/registryinstead of@/blocks)
Confidence Score: 5/5
- This PR is safe to merge with minimal risk
- The implementation is well-structured with proper error handling, loading states, and React Query caching patterns. The refactoring from FrozenCanvas to ExecutionSnapshot is complete and properly integrated. State management changes in logs.tsx improve data flow. Color consolidation eliminates code duplication. EMCN component updates align with Radix UI best practices. Only one minor style issue (import pattern inconsistency) was found, which doesn't affect functionality.
- apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx - Contains a minor import pattern inconsistency that should be aligned with other files in the same directory
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 for rendering workflow execution snapshots with React Query integration, proper loading/error states, and modal support |
| apps/sim/hooks/queries/logs.ts | 5/5 | Added useExecutionSnapshot hook with 5-minute staleTime and useLogDetail hook with 30-second staleTime for React Query caching |
| apps/sim/hooks/queries/workflows.ts | 5/5 | Added useDeploymentVersionState and useRevertToVersion hooks for deployment version management with proper caching |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx | 5/5 | Enhanced WorkflowPreview with execution status support, lightweight mode for performance, and proper memoization |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx | 4/5 | New comprehensive sidebar for block details with execution data, resolved connections, and readonly preview mode with proper CSS overrides |
| apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx | 4/5 | New lightweight preview block component with minor import pattern inconsistency (uses @/blocks/registry instead of @/blocks) |
| apps/sim/lib/workspaces/colors.ts | 5/5 | Consolidated color utilities from multiple locations into single source of truth for user and presence colors |
| apps/sim/app/workspace/[workspaceId]/logs/logs.tsx | 5/5 | Refactored log selection state from object-based to ID-based management, added preview modal support, improved React Query integration |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx | 5/5 | Enhanced with BlockDetailsSidebar integration, expanded preview modal, and proper version state management |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx | 5/5 | Added support for preview execution status from edge data, improved edge styling logic for execution states |
Sequence Diagram
sequenceDiagram
participant User
participant LogsPage as Logs Page
participant LogDetails as Log Details Sidebar
participant ExecutionSnapshot as Execution Snapshot
participant LogsQuery as useExecutionSnapshot Hook
participant API as /api/logs/execution
participant WorkflowPreview as Workflow Preview
participant BlockSidebar as Block Details Sidebar
User->>LogsPage: Click log row
LogsPage->>LogDetails: Open sidebar with log
LogDetails->>LogDetails: Display log metadata
User->>LogDetails: Click "View Snapshot"
LogDetails->>ExecutionSnapshot: Open modal (isModal=true)
ExecutionSnapshot->>LogsQuery: Request execution snapshot
LogsQuery->>API: GET /api/logs/execution/{executionId}
Note over LogsQuery,API: Cached for 5 minutes (staleTime)
API-->>LogsQuery: Return workflowState + metadata
LogsQuery-->>ExecutionSnapshot: Provide data
alt Migrated State
ExecutionSnapshot->>User: Show "Logged State Not Found" warning
else Valid State
ExecutionSnapshot->>WorkflowPreview: Render with workflowState
WorkflowPreview->>WorkflowPreview: Calculate nodes/edges with execution status
WorkflowPreview->>User: Display interactive canvas
User->>WorkflowPreview: Click block
WorkflowPreview->>BlockSidebar: Open sidebar with block details
BlockSidebar->>BlockSidebar: Resolve variable references
BlockSidebar->>User: Show execution data, input/output, connections
User->>BlockSidebar: Click close
BlockSidebar->>WorkflowPreview: Clear pinned block
end
User->>ExecutionSnapshot: Close modal
ExecutionSnapshot->>LogDetails: Return to log details
Contributor
Additional Comments (1)
According to the codebase patterns, This maintains consistency with the rest of the preview components and follows the repository's import conventions. Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! Prompt To Fix With AIThis is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx
Line: 6:6
Comment:
Inconsistent import pattern detected. This file imports `getBlock` from `'@/blocks/registry'`, but other files in the same directory (`block-details-sidebar.tsx` and `preview.tsx`) import it from `'@/blocks'`. According to the codebase patterns, `@/blocks/index.ts` re-exports from `@/blocks/registry`, so importing from `'@/blocks'` is the established pattern.
```suggestionimport { getBlock } from '@/blocks'```
This maintains consistency with the rest of the preview components and follows the repository's import conventions.
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise. |
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
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Type of Change
Testing
Tested manually
Checklist