Implementation:TobikoData Sqlmesh DataCatalog Page
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Data_Catalog, Model_Viewer |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
Data catalog page component displaying SQLMesh model details with source code, compiled queries, documentation, and lineage visualization.
Description
PageDataCatalog is the main React component for the data catalog page, providing a comprehensive view of SQLMesh models. It features a split pane layout with model source code and compiled SQL on the left, documentation in the top-right, and interactive lineage graph on the bottom. The page handles model selection via URL params, fetches model details on demand, and supports both local model definitions and remote file loading.
Key features include tabbed interface for source code vs compiled query views, intelligent model loading with hash-based cache invalidation, CodeMirror editor integration with SQLMesh model extensions for clickable model references, ModelLineage graph component for visualizing dependencies, and NotFound fallback for invalid model names.
The page integrates with LineageFlowProvider context for column-level lineage and model navigation, displaying loading states during model fetching, and automatic model selection persistence via lastSelectedModel state.
Usage
Navigate to this page to explore model definitions, view compiled SQL, understand model documentation, and visualize data lineage relationships in the SQLMesh project.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/pages/data-catalog/DataCatalog.tsx
Signature
export default function PageDataCatalog(): JSX.Element
Import
import PageDataCatalog from '@library/pages/data-catalog/DataCatalog'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| modelName | string (URL param) | No | URI-encoded model name from route parameter |
Outputs
| Component | Type | Description |
|---|---|---|
| JSX.Element | React Component | Full-page data catalog view with model details |
Usage Examples
// Route configuration
<Route
path={`${EnumRoutes.DataCatalogModels}/:modelName`}
element={<PageDataCatalog />}
/>
// Navigate to model
navigate(`${EnumRoutes.DataCatalogModels}/${model.name}`)
// URL examples:
// /data-catalog/models/my_schema.customers
// /data-catalog/models/analytics.revenue_report
// Page structure:
// ┌─────────────────────────────────────────┐
// │ Source Code / Compiled Query (tabs) │
// │ ┌─────────────────┐ ┌───────────────┐ │
// │ │ Code Editor │ │ Documentation │ │
// │ │ (SQL/Python) │ │ │ │
// │ └─────────────────┘ └───────────────┘ │
// ├─────────────────────────────────────────┤
// │ Model Lineage Graph │
// │ (upstream/downstream models) │
// └─────────────────────────────────────────┘
// Model click handler
function handleClickModel(modelName: string): void {
const model = models.get(modelName)
if (isNil(model)) return
navigate(`${EnumRoutes.DataCatalogModels}/${model.name}`)
}
// Error handling
function handleError(error: ErrorIDE): void {
console.log(error?.message)
}
// With LineageFlowProvider context
<LineageFlowProvider
showColumns={true}
handleClickModel={handleClickModel}
handleError={handleError}
>
{/* Page content */}
</LineageFlowProvider>
Page Layout
The page uses TBKSplitPane components for resizable panels:
Vertical Split
- Top 60%: Horizontal split with code editor and documentation
- Bottom 40%: Lineage graph visualization
Horizontal Split (Top Section)
- Left 60%: Tabbed code editor
- Source Code Tab: Original model definition
- Compiled Query Tab: Generated SQL (SQL models only)
- Right 40%: Documentation panel
Code Editor Features
- Syntax highlighting for SQL and Python
- SQLMesh model extensions for clickable references
- Read-only view with syntax highlighting
- Loading state during model fetch
States Handled
- Loading: Shows spinner while fetching model details
- Not Found: Displays error page for invalid model names
- No Definition: Shows "Definition Not Found" message
- Remote File: Fetches file content from server via path
- Inline Definition: Displays embedded definition directly