Implementation:TobikoData Sqlmesh Documentation Component
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Model_Documentation, Data_Catalog |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
Documentation_Component displays comprehensive model metadata including details, columns, and descriptions in an organized, expandable interface for SQLMesh models.
Description
The Documentation component renders a complete documentation view for SQLMesh models with three primary sections presented in collapsible details elements. The Model Details section displays metadata including path, display name, owner, cron schedule with formatted timestamps, and dynamically renders custom model properties using a metadata grid layout. The Columns section uses the ModelColumns component to display table schema with type information and descriptions. The Description section renders Markdown-formatted documentation using the react-markdown library. The component implements intelligent value formatting for dates, booleans, arrays, and primitives, and uses custom Tobiko web components (TBK-prefixed) for consistent metadata presentation with expandable sections and resize observation.
Usage
Use the Documentation component to display detailed model information in model detail views, sidebars, or documentation panels. It provides users with comprehensive context about model structure and behavior.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/documentation/Documentation.tsx
Signature
const Documentation = function Documentation({
model,
}: {
model: ModelSQLMeshModel
}): JSX.Element
Import
import Documentation from '@components/documentation/Documentation'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| model | ModelSQLMeshModel | Yes | SQLMesh model object containing metadata, columns, and description |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Scrollable documentation panel with expandable sections |
Usage Examples
import Documentation from '@components/documentation/Documentation'
import { ModelSQLMeshModel } from '@models/sqlmesh-model'
function ModelDetailView({ modelName }) {
const [model, setModel] = useState<ModelSQLMeshModel>()
useEffect(() => {
// Fetch model data
fetchModel(modelName).then(setModel)
}, [modelName])
if (!model) return <div>Loading...</div>
return (
<div className="model-detail">
<h1>{model.displayName}</h1>
<Documentation model={model} />
</div>
)
}