gateway/notes/doc_frontend.md
2025-04-26 02:13:22 +02:00

1.1 KiB

Architectural Flow

workflow.js - Entry point that:

Creates the central state object Initializes API and UI components Connects components together Exposes required public functions

workflow_state.js - State management that:

Maintains a single source of truth for workflow data Implements an observer pattern for state changes Handles state transitions and business logic Validates state updates

workflow_api.js - API communication that:

Abstracts all API calls to backend services Manages polling for workflow status Processes API responses Tracks data transfer statistics Updates state with API results

workflow_ui.js - UI layer that:

Renders UI based on current state Sets up event listeners for user interactions Handles DOM manipulation Controls layout adjustments Triggers state changes via user actions

Data Flow

User initiates action in the UI UI controller handles the action and calls relevant API methods API communicates with backend and updates state State notifies observers about changes UI reacts to state changes and updates display Polling continues until completed state is reached Final UI update happens when workflow completes