Implementation:TobikoData Sqlmesh Plan Component
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Plan_Management, Data_Deployment |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
Plan is the main orchestrator component for SQLMesh's plan/apply workflow, managing plan creation, execution, cancellation, and state coordination.
Description
The Plan component serves as the central controller for SQLMesh's plan/apply workflow in the web UI. It orchestrates four key operations: running plans to preview changes, applying plans to execute transformations, cancelling in-progress operations, and resetting to start over. The component integrates with multiple API endpoints (plan run, plan apply, plan cancel) and manages complex state synchronization between plan configuration, execution tracking, test results, and error notifications. It uses custom hooks (usePlanPayload, useApplyPayload) to construct API request payloads from user-selected options and date ranges. The component implements cleanup and reset logic to ensure proper state transitions and includes automatic tracker resets with delays to allow UI animations to complete.
Usage
Use the Plan component as the main page for SQLMesh's plan/apply workflow. It should be rendered when users navigate to the plan view and provides the complete interface for managing data transformations.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/plan/Plan.tsx
Signature
function Plan(): JSX.Element
Import
import Plan from '@library/components/plan/Plan'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| None | - | - | Component reads from context stores |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Complete plan workflow interface with header, options, tracker, and actions |
Usage Examples
import Plan from '@library/components/plan/Plan'
import { PlanProvider } from '@library/components/plan/context'
function PlanPage() {
return (
<PlanProvider>
<Plan />
</PlanProvider>
)
}