Implementation:TobikoData Sqlmesh ModelLineageSearch
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Data_Lineage, Search |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
ModelLineageSearch provides a responsive search interface for finding and navigating to specific models within a lineage graph visualization.
Description
The ModelLineageSearch component implements a collapsible search interface for model lineage graphs with responsive behavior for different screen sizes. On small screens, it displays as a toggleable button that expands to show the search input, while on larger screens it remains permanently visible. The search functionality uses lazy loading - the model list is only populated when the user begins typing, improving initial render performance. Search results display model display names along with contextual information indicating whether each model is upstream/downstream and directly/indirectly connected to the main node.
Usage
Use ModelLineageSearch in lineage visualization interfaces where users need to quickly locate and navigate to specific models within potentially large dependency graphs.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/graph/ModelLineageSearch.tsx
Signature
export default function ModelLineageSearch({
handleSelect,
}: ModelLineageSearchProps): JSX.Element
interface ModelLineageSearchProps {
handleSelect: ({
name,
description,
}: {
name: string
description: string
}) => void
}
Import
import ModelLineageSearch from '@library/components/graph/ModelLineageSearch'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| handleSelect | Function | Yes | Callback invoked when user selects a model from search results |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Responsive search interface with toggle button |
Usage Examples
import ModelLineageSearch from '@library/components/graph/ModelLineageSearch'
function LineageViewer() {
const handleModelSelect = ({ name, description }) => {
console.log(`Selected model: ${name}`)
// Navigate to or highlight the selected model
}
return (
<div className="lineage-header">
<ModelLineageSearch handleSelect={handleModelSelect} />
</div>
)
}