Implementation:TobikoData Sqlmesh PlanChangePreview
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Plan_Changes, Change_Categorization |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
Concrete tool for displaying and categorizing model changes in plan previews provided by the SQLMesh web client.
Description
PlanChangePreview is a React component that renders color-coded change previews for SQLMesh plans. It displays different types of model changes (added, removed, direct modifications, indirect modifications, metadata changes) with appropriate styling and icons. For direct changes, it provides expandable details showing SQL diffs, change categorization options (Breaking, Non-Breaking, Forward-Only), downstream impact visualization via embedded lineage graphs, and related model lists. The component integrates with RadioGroup for category selection and uses Disclosure panels for progressive disclosure of change details. It supports read-only mode during plan execution.
Usage
Use this component to display model changes in plan stages and change summaries. It should be nested within plan tracking components or change overview sections.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/plan/PlanChangePreview.tsx
Signature
function PlanChangePreview({
children,
headline,
type,
className,
}: {
headline?: string
type: PlanChangeType
className?: string
children: React.ReactNode
}): JSX.Element
PlanChangePreview.Default = PlanChangePreviewDefault
PlanChangePreview.Direct = PlanChangePreviewDirect
PlanChangePreview.Indirect = PlanChangePreviewIndirect
PlanChangePreview.Diff = PlanChangePreviewDiff
PlanChangePreview.Title = PlanChangePreviewTitle
Import
import PlanChangePreview from '@components/plan/PlanChangePreview'
import { EnumPlanChangeType } from '@components/plan/context'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| children | React.ReactNode | Yes | Child components (typically sub-components like .Direct, .Default) |
| headline | string | No | Section headline (e.g., "Added Models", "Modified Directly") |
| type | PlanChangeType | Yes | Change type: Add, Remove, Direct, Indirect, Metadata, Default |
| className | string | No | Additional CSS classes |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Color-coded change preview section |
Usage Examples
// Display added models
<PlanChangePreview
headline="Added Models"
type={EnumPlanChangeType.Add}
>
<PlanChangePreview.Default
type={EnumPlanChangeType.Add}
changes={addedModels}
/>
</PlanChangePreview>
// Display direct modifications with categorization
<PlanChangePreview
headline="Modified Directly"
type={EnumPlanChangeType.Direct}
>
<PlanChangePreview.Direct
changes={directModifications}
disabled={planAction.isProcessing}
/>
</PlanChangePreview>
// Display removed models
<PlanChangePreview
headline="Removed Models"
type={EnumPlanChangeType.Remove}
>
<PlanChangePreview.Default
type={EnumPlanChangeType.Remove}
changes={removedModels}
/>
</PlanChangePreview>
// Direct change with all features
// User can:
// - Expand to see SQL diff
// - View embedded lineage graph
// - Select change category (Breaking/Non-Breaking/Forward-Only)
// - See direct and indirect downstream impacts