This page documents the context menu system, selection mechanics, and interaction patterns within the Sim Studio workspace. It details how the application handles right-click menus, batch operations, permission-gated actions, and the data flow between UI components and the underlying state stores.
The context menu system is a unified architecture built on the Radix UI Popover primitive and specialized DropdownMenu components, customized for high-density workspace interactions. It provides contextual actions for workflows, folders, canvas blocks, and workspace-level entities.
The system uses a "Capture-and-Route" pattern where the current selection state is snapshotted upon menu opening to ensure operations apply to the correct entities even if the background selection changes.
Title: Interaction Routing Architecture
Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:60-71, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx:25-28, apps/sim/app/workspace/[workspaceId]/logs/logs.tsx:108-127
The workflow editor utilizes ReactFlow for node management, supplemented by an ActionBar component attached to each block for immediate interactions and a context menu for broader operations.
ActionBar)The ActionBar provides a hovering set of controls for every block on the canvas. It bridges user intent to collaborative operations.
| Action | Code Entity | Implementation Detail |
|---|---|---|
| Duplicate | handleDuplicateBlock | Uses copyBlocks and preparePasteData from useWorkflowRegistry apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:59-86 |
| Run from Block | handleRunFromBlock | Triggers partial execution if dependencies are satisfied apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:146-149 |
| Lock/Unlock | collaborativeBatchToggleLocked | Restricts editing of the specific block apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:52-53 |
| Toggle Enabled | collaborativeBatchToggleBlockEnabled | Disables block from execution flow apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:50-51 |
Specialized nodes like SubflowNodeComponent (Loops and Parallels) handle nested interactions. They use a nestingLevel calculation to apply recursive styling and manage their own ActionBar instances apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx:95-107.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:45-150, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx:61-169
The sidebar manages navigation items, workflows, and folders using a hierarchical selection system and context menus.
When a user right-clicks a sidebar item, the system determines if that item is part of the current selection. If not, it clears the selection and selects only the target item to mimic standard OS behavior.
Title: Sidebar Selection Logic Flow
Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:168-181, apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx:183-195
The WorkspaceHeader manages the workspace transition lifecycle. Switching workspaces triggers resetWorkflowStores to prevent data leakage between environments apps/sim/stores/workflows/registry/store.ts36-51
beginMetadataLoad and completeMetadataLoad apps/sim/stores/workflows/registry/store.ts81-121isWorkspaceTransitioning and a TRANSITION_TIMEOUT to prevent race conditions during rapid switching apps/sim/stores/workflows/registry/store.ts31-33Sources: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx:88-108, apps/sim/stores/workflows/registry/store.ts136-181
Interactions are strictly gated by the useUserPermissionsContext. Menu items and action buttons are visually hidden or disabled if the user lacks sufficient rights.
| User Permission | Component Effect | Code Pointer |
|---|---|---|
canEdit (False) | ActionBar buttons disabled | apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:119-120 |
isOfflineMode | Tooltip shows "Connection lost" | apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:159-160 |
isInvitationsDisabled | Invite Modal restricted | apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx:135-157 |
Sources: apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx:1-50, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:119-162
The Logs page introduces interaction patterns for inspecting execution history, utilizing a logSelectionReducer to manage sidebar state apps/sim/app/workspace/[workspaceId]/logs/logs.tsx:108-127.
The TraceSpans component allows users to interact with execution steps:
Sources: apps/sim/app/workspace/[workspaceId]/logs/logs.tsx:108-127, apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx:29-121
| Entity | Code Symbol | Role |
|---|---|---|
| Popover System | PopoverContext | Manages nested folder navigation and positioning apps/sim/components/emcn/components/popover/popover.tsx154-186 |
| Color Grid | ColorGrid | Provides roving tabindex keyboard navigation for color selection apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx:40-50 |
| Clipboard | useWorkflowRegistry.clipboard | Stores serialized block/edge data for cross-workflow paste apps/sim/stores/workflows/registry/store.ts78-80 |
| Action Styles | ACTION_BUTTON_STYLES | Unified CSS tokens for canvas interaction buttons apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx:17-23 |
Sources: apps/sim/components/emcn/components/popover/popover.tsx1-186 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx:36-135, apps/sim/stores/workflows/registry/store.ts70-80
Refresh this wiki