Implementation:TobikoData Sqlmesh ModelName
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components, SQLMesh |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A specialized component for displaying SQLMesh model names with catalog.schema.table parsing, intelligent truncation, and copy functionality.
Description
The ModelName component parses fully-qualified model names (catalog.schema.model) and renders each segment with distinct styling using CSS variables. It implements intelligent truncation with configurable limits for each segment, showing ellipsis when text exceeds thresholds. The component includes an optional Box icon representing the model, a tooltip that appears when content is truncated or hidden, and an optional CopyButton for copying the full model name. It supports grayscale mode for inactive states and a renderLink prop for wrapping the name in a clickable link. The component uses memoization for performance optimization.
Usage
Use ModelName to display SQLMesh model identifiers throughout the UI. The component handles three-part names (catalog.schema.model) and shorter forms (schema.model or just model). Hide catalog or schema segments when context makes them unnecessary. Enable showCopy for user-facing scenarios where copying the model name is useful. Use grayscale mode for disabled or inactive model references.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/ModelName/ModelName.tsx
Signature
export interface ModelNameProps extends React.HTMLAttributes<HTMLDivElement> {
name: string
hideCatalog?: boolean
hideSchema?: boolean
hideIcon?: boolean
showTooltip?: boolean
showCopy?: boolean
truncateMaxChars?: number
truncateLimitBefore?: number
truncateLimitAfter?: number
grayscale?: boolean
renderLink?: (modelName: React.ReactNode) => React.ReactNode
className?: string
}
export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
({ name, hideCatalog, hideSchema, /* ... */ }, ref) => {
// Implementation
},
)
Import
import { ModelName } from '@sqlmesh-common/components/ModelName/ModelName'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | Fully-qualified model name (catalog.schema.model) |
| hideCatalog | boolean | No | Hide catalog segment (default: false) |
| hideSchema | boolean | No | Hide schema segment (default: false) |
| hideIcon | boolean | No | Hide Box icon (default: false) |
| showTooltip | boolean | No | Show tooltip for full name when truncated (default: true) |
| showCopy | boolean | No | Show copy button (default: false) |
| truncateMaxChars | number | No | Max chars for catalog/schema before truncation (default: 25) |
| truncateLimitBefore | number | No | Chars to show before ellipsis (default: 5) |
| truncateLimitAfter | number | No | Chars to show after ellipsis (default: 7) |
| grayscale | boolean | No | Use grayscale color scheme (default: false) |
| renderLink | (modelName: React.ReactNode) => React.ReactNode | No | Function to wrap name in link |
| className | string | No | Additional CSS classes |
| ref | React.Ref<HTMLDivElement> | No | Forward ref to container |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Formatted model name with icon, segments, and optional features |
Usage Examples
// Basic model name
<ModelName name="my_catalog.my_schema.my_model" />
// Hide catalog
<ModelName
name="my_catalog.my_schema.my_model"
hideCatalog={true}
/>
// With copy button
<ModelName
name="production.analytics.user_events"
showCopy={true}
/>
// Grayscale for inactive models
<ModelName
name="dev.temp.test_model"
grayscale={true}
/>
// As clickable link
<ModelName
name="catalog.schema.orders"
renderLink={(modelName) => (
<Link to={`/models/${name}`}>{modelName}</Link>
)}
/>
// Custom truncation
<ModelName
name="very_long_catalog_name.very_long_schema_name.very_long_model_name"
truncateMaxChars={15}
truncateLimitBefore={3}
truncateLimitAfter={5}
/>
// No icon or tooltip
<ModelName
name="simple.model"
hideIcon={true}
showTooltip={false}
/>
// Model list with consistent styling
{models.map(model => (
<ModelName
key={model.name}
name={model.name}
hideSchema={true}
showCopy={true}
className="mb-2"
/>
))}
Technical Details
Name Parsing
The component parses names by splitting on periods and reversing:
- Input: "catalog.schema.model"
- Parsed: model (last), schema (middle), catalog (first)
- Handles 1, 2, or 3 segment names
CSS Variable Usage
The component uses CSS variables for theming:
- Normal mode: text-model-name-catalog, text-model-name-schema, text-model-name-model
- Grayscale mode: text-model-name-grayscale-catalog, text-model-name-grayscale-schema, text-model-name-grayscale-model
- Copy button: text-model-name-copy-icon, bg-model-name-copy-icon-background