Implementation:TobikoData Sqlmesh UseColumns

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

Overview

React hook that partitions and enriches column data based on selection state for lineage node rendering.

Description

useColumns is a custom React hook that processes raw column data and separates columns into two groups: selected columns that participate in active lineage views and regular columns that remain unselected. The hook takes a Set of selected port IDs, a model identifier, and a Record of raw column data (with data_type and optional description), then returns three memoized values: columnNames (Set of all column IDs for the model), selectedColumns (array of selected column objects with enriched metadata), and columns (array of unselected column objects). Each column object includes the original properties plus an id field generated from the model and column name.

Usage

Use this hook in lineage node components that need to render both selected and unselected columns separately, such as displaying selected columns in a special port section and regular columns in a standard list.

Code Reference

Source Location

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

Signature

export interface Column {
  data_type: string
  description?: string | null
}

export function useColumns<
  TAdjacencyListKey extends string,
  TAdjacencyListColumnKey extends string,
  TColumn extends Column,
  TColumnID extends string = PortId,
>(
  selectedPorts: Set<TColumnID>,
  adjacencyListKey: TAdjacencyListKey,
  rawColumns?: Record<TAdjacencyListColumnKey, TColumn>,
): {
  columns: Array<TColumn & { name: TAdjacencyListColumnKey; id: TColumnID }>
  columnNames: Set<TColumnID>
  selectedColumns: Array<TColumn & { name: TAdjacencyListColumnKey; id: TColumnID }>
}

Import

import { useColumns, type Column } from '@sqlmesh-common/components/Lineage/LineageColumnLevel/useColumns'

I/O Contract

Inputs

Name	Type	Required	Description
selectedPorts	Set<TColumnID>	Yes	Set of column IDs that are currently selected
adjacencyListKey	TAdjacencyListKey	Yes	Model identifier (e.g., model name)
rawColumns	Record<TAdjacencyListColumnKey, TColumn>	No	Raw column data with data_type and optional description

Outputs

Name	Type	Description
columns	Array<TColumn & {name, id}>	Array of unselected column objects with enriched metadata
columnNames	Set<TColumnID>	Set of all column IDs for this model
selectedColumns	Array<TColumn & {name, id}>	Array of selected column objects with enriched metadata

Usage Examples

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

function ModelNode({ modelName, rawColumns, selectedPorts }) {
  const {
    columns,           // Unselected columns
    columnNames,       // All column IDs
    selectedColumns    // Selected columns
  } = useColumns(selectedPorts, modelName, rawColumns)

  return (
    <div>
      {/* Render selected columns in special port section */}
      <div className="selected-columns">
        {selectedColumns.map(col => (
          <ColumnPort
            key={col.id}
            id={col.id}
            name={col.name}
            type={col.data_type}
            description={col.description}
          />
        ))}
      </div>

      {/* Render regular columns */}
      <div className="columns">
        {columns.map(col => (
          <ColumnItem
            key={col.id}
            name={col.name}
            type={col.data_type}
          />
        ))}
      </div>

      <p>Total columns: {columnNames.size}</p>
    </div>
  )
}

// Example with raw column data
const rawColumns = {
  id: { data_type: 'INTEGER', description: 'Primary key' },
  name: { data_type: 'VARCHAR', description: 'User name' },
  email: { data_type: 'VARCHAR', description: null }
}

const selectedPorts = new Set(['users.id', 'users.email'])

const { columns, selectedColumns } = useColumns(
  selectedPorts,
  'users',
  rawColumns
)
// selectedColumns: [{ name: 'id', id: 'users.id', ... }, { name: 'email', ... }]
// columns: [{ name: 'name', id: 'users.name', ... }]

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment