Workflow Studio Architecture Diagram
┌─────────────────────────────────────────────────────────────────────────────┐
│ WORKFLOW BUILDER PAGE │
│ (WorkflowBuilderPage.tsx) │
│ │
│ ┌───────────────── ────────────────────────────────────────────────────┐ │
│ │ Navigation Tabs: Design | 3D View | Data | Ops | Agents │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ 🎌 WORKFLOW STUDIO 🎌 │ │
│ │ (index.tsx - Main) │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
│ │ │ Toolbar: Name | Validation | Save | Load | Run | Test │ │ │
│ │ └──────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────┬─────────────────────────────────────┐ │ │
│ │ │ │ │ │ │
│ │ │ WORKFLOW CANVAS │ INSPECTOR PANEL │ │ │
│ │ │ (WorkflowCanvas) │ (InspectorPanel) │ │ │
│ │ │ │ │ │ │
│ │ │ ┌───────────┐ │ ┌─────────────────────────┐ │ │ │
│ │ │ │ START │ │ │ Selected Node Info │ │ │ │
│ │ │ │ Node │ │ │ │ │ │ │
│ │ │ └─────┬─────┘ │ │ Tabs: │ │ │ │
│ │ │ │ │ │ • Properties │ │ │ │
│ │ │ ▼ │ │ • Data │ │ │ │
│ │ │ ┌───────────┐ │ │ • Retry │ │ │ │
│ │ │ │ TASK 1 │◄─────┼────┤ • Style │ │ │ │
│ │ │ │ │ │ │ • Adapters │ │ │ │
│ │ │ └─────┬─────┘ │ │ • Advanced │ │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 📦 Module Chain │ └─────────────────────────┘ │ │ │
│ │ │ ▼ │ │ │ │
│ │ │ ┌─────────────┐ │ 🎯 TASK MODULE CHAIN │ │ │
│ │ │ │ ExecModule │ │ (TaskModuleChain.tsx) │ │ │
│ │ │ │ #1 │ │ │ │ │
│ │ │ └──────┬──────┘ │ ┌─────────────────────────┐ │ │ │
│ │ │ │ │ │ Header │ │ │ │
│ │ │ ● ← Flow │ │ Count Badge: (3) │ │ │ │
│ │ │ │ │ ├─────────────────────────┤ │ │ │
│ │ │ ┌──────┴──────┐ │ │ │ │ │ │
│ │ │ │ ExecModule │ │ │ ┌─────────────────────┐ │ │ │ │
│ │ │ │ #2 │ │ │ │ ☰ Module Card #1 │ │ │ │ │
│ │ │ └──────┬──────┘ │ │ │ 🔧 Email Sender │ │ │ │ │
│ │ │ │ │ │ │ [▼][✏][↑][↓][🗑] │ │ │ │ │
│ │ │ ● │ │ └─────────────────────┘ │ │ │ │
│ │ │ │ │ │ ● │ │ │ │
│ │ │ ┌──────┴──────┐ │ │ ┌────┴────┐ │ │ │ │
│ │ │ │ ExecModule │ │ │ ┌──┴──────────────────┐ │ │ │ │
│ │ │ │ #3 │ │ │ │ ☰ Module Card #2 │ │ │ │ │
│ │ │ └─────────────┘ │ │ │ 🌐 REST API Call │ │ │ │ │
│ │ │ │ │ │ [▼][✏][↑][↓][🗑] │ │ │ │ │
│ │ │ ┌───────────┐ │ │ └─────────────────────┘ │ │ │ │
│ │ │ │ TASK 2 │ │ │ ● │ │ │ │
│ │ │ │ │ │ │ ┌────┴────┐ │ │ │ │
│ │ │ └─────┬─────┘ │ │ ┌──┴──────────────────┐ │ │ │ │
│ │ │ │ │ │ │ ☰ Module Card #3 │ │ │ │ │
│ │ │ ▼ │ │ │ 📊 Data Transform │ │ │ │ │
│ │ │ ┌───────────┐ │ │ │ [▼][✏][↑][↓][🗑] │ │ │ │ │
│ │ │ │ END │ │ │ └─────────────────────┘ │ │ │ │
│ │ │ │ Node │ │ │ │ │ │ │
│ │ │ └───────────┘ │ │ ┌─────────────────────┐ │ │ │ │
│ │ │ │ │ │ [+ Add Module] │ │ │ │ │
│ │ └─────────────────────┤ │ └─────────────────────┘ │ │ │ │
│ │ │ └─────────────────────────┘ │ │ │
│ │ Console Output │ │ │ │
│ │ ┌──────────────────┐ │ │ │ │
│ │ │ > Workflow logs │ │ │ │ │
│ │ │ > Task executed │ │ │ │ │
│ │ └──────────────────┘ │ │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 🎨 FLOATING PALETTE (FloatingControlPanel) │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────┐ │ │
│ │ │ Search: [________________] │ │ │
│ │ ├──────────────────────────────────────────────────────────┤ │ │
│ │ │ Core Nodes │ │ │
│ │ │ ┌────┐ ┌────┐ ┌────┐ │ │ │
│ │ │ │Task│ │Brnch│ │End │ │ │ │
│ │ │ └────┘ └────┘ └────┘ │ │ │
│ │ ├──────────────────────────────────────────────────────────┤ │ │
│ │ │ Exec Modules │ │ │
│ │ │ ┌──────────────────────────────────┐ │ │ │
│ │ │ │ 📧 Email Sender │ │ │ │
│ │ │ │ Send emails via SMTP │ │ │ │
│ │ │ └──────────────────────────────────┘ │ │ │
│ │ │ ┌──────────────────────────────────┐ │ │ │
│ │ │ │ 🌐 REST API Client │ │ │ │
│ │ │ │ HTTP requests to APIs │ │ │ │
│ │ │ └──────────────────────────────────┘ │ │ │
│ │ │ ┌──────────────────────────────────┐ │ │ │
│ │ │ │ 💳 Stripe Payment │ │ │ │
│ │ │ │ Process payments │ │ │ │
│ │ │ └──────────────────────────────────┘ │ │ │
│ │ └──────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 🎛️ ADVANCED MODULE CONFIG MODAL │ │
│ │ (AdvancedExecModuleConfig.tsx) │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────┐ │ │
│ │ │ Module: Email Sender [✓ Valid] [⚠ 1 Warning] │ │ │
│ │ ├──────────────────────────────────────────────────────────┤ │ │
│ │ │ [🎨 Visual Config] [💻 Raw JSON] │ │ │
│ │ ├──────────────────────────────────────────────────────────┤ │ │
│ │ │ │ │ │
│ │ │ Visual Config Tab: │ │ │
│ │ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ │ SMTP Host: [smtp.gmail.com ] ✓ │ │ │ │
│ │ │ │ Port: [───────▓──] 587 ✓ │ │ │ │
│ │ │ │ Username: [user@example.com ] ✓ │ │ │ │
│ │ │ │ Password: [******************** ] ✓ │ │ │ │
│ │ │ │ From: [sender@example.com ] ✓ │ │ │ │
│ │ │ │ To: [Search recipients... 🔍 ] ⚠ │ │ │ │
│ │ │ │ Subject: [Email subject ] ✓ │ │ │ │
│ │ │ │ Body: [┌─────────────────────┐ ] │ │ │ │
│ │ │ │ [│ Email body text... │ ] │ │ │ │
│ │ │ │ [│ │ ] │ │ │ │
│ │ │ │ [└─────────────────────┘ ] │ │ │ │
│ │ │ │ Enable HTML: [✓] Yes [ ] No ✓ │ │ │ │
│ │ │ └────────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ Raw JSON Tab: │ │ │
│ │ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ │ [Format] [Minify] │ │ │ │
│ │ │ ├────────────────────────────────────────────────┤ │ │ │
│ │ │ │ { │ │ │ │
│ │ │ │ "smtpHost": "smtp.gmail.com", │ │ │ │
│ │ │ │ "port": 587, │ │ │ │
│ │ │ │ "username": "user@example.com", │ │ │ │
│ │ │ │ "password": "********", │ │ │ │
│ │ │ │ "from": "sender@example.com", │ │ │ │
│ │ │ │ "to": "recipient@example.com", │ │ │ │
│ │ │ │ "subject": "Test Email", │ │ │ │
│ │ │ │ "body": "Hello world!", │ │ │ │
│ │ │ │ "html": true │ │ │ │
│ │ │ │ } │ │ │ │
│ │ │ └────────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ [Cancel] [Save Configuration] │ │ │
│ │ └──────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 📚 WORKFLOW BUILDER GUIDE (Collapsible) │ │
│ │ │ │
│ │ [Help Guide ▼] ← Click to expand/collapse │ │
│ │ │ │
│ │ (Content hidden by default) │ │
│ └─────────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
┌───────────────────────────────────────────────────────────────────┐
│ DATA FLOW ARCHITECTURE │
└───────────────────────────────────────────────────────────────────┘
User Actions
│
▼
┌─────────────────────┐
│ UI Components │
│ (React + Hooks) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ RTK Query Hooks │
│ (useGetModules, │
│ useUpdateModule) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐ ┌──────────────────┐
│ Generated Services │◄─────┤ ThorAPI Models │
│ (ExecModuleService)│ │ (ExecModule) │
└──────────┬──────────┘ └──────────────────┘
│
▼
┌─────────────────────┐
│ REST API │
│ (/ExecModule) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ Backend Services │
│ (Spring Boot) │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ PostgreSQL │
│ Database │
└─────────────────────┘
Legend:
━━━ Direct interaction
··· Indirect/event-based
🔵 User interaction points
📦 Module components
🎨 Visual elements
⚙️ Configuration
Component Hierarchy
WorkflowBuilderPage
└── WorkflowStudio
├── Toolbar
│ ├── Name Input
│ ├── Validation Badge
│ └── Action Buttons
├── Content Area
│ ├── WorkflowCanvas
│ │ ├── ReactFlow
│ │ ├── Start Node
│ │ ├── Task Nodes
│ │ └── End Node
│ └── InspectorPanel
│ ├── Tabs (Properties/Data/Retry/Style/Adapters/Advanced)
│ └── TaskModuleChain
│ ├── Chain Header
│ ├── Module Cards
│ │ ├── Drag Handle
│ │ ├── Module Icon
│ │ ├── Module Info
│ │ ├── Order Badge
│ │ ├── Config Preview (expandable)
│ │ └── Action Buttons
│ │ ├── Edit
│ │ ├── Duplicate
│ │ ├── Move Up/Down
│ │ └── Delete
│ ├── Flow Connectors
│ └── Add Module Button
├── Console Output
└── FloatingControlPanel
└── FloatingExecModulesToolbar
├── Search Bar
├── Core Nodes Category
└── Exec Modules Categories
├── Social
├── Messaging
├── API
└── Operations
ExecModuleEditModal
└── AdvancedExecModuleConfig
├── Header (Icon, Name, Validation Status)
├── Validation Alerts
└── Tabs
├── Visual Config Tab
│ └── ExecModuleConfigBuilder
│ ├── Form Fields (dynamic)
│ ├── Field Validation
│ └── Help Text
└── Raw JSON Tab
├── JSON Toolbar (Format/Minify)
├── JSON Editor
└── Error Display
State Management Flow
┌─────────────────────────────────────────────────────────────── ──┐
│ Redux Store (RTK) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ workflowApi │
│ ├── queries │
│ │ ├── getWorkflows │
│ │ ├── getTasks │
│ │ └── getExecModules ◄────── Cache invalidation triggers │
│ └── mutations │
│ ├── addWorkflow │
│ ├── updateWorkflow │
│ ├── addTask │
│ ├── updateTask │
│ ├── addExecModule ────────► Auto-refetch queries │
│ └── updateExecModule ─────────► Optimistic updates │
│ │
│ themeSlice │
│ └── effectiveMode (light/dark) │
│ │
│ websocketSlice │
│ └── messages (real-time workflow execution logs) │
│ │
└────────────────────────────────────────────────── ───────────────┘