Implementation:TobikoData Sqlmesh FactoryColumn

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

Overview

React component factory that creates interactive column elements for column-level lineage visualization with tooltips, icons, and state management.

Description

FactoryColumn is a higher-order component that creates a memoized React component for rendering individual columns in lineage diagrams. It displays column names, data types, descriptions, and provides visual indicators for source columns (no upstream dependencies), active lineage (columns with lineage data), and loading states. The component integrates with the column-level lineage context to track selected columns and supports interactive features including click handlers for expanding lineage, cancel buttons for pending requests, and tooltips showing SQL source code and expressions.

Usage

Use this factory function when building lineage node components that need to render columns with full interactive capabilities. It provides visual feedback for column states, tooltips for source/expression viewing, and proper event handling for column selection.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/Lineage/LineageColumnLevel/FactoryColumn.tsx

Signature

export function FactoryColumn<
  TAdjacencyListKey extends string,
  TAdjacencyListColumnKey extends string,
  TNodeID extends string = NodeId,
  TColumnID extends string = PortId,
  TLeftPortHandleId extends string = PortHandleId,
  TRightPortHandleId extends string = PortHandleId,
  TColumnLevelLineageAdjacencyList extends ColumnLevelLineageAdjacencyList<
    TAdjacencyListKey,
    TAdjacencyListColumnKey
  > = ColumnLevelLineageAdjacencyList<
    TAdjacencyListKey,
    TAdjacencyListColumnKey
  >,
>(
  useLineage: ColumnLevelLineageContextHook<
    TAdjacencyListKey,
    TAdjacencyListColumnKey,
    TColumnID,
    TColumnLevelLineageAdjacencyList
  >,
): React.MemoExoticComponent<...>

Import

import { FactoryColumn } from '@sqlmesh-common/components/Lineage/LineageColumnLevel/FactoryColumn'

I/O Contract

Inputs

Name	Type	Required	Description
useLineage	ColumnLevelLineageContextHook	Yes	Hook function to access column-level lineage context
id	TColumnID	Yes	Unique identifier for the column
nodeId	TNodeID	Yes	Identifier for the parent node
modelName	TAdjacencyListKey	Yes	Name of the model containing this column
name	TAdjacencyListColumnKey	Yes	Name of the column
type	string	Yes	Data type of the column
description	string	No	Optional description text
className	string	No	Additional CSS classes
data	TColumnLevelLineageAdjacencyList	No	Column-level lineage data
isFetching	boolean	No	Whether lineage data is being fetched
error	Error	No	Error object if fetch failed
renderError	Function	No	Custom renderer for error states
renderExpression	Function	No	Custom renderer for SQL expressions
renderSource	Function	No	Custom renderer for SQL source code
onClick	Function	No	Handler for column click events
onCancel	Function	No	Handler for canceling fetch operations

Outputs

Name	Type	Description
Component	React.ReactElement	Rendered column component with interactive features

Usage Examples

// Create a column component
const ColumnComponent = FactoryColumn(useColumnLevelLineageContext)

// Use the component
<ColumnComponent
  id="model1.column1"
  nodeId="model1"
  modelName="model1"
  name="column1"
  type="INTEGER"
  description="Primary key column"
  data={columnLineageData}
  isFetching={false}
  renderError={(error) => <div className="text-red-500">{error.message}</div>}
  renderExpression={(expr) => <pre>{expr}</pre>}
  renderSource={(source) => <CodeBlock>{source}</CodeBlock>}
  onClick={() => handleColumnClick('model1.column1')}
  onCancel={() => handleCancelFetch('model1.column1')}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment