Implementation:TobikoData Sqlmesh NodePorts

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

Overview

Container component that renders lists of node ports with optional filtering and virtualization for performance.

Description

NodePorts is a React component that efficiently renders large lists of ports (columns) within lineage nodes. It supports two rendering modes: filterable lists with search functionality using FilterableList component (with Fuse.js fuzzy search), and simple virtualized lists using VirtualList component. The virtualization optimizes rendering performance by only creating DOM elements for visible items based on estimatedListItemHeight. When isFilterable is true (default), it shows a search input with placeholder "Filter by name or description..." and allows configuring filterOptions for Fuse.js. The component applies nowheel class to prevent scroll wheel interference with the parent graph.

Usage

Use this component when rendering multiple column ports within lineage nodes, especially when dealing with models that have many columns. The virtualization and filtering capabilities maintain UI responsiveness even with hundreds of columns.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/Lineage/node/NodePorts.tsx

Signature

export function NodePorts<TPort>({
  ports,
  estimatedListItemHeight,
  renderPort,
  className,
  isFilterable = true,
  filterOptions,
}: {
  ports: TPort[]
  estimatedListItemHeight: number
  renderPort: (port: TPort) => React.ReactNode
  className?: string
  isFilterable?: boolean
  filterOptions?: IFuseOptions<TPort>
})

Import

import { NodePorts } from '@sqlmesh-common/components/Lineage/node/NodePorts'

I/O Contract

Inputs

Name	Type	Required	Description
ports	TPort[]	Yes	Array of port objects to render
estimatedListItemHeight	number	Yes	Estimated height in pixels of each port item (for virtualization)
renderPort	Function	Yes	Function that renders a single port
className	string	No	Additional CSS classes
isFilterable	boolean	No	Whether to show filter input (default: true)
filterOptions	IFuseOptions<TPort>	No	Fuse.js configuration for filtering behavior

Outputs

Name	Type	Description
Component	React.ReactElement	Virtualized list of ports with optional filtering

Usage Examples

import { NodePorts } from '@sqlmesh-common/components/Lineage/node/NodePorts'
import { NodePort } from '@sqlmesh-common/components/Lineage/node/NodePort'

// Basic usage with filtering
function ModelNode({ modelName, columns }) {
  return (
    <div className="model-node">
      <h3>{modelName}</h3>

      <NodePorts
        ports={columns}
        estimatedListItemHeight={24}  // Height of each column item
        renderPort={(column) => (
          <NodePort
            id={`${modelName}.${column.name}`}
            nodeId={modelName}
          >
            <span>{column.name} ({column.data_type})</span>
          </NodePort>
        )}
        className="max-h-96"
        isFilterable={true}
        filterOptions={{
          keys: ['name', 'description'],  // Search in name and description
          threshold: 0.3                   // Fuzzy match threshold
        }}
      />
    </div>
  )
}

// Without filtering (simple virtualized list)
function SimplePortsList({ ports }) {
  return (
    <NodePorts
      ports={ports}
      estimatedListItemHeight={32}
      renderPort={(port) => (
        <div className="port-item">
          {port.name}
        </div>
      )}
      isFilterable={false}
      className="h-64"
    />
  )
}

// With custom filter options
function AdvancedPortsList({ columns }) {
  return (
    <NodePorts
      ports={columns}
      estimatedListItemHeight={28}
      renderPort={(col) => (
        <NodePort id={col.id} nodeId={col.model}>
          <div>
            <strong>{col.name}</strong>
            <span className="text-sm">{col.data_type}</span>
          </div>
        </NodePort>
      )}
      filterOptions={{
        keys: [
          { name: 'name', weight: 2 },         // Prioritize name matches
          { name: 'description', weight: 1 },
          { name: 'data_type', weight: 0.5 }
        ],
        threshold: 0.4,
        includeScore: true
      }}
      className="border rounded p-2"
    />
  )
}

// Example with many columns (virtualization prevents performance issues)
const manyColumns = Array.from({ length: 500 }, (_, i) => ({
  id: `col_${i}`,
  name: `column_${i}`,
  data_type: 'VARCHAR',
  description: `Description for column ${i}`
}))

<NodePorts
  ports={manyColumns}
  estimatedListItemHeight={24}
  renderPort={(col) => <ColumnItem {...col} />}
/>
// Only visible columns are rendered in DOM, maintaining performance

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment