Implementation:TobikoData Sqlmesh TasksOverview

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Plan_Management, Task_Tracking
Last Updated	2026-02-07 20:00 GMT

Overview

A compound React component system for displaying and tracking SQLMesh plan execution tasks with progress visualization.

Description

TasksOverview is a flexible component architecture that displays real-time task execution progress during SQLMesh plan apply operations. It shows batch processing status, completion percentages, and time estimates for model backfills and transformations. The component uses a render props pattern to provide task aggregation data to child components while maintaining separate sub-components for different display contexts.

The system includes sub-components for summary views (TasksSummary), detailed task lists (TasksDetails), and currently processing tasks with animated transitions. Each task displays its interval range, change type (add/remove/direct/indirect/metadata), batch progress, and color-coded status. The component integrates with SQLMesh's plan tracker system to show live updates during plan execution.

Usage

Use TasksOverview in the plan page to display execution progress during plan apply operations. The component tree structure allows flexible layouts for different contexts, from compact summaries in headers to detailed scrollable lists in modal dialogs or dedicated panels.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/tasksOverview/TasksOverview.tsx

Signature

const TasksOverview = function TasksOverview({
  children,
  setRefTasksOverview,
  tasks,
}: {
  tasks: Record<string, ModelSQLMeshChangeDisplay>
  setRefTasksOverview?: RefObject<HTMLDivElement>
  children: (options: {
    models: ModelSQLMeshChangeDisplay[]
    completed: number
    total: number
    completedBatches: number
    totalBatches: number
  }) => JSX.Element
}): JSX.Element

// Sub-components available as static properties
TasksOverview.Summary
TasksOverview.Details
TasksOverview.Block
TasksOverview.Task
TasksOverview.Tasks
TasksOverview.TaskDetails
TasksOverview.TaskProgress
TasksOverview.TaskSize
TasksOverview.TaskDivider
TasksOverview.TaskInfo
TasksOverview.TaskHeadline
TasksOverview.DetailsProgress

Import

import TasksOverview from '@components/tasksOverview/TasksOverview'

I/O Contract

Inputs

Name	Type	Required	Description
tasks	Record<string, ModelSQLMeshChangeDisplay>	Yes	Dictionary of task objects keyed by model name
children	Function	Yes	Render prop receiving aggregated task statistics
setRefTasksOverview	RefObject<HTMLDivElement>	No	React ref for scrolling/positioning

Outputs

Name	Type	Description
JSX.Element	React Component	Rendered tasks overview container with statistics

Usage Examples

// Summary view in plan header
<TasksOverview tasks={planApply.tasks}>
  {({ completed, total, completedBatches, totalBatches }) => (
    <TasksOverview.Summary
      headline="Applying Changes"
      environment={environment.name}
      completed={completed}
      total={total}
      completedBatches={completedBatches}
      totalBatches={totalBatches}
      updateType="Virtual Update"
      updatedAt={planApply.end}
    />
  )}
</TasksOverview>

// Detailed task list with filtering
<TasksOverview tasks={planApply.tasks}>
  {({ models, completed, total }) => (
    <TasksOverview.Details
      models={models}
      added={planOverview.added}
      removed={planOverview.removed}
      direct={planOverview.direct}
      indirect={planOverview.indirect}
      metadata={planOverview.metadata}
      queue={planApply.queue}
      showBatches={true}
      showProgress={true}
      showVirtualUpdate={false}
    />
  )}
</TasksOverview>

// Custom layout using sub-components
<TasksOverview tasks={tasks}>
  {({ models, completed, total, completedBatches, totalBatches }) => (
    <TasksOverview.Block>
      <TasksOverview.TaskHeadline
        headline="Processing Models"
        environment="dev"
      />
      <Progress progress={toRatio(completedBatches, totalBatches)} />
      <TasksOverview.Tasks models={models}>
        {(task) => (
          <TasksOverview.Task>
            <TasksOverview.TaskDetails>
              <TasksOverview.TaskInfo>
                <TaskModelName modelName={task.displayViewName} />
              </TasksOverview.TaskInfo>
              <TasksOverview.DetailsProgress>
                <TasksOverview.TaskSize
                  completed={task.completed}
                  total={task.total}
                  unit="batch"
                />
                <TasksOverview.TaskDivider />
                <TasksOverview.TaskProgress
                  total={task.total}
                  completed={task.completed}
                />
              </TasksOverview.DetailsProgress>
            </TasksOverview.TaskDetails>
          </TasksOverview.Task>
        )}
      </TasksOverview.Tasks>
    </TasksOverview.Block>
  )}
</TasksOverview>

Component Architecture

Main Component

Aggregates task statistics (completed counts, batch totals)
Provides render props with calculated metrics
Manages ref for container scrolling

Sub-Components

Summary: Compact overview with progress bar and metadata
Details: Scrollable list of all tasks with filtering by change type
Block: Scrollable container wrapper
Task/Tasks: Individual task and task list renderers
TaskDetails: Flex layout for task information
TaskProgress/TaskSize/TaskDivider: Formatting components for metrics

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment