Implementation:TobikoData Sqlmesh TableDiff Help

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

Overview

A utility module providing helper functions for analyzing and processing table diff data structures.

Description

TableDiff Help is a TypeScript module that exports utility functions for working with table comparison data in the SQLMesh UI. The module defines prefixing constants (SOURCE_PREFIX = 's__', TARGET_PREFIX = 't__', EMPTY_TABLE_CELL = 'NULL') used to identify source and target columns in diff data. It provides functions for extracting and analyzing diff metadata: getHeaders computes column sets (grain columns, modified, added, deleted) based on schema differences; getRows categorizes rows into modified, added, and deleted groups based on filter settings. The module includes row classification functions (isAddedRow, isDeletedRow, isModified) that compare source and target values using grain columns to determine row states. Cell content accessors (getCellContent, getCellContentSource, getCellContentTarget) handle prefix-based lookups in the diff structure and provide default NULL values for missing data. The hasModified function determines if a column has any modified values across filtered rows, excluding added/deleted columns.

Usage

Use these utilities when building UI components that display table diffs. The functions handle the complexity of analyzing diff data structures, identifying changed columns and rows, and extracting cell values for comparison views. Import specific functions as needed for diff analysis, filtering, and rendering logic.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/tableDiff/help.ts

Signature

export const SOURCE_PREFIX = 's__'
export const TARGET_PREFIX = 't__'
export const EMPTY_TABLE_CELL = 'NULL'

export function getHeaders(
  { source_schema, target_schema }: {
    source_schema: Record<string, string>
    target_schema: Record<string, string>
  },
  filters: Filters,
  on: Array<[string, string]>,
): {
  all: string[]
  modified: number
  deleted: number
  added: number
}

export function getRows(
  diff: any,
  filters: Filters,
  on: Array<[string, string]>,
): {
  all: string[]
  modified: number
  deleted: number
  added: number
}

export function isModified(diff: any, header: string, key: string): boolean

export function isDeletedRow(
  diff: any,
  key: string,
  on: Array<[string, string]>,
): boolean

export function isAddedRow(
  diff: any,
  key: string,
  on: Array<[string, string]>,
): boolean

export function hasModified(
  diff: any,
  rows: string[],
  header: string,
  on: Array<[string, string]>,
): boolean

export function getCellContent(
  diff: any,
  prefix: string,
  header: string,
  key: string,
): string | undefined

export function getCellContentSource(diff: any, header: string, key: string): string

export function getCellContentTarget(diff: any, header: string, key: string): string

Import

import {
  getHeaders,
  getRows,
  isModified,
  getCellContentSource,
  getCellContentTarget,
} from '@components/tableDiff/help'

I/O Contract

Inputs

Name	Type	Required	Description
diff	any	Yes	Diff data structure containing row_diff and schema_diff
filters	Filters	Yes	Object controlling which rows/columns to include
on	Array<[string, string]>	Yes	Grain columns used for row matching (source, target pairs)
header	string	Yes	Column name for cell/column operations
key	string	Yes	Row key for cell/row operations
prefix	string	Yes	Column prefix (SOURCE_PREFIX or TARGET_PREFIX)

Outputs

Name	Type	Description
getHeaders result	object	Object with 'all' array and count properties (modified, deleted, added)
getRows result	object	Object with 'all' array and count properties (modified, deleted, added)
boolean results	boolean	Row/cell state determination (isModified, isAddedRow, isDeletedRow, hasModified)
cell content	undefined	Cell value with NULL default for missing values

Usage Examples

import {
  getHeaders,
  getRows,
  isModified,
  getCellContentSource,
  getCellContentTarget,
  SOURCE_PREFIX,
  TARGET_PREFIX,
} from '@components/tableDiff/help'

// Analyze diff structure
function AnalyzeDiff({ diff, filters }) {
  const on = [['id', 'id']]  // Grain columns

  const headers = getHeaders(
    {
      source_schema: diff.source_schema,
      target_schema: diff.target_schema,
    },
    filters,
    on
  )

  const rows = getRows(diff, filters, on)

  console.log(`Modified columns: ${headers.modified}`)
  console.log(`Added columns: ${headers.added}`)
  console.log(`Deleted columns: ${headers.deleted}`)
  console.log(`Modified rows: ${rows.modified}`)
}

// Render diff cell
function DiffCell({ diff, header, rowKey, on }) {
  const sourceValue = getCellContentSource(diff, header, rowKey)
  const targetValue = getCellContentTarget(diff, header, rowKey)
  const modified = isModified(diff, header, rowKey)

  return (
    <td className={modified ? 'bg-warning-10' : ''}>
      <div>Source: {sourceValue}</div>
      <div>Target: {targetValue}</div>
    </td>
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack